strapi-plugin-magic-sessionmanager 4.4.1 → 4.4.3

package/dist/_chunks/{StyledButtons-D2EbG_Zw.js → StyledButtons-UnlRhqip.js}

@@ -31,11 +31,11 @@ const GradientButton = styled__default.default(designSystem.Button)`
 `;
 const SecondaryButton = styled__default.default(designSystem.Button)`
   && {
-    background: white;
-    color: #7C3AED;
+    background: var(--colors-neutral0, white);
+    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(var(--colors-neutral0, white), var(--colors-neutral0, white)), linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
     background-origin: border-box;
     background-clip: padding-box, border-box;
     padding: 10px 20px;
@@ -63,17 +63,17 @@ const SecondaryButton = styled__default.default(designSystem.Button)`
 const TertiaryButton = styled__default.default(designSystem.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 {
@@ -84,18 +84,18 @@ const TertiaryButton = styled__default.default(designSystem.Button)`
 `;
 const DangerButton = styled__default.default(designSystem.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 {
@@ -128,9 +128,9 @@ styled__default.default(designSystem.Button)`
 `;
 styled__default.default(designSystem.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;
@@ -150,7 +150,7 @@ styled__default.default(designSystem.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);
@@ -164,9 +164,9 @@ styled__default.default(designSystem.Button)`
 `;
 const IconButtonDanger = styled__default.default(designSystem.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;
@@ -186,7 +186,7 @@ const IconButtonDanger = styled__default.default(designSystem.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);
@@ -200,9 +200,9 @@ const IconButtonDanger = styled__default.default(designSystem.Button)`
 `;
 const IconButtonPrimary = styled__default.default(designSystem.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;
@@ -222,7 +222,7 @@ const IconButtonPrimary = styled__default.default(designSystem.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);
@@ -236,9 +236,9 @@ const IconButtonPrimary = styled__default.default(designSystem.Button)`
 `;
 styled__default.default(designSystem.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;
@@ -258,7 +258,7 @@ styled__default.default(designSystem.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);
@@ -272,9 +272,9 @@ styled__default.default(designSystem.Button)`
 `;
 const IconButtonWarning = styled__default.default(designSystem.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;
@@ -294,7 +294,7 @@ const IconButtonWarning = styled__default.default(designSystem.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);
@@ -303,9 +303,9 @@ const IconButtonWarning = styled__default.default(designSystem.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);
     }
   }
 `;
@@ -341,7 +341,7 @@ styled__default.default(designSystem.Button)`
 styled__default.default(designSystem.Button)`
   && {
     background: transparent;
-    color: #0EA5E9;
+    color: var(--colors-primary600, #0EA5E9);
     font-weight: 500;
     border: none;
     padding: 4px 8px;
@@ -350,7 +350,7 @@ styled__default.default(designSystem.Button)`
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      color: #0284C7;
+      color: var(--colors-primary600, #0284C7);
       text-decoration: none;
     }
     
@@ -362,18 +362,18 @@ styled__default.default(designSystem.Button)`
 `;
 const ShowHideButton = styled__default.default(designSystem.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);
     }
     
@@ -385,10 +385,10 @@ const ShowHideButton = styled__default.default(designSystem.Button)`
 `;
 const CopyButton = styled__default.default(designSystem.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;
@@ -397,7 +397,7 @@ const CopyButton = styled__default.default(designSystem.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);
     }

package/dist/_chunks/{UpgradePage-D2FRalDz.js → UpgradePage-CCIXYVW3.js}

@@ -6,7 +6,7 @@ const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-DtBfKBne.js");
+const index = require("./index-DcU_ELxj.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const Container = styled__default.default(designSystem.Box)`
@@ -33,7 +33,7 @@ const Title = styled__default.default(designSystem.Typography)`
 `;
 const Subtitle = styled__default.default(designSystem.Typography)`
   font-size: 1.125rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   line-height: 1.6;
   display: block;
 `;
@@ -52,10 +52,10 @@ const TierWrapper = styled__default.default(designSystem.Box)`
   display: flex;
 `;
 const TierCard = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
+  border: 2px solid ${(props) => props.$featured ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
   position: relative;
   transition: all 0.3s ease;
   box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -105,7 +105,7 @@ const TierPrice = styled__default.default(designSystem.Typography)`
   margin-bottom: 4px;
 `;
 const TierDescription = styled__default.default(designSystem.Typography)`
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   margin-bottom: 24px;
 `;
 const FeatureList = styled__default.default(designSystem.Box)`
@@ -128,11 +128,11 @@ const FeatureIcon = styled__default.default(designSystem.Box)`
   margin-top: 2px;
   
   ${(props) => props.$included ? `
-    background: #DCFCE7;
-    svg { color: #16A34A; }
+    background: rgba(22, 163, 74, 0.12);
+    svg { color: var(--colors-success600, #16A34A); }
   ` : `
-    background: #FEE2E2;
-    svg { color: #DC2626; }
+    background: rgba(220, 38, 38, 0.12);
+    svg { color: var(--colors-danger600, #DC2626); }
   `}
 `;
 const UpgradeButton = styled__default.default(designSystem.Button)`
@@ -155,13 +155,13 @@ const CurrentPlanBadge = styled__default.default(designSystem.Badge)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.theme.colors.neutral100};
-  color: ${(props) => props.theme.colors.neutral600};
+  background: var(--colors-neutral100);
+  color: var(--colors-neutral600);
   font-weight: 600;
   font-size: 15px;
 `;
 const LimitsBox = styled__default.default(designSystem.Box)`
-  background: ${(props) => props.theme.colors.neutral100};
+  background: var(--colors-neutral100);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 20px;
@@ -310,7 +310,7 @@ const UpgradePage = () => {
       /* @__PURE__ */ jsxRuntime.jsx(TierName, { variant: "beta", children: tier.name }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "baseline", gap: 1, children: [
         /* @__PURE__ */ jsxRuntime.jsx(TierPrice, { variant: "alpha", children: tier.price }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "var(--colors-neutral600)" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsxRuntime.jsx(LimitsBox, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
@@ -333,7 +333,7 @@ const UpgradePage = () => {
             variant: "omega",
             style: {
               fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
+              color: feature.included ? "var(--colors-neutral800)" : "var(--colors-neutral500)",
               textDecoration: feature.included ? "none" : "line-through"
             },
             children: feature.name

package/dist/_chunks/{UpgradePage-C441wvPX.mjs → UpgradePage-D8dw2eU6.mjs}

@@ -4,7 +4,7 @@ import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled from "styled-components";
 import { Flex, Typography, Box, Badge, Button } from "@strapi/design-system";
 import { Check, Cross, Sparkle, Lightning, Rocket } from "@strapi/icons";
-import { a as pluginId } from "./index-Ij0JRf9W.mjs";
+import { a as pluginId } from "./index-CLfOD-6A.mjs";
 const Container = styled(Box)`
   padding: 32px;
   max-width: 1400px;
@@ -29,7 +29,7 @@ const Title = styled(Typography)`
 `;
 const Subtitle = styled(Typography)`
   font-size: 1.125rem;
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   line-height: 1.6;
   display: block;
 `;
@@ -48,10 +48,10 @@ const TierWrapper = styled(Box)`
   display: flex;
 `;
 const TierCard = styled(Box)`
-  background: ${(props) => props.theme.colors.neutral0};
+  background: var(--colors-neutral0, white);
   border-radius: 16px;
   padding: 32px;
-  border: 2px solid ${(props) => props.$featured ? "#0EA5E9" : props.theme.colors.neutral200};
+  border: 2px solid ${(props) => props.$featured ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
   position: relative;
   transition: all 0.3s ease;
   box-shadow: ${(props) => props.$featured ? "0 20px 25px -5px rgba(14, 165, 233, 0.25), 0 8px 10px -6px rgba(14, 165, 233, 0.2)" : "0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05)"};
@@ -101,7 +101,7 @@ const TierPrice = styled(Typography)`
   margin-bottom: 4px;
 `;
 const TierDescription = styled(Typography)`
-  color: ${(props) => props.theme.colors.neutral600};
+  color: var(--colors-neutral600);
   margin-bottom: 24px;
 `;
 const FeatureList = styled(Box)`
@@ -124,11 +124,11 @@ const FeatureIcon = styled(Box)`
   margin-top: 2px;
   
   ${(props) => props.$included ? `
-    background: #DCFCE7;
-    svg { color: #16A34A; }
+    background: rgba(22, 163, 74, 0.12);
+    svg { color: var(--colors-success600, #16A34A); }
   ` : `
-    background: #FEE2E2;
-    svg { color: #DC2626; }
+    background: rgba(220, 38, 38, 0.12);
+    svg { color: var(--colors-danger600, #DC2626); }
   `}
 `;
 const UpgradeButton = styled(Button)`
@@ -151,13 +151,13 @@ const CurrentPlanBadge = styled(Badge)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.theme.colors.neutral100};
-  color: ${(props) => props.theme.colors.neutral600};
+  background: var(--colors-neutral100);
+  color: var(--colors-neutral600);
   font-weight: 600;
   font-size: 15px;
 `;
 const LimitsBox = styled(Box)`
-  background: ${(props) => props.theme.colors.neutral100};
+  background: var(--colors-neutral100);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 20px;
@@ -306,7 +306,7 @@ const UpgradePage = () => {
       /* @__PURE__ */ jsx(TierName, { variant: "beta", children: tier.name }),
       /* @__PURE__ */ jsxs(Flex, { alignItems: "baseline", gap: 1, children: [
         /* @__PURE__ */ jsx(TierPrice, { variant: "alpha", children: tier.price }),
-        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#6B7280" }, children: tier.period })
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "var(--colors-neutral600)" }, children: tier.period })
       ] }),
       /* @__PURE__ */ jsx(TierDescription, { variant: "omega", children: tier.description }),
       /* @__PURE__ */ jsx(LimitsBox, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
@@ -329,7 +329,7 @@ const UpgradePage = () => {
             variant: "omega",
             style: {
               fontSize: "14px",
-              color: feature.included ? "#374151" : "#9CA3AF",
+              color: feature.included ? "var(--colors-neutral800)" : "var(--colors-neutral500)",
               textDecoration: feature.included ? "none" : "line-through"
             },
             children: feature.name

package/dist/_chunks/{index-Ij0JRf9W.mjs → index-CLfOD-6A.mjs}

@@ -109,34 +109,34 @@ const PanelContainer = styled(Box)`
 const StatusCard = styled(Box)`
   padding: 20px;
   border-radius: 12px;
-  border: 1px solid ${(props) => props.$isOnline ? "#BBF7D0" : "#E5E7EB"};
-  background: ${(props) => props.$isOnline ? "linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%)" : "linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%)"};
+  border: 1px solid ${(props) => props.$isOnline ? "rgba(34, 197, 94, 0.3)" : "rgba(128, 128, 128, 0.2)"};
+  background: ${(props) => props.$isOnline ? "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%)"};
   transition: all 0.2s ease;
 `;
 const BlockedWarning = styled(Box)`
   padding: 16px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
-  border: 1px solid #FECACA;
+  background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.12) 100%);
+  border: 1px solid rgba(239, 68, 68, 0.4);
 `;
 const SessionCard = styled(Box)`
   padding: 16px;
-  background: white;
+  background: var(--colors-neutral0, white);
   border-radius: 10px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid rgba(128, 128, 128, 0.2);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   transition: all 0.2s ease;
   
   &:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    border-color: #0EA5E9;
+    border-color: var(--colors-primary600, #0EA5E9);
   }
 `;
 const EmptyState = styled(Box)`
   padding: 32px;
-  background: #F9FAFB;
+  background: var(--colors-neutral100);
   border-radius: 12px;
-  border: 2px dashed #E5E7EB;
+  border: 2px dashed rgba(128, 128, 128, 0.2);
   text-align: center;
 `;
 const EmptyIcon = styled(Box)`
@@ -146,16 +146,16 @@ const EmptyIcon = styled(Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #E5E7EB;
+  background: rgba(128, 128, 128, 0.2);
   border-radius: 50%;
-  color: #9CA3AF;
+  color: var(--colors-neutral500);
 `;
 const SectionLabel = styled(Typography)`
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-size: 11px !important;
   font-weight: 700 !important;
-  color: #6B7280;
+  color: var(--colors-neutral600);
   margin-bottom: 12px;
   display: block;
 `;
@@ -173,23 +173,23 @@ const ActionButton = styled.button`
   transition: all 0.2s ease;
   
   ${(props) => props.$variant === "danger" && `
-    background: white;
-    color: #DC2626;
-    border: 2px solid #DC2626;
+    background: var(--colors-neutral0, white);
+    color: var(--colors-danger600, #DC2626);
+    border: 2px solid var(--colors-danger600, #DC2626);
     
     &:hover:not(:disabled) {
-      background: #DC2626;
+      background: var(--colors-danger600, #DC2626);
       color: white;
     }
   `}
   
   ${(props) => props.$variant === "success" && `
-    background: white;
-    color: #16A34A;
-    border: 2px solid #16A34A;
+    background: var(--colors-neutral0, white);
+    color: var(--colors-success600, #16A34A);
+    border: 2px solid var(--colors-success600, #16A34A);
     
     &:hover:not(:disabled) {
-      background: #16A34A;
+      background: var(--colors-success600, #16A34A);
       color: white;
     }
   `}
@@ -210,14 +210,14 @@ const IconWrapper = styled(Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #F3F4F6;
+  background: var(--colors-neutral100);
   border-radius: 8px;
   flex-shrink: 0;
   
   svg {
     width: 16px;
     height: 16px;
-    color: #6B7280;
+    color: var(--colors-neutral600);
   }
 `;
 const SessionInfoPanel = ({ documentId, model, document }) => {
@@ -363,11 +363,11 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
             ] }),
             /* @__PURE__ */ jsx(Divider, {}),
             /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(Server, { width: "14px", height: "14px", style: { color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsx(Server, { width: "14px", height: "14px", style: { color: "var(--colors-neutral500)" } }),
               /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: session.ipAddress })
             ] }),
             /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(Clock, { width: "14px", height: "14px", style: { color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsx(Clock, { width: "14px", height: "14px", style: { color: "var(--colors-neutral500)" } }),
               /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: new Date(session.loginTime).toLocaleString("en-US", {
                 month: "short",
                 day: "numeric",
@@ -440,7 +440,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: pluginPkg.strapi.displayName
       },
-      Component: () => import("./App-Cs4KKd3L.mjs")
+      Component: () => import("./App-GrZxgdsa.mjs")
     });
     app.createSettingSection(
       {
@@ -456,7 +456,7 @@ const index = {
           },
           id: "upgrade",
           to: `${pluginId}/upgrade`,
-          Component: () => import("./UpgradePage-C441wvPX.mjs")
+          Component: () => import("./UpgradePage-D8dw2eU6.mjs")
         },
         {
           intlLabel: {
@@ -465,7 +465,7 @@ const index = {
           },
           id: "general",
           to: `${pluginId}/general`,
-          Component: () => import("./Settings-XloJ-aHl.mjs")
+          Component: () => import("./Settings-BKE3rMNU.mjs")
         },
         {
           intlLabel: {
@@ -474,7 +474,7 @@ const index = {
           },
           id: "analytics",
           to: `${pluginId}/analytics`,
-          Component: () => import("./Analytics-sX94t6D9.mjs")
+          Component: () => import("./Analytics-CQNEZTUR.mjs")
         },
         {
           intlLabel: {
@@ -483,7 +483,7 @@ const index = {
           },
           id: "license",
           to: `${pluginId}/license`,
-          Component: () => import("./License-CN5YpqIu.mjs")
+          Component: () => import("./License-DJ2szRWp.mjs")
         }
       ]
     );
@@ -501,7 +501,7 @@ const index = {
           defaultMessage: "Online Users"
         },
         component: async () => {
-          const component = await import("./OnlineUsersWidget-ytykP_tA.mjs");
+          const component = await import("./OnlineUsersWidget--050_ZKf.mjs");
           return component.default;
         },
         id: "online-users-widget",