strapi-plugin-magic-sessionmanager 4.4.2 → 4.4.4

package/dist/_chunks/{Settings-DVRIrGho.js → Settings-Cy-6vah_.js}

@@ -7,18 +7,12 @@ const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
 const icons = require("@strapi/icons");
 const styled = require("styled-components");
-const index = require("./index-DtBfKBne.js");
-const useLicense = require("./useLicense-NCFYHpDd.js");
-const StyledButtons = require("./StyledButtons-D2EbG_Zw.js");
+const index = require("./index-BEh2DizI.js");
+const useLicense = require("./useLicense-DFdVp_qI.js");
+const StyledButtons = require("./StyledButtons-DDuxnYz8.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {
-  colors: {
-    primary: { 600: "#0284C7", 700: "#075985", 100: "#E0F2FE", 50: "#F0F9FF" },
-    success: { 600: "#16A34A", 700: "#15803D" },
-    danger: { 600: "#DC2626" },
-    neutral: { 0: "#FFFFFF", 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151" }
-  },
   borderRadius: { md: "8px", lg: "12px" }
 };
 const fadeIn = styled.keyframes`
@@ -38,17 +32,17 @@ const StickySaveBar = styled__default.default(designSystem.Box)`
   position: sticky;
   top: 0;
   z-index: 10;
-  background: ${(props) => props.theme.colors.neutral0};
-  border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
+  background: ${(p) => p.theme.colors.neutral0};
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 `;
 const ToggleCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.$active ? "linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)" : "linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%)"};
+  background: ${(props) => props.$active ? "linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.12) 100%)" : "linear-gradient(135deg, rgba(128, 128, 128, 0.04) 0%, rgba(128, 128, 128, 0.08) 100%)"};
   border-radius: ${theme.borderRadius.lg};
   padding: 24px;
   min-height: 120px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 2px solid ${(props) => props.$active ? theme.colors.success[600] : theme.colors.neutral[200]};
+  border: 2px solid ${(props) => props.$active ? "var(--colors-success600, #16A34A)" : "rgba(128, 128, 128, 0.2)"};
   box-shadow: ${(props) => props.$active ? "0 4px 20px rgba(34, 197, 94, 0.15)" : "0 2px 8px rgba(0, 0, 0, 0.06)"};
   position: relative;
   cursor: pointer;
@@ -58,7 +52,7 @@ const ToggleCard = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-4px);
     box-shadow: ${(props) => props.$active ? "0 8px 30px rgba(34, 197, 94, 0.25)" : "0 6px 16px rgba(0, 0, 0, 0.12)"};
-    border-color: ${(props) => props.$active ? theme.colors.success[700] : theme.colors.neutral[300]};
+    border-color: ${(props) => props.$active ? "var(--colors-success600, #15803D)" : "rgba(128, 128, 128, 0.3)"};
   }
   
   &:active {
@@ -71,7 +65,7 @@ const ToggleCard = styled__default.default(designSystem.Box)`
       position: absolute;
       top: 12px;
       right: 12px;
-      background: ${theme.colors.success[600]};
+      background: ${"var(--colors-success600, #16A34A)"};
       color: white;
       padding: 4px 10px;
       border-radius: 6px;
@@ -88,7 +82,7 @@ const ToggleCard = styled__default.default(designSystem.Box)`
       position: absolute;
       top: 12px;
       right: 12px;
-      background: ${theme.colors.neutral[400]};
+      background: ${"rgba(128, 128, 128, 0.4)"};
       color: white;
       padding: 4px 10px;
       border-radius: 6px;
@@ -102,17 +96,17 @@ const ToggleCard = styled__default.default(designSystem.Box)`
 const GreenToggle = styled__default.default.div`
   ${(props) => props.$isActive && `
     button[role="switch"] {
-      background-color: #16A34A !important;
-      border-color: #16A34A !important;
+      background-color: var(--colors-success600, #16A34A) !important;
+      border-color: var(--colors-success600, #16A34A) !important;
       
       &:hover {
-        background-color: #15803D !important;
-        border-color: #15803D !important;
+        background-color: var(--colors-success600, #15803D) !important;
+        border-color: var(--colors-success600, #15803D) !important;
       }
       
       &:focus {
-        background-color: #16A34A !important;
-        border-color: #16A34A !important;
+        background-color: var(--colors-success600, #16A34A) !important;
+        border-color: var(--colors-success600, #16A34A) !important;
         box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
       }
     }
@@ -125,10 +119,10 @@ const GreenToggle = styled__default.default.div`
   
   ${(props) => !props.$isActive && `
     button[role="switch"] {
-      background-color: #E5E7EB;
+      background-color: rgba(128, 128, 128, 0.2);
       
       &:hover {
-        background-color: #D1D5DB;
+        background-color: rgba(128, 128, 128, 0.2);
       }
     }
   `}
@@ -494,8 +488,8 @@ const SettingsPage = () => {
             size: "L",
             disabled: !hasChanges || saving,
             style: {
-              background: hasChanges && !saving ? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" : "#e5e7eb",
-              color: hasChanges && !saving ? "white" : "#9ca3af",
+              background: hasChanges && !saving ? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" : "rgba(128, 128, 128, 0.2)",
+              color: hasChanges && !saving ? "white" : "var(--colors-neutral500)",
               fontWeight: "600",
               padding: "12px 24px",
               border: "none",
@@ -518,8 +512,8 @@ const SettingsPage = () => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 10, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "primary50", hasRadius: true, style: { marginBottom: "24px", border: "1px solid #bae6fd" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { style: { width: "20px", height: "20px", color: "#0284C7" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "primary50", hasRadius: true, style: { marginBottom: "24px", border: "1px solid rgba(14, 165, 233, 0.3)" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { style: { width: "20px", height: "20px", color: "var(--colors-primary600, #0284C7)" } }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "primary700", style: { marginBottom: "4px" }, children: t("settings.license.title", "Current License Status") }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
@@ -552,7 +546,7 @@ const SettingsPage = () => {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: t("settings.general.timeout.title", "SESSION TIMEOUT") }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: t("settings.general.timeout.title", "SESSION TIMEOUT") }),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: t("settings.general.timeout.inactivity", "Inactivity Timeout") }),
@@ -593,7 +587,7 @@ const SettingsPage = () => {
               ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginBottom: "24px" } }),
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: [
               "🧹 ",
               t("settings.general.cleanup.title", "AUTO-CLEANUP & RETENTION")
             ] }),
@@ -635,8 +629,8 @@ const SettingsPage = () => {
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: settings.retentionDays === -1 ? t("settings.general.retention.hintNever", "Old sessions deleted after never") : t("settings.general.retention.hint", "Old sessions deleted after {days}", { days: `${settings.retentionDays} days` }) })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "danger100", style: { borderRadius: theme.borderRadius.md, border: `2px solid ${theme.colors.danger[200]}` }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { style: { width: "18px", height: "18px", color: theme.colors.danger[600], flexShrink: 0, marginTop: "2px" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "danger100", style: { borderRadius: theme.borderRadius.md, border: `2px solid rgba(220, 38, 38, 0.2)` }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { style: { width: "18px", height: "18px", color: "var(--colors-danger600, #DC2626)", flexShrink: 0, marginTop: "2px" } }),
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "danger700", style: { marginBottom: "8px", display: "block" }, children: t("settings.general.danger.title", "Danger Zone") }),
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", style: { fontSize: "13px", lineHeight: "1.7" }, children: t("settings.general.danger.description", "Clean All Inactive: Permanently deletes all inactive sessions. This cannot be undone.") })
@@ -666,7 +660,7 @@ const SettingsPage = () => {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: t("settings.security.options", "SECURITY OPTIONS") }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: t("settings.security.options", "SECURITY OPTIONS") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Box,
               {
@@ -675,12 +669,12 @@ const SettingsPage = () => {
                 style: {
                   borderRadius: theme.borderRadius.lg,
                   marginBottom: "32px",
-                  border: `2px solid ${theme.colors.primary[100]}`,
-                  background: `linear-gradient(135deg, ${theme.colors.neutral[0]} 0%, ${theme.colors.primary[50]} 100%)`
+                  border: `2px solid ${"rgba(2, 132, 199, 0.12)"}`,
+                  background: "rgba(2, 132, 199, 0.04)"
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(icons.Shield, { style: { width: 24, height: 24, color: theme.colors.primary[600] } }),
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.Shield, { style: { width: 24, height: 24, color: "var(--colors-primary600, #0284C7)" } }),
                     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: t("settings.security.encryption.title", "JWT Encryption Key Generator") })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { lineHeight: 1.6 }, children: t("settings.security.encryption.description", "Generate a secure 32-character encryption key for JWT token storage. This key is used to encrypt tokens before saving them to the database.") }),
@@ -776,14 +770,14 @@ const SettingsPage = () => {
                       background: "neutral100",
                       style: {
                         borderRadius: theme.borderRadius.md,
-                        border: "1px solid " + theme.colors.neutral[200],
+                        border: "1px solid rgba(128, 128, 128, 0.2)",
                         fontFamily: "monospace",
                         fontSize: "12px",
                         wordBreak: "break-all"
                       },
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: 8, display: "block" }, children: t("settings.security.encryption.envLabel", "Add to .env file:") }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("code", { style: { color: theme.colors.primary[700] }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("code", { style: { color: "var(--colors-primary600, #075985)" }, children: [
                           "SESSION_ENCRYPTION_KEY=",
                           encryptionKey
                         ] })
@@ -913,7 +907,7 @@ const SettingsPage = () => {
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "32px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: theme.colors.neutral[700] }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: "var(--colors-neutral700)" }, children: [
                 "📧 ",
                 t("settings.email.alerts.title", "EMAIL ALERTS")
               ] }),
@@ -949,7 +943,7 @@ const SettingsPage = () => {
               ) }) })
             ] }),
             settings.enableEmailAlerts && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: [
                 "⚙️ ",
                 t("settings.email.types.title", "ALERT TYPES")
               ] }),
@@ -961,7 +955,7 @@ const SettingsPage = () => {
                     background: settings.alertOnSuspiciousLogin ? "danger50" : "neutral50",
                     style: {
                       borderRadius: theme.borderRadius.md,
-                      border: `2px solid ${settings.alertOnSuspiciousLogin ? "#fecaca" : "#E5E7EB"}`,
+                      border: `2px solid ${settings.alertOnSuspiciousLogin ? "rgba(239, 68, 68, 0.4)" : "rgba(128, 128, 128, 0.2)"}`,
                       transition: "all 0.2s",
                       cursor: "pointer"
                     },
@@ -983,7 +977,7 @@ const SettingsPage = () => {
                     background: settings.alertOnNewLocation ? "primary50" : "neutral50",
                     style: {
                       borderRadius: theme.borderRadius.md,
-                      border: `2px solid ${settings.alertOnNewLocation ? "#bae6fd" : "#E5E7EB"}`,
+                      border: `2px solid ${settings.alertOnNewLocation ? "rgba(14, 165, 233, 0.3)" : "rgba(128, 128, 128, 0.2)"}`,
                       transition: "all 0.2s",
                       cursor: "pointer"
                     },
@@ -1005,7 +999,7 @@ const SettingsPage = () => {
                     background: settings.alertOnVpnProxy ? "warning50" : "neutral50",
                     style: {
                       borderRadius: theme.borderRadius.md,
-                      border: `2px solid ${settings.alertOnVpnProxy ? "#fde68a" : "#E5E7EB"}`,
+                      border: `2px solid ${settings.alertOnVpnProxy ? "rgba(234, 179, 8, 0.4)" : "rgba(128, 128, 128, 0.2)"}`,
                       transition: "all 0.2s",
                       cursor: "pointer"
                     },
@@ -1022,7 +1016,7 @@ const SettingsPage = () => {
                 ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginBottom: "24px" } }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: theme.colors.neutral[700] }, children: t("settings.email.templates.title", "EMAIL TEMPLATES") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-neutral700)" }, children: t("settings.email.templates.title", "EMAIL TEMPLATES") }),
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: t("settings.email.templates.subtitle", "Customize email notification templates with dynamic variables") }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { value: activeTemplateTab, onValueChange: setActiveTemplateTab, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { "aria-label": "Email Templates", children: [
@@ -1051,10 +1045,10 @@ const SettingsPage = () => {
                     {
                       padding: 3,
                       background: "primary100",
-                      style: { borderRadius: theme.borderRadius.md, marginBottom: "20px", border: "2px solid #BAE6FD" },
+                      style: { borderRadius: theme.borderRadius.md, marginBottom: "20px", border: "2px solid rgba(14, 165, 233, 0.3)" },
                       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(icons.Code, { style: { width: "16px", height: "16px", color: theme.colors.primary[600] } }),
+                          /* @__PURE__ */ jsxRuntime.jsx(icons.Code, { style: { width: "16px", height: "16px", color: "var(--colors-primary600, #0284C7)" } }),
                           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "primary600", children: t("settings.email.templates.variables", "Available Variables (click to copy)") })
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: TEMPLATE_VARIABLES[templateKey].map(({ var: variable, desc }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1084,7 +1078,7 @@ const SettingsPage = () => {
                     {
                       background: "neutral0",
                       padding: 6,
-                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%", marginBottom: "24px" },
+                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%", marginBottom: "24px" },
                       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: [
@@ -1114,7 +1108,7 @@ const SettingsPage = () => {
                           designSystem.Box,
                           {
                             style: {
-                              border: "2px solid #E5E7EB",
+                              border: "2px solid rgba(128, 128, 128, 0.2)",
                               borderRadius: "6px",
                               overflow: "hidden",
                               background: "#1e1e1e",
@@ -1214,7 +1208,7 @@ const SettingsPage = () => {
                     {
                       background: "neutral0",
                       padding: 6,
-                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%", marginBottom: "24px" },
+                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%", marginBottom: "24px" },
                       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: [
@@ -1244,7 +1238,7 @@ const SettingsPage = () => {
                           designSystem.Box,
                           {
                             style: {
-                              border: "2px solid #E5E7EB",
+                              border: "2px solid rgba(128, 128, 128, 0.2)",
                               borderRadius: "6px",
                               overflow: "hidden",
                               background: "#1e1e1e",
@@ -1362,10 +1356,10 @@ const SettingsPage = () => {
                   designSystem.Box,
                   {
                     style: {
-                      border: "2px solid #E5E7EB",
+                      border: "2px solid rgba(128, 128, 128, 0.2)",
                       borderRadius: theme.borderRadius.md,
                       overflow: "hidden",
-                      background: "#fafafa"
+                      background: "var(--colors-neutral100)"
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "textarea",
@@ -1382,8 +1376,8 @@ const SettingsPage = () => {
                           fontFamily: "Monaco, Consolas, monospace",
                           fontSize: "14px",
                           lineHeight: "1.8",
-                          color: "#374151",
-                          background: "white",
+                          color: "var(--colors-neutral800)",
+                          background: "transparent",
                           resize: "vertical",
                           minHeight: "80px"
                         }
@@ -1405,10 +1399,10 @@ const SettingsPage = () => {
                   designSystem.Box,
                   {
                     style: {
-                      border: "2px solid #E5E7EB",
+                      border: "2px solid rgba(128, 128, 128, 0.2)",
                       borderRadius: theme.borderRadius.md,
                       overflow: "hidden",
-                      background: "#fafafa"
+                      background: "var(--colors-neutral100)"
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "textarea",
@@ -1425,8 +1419,8 @@ const SettingsPage = () => {
                           fontFamily: "Monaco, Consolas, monospace",
                           fontSize: "14px",
                           lineHeight: "1.8",
-                          color: "#374151",
-                          background: "white",
+                          color: "var(--colors-neutral800)",
+                          background: "transparent",
                           resize: "vertical",
                           minHeight: "80px"
                         }
@@ -1443,10 +1437,10 @@ const SettingsPage = () => {
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, background: "primary100", style: { borderRadius: theme.borderRadius.md, marginTop: "32px", border: "2px solid #BAE6FD" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: "20px", height: "20px", color: theme.colors.success[600], flexShrink: 0, marginTop: "2px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, background: "primary100", style: { borderRadius: theme.borderRadius.md, marginTop: "32px", border: "2px solid rgba(14, 165, 233, 0.3)" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: "20px", height: "20px", color: "var(--colors-success600, #16A34A)", flexShrink: 0, marginTop: "2px" } }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: theme.colors.primary[700] }, children: t("settings.footer.title", "Database-Backed Settings") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-primary600, #075985)" }, children: t("settings.footer.title", "Database-Backed Settings") }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "primary700", style: { fontSize: "13px", lineHeight: "1.8" }, children: t("settings.footer.description", "All settings are stored in your Strapi database and shared across all admin users. Changes take effect immediately - no server restart required! Email templates, webhooks, and security options are all managed from this interface.") })
         ] })
       ] }) })

package/dist/_chunks/{StyledButtons-fbNVRlMY.mjs → StyledButtons-Cz8oYhmc.mjs}

@@ -28,11 +28,11 @@ const GradientButton = styled(Button)`
 `;
 const SecondaryButton = styled(Button)`
   && {
-    background: white;
-    color: #7C3AED;
+    background: ${(p) => p.theme.colors.neutral0};
+    color: var(--colors-secondary600, #7C3AED);
     font-weight: 600;
     border: 2px solid transparent;
-    background-image: linear-gradient(white, white), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
+    background-image: linear-gradient(${(p) => p.theme.colors.neutral0}, ${(p) => p.theme.colors.neutral0}), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
     background-origin: border-box;
     background-clip: padding-box, border-box;
     padding: 10px 20px;
@@ -60,17 +60,17 @@ const SecondaryButton = styled(Button)`
 const TertiaryButton = styled(Button)`
   && {
     background: transparent;
-    color: #64748B;
+    color: var(--colors-neutral600);
     font-weight: 500;
-    border: 1px solid #E2E8F0;
+    border: 1px solid rgba(128, 128, 128, 0.2);
     padding: 10px 20px;
     min-height: 40px;
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      background: #F1F5F9;
-      border-color: #CBD5E1;
-      color: #334155;
+      background: rgba(128, 128, 128, 0.08);
+      border-color: rgba(128, 128, 128, 0.3);
+      color: var(--colors-neutral800);
     }
     
     &:disabled {
@@ -81,18 +81,18 @@ const TertiaryButton = styled(Button)`
 `;
 const DangerButton = styled(Button)`
   && {
-    background: #FEE2E2;
-    color: #DC2626;
+    background: rgba(220, 38, 38, 0.12);
+    color: var(--colors-danger600, #DC2626);
     font-weight: 600;
-    border: 1px solid #FECACA;
+    border: 1px solid rgba(239, 68, 68, 0.4);
     padding: 10px 20px;
     min-height: 40px;
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      background: #DC2626;
+      background: var(--colors-danger600, #DC2626);
       color: white;
-      border-color: #DC2626;
+      border-color: var(--colors-danger600, #DC2626);
     }
     
     &:disabled {
@@ -125,9 +125,9 @@ styled(Button)`
 `;
 styled(Button)`
   && {
-    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
-    color: #64748B;
-    border: 1px solid #E2E8F0;
+    background: linear-gradient(135deg, rgba(128, 128, 128, 0.04) 0%, rgba(128, 128, 128, 0.08) 100%);
+    color: var(--colors-neutral600);
+    border: 1px solid rgba(128, 128, 128, 0.2);
     padding: 8px;
     min-width: 38px;
     min-height: 38px;
@@ -147,7 +147,7 @@ styled(Button)`
     
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
-      border-color: #0EA5E9;
+      border-color: var(--colors-primary600, #0EA5E9);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
@@ -161,9 +161,9 @@ styled(Button)`
 `;
 const IconButtonDanger = styled(Button)`
   && {
-    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
-    color: #EF4444;
-    border: 1px solid #FECACA;
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.12) 100%);
+    color: var(--colors-danger600, #EF4444);
+    border: 1px solid rgba(239, 68, 68, 0.4);
     padding: 8px;
     min-width: 38px;
     min-height: 38px;
@@ -183,7 +183,7 @@ const IconButtonDanger = styled(Button)`
     
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
-      border-color: #EF4444;
+      border-color: var(--colors-danger600, #EF4444);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
@@ -197,9 +197,9 @@ const IconButtonDanger = styled(Button)`
 `;
 const IconButtonPrimary = styled(Button)`
   && {
-    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
-    color: #0EA5E9;
-    border: 1px solid #BAE6FD;
+    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.12) 100%);
+    color: var(--colors-primary600, #0EA5E9);
+    border: 1px solid rgba(14, 165, 233, 0.3);
     padding: 8px;
     min-width: 38px;
     min-height: 38px;
@@ -219,7 +219,7 @@ const IconButtonPrimary = styled(Button)`
     
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
-      border-color: #0EA5E9;
+      border-color: var(--colors-primary600, #0EA5E9);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
@@ -233,9 +233,9 @@ const IconButtonPrimary = styled(Button)`
 `;
 styled(Button)`
   && {
-    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
-    color: #22C55E;
-    border: 1px solid #BBF7D0;
+    background: linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.12) 100%);
+    color: var(--colors-success600, #22C55E);
+    border: 1px solid rgba(34, 197, 94, 0.3);
     padding: 8px;
     min-width: 38px;
     min-height: 38px;
@@ -255,7 +255,7 @@ styled(Button)`
     
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
-      border-color: #22C55E;
+      border-color: var(--colors-success600, #22C55E);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
@@ -269,9 +269,9 @@ styled(Button)`
 `;
 const IconButtonWarning = styled(Button)`
   && {
-    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
-    color: #D97706;
-    border: 1px solid #FDE68A;
+    background: linear-gradient(135deg, rgba(234, 179, 8, 0.06) 0%, rgba(234, 179, 8, 0.12) 100%);
+    color: var(--colors-warning600, #D97706);
+    border: 1px solid rgba(234, 179, 8, 0.4);
     padding: 8px;
     min-width: 38px;
     min-height: 38px;
@@ -291,7 +291,7 @@ const IconButtonWarning = styled(Button)`
     
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
-      border-color: #F59E0B;
+      border-color: var(--colors-warning600, #F59E0B);
       color: white;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
@@ -300,9 +300,9 @@ const IconButtonWarning = styled(Button)`
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-      background: #F3F4F6;
-      border-color: #E5E7EB;
-      color: #9CA3AF;
+      background: var(--colors-neutral100);
+      border-color: rgba(128, 128, 128, 0.2);
+      color: var(--colors-neutral500);
     }
   }
 `;
@@ -338,7 +338,7 @@ styled(Button)`
 styled(Button)`
   && {
     background: transparent;
-    color: #0EA5E9;
+    color: var(--colors-primary600, #0EA5E9);
     font-weight: 500;
     border: none;
     padding: 4px 8px;
@@ -347,7 +347,7 @@ styled(Button)`
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      color: #0284C7;
+      color: var(--colors-primary600, #0284C7);
       text-decoration: none;
     }
     
@@ -359,18 +359,18 @@ styled(Button)`
 `;
 const ShowHideButton = styled(Button)`
   && {
-    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
-    color: #64748B;
+    background: linear-gradient(135deg, rgba(128, 128, 128, 0.04) 0%, rgba(128, 128, 128, 0.08) 100%);
+    color: var(--colors-neutral600);
     font-weight: 600;
-    border: 1px solid #E2E8F0;
+    border: 1px solid rgba(128, 128, 128, 0.2);
     padding: 10px 16px;
     min-height: 40px;
     border-radius: 8px;
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
-      color: #334155;
+      background: linear-gradient(135deg, rgba(128, 128, 128, 0.15) 0%, rgba(128, 128, 128, 0.25) 100%);
+      color: var(--colors-neutral800);
       transform: translateY(-1px);
     }
     
@@ -382,10 +382,10 @@ const ShowHideButton = styled(Button)`
 `;
 const CopyButton = styled(Button)`
   && {
-    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
-    color: #0284C7;
+    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.12) 100%);
+    color: var(--colors-primary600, #0284C7);
     font-weight: 600;
-    border: 1px solid #BAE6FD;
+    border: 1px solid rgba(14, 165, 233, 0.3);
     padding: 10px 16px;
     min-height: 40px;
     border-radius: 8px;
@@ -394,7 +394,7 @@ const CopyButton = styled(Button)`
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
       color: white;
-      border-color: #0EA5E9;
+      border-color: var(--colors-primary600, #0EA5E9);
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
     }