strapi-plugin-magic-mail 2.6.2 → 2.6.4

package/dist/_chunks/{App-BQRVLK7n.js → App-DGGqHEPC.js}

@@ -8,7 +8,7 @@ const outline = require("@heroicons/react/24/outline");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const icons = require("@strapi/icons");
-const StyledButtons = require("./StyledButtons-BthPdM8c.js");
+const StyledButtons = require("./StyledButtons-DVGuFoqy.js");
 const ReactEmailEditor = require("react-email-editor");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
@@ -122,8 +122,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)"
@@ -191,8 +189,8 @@ const StepDot$1 = styled__default.default.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;
@@ -233,7 +231,7 @@ const ProvidersGrid = styled__default.default(designSystem.Box)`
   margin-right: auto;
 `;
 const ProviderCard = styled__default.default(designSystem.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;
@@ -1973,7 +1971,7 @@ const StatsGrid$3 = styled__default.default.div`
   }
 `;
 const StatCard$3 = styled__default.default(designSystem.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;
@@ -2073,7 +2071,7 @@ const AccountsContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$3.spacing.xl};
 `;
 const EmptyState$3 = styled__default.default(designSystem.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;
@@ -2142,7 +2140,7 @@ const StyledTable$3 = styled__default.default(designSystem.Table)`
   }
 `;
 const FilterBar$3 = styled__default.default(designSystem.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};
@@ -2172,7 +2170,7 @@ const StyledSearchInput$2 = styled__default.default.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 {
@@ -2227,7 +2225,7 @@ const StyledModalHeader$1 = styled__default.default(designSystem.Modal.Header)`
 const StyledModalBody$1 = styled__default.default(designSystem.Modal.Body)`
   && {
     padding: 24px 28px;
-    background: var(--colors-neutral0, white);
+    background: ${(p) => p.theme.colors.neutral0};
     width: 100%;
     box-sizing: border-box;
   }
@@ -2258,7 +2256,7 @@ const TestOptionCard = styled__default.default(designSystem.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)"};
@@ -2283,7 +2281,7 @@ const StyledModalSelect = styled__default.default.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};
@@ -2301,7 +2299,7 @@ const StyledModalInput = styled__default.default.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;
@@ -3007,7 +3005,7 @@ const StatsGrid$2 = styled__default.default.div`
   }
 `;
 const StatCard$2 = styled__default.default(designSystem.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;
@@ -3107,7 +3105,7 @@ const RulesContainer = styled__default.default(designSystem.Box)`
   margin-top: ${theme$2.spacing.xl};
 `;
 const EmptyState$2 = styled__default.default(designSystem.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;
@@ -3176,7 +3174,7 @@ const StyledTable$2 = styled__default.default(designSystem.Table)`
   }
 `;
 const FilterBar$2 = styled__default.default(designSystem.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};
@@ -3908,7 +3906,7 @@ const ScrollableDialogBody = styled__default.default(designSystem.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 {
@@ -4038,7 +4036,7 @@ const CopyButton = styled__default.default(designSystem.Button)`
     height: 14px;
   }
 `;
-const InfoBox$1 = styled__default.default(designSystem.Box)`
+const InfoBox$2 = styled__default.default(designSystem.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;
@@ -4192,7 +4190,7 @@ const StatsGrid$1 = styled__default.default.div`
   }
 `;
 const StatCard$1 = styled__default.default(designSystem.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;
@@ -4295,7 +4293,7 @@ const SectionHeader = styled__default.default(designSystem.Box)`
   margin-bottom: ${theme$1.spacing.md};
 `;
 const FilterBar$1 = styled__default.default(designSystem.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};
@@ -4327,7 +4325,7 @@ const TableWrapper = styled__default.default(designSystem.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;
@@ -4393,7 +4391,7 @@ const PaginationWrapper = styled__default.default(designSystem.Flex)`
   border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
 `;
 const PaginationButton = styled__default.default.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;
@@ -4416,7 +4414,7 @@ const PaginationButton = styled__default.default.button`
   }
 `;
 const EmptyState$1 = styled__default.default(designSystem.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;
@@ -4481,7 +4479,7 @@ const EmptyFeatureItem = styled__default.default.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};
@@ -4555,7 +4553,7 @@ const StyledModalHeader = styled__default.default(designSystem.Modal.Header)`
 const StyledModalBody = styled__default.default(designSystem.Modal.Body)`
   && {
     padding: 28px;
-    background: var(--colors-neutral0, white);
+    background: ${(p) => p.theme.colors.neutral0};
   }
 `;
 const ModalField = styled__default.default(designSystem.Box)`
@@ -4600,7 +4598,7 @@ const StyledSelect = styled__default.default.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);
@@ -5354,7 +5352,7 @@ const TemplateList = () => {
         selectedTemplate.name
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(ScrollableDialogBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoBox$2, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Template ID:" }),
             " #",
@@ -5679,7 +5677,7 @@ const Container$1 = styled__default.default.div`
 `;
 const Header$1 = styled__default.default.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__default.default.div`
@@ -5750,7 +5748,7 @@ const TabsWrapper = styled__default.default.div`
 `;
 const TabListWrapper = styled__default.default.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__default.default(designSystem.Tabs.Root)`
@@ -5765,7 +5763,7 @@ const StyledTabsContent = styled__default.default(designSystem.Tabs.Content)`
 `;
 const TabContentWrapper = styled__default.default.div`
   height: calc(100vh - 240px);
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   position: relative;
 `;
 const TextTabContent = styled__default.default.div`
@@ -5837,7 +5835,7 @@ const ImportExportButton = styled__default.default.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);
@@ -5869,7 +5867,7 @@ const ImportLabel = styled__default.default.label`
   display: inline-block;
 `;
 const BackButton = styled__default.default.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;
@@ -5896,7 +5894,7 @@ const BackButton = styled__default.default.button`
   }
 `;
 const VersionButton = styled__default.default.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;
@@ -5935,7 +5933,7 @@ const VersionModal = styled__default.default.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);
@@ -6915,7 +6913,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -7009,7 +7007,7 @@ const StatLabel = styled__default.default(designSystem.Typography)`
   }
 `;
 const FilterBar = styled__default.default(designSystem.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};
@@ -7051,7 +7049,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
   }
 `;
 const TableContainer = styled__default.default(designSystem.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);
@@ -7059,7 +7057,7 @@ const TableContainer = styled__default.default(designSystem.Box)`
   margin-bottom: ${theme.spacing.xl};
 `;
 const EmptyState = styled__default.default(designSystem.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;
@@ -7382,7 +7380,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)"
 };
@@ -7445,8 +7442,8 @@ const StepDot = styled__default.default.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;
@@ -7477,7 +7474,7 @@ const StepLabel = styled__default.default(designSystem.Typography)`
   transition: all 0.3s ease;
 `;
 const ContentCard = styled__default.default(designSystem.Box)`
-  background: ${colors.white};
+  background: ${(p) => p.theme.colors.neutral0};
   border: 1px solid ${colors.border};
   border-radius: 16px;
   padding: 32px;
@@ -7552,7 +7549,7 @@ const ConnectedCard = styled__default.default(designSystem.Box)`
   padding: 32px;
   text-align: center;
 `;
-const InfoBox = styled__default.default(designSystem.Box)`
+const InfoBox$1 = styled__default.default(designSystem.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;
@@ -7572,7 +7569,7 @@ const WhatsAppInput = styled__default.default.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;
@@ -7593,7 +7590,7 @@ const WhatsAppTextarea = styled__default.default.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;
@@ -7668,7 +7665,7 @@ const AlertIcon = styled__default.default.div`
   font-weight: bold;
   flex-shrink: 0;
 `;
-const SuccessBox = styled__default.default(designSystem.Box)`
+const SuccessBox$1 = styled__default.default(designSystem.Box)`
   background: rgba(22, 163, 74, 0.06);
   border: 1px solid rgba(22, 163, 74, 0.2);
   border-radius: 12px;
@@ -7929,7 +7926,7 @@ const WhatsAppPage = () => {
     currentStep === 1 && /* @__PURE__ */ jsxRuntime.jsxs(ContentCard, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Check Installation" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: { display: "block", marginBottom: "24px" }, children: "First, we need to verify that the required dependencies are installed." }),
-      isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox, { children: [
+      isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: 14, height: 14 } }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: "var(--colors-success600, #15803D)" }, children: "Dependencies Installed" }),
@@ -7980,7 +7977,7 @@ const WhatsAppPage = () => {
     currentStep === 2 && /* @__PURE__ */ jsxRuntime.jsxs(ContentCard, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.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__ */ jsxRuntime.jsxs(InfoBox, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(InfoBox$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "How it works" }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
@@ -8026,7 +8023,7 @@ const WhatsAppPage = () => {
         /* @__PURE__ */ jsxRuntime.jsx(SpinningLoader, { style: { width: "40px", height: "40px" } }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "Generating QR code..." })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(InfoBox, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(InfoBox$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "Instructions" }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
@@ -8184,7 +8181,7 @@ const ModalOverlay = styled__default.default.div`
   padding: 20px;
 `;
 const ModalContent = styled__default.default(designSystem.Box)`
-  background: var(--colors-neutral0, white);
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -8193,7 +8190,7 @@ const ModalContent = styled__default.default(designSystem.Box)`
   overflow: hidden;
 `;
 const GradientHeader = styled__default.default(designSystem.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;
@@ -8259,17 +8256,17 @@ const CloseButton = styled__default.default.button`
 `;
 const GradientButton = styled__default.default(designSystem.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 {
@@ -8280,22 +8277,22 @@ const GradientButton = styled__default.default(designSystem.Button)`
 `;
 styled__default.default(designSystem.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__default.default.button`
   background: none;
   border: none;
-  color: var(--colors-primary600, #0EA5E9);
+  color: #4945ff;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -8304,7 +8301,7 @@ const ToggleButton = styled__default.default.button`
   transition: color 0.2s;
   
   &:hover {
-    color: var(--colors-secondary600, #A855F7);
+    color: #7c3aed;
   }
   
   &:disabled {
@@ -8312,6 +8309,25 @@ const ToggleButton = styled__default.default.button`
     cursor: not-allowed;
   }
 `;
+const InfoBox = styled__default.default(designSystem.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__default.default(designSystem.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__default.default(designSystem.Typography)`
+  font-size: 13px;
+  line-height: 1.6;
+  color: ${(p) => p.theme.colors.neutral800};
+`;
 const LicenseGuard = ({ children }) => {
   const { get, post } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
@@ -8468,19 +8484,7 @@ const LicenseGuard = ({ children }) => {
             children: useExistingKey ? "← Create new license" : "Have a license key? →"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Box,
-          {
-            background: "primary100",
-            padding: 4,
-            style: {
-              borderRadius: "8px",
-              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." : 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__ */ jsxRuntime.jsx(InfoBox, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8532,31 +8536,15 @@ const LicenseGuard = ({ children }) => {
           ] })
         ) : adminUser ? (
           // Auto-create mode - Show user info
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Box,
-            {
-              background: "success100",
-              padding: 5,
-              style: {
-                borderRadius: "8px",
-                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.jsxs(designSystem.Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
-                  "👤 ",
-                  adminUser.firstname || "Admin",
-                  " ",
-                  adminUser.lastname || "User"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-                  "📧 ",
-                  adminUser.email || "Loading..."
-                ] })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs(SuccessBox, { children: [
+            /* @__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",
+              " ",
+              adminUser.lastname || "User"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: adminUser.email || "Loading..." })
+          ] })
         ) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", hasRadius: true, style: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", marginTop: 2, children: "Loading admin user data..." })