strapi-plugin-magic-sessionmanager 4.4.2 → 4.4.4

package/dist/_chunks/{App-D4qVym6y.js → App-CrdNlRlL.js}

@@ -5,45 +5,15 @@ const react = require("react");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
-const index = require("./index-DtBfKBne.js");
+const index = require("./index-BEh2DizI.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const useLicense = require("./useLicense-NCFYHpDd.js");
-const StyledButtons = require("./StyledButtons-D2EbG_Zw.js");
+const useLicense = require("./useLicense-DFdVp_qI.js");
+const StyledButtons = require("./StyledButtons-DDuxnYz8.js");
 const reactRouterDom = require("react-router-dom");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {
-  colors: {
-    primary: {
-      50: "#F0F9FF",
-      100: "#E0F2FE",
-      600: "#0284C7"
-    },
-    secondary: {
-      50: "#FAF5FF",
-      100: "#F3E8FF",
-      600: "#9333EA"
-    },
-    success: {
-      50: "#F0FDF4",
-      100: "#DCFCE7",
-      500: "#22C55E",
-      600: "#16A34A"
-    },
-    warning: {
-      50: "#FFFBEB",
-      100: "#FEF3C7",
-      500: "#F59E0B",
-      600: "#D97706"
-    },
-    danger: {
-      50: "#FEF2F2",
-      100: "#FEE2E2",
-      500: "#EF4444",
-      600: "#DC2626"
-    }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
@@ -81,10 +51,10 @@ const SectionTitle = styled__default.default(designSystem.Typography)`
   letter-spacing: 0.5px;
   font-size: 11px;
   font-weight: 700;
-  color: #374151;
+  color: var(--colors-neutral800);
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 2px solid #e5e7eb;
+  border-bottom: 2px solid rgba(128, 128, 128, 0.2);
   display: block;
 `;
 const Section = styled__default.default(designSystem.Box)`
@@ -102,16 +72,16 @@ const ModalStatusBadge = styled__default.default.span`
   text-transform: uppercase;
   
   ${(props) => props.$online && `
-    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
-    color: #166534;
-    border: 2px solid #86EFAC;
+    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(34, 197, 94, 0.3) 100%);
+    color: var(--colors-success600, #166534);
+    border: 2px solid rgba(34, 197, 94, 0.3);
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
   `}
   
   ${(props) => !props.$online && `
-    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
-    color: #4B5563;
-    border: 2px solid #D1D5DB;
+    background: linear-gradient(135deg, rgba(128, 128, 128, 0.08) 0%, rgba(128, 128, 128, 0.2) 100%);
+    color: var(--colors-neutral600);
+    border: 2px solid rgba(128, 128, 128, 0.2);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   `}
 `;
@@ -121,13 +91,13 @@ const StatusDot$1 = styled__default.default.span`
   border-radius: 50%;
   
   ${(props) => props.$online && `
-    background: #22C55E;
+    background: var(--colors-success600, #22C55E);
     box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
     animation: pulse-green 2s ease-in-out infinite;
   `}
   
   ${(props) => !props.$online && `
-    background: #9CA3AF;
+    background: var(--colors-neutral500);
   `}
   
   @keyframes pulse-green {
@@ -243,7 +213,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      background: "#f3f4f6",
+      background: "var(--colors-neutral100)",
       borderRadius: "8px",
       flexShrink: 0
     }, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { width: "18px", height: "18px" }) }),
@@ -258,7 +228,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         width: "48px",
         height: "48px",
         borderRadius: "12px",
-        background: isOnline ? "#dcfce7" : "#f3f4f6",
+        background: isOnline ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
@@ -396,15 +366,15 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         {
           padding: 5,
           style: {
-            background: "linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)",
+            background: "linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.25) 100%)",
             borderRadius: "12px",
-            border: "2px solid #fbbf24",
+            border: "2px solid rgba(234, 179, 8, 0.4)",
             textAlign: "center"
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(icons.Crown, { style: { width: "40px", height: "40px", color: "#d97706" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#78350f", fontSize: "14px", lineHeight: "1.6" }, children: t("modal.premium.description", "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session") }),
+            /* @__PURE__ */ jsxRuntime.jsx(icons.Crown, { style: { width: "40px", height: "40px", color: "var(--colors-warning600, #d97706)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { color: "var(--colors-warning600, #92400e)", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "var(--colors-warning600, #78350f)", fontSize: "14px", lineHeight: "1.6" }, children: t("modal.premium.description", "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               PremiumButton,
               {
@@ -502,8 +472,8 @@ const Container = styled__default.default(designSystem.Box)`
 `;
 const Header = styled__default.default(designSystem.Box)`
   background: linear-gradient(135deg, 
-    ${theme.colors.primary[600]} 0%, 
-    ${theme.colors.secondary[600]} 100%
+    ${"var(--colors-primary600, #0284C7)"} 0%, 
+    ${"#9333EA"} 100%
   );
   border-radius: ${theme.borderRadius.xl};
   padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
@@ -602,7 +572,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -611,7 +581,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   ${styled.css`animation: ${fadeIn$1} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -632,7 +602,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme.shadows.xl};
-    border-color: ${(props) => props.$color || props.theme.colors.primary600};
+    border-color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -640,7 +610,7 @@ const StatCard = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || props.theme.colors.primary600};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -651,7 +621,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || props.theme.colors.primary100};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme.transitions.normal};
   margin: 0 auto 20px;
   box-shadow: ${theme.shadows.sm};
@@ -659,7 +629,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
   svg {
     width: 34px;
     height: 34px;
-    color: ${(props) => props.$color || props.theme.colors.primary600};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
   
   @media screen and (max-width: ${breakpoints.mobile}) {
@@ -676,7 +646,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
 const StatValue = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${(props) => props.theme.colors.neutral800};
+  color: var(--colors-neutral800);
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme.transitions.normal};
@@ -689,7 +659,7 @@ const StatValue = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -699,21 +669,21 @@ const StatLabel = styled__default.default(designSystem.Typography)`
   }
 `;
 const DataTable = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   overflow: hidden;
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   margin-bottom: ${theme.spacing.xl};
 `;
 const StyledTable = styled__default.default(designSystem.Table)`
   thead {
-    background: ${(props) => props.theme.colors.neutral100};
-    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
+    background: var(--colors-neutral100);
+    border-bottom: 2px solid rgba(128, 128, 128, 0.2);
     
     th {
       font-weight: 600;
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -723,14 +693,14 @@ const StyledTable = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${(props) => props.theme.colors.primary100};
+      background: rgba(2, 132, 199, 0.12);
       
       .action-buttons {
         opacity: 1;
@@ -739,7 +709,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
     }
   }
@@ -748,18 +718,18 @@ styled__default.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: ${(props) => props.$online ? theme.colors.success[500] : props.theme.colors.neutral400};
+  background: ${(props) => props.$online ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$online ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const FilterBar = styled__default.default(designSystem.Flex)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme.spacing.md} ${theme.spacing.lg};
   border-radius: ${theme.borderRadius.lg};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -774,27 +744,27 @@ const SearchIcon = styled__default.default(icons.Search)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   pointer-events: none;
 `;
 const StyledSearchInput = styled__default.default.input`
   width: 100%;
   padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: ${theme.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme.transitions.fast};
-  background: ${(props) => props.theme.colors.neutral0};
-  color: ${(props) => props.theme.colors.neutral800};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: var(--colors-neutral800);
   
   &:focus {
     outline: none;
-    border-color: ${(props) => props.theme.colors.primary600};
-    box-shadow: 0 0 0 3px ${(props) => props.theme.colors.primary100};
+    border-color: var(--colors-primary600, #0284C7);
+    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
   }
   
   &::placeholder {
-    color: ${(props) => props.theme.colors.neutral500};
+    color: var(--colors-neutral500);
   }
 `;
 const ActionButtons = styled__default.default(designSystem.Flex)`
@@ -816,27 +786,27 @@ const StatusBadge = styled__default.default.span`
   transition: all 0.2s ease;
   
   ${(props) => props.$status === "active" && `
-    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
-    color: #15803D;
-    border: 1px solid #86EFAC;
+    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(34, 197, 94, 0.3) 100%);
+    color: var(--colors-success700, #15803D);
+    border: 1px solid rgba(34, 197, 94, 0.3);
   `}
   
   ${(props) => props.$status === "idle" && `
-    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
-    color: #A16207;
-    border: 1px solid #FCD34D;
+    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.4) 100%);
+    color: var(--colors-warning600, #A16207);
+    border: 1px solid rgba(234, 179, 8, 0.4);
   `}
   
   ${(props) => props.$status === "loggedout" && `
-    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
-    color: #B91C1C;
-    border: 1px solid #FCA5A5;
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(239, 68, 68, 0.4) 100%);
+    color: var(--colors-danger600, #B91C1C);
+    border: 1px solid rgba(239, 68, 68, 0.4);
   `}
   
   ${(props) => props.$status === "terminated" && `
-    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
-    color: #4B5563;
-    border: 1px solid #D1D5DB;
+    background: linear-gradient(135deg, var(--colors-neutral100) 0%, rgba(128, 128, 128, 0.2) 100%);
+    color: var(--colors-neutral600);
+    border: 1px solid rgba(128, 128, 128, 0.2);
   `}
 `;
 const StatusDot = styled__default.default.span`
@@ -846,21 +816,21 @@ const StatusDot = styled__default.default.span`
   flex-shrink: 0;
   
   ${(props) => props.$status === "active" && `
-    background: #22C55E;
+    background: var(--colors-success600, #22C55E);
     box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
     animation: pulse-green 2s ease-in-out infinite;
   `}
   
   ${(props) => props.$status === "idle" && `
-    background: #F59E0B;
+    background: var(--colors-warning600, #F59E0B);
   `}
   
   ${(props) => props.$status === "loggedout" && `
-    background: #EF4444;
+    background: var(--colors-danger600, #EF4444);
   `}
   
   ${(props) => props.$status === "terminated" && `
-    background: #9CA3AF;
+    background: var(--colors-neutral500);
   `}
   
   @keyframes pulse-green {
@@ -872,13 +842,13 @@ const ClickableRow = styled__default.default(designSystem.Tr)`
   cursor: pointer;
   
   &:hover {
-    background: ${(props) => props.theme.colors.primary100} !important;
+    background: rgba(2, 132, 199, 0.12) !important;
   }
 `;
 styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
-  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
   text-align: center;
   position: relative;
@@ -894,7 +864,7 @@ styled__default.default.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%);
+  background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, ${"rgba(147, 51, 234, 0.06)"} 100%);
   opacity: 0.3;
   z-index: 0;
 `;
@@ -1155,28 +1125,28 @@ const HomePage = () => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.success[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: "var(--colors-success600, #22C55E)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: activeSessions.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.active", "Active") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.warning[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: "var(--colors-warning600, #F59E0B)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: idleSessions.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.idle", "Idle") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.danger[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.3s", $color: "var(--colors-danger600, #EF4444)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(220, 38, 38, 0.12)", $color: "var(--colors-danger600, #DC2626)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: loggedOutSessions.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.loggedOut", "Logged Out") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: "#4B5563", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "#F3F4F6", $color: "#4B5563", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: "var(--colors-neutral600)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "var(--colors-neutral100)", $color: "var(--colors-neutral600)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: terminatedSessions.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.terminated", "Terminated") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.5s", $color: "#A855F7", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "#EDE9FE", $color: "#9333EA", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "rgba(147, 51, 234, 0.12)", $color: "#9333EA", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: sessions.length }),
         /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.total", "Total") })
       ] })
@@ -1246,26 +1216,26 @@ const HomePage = () => {
           const sessionStatus = getSessionStatus(session);
           const statusConfig = {
             active: {
-              bg: theme.colors.success[50],
+              bg: "rgba(22, 163, 74, 0.06)",
               badgeColor: "success600",
               label: t("homepage.status.active", "Active"),
               indicator: true
             },
             idle: {
-              bg: theme.colors.warning[50],
+              bg: "rgba(234, 179, 8, 0.06)",
               badgeColor: "warning600",
               label: t("homepage.status.idle", "Idle"),
               indicator: false
             },
             loggedout: {
-              bg: theme.colors.danger[50],
+              bg: "rgba(220, 38, 38, 0.06)",
               badgeColor: "danger600",
               label: t("homepage.status.loggedOut", "Logged Out"),
               indicator: false,
               opacity: 0.7
             },
             terminated: {
-              bg: "#F3F4F6",
+              bg: "var(--colors-neutral100)",
               badgeColor: "neutral600",
               label: t("homepage.status.terminated", "Terminated"),
               indicator: false,
@@ -1356,7 +1326,7 @@ const HomePage = () => {
             background: "neutral0",
             style: {
               borderRadius: theme.borderRadius.xl,
-              border: "2px dashed #E5E7EB",
+              border: "2px dashed rgba(128, 128, 128, 0.2)",
               padding: "60px 32px",
               textAlign: "center",
               position: "relative",
@@ -1376,7 +1346,7 @@ const HomePage = () => {
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    background: `linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%)`,
+                    background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, ${"rgba(147, 51, 234, 0.06)"} 100%)`,
                     opacity: 0.3,
                     zIndex: 0
                   }
@@ -1391,13 +1361,13 @@ const HomePage = () => {
                       width: "100px",
                       height: "100px",
                       borderRadius: "50%",
-                      background: `linear-gradient(135deg, ${theme.colors.primary[100]} 0%, ${theme.colors.secondary[100]} 100%)`,
+                      background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.12)"} 0%, ${"rgba(147, 51, 234, 0.12)"} 100%)`,
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
                       boxShadow: theme.shadows.xl
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { style: { width: "50px", height: "50px", color: "#0284C7" } })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { style: { width: "50px", height: "50px", color: "var(--colors-primary600, #0284C7)" } })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1438,7 +1408,7 @@ const HomePage = () => {
         background: "neutral0",
         style: {
           borderRadius: theme.borderRadius.xl,
-          border: "2px dashed #E5E7EB",
+          border: "2px dashed rgba(128, 128, 128, 0.2)",
           padding: "80px 32px",
           textAlign: "center",
           position: "relative",
@@ -1458,7 +1428,7 @@ const HomePage = () => {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                background: `linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%)`,
+                background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, ${"rgba(147, 51, 234, 0.06)"} 100%)`,
                 opacity: 0.3,
                 zIndex: 0
               }
@@ -1472,13 +1442,13 @@ const HomePage = () => {
                   width: "120px",
                   height: "120px",
                   borderRadius: "50%",
-                  background: `linear-gradient(135deg, ${theme.colors.primary[100]} 0%, ${theme.colors.secondary[100]} 100%)`,
+                  background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.12)"} 0%, ${"rgba(147, 51, 234, 0.12)"} 100%)`,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
                   boxShadow: theme.shadows.xl
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Monitor, { style: { width: "60px", height: "60px", color: "#0284C7" } })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Monitor, { style: { width: "60px", height: "60px", color: "var(--colors-primary600, #0284C7)" } })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1551,7 +1521,7 @@ const ModalOverlay = styled__default.default.div`
   padding: 20px;
 `;
 const ModalContent = styled__default.default(designSystem.Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -1866,7 +1836,7 @@ const LicenseGuard = ({ children }) => {
                 padding: 4,
                 style: {
                   borderRadius: "8px",
-                  border: "2px solid #BAE6FD",
+                  border: "2px solid rgba(14, 165, 233, 0.3)",
                   width: "100%"
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "Enter your email and license key to activate." : useAutoCreate && adminUser && adminUser.email ? `Click "Activate" to auto-create a license with your account (${adminUser.email})` : useAutoCreate ? 'Click "Activate" to auto-create a license with your admin account' : "A license will be created with the details below." })
@@ -1930,11 +1900,11 @@ const LicenseGuard = ({ children }) => {
                   padding: 5,
                   style: {
                     borderRadius: "8px",
-                    border: "2px solid #DCFCE7",
+                    border: "2px solid rgba(34, 197, 94, 0.3)",
                     textAlign: "center"
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account:" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
                       adminUser.firstname || "Admin",
                       " ",