strapi-plugin-magic-link-v5 5.3.14 → 5.3.16

package/dist/_chunks/{index-BhsVkgwY.mjs → index-B5ocEHHM.mjs}

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl";
 import { Box, Typography, Flex, Button, Accordion, SingleSelect, SingleSelectOption, Grid, Switch, NumberInput, TextInput, Divider, Textarea, Badge } from "@strapi/design-system";
 import { Check, Cog, Lightning, Shield, Mail, CheckCircle, Code, Link, Lock, Key } from "@strapi/icons";
 import { useNotification, useFetchClient } from "@strapi/strapi/admin";
-import { g as getTrad } from "./index-Uan8VrmD.mjs";
+import { g as getTrad } from "./index-uwUKk17V.mjs";
 import { u as usePluginLanguage, L as LicenseGuard, a as LanguageProvider } from "./LicenseGuard-B_r3b1Vh.mjs";
 const EMAIL_TEMPLATES = {
   modern: {
@@ -438,10 +438,10 @@ const getTemplate = (key) => {
 const theme = {
   colors: {
     primary: { 600: "#0284C7", 700: "#075985", 100: "#E0F2FE" },
-    success: { 600: "#16A34A", 700: "#15803D", 50: "#F0FDF4" },
+    success: { 600: "#16A34A", 700: "#15803D" },
     danger: { 600: "#DC2626", 700: "#B91C1C" },
     warning: { 600: "#D97706", 700: "#A16207" },
-    neutral: { 50: "#F9FAFB", 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151", 800: "#1F2937" }
+    neutral: { 400: "#9CA3AF", 700: "#374151", 800: "#1F2937" }
   },
   shadows: { sm: "0 1px 3px rgba(0,0,0,0.1)" },
   borderRadius: { md: "8px", lg: "12px" }
@@ -457,8 +457,8 @@ const PlaceholderGrid = styled(Box)`
 `;
 const PlaceholderTile = styled(Box)`
   border-radius: 8px;
-  border: 1px solid #bae6fd;
-  background: #ffffff;
+  border: 1px solid rgba(14, 165, 233, 0.3);
+  background: rgba(14, 165, 233, 0.04);
   padding: 14px;
   cursor: pointer;
   display: flex;
@@ -486,25 +486,25 @@ const Container = styled(Box)`
   margin: 0 auto;
 `;
 const ToggleCard = styled(Box)`
-  background: ${(props) => props.$active ? theme.colors.success[50] : theme.colors.neutral[50]};
+  background: ${(props) => props.$active ? "rgba(22, 163, 74, 0.08)" : "rgba(128, 128, 128, 0.06)"};
   border-radius: ${theme.borderRadius.md};
   padding: 20px;
   transition: all 0.2s ease;
-  border: 2px solid ${(props) => props.$active ? theme.colors.success[600] : theme.colors.neutral[200]};
-  box-shadow: ${(props) => props.$active ? "0 4px 12px rgba(34, 197, 94, 0.2)" : "0 1px 3px rgba(0, 0, 0, 0.1)"};
+  border: 2px solid ${(props) => props.$active ? "rgba(22, 163, 74, 0.4)" : "rgba(128, 128, 128, 0.2)"};
+  box-shadow: ${(props) => props.$active ? "0 4px 12px rgba(34, 197, 94, 0.15)" : "0 1px 3px rgba(0, 0, 0, 0.1)"};
   position: relative;
   user-select: none;
   cursor: pointer;
   
   &:hover {
     transform: translateY(-2px);
-    box-shadow: ${(props) => props.$active ? "0 6px 16px rgba(34, 197, 94, 0.3)" : "0 3px 8px rgba(0, 0, 0, 0.15)"};
-    border-color: ${(props) => props.$active ? theme.colors.success[700] : theme.colors.neutral[400]};
+    box-shadow: ${(props) => props.$active ? "0 6px 16px rgba(34, 197, 94, 0.25)" : "0 3px 8px rgba(128, 128, 128, 0.2)"};
+    border-color: ${(props) => props.$active ? "rgba(22, 163, 74, 0.6)" : "rgba(128, 128, 128, 0.4)"};
   }
   
   &:active {
     transform: translateY(0px);
-    box-shadow: ${(props) => props.$active ? "0 2px 6px rgba(34, 197, 94, 0.2)" : "0 1px 2px rgba(0, 0, 0, 0.1)"};
+    box-shadow: ${(props) => props.$active ? "0 2px 6px rgba(34, 197, 94, 0.15)" : "0 1px 2px rgba(0, 0, 0, 0.1)"};
   }
   
   ${(props) => props.$active && `
@@ -528,7 +528,7 @@ const ToggleCard = styled(Box)`
       position: absolute;
       top: 8px;
       right: 8px;
-      background: ${theme.colors.neutral[400]};
+      background: rgba(128, 128, 128, 0.5);
       color: white;
       padding: 2px 8px;
       border-radius: 4px;
@@ -563,10 +563,10 @@ const GreenToggle = styled.div`
   
   ${(props) => !props.$isActive && `
     button[role="switch"] {
-      background-color: #E5E7EB;
+      background-color: rgba(128, 128, 128, 0.3);
       
       &:hover {
-        background-color: #D1D5DB;
+        background-color: rgba(128, 128, 128, 0.4);
       }
     }
   `}
@@ -575,8 +575,8 @@ const StickySaveBar = styled(Box)`
   position: sticky;
   top: 0;
   z-index: 10;
-  background: white;
-  border-bottom: 1px solid ${theme.colors.neutral[200]};
+  background: var(--colors-neutral0, white);
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
   box-shadow: ${theme.shadows.sm};
 `;
 const IconWrapper = styled.div`
@@ -587,7 +587,7 @@ const IconWrapper = styled.div`
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
-  background: ${(props) => props.$bgColor || theme.colors.primary[100]};
+  background: ${(props) => props.$bgColor || "rgba(2, 132, 199, 0.12)"};
   
   svg {
     width: 24px;
@@ -1031,7 +1031,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
             }
           ) }),
           /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
-            /* @__PURE__ */ jsx(Box, { background: "neutral50", padding: 4, style: { borderRadius: theme.borderRadius.md, border: "2px solid #E5E7EB", marginBottom: "24px" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Box, { background: "neutral50", padding: 4, style: { borderRadius: theme.borderRadius.md, border: "2px solid rgba(128, 128, 128, 0.2)", marginBottom: "24px" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { minWidth: "150px" }, children: formatMessage({ id: getTrad("settings.language.label") }) }),
               /* @__PURE__ */ jsx(Box, { style: { width: "200px" }, children: /* @__PURE__ */ jsxs(
                 SingleSelect,
@@ -1194,7 +1194,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                     placeholder: formatMessage({ id: getTrad("settings.loginPath.placeholder") })
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid #E5E7EB" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.loginPath.fullPath") }, { path: settings.login_path }) }) })
+                /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.loginPath.fullPath") }, { path: settings.login_path }) }) })
               ] }) }),
               /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.confirmationUrl.label") }) }),
@@ -1313,9 +1313,9 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                 /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px", display: "block" }, children: "*text* = Fett, _text_ = Kursiv (WhatsApp Formatierung)" })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral50", style: { borderRadius: "8px", border: "1px solid #E5E7EB" }, children: [
+            /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral50", style: { borderRadius: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: [
               /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Vorschau:" }),
-              /* @__PURE__ */ jsx(Box, { padding: 3, background: "neutral0", style: { borderRadius: "8px", whiteSpace: "pre-wrap", fontFamily: "system-ui", fontSize: "14px", lineHeight: "1.5", border: "1px solid #D1D5DB" }, children: (settings.whatsapp_message_template || "").replace(/\{\{appName\}\}/g, settings.whatsapp_app_name || "Magic Link").replace(/\{\{link\}\}/g, settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337"}?loginToken=ABC123`).replace(/\{\{expiry\}\}/g, "1 Stunde") })
+              /* @__PURE__ */ jsx(Box, { padding: 3, background: "neutral0", style: { borderRadius: "8px", whiteSpace: "pre-wrap", fontFamily: "system-ui", fontSize: "14px", lineHeight: "1.5", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: (settings.whatsapp_message_template || "").replace(/\{\{appName\}\}/g, settings.whatsapp_app_name || "Magic Link").replace(/\{\{link\}\}/g, settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337"}?loginToken=ABC123`).replace(/\{\{expiry\}\}/g, "1 Stunde") })
             ] }) })
           ] }) }) })
         ] }),
@@ -1407,7 +1407,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid #E5E7EB" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.auth.strategy.current") }, {
+                /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.auth.strategy.current") }, {
                   strategy: settings.user_creation_strategy === "email" ? formatMessage({ id: getTrad("settings.auth.strategy.email") }) : settings.user_creation_strategy === "emailUsername" ? formatMessage({ id: getTrad("settings.auth.strategy.emailUsername") }) : formatMessage({ id: getTrad("settings.auth.strategy.manual") })
                 }) }) })
               ] }) }),
@@ -1588,7 +1588,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   padding: 5,
                   style: {
                     borderRadius: theme.borderRadius.lg,
-                    border: "2px solid #E5E7EB",
+                    border: "2px solid rgba(128, 128, 128, 0.2)",
                     marginBottom: "24px"
                   },
                   children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
@@ -1729,7 +1729,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   padding: 5,
                   style: {
                     borderRadius: theme.borderRadius.lg,
-                    border: "2px solid #E5E7EB",
+                    border: "2px solid rgba(128, 128, 128, 0.2)",
                     marginBottom: "24px"
                   },
                   children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
@@ -1751,7 +1751,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                           padding: 5,
                           style: {
                             borderRadius: "12px",
-                            border: "2px solid #E9D5FF",
+                            border: "2px solid rgba(139, 92, 246, 0.3)",
                             background: "linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%)",
                             marginBottom: "16px"
                           },
@@ -1867,7 +1867,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                 {
                   background: "neutral0",
                   padding: 5,
-                  style: { borderRadius: theme.borderRadius.lg, border: "2px solid #0EA5E9", marginBottom: "24px", background: "linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%)" },
+                  style: { borderRadius: theme.borderRadius.lg, border: "2px solid #0EA5E9", marginBottom: "24px", background: "rgba(14, 165, 233, 0.06)" },
                   children: [
                     /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "12px" }, children: [
                       /* @__PURE__ */ jsx(Mail, { width: "20px", height: "20px", style: { color: "#0EA5E9" } }),
@@ -1893,13 +1893,13 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                               background: "white",
                               style: {
                                 borderRadius: "10px",
-                                border: `2px solid ${isActive ? "#0284C7" : "#E5E7EB"}`,
+                                border: `2px solid ${isActive ? "rgba(2, 132, 199, 0.6)" : "rgba(128, 128, 128, 0.2)"}`,
                                 cursor: "pointer",
                                 transition: "all 0.2s",
                                 padding: "16px",
                                 minHeight: "110px",
                                 boxShadow: isActive ? "0 8px 20px rgba(2, 132, 199, 0.25)" : "0 2px 6px rgba(15, 23, 42, 0.08)",
-                                background: isActive ? "linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 100%)" : "white",
+                                background: isActive ? "rgba(14, 165, 233, 0.08)" : "rgba(128, 128, 128, 0.04)",
                                 outline: "none",
                                 display: "flex",
                                 flexDirection: "column",
@@ -1974,7 +1974,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   {
                     background: "neutral0",
                     padding: 6,
-                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%" },
+                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
                     children: [
                       /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
                         /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
@@ -2011,7 +2011,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                         Box,
                         {
                           style: {
-                            border: "2px solid #E5E7EB",
+                            border: "2px solid rgba(128, 128, 128, 0.2)",
                             borderRadius: "6px",
                             overflow: "hidden",
                             background: "#1e1e1e",
@@ -2095,7 +2095,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   {
                     background: "neutral0",
                     padding: 6,
-                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%" },
+                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
                     children: [
                       /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
                         /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
@@ -2127,7 +2127,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                         Box,
                         {
                           style: {
-                            border: "2px solid #E5E7EB",
+                            border: "2px solid rgba(128, 128, 128, 0.2)",
                             borderRadius: "6px",
                             overflow: "hidden",
                             background: "#f5f5f5",
@@ -2141,7 +2141,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                               {
                                 padding: 2,
                                 background: "neutral200",
-                                style: { borderBottom: "1px solid #d1d5db", flexShrink: 0 },
+                                style: { borderBottom: "1px solid rgba(128, 128, 128, 0.2)", flexShrink: 0 },
                                 children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#666", fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.email.text.filename") }) })
                               }
                             ),
@@ -2238,7 +2238,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                 style: {
                   borderRadius: theme.borderRadius.md,
                   marginBottom: "24px",
-                  border: "2px solid #E5E7EB"
+                  border: "2px solid rgba(128, 128, 128, 0.2)"
                 },
                 children: [
                   /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [

package/dist/_chunks/{index-UgRqR2Sy.js → index-B_W1UPwO.js}

@@ -7,7 +7,7 @@ const reactIntl = require("react-intl");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-DLe8DIR5.js");
+const index = require("./index-uEW37Cq7.js");
 const LicenseGuard = require("./LicenseGuard-BEEd9IpN.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
@@ -442,10 +442,10 @@ const getTemplate = (key) => {
 const theme = {
   colors: {
     primary: { 600: "#0284C7", 700: "#075985", 100: "#E0F2FE" },
-    success: { 600: "#16A34A", 700: "#15803D", 50: "#F0FDF4" },
+    success: { 600: "#16A34A", 700: "#15803D" },
     danger: { 600: "#DC2626", 700: "#B91C1C" },
     warning: { 600: "#D97706", 700: "#A16207" },
-    neutral: { 50: "#F9FAFB", 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151", 800: "#1F2937" }
+    neutral: { 400: "#9CA3AF", 700: "#374151", 800: "#1F2937" }
   },
   shadows: { sm: "0 1px 3px rgba(0,0,0,0.1)" },
   borderRadius: { md: "8px", lg: "12px" }
@@ -461,8 +461,8 @@ const PlaceholderGrid = styled__default.default(designSystem.Box)`
 `;
 const PlaceholderTile = styled__default.default(designSystem.Box)`
   border-radius: 8px;
-  border: 1px solid #bae6fd;
-  background: #ffffff;
+  border: 1px solid rgba(14, 165, 233, 0.3);
+  background: rgba(14, 165, 233, 0.04);
   padding: 14px;
   cursor: pointer;
   display: flex;
@@ -490,25 +490,25 @@ const Container = styled__default.default(designSystem.Box)`
   margin: 0 auto;
 `;
 const ToggleCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.$active ? theme.colors.success[50] : theme.colors.neutral[50]};
+  background: ${(props) => props.$active ? "rgba(22, 163, 74, 0.08)" : "rgba(128, 128, 128, 0.06)"};
   border-radius: ${theme.borderRadius.md};
   padding: 20px;
   transition: all 0.2s ease;
-  border: 2px solid ${(props) => props.$active ? theme.colors.success[600] : theme.colors.neutral[200]};
-  box-shadow: ${(props) => props.$active ? "0 4px 12px rgba(34, 197, 94, 0.2)" : "0 1px 3px rgba(0, 0, 0, 0.1)"};
+  border: 2px solid ${(props) => props.$active ? "rgba(22, 163, 74, 0.4)" : "rgba(128, 128, 128, 0.2)"};
+  box-shadow: ${(props) => props.$active ? "0 4px 12px rgba(34, 197, 94, 0.15)" : "0 1px 3px rgba(0, 0, 0, 0.1)"};
   position: relative;
   user-select: none;
   cursor: pointer;
   
   &:hover {
     transform: translateY(-2px);
-    box-shadow: ${(props) => props.$active ? "0 6px 16px rgba(34, 197, 94, 0.3)" : "0 3px 8px rgba(0, 0, 0, 0.15)"};
-    border-color: ${(props) => props.$active ? theme.colors.success[700] : theme.colors.neutral[400]};
+    box-shadow: ${(props) => props.$active ? "0 6px 16px rgba(34, 197, 94, 0.25)" : "0 3px 8px rgba(128, 128, 128, 0.2)"};
+    border-color: ${(props) => props.$active ? "rgba(22, 163, 74, 0.6)" : "rgba(128, 128, 128, 0.4)"};
   }
   
   &:active {
     transform: translateY(0px);
-    box-shadow: ${(props) => props.$active ? "0 2px 6px rgba(34, 197, 94, 0.2)" : "0 1px 2px rgba(0, 0, 0, 0.1)"};
+    box-shadow: ${(props) => props.$active ? "0 2px 6px rgba(34, 197, 94, 0.15)" : "0 1px 2px rgba(0, 0, 0, 0.1)"};
   }
   
   ${(props) => props.$active && `
@@ -532,7 +532,7 @@ const ToggleCard = styled__default.default(designSystem.Box)`
       position: absolute;
       top: 8px;
       right: 8px;
-      background: ${theme.colors.neutral[400]};
+      background: rgba(128, 128, 128, 0.5);
       color: white;
       padding: 2px 8px;
       border-radius: 4px;
@@ -567,10 +567,10 @@ const GreenToggle = styled__default.default.div`
   
   ${(props) => !props.$isActive && `
     button[role="switch"] {
-      background-color: #E5E7EB;
+      background-color: rgba(128, 128, 128, 0.3);
       
       &:hover {
-        background-color: #D1D5DB;
+        background-color: rgba(128, 128, 128, 0.4);
       }
     }
   `}
@@ -579,8 +579,8 @@ const StickySaveBar = styled__default.default(designSystem.Box)`
   position: sticky;
   top: 0;
   z-index: 10;
-  background: white;
-  border-bottom: 1px solid ${theme.colors.neutral[200]};
+  background: var(--colors-neutral0, white);
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
   box-shadow: ${theme.shadows.sm};
 `;
 const IconWrapper = styled__default.default.div`
@@ -591,7 +591,7 @@ const IconWrapper = styled__default.default.div`
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
-  background: ${(props) => props.$bgColor || theme.colors.primary[100]};
+  background: ${(props) => props.$bgColor || "rgba(2, 132, 199, 0.12)"};
   
   svg {
     width: 24px;
@@ -1035,7 +1035,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral50", padding: 4, style: { borderRadius: theme.borderRadius.md, border: "2px solid #E5E7EB", marginBottom: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral50", padding: 4, style: { borderRadius: theme.borderRadius.md, border: "2px solid rgba(128, 128, 128, 0.2)", marginBottom: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { minWidth: "150px" }, children: formatMessage({ id: index.getTrad("settings.language.label") }) }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "200px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 designSystem.SingleSelect,
@@ -1198,7 +1198,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                     placeholder: formatMessage({ id: index.getTrad("settings.loginPath.placeholder") })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid #E5E7EB" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: index.getTrad("settings.loginPath.fullPath") }, { path: settings.login_path }) }) })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: index.getTrad("settings.loginPath.fullPath") }, { path: settings.login_path }) }) })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: index.getTrad("settings.confirmationUrl.label") }) }),
@@ -1317,9 +1317,9 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px", display: "block" }, children: "*text* = Fett, _text_ = Kursiv (WhatsApp Formatierung)" })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral50", style: { borderRadius: "8px", border: "1px solid #E5E7EB" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral50", style: { borderRadius: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Vorschau:" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, background: "neutral0", style: { borderRadius: "8px", whiteSpace: "pre-wrap", fontFamily: "system-ui", fontSize: "14px", lineHeight: "1.5", border: "1px solid #D1D5DB" }, children: (settings.whatsapp_message_template || "").replace(/\{\{appName\}\}/g, settings.whatsapp_app_name || "Magic Link").replace(/\{\{link\}\}/g, settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337"}?loginToken=ABC123`).replace(/\{\{expiry\}\}/g, "1 Stunde") })
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, background: "neutral0", style: { borderRadius: "8px", whiteSpace: "pre-wrap", fontFamily: "system-ui", fontSize: "14px", lineHeight: "1.5", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: (settings.whatsapp_message_template || "").replace(/\{\{appName\}\}/g, settings.whatsapp_app_name || "Magic Link").replace(/\{\{link\}\}/g, settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337"}?loginToken=ABC123`).replace(/\{\{expiry\}\}/g, "1 Stunde") })
             ] }) })
           ] }) }) })
         ] }),
@@ -1411,7 +1411,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid #E5E7EB" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px" }, children: formatMessage({ id: index.getTrad("settings.auth.strategy.current") }, {
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px" }, children: formatMessage({ id: index.getTrad("settings.auth.strategy.current") }, {
                   strategy: settings.user_creation_strategy === "email" ? formatMessage({ id: index.getTrad("settings.auth.strategy.email") }) : settings.user_creation_strategy === "emailUsername" ? formatMessage({ id: index.getTrad("settings.auth.strategy.emailUsername") }) : formatMessage({ id: index.getTrad("settings.auth.strategy.manual") })
                 }) }) })
               ] }) }),
@@ -1592,7 +1592,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   padding: 5,
                   style: {
                     borderRadius: theme.borderRadius.lg,
-                    border: "2px solid #E5E7EB",
+                    border: "2px solid rgba(128, 128, 128, 0.2)",
                     marginBottom: "24px"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
@@ -1733,7 +1733,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   padding: 5,
                   style: {
                     borderRadius: theme.borderRadius.lg,
-                    border: "2px solid #E5E7EB",
+                    border: "2px solid rgba(128, 128, 128, 0.2)",
                     marginBottom: "24px"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
@@ -1755,7 +1755,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                           padding: 5,
                           style: {
                             borderRadius: "12px",
-                            border: "2px solid #E9D5FF",
+                            border: "2px solid rgba(139, 92, 246, 0.3)",
                             background: "linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%)",
                             marginBottom: "16px"
                           },
@@ -1871,7 +1871,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                 {
                   background: "neutral0",
                   padding: 5,
-                  style: { borderRadius: theme.borderRadius.lg, border: "2px solid #0EA5E9", marginBottom: "24px", background: "linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%)" },
+                  style: { borderRadius: theme.borderRadius.lg, border: "2px solid #0EA5E9", marginBottom: "24px", background: "rgba(14, 165, 233, 0.06)" },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, style: { marginBottom: "12px" }, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(icons.Mail, { width: "20px", height: "20px", style: { color: "#0EA5E9" } }),
@@ -1897,13 +1897,13 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                               background: "white",
                               style: {
                                 borderRadius: "10px",
-                                border: `2px solid ${isActive ? "#0284C7" : "#E5E7EB"}`,
+                                border: `2px solid ${isActive ? "rgba(2, 132, 199, 0.6)" : "rgba(128, 128, 128, 0.2)"}`,
                                 cursor: "pointer",
                                 transition: "all 0.2s",
                                 padding: "16px",
                                 minHeight: "110px",
                                 boxShadow: isActive ? "0 8px 20px rgba(2, 132, 199, 0.25)" : "0 2px 6px rgba(15, 23, 42, 0.08)",
-                                background: isActive ? "linear-gradient(135deg, #E0F2FE 0%, #F0F9FF 100%)" : "white",
+                                background: isActive ? "rgba(14, 165, 233, 0.08)" : "rgba(128, 128, 128, 0.04)",
                                 outline: "none",
                                 display: "flex",
                                 flexDirection: "column",
@@ -1978,7 +1978,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   {
                     background: "neutral0",
                     padding: 6,
-                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%" },
+                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
@@ -2015,7 +2015,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                         designSystem.Box,
                         {
                           style: {
-                            border: "2px solid #E5E7EB",
+                            border: "2px solid rgba(128, 128, 128, 0.2)",
                             borderRadius: "6px",
                             overflow: "hidden",
                             background: "#1e1e1e",
@@ -2099,7 +2099,7 @@ _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
                   {
                     background: "neutral0",
                     padding: 6,
-                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%" },
+                    style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
@@ -2131,7 +2131,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                         designSystem.Box,
                         {
                           style: {
-                            border: "2px solid #E5E7EB",
+                            border: "2px solid rgba(128, 128, 128, 0.2)",
                             borderRadius: "6px",
                             overflow: "hidden",
                             background: "#f5f5f5",
@@ -2145,7 +2145,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                               {
                                 padding: 2,
                                 background: "neutral200",
-                                style: { borderBottom: "1px solid #d1d5db", flexShrink: 0 },
+                                style: { borderBottom: "1px solid rgba(128, 128, 128, 0.2)", flexShrink: 0 },
                                 children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#666", fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: index.getTrad("settings.email.text.filename") }) })
                               }
                             ),
@@ -2242,7 +2242,7 @@ ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1
                 style: {
                   borderRadius: theme.borderRadius.md,
                   marginBottom: "24px",
-                  border: "2px solid #E5E7EB"
+                  border: "2px solid rgba(128, 128, 128, 0.2)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [

package/dist/_chunks/{index-G2HxcZAT.mjs → index-Ci-1p8MA.mjs}

@@ -5,7 +5,7 @@ import styled, { keyframes, css } from "styled-components";
 import { useIntl } from "react-intl";
 import { Box, Flex, Typography, Button, TextInput, Textarea, Checkbox, IconButton, Loader, Searchbar, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Pagination, PreviousLink, PageLink, NextLink, Table, Badge, VisuallyHidden, Main } from "@strapi/design-system";
 import { Cross, Sparkle, Check, Shield, Clock, Lock, Trash, ArrowClockwise, CaretDown, User, Monitor, Calendar, Plus, Earth, WarningCircle, Server, Eye, Mail, Cog, Key, Link } from "@strapi/icons";
-import { g as getTrad, P as PLUGIN_ID } from "./index-Uan8VrmD.mjs";
+import { g as getTrad, P as PLUGIN_ID } from "./index-uwUKk17V.mjs";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { L as LicenseGuard, a as LanguageProvider } from "./LicenseGuard-B_r3b1Vh.mjs";
 const CreateTokenModal = ({ isOpen, onClose, onSubmit, formData, setFormData }) => {
@@ -421,12 +421,12 @@ const ExtendTokenModal = ({
                 paddingLeft: 6,
                 paddingRight: 5,
                 style: {
-                  borderBottom: "1px solid rgba(255,255,255,0.08)"
+                  borderBottom: "1px solid rgba(128, 128, 128, 0.15)"
                 },
                 children: [
                   /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { fontSize: "16px", fontWeight: "600", color: "#ffffff" }, children: formatMessage({ id: getTrad("tokens.extend.title") }) }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: selectedToken.email })
+                    /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "16px", fontWeight: "600" }, children: formatMessage({ id: getTrad("tokens.extend.title") }) }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "13px" }, children: selectedToken.email })
                   ] }),
                   /* @__PURE__ */ jsx(
                     IconButton,
@@ -445,22 +445,23 @@ const ExtendTokenModal = ({
                 Box,
                 {
                   padding: 3,
+                  background: "neutral100",
                   style: {
                     borderRadius: "6px",
                     textAlign: "center",
-                    background: "rgba(255,255,255,0.06)",
-                    border: "1px solid rgba(255,255,255,0.1)"
+                    border: "1px solid rgba(128, 128, 128, 0.15)"
                   },
                   children: [
                     /* @__PURE__ */ jsx(
                       Typography,
                       {
                         variant: "omega",
-                        style: { fontSize: "11px", display: "block", marginBottom: "4px", color: "rgba(255,255,255,0.5)" },
+                        textColor: "neutral500",
+                        style: { fontSize: "11px", display: "block", marginBottom: "4px" },
                         children: formatMessage({ id: getTrad("tokens.extend.currentExpiry") })
                       }
                     ),
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "15px", fontWeight: "600", color: "#ffffff" }, children: formatDate2(selectedToken.expires_at) || formatMessage({ id: getTrad("tokens.details.unlimited") }) })
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "15px", fontWeight: "600" }, children: formatDate2(selectedToken.expires_at) || formatMessage({ id: getTrad("tokens.details.unlimited") }) })
                   ]
                 }
               ),
@@ -469,7 +470,8 @@ const ExtendTokenModal = ({
                   Typography,
                   {
                     variant: "omega",
-                    style: { fontSize: "12px", marginBottom: "12px", display: "block", color: "rgba(255,255,255,0.6)" },
+                    textColor: "neutral600",
+                    style: { fontSize: "12px", marginBottom: "12px", display: "block" },
                     children: formatMessage({ id: getTrad("tokens.extend.selectExtension") })
                   }
                 ),
@@ -547,8 +549,8 @@ const ExtendTokenModal = ({
               ] }),
               /* @__PURE__ */ jsxs(Box, { children: [
                 /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, style: { marginBottom: "8px" }, children: [
-                  /* @__PURE__ */ jsx(Check, { style: { width: "14px", height: "14px", color: "#4ade80" } }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "12px", color: "#4ade80" }, children: formatMessage({ id: getTrad("tokens.extend.newExpiry") }) })
+                  /* @__PURE__ */ jsx(Check, { style: { width: "14px", height: "14px", color: "#16a34a" } }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "success600", style: { fontSize: "12px" }, children: formatMessage({ id: getTrad("tokens.extend.newExpiry") }) })
                 ] }),
                 /* @__PURE__ */ jsx(
                   Box,
@@ -556,11 +558,11 @@ const ExtendTokenModal = ({
                     padding: 3,
                     style: {
                       borderRadius: "6px",
-                      border: "1px solid rgba(74, 222, 128, 0.3)",
-                      background: "rgba(74, 222, 128, 0.08)",
+                      border: "1px solid rgba(22, 163, 74, 0.3)",
+                      background: "rgba(22, 163, 74, 0.06)",
                       textAlign: "center"
                     },
-                    children: /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "15px", color: "#4ade80", fontWeight: "600" }, children: calculateNewExpiryDate() })
+                    children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", style: { fontSize: "15px", fontWeight: "600" }, children: calculateNewExpiryDate() })
                   }
                 )
               ] })
@@ -572,9 +574,9 @@ const ExtendTokenModal = ({
                 paddingBottom: 5,
                 paddingLeft: 6,
                 paddingRight: 6,
+                background: "neutral100",
                 style: {
-                  borderTop: "1px solid rgba(255,255,255,0.08)",
-                  background: "rgba(255,255,255,0.03)",
+                  borderTop: "1px solid rgba(128, 128, 128, 0.12)",
                   borderBottomLeftRadius: "8px",
                   borderBottomRightRadius: "8px"
                 },
@@ -4267,13 +4269,13 @@ const TokensProfessional = () => {
                 {
                   variant: "pi",
                   fontWeight: "semiBold",
+                  textColor: "neutral800",
                   style: {
                     fontFamily: "monospace",
                     fontSize: "12px",
-                    background: "rgba(255, 255, 255, 0.12)",
+                    background: "rgba(128, 128, 128, 0.1)",
                     padding: "2px 8px",
                     borderRadius: "4px",
-                    color: "#ffffff",
                     letterSpacing: "0.5px"
                   },
                   children: [
@@ -4452,7 +4454,7 @@ const TokensProfessional = () => {
               ),
               /* @__PURE__ */ jsx(Box, { padding: 7, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
                 /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsxs(Typography, { variant: "sigma", fontWeight: "semiBold", style: { fontSize: "12px", color: "rgba(255,255,255,0.6)" }, children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { fontSize: "12px" }, children: [
                     formatMessage({ id: getTrad("tokens.details.reference") }),
                     ":"
                   ] }),
@@ -4461,13 +4463,13 @@ const TokensProfessional = () => {
                     {
                       variant: "pi",
                       fontWeight: "bold",
+                      textColor: "neutral800",
                       style: {
                         fontFamily: "monospace",
                         fontSize: "14px",
-                        background: "rgba(255,255,255,0.12)",
+                        background: "rgba(128, 128, 128, 0.1)",
                         padding: "4px 12px",
-                        borderRadius: "6px",
-                        color: "#ffffff"
+                        borderRadius: "6px"
                       },
                       children: [
                         "#",
@@ -4481,7 +4483,7 @@ const TokensProfessional = () => {
                   {
                     style: {
                       borderRadius: "12px",
-                      border: "1px solid rgba(255,255,255,0.1)",
+                      border: "1px solid rgba(128, 128, 128, 0.15)",
                       overflow: "hidden"
                     },
                     children: [
@@ -4492,11 +4494,11 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "14px 20px",
-                            background: "rgba(255,255,255,0.06)",
-                            borderBottom: "1px solid rgba(255,255,255,0.1)"
+                            background: "rgba(128, 128, 128, 0.06)",
+                            borderBottom: "1px solid rgba(128, 128, 128, 0.15)"
                           },
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "13px", color: "rgba(255,255,255,0.7)" }, children: formatMessage({ id: getTrad("tokens.details.status") }) }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral600", style: { fontSize: "13px" }, children: formatMessage({ id: getTrad("tokens.details.status") }) }),
                             getStatusBadge(selectedTokenDetails)
                           ]
                         }
@@ -4508,12 +4510,11 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)",
-                            borderBottom: "1px solid rgba(255,255,255,0.06)"
+                            borderBottom: "1px solid rgba(128, 128, 128, 0.08)"
                           },
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: getTrad("tokens.details.created") }) }),
-                            /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#ffffff" }, children: formatDate(selectedTokenDetails.createdAt) })
+                            /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: getTrad("tokens.details.created") }) }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.createdAt) })
                           ]
                         }
                       ),
@@ -4524,20 +4525,16 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)",
-                            borderBottom: selectedTokenDetails.used_at || selectedTokenDetails.last_used_at ? "1px solid rgba(255,255,255,0.06)" : "none"
+                            borderBottom: selectedTokenDetails.used_at || selectedTokenDetails.last_used_at ? "1px solid rgba(128, 128, 128, 0.08)" : "none"
                           },
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: getTrad("tokens.details.expiresAt") }) }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: getTrad("tokens.details.expiresAt") }) }),
                             /* @__PURE__ */ jsx(
                               Typography,
                               {
                                 variant: "pi",
-                                style: {
-                                  fontSize: "13px",
-                                  fontWeight: "600",
-                                  color: isDateExpired(selectedTokenDetails.expires_at) ? "#f87171" : "#ffffff"
-                                },
+                                textColor: isDateExpired(selectedTokenDetails.expires_at) ? "danger600" : "neutral800",
+                                style: { fontSize: "13px", fontWeight: "600" },
                                 children: formatDate(selectedTokenDetails.expires_at) || formatMessage({ id: getTrad("tokens.details.unlimited") })
                               }
                             )
@@ -4551,19 +4548,19 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(34, 197, 94, 0.08)",
-                            borderBottom: selectedTokenDetails.last_used_at && selectedTokenDetails.last_used_at !== selectedTokenDetails.used_at ? "1px solid rgba(34, 197, 94, 0.15)" : "none"
+                            background: "rgba(34, 197, 94, 0.06)",
+                            borderBottom: selectedTokenDetails.last_used_at && selectedTokenDetails.last_used_at !== selectedTokenDetails.used_at ? "1px solid rgba(34, 197, 94, 0.12)" : "none"
                           },
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: getTrad("tokens.details.usedAt") }) }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: getTrad("tokens.details.usedAt") }) }),
                             /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
                               /* @__PURE__ */ jsx(Box, { style: {
                                 width: "8px",
                                 height: "8px",
                                 borderRadius: "50%",
-                                background: "#4ade80"
+                                background: "#22c55e"
                               } }),
-                              /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#4ade80" }, children: formatDate(selectedTokenDetails.used_at) })
+                              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.used_at) })
                             ] })
                           ]
                         }
@@ -4573,13 +4570,10 @@ const TokensProfessional = () => {
                         {
                           alignItems: "center",
                           justifyContent: "space-between",
-                          style: {
-                            padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)"
-                          },
+                          style: { padding: "12px 20px" },
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: getTrad("tokens.details.lastUsedAt") }) }),
-                            /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#ffffff" }, children: formatDate(selectedTokenDetails.last_used_at) })
+                            /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: getTrad("tokens.details.lastUsedAt") }) }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.last_used_at) })
                           ]
                         }
                       )
@@ -4587,28 +4581,28 @@ const TokensProfessional = () => {
                   }
                 ),
                 (selectedTokenDetails.ip_address || selectedTokenDetails.user_agent) && /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: getTrad("tokens.details.technicalInfo") }) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: getTrad("tokens.details.technicalInfo") }) }),
                   /* @__PURE__ */ jsx(
                     Box,
                     {
                       padding: 4,
+                      background: "neutral100",
                       style: {
                         borderRadius: "8px",
-                        border: "1px solid rgba(255,255,255,0.1)",
-                        background: "rgba(255,255,255,0.04)"
+                        border: "1px solid rgba(128, 128, 128, 0.15)"
                       },
                       children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
                         selectedTokenDetails.ip_address && /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
-                          /* @__PURE__ */ jsx(Earth, { style: { width: "14px", height: "14px", color: "rgba(255,255,255,0.5)" } }),
-                          /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontFamily: "monospace", fontSize: "12px", color: "rgba(255,255,255,0.8)" }, children: selectedTokenDetails.ip_address })
+                          /* @__PURE__ */ jsx(Earth, { style: { width: "14px", height: "14px", color: "var(--colors-neutral500)" } }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontFamily: "monospace", fontSize: "12px" }, children: selectedTokenDetails.ip_address })
                         ] }),
-                        selectedTokenDetails.user_agent && /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "11px", wordBreak: "break-all", color: "rgba(255,255,255,0.5)" }, children: selectedTokenDetails.user_agent })
+                        selectedTokenDetails.user_agent && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "11px", wordBreak: "break-all" }, children: selectedTokenDetails.user_agent })
                       ] })
                     }
                   )
                 ] }),
                 selectedTokenDetails.context && Object.keys(selectedTokenDetails.context).length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: getTrad("tokens.details.context") }) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: getTrad("tokens.details.context") }) }),
                   /* @__PURE__ */ jsx(
                     Box,
                     {
@@ -4631,7 +4625,7 @@ const TokensProfessional = () => {
                   )
                 ] }),
                 /* @__PURE__ */ jsxs(Box, { style: { marginTop: "8px" }, children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "12px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: getTrad("tokens.details.actions") }) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "12px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: getTrad("tokens.details.actions") }) }),
                   /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
                     (selectedTokenDetails.is_used || selectedTokenDetails.expires_at && new Date(selectedTokenDetails.expires_at) < /* @__PURE__ */ new Date() || selectedTokenDetails.status === "blocked") && /* @__PURE__ */ jsx(
                       Button,
@@ -4755,9 +4749,9 @@ const TokensProfessional = () => {
                   paddingBottom: 5,
                   paddingLeft: 7,
                   paddingRight: 7,
+                  background: "neutral100",
                   style: {
-                    borderTop: "1px solid rgba(255,255,255,0.08)",
-                    background: "rgba(255,255,255,0.03)",
+                    borderTop: "1px solid rgba(128, 128, 128, 0.12)",
                     borderBottomLeftRadius: "8px",
                     borderBottomRightRadius: "8px"
                   },

package/dist/_chunks/{index-B9dPEzcE.js → index-CoPzo3AB.js}

@@ -7,7 +7,7 @@ const reactIntl = require("react-intl");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-DLe8DIR5.js");
+const index = require("./index-uEW37Cq7.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {

package/dist/_chunks/{index-CFD6nqxQ.js → index-DRrOQmHI.js}

@@ -7,7 +7,7 @@ const styled = require("styled-components");
 const reactIntl = require("react-intl");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-DLe8DIR5.js");
+const index = require("./index-uEW37Cq7.js");
 const admin = require("@strapi/strapi/admin");
 const LicenseGuard = require("./LicenseGuard-BEEd9IpN.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -425,12 +425,12 @@ const ExtendTokenModal = ({
                 paddingLeft: 6,
                 paddingRight: 5,
                 style: {
-                  borderBottom: "1px solid rgba(255,255,255,0.08)"
+                  borderBottom: "1px solid rgba(128, 128, 128, 0.15)"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { fontSize: "16px", fontWeight: "600", color: "#ffffff" }, children: formatMessage({ id: index.getTrad("tokens.extend.title") }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: selectedToken.email })
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "16px", fontWeight: "600" }, children: formatMessage({ id: index.getTrad("tokens.extend.title") }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "13px" }, children: selectedToken.email })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.IconButton,
@@ -449,22 +449,23 @@ const ExtendTokenModal = ({
                 designSystem.Box,
                 {
                   padding: 3,
+                  background: "neutral100",
                   style: {
                     borderRadius: "6px",
                     textAlign: "center",
-                    background: "rgba(255,255,255,0.06)",
-                    border: "1px solid rgba(255,255,255,0.1)"
+                    border: "1px solid rgba(128, 128, 128, 0.15)"
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       designSystem.Typography,
                       {
                         variant: "omega",
-                        style: { fontSize: "11px", display: "block", marginBottom: "4px", color: "rgba(255,255,255,0.5)" },
+                        textColor: "neutral500",
+                        style: { fontSize: "11px", display: "block", marginBottom: "4px" },
                         children: formatMessage({ id: index.getTrad("tokens.extend.currentExpiry") })
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "15px", fontWeight: "600", color: "#ffffff" }, children: formatDate2(selectedToken.expires_at) || formatMessage({ id: index.getTrad("tokens.details.unlimited") }) })
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "15px", fontWeight: "600" }, children: formatDate2(selectedToken.expires_at) || formatMessage({ id: index.getTrad("tokens.details.unlimited") }) })
                   ]
                 }
               ),
@@ -473,7 +474,8 @@ const ExtendTokenModal = ({
                   designSystem.Typography,
                   {
                     variant: "omega",
-                    style: { fontSize: "12px", marginBottom: "12px", display: "block", color: "rgba(255,255,255,0.6)" },
+                    textColor: "neutral600",
+                    style: { fontSize: "12px", marginBottom: "12px", display: "block" },
                     children: formatMessage({ id: index.getTrad("tokens.extend.selectExtension") })
                   }
                 ),
@@ -551,8 +553,8 @@ const ExtendTokenModal = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 1, style: { marginBottom: "8px" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: "14px", height: "14px", color: "#4ade80" } }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "12px", color: "#4ade80" }, children: formatMessage({ id: index.getTrad("tokens.extend.newExpiry") }) })
+                  /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: "14px", height: "14px", color: "#16a34a" } }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "success600", style: { fontSize: "12px" }, children: formatMessage({ id: index.getTrad("tokens.extend.newExpiry") }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Box,
@@ -560,11 +562,11 @@ const ExtendTokenModal = ({
                     padding: 3,
                     style: {
                       borderRadius: "6px",
-                      border: "1px solid rgba(74, 222, 128, 0.3)",
-                      background: "rgba(74, 222, 128, 0.08)",
+                      border: "1px solid rgba(22, 163, 74, 0.3)",
+                      background: "rgba(22, 163, 74, 0.06)",
                       textAlign: "center"
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "15px", color: "#4ade80", fontWeight: "600" }, children: calculateNewExpiryDate() })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", style: { fontSize: "15px", fontWeight: "600" }, children: calculateNewExpiryDate() })
                   }
                 )
               ] })
@@ -576,9 +578,9 @@ const ExtendTokenModal = ({
                 paddingBottom: 5,
                 paddingLeft: 6,
                 paddingRight: 6,
+                background: "neutral100",
                 style: {
-                  borderTop: "1px solid rgba(255,255,255,0.08)",
-                  background: "rgba(255,255,255,0.03)",
+                  borderTop: "1px solid rgba(128, 128, 128, 0.12)",
                   borderBottomLeftRadius: "8px",
                   borderBottomRightRadius: "8px"
                 },
@@ -4271,13 +4273,13 @@ const TokensProfessional = () => {
                 {
                   variant: "pi",
                   fontWeight: "semiBold",
+                  textColor: "neutral800",
                   style: {
                     fontFamily: "monospace",
                     fontSize: "12px",
-                    background: "rgba(255, 255, 255, 0.12)",
+                    background: "rgba(128, 128, 128, 0.1)",
                     padding: "2px 8px",
                     borderRadius: "4px",
-                    color: "#ffffff",
                     letterSpacing: "0.5px"
                   },
                   children: [
@@ -4456,7 +4458,7 @@ const TokensProfessional = () => {
               ),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 7, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", style: { fontSize: "12px", color: "rgba(255,255,255,0.6)" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { fontSize: "12px" }, children: [
                     formatMessage({ id: index.getTrad("tokens.details.reference") }),
                     ":"
                   ] }),
@@ -4465,13 +4467,13 @@ const TokensProfessional = () => {
                     {
                       variant: "pi",
                       fontWeight: "bold",
+                      textColor: "neutral800",
                       style: {
                         fontFamily: "monospace",
                         fontSize: "14px",
-                        background: "rgba(255,255,255,0.12)",
+                        background: "rgba(128, 128, 128, 0.1)",
                         padding: "4px 12px",
-                        borderRadius: "6px",
-                        color: "#ffffff"
+                        borderRadius: "6px"
                       },
                       children: [
                         "#",
@@ -4485,7 +4487,7 @@ const TokensProfessional = () => {
                   {
                     style: {
                       borderRadius: "12px",
-                      border: "1px solid rgba(255,255,255,0.1)",
+                      border: "1px solid rgba(128, 128, 128, 0.15)",
                       overflow: "hidden"
                     },
                     children: [
@@ -4496,11 +4498,11 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "14px 20px",
-                            background: "rgba(255,255,255,0.06)",
-                            borderBottom: "1px solid rgba(255,255,255,0.1)"
+                            background: "rgba(128, 128, 128, 0.06)",
+                            borderBottom: "1px solid rgba(128, 128, 128, 0.15)"
                           },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "13px", color: "rgba(255,255,255,0.7)" }, children: formatMessage({ id: index.getTrad("tokens.details.status") }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral600", style: { fontSize: "13px" }, children: formatMessage({ id: index.getTrad("tokens.details.status") }) }),
                             getStatusBadge(selectedTokenDetails)
                           ]
                         }
@@ -4512,12 +4514,11 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)",
-                            borderBottom: "1px solid rgba(255,255,255,0.06)"
+                            borderBottom: "1px solid rgba(128, 128, 128, 0.08)"
                           },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: index.getTrad("tokens.details.created") }) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#ffffff" }, children: formatDate(selectedTokenDetails.createdAt) })
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: index.getTrad("tokens.details.created") }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.createdAt) })
                           ]
                         }
                       ),
@@ -4528,20 +4529,16 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)",
-                            borderBottom: selectedTokenDetails.used_at || selectedTokenDetails.last_used_at ? "1px solid rgba(255,255,255,0.06)" : "none"
+                            borderBottom: selectedTokenDetails.used_at || selectedTokenDetails.last_used_at ? "1px solid rgba(128, 128, 128, 0.08)" : "none"
                           },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: index.getTrad("tokens.details.expiresAt") }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: index.getTrad("tokens.details.expiresAt") }) }),
                             /* @__PURE__ */ jsxRuntime.jsx(
                               designSystem.Typography,
                               {
                                 variant: "pi",
-                                style: {
-                                  fontSize: "13px",
-                                  fontWeight: "600",
-                                  color: isDateExpired(selectedTokenDetails.expires_at) ? "#f87171" : "#ffffff"
-                                },
+                                textColor: isDateExpired(selectedTokenDetails.expires_at) ? "danger600" : "neutral800",
+                                style: { fontSize: "13px", fontWeight: "600" },
                                 children: formatDate(selectedTokenDetails.expires_at) || formatMessage({ id: index.getTrad("tokens.details.unlimited") })
                               }
                             )
@@ -4555,19 +4552,19 @@ const TokensProfessional = () => {
                           justifyContent: "space-between",
                           style: {
                             padding: "12px 20px",
-                            background: "rgba(34, 197, 94, 0.08)",
-                            borderBottom: selectedTokenDetails.last_used_at && selectedTokenDetails.last_used_at !== selectedTokenDetails.used_at ? "1px solid rgba(34, 197, 94, 0.15)" : "none"
+                            background: "rgba(34, 197, 94, 0.06)",
+                            borderBottom: selectedTokenDetails.last_used_at && selectedTokenDetails.last_used_at !== selectedTokenDetails.used_at ? "1px solid rgba(34, 197, 94, 0.12)" : "none"
                           },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: index.getTrad("tokens.details.usedAt") }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: index.getTrad("tokens.details.usedAt") }) }),
                             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
                               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: {
                                 width: "8px",
                                 height: "8px",
                                 borderRadius: "50%",
-                                background: "#4ade80"
+                                background: "#22c55e"
                               } }),
-                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#4ade80" }, children: formatDate(selectedTokenDetails.used_at) })
+                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.used_at) })
                             ] })
                           ]
                         }
@@ -4577,13 +4574,10 @@ const TokensProfessional = () => {
                         {
                           alignItems: "center",
                           justifyContent: "space-between",
-                          style: {
-                            padding: "12px 20px",
-                            background: "rgba(255,255,255,0.03)"
-                          },
+                          style: { padding: "12px 20px" },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", color: "rgba(255,255,255,0.6)" }, children: formatMessage({ id: index.getTrad("tokens.details.lastUsedAt") }) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "13px", fontWeight: "600", color: "#ffffff" }, children: formatDate(selectedTokenDetails.last_used_at) })
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "13px" }, children: formatMessage({ id: index.getTrad("tokens.details.lastUsedAt") }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral800", style: { fontSize: "13px", fontWeight: "600" }, children: formatDate(selectedTokenDetails.last_used_at) })
                           ]
                         }
                       )
@@ -4591,28 +4585,28 @@ const TokensProfessional = () => {
                   }
                 ),
                 (selectedTokenDetails.ip_address || selectedTokenDetails.user_agent) && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: index.getTrad("tokens.details.technicalInfo") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: index.getTrad("tokens.details.technicalInfo") }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.Box,
                     {
                       padding: 4,
+                      background: "neutral100",
                       style: {
                         borderRadius: "8px",
-                        border: "1px solid rgba(255,255,255,0.1)",
-                        background: "rgba(255,255,255,0.04)"
+                        border: "1px solid rgba(128, 128, 128, 0.15)"
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
                         selectedTokenDetails.ip_address && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(icons.Earth, { style: { width: "14px", height: "14px", color: "rgba(255,255,255,0.5)" } }),
-                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontFamily: "monospace", fontSize: "12px", color: "rgba(255,255,255,0.8)" }, children: selectedTokenDetails.ip_address })
+                          /* @__PURE__ */ jsxRuntime.jsx(icons.Earth, { style: { width: "14px", height: "14px", color: "var(--colors-neutral500)" } }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", style: { fontFamily: "monospace", fontSize: "12px" }, children: selectedTokenDetails.ip_address })
                         ] }),
-                        selectedTokenDetails.user_agent && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", style: { fontSize: "11px", wordBreak: "break-all", color: "rgba(255,255,255,0.5)" }, children: selectedTokenDetails.user_agent })
+                        selectedTokenDetails.user_agent && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "11px", wordBreak: "break-all" }, children: selectedTokenDetails.user_agent })
                       ] })
                     }
                   )
                 ] }),
                 selectedTokenDetails.context && Object.keys(selectedTokenDetails.context).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: index.getTrad("tokens.details.context") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "8px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: index.getTrad("tokens.details.context") }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.Box,
                     {
@@ -4635,7 +4629,7 @@ const TokensProfessional = () => {
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginTop: "8px" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", style: { marginBottom: "12px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px", color: "rgba(255,255,255,0.5)" }, children: formatMessage({ id: index.getTrad("tokens.details.actions") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "semiBold", textColor: "neutral500", style: { marginBottom: "12px", textTransform: "uppercase", fontSize: "11px", letterSpacing: "0.5px" }, children: formatMessage({ id: index.getTrad("tokens.details.actions") }) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
                     (selectedTokenDetails.is_used || selectedTokenDetails.expires_at && new Date(selectedTokenDetails.expires_at) < /* @__PURE__ */ new Date() || selectedTokenDetails.status === "blocked") && /* @__PURE__ */ jsxRuntime.jsx(
                       designSystem.Button,
@@ -4759,9 +4753,9 @@ const TokensProfessional = () => {
                   paddingBottom: 5,
                   paddingLeft: 7,
                   paddingRight: 7,
+                  background: "neutral100",
                   style: {
-                    borderTop: "1px solid rgba(255,255,255,0.08)",
-                    background: "rgba(255,255,255,0.03)",
+                    borderTop: "1px solid rgba(128, 128, 128, 0.12)",
                     borderBottomLeftRadius: "8px",
                     borderBottomRightRadius: "8px"
                   },

package/dist/_chunks/{index-D4wMyF--.mjs → index-DdtbtuBN.mjs}

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl";
 import { Flex, Loader, Box, Typography, Button, TextInput, Badge } from "@strapi/design-system";
 import { Phone, Check, Message, ArrowClockwise } from "@strapi/icons";
 import { useNotification, useFetchClient } from "@strapi/strapi/admin";
-import { g as getTrad } from "./index-Uan8VrmD.mjs";
+import { g as getTrad } from "./index-uwUKk17V.mjs";
 const theme = {
   colors: {
     primary: { 700: "#075985", 100: "#E0F2FE", 50: "#F0F9FF" },

package/dist/_chunks/{index-DLe8DIR5.js → index-uEW37Cq7.js}

@@ -60,7 +60,7 @@ const index = {
       },
       Component: () => Promise.resolve().then(() => require(
         /* webpackChunkName: "magic-link-tokens" */
-        "./index-CFD6nqxQ.js"
+        "./index-DRrOQmHI.js"
       )),
       permissions: []
       // Leeres Array = keine Permission-Prüfung nötig
@@ -83,7 +83,7 @@ const index = {
           to: `${PLUGIN_ID}/config`,
           Component: () => Promise.resolve().then(() => require(
             /* webpackChunkName: "magic-link-settings" */
-            "./index-UgRqR2Sy.js"
+            "./index-B_W1UPwO.js"
           )),
           permissions: pluginPermissions.readSettings
         },
@@ -122,7 +122,7 @@ const index = {
           to: `${PLUGIN_ID}/whatsapp`,
           Component: () => Promise.resolve().then(() => require(
             /* webpackChunkName: "magic-link-whatsapp" */
-            "./index-B9dPEzcE.js"
+            "./index-CoPzo3AB.js"
           )),
           permissions: []
         }

package/dist/_chunks/{index-Uan8VrmD.mjs → index-uwUKk17V.mjs}

@@ -59,7 +59,7 @@ const index = {
       },
       Component: () => import(
         /* webpackChunkName: "magic-link-tokens" */
-        "./index-G2HxcZAT.mjs"
+        "./index-Ci-1p8MA.mjs"
       ),
       permissions: []
       // Leeres Array = keine Permission-Prüfung nötig
@@ -82,7 +82,7 @@ const index = {
           to: `${PLUGIN_ID}/config`,
           Component: () => import(
             /* webpackChunkName: "magic-link-settings" */
-            "./index-BhsVkgwY.mjs"
+            "./index-B5ocEHHM.mjs"
           ),
           permissions: pluginPermissions.readSettings
         },
@@ -121,7 +121,7 @@ const index = {
           to: `${PLUGIN_ID}/whatsapp`,
           Component: () => import(
             /* webpackChunkName: "magic-link-whatsapp" */
-            "./index-D4wMyF--.mjs"
+            "./index-DdtbtuBN.mjs"
           ),
           permissions: []
         }

package/dist/admin/index.js

@@ -1,4 +1,4 @@
 "use strict";
-const index = require("../_chunks/index-DLe8DIR5.js");
+const index = require("../_chunks/index-uEW37Cq7.js");
 require("@strapi/icons");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-Uan8VrmD.mjs";
+import { i } from "../_chunks/index-uwUKk17V.mjs";
 import "@strapi/icons";
 export {
   i as default

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.3.14",
+  "version": "5.3.16",
   "keywords": [],
   "type": "commonjs",
   "exports": {