strapi-plugin-magic-mail 2.6.2 → 2.6.4

package/dist/_chunks/{App-CtzU0GEJ.mjs → App-CaT5U0uM.mjs}

@@ -6,7 +6,7 @@ import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon,
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight, ArrowClockwise, Play, Cross } from "@strapi/icons";
-import { T as TertiaryButton, G as GradientButton$1, C as CTAButton, I as IconButton, a as IconButtonPrimary, b as IconButtonDanger, S as SecondaryButton, c as IconButtonPurple, d as IconButtonSuccess, D as DangerButton } from "./StyledButtons-B1mvI82D.mjs";
+import { T as TertiaryButton, G as GradientButton$1, C as CTAButton, I as IconButton, a as IconButtonPrimary, b as IconButtonDanger, S as SecondaryButton, c as IconButtonPurple, d as IconButtonSuccess, D as DangerButton } from "./StyledButtons-CdOf4Sps.mjs";
 import * as ReactEmailEditor from "react-email-editor";
 const useAuthRefresh = () => {
   const { get } = useFetchClient();
@@ -99,8 +99,6 @@ const colors$1 = {
   successLight: "rgba(92, 177, 118, 0.12)",
   // Gray
   neutralLight: "rgba(142, 142, 169, 0.08)",
-  // Light gray
-  white: "var(--colors-neutral0, #ffffff)",
   border: "rgba(128, 128, 128, 0.2)",
   text: "var(--colors-neutral800, #32324d)",
   textLight: "var(--colors-neutral600, #666687)"
@@ -168,8 +166,8 @@ const StepDot$1 = styled.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.white};
-  color: ${(props) => props.$active || props.$completed ? colors$1.white : colors$1.textLight};
+  background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : props.theme.colors.neutral0};
+  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors$1.textLight};
   border: 4px solid ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.border};
   display: flex;
   align-items: center;
@@ -210,7 +208,7 @@ const ProvidersGrid = styled(Box)`
   margin-right: auto;
 `;
 const ProviderCard = styled(Box)`
-  background: ${(props) => props.$selected ? colors$1.successLight : colors$1.white};
+  background: ${(props) => props.$selected ? colors$1.successLight : props.theme.colors.neutral0};
   border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
   border-radius: 12px;
   padding: 24px;
@@ -1950,7 +1948,7 @@ const StatsGrid$3 = styled.div`
   }
 `;
 const StatCard$3 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.lg};
   padding: 28px ${theme$3.spacing.lg};
   position: relative;
@@ -2050,7 +2048,7 @@ const AccountsContainer = styled(Box)`
   margin-top: ${theme$3.spacing.xl};
 `;
 const EmptyState$3 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$3.borderRadius.xl};
   border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
@@ -2119,7 +2117,7 @@ const StyledTable$3 = styled(Table)`
   }
 `;
 const FilterBar$3 = styled(Flex)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$3.spacing.md} ${theme$3.spacing.lg};
   border-radius: ${theme$3.borderRadius.lg};
   margin-bottom: ${theme$3.spacing.lg};
@@ -2149,7 +2147,7 @@ const StyledSearchInput$2 = styled.input`
   border-radius: ${theme$3.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme$3.transitions.fast};
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   color: var(--colors-neutral800);
   
   &:focus {
@@ -2204,7 +2202,7 @@ const StyledModalHeader$1 = styled(Modal.Header)`
 const StyledModalBody$1 = styled(Modal.Body)`
   && {
     padding: 24px 28px;
-    background: var(--colors-neutral0, white);
+    background: ${(p) => p.theme.colors.neutral0};
     width: 100%;
     box-sizing: border-box;
   }
@@ -2235,7 +2233,7 @@ const TestOptionCard = styled(Box)`
   border-radius: 12px;
   cursor: pointer;
   transition: all ${theme$3.transitions.fast};
-  background: ${(props) => props.$selected ? "rgba(2, 132, 199, 0.06)" : "var(--colors-neutral0, white)"};
+  background: ${(props) => props.$selected ? "rgba(2, 132, 199, 0.06)" : "${(p) => p.theme.colors.neutral0}"};
   
   &:hover {
     border-color: ${"rgba(2, 132, 199, 0.4)"};
@@ -2260,7 +2258,7 @@ const StyledModalSelect = styled.select`
   border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 8px;
   font-size: 14px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   color: var(--colors-neutral800);
   cursor: pointer;
   transition: all ${theme$3.transitions.fast};
@@ -2278,7 +2276,7 @@ const StyledModalInput = styled.input`
   border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 8px;
   font-size: 14px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   color: var(--colors-neutral800);
   transition: all ${theme$3.transitions.fast};
   box-sizing: border-box;
@@ -2984,7 +2982,7 @@ const StatsGrid$2 = styled.div`
   }
 `;
 const StatCard$2 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.lg};
   padding: 28px ${theme$2.spacing.lg};
   position: relative;
@@ -3084,7 +3082,7 @@ const RulesContainer = styled(Box)`
   margin-top: ${theme$2.spacing.xl};
 `;
 const EmptyState$2 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$2.borderRadius.xl};
   border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
@@ -3153,7 +3151,7 @@ const StyledTable$2 = styled(Table)`
   }
 `;
 const FilterBar$2 = styled(Flex)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$2.spacing.md} ${theme$2.spacing.lg};
   border-radius: ${theme$2.borderRadius.lg};
   margin-bottom: ${theme$2.spacing.lg};
@@ -3885,7 +3883,7 @@ const ScrollableDialogBody = styled(Box)`
   overflow-y: auto;
   max-height: calc(85vh - 160px);
   padding: 24px 28px 28px 28px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
 
   /* Custom Scrollbar */
   &::-webkit-scrollbar {
@@ -4015,7 +4013,7 @@ const CopyButton = styled(Button)`
     height: 14px;
   }
 `;
-const InfoBox$1 = styled(Box)`
+const InfoBox$2 = styled(Box)`
   background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"}, ${"rgba(2, 132, 199, 0.12)"});
   border-left: 4px solid ${"var(--colors-primary600, #0EA5E9)"};
   border-radius: 8px;
@@ -4169,7 +4167,7 @@ const StatsGrid$1 = styled.div`
   }
 `;
 const StatCard$1 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.lg};
   padding: 28px ${theme$1.spacing.lg};
   position: relative;
@@ -4272,7 +4270,7 @@ const SectionHeader = styled(Box)`
   margin-bottom: ${theme$1.spacing.md};
 `;
 const FilterBar$1 = styled(Flex)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme$1.spacing.md} ${theme$1.spacing.lg};
   border-radius: ${theme$1.borderRadius.lg};
   margin-bottom: ${theme$1.spacing.lg};
@@ -4304,7 +4302,7 @@ const TableWrapper = styled(Box)`
   overflow-x: auto;
   border-radius: ${theme$1.borderRadius.lg};
   border: 1px solid rgba(128, 128, 128, 0.2);
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   
   &::-webkit-scrollbar {
     height: 8px;
@@ -4370,7 +4368,7 @@ const PaginationWrapper = styled(Flex)`
   border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
 `;
 const PaginationButton = styled.button`
-  background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%)" : "var(--colors-neutral0, white)"};
+  background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%)" : "${(p) => p.theme.colors.neutral0}"};
   color: ${(props) => props.active ? "white" : "var(--colors-neutral700)"};
   border: 1px solid ${(props) => props.active ? "transparent" : "rgba(128, 128, 128, 0.3)"};
   padding: 6px 12px;
@@ -4393,7 +4391,7 @@ const PaginationButton = styled.button`
   }
 `;
 const EmptyState$1 = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.xl};
   border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
@@ -4458,7 +4456,7 @@ const EmptyFeatureItem = styled.div`
   text-align: center;
   gap: ${theme$1.spacing.sm};
   padding: ${theme$1.spacing.lg};
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme$1.borderRadius.md};
   box-shadow: ${theme$1.shadows.sm};
   transition: ${theme$1.transitions.fast};
@@ -4532,7 +4530,7 @@ const StyledModalHeader = styled(Modal.Header)`
 const StyledModalBody = styled(Modal.Body)`
   && {
     padding: 28px;
-    background: var(--colors-neutral0, white);
+    background: ${(p) => p.theme.colors.neutral0};
   }
 `;
 const ModalField = styled(Box)`
@@ -4577,7 +4575,7 @@ const StyledSelect = styled.select`
   border-radius: 8px;
   border: 1px solid rgba(128, 128, 128, 0.2);
   font-size: 14px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   cursor: pointer;
   transition: all ${theme$1.transitions.fast};
   color: var(--colors-neutral700);
@@ -5331,7 +5329,7 @@ const TemplateList = () => {
         selectedTemplate.name
       ] }) }),
       /* @__PURE__ */ jsxs(ScrollableDialogBody, { children: [
-        /* @__PURE__ */ jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(InfoBox$2, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
             /* @__PURE__ */ jsx("strong", { children: "Template ID:" }),
             " #",
@@ -5656,7 +5654,7 @@ const Container$1 = styled.div`
 `;
 const Header$1 = styled.div`
   padding: 24px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 `;
 const HeaderRow = styled.div`
@@ -5727,7 +5725,7 @@ const TabsWrapper = styled.div`
 `;
 const TabListWrapper = styled.div`
   padding: 0 24px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-bottom: 1px solid rgba(128, 128, 128, 0.2);
 `;
 const StyledTabsRoot = styled(Tabs.Root)`
@@ -5742,7 +5740,7 @@ const StyledTabsContent = styled(Tabs.Content)`
 `;
 const TabContentWrapper = styled.div`
   height: calc(100vh - 240px);
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   position: relative;
 `;
 const TextTabContent = styled.div`
@@ -5814,7 +5812,7 @@ const ImportExportButton = styled.span`
   gap: 6px;
   padding: 8px 16px;
   height: 36px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
   color: var(--colors-neutral800);
@@ -5846,7 +5844,7 @@ const ImportLabel = styled.label`
   display: inline-block;
 `;
 const BackButton = styled.button`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
   padding: 8px 10px;
@@ -5873,7 +5871,7 @@ const BackButton = styled.button`
   }
 `;
 const VersionButton = styled.button`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 4px;
   padding: 8px 16px;
@@ -5912,7 +5910,7 @@ const VersionModal = styled.div`
   right: ${(props) => props.$isOpen ? "0" : "-450px"};
   width: 450px;
   height: 100vh;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
   z-index: 9999;
   transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -6892,7 +6890,7 @@ const StatsGrid = styled.div`
   }
 `;
 const StatCard = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -6986,7 +6984,7 @@ const StatLabel = styled(Typography)`
   }
 `;
 const FilterBar = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg} ${theme.spacing.xl};
   margin-bottom: ${theme.spacing.lg};
@@ -7028,7 +7026,7 @@ const StyledTable = styled(Table)`
   }
 `;
 const TableContainer = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   box-shadow: ${theme.shadows.md};
   border: 1px solid rgba(128, 128, 128, 0.2);
@@ -7036,7 +7034,7 @@ const TableContainer = styled(Box)`
   margin-bottom: ${theme.spacing.xl};
 `;
 const EmptyState = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.xl};
   border: 2px dashed rgba(128, 128, 128, 0.3);
   padding: 80px 32px;
@@ -7359,7 +7357,6 @@ const colors = {
   danger: "#d02b20",
   neutral: "#8e8ea9",
   neutralLight: "rgba(142, 142, 169, 0.08)",
-  white: "var(--colors-neutral0, #ffffff)",
   border: "rgba(128, 128, 128, 0.2)",
   textLight: "var(--colors-neutral600, #666687)"
 };
@@ -7422,8 +7419,8 @@ const StepDot = styled.div`
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.white};
-  color: ${(props) => props.$active || props.$completed ? colors.white : colors.textLight};
+  background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : props.theme.colors.neutral0};
+  color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors.textLight};
   border: 4px solid ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.border};
   display: flex;
   align-items: center;
@@ -7454,7 +7451,7 @@ const StepLabel = styled(Typography)`
   transition: all 0.3s ease;
 `;
 const ContentCard = styled(Box)`
-  background: ${colors.white};
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid ${colors.border};
   border-radius: 16px;
   padding: 32px;
@@ -7529,7 +7526,7 @@ const ConnectedCard = styled(Box)`
   padding: 32px;
   text-align: center;
 `;
-const InfoBox = styled(Box)`
+const InfoBox$1 = styled(Box)`
   background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, ${colors.whatsappLight} 100%);
   border: 1px solid rgba(2, 132, 199, 0.2);
   border-radius: 12px;
@@ -7549,7 +7546,7 @@ const WhatsAppInput = styled.input`
   border: 2px solid rgba(128, 128, 128, 0.2);
   border-radius: 12px;
   font-size: 15px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   color: var(--colors-neutral800);
   transition: all 0.2s ease;
   box-sizing: border-box;
@@ -7570,7 +7567,7 @@ const WhatsAppTextarea = styled.textarea`
   border: 2px solid rgba(128, 128, 128, 0.2);
   border-radius: 12px;
   font-size: 15px;
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   color: var(--colors-neutral800);
   transition: all 0.2s ease;
   box-sizing: border-box;
@@ -7645,7 +7642,7 @@ const AlertIcon = styled.div`
   font-weight: bold;
   flex-shrink: 0;
 `;
-const SuccessBox = styled(Box)`
+const SuccessBox$1 = styled(Box)`
   background: rgba(22, 163, 74, 0.06);
   border: 1px solid rgba(22, 163, 74, 0.2);
   border-radius: 12px;
@@ -7906,7 +7903,7 @@ const WhatsAppPage = () => {
     currentStep === 1 && /* @__PURE__ */ jsxs(ContentCard, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Check Installation" }),
       /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "First, we need to verify that the required dependencies are installed." }),
-      isAvailable ? /* @__PURE__ */ jsxs(SuccessBox, { children: [
+      isAvailable ? /* @__PURE__ */ jsxs(SuccessBox$1, { children: [
         /* @__PURE__ */ jsx(SuccessIcon, { children: /* @__PURE__ */ jsx(Check, { style: { width: 14, height: 14 } }) }),
         /* @__PURE__ */ jsxs(Box, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: "var(--colors-success600, #15803D)" }, children: "Dependencies Installed" }),
@@ -7957,7 +7954,7 @@ const WhatsAppPage = () => {
     currentStep === 2 && /* @__PURE__ */ jsxs(ContentCard, { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
       /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "Click the button below to start the connection process. A QR code will be generated for you to scan." }),
-      /* @__PURE__ */ jsxs(InfoBox, { children: [
+      /* @__PURE__ */ jsxs(InfoBox$1, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "How it works" }),
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
@@ -8003,7 +8000,7 @@ const WhatsAppPage = () => {
         /* @__PURE__ */ jsx(SpinningLoader, { style: { width: "40px", height: "40px" } }),
         /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "Generating QR code..." })
       ] }) }),
-      /* @__PURE__ */ jsxs(InfoBox, { children: [
+      /* @__PURE__ */ jsxs(InfoBox$1, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "Instructions" }),
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
@@ -8161,7 +8158,7 @@ const ModalOverlay = styled.div`
   padding: 20px;
 `;
 const ModalContent = styled(Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -8170,7 +8167,7 @@ const ModalContent = styled(Box)`
   overflow: hidden;
 `;
 const GradientHeader = styled(Box)`
-  background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
+  background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
   padding: 32px 40px;
   position: relative;
   overflow: hidden;
@@ -8236,17 +8233,17 @@ const CloseButton = styled.button`
 `;
 const GradientButton = styled(Button)`
   && {
-    background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
+    background: linear-gradient(135deg, #4945ff 0%, #7c3aed 100%);
     color: white;
     font-weight: 600;
     border: none;
-    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+    box-shadow: 0 4px 12px rgba(73, 69, 255, 0.4);
     padding: 12px 24px;
     min-height: 44px;
     
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%);
-      box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5);
+      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
+      box-shadow: 0 6px 16px rgba(73, 69, 255, 0.5);
     }
     
     &:disabled {
@@ -8257,22 +8254,22 @@ const GradientButton = styled(Button)`
 `;
 styled(Button)`
   && {
-    background: rgba(14, 165, 233, 0.06);
-    color: var(--colors-primary600, #0EA5E9);
+    background: rgba(73, 69, 255, 0.06);
+    color: #4945ff;
     font-weight: 600;
-    border: 2px solid var(--colors-primary600, #0EA5E9);
+    border: 2px solid #4945ff;
     padding: 12px 24px;
     min-height: 44px;
     
     &:hover:not(:disabled) {
-      background: rgba(14, 165, 233, 0.12);
+      background: rgba(73, 69, 255, 0.12);
     }
   }
 `;
 const ToggleButton = styled.button`
   background: none;
   border: none;
-  color: var(--colors-primary600, #0EA5E9);
+  color: #4945ff;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -8281,7 +8278,7 @@ const ToggleButton = styled.button`
   transition: color 0.2s;
   
   &:hover {
-    color: var(--colors-secondary600, #A855F7);
+    color: #7c3aed;
   }
   
   &:disabled {
@@ -8289,6 +8286,25 @@ const ToggleButton = styled.button`
     cursor: not-allowed;
   }
 `;
+const InfoBox = styled(Box)`
+  background: rgba(73, 69, 255, 0.06);
+  border: 2px solid rgba(73, 69, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  width: 100%;
+`;
+const SuccessBox = styled(Box)`
+  background: rgba(34, 197, 94, 0.06);
+  border: 2px solid rgba(34, 197, 94, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+`;
+const InfoText = styled(Typography)`
+  font-size: 13px;
+  line-height: 1.6;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
 const LicenseGuard = ({ children }) => {
   const { get, post } = useFetchClient();
   const { toggleNotification } = useNotification();
@@ -8445,19 +8461,7 @@ const LicenseGuard = ({ children }) => {
             children: useExistingKey ? "← Create new license" : "Have a license key? →"
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            background: "primary100",
-            padding: 4,
-            style: {
-              borderRadius: "8px",
-              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." : adminUser && adminUser.email ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})` : '✨ Click "Activate" to auto-create a license with your admin account' })
-          }
-        ),
+        /* @__PURE__ */ jsx(InfoBox, { children: /* @__PURE__ */ jsx(InfoText, { variant: "omega", children: useExistingKey ? "Enter your email and license key to activate." : adminUser && adminUser.email ? `Click "Activate" to auto-create a license with your account (${adminUser.email})` : 'Click "Activate" to auto-create a license with your admin account' }) }),
         useExistingKey ? (
           // Existing License Key Input
           /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8509,31 +8513,15 @@ const LicenseGuard = ({ children }) => {
           ] })
         ) : adminUser ? (
           // Auto-create mode - Show user info
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              background: "success100",
-              padding: 5,
-              style: {
-                borderRadius: "8px",
-                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__ */ jsxs(Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
-                  "👤 ",
-                  adminUser.firstname || "Admin",
-                  " ",
-                  adminUser.lastname || "User"
-                ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
-                  "📧 ",
-                  adminUser.email || "Loading..."
-                ] })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs(SuccessBox, { children: [
+            /* @__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",
+              " ",
+              adminUser.lastname || "User"
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: adminUser.email || "Loading..." })
+          ] })
         ) : /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", hasRadius: true, style: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx(Loader, { small: true }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", marginTop: 2, children: "Loading admin user data..." })