strapi-plugin-magic-mail 2.0.3 → 2.0.4

package/dist/_chunks/{App-DYNCyt54.mjs → App-BZaHrE0R.mjs}

@@ -36,6 +36,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 = keyframes`
   from {
     opacity: 0;
@@ -1786,62 +1835,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 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -1930,7 +1923,7 @@ const HeaderContent$3 = styled(Flex)`
   z-index: 1;
 `;
 const Title$3 = styled(Typography)`
-  color: ${theme$3.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -1982,7 +1975,7 @@ const StatsGrid$3 = styled.div`
   }
 `;
 const StatCard$3 = styled(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;
@@ -1991,7 +1984,7 @@ const StatCard$3 = styled(Box)`
   ${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;
@@ -2056,7 +2049,7 @@ const StatIcon$3 = styled(Box)`
 const StatValue$3 = styled(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};
@@ -2069,7 +2062,7 @@ const StatValue$3 = styled(Typography)`
 `;
 const StatLabel$3 = styled(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;
@@ -2082,9 +2075,9 @@ const AccountsContainer = styled(Box)`
   margin-top: ${theme$3.spacing.xl};
 `;
 const EmptyState$3 = styled(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;
@@ -2111,19 +2104,19 @@ const OnlineBadge$1 = styled.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;
   ${css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$3 = styled(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;
@@ -2133,30 +2126,30 @@ const StyledTable$3 = styled(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(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;
 `;
@@ -2171,16 +2164,18 @@ const SearchIcon$2 = styled(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.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;
@@ -2189,7 +2184,7 @@ const StyledSearchInput$2 = styled.input`
   }
   
   &::placeholder {
-    color: ${theme$3.colors.neutral[600]};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 `;
 const HomePage = () => {
@@ -2326,10 +2321,10 @@ const HomePage = () => {
           Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$3.colors.neutral[800],
               marginBottom: "8px"
             },
             children: "No Email Accounts Yet"
@@ -2360,7 +2355,7 @@ const HomePage = () => {
       ] })
     ] }) : /* @__PURE__ */ jsxs(AccountsContainer, { children: [
       /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme$3.spacing.md }, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$3.colors.neutral[700] }, children: "📧 Email Accounts" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "📧 Email Accounts" }),
         /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowAddModal(true), children: "Add Account" })
       ] }) }),
       /* @__PURE__ */ jsxs(FilterBar$3, { children: [
@@ -2451,10 +2446,10 @@ const HomePage = () => {
               account.dailyLimit > 0 && /* @__PURE__ */ jsx(Box, { style: { width: "100%", minWidth: "80px" }, children: /* @__PURE__ */ jsx(
                 Box,
                 {
+                  background: "neutral100",
                   style: {
                     width: "100%",
                     height: "6px",
-                    background: theme$3.colors.neutral[100],
                     borderRadius: "999px",
                     overflow: "hidden"
                   },
@@ -2803,15 +2798,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: {
@@ -2925,7 +2911,7 @@ const HeaderContent$2 = styled(Flex)`
   z-index: 1;
 `;
 const Title$2 = styled(Typography)`
-  color: ${theme$2.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -2977,7 +2963,7 @@ const StatsGrid$2 = styled.div`
   }
 `;
 const StatCard$2 = styled(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;
@@ -2986,7 +2972,7 @@ const StatCard$2 = styled(Box)`
   ${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;
@@ -3051,7 +3037,7 @@ const StatIcon$2 = styled(Box)`
 const StatValue$2 = styled(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};
@@ -3064,7 +3050,7 @@ const StatValue$2 = styled(Typography)`
 `;
 const StatLabel$2 = styled(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;
@@ -3077,9 +3063,9 @@ const RulesContainer = styled(Box)`
   margin-top: ${theme$2.spacing.xl};
 `;
 const EmptyState$2 = styled(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;
@@ -3106,19 +3092,19 @@ const OnlineBadge = styled.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;
   ${css`animation: ${(props) => props.$active ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const StyledTable$2 = styled(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;
@@ -3128,30 +3114,30 @@ const StyledTable$2 = styled(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(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;
 `;
@@ -3166,13 +3152,13 @@ const SearchIcon$1 = styled(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.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};
@@ -3184,7 +3170,7 @@ const StyledSearchInput$1 = styled.input`
   }
   
   &::placeholder {
-    color: ${theme$2.colors.neutral[600]};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 `;
 const RoutingRulesPage = () => {
@@ -3298,10 +3284,10 @@ const RoutingRulesPage = () => {
           Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$2.colors.neutral[800],
               marginBottom: "8px"
             },
             children: "No Routing Rules Yet"
@@ -3332,7 +3318,7 @@ const RoutingRulesPage = () => {
       ] })
     ] }) : /* @__PURE__ */ jsxs(RulesContainer, { children: [
       /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme$2.spacing.md }, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$2.colors.neutral[700] }, children: "🎯 Routing Rules" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "🎯 Routing Rules" }),
         /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(PlusIcon, { style: { width: 16, height: 16 } }), onClick: () => setShowModal(true), children: "Create Rule" })
       ] }) }),
       /* @__PURE__ */ jsxs(FilterBar$2, { children: [
@@ -3821,8 +3807,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)",
@@ -3869,12 +3854,12 @@ const ScrollableDialogBody = styled(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(Box)`
@@ -3892,7 +3877,7 @@ const CodeHeader = styled(Flex)`
 const CodeLabel = styled(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;
@@ -4089,7 +4074,7 @@ const HeaderContent$1 = styled(Flex)`
   z-index: 1;
 `;
 const Title$1 = styled(Typography)`
-  color: ${theme$1.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -4141,7 +4126,7 @@ const StatsGrid$1 = styled.div`
   }
 `;
 const StatCard$1 = styled(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;
@@ -4150,7 +4135,7 @@ const StatCard$1 = styled(Box)`
   ${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;
@@ -4215,7 +4200,7 @@ const StatIcon$1 = styled(Box)`
 const StatValue$1 = styled(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};
@@ -4228,7 +4213,7 @@ const StatValue$1 = styled(Typography)`
 `;
 const StatLabel$1 = styled(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;
@@ -4244,12 +4229,12 @@ const SectionHeader = styled(Box)`
   margin-bottom: ${theme$1.spacing.md};
 `;
 const FilterBar$1 = styled(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;
 `;
@@ -4264,7 +4249,7 @@ const SearchIcon = styled(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;
 `;
@@ -4275,12 +4260,12 @@ const StyledSearchInput = styled(TextInput)`
 const StyledTable$1 = styled(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;
@@ -4290,27 +4275,27 @@ const StyledTable$1 = styled(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(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;
@@ -4373,7 +4358,7 @@ const EmptyFeatureItem = styled.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};
@@ -4757,8 +4742,8 @@ const TemplateList = () => {
       /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
         /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 24, height: 24, color: theme$1.colors.warning[600] } }),
         /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(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__ */ jsxs(Typography, { variant: "pi", style: { color: theme$1.colors.neutral[600], marginTop: "4px" }, children: [
+          /* @__PURE__ */ jsx(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__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px" }, children: [
             "Using ",
             limits.emailTemplates.current,
             " of ",
@@ -4790,10 +4775,10 @@ const TemplateList = () => {
           Typography,
           {
             variant: "alpha",
+            textColor: "neutral800",
             style: {
               fontSize: "1.75rem",
               fontWeight: "700",
-              color: theme$1.colors.neutral[800],
               textAlign: "center",
               display: "block"
             },
@@ -4855,7 +4840,7 @@ const TemplateList = () => {
         ] })
       ] }) }) : /* @__PURE__ */ jsxs(TemplatesContainer, { children: [
         /* @__PURE__ */ jsx(SectionHeader, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$1.colors.neutral[700] }, children: "Email Templates" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Email Templates" }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -5001,16 +4986,16 @@ const TemplateList = () => {
         ] }) }) : /* @__PURE__ */ jsxs(
           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__ */ jsx(MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: theme$1.colors.neutral[400] } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { marginBottom: "8px", color: theme$1.colors.neutral[700] }, children: "No templates found" }),
+              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral700", style: { marginBottom: "8px" }, children: "No templates found" }),
               /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Try adjusting your search or filters" }),
               /* @__PURE__ */ jsx(
                 Button,
@@ -5030,10 +5015,10 @@ const TemplateList = () => {
       ] }) }),
       /* @__PURE__ */ jsx(Tabs.Content, { value: "coreEmails", children: /* @__PURE__ */ jsxs(Box, { style: { marginTop: "24px" }, children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, style: { marginBottom: "24px" }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { fontSize: "1.5rem", fontWeight: 600, color: theme$1.colors.neutral[700] }, children: "Core Email Templates" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Core Email Templates" }),
           /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Design the default Strapi system emails (Password Reset & Email Confirmation)" })
         ] }),
-        /* @__PURE__ */ jsx(Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: `1px solid ${theme$1.colors.neutral[200]}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxs(Table, { colCount: 2, rowCount: 2, children: [
+        /* @__PURE__ */ jsx(Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid #E5E7EB", overflow: "hidden" }, children: /* @__PURE__ */ jsxs(Table, { colCount: 2, rowCount: 2, children: [
           /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
             /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Email Type" }) }),
             /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Actions" }) }) })
@@ -5064,9 +5049,9 @@ const TemplateList = () => {
       display: "flex",
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ jsx(Modal.Header, { style: { borderBottom: `1px solid ${theme$1.colors.neutral[200]}`, paddingBottom: "16px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { style: { borderBottom: "1px solid #E5E7EB", paddingBottom: "16px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
         /* @__PURE__ */ jsx(BoltIcon, { style: { width: 24, height: 24, color: theme$1.colors.primary[600] } }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "beta", style: { color: theme$1.colors.neutral[800] }, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "beta", textColor: "neutral800", children: [
           "Send Template: ",
           selectedTemplate.name
         ] })
@@ -5080,7 +5065,7 @@ const TemplateList = () => {
             ] }),
             /* @__PURE__ */ jsx(RecommendedBadge, { children: "Empfohlen" })
           ] }),
-          /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsxs(CodeBlockWrapper, { children: [
             /* @__PURE__ */ jsx(CodeBlock, { dangerouslySetInnerHTML: {
               __html: `<span class="comment">// Überall in deinem Strapi Backend:</span>
@@ -5133,7 +5118,7 @@ const TemplateList = () => {
             /* @__PURE__ */ jsx(CodeBracketIcon, { style: { width: 20, height: 20, color: theme$1.colors.primary[600] } }),
             "MagicMail Plugin Service"
           ] }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: theme$1.colors.neutral[600], marginBottom: "16px" }, children: "Direkter Zugriff auf den MagicMail Service für erweiterte Optionen." }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Direkter Zugriff auf den MagicMail Service für erweiterte Optionen." }),
           /* @__PURE__ */ jsxs(CodeBlockWrapper, { children: [
             /* @__PURE__ */ jsx(CodeBlock, { dangerouslySetInnerHTML: {
               __html: `<span class="comment">// Inside Strapi backend</span>
@@ -5182,7 +5167,7 @@ const TemplateList = () => {
             /* @__PURE__ */ jsx(DocumentArrowDownIcon, { style: { width: 20, height: 20, color: theme$1.colors.secondary[600] } }),
             "REST API"
           ] }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: theme$1.colors.neutral[600], marginBottom: "16px" }, children: "Für externe Anwendungen, Frontend-Calls oder Postman Tests." }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px" }, children: "Für externe Anwendungen, Frontend-Calls oder Postman Tests." }),
           /* @__PURE__ */ jsxs(CodeBlockWrapper, { children: [
             /* @__PURE__ */ jsx(CodeBlock, { dangerouslySetInnerHTML: {
               __html: `curl -X POST http://localhost:1337/api/magic-mail/send \\
@@ -5404,11 +5389,11 @@ const Container$1 = styled.div`
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #f6f6f9;
+  background: ${(props) => props.theme.colors.neutral100};
 `;
 const Header$1 = styled.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.div`
@@ -5479,8 +5464,8 @@ const TabsWrapper = styled.div`
 `;
 const TabListWrapper = styled.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(Tabs.Root)`
   display: flex;
@@ -5494,7 +5479,7 @@ const StyledTabsContent = styled(Tabs.Content)`
 `;
 const TabContentWrapper = styled.div`
   height: calc(100vh - 240px);
-  background: white;
+  background: ${(props) => props.theme.colors.neutral0};
   position: relative;
 `;
 const TextTabContent = styled.div`
@@ -5566,10 +5551,10 @@ const ImportExportButton = styled.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;
@@ -5577,9 +5562,9 @@ const ImportExportButton = styled.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);
   }
@@ -5598,8 +5583,8 @@ const ImportLabel = styled.label`
   display: inline-block;
 `;
 const BackButton = styled.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;
@@ -5610,8 +5595,8 @@ const BackButton = styled.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);
   }
 
@@ -5625,8 +5610,8 @@ const BackButton = styled.button`
   }
 `;
 const VersionButton = styled.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;
@@ -5638,13 +5623,13 @@ const VersionButton = styled.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);
   }
@@ -5664,7 +5649,7 @@ const VersionModal = styled.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);
@@ -5685,7 +5670,7 @@ const VersionModalOverlay = styled.div`
 `;
 const VersionModalHeader = styled.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;
@@ -5697,13 +5682,13 @@ const VersionModalContent = styled.div`
 `;
 const VersionItem = styled.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);
   }
 `;
@@ -5715,7 +5700,7 @@ const VersionItemHeader = styled.div`
 `;
 const VersionNumber = styled.div`
   font-weight: 600;
-  color: #32324d;
+  color: ${(props) => props.theme.colors.neutral800};
   display: flex;
   align-items: center;
   gap: 8px;
@@ -5730,11 +5715,11 @@ const VersionBadge = styled.span`
 `;
 const VersionDate = styled.div`
   font-size: 13px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
 `;
 const VersionMeta = styled.div`
   font-size: 13px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
   margin-bottom: 12px;
 `;
 const VersionActions = styled.div`
@@ -5787,12 +5772,12 @@ const CloseButton$1 = styled.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;
   }
   
@@ -5804,7 +5789,7 @@ const CloseButton$1 = styled.button`
 const EmptyVersions = styled.div`
   text-align: center;
   padding: 60px 20px;
-  color: #666687;
+  color: ${(props) => props.theme.colors.neutral600};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5814,7 +5799,7 @@ const EmptyVersions = styled.div`
     width: 64px;
     height: 64px;
     margin-bottom: 16px;
-    color: #dcdce4;
+    color: ${(props) => props.theme.colors.neutral300};
   }
 `;
 const EditorPage = () => {
@@ -6516,8 +6501,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)",
@@ -6599,7 +6583,7 @@ const HeaderContent = styled(Flex)`
   z-index: 1;
 `;
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -6651,7 +6635,7 @@ const StatsGrid = styled.div`
   }
 `;
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -6660,7 +6644,7 @@ const StatCard = styled(Box)`
   ${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;
@@ -6724,7 +6708,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(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};
@@ -6735,7 +6719,7 @@ const StatValue = styled(Typography)`
 `;
 const StatLabel = styled(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;
@@ -6745,21 +6729,21 @@ const StatLabel = styled(Typography)`
   }
 `;
 const FilterBar = styled(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(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;
@@ -6769,35 +6753,35 @@ const StyledTable = styled(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(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(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;
@@ -7043,7 +7027,7 @@ const Analytics = () => {
             log.openCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: theme.colors.neutral[400] } }),
+          /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) }),
         /* @__PURE__ */ jsx(Td, { children: log.clickCount > 0 ? /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
@@ -7054,7 +7038,7 @@ const Analytics = () => {
             log.clickCount === 1 ? "time" : "times"
           ] })
         ] }) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: theme.colors.neutral[400] } }),
+          /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No" })
         ] }) })
       ] }, log.id)) })