strapi-plugin-magic-sessionmanager 4.4.1 → 4.4.3

package/dist/_chunks/{App-Cs4KKd3L.mjs → App-GrZxgdsa.mjs}

@@ -3,43 +3,13 @@ import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
-import { p as parseUserAgent, a as pluginId, g as getTranslation } from "./index-Ij0JRf9W.mjs";
+import { p as parseUserAgent, a as pluginId, g as getTranslation } from "./index-CLfOD-6A.mjs";
 import { Modal, Flex, Box, Typography, Divider, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, TextInput } from "@strapi/design-system";
 import { Check, Information, Monitor, Server, Clock, Cross, Earth, Shield, Crown, Phone, Download, User, Eye, Trash, Search, Key } from "@strapi/icons";
-import { u as useLicense } from "./useLicense-DJEDGSap.mjs";
-import { S as ShowHideButton, T as TertiaryButton, D as DangerButton, I as IconButtonPrimary, a as IconButtonWarning, b as IconButtonDanger } from "./StyledButtons-fbNVRlMY.mjs";
+import { u as useLicense } from "./useLicense-Bi6skBLw.mjs";
+import { S as ShowHideButton, T as TertiaryButton, D as DangerButton, I as IconButtonPrimary, a as IconButtonWarning, b as IconButtonDanger } from "./StyledButtons-HrcisfdR.mjs";
 import { useNavigate } from "react-router-dom";
 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)"
@@ -77,10 +47,10 @@ const SectionTitle = styled(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(Box)`
@@ -98,16 +68,16 @@ const ModalStatusBadge = styled.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);
   `}
 `;
@@ -117,13 +87,13 @@ const StatusDot$1 = styled.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 {
@@ -239,7 +209,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      background: "#f3f4f6",
+      background: "var(--colors-neutral100)",
       borderRadius: "8px",
       flexShrink: 0
     }, children: /* @__PURE__ */ jsx(Icon, { width: "18px", height: "18px" }) }),
@@ -254,7 +224,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"
@@ -392,15 +362,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__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, children: [
-            /* @__PURE__ */ jsx(Crown, { style: { width: "40px", height: "40px", color: "#d97706" } }),
-            /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
-            /* @__PURE__ */ jsx(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__ */ jsx(Crown, { style: { width: "40px", height: "40px", color: "var(--colors-warning600, #d97706)" } }),
+            /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "var(--colors-warning600, #92400e)", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
+            /* @__PURE__ */ jsx(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__ */ jsx(
               PremiumButton,
               {
@@ -498,8 +468,8 @@ const Container = styled(Box)`
 `;
 const Header = styled(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"]};
@@ -598,7 +568,7 @@ const StatsGrid = styled.div`
   }
 `;
 const StatCard = styled(Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -607,7 +577,7 @@ const StatCard = styled(Box)`
   ${css`animation: ${fadeIn$1} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -628,7 +598,7 @@ const StatCard = styled(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);
@@ -636,7 +606,7 @@ const StatCard = styled(Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || props.theme.colors.primary600};
+      color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -647,7 +617,7 @@ const StatIcon = styled(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};
@@ -655,7 +625,7 @@ const StatIcon = styled(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}) {
@@ -672,7 +642,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(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};
@@ -685,7 +655,7 @@ const StatValue = styled(Typography)`
 `;
 const StatLabel = styled(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;
@@ -695,21 +665,21 @@ const StatLabel = styled(Typography)`
   }
 `;
 const DataTable = styled(Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   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(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;
@@ -719,14 +689,14 @@ const StyledTable = styled(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;
@@ -735,7 +705,7 @@ const StyledTable = styled(Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${(props) => props.theme.colors.neutral800};
+      color: var(--colors-neutral800);
       vertical-align: middle;
     }
   }
@@ -744,18 +714,18 @@ styled.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;
   ${css`animation: ${(props) => props.$online ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const FilterBar = styled(Flex)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   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;
 `;
@@ -770,27 +740,27 @@ const SearchIcon = styled(Search)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   pointer-events: none;
 `;
 const StyledSearchInput = styled.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: var(--colors-neutral0, white);
+  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(Flex)`
@@ -812,27 +782,27 @@ const StatusBadge = styled.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.span`
@@ -842,21 +812,21 @@ const StatusDot = styled.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 {
@@ -868,13 +838,13 @@ const ClickableRow = styled(Tr)`
   cursor: pointer;
   
   &:hover {
-    background: ${(props) => props.theme.colors.primary100} !important;
+    background: rgba(2, 132, 199, 0.12) !important;
   }
 `;
 styled(Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   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;
@@ -890,7 +860,7 @@ styled.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;
 `;
@@ -1151,28 +1121,28 @@ const HomePage = () => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs(StatsGrid, { children: [
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.success[500], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(Check, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: "var(--colors-success600, #22C55E)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(Check, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: activeSessions.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.active", "Active") })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.warning[500], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsx(Clock, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: "var(--colors-warning600, #F59E0B)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsx(Clock, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: idleSessions.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.idle", "Idle") })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.danger[500], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsx(Cross, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: "var(--colors-danger600, #EF4444)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(220, 38, 38, 0.12)", $color: "var(--colors-danger600, #DC2626)", children: /* @__PURE__ */ jsx(Cross, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: loggedOutSessions.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.loggedOut", "Logged Out") })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: "#4B5563", children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "#F3F4F6", $color: "#4B5563", children: /* @__PURE__ */ jsx(Cross, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: "var(--colors-neutral600)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "var(--colors-neutral100)", $color: "var(--colors-neutral600)", children: /* @__PURE__ */ jsx(Cross, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: terminatedSessions.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.terminated", "Terminated") })
       ] }),
       /* @__PURE__ */ jsxs(StatCard, { $delay: "0.5s", $color: "#A855F7", children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "#EDE9FE", $color: "#9333EA", children: /* @__PURE__ */ jsx(User, {}) }),
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(147, 51, 234, 0.12)", $color: "#9333EA", children: /* @__PURE__ */ jsx(User, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: sessions.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.total", "Total") })
       ] })
@@ -1242,26 +1212,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,
@@ -1352,7 +1322,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",
@@ -1372,7 +1342,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
                   }
@@ -1387,13 +1357,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__ */ jsx(Search, { style: { width: "50px", height: "50px", color: "#0284C7" } })
+                    children: /* @__PURE__ */ jsx(Search, { style: { width: "50px", height: "50px", color: "var(--colors-primary600, #0284C7)" } })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -1434,7 +1404,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",
@@ -1454,7 +1424,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
               }
@@ -1468,13 +1438,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__ */ jsx(Monitor, { style: { width: "60px", height: "60px", color: "#0284C7" } })
+                children: /* @__PURE__ */ jsx(Monitor, { style: { width: "60px", height: "60px", color: "var(--colors-primary600, #0284C7)" } })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1547,7 +1517,7 @@ const ModalOverlay = styled.div`
   padding: 20px;
 `;
 const ModalContent = styled(Box)`
-  background: white;
+  background: var(--colors-neutral0, white);
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -1862,7 +1832,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__ */ jsx(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." })
@@ -1926,11 +1896,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__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account:" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account" }),
                     /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
                       adminUser.firstname || "Admin",
                       " ",