strapi-plugin-magic-mail 2.0.3 → 2.0.4

package/dist/_chunks/{App-DF9vAGXX.js → App-Bze8Ixs_.js}

@@ -59,6 +59,55 @@ const useAuthRefresh = () => {
     }
   };
 };
+const theme$3 = {
+  colors: {
+    primary: {
+      50: "#F0F9FF",
+      100: "#E0F2FE",
+      500: "#0EA5E9",
+      600: "#0284C7"
+    },
+    secondary: {
+      50: "#FAF5FF",
+      100: "#F3E8FF",
+      600: "#9333EA"
+    },
+    success: {
+      100: "#DCFCE7",
+      500: "#22C55E",
+      600: "#16A34A"
+    },
+    warning: {
+      100: "#FEF3C7",
+      600: "#D97706"
+    },
+    danger: {
+      600: "#DC2626"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  },
+  transitions: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px"
+  },
+  borderRadius: {
+    md: "8px",
+    lg: "12px",
+    xl: "16px"
+  }
+};
 const fadeIn$5 = styled.keyframes`
   from {
     opacity: 0;
@@ -1809,62 +1858,6 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
     ] }) })
   ] }) });
 };
-const theme$3 = {
-  colors: {
-    primary: {
-      50: "#F0F9FF",
-      100: "#E0F2FE",
-      500: "#0EA5E9",
-      600: "#0284C7"
-    },
-    secondary: {
-      600: "#9333EA"
-    },
-    success: {
-      100: "#DCFCE7",
-      500: "#22C55E",
-      600: "#16A34A"
-    },
-    warning: {
-      100: "#FEF3C7",
-      600: "#D97706"
-    },
-    danger: {
-      600: "#DC2626"
-    },
-    neutral: {
-      0: "#FFFFFF",
-      50: "#F9FAFB",
-      100: "#F3F4F6",
-      200: "#E5E7EB",
-      600: "#4B5563",
-      700: "#374151",
-      800: "#1F2937"
-    }
-  },
-  shadows: {
-    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
-    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
-  },
-  transitions: {
-    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
-    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
-    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  spacing: {
-    xs: "4px",
-    sm: "8px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "48px"
-  },
-  borderRadius: {
-    md: "8px",
-    lg: "12px",
-    xl: "16px"
-  }
-};
 const fadeIn$4 = styled.keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -1953,7 +1946,7 @@ const HeaderContent$3 = styled__default.default(designSystem.Flex)`
   z-index: 1;
 `;
 const Title$3 = styled__default.default(designSystem.Typography)`
-  color: ${theme$3.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -2005,7 +1998,7 @@ const StatsGrid$3 = styled__default.default.div`
   }
 `;
 const StatCard$3 = styled__default.default(designSystem.Box)`
-  background: ${theme$3.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.lg};
   padding: 28px ${theme$3.spacing.lg};
   position: relative;
@@ -2014,7 +2007,7 @@ const StatCard$3 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$4} ${theme$3.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$3.shadows.sm};
-  border: 1px solid ${theme$3.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -2079,7 +2072,7 @@ const StatIcon$3 = styled__default.default(designSystem.Box)`
 const StatValue$3 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme$3.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$3.transitions.normal};
@@ -2092,7 +2085,7 @@ const StatValue$3 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$3 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${theme$3.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -2105,9 +2098,9 @@ const AccountsContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$3.spacing.xl};
 `;
 const EmptyState$3 = styled__default.default(designSystem.Box)`
-  background: ${theme$3.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.xl};
-  border: 2px dashed ${theme$3.colors.neutral[200]};
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -2134,19 +2127,19 @@ const OnlineBadge$1 = styled__default.default.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? theme$3.colors.success[500] : theme$3.colors.neutral[400]};
+  background: ${(props) => props.$active ? theme$3.colors.success[500] : props.theme.colors.neutral400};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$3 = styled__default.default(designSystem.Table)`
   thead {
-    background: ${theme$3.colors.neutral[50]};
-    border-bottom: 2px solid ${theme$3.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme$3.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -2156,30 +2149,30 @@ const StyledTable$3 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$3.transitions.fast};
-    border-bottom: 1px solid ${theme$3.colors.neutral[100]};
+    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme$3.colors.neutral[50]};
+      background: ${(props) => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme$3.spacing.lg} ${theme$3.spacing.lg};
-      color: ${theme$3.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 const FilterBar$3 = styled__default.default(designSystem.Flex)`
-  background: ${theme$3.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   padding: ${theme$3.spacing.md} ${theme$3.spacing.lg};
   border-radius: ${theme$3.borderRadius.lg};
   margin-bottom: ${theme$3.spacing.lg};
   box-shadow: ${theme$3.shadows.sm};
-  border: 1px solid ${theme$3.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   gap: ${theme$3.spacing.md};
   align-items: center;
 `;
@@ -2194,16 +2187,18 @@ const SearchIcon$2 = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme$3.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   pointer-events: none;
 `;
 const StyledSearchInput$2 = styled__default.default.input`
   width: 100%;
   padding: 10px 12px 10px 40px;
-  border: 1px solid ${theme$3.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: ${theme$3.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme$3.transitions.fast};
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.neutral800};
   
   &:focus {
     outline: none;
@@ -2212,7 +2207,7 @@ const StyledSearchInput$2 = styled__default.default.input`
   }
   
   &::placeholder {
-    color: ${theme$3.colors.neutral[600]};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 `;
 const HomePage = () => {
@@ -2349,10 +2344,10 @@ const HomePage = () => {
           designSystem.Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$3.colors.neutral[800],
               marginBottom: "8px"
             },
             children: "No Email Accounts Yet"
@@ -2383,7 +2378,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", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$3.colors.neutral[700] }, children: "📧 Email Accounts" }),
+        /* @__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.jsxs(FilterBar$3, { children: [
@@ -2474,10 +2469,10 @@ const HomePage = () => {
               account.dailyLimit > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "100%", minWidth: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Box,
                 {
+                  background: "neutral100",
                   style: {
                     width: "100%",
                     height: "6px",
-                    background: theme$3.colors.neutral[100],
                     borderRadius: "999px",
                     overflow: "hidden"
                   },
@@ -2826,15 +2821,6 @@ const theme$2 = {
     danger: {
       100: "#FEE2E2",
       600: "#DC2626"
-    },
-    neutral: {
-      0: "#FFFFFF",
-      50: "#F9FAFB",
-      100: "#F3F4F6",
-      200: "#E5E7EB",
-      600: "#4B5563",
-      700: "#374151",
-      800: "#1F2937"
     }
   },
   shadows: {
@@ -2948,7 +2934,7 @@ const HeaderContent$2 = styled__default.default(designSystem.Flex)`
   z-index: 1;
 `;
 const Title$2 = styled__default.default(designSystem.Typography)`
-  color: ${theme$2.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -3000,7 +2986,7 @@ const StatsGrid$2 = styled__default.default.div`
   }
 `;
 const StatCard$2 = styled__default.default(designSystem.Box)`
-  background: ${theme$2.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.lg};
   padding: 28px ${theme$2.spacing.lg};
   position: relative;
@@ -3009,7 +2995,7 @@ const StatCard$2 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$3} ${theme$2.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$2.shadows.sm};
-  border: 1px solid ${theme$2.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -3074,7 +3060,7 @@ const StatIcon$2 = styled__default.default(designSystem.Box)`
 const StatValue$2 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme$2.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$2.transitions.normal};
@@ -3087,7 +3073,7 @@ const StatValue$2 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$2 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${theme$2.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -3100,9 +3086,9 @@ const RulesContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$2.spacing.xl};
 `;
 const EmptyState$2 = styled__default.default(designSystem.Box)`
-  background: ${theme$2.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.xl};
-  border: 2px dashed ${theme$2.colors.neutral[200]};
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -3129,19 +3115,19 @@ const OnlineBadge = styled__default.default.div`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? theme$2.colors.success[500] : theme$2.colors.neutral[400]};
+  background: ${(props) => props.$active ? theme$2.colors.success[500] : props.theme.colors.neutral400};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$active ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$2 = styled__default.default(designSystem.Table)`
   thead {
-    background: ${theme$2.colors.neutral[50]};
-    border-bottom: 2px solid ${theme$2.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme$2.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -3151,30 +3137,30 @@ const StyledTable$2 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$2.transitions.fast};
-    border-bottom: 1px solid ${theme$2.colors.neutral[100]};
+    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme$2.colors.neutral[50]};
+      background: ${(props) => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme$2.spacing.lg} ${theme$2.spacing.lg};
-      color: ${theme$2.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 const FilterBar$2 = styled__default.default(designSystem.Flex)`
-  background: ${theme$2.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   padding: ${theme$2.spacing.md} ${theme$2.spacing.lg};
   border-radius: ${theme$2.borderRadius.lg};
   margin-bottom: ${theme$2.spacing.lg};
   box-shadow: ${theme$2.shadows.sm};
-  border: 1px solid ${theme$2.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   gap: ${theme$2.spacing.md};
   align-items: center;
 `;
@@ -3189,13 +3175,13 @@ const SearchIcon$1 = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme$2.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   pointer-events: none;
 `;
 const StyledSearchInput$1 = styled__default.default.input`
   width: 100%;
   padding: 10px 12px 10px 40px;
-  border: 1px solid ${theme$2.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: ${theme$2.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme$2.transitions.fast};
@@ -3207,7 +3193,7 @@ const StyledSearchInput$1 = styled__default.default.input`
   }
   
   &::placeholder {
-    color: ${theme$2.colors.neutral[600]};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 `;
 const RoutingRulesPage = () => {
@@ -3321,10 +3307,10 @@ const RoutingRulesPage = () => {
           designSystem.Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$2.colors.neutral[800],
               marginBottom: "8px"
             },
             children: "No Routing Rules Yet"
@@ -3355,7 +3341,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", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$2.colors.neutral[700] }, children: "🎯 Routing Rules" }),
+        /* @__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.jsxs(FilterBar$2, { children: [
@@ -3844,8 +3830,7 @@ const theme$1 = {
     primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1" },
     secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
     success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
-    warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" },
-    neutral: { 0: "#FFFFFF", 50: "#F9FAFB", 100: "#F3F4F6", 200: "#E5E7EB", 600: "#4B5563", 700: "#374151", 800: "#1F2937" }
+    warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" }
   },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
@@ -3892,12 +3877,12 @@ const ScrollableDialogBody = styled__default.default(designSystem.Box)`
   }
 
   &::-webkit-scrollbar-thumb {
-    background: ${theme$1.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral200};
     border-radius: 3px;
   }
-
+  
   &::-webkit-scrollbar-thumb:hover {
-    background: ${theme$1.colors.neutral[300]};
+    background: ${(props) => props.theme.colors.neutral300};
   }
 `;
 const CodeSection = styled__default.default(designSystem.Box)`
@@ -3915,7 +3900,7 @@ const CodeHeader = styled__default.default(designSystem.Flex)`
 const CodeLabel = styled__default.default(designSystem.Typography)`
   font-size: 15px;
   font-weight: 600;
-  color: ${theme$1.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4112,7 +4097,7 @@ const HeaderContent$1 = styled__default.default(designSystem.Flex)`
   z-index: 1;
 `;
 const Title$1 = styled__default.default(designSystem.Typography)`
-  color: ${theme$1.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -4164,7 +4149,7 @@ const StatsGrid$1 = styled__default.default.div`
   }
 `;
 const StatCard$1 = styled__default.default(designSystem.Box)`
-  background: ${theme$1.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.lg};
   padding: 28px ${theme$1.spacing.lg};
   position: relative;
@@ -4173,7 +4158,7 @@ const StatCard$1 = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$2} ${theme$1.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme$1.shadows.sm};
-  border: 1px solid ${theme$1.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -4238,7 +4223,7 @@ const StatIcon$1 = styled__default.default(designSystem.Box)`
 const StatValue$1 = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme$1.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme$1.transitions.normal};
@@ -4251,7 +4236,7 @@ const StatValue$1 = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel$1 = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${theme$1.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -4267,12 +4252,12 @@ const SectionHeader = styled__default.default(designSystem.Box)`
   margin-bottom: ${theme$1.spacing.md};
 `;
 const FilterBar$1 = styled__default.default(designSystem.Flex)`
-  background: ${theme$1.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   padding: ${theme$1.spacing.md} ${theme$1.spacing.lg};
   border-radius: ${theme$1.borderRadius.lg};
   margin-bottom: ${theme$1.spacing.lg};
   box-shadow: ${theme$1.shadows.sm};
-  border: 1px solid ${theme$1.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   gap: ${theme$1.spacing.md};
   align-items: center;
 `;
@@ -4287,7 +4272,7 @@ const SearchIcon = styled__default.default(outline.MagnifyingGlassIcon)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme$1.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   pointer-events: none;
   z-index: 1;
 `;
@@ -4298,12 +4283,12 @@ const StyledSearchInput = styled__default.default(designSystem.TextInput)`
 const StyledTable$1 = styled__default.default(designSystem.Table)`
   width: 100%;
   thead {
-    background: ${theme$1.colors.neutral[50]};
-    border-bottom: 2px solid ${theme$1.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme$1.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -4313,27 +4298,27 @@ const StyledTable$1 = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme$1.transitions.fast};
-    border-bottom: 1px solid ${theme$1.colors.neutral[100]};
+    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme$1.colors.neutral[50]};
+      background: ${(props) => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme$1.spacing.lg} ${theme$1.spacing.lg};
-      color: ${theme$1.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 const EmptyState$1 = styled__default.default(designSystem.Box)`
-  background: ${theme$1.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.xl};
-  border: 2px dashed ${theme$1.colors.neutral[200]};
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -4396,7 +4381,7 @@ const EmptyFeatureItem = styled__default.default.div`
   text-align: center;
   gap: ${theme$1.spacing.sm};
   padding: ${theme$1.spacing.lg};
-  background: ${theme$1.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.md};
   box-shadow: ${theme$1.shadows.sm};
   transition: ${theme$1.transitions.fast};
@@ -4780,8 +4765,8 @@ const TemplateList = () => {
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
         /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 24, height: 24, color: theme$1.colors.warning[600] } }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { color: theme$1.colors.neutral[800] }, children: limits.emailTemplates.current >= limits.emailTemplates.max ? `You've reached your ${getTierInfo().name} limit!` : `You're approaching your ${getTierInfo().name} limit!` }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.neutral[600], marginTop: "4px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: limits.emailTemplates.current >= limits.emailTemplates.max ? `You've reached your ${getTierInfo().name} limit!` : `You're approaching your ${getTierInfo().name} limit!` }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px" }, children: [
             "Using ",
             limits.emailTemplates.current,
             " of ",
@@ -4813,10 +4798,10 @@ const TemplateList = () => {
           designSystem.Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$1.colors.neutral[800],
               textAlign: "center",
               display: "block"
             },
@@ -4878,7 +4863,7 @@ const TemplateList = () => {
         ] })
       ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(TemplatesContainer, { children: [
         /* @__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", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$1.colors.neutral[700] }, children: "Email Templates" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Email Templates" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Button,
             {
@@ -5024,16 +5009,16 @@ const TemplateList = () => {
         ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
           designSystem.Box,
           {
+            background: "neutral100",
             style: {
               padding: "80px 32px",
               textAlign: "center",
-              background: theme$1.colors.neutral[50],
               borderRadius: theme$1.borderRadius.lg,
-              border: `1px dashed ${theme$1.colors.neutral[200]}`
+              border: "1px dashed #D1D5DB"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: theme$1.colors.neutral[400] } }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { marginBottom: "8px", color: theme$1.colors.neutral[700] }, children: "No templates found" }),
+              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral700", style: { marginBottom: "8px" }, children: "No templates found" }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Try adjusting your search or filters" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Button,
@@ -5053,10 +5038,10 @@ const TemplateList = () => {
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "coreEmails", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "24px" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, style: { marginBottom: "24px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$1.colors.neutral[700] }, children: "Core Email Templates" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Core Email Templates" }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Design the default Strapi system emails (Password Reset & Email Confirmation)" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: `1px solid ${theme$1.colors.neutral[200]}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 2, rowCount: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid #E5E7EB", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 2, rowCount: 2, 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: "Email Type" }) }),
             /* @__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" }) }) })
@@ -5087,9 +5072,9 @@ const TemplateList = () => {
       display: "flex",
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { style: { borderBottom: `1px solid ${theme$1.colors.neutral[200]}`, paddingBottom: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, 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", style: { color: theme$1.colors.neutral[800] }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", textColor: "neutral800", children: [
           "Send Template: ",
           selectedTemplate.name
         ] })
@@ -5103,7 +5088,7 @@ const TemplateList = () => {
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(RecommendedBadge, { children: "Empfohlen" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { color: theme$1.colors.neutral[600], marginBottom: "16px" }, children: "Nutze die standard Strapi Email-Funktion. MagicMail fängt sie automatisch ab und wendet alle Features an." }),
+          /* @__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>
@@ -5156,7 +5141,7 @@ const TemplateList = () => {
             /* @__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", style: { color: theme$1.colors.neutral[600], marginBottom: "16px" }, children: "Direkter Zugriff auf den MagicMail Service für erweiterte Optionen." }),
+          /* @__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>
@@ -5205,7 +5190,7 @@ const TemplateList = () => {
             /* @__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", style: { color: theme$1.colors.neutral[600], marginBottom: "16px" }, children: "Für externe Anwendungen, Frontend-Calls oder Postman Tests." }),
+          /* @__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 \\
@@ -5427,11 +5412,11 @@ const Container$1 = styled__default.default.div`
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f6f6f9;
+  background: ${(props) => props.theme.colors.neutral100};
 `;
 const Header$1 = styled__default.default.div`
   padding: 24px;
-  background: white;
+  background: ${(props) => props.theme.colors.neutral0};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 `;
 const HeaderRow = styled__default.default.div`
@@ -5502,8 +5487,8 @@ const TabsWrapper = styled__default.default.div`
 `;
 const TabListWrapper = styled__default.default.div`
   padding: 0 24px;
-  background: white;
-  border-bottom: 1px solid #eaeaef;
+  background: ${(props) => props.theme.colors.neutral0};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
 `;
 const StyledTabsRoot = styled__default.default(designSystem.Tabs.Root)`
   display: flex;
@@ -5517,7 +5502,7 @@ const StyledTabsContent = styled__default.default(designSystem.Tabs.Content)`
 `;
 const TabContentWrapper = styled__default.default.div`
   height: calc(100vh - 240px);
-  background: white;
+  background: ${(props) => props.theme.colors.neutral0};
   position: relative;
 `;
 const TextTabContent = styled__default.default.div`
@@ -5589,10 +5574,10 @@ const ImportExportButton = styled__default.default.span`
   gap: 6px;
   padding: 8px 16px;
   height: 36px;
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 4px;
-  color: #32324d;
+  color: ${(props) => props.theme.colors.neutral800};
   font-weight: 500;
   font-size: 13px;
   cursor: pointer;
@@ -5600,9 +5585,9 @@ const ImportExportButton = styled__default.default.span`
   white-space: nowrap;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #0EA5E9;
-    color: #0EA5E9;
+    background: ${(props) => props.theme.colors.neutral100};
+    border-color: ${(props) => props.theme.colors.primary600};
+    color: ${(props) => props.theme.colors.primary600};
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -5621,8 +5606,8 @@ const ImportLabel = styled__default.default.label`
   display: inline-block;
 `;
 const BackButton = styled__default.default.button`
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 4px;
   padding: 8px 10px;
   height: 36px;
@@ -5633,8 +5618,8 @@ const BackButton = styled__default.default.button`
   transition: all 200ms;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #c0c0cf;
+    background: ${(props) => props.theme.colors.neutral100};
+    border-color: ${(props) => props.theme.colors.neutral300};
     transform: translateY(-1px);
   }
 
@@ -5648,8 +5633,8 @@ const BackButton = styled__default.default.button`
   }
 `;
 const VersionButton = styled__default.default.button`
-  background: white;
-  border: 1px solid #dcdce4;
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 4px;
   padding: 8px 16px;
   height: 36px;
@@ -5661,13 +5646,13 @@ const VersionButton = styled__default.default.button`
   transition: all 200ms;
   font-size: 13px;
   font-weight: 500;
-  color: #32324d;
+  color: ${(props) => props.theme.colors.neutral800};
   white-space: nowrap;
 
   &:hover {
-    background: #f6f6f9;
-    border-color: #0EA5E9;
-    color: #0EA5E9;
+    background: ${(props) => props.theme.colors.neutral100};
+    border-color: ${(props) => props.theme.colors.primary600};
+    color: ${(props) => props.theme.colors.primary600};
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
@@ -5687,7 +5672,7 @@ const VersionModal = styled__default.default.div`
   right: ${(props) => props.$isOpen ? "0" : "-450px"};
   width: 450px;
   height: 100vh;
-  background: white;
+  background: ${(props) => props.theme.colors.neutral0};
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   z-index: 9999;
   transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -5708,7 +5693,7 @@ const VersionModalOverlay = styled__default.default.div`
 `;
 const VersionModalHeader = styled__default.default.div`
   padding: 24px;
-  border-bottom: 1px solid #eaeaef;
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -5720,13 +5705,13 @@ const VersionModalContent = styled__default.default.div`
 `;
 const VersionItem = styled__default.default.div`
   padding: 16px;
-  border: 1px solid #eaeaef;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: 8px;
   margin-bottom: 12px;
   transition: all 150ms;
   
   &:hover {
-    border-color: #0EA5E9;
+    border-color: ${(props) => props.theme.colors.primary600};
     box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
   }
 `;
@@ -5738,7 +5723,7 @@ const VersionItemHeader = styled__default.default.div`
 `;
 const VersionNumber = styled__default.default.div`
   font-weight: 600;
-  color: #32324d;
+  color: ${(props) => props.theme.colors.neutral800};
   display: flex;
   align-items: center;
   gap: 8px;
@@ -5753,11 +5738,11 @@ const VersionBadge = styled__default.default.span`
 `;
 const VersionDate = styled__default.default.div`
   font-size: 13px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
 `;
 const VersionMeta = styled__default.default.div`
   font-size: 13px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
   margin-bottom: 12px;
 `;
 const VersionActions = styled__default.default.div`
@@ -5810,12 +5795,12 @@ const CloseButton$1 = styled__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
   transition: all 150ms;
   
   &:hover {
-    color: #32324d;
-    background: #f6f6f9;
+    color: ${(props) => props.theme.colors.neutral800};
+    background: ${(props) => props.theme.colors.neutral100};
     border-radius: 4px;
   }
   
@@ -5827,7 +5812,7 @@ const CloseButton$1 = styled__default.default.button`
 const EmptyVersions = styled__default.default.div`
   text-align: center;
   padding: 60px 20px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5837,7 +5822,7 @@ const EmptyVersions = styled__default.default.div`
     width: 64px;
     height: 64px;
     margin-bottom: 16px;
-    color: #dcdce4;
+    color: ${(props) => props.theme.colors.neutral300};
   }
 `;
 const EditorPage = () => {
@@ -6539,8 +6524,7 @@ const theme = {
     primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },
     secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
     success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
-    danger: { 100: "#FEE2E2", 500: "#EF4444", 600: "#DC2626" },
-    neutral: { 0: "#FFFFFF", 50: "#F9FAFB", 100: "#F3F4F6", 200: "#E5E7EB", 600: "#4B5563", 700: "#374151", 800: "#1F2937" }
+    danger: { 100: "#FEE2E2", 500: "#EF4444", 600: "#DC2626" }
   },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
@@ -6622,7 +6606,7 @@ const HeaderContent = styled__default.default(designSystem.Flex)`
   z-index: 1;
 `;
 const Title = styled__default.default(designSystem.Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -6674,7 +6658,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -6683,7 +6667,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$1} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -6747,7 +6731,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
 const StatValue = styled__default.default(designSystem.Typography)`
   font-size: 2.25rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   transition: all ${theme.transitions.normal};
   line-height: 1;
   margin-bottom: ${theme.spacing.xs};
@@ -6758,7 +6742,7 @@ const StatValue = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel = styled__default.default(designSystem.Typography)`
   font-size: 0.875rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -6768,21 +6752,21 @@ const StatLabel = styled__default.default(designSystem.Typography)`
   }
 `;
 const FilterBar = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg} ${theme.spacing.xl};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
 `;
 const StyledTable = styled__default.default(designSystem.Table)`
   thead {
-    background: ${theme.colors.neutral[50]};
-    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -6792,35 +6776,35 @@ const StyledTable = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${(props) => props.theme.colors.primary100};
     }
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
 `;
 const TableContainer = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   box-shadow: ${theme.shadows.md};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   overflow: hidden;
   margin-bottom: ${theme.spacing.xl};
 `;
 const EmptyState = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${theme.colors.neutral[200]};
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -7066,7 +7050,7 @@ const Analytics = () => {
             log.openCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: theme.colors.neutral[400] } }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: log.clickCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
@@ -7077,7 +7061,7 @@ const Analytics = () => {
             log.clickCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: theme.colors.neutral[400] } }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) })
       ] }, log.id)) })