strapi-plugin-magic-mail 2.6.1 → 2.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/_chunks/{App-Boq8cits.js → App-Cp6QQAHt.js} +341 -416
  2. package/dist/_chunks/{App-zdhx2Ony.mjs → App-DvwmedNr.mjs} +341 -416
  3. package/dist/_chunks/{LicensePage-Bg72gy8w.js → LicensePage-C38rs_Wj.js} +15 -15
  4. package/dist/_chunks/{LicensePage-ndUhjynY.mjs → LicensePage-DTrGRpi7.mjs} +15 -15
  5. package/dist/_chunks/{PluginSettings-ywPWZVt0.mjs → PluginSettings-XwyzH95_.mjs} +20 -20
  6. package/dist/_chunks/{PluginSettings-D2BUUHY1.js → PluginSettings-cZXE_vy8.js} +20 -20
  7. package/dist/_chunks/{Settings-CPPrGxLm.js → Settings-BRFoD1yZ.js} +4 -4
  8. package/dist/_chunks/{Settings-Cc-hhoLA.mjs → Settings-DoSrZKfp.mjs} +4 -4
  9. package/dist/_chunks/{StyledButtons-nt2C730e.mjs → StyledButtons-CdOf4Sps.mjs} +52 -52
  10. package/dist/_chunks/{StyledButtons-M7vUd2N4.js → StyledButtons-DVGuFoqy.js} +52 -52
  11. package/dist/admin/index.js +4 -4
  12. package/dist/admin/index.mjs +4 -4
  13. package/dist/server/index.js +1 -1
  14. package/dist/server/index.mjs +1 -1
  15. package/package.json +1 -1
package/dist/_chunks/{App-zdhx2Ony.mjs → App-DvwmedNr.mjs} RENAMED
@@ -6,7 +6,7 @@ import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon,
6
6
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
7
7
  import styled, { css, keyframes } from "styled-components";
8
8
  import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight, ArrowClockwise, Play, Cross } from "@strapi/icons";
9
- 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-nt2C730e.mjs";
9
+ 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";
10
10
  import * as ReactEmailEditor from "react-email-editor";
11
11
  const useAuthRefresh = () => {
12
12
  const { get } = useFetchClient();
@@ -38,36 +38,6 @@ const useAuthRefresh = () => {
38
38
  };
39
39
  };
40
40
  const theme$3 = {
41
- colors: {
42
- primary: {
43
- 50: "#F0F9FF",
44
- 100: "#E0F2FE",
45
- 200: "#BAE6FD",
46
- 500: "#0EA5E9",
47
- 600: "#0284C7",
48
- 700: "#0369A1"
49
- },
50
- secondary: {
51
- 50: "#FAF5FF",
52
- 100: "#F3E8FF",
53
- 500: "#A855F7",
54
- 600: "#9333EA"
55
- },
56
- success: {
57
- 50: "#F0FDF4",
58
- 100: "#DCFCE7",
59
- 500: "#22C55E",
60
- 600: "#16A34A",
61
- 700: "#15803D"
62
- },
63
- warning: {
64
- 100: "#FEF3C7",
65
- 600: "#D97706"
66
- },
67
- danger: {
68
- 600: "#DC2626"
69
- }
70
- },
71
41
  shadows: {
72
42
  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
73
43
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
@@ -122,18 +92,16 @@ const slideIn = keyframes`
122
92
  const colors$1 = {
123
93
  primary: "#4945ff",
124
94
  // Strapi Primary Blue
125
- primaryLight: "#f0f0ff",
95
+ primaryLight: "rgba(73, 69, 255, 0.06)",
126
96
  // Light Blue Background
127
97
  success: "#5cb176",
128
98
  // Green for completed
129
- successLight: "#eafaf1",
99
+ successLight: "rgba(92, 177, 118, 0.12)",
130
100
  // Gray
131
- neutralLight: "#f6f6f9",
132
- // Light gray
133
- white: "#ffffff",
134
- border: "#dcdce4",
135
- text: "#32324d",
136
- textLight: "#666687"
101
+ neutralLight: "rgba(142, 142, 169, 0.08)",
102
+ border: "rgba(128, 128, 128, 0.2)",
103
+ text: "var(--colors-neutral800, #32324d)",
104
+ textLight: "var(--colors-neutral600, #666687)"
137
105
  };
138
106
  const StepHeader = styled(Box)`
139
107
  padding-bottom: 24px;
@@ -198,8 +166,8 @@ const StepDot$1 = styled.div`
198
166
  width: 56px;
199
167
  height: 56px;
200
168
  border-radius: 50%;
201
- background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.white};
202
- color: ${(props) => props.$active || props.$completed ? colors$1.white : colors$1.textLight};
169
+ background: ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : props.theme.colors.neutral0};
170
+ color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors$1.textLight};
203
171
  border: 4px solid ${(props) => props.$active ? colors$1.primary : props.$completed ? colors$1.success : colors$1.border};
204
172
  display: flex;
205
173
  align-items: center;
@@ -240,7 +208,7 @@ const ProvidersGrid = styled(Box)`
240
208
  margin-right: auto;
241
209
  `;
242
210
  const ProviderCard = styled(Box)`
243
- background: ${(props) => props.$selected ? colors$1.successLight : colors$1.white};
211
+ background: ${(props) => props.$selected ? colors$1.successLight : props.theme.colors.neutral0};
244
212
  border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
245
213
  border-radius: 12px;
246
214
  padding: 24px;
@@ -1114,10 +1082,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1114
1082
  Box,
1115
1083
  {
1116
1084
  padding: 4,
1117
- background: formData.secure ? "#DCFCE7" : "#FEF3C7",
1085
+ background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
1118
1086
  hasRadius: true,
1119
1087
  style: {
1120
- border: formData.secure ? "2px solid #22C55E" : "2px solid #F59E0B",
1088
+ border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
1121
1089
  borderRadius: "8px",
1122
1090
  transition: "all 0.2s ease"
1123
1091
  },
@@ -1643,7 +1611,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1643
1611
  /* @__PURE__ */ jsx(Alert, { variant: "default", title: "📖 SendGrid Resources", children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", children: [
1644
1612
  /* @__PURE__ */ jsx("strong", { children: "Dashboard:" }),
1645
1613
  " ",
1646
- /* @__PURE__ */ jsx("a", { href: "https://app.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "app.sendgrid.com" }),
1614
+ /* @__PURE__ */ jsx("a", { href: "https://app.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "app.sendgrid.com" }),
1647
1615
  /* @__PURE__ */ jsx("br", {}),
1648
1616
  /* @__PURE__ */ jsx("strong", { children: "API Keys:" }),
1649
1617
  " Settings → API Keys → Create API Key",
@@ -1653,7 +1621,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1653
1621
  /* @__PURE__ */ jsx("br", {}),
1654
1622
  /* @__PURE__ */ jsx("strong", { children: "Docs:" }),
1655
1623
  " ",
1656
- /* @__PURE__ */ jsx("a", { href: "https://docs.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "docs.sendgrid.com" })
1624
+ /* @__PURE__ */ jsx("a", { href: "https://docs.sendgrid.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "docs.sendgrid.com" })
1657
1625
  ] }) })
1658
1626
  ] })
1659
1627
  ] }),
@@ -1692,7 +1660,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1692
1660
  /* @__PURE__ */ jsx(Alert, { variant: "default", title: "📖 Mailgun Resources", children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", children: [
1693
1661
  /* @__PURE__ */ jsx("strong", { children: "Dashboard:" }),
1694
1662
  " ",
1695
- /* @__PURE__ */ jsx("a", { href: "https://app.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "app.mailgun.com" }),
1663
+ /* @__PURE__ */ jsx("a", { href: "https://app.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "app.mailgun.com" }),
1696
1664
  /* @__PURE__ */ jsx("br", {}),
1697
1665
  /* @__PURE__ */ jsx("strong", { children: "API Keys:" }),
1698
1666
  " Settings → API Security → Private API Key",
@@ -1702,7 +1670,7 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1702
1670
  /* @__PURE__ */ jsx("br", {}),
1703
1671
  /* @__PURE__ */ jsx("strong", { children: "Docs:" }),
1704
1672
  " ",
1705
- /* @__PURE__ */ jsx("a", { href: "https://documentation.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "#0284c7" }, children: "documentation.mailgun.com" })
1673
+ /* @__PURE__ */ jsx("a", { href: "https://documentation.mailgun.com", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--colors-primary600, #0284c7)" }, children: "documentation.mailgun.com" })
1706
1674
  ] }) })
1707
1675
  ] })
1708
1676
  ] })
@@ -1748,10 +1716,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1748
1716
  Box,
1749
1717
  {
1750
1718
  padding: 4,
1751
- background: formData.isActive ? "#DCFCE7" : "#FEE2E2",
1719
+ background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
1752
1720
  hasRadius: true,
1753
1721
  style: {
1754
- border: formData.isActive ? `2px solid #22C55E` : `2px solid #EF4444`,
1722
+ border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
1755
1723
  borderRadius: "8px",
1756
1724
  transition: "all 0.2s ease"
1757
1725
  },
@@ -1780,10 +1748,10 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1780
1748
  Box,
1781
1749
  {
1782
1750
  padding: 4,
1783
- background: formData.isPrimary ? "#FEF3C7" : "neutral100",
1751
+ background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
1784
1752
  hasRadius: true,
1785
1753
  style: {
1786
- border: formData.isPrimary ? `2px solid #F59E0B` : `1px solid ${colors$1.border}`,
1754
+ border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
1787
1755
  borderRadius: "8px",
1788
1756
  transition: "all 0.2s ease"
1789
1757
  },
@@ -1880,8 +1848,8 @@ const Container$4 = styled(Box)`
1880
1848
  `;
1881
1849
  const Header$4 = styled(Box)`
1882
1850
  background: linear-gradient(135deg,
1883
- ${theme$3.colors.primary[600]} 0%,
1884
- ${theme$3.colors.secondary[600]} 100%
1851
+ ${"var(--colors-primary600, #0284C7)"} 0%,
1852
+ var(--colors-secondary600, #7C3AED) 100%
1885
1853
  );
1886
1854
  border-radius: ${theme$3.borderRadius.xl};
1887
1855
  padding: ${theme$3.spacing.xl} ${theme$3.spacing["2xl"]};
@@ -1980,7 +1948,7 @@ const StatsGrid$3 = styled.div`
1980
1948
  }
1981
1949
  `;
1982
1950
  const StatCard$3 = styled(Box)`
1983
- background: ${(props) => props.theme.colors.neutral0};
1951
+ background: ${(p) => p.theme.colors.neutral0};
1984
1952
  border-radius: ${theme$3.borderRadius.lg};
1985
1953
  padding: 28px ${theme$3.spacing.lg};
1986
1954
  position: relative;
@@ -1989,7 +1957,7 @@ const StatCard$3 = styled(Box)`
1989
1957
  ${css`animation: ${fadeIn$5} ${theme$3.transitions.slow} backwards;`}
1990
1958
  animation-delay: ${(props) => props.$delay || "0s"};
1991
1959
  box-shadow: ${theme$3.shadows.sm};
1992
- border: 1px solid ${(props) => props.theme.colors.neutral200};
1960
+ border: 1px solid rgba(128, 128, 128, 0.2);
1993
1961
  min-width: 200px;
1994
1962
  flex: 1;
1995
1963
  text-align: center;
@@ -2010,7 +1978,7 @@ const StatCard$3 = styled(Box)`
2010
1978
  &:hover {
2011
1979
  transform: translateY(-6px);
2012
1980
  box-shadow: ${theme$3.shadows.xl};
2013
- border-color: ${(props) => props.$color || theme$3.colors.primary[500]};
1981
+ border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
2014
1982
 
2015
1983
  .stat-icon {
2016
1984
  transform: scale(1.15) rotate(5deg);
@@ -2018,7 +1986,7 @@ const StatCard$3 = styled(Box)`
2018
1986
 
2019
1987
  .stat-value {
2020
1988
  transform: scale(1.08);
2021
- color: ${(props) => props.$color || theme$3.colors.primary[600]};
1989
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
2022
1990
  }
2023
1991
  }
2024
1992
  `;
@@ -2029,7 +1997,7 @@ const StatIcon$3 = styled(Box)`
2029
1997
  display: flex;
2030
1998
  align-items: center;
2031
1999
  justify-content: center;
2032
- background: ${(props) => props.$bg || theme$3.colors.primary[100]};
2000
+ background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
2033
2001
  transition: all ${theme$3.transitions.normal};
2034
2002
  margin: 0 auto 20px;
2035
2003
  box-shadow: ${theme$3.shadows.sm};
@@ -2037,7 +2005,7 @@ const StatIcon$3 = styled(Box)`
2037
2005
  svg {
2038
2006
  width: 34px;
2039
2007
  height: 34px;
2040
- color: ${(props) => props.$color || theme$3.colors.primary[600]};
2008
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
2041
2009
  }
2042
2010
 
2043
2011
  @media screen and (max-width: ${breakpoints$3.mobile}) {
@@ -2054,7 +2022,7 @@ const StatIcon$3 = styled(Box)`
2054
2022
  const StatValue$3 = styled(Typography)`
2055
2023
  font-size: 2.75rem;
2056
2024
  font-weight: 700;
2057
- color: ${(props) => props.theme.colors.neutral800};
2025
+ color: var(--colors-neutral800);
2058
2026
  line-height: 1;
2059
2027
  margin-bottom: 10px;
2060
2028
  transition: all ${theme$3.transitions.normal};
@@ -2067,7 +2035,7 @@ const StatValue$3 = styled(Typography)`
2067
2035
  `;
2068
2036
  const StatLabel$3 = styled(Typography)`
2069
2037
  font-size: 0.95rem;
2070
- color: ${(props) => props.theme.colors.neutral600};
2038
+ color: var(--colors-neutral600);
2071
2039
  font-weight: 500;
2072
2040
  letter-spacing: 0.025em;
2073
2041
  text-align: center;
@@ -2080,9 +2048,9 @@ const AccountsContainer = styled(Box)`
2080
2048
  margin-top: ${theme$3.spacing.xl};
2081
2049
  `;
2082
2050
  const EmptyState$3 = styled(Box)`
2083
- background: ${(props) => props.theme.colors.neutral0};
2051
+ background: ${(p) => p.theme.colors.neutral0};
2084
2052
  border-radius: ${theme$3.borderRadius.xl};
2085
- border: 2px dashed ${(props) => props.theme.colors.neutral300};
2053
+ border: 2px dashed rgba(128, 128, 128, 0.3);
2086
2054
  padding: 80px 32px;
2087
2055
  text-align: center;
2088
2056
  position: relative;
@@ -2100,7 +2068,7 @@ const EmptyState$3 = styled(Box)`
2100
2068
  left: 0;
2101
2069
  right: 0;
2102
2070
  bottom: 0;
2103
- background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
2071
+ background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
2104
2072
  opacity: 0.3;
2105
2073
  z-index: 0;
2106
2074
  }
@@ -2109,19 +2077,19 @@ const OnlineBadge$1 = styled.div`
2109
2077
  width: 12px;
2110
2078
  height: 12px;
2111
2079
  border-radius: 50%;
2112
- background: ${(props) => props.$active ? theme$3.colors.success[500] : props.theme.colors.neutral400};
2080
+ background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
2113
2081
  display: inline-block;
2114
2082
  margin-right: 8px;
2115
2083
  ${css`animation: ${(props) => props.$active ? pulse$2 : "none"} 2s ease-in-out infinite;`}
2116
2084
  `;
2117
2085
  const StyledTable$3 = styled(Table)`
2118
2086
  thead {
2119
- background: ${(props) => props.theme.colors.neutral100};
2120
- border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
2087
+ background: var(--colors-neutral100);
2088
+ border-bottom: 2px solid rgba(128, 128, 128, 0.2);
2121
2089
 
2122
2090
  th {
2123
2091
  font-weight: 600;
2124
- color: ${(props) => props.theme.colors.neutral800};
2092
+ color: var(--colors-neutral800);
2125
2093
  font-size: 0.875rem;
2126
2094
  text-transform: uppercase;
2127
2095
  letter-spacing: 0.025em;
@@ -2131,30 +2099,30 @@ const StyledTable$3 = styled(Table)`
2131
2099
 
2132
2100
  tbody tr {
2133
2101
  transition: all ${theme$3.transitions.fast};
2134
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
2102
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
2135
2103
 
2136
2104
  &:last-child {
2137
2105
  border-bottom: none;
2138
2106
  }
2139
2107
 
2140
2108
  &:hover {
2141
- background: ${(props) => props.theme.colors.primary100};
2109
+ background: rgba(2, 132, 199, 0.12);
2142
2110
  }
2143
2111
 
2144
2112
  td {
2145
2113
  padding: ${theme$3.spacing.lg} ${theme$3.spacing.lg};
2146
- color: ${(props) => props.theme.colors.neutral800};
2114
+ color: var(--colors-neutral800);
2147
2115
  vertical-align: middle;
2148
2116
  }
2149
2117
  }
2150
2118
  `;
2151
2119
  const FilterBar$3 = styled(Flex)`
2152
- background: ${(props) => props.theme.colors.neutral0};
2120
+ background: ${(p) => p.theme.colors.neutral0};
2153
2121
  padding: ${theme$3.spacing.md} ${theme$3.spacing.lg};
2154
2122
  border-radius: ${theme$3.borderRadius.lg};
2155
2123
  margin-bottom: ${theme$3.spacing.lg};
2156
2124
  box-shadow: ${theme$3.shadows.sm};
2157
- border: 1px solid ${(props) => props.theme.colors.neutral200};
2125
+ border: 1px solid rgba(128, 128, 128, 0.2);
2158
2126
  gap: ${theme$3.spacing.md};
2159
2127
  align-items: center;
2160
2128
  `;
@@ -2169,27 +2137,27 @@ const SearchIcon$2 = styled(MagnifyingGlassIcon)`
2169
2137
  left: 12px;
2170
2138
  width: 16px;
2171
2139
  height: 16px;
2172
- color: ${(props) => props.theme.colors.neutral600};
2140
+ color: var(--colors-neutral600);
2173
2141
  pointer-events: none;
2174
2142
  `;
2175
2143
  const StyledSearchInput$2 = styled.input`
2176
2144
  width: 100%;
2177
2145
  padding: 10px 12px 10px 40px;
2178
- border: 1px solid ${(props) => props.theme.colors.neutral200};
2146
+ border: 1px solid rgba(128, 128, 128, 0.2);
2179
2147
  border-radius: ${theme$3.borderRadius.md};
2180
2148
  font-size: 0.875rem;
2181
2149
  transition: all ${theme$3.transitions.fast};
2182
- background: ${(props) => props.theme.colors.neutral0};
2183
- color: ${(props) => props.theme.colors.neutral800};
2150
+ background: ${(p) => p.theme.colors.neutral0};
2151
+ color: var(--colors-neutral800);
2184
2152
 
2185
2153
  &:focus {
2186
2154
  outline: none;
2187
- border-color: ${theme$3.colors.primary[500]};
2188
- box-shadow: 0 0 0 2px ${theme$3.colors.primary[100]};
2155
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
2156
+ box-shadow: 0 0 0 2px ${"rgba(2, 132, 199, 0.12)"};
2189
2157
  }
2190
2158
 
2191
2159
  &::placeholder {
2192
- color: ${(props) => props.theme.colors.neutral500};
2160
+ color: var(--colors-neutral500);
2193
2161
  }
2194
2162
  `;
2195
2163
  const StyledModalContent$1 = styled(Modal.Content)`
@@ -2202,7 +2170,7 @@ const StyledModalContent$1 = styled(Modal.Content)`
2202
2170
  `;
2203
2171
  const StyledModalHeader$1 = styled(Modal.Header)`
2204
2172
  && {
2205
- background: linear-gradient(135deg, ${theme$3.colors.primary[500]} 0%, ${theme$3.colors.secondary[500]} 100%);
2173
+ background: linear-gradient(135deg, ${"var(--colors-primary600, #0EA5E9)"} 0%, var(--colors-secondary600, #A855F7) 100%);
2206
2174
  padding: 24px 28px;
2207
2175
  border-bottom: none;
2208
2176
 
@@ -2234,7 +2202,7 @@ const StyledModalHeader$1 = styled(Modal.Header)`
2234
2202
  const StyledModalBody$1 = styled(Modal.Body)`
2235
2203
  && {
2236
2204
  padding: 24px 28px;
2237
- background: ${(props) => props.theme.colors.neutral0};
2205
+ background: ${(p) => p.theme.colors.neutral0};
2238
2206
  width: 100%;
2239
2207
  box-sizing: border-box;
2240
2208
  }
@@ -2242,13 +2210,13 @@ const StyledModalBody$1 = styled(Modal.Body)`
2242
2210
  const StyledModalFooter$1 = styled(Modal.Footer)`
2243
2211
  && {
2244
2212
  padding: 20px 28px;
2245
- border-top: 1px solid ${(props) => props.theme.colors.neutral200};
2246
- background: ${(props) => props.theme.colors.neutral100};
2213
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
2214
+ background: var(--colors-neutral100);
2247
2215
  }
2248
2216
  `;
2249
2217
  const AccountInfoCard = styled(Box)`
2250
- background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${theme$3.colors.secondary[50]} 100%);
2251
- border: 1px solid ${theme$3.colors.primary[200]};
2218
+ background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
2219
+ border: 1px solid ${"rgba(2, 132, 199, 0.2)"};
2252
2220
  border-radius: 12px;
2253
2221
  padding: 16px 20px;
2254
2222
  text-align: center;
@@ -2261,66 +2229,66 @@ const AccountInfoCard = styled(Box)`
2261
2229
  `;
2262
2230
  const TestOptionCard = styled(Box)`
2263
2231
  padding: 16px 20px;
2264
- border: 2px solid ${(props) => props.$selected ? theme$3.colors.primary[500] : props.theme.colors.neutral200};
2232
+ border: 2px solid ${(props) => props.$selected ? "var(--colors-primary600, #0EA5E9)" : "rgba(128, 128, 128, 0.2)"};
2265
2233
  border-radius: 12px;
2266
2234
  cursor: pointer;
2267
2235
  transition: all ${theme$3.transitions.fast};
2268
- background: ${(props) => props.$selected ? theme$3.colors.primary[50] : props.theme.colors.neutral0};
2236
+ background: ${(props) => props.$selected ? "rgba(2, 132, 199, 0.06)" : "${(p) => p.theme.colors.neutral0}"};
2269
2237
 
2270
2238
  &:hover {
2271
- border-color: ${theme$3.colors.primary[400]};
2272
- background: ${theme$3.colors.primary[50]};
2239
+ border-color: ${"rgba(2, 132, 199, 0.4)"};
2240
+ background: ${"rgba(2, 132, 199, 0.06)"};
2273
2241
  }
2274
2242
  `;
2275
2243
  const ModalFieldLabel = styled(Typography)`
2276
2244
  font-size: 13px;
2277
2245
  font-weight: 600;
2278
- color: ${(props) => props.theme.colors.neutral700};
2246
+ color: var(--colors-neutral700);
2279
2247
  margin-bottom: 8px;
2280
2248
  display: block;
2281
2249
  `;
2282
2250
  const ModalHint$1 = styled(Typography)`
2283
2251
  font-size: 12px;
2284
- color: ${(props) => props.theme.colors.neutral500};
2252
+ color: var(--colors-neutral500);
2285
2253
  margin-top: 6px;
2286
2254
  `;
2287
2255
  const StyledModalSelect = styled.select`
2288
2256
  width: 100%;
2289
2257
  padding: 12px 14px;
2290
- border: 1px solid ${(props) => props.theme.colors.neutral200};
2258
+ border: 1px solid rgba(128, 128, 128, 0.2);
2291
2259
  border-radius: 8px;
2292
2260
  font-size: 14px;
2293
- background: ${(props) => props.theme.colors.neutral0};
2294
- color: ${(props) => props.theme.colors.neutral800};
2261
+ background: ${(p) => p.theme.colors.neutral0};
2262
+ color: var(--colors-neutral800);
2295
2263
  cursor: pointer;
2296
2264
  transition: all ${theme$3.transitions.fast};
2297
2265
  box-sizing: border-box;
2298
2266
 
2299
2267
  &:focus {
2300
2268
  outline: none;
2301
- border-color: ${theme$3.colors.primary[500]};
2302
- box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
2269
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
2270
+ box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
2303
2271
  }
2304
2272
  `;
2305
2273
  const StyledModalInput = styled.input`
2306
2274
  width: 100%;
2307
2275
  padding: 12px 14px;
2308
- border: 1px solid ${(props) => props.theme.colors.neutral200};
2276
+ border: 1px solid rgba(128, 128, 128, 0.2);
2309
2277
  border-radius: 8px;
2310
2278
  font-size: 14px;
2311
- background: ${(props) => props.theme.colors.neutral0};
2312
- color: ${(props) => props.theme.colors.neutral800};
2279
+ background: ${(p) => p.theme.colors.neutral0};
2280
+ color: var(--colors-neutral800);
2313
2281
  transition: all ${theme$3.transitions.fast};
2314
2282
  box-sizing: border-box;
2315
2283
 
2316
2284
  &:focus {
2317
2285
  outline: none;
2318
- border-color: ${theme$3.colors.primary[500]};
2319
- box-shadow: 0 0 0 3px ${theme$3.colors.primary[100]};
2286
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
2287
+ box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
2320
2288
  }
2321
2289
 
2322
2290
  &::placeholder {
2323
- color: ${(props) => props.theme.colors.neutral400};
2291
+ color: rgba(128, 128, 128, 0.4);
2324
2292
  }
2325
2293
  `;
2326
2294
  const HomePage = () => {
@@ -2414,18 +2382,18 @@ const HomePage = () => {
2414
2382
  /* @__PURE__ */ jsx(Subtitle$3, { children: "Multi-account email management with smart routing and OAuth support" })
2415
2383
  ] }) }) }),
2416
2384
  /* @__PURE__ */ jsxs(StatsGrid$3, { children: [
2417
- /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.1s", $color: theme$3.colors.primary[600], children: [
2418
- /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.primary[100], $color: theme$3.colors.primary[600], children: /* @__PURE__ */ jsx(EnvelopeIcon, {}) }),
2385
+ /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.1s", $color: "var(--colors-primary600, #0284C7)", children: [
2386
+ /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(EnvelopeIcon, {}) }),
2419
2387
  /* @__PURE__ */ jsx(StatValue$3, { className: "stat-value", children: totalSentToday }),
2420
2388
  /* @__PURE__ */ jsx(StatLabel$3, { children: "Emails Today" })
2421
2389
  ] }),
2422
- /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.2s", $color: theme$3.colors.success[600], children: [
2423
- /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.success[100], $color: theme$3.colors.success[600], children: /* @__PURE__ */ jsx(ServerIcon, {}) }),
2390
+ /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.2s", $color: "var(--colors-success600, #16A34A)", children: [
2391
+ /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(ServerIcon, {}) }),
2424
2392
  /* @__PURE__ */ jsx(StatValue$3, { className: "stat-value", children: totalSent }),
2425
2393
  /* @__PURE__ */ jsx(StatLabel$3, { children: "Total Sent" })
2426
2394
  ] }),
2427
- /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.3s", $color: theme$3.colors.warning[600], children: [
2428
- /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: theme$3.colors.warning[100], $color: theme$3.colors.warning[600], children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
2395
+ /* @__PURE__ */ jsxs(StatCard$3, { $delay: "0.3s", $color: "var(--colors-warning600, #D97706)", children: [
2396
+ /* @__PURE__ */ jsx(StatIcon$3, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
2429
2397
  /* @__PURE__ */ jsxs(StatValue$3, { className: "stat-value", children: [
2430
2398
  activeAccounts,
2431
2399
  " / ",
@@ -2444,13 +2412,13 @@ const HomePage = () => {
2444
2412
  width: "120px",
2445
2413
  height: "120px",
2446
2414
  borderRadius: "50%",
2447
- background: `linear-gradient(135deg, ${theme$3.colors.primary[100]} 0%, ${theme$3.colors.secondary[100]} 100%)`,
2415
+ background: `linear-gradient(135deg, ${"rgba(2, 132, 199, 0.12)"} 0%, rgba(168, 85, 247, 0.12) 100%)`,
2448
2416
  display: "flex",
2449
2417
  alignItems: "center",
2450
2418
  justifyContent: "center",
2451
2419
  boxShadow: theme$3.shadows.xl
2452
2420
  },
2453
- children: /* @__PURE__ */ jsx(EnvelopeIcon, { style: { width: "60px", height: "60px", color: theme$3.colors.primary[600] } })
2421
+ children: /* @__PURE__ */ jsx(EnvelopeIcon, { style: { width: "60px", height: "60px", color: "var(--colors-primary600, #0284C7)" } })
2454
2422
  }
2455
2423
  ),
2456
2424
  /* @__PURE__ */ jsx(
@@ -2594,7 +2562,7 @@ const HomePage = () => {
2594
2562
  style: {
2595
2563
  width: `${Math.min(usagePercent, 100)}%`,
2596
2564
  height: "100%",
2597
- background: isNearLimit ? theme$3.colors.danger[600] : theme$3.colors.success[600],
2565
+ background: isNearLimit ? "var(--colors-danger600, #DC2626)" : "var(--colors-success600, #16A34A)",
2598
2566
  borderRadius: "999px"
2599
2567
  }
2600
2568
  }
@@ -2731,7 +2699,7 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2731
2699
  /* @__PURE__ */ jsx(StyledModalHeader$1, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Test Email Account" }) }),
2732
2700
  /* @__PURE__ */ jsxs(StyledModalBody$1, { children: [
2733
2701
  /* @__PURE__ */ jsxs(AccountInfoCard, { children: [
2734
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: theme$3.colors.primary[600], fontWeight: 500 }, children: "Testing Account" }),
2702
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: "var(--colors-primary600, #0284C7)", fontWeight: 500 }, children: "Testing Account" }),
2735
2703
  /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral800", style: { fontSize: "1.125rem", fontWeight: 700, marginTop: "4px" }, children: account.name }),
2736
2704
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "2px" }, children: account.fromEmail })
2737
2705
  ] }),
@@ -2759,9 +2727,9 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2759
2727
  onClick: () => setTestMode("direct"),
2760
2728
  style: { marginBottom: "10px" },
2761
2729
  children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
2762
- /* @__PURE__ */ jsx(PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
2730
+ /* @__PURE__ */ jsx(PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2763
2731
  /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
2764
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? theme$3.colors.primary[700] : "#374151" }, children: "Direct Test" }),
2732
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
2765
2733
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
2766
2734
  ] })
2767
2735
  ] })
@@ -2773,16 +2741,16 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2773
2741
  $selected: testMode === "strapi",
2774
2742
  onClick: () => setTestMode("strapi"),
2775
2743
  children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
2776
- /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? theme$3.colors.primary[600] : "#6B7280", flexShrink: 0 } }),
2744
+ /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2777
2745
  /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
2778
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? theme$3.colors.primary[700] : "#374151" }, children: "Strapi Service Test" }),
2746
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
2779
2747
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2780
2748
  ] })
2781
2749
  ] })
2782
2750
  }
2783
2751
  )
2784
2752
  ] }),
2785
- testMode === "direct" && /* @__PURE__ */ jsxs(Box, { style: { marginTop: "20px", padding: "16px", background: "#F9FAFB", borderRadius: "12px" }, children: [
2753
+ testMode === "direct" && /* @__PURE__ */ jsxs(Box, { style: { marginTop: "20px", padding: "16px", background: "var(--colors-neutral100, #F9FAFB)", borderRadius: "12px" }, children: [
2786
2754
  /* @__PURE__ */ jsx(ModalFieldLabel, { style: { marginBottom: "16px", fontSize: "14px" }, children: "Advanced Options" }),
2787
2755
  /* @__PURE__ */ jsxs(Box, { style: { marginBottom: "12px" }, children: [
2788
2756
  /* @__PURE__ */ jsx(ModalFieldLabel, { children: "Priority" }),
@@ -2851,36 +2819,6 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2851
2819
  ] }) });
2852
2820
  };
2853
2821
  const theme$2 = {
2854
- colors: {
2855
- primary: {
2856
- 50: "#F0F9FF",
2857
- 100: "#E0F2FE",
2858
- 500: "#0EA5E9",
2859
- 600: "#0284C7"
2860
- },
2861
- secondary: {
2862
- 50: "#F5F3FF",
2863
- 100: "#EDE9FE",
2864
- 600: "#9333EA"
2865
- },
2866
- success: {
2867
- 100: "#DCFCE7",
2868
- 500: "#22C55E",
2869
- 600: "#16A34A"
2870
- },
2871
- warning: {
2872
- 100: "#FEF3C7",
2873
- 600: "#D97706"
2874
- },
2875
- danger: {
2876
- 100: "#FEE2E2",
2877
- 600: "#DC2626"
2878
- },
2879
- neutral: {
2880
- 100: "#F3F4F6",
2881
- 200: "#E5E7EB"
2882
- }
2883
- },
2884
2822
  shadows: {
2885
2823
  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
2886
2824
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
@@ -2944,8 +2882,8 @@ const Container$3 = styled(Box)`
2944
2882
  `;
2945
2883
  const Header$3 = styled(Box)`
2946
2884
  background: linear-gradient(135deg,
2947
- ${theme$2.colors.secondary[600]} 0%,
2948
- ${theme$2.colors.primary[600]} 100%
2885
+ var(--colors-secondary600, #7C3AED) 0%,
2886
+ ${"var(--colors-primary600, #0284C7)"} 100%
2949
2887
  );
2950
2888
  border-radius: ${theme$2.borderRadius.xl};
2951
2889
  padding: ${theme$2.spacing.xl} ${theme$2.spacing["2xl"]};
@@ -3044,7 +2982,7 @@ const StatsGrid$2 = styled.div`
3044
2982
  }
3045
2983
  `;
3046
2984
  const StatCard$2 = styled(Box)`
3047
- background: ${(props) => props.theme.colors.neutral0};
2985
+ background: ${(p) => p.theme.colors.neutral0};
3048
2986
  border-radius: ${theme$2.borderRadius.lg};
3049
2987
  padding: 28px ${theme$2.spacing.lg};
3050
2988
  position: relative;
@@ -3053,7 +2991,7 @@ const StatCard$2 = styled(Box)`
3053
2991
  ${css`animation: ${fadeIn$4} ${theme$2.transitions.slow} backwards;`}
3054
2992
  animation-delay: ${(props) => props.$delay || "0s"};
3055
2993
  box-shadow: ${theme$2.shadows.sm};
3056
- border: 1px solid ${(props) => props.theme.colors.neutral200};
2994
+ border: 1px solid rgba(128, 128, 128, 0.2);
3057
2995
  min-width: 200px;
3058
2996
  flex: 1;
3059
2997
  text-align: center;
@@ -3074,7 +3012,7 @@ const StatCard$2 = styled(Box)`
3074
3012
  &:hover {
3075
3013
  transform: translateY(-6px);
3076
3014
  box-shadow: ${theme$2.shadows.xl};
3077
- border-color: ${(props) => props.$color || theme$2.colors.primary[500]};
3015
+ border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
3078
3016
 
3079
3017
  .stat-icon {
3080
3018
  transform: scale(1.15) rotate(5deg);
@@ -3082,7 +3020,7 @@ const StatCard$2 = styled(Box)`
3082
3020
 
3083
3021
  .stat-value {
3084
3022
  transform: scale(1.08);
3085
- color: ${(props) => props.$color || theme$2.colors.primary[600]};
3023
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
3086
3024
  }
3087
3025
  }
3088
3026
  `;
@@ -3093,7 +3031,7 @@ const StatIcon$2 = styled(Box)`
3093
3031
  display: flex;
3094
3032
  align-items: center;
3095
3033
  justify-content: center;
3096
- background: ${(props) => props.$bg || theme$2.colors.primary[100]};
3034
+ background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
3097
3035
  transition: all ${theme$2.transitions.normal};
3098
3036
  margin: 0 auto 20px;
3099
3037
  box-shadow: ${theme$2.shadows.sm};
@@ -3101,7 +3039,7 @@ const StatIcon$2 = styled(Box)`
3101
3039
  svg {
3102
3040
  width: 34px;
3103
3041
  height: 34px;
3104
- color: ${(props) => props.$color || theme$2.colors.primary[600]};
3042
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
3105
3043
  }
3106
3044
 
3107
3045
  @media screen and (max-width: ${breakpoints$2.mobile}) {
@@ -3118,7 +3056,7 @@ const StatIcon$2 = styled(Box)`
3118
3056
  const StatValue$2 = styled(Typography)`
3119
3057
  font-size: 2.75rem;
3120
3058
  font-weight: 700;
3121
- color: ${(props) => props.theme.colors.neutral800};
3059
+ color: var(--colors-neutral800);
3122
3060
  line-height: 1;
3123
3061
  margin-bottom: 10px;
3124
3062
  transition: all ${theme$2.transitions.normal};
@@ -3131,7 +3069,7 @@ const StatValue$2 = styled(Typography)`
3131
3069
  `;
3132
3070
  const StatLabel$2 = styled(Typography)`
3133
3071
  font-size: 0.95rem;
3134
- color: ${(props) => props.theme.colors.neutral600};
3072
+ color: var(--colors-neutral600);
3135
3073
  font-weight: 500;
3136
3074
  letter-spacing: 0.025em;
3137
3075
  text-align: center;
@@ -3144,9 +3082,9 @@ const RulesContainer = styled(Box)`
3144
3082
  margin-top: ${theme$2.spacing.xl};
3145
3083
  `;
3146
3084
  const EmptyState$2 = styled(Box)`
3147
- background: ${(props) => props.theme.colors.neutral0};
3085
+ background: ${(p) => p.theme.colors.neutral0};
3148
3086
  border-radius: ${theme$2.borderRadius.xl};
3149
- border: 2px dashed ${(props) => props.theme.colors.neutral300};
3087
+ border: 2px dashed rgba(128, 128, 128, 0.3);
3150
3088
  padding: 80px 32px;
3151
3089
  text-align: center;
3152
3090
  position: relative;
@@ -3164,7 +3102,7 @@ const EmptyState$2 = styled(Box)`
3164
3102
  left: 0;
3165
3103
  right: 0;
3166
3104
  bottom: 0;
3167
- background: linear-gradient(135deg, ${theme$2.colors.secondary[50]} 0%, ${theme$2.colors.primary[50]} 100%);
3105
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
3168
3106
  opacity: 0.3;
3169
3107
  z-index: 0;
3170
3108
  }
@@ -3173,19 +3111,19 @@ const OnlineBadge = styled.div`
3173
3111
  width: 12px;
3174
3112
  height: 12px;
3175
3113
  border-radius: 50%;
3176
- background: ${(props) => props.$active ? theme$2.colors.success[500] : props.theme.colors.neutral400};
3114
+ background: ${(props) => props.$active ? "var(--colors-success600, #22C55E)" : "rgba(128, 128, 128, 0.4)"};
3177
3115
  display: inline-block;
3178
3116
  margin-right: 8px;
3179
3117
  ${css`animation: ${(props) => props.$active ? pulse$1 : "none"} 2s ease-in-out infinite;`}
3180
3118
  `;
3181
3119
  const StyledTable$2 = styled(Table)`
3182
3120
  thead {
3183
- background: ${(props) => props.theme.colors.neutral100};
3184
- border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
3121
+ background: var(--colors-neutral100);
3122
+ border-bottom: 2px solid rgba(128, 128, 128, 0.2);
3185
3123
 
3186
3124
  th {
3187
3125
  font-weight: 600;
3188
- color: ${(props) => props.theme.colors.neutral800};
3126
+ color: var(--colors-neutral800);
3189
3127
  font-size: 0.875rem;
3190
3128
  text-transform: uppercase;
3191
3129
  letter-spacing: 0.025em;
@@ -3195,30 +3133,30 @@ const StyledTable$2 = styled(Table)`
3195
3133
 
3196
3134
  tbody tr {
3197
3135
  transition: all ${theme$2.transitions.fast};
3198
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
3136
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
3199
3137
 
3200
3138
  &:last-child {
3201
3139
  border-bottom: none;
3202
3140
  }
3203
3141
 
3204
3142
  &:hover {
3205
- background: ${(props) => props.theme.colors.primary100};
3143
+ background: rgba(2, 132, 199, 0.12);
3206
3144
  }
3207
3145
 
3208
3146
  td {
3209
3147
  padding: ${theme$2.spacing.lg} ${theme$2.spacing.lg};
3210
- color: ${(props) => props.theme.colors.neutral800};
3148
+ color: var(--colors-neutral800);
3211
3149
  vertical-align: middle;
3212
3150
  }
3213
3151
  }
3214
3152
  `;
3215
3153
  const FilterBar$2 = styled(Flex)`
3216
- background: ${(props) => props.theme.colors.neutral0};
3154
+ background: ${(p) => p.theme.colors.neutral0};
3217
3155
  padding: ${theme$2.spacing.md} ${theme$2.spacing.lg};
3218
3156
  border-radius: ${theme$2.borderRadius.lg};
3219
3157
  margin-bottom: ${theme$2.spacing.lg};
3220
3158
  box-shadow: ${theme$2.shadows.sm};
3221
- border: 1px solid ${(props) => props.theme.colors.neutral200};
3159
+ border: 1px solid rgba(128, 128, 128, 0.2);
3222
3160
  gap: ${theme$2.spacing.md};
3223
3161
  align-items: center;
3224
3162
  `;
@@ -3233,25 +3171,25 @@ const SearchIcon$1 = styled(MagnifyingGlassIcon)`
3233
3171
  left: 12px;
3234
3172
  width: 16px;
3235
3173
  height: 16px;
3236
- color: ${(props) => props.theme.colors.neutral600};
3174
+ color: var(--colors-neutral600);
3237
3175
  pointer-events: none;
3238
3176
  `;
3239
3177
  const StyledSearchInput$1 = styled.input`
3240
3178
  width: 100%;
3241
3179
  padding: 10px 12px 10px 40px;
3242
- border: 1px solid ${(props) => props.theme.colors.neutral200};
3180
+ border: 1px solid rgba(128, 128, 128, 0.2);
3243
3181
  border-radius: ${theme$2.borderRadius.md};
3244
3182
  font-size: 0.875rem;
3245
3183
  transition: all ${theme$2.transitions.fast};
3246
3184
 
3247
3185
  &:focus {
3248
3186
  outline: none;
3249
- border-color: ${theme$2.colors.primary[500]};
3250
- box-shadow: 0 0 0 2px ${theme$2.colors.primary[100]};
3187
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
3188
+ box-shadow: 0 0 0 2px ${"rgba(2, 132, 199, 0.12)"};
3251
3189
  }
3252
3190
 
3253
3191
  &::placeholder {
3254
- color: ${(props) => props.theme.colors.neutral500};
3192
+ color: var(--colors-neutral500);
3255
3193
  }
3256
3194
  `;
3257
3195
  const RoutingRulesPage = () => {
@@ -3326,18 +3264,18 @@ const RoutingRulesPage = () => {
3326
3264
  /* @__PURE__ */ jsx(Subtitle$2, { children: "Define intelligent routing rules to send emails through specific accounts based on conditions" })
3327
3265
  ] }) }) }),
3328
3266
  /* @__PURE__ */ jsxs(StatsGrid$2, { children: [
3329
- /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.1s", $color: theme$2.colors.secondary[600], children: [
3330
- /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.secondary[100], $color: theme$2.colors.secondary[600], children: /* @__PURE__ */ jsx(FunnelIcon, {}) }),
3267
+ /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.1s", $color: "var(--colors-secondary600, #7C3AED)", children: [
3268
+ /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(168, 85, 247, 0.12)", $color: "var(--colors-secondary600, #7C3AED)", children: /* @__PURE__ */ jsx(FunnelIcon, {}) }),
3331
3269
  /* @__PURE__ */ jsx(StatValue$2, { className: "stat-value", children: totalRules }),
3332
3270
  /* @__PURE__ */ jsx(StatLabel$2, { children: "Total Rules" })
3333
3271
  ] }),
3334
- /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.2s", $color: theme$2.colors.success[600], children: [
3335
- /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.success[100], $color: theme$2.colors.success[600], children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
3272
+ /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.2s", $color: "var(--colors-success600, #16A34A)", children: [
3273
+ /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
3336
3274
  /* @__PURE__ */ jsx(StatValue$2, { className: "stat-value", children: activeRules }),
3337
3275
  /* @__PURE__ */ jsx(StatLabel$2, { children: "Active Rules" })
3338
3276
  ] }),
3339
- /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.3s", $color: theme$2.colors.warning[600], children: [
3340
- /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: theme$2.colors.warning[100], $color: theme$2.colors.warning[600], children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
3277
+ /* @__PURE__ */ jsxs(StatCard$2, { $delay: "0.3s", $color: "var(--colors-warning600, #D97706)", children: [
3278
+ /* @__PURE__ */ jsx(StatIcon$2, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
3341
3279
  /* @__PURE__ */ jsx(StatValue$2, { className: "stat-value", children: highPriorityRules }),
3342
3280
  /* @__PURE__ */ jsx(StatLabel$2, { children: "High Priority" })
3343
3281
  ] })
@@ -3352,13 +3290,13 @@ const RoutingRulesPage = () => {
3352
3290
  width: "120px",
3353
3291
  height: "120px",
3354
3292
  borderRadius: "50%",
3355
- background: `linear-gradient(135deg, ${theme$2.colors.secondary[100]} 0%, ${theme$2.colors.primary[100]} 100%)`,
3293
+ background: `linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%)`,
3356
3294
  display: "flex",
3357
3295
  alignItems: "center",
3358
3296
  justifyContent: "center",
3359
3297
  boxShadow: theme$2.shadows.xl
3360
3298
  },
3361
- children: /* @__PURE__ */ jsx(FunnelIcon, { style: { width: "60px", height: "60px", color: theme$2.colors.secondary[600] } })
3299
+ children: /* @__PURE__ */ jsx(FunnelIcon, { style: { width: "60px", height: "60px", color: "var(--colors-secondary600, #7C3AED)" } })
3362
3300
  }
3363
3301
  ),
3364
3302
  /* @__PURE__ */ jsx(
@@ -3698,11 +3636,11 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3698
3636
  Box,
3699
3637
  {
3700
3638
  padding: 4,
3701
- background: formData.whatsappFallback ? theme$2.colors.success[100] : theme$2.colors.neutral[100],
3639
+ background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
3702
3640
  hasRadius: true,
3703
3641
  style: {
3704
3642
  width: "100%",
3705
- border: formData.whatsappFallback ? `2px solid ${theme$2.colors.success[600]}` : `1px solid ${theme$2.colors.neutral[200]}`,
3643
+ border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
3706
3644
  borderRadius: theme$2.borderRadius.md,
3707
3645
  transition: "all 0.2s ease"
3708
3646
  },
@@ -3742,11 +3680,11 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3742
3680
  Box,
3743
3681
  {
3744
3682
  padding: 4,
3745
- background: formData.isActive ? theme$2.colors.success[100] : theme$2.colors.danger[100],
3683
+ background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
3746
3684
  hasRadius: true,
3747
3685
  style: {
3748
3686
  width: "100%",
3749
- border: formData.isActive ? `2px solid ${theme$2.colors.success[600]}` : `2px solid ${theme$2.colors.danger[600]}`,
3687
+ border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
3750
3688
  borderRadius: theme$2.borderRadius.md,
3751
3689
  transition: "all 0.2s ease"
3752
3690
  },
@@ -3911,12 +3849,6 @@ const useLicense = () => {
3911
3849
  };
3912
3850
  };
3913
3851
  const theme$1 = {
3914
- colors: {
3915
- primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7", 700: "#0369A1" },
3916
- secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 500: "#A855F7", 600: "#9333EA" },
3917
- success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
3918
- warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" }
3919
- },
3920
3852
  shadows: {
3921
3853
  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
3922
3854
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
@@ -3951,7 +3883,7 @@ const ScrollableDialogBody = styled(Box)`
3951
3883
  overflow-y: auto;
3952
3884
  max-height: calc(85vh - 160px);
3953
3885
  padding: 24px 28px 28px 28px;
3954
- background: ${(props) => props.theme.colors.neutral0};
3886
+ background: ${(p) => p.theme.colors.neutral0};
3955
3887
 
3956
3888
  /* Custom Scrollbar */
3957
3889
  &::-webkit-scrollbar {
@@ -3963,12 +3895,12 @@ const ScrollableDialogBody = styled(Box)`
3963
3895
  }
3964
3896
 
3965
3897
  &::-webkit-scrollbar-thumb {
3966
- background: ${(props) => props.theme.colors.neutral200};
3898
+ background: rgba(128, 128, 128, 0.2);
3967
3899
  border-radius: 3px;
3968
3900
  }
3969
3901
 
3970
3902
  &::-webkit-scrollbar-thumb:hover {
3971
- background: ${(props) => props.theme.colors.neutral300};
3903
+ background: rgba(128, 128, 128, 0.3);
3972
3904
  }
3973
3905
  `;
3974
3906
  styled(Box)`
@@ -3986,13 +3918,13 @@ styled(Flex)`
3986
3918
  styled(Typography)`
3987
3919
  font-size: 15px;
3988
3920
  font-weight: 600;
3989
- color: ${(props) => props.theme.colors.neutral800};
3921
+ color: var(--colors-neutral800);
3990
3922
  display: flex;
3991
3923
  align-items: center;
3992
3924
  gap: 8px;
3993
3925
  `;
3994
3926
  const RecommendedBadge = styled(Badge)`
3995
- background: linear-gradient(135deg, ${theme$1.colors.success[500]}, ${theme$1.colors.success[600]});
3927
+ background: linear-gradient(135deg, ${"var(--colors-success600, #22C55E)"}, ${"var(--colors-success600, #16A34A)"});
3996
3928
  color: white;
3997
3929
  padding: 4px 12px;
3998
3930
  font-size: 11px;
@@ -4082,15 +4014,15 @@ const CopyButton = styled(Button)`
4082
4014
  }
4083
4015
  `;
4084
4016
  const InfoBox$1 = styled(Box)`
4085
- background: linear-gradient(135deg, ${theme$1.colors.primary[50]}, ${theme$1.colors.primary[100]});
4086
- border-left: 4px solid ${theme$1.colors.primary[500]};
4017
+ background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"}, ${"rgba(2, 132, 199, 0.12)"});
4018
+ border-left: 4px solid ${"var(--colors-primary600, #0EA5E9)"};
4087
4019
  border-radius: 8px;
4088
4020
  padding: 16px;
4089
4021
  margin-top: 24px;
4090
4022
  `;
4091
4023
  const WarningBox = styled(Box)`
4092
- background: linear-gradient(135deg, ${theme$1.colors.warning[50]}, ${theme$1.colors.warning[100]});
4093
- border-left: 4px solid ${theme$1.colors.warning[500]};
4024
+ background: linear-gradient(135deg, ${"rgba(234, 179, 8, 0.06)"}, ${"rgba(234, 179, 8, 0.12)"});
4025
+ border-left: 4px solid ${"var(--colors-warning600, #F59E0B)"};
4094
4026
  border-radius: 8px;
4095
4027
  padding: 12px 16px;
4096
4028
  margin-top: 12px;
@@ -4099,8 +4031,8 @@ const WarningBox = styled(Box)`
4099
4031
  gap: 8px;
4100
4032
  `;
4101
4033
  const LimitWarning = styled(Box)`
4102
- background: linear-gradient(135deg, ${theme$1.colors.warning[50]}, rgba(251, 191, 36, 0.1));
4103
- border: 1px solid ${theme$1.colors.warning[200]};
4034
+ background: linear-gradient(135deg, ${"rgba(234, 179, 8, 0.06)"}, rgba(251, 191, 36, 0.1));
4035
+ border: 1px solid rgba(234, 179, 8, 0.2);
4104
4036
  border-radius: 12px;
4105
4037
  padding: 16px;
4106
4038
  margin-bottom: 24px;
@@ -4109,7 +4041,7 @@ const LimitWarning = styled(Box)`
4109
4041
  justify-content: space-between;
4110
4042
  `;
4111
4043
  const UpgradeButton = styled(Button)`
4112
- background: linear-gradient(135deg, ${theme$1.colors.warning[500]}, ${theme$1.colors.warning[600]});
4044
+ background: linear-gradient(135deg, ${"var(--colors-warning600, #F59E0B)"}, ${"var(--colors-warning600, #D97706)"});
4113
4045
  color: white;
4114
4046
  font-weight: 600;
4115
4047
  padding: 8px 16px;
@@ -4119,7 +4051,7 @@ const UpgradeButton = styled(Button)`
4119
4051
  gap: 6px;
4120
4052
 
4121
4053
  &:hover {
4122
- background: linear-gradient(135deg, ${theme$1.colors.warning[600]}, ${theme$1.colors.warning[700]});
4054
+ background: linear-gradient(135deg, ${"var(--colors-warning600, #D97706)"}, ${"var(--colors-warning600, #A16207)"});
4123
4055
  transform: translateY(-1px);
4124
4056
  }
4125
4057
  `;
@@ -4140,8 +4072,8 @@ const Container$2 = styled(Box)`
4140
4072
  `;
4141
4073
  const Header$2 = styled(Box)`
4142
4074
  background: linear-gradient(135deg,
4143
- ${theme$1.colors.secondary[600]} 0%,
4144
- ${theme$1.colors.primary[600]} 100%
4075
+ var(--colors-secondary600, #7C3AED) 0%,
4076
+ ${"var(--colors-primary600, #0284C7)"} 100%
4145
4077
  );
4146
4078
  border-radius: ${theme$1.borderRadius.xl};
4147
4079
  padding: ${theme$1.spacing.xl} ${theme$1.spacing["2xl"]};
@@ -4235,7 +4167,7 @@ const StatsGrid$1 = styled.div`
4235
4167
  }
4236
4168
  `;
4237
4169
  const StatCard$1 = styled(Box)`
4238
- background: ${(props) => props.theme.colors.neutral0};
4170
+ background: ${(p) => p.theme.colors.neutral0};
4239
4171
  border-radius: ${theme$1.borderRadius.lg};
4240
4172
  padding: 28px ${theme$1.spacing.lg};
4241
4173
  position: relative;
@@ -4244,7 +4176,7 @@ const StatCard$1 = styled(Box)`
4244
4176
  ${css`animation: ${fadeIn$3} ${theme$1.transitions.slow} backwards;`}
4245
4177
  animation-delay: ${(props) => props.$delay || "0s"};
4246
4178
  box-shadow: ${theme$1.shadows.sm};
4247
- border: 1px solid ${(props) => props.theme.colors.neutral200};
4179
+ border: 1px solid rgba(128, 128, 128, 0.2);
4248
4180
  min-width: 200px;
4249
4181
  flex: 1;
4250
4182
  text-align: center;
@@ -4265,7 +4197,7 @@ const StatCard$1 = styled(Box)`
4265
4197
  &:hover {
4266
4198
  transform: translateY(-6px);
4267
4199
  box-shadow: ${theme$1.shadows.xl};
4268
- border-color: ${(props) => props.$color || theme$1.colors.primary[500]};
4200
+ border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
4269
4201
 
4270
4202
  .stat-icon {
4271
4203
  transform: scale(1.15) rotate(5deg);
@@ -4273,7 +4205,7 @@ const StatCard$1 = styled(Box)`
4273
4205
 
4274
4206
  .stat-value {
4275
4207
  transform: scale(1.08);
4276
- color: ${(props) => props.$color || theme$1.colors.primary[600]};
4208
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
4277
4209
  }
4278
4210
  }
4279
4211
  `;
@@ -4284,7 +4216,7 @@ const StatIcon$1 = styled(Box)`
4284
4216
  display: flex;
4285
4217
  align-items: center;
4286
4218
  justify-content: center;
4287
- background: ${(props) => props.$bg || theme$1.colors.primary[100]};
4219
+ background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
4288
4220
  transition: all ${theme$1.transitions.normal};
4289
4221
  margin: 0 auto 20px;
4290
4222
  box-shadow: ${theme$1.shadows.sm};
@@ -4292,7 +4224,7 @@ const StatIcon$1 = styled(Box)`
4292
4224
  svg {
4293
4225
  width: 34px;
4294
4226
  height: 34px;
4295
- color: ${(props) => props.$color || theme$1.colors.primary[600]};
4227
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
4296
4228
  }
4297
4229
 
4298
4230
  @media screen and (max-width: ${breakpoints$1.mobile}) {
@@ -4309,7 +4241,7 @@ const StatIcon$1 = styled(Box)`
4309
4241
  const StatValue$1 = styled(Typography)`
4310
4242
  font-size: 2.75rem;
4311
4243
  font-weight: 700;
4312
- color: ${(props) => props.theme.colors.neutral800};
4244
+ color: var(--colors-neutral800);
4313
4245
  line-height: 1;
4314
4246
  margin-bottom: 10px;
4315
4247
  transition: all ${theme$1.transitions.normal};
@@ -4322,7 +4254,7 @@ const StatValue$1 = styled(Typography)`
4322
4254
  `;
4323
4255
  const StatLabel$1 = styled(Typography)`
4324
4256
  font-size: 0.95rem;
4325
- color: ${(props) => props.theme.colors.neutral600};
4257
+ color: var(--colors-neutral600);
4326
4258
  font-weight: 500;
4327
4259
  letter-spacing: 0.025em;
4328
4260
  text-align: center;
@@ -4338,12 +4270,12 @@ const SectionHeader = styled(Box)`
4338
4270
  margin-bottom: ${theme$1.spacing.md};
4339
4271
  `;
4340
4272
  const FilterBar$1 = styled(Flex)`
4341
- background: ${(props) => props.theme.colors.neutral0};
4273
+ background: ${(p) => p.theme.colors.neutral0};
4342
4274
  padding: ${theme$1.spacing.md} ${theme$1.spacing.lg};
4343
4275
  border-radius: ${theme$1.borderRadius.lg};
4344
4276
  margin-bottom: ${theme$1.spacing.lg};
4345
4277
  box-shadow: ${theme$1.shadows.sm};
4346
- border: 1px solid ${(props) => props.theme.colors.neutral200};
4278
+ border: 1px solid rgba(128, 128, 128, 0.2);
4347
4279
  gap: ${theme$1.spacing.md};
4348
4280
  align-items: center;
4349
4281
  `;
@@ -4358,7 +4290,7 @@ const SearchIcon = styled(MagnifyingGlassIcon)`
4358
4290
  left: 12px;
4359
4291
  width: 16px;
4360
4292
  height: 16px;
4361
- color: ${(props) => props.theme.colors.neutral600};
4293
+ color: var(--colors-neutral600);
4362
4294
  pointer-events: none;
4363
4295
  z-index: 1;
4364
4296
  `;
@@ -4369,24 +4301,24 @@ const StyledSearchInput = styled(TextInput)`
4369
4301
  const TableWrapper = styled(Box)`
4370
4302
  overflow-x: auto;
4371
4303
  border-radius: ${theme$1.borderRadius.lg};
4372
- border: 1px solid ${(props) => props.theme.colors.neutral200};
4373
- background: ${(props) => props.theme.colors.neutral0};
4304
+ border: 1px solid rgba(128, 128, 128, 0.2);
4305
+ background: ${(p) => p.theme.colors.neutral0};
4374
4306
 
4375
4307
  &::-webkit-scrollbar {
4376
4308
  height: 8px;
4377
4309
  }
4378
4310
 
4379
4311
  &::-webkit-scrollbar-track {
4380
- background: ${(props) => props.theme.colors.neutral100};
4312
+ background: var(--colors-neutral100);
4381
4313
  border-radius: 4px;
4382
4314
  }
4383
4315
 
4384
4316
  &::-webkit-scrollbar-thumb {
4385
- background: ${(props) => props.theme.colors.neutral300};
4317
+ background: rgba(128, 128, 128, 0.3);
4386
4318
  border-radius: 4px;
4387
4319
 
4388
4320
  &:hover {
4389
- background: ${(props) => props.theme.colors.neutral400};
4321
+ background: rgba(128, 128, 128, 0.4);
4390
4322
  }
4391
4323
  }
4392
4324
  `;
@@ -4395,12 +4327,12 @@ const StyledTable$1 = styled(Table)`
4395
4327
  min-width: 900px;
4396
4328
 
4397
4329
  thead {
4398
- background: ${(props) => props.theme.colors.neutral100};
4399
- border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
4330
+ background: var(--colors-neutral100);
4331
+ border-bottom: 2px solid rgba(128, 128, 128, 0.2);
4400
4332
 
4401
4333
  th {
4402
4334
  font-weight: 600;
4403
- color: ${(props) => props.theme.colors.neutral800};
4335
+ color: var(--colors-neutral800);
4404
4336
  font-size: 0.75rem;
4405
4337
  text-transform: uppercase;
4406
4338
  letter-spacing: 0.025em;
@@ -4411,19 +4343,19 @@ const StyledTable$1 = styled(Table)`
4411
4343
 
4412
4344
  tbody tr {
4413
4345
  transition: all ${theme$1.transitions.fast};
4414
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
4346
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
4415
4347
 
4416
4348
  &:last-child {
4417
4349
  border-bottom: none;
4418
4350
  }
4419
4351
 
4420
4352
  &:hover {
4421
- background: ${(props) => props.theme.colors.primary100};
4353
+ background: rgba(2, 132, 199, 0.12);
4422
4354
  }
4423
4355
 
4424
4356
  td {
4425
4357
  padding: 10px 12px;
4426
- color: ${(props) => props.theme.colors.neutral800};
4358
+ color: var(--colors-neutral800);
4427
4359
  vertical-align: middle;
4428
4360
  font-size: 13px;
4429
4361
  }
@@ -4431,14 +4363,14 @@ const StyledTable$1 = styled(Table)`
4431
4363
  `;
4432
4364
  const PaginationWrapper = styled(Flex)`
4433
4365
  padding: 16px 20px;
4434
- background: ${(props) => props.theme.colors.neutral100};
4435
- border-top: 1px solid ${(props) => props.theme.colors.neutral200};
4366
+ background: var(--colors-neutral100);
4367
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
4436
4368
  border-radius: 0 0 ${theme$1.borderRadius.lg} ${theme$1.borderRadius.lg};
4437
4369
  `;
4438
4370
  const PaginationButton = styled.button`
4439
- background: ${(props) => props.active ? "linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)" : "white"};
4440
- color: ${(props) => props.active ? "white" : props.theme.colors.neutral700};
4441
- border: 1px solid ${(props) => props.active ? "transparent" : props.theme.colors.neutral300};
4371
+ background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%)" : "${(p) => p.theme.colors.neutral0}"};
4372
+ color: ${(props) => props.active ? "white" : "var(--colors-neutral700)"};
4373
+ border: 1px solid ${(props) => props.active ? "transparent" : "rgba(128, 128, 128, 0.3)"};
4442
4374
  padding: 6px 12px;
4443
4375
  min-width: 36px;
4444
4376
  height: 36px;
@@ -4449,8 +4381,8 @@ const PaginationButton = styled.button`
4449
4381
  transition: all 0.2s ease;
4450
4382
 
4451
4383
  &:hover:not(:disabled) {
4452
- background: ${(props) => props.active ? "linear-gradient(135deg, #0284C7 0%, #9333EA 100%)" : props.theme.colors.neutral100};
4453
- border-color: ${(props) => props.active ? "transparent" : props.theme.colors.neutral400};
4384
+ background: ${(props) => props.active ? "linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%)" : "var(--colors-neutral100)"};
4385
+ border-color: ${(props) => props.active ? "transparent" : "rgba(128, 128, 128, 0.4)"};
4454
4386
  }
4455
4387
 
4456
4388
  &:disabled {
@@ -4459,9 +4391,9 @@ const PaginationButton = styled.button`
4459
4391
  }
4460
4392
  `;
4461
4393
  const EmptyState$1 = styled(Box)`
4462
- background: ${(props) => props.theme.colors.neutral0};
4394
+ background: ${(p) => p.theme.colors.neutral0};
4463
4395
  border-radius: ${theme$1.borderRadius.xl};
4464
- border: 2px dashed ${(props) => props.theme.colors.neutral300};
4396
+ border: 2px dashed rgba(128, 128, 128, 0.3);
4465
4397
  padding: 80px 32px;
4466
4398
  text-align: center;
4467
4399
  position: relative;
@@ -4479,7 +4411,7 @@ const EmptyState$1 = styled(Box)`
4479
4411
  left: 0;
4480
4412
  right: 0;
4481
4413
  bottom: 0;
4482
- background: linear-gradient(135deg, ${theme$1.colors.secondary[50]} 0%, ${theme$1.colors.primary[50]} 100%);
4414
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
4483
4415
  opacity: 0.3;
4484
4416
  z-index: 0;
4485
4417
  }
@@ -4495,7 +4427,7 @@ const EmptyIcon$1 = styled.div`
4495
4427
  height: 120px;
4496
4428
  margin: 0 auto ${theme$1.spacing.lg};
4497
4429
  border-radius: 50%;
4498
- background: linear-gradient(135deg, ${theme$1.colors.secondary[100]} 0%, ${theme$1.colors.primary[100]} 100%);
4430
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%);
4499
4431
  display: flex;
4500
4432
  align-items: center;
4501
4433
  justify-content: center;
@@ -4504,7 +4436,7 @@ const EmptyIcon$1 = styled.div`
4504
4436
  svg {
4505
4437
  width: 60px;
4506
4438
  height: 60px;
4507
- color: ${theme$1.colors.primary[600]};
4439
+ color: ${"var(--colors-primary600, #0284C7)"};
4508
4440
  }
4509
4441
  `;
4510
4442
  const EmptyFeatureList = styled.div`
@@ -4524,7 +4456,7 @@ const EmptyFeatureItem = styled.div`
4524
4456
  text-align: center;
4525
4457
  gap: ${theme$1.spacing.sm};
4526
4458
  padding: ${theme$1.spacing.lg};
4527
- background: ${(props) => props.theme.colors.neutral0};
4459
+ background: ${(p) => p.theme.colors.neutral0};
4528
4460
  border-radius: ${theme$1.borderRadius.md};
4529
4461
  box-shadow: ${theme$1.shadows.sm};
4530
4462
  transition: ${theme$1.transitions.fast};
@@ -4537,7 +4469,7 @@ const EmptyFeatureItem = styled.div`
4537
4469
  svg {
4538
4470
  width: 28px;
4539
4471
  height: 28px;
4540
- color: ${theme$1.colors.success[500]};
4472
+ color: ${"var(--colors-success600, #22C55E)"};
4541
4473
  flex-shrink: 0;
4542
4474
  margin-bottom: ${theme$1.spacing.xs};
4543
4475
  }
@@ -4562,7 +4494,7 @@ const StyledModalContent = styled(Modal.Content)`
4562
4494
  `;
4563
4495
  const StyledModalHeader = styled(Modal.Header)`
4564
4496
  && {
4565
- background: linear-gradient(135deg, ${theme$1.colors.primary[500]} 0%, ${theme$1.colors.secondary[500]} 100%);
4497
+ background: linear-gradient(135deg, ${"var(--colors-primary600, #0EA5E9)"} 0%, var(--colors-secondary600, #A855F7) 100%);
4566
4498
  padding: 24px 28px;
4567
4499
  border-bottom: none;
4568
4500
 
@@ -4598,7 +4530,7 @@ const StyledModalHeader = styled(Modal.Header)`
4598
4530
  const StyledModalBody = styled(Modal.Body)`
4599
4531
  && {
4600
4532
  padding: 28px;
4601
- background: ${(props) => props.theme.colors.neutral0};
4533
+ background: ${(p) => p.theme.colors.neutral0};
4602
4534
  }
4603
4535
  `;
4604
4536
  const ModalField = styled(Box)`
@@ -4612,7 +4544,7 @@ const ModalLabel = styled(Typography)`
4612
4544
  && {
4613
4545
  font-weight: 600;
4614
4546
  font-size: 13px;
4615
- color: ${(props) => props.theme.colors.neutral700};
4547
+ color: var(--colors-neutral700);
4616
4548
  margin-bottom: 8px;
4617
4549
  display: block;
4618
4550
  }
@@ -4620,49 +4552,49 @@ const ModalLabel = styled(Typography)`
4620
4552
  const ModalHint = styled(Typography)`
4621
4553
  && {
4622
4554
  font-size: 12px;
4623
- color: ${(props) => props.theme.colors.neutral600};
4555
+ color: var(--colors-neutral600);
4624
4556
  margin-top: 6px;
4625
4557
  display: block;
4626
4558
  }
4627
4559
  `;
4628
4560
  const ModalTemplateInfo = styled(Box)`
4629
- background: linear-gradient(135deg, ${theme$1.colors.primary[50]} 0%, ${theme$1.colors.secondary[50]} 100%);
4630
- border: 1px solid ${theme$1.colors.primary[100]};
4561
+ background: linear-gradient(135deg, ${"rgba(2, 132, 199, 0.06)"} 0%, rgba(168, 85, 247, 0.06) 100%);
4562
+ border: 1px solid ${"rgba(2, 132, 199, 0.12)"};
4631
4563
  border-radius: 10px;
4632
4564
  padding: 14px 16px;
4633
4565
 
4634
4566
  p {
4635
4567
  margin: 0;
4636
4568
  font-weight: 500;
4637
- color: ${(props) => props.theme.colors.neutral800};
4569
+ color: var(--colors-neutral800);
4638
4570
  }
4639
4571
  `;
4640
4572
  const StyledSelect = styled.select`
4641
4573
  width: 100%;
4642
4574
  padding: 10px 14px;
4643
4575
  border-radius: 8px;
4644
- border: 1px solid ${(props) => props.theme.colors.neutral200};
4576
+ border: 1px solid rgba(128, 128, 128, 0.2);
4645
4577
  font-size: 14px;
4646
- background: ${(props) => props.theme.colors.neutral0};
4578
+ background: ${(p) => p.theme.colors.neutral0};
4647
4579
  cursor: pointer;
4648
4580
  transition: all ${theme$1.transitions.fast};
4649
- color: ${(props) => props.theme.colors.neutral700};
4581
+ color: var(--colors-neutral700);
4650
4582
 
4651
4583
  &:hover {
4652
- border-color: ${theme$1.colors.primary[500]};
4584
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
4653
4585
  }
4654
4586
 
4655
4587
  &:focus {
4656
4588
  outline: none;
4657
- border-color: ${theme$1.colors.primary[500]};
4658
- box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
4589
+ border-color: ${"var(--colors-primary600, #0EA5E9)"};
4590
+ box-shadow: 0 0 0 3px ${"rgba(2, 132, 199, 0.12)"};
4659
4591
  }
4660
4592
  `;
4661
4593
  const StyledModalFooter = styled(Modal.Footer)`
4662
4594
  && {
4663
4595
  padding: 20px 28px;
4664
- background: ${(props) => props.theme.colors.neutral100};
4665
- border-top: 1px solid ${(props) => props.theme.colors.neutral200};
4596
+ background: var(--colors-neutral100);
4597
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
4666
4598
  gap: 12px;
4667
4599
  }
4668
4600
  `;
@@ -5009,18 +4941,18 @@ const TemplateList = () => {
5009
4941
  ] }) })
5010
4942
  ] }) }) }),
5011
4943
  /* @__PURE__ */ jsxs(StatsGrid$1, { children: [
5012
- /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.1s", $color: theme$1.colors.primary[500], children: [
5013
- /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.primary[100], $color: theme$1.colors.primary[600], children: /* @__PURE__ */ jsx(DocumentTextIcon, {}) }),
4944
+ /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.1s", $color: "var(--colors-primary600, #0EA5E9)", children: [
4945
+ /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(DocumentTextIcon, {}) }),
5014
4946
  /* @__PURE__ */ jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : stats?.total || 0 }),
5015
4947
  /* @__PURE__ */ jsx(StatLabel$1, { variant: "pi", children: "Total Templates" })
5016
4948
  ] }),
5017
- /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.2s", $color: theme$1.colors.success[500], children: [
5018
- /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.success[100], $color: theme$1.colors.success[600], children: /* @__PURE__ */ jsx(ChartBarIcon, {}) }),
4949
+ /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.2s", $color: "var(--colors-success600, #22C55E)", children: [
4950
+ /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(ChartBarIcon, {}) }),
5019
4951
  /* @__PURE__ */ jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : stats?.active || 0 }),
5020
4952
  /* @__PURE__ */ jsx(StatLabel$1, { variant: "pi", children: "Active" })
5021
4953
  ] }),
5022
- limits?.emailTemplates && !limits.emailTemplates.unlimited && /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.3s", $color: theme$1.colors.warning[500], children: [
5023
- /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: theme$1.colors.warning[100], $color: theme$1.colors.warning[600], children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
4954
+ limits?.emailTemplates && !limits.emailTemplates.unlimited && /* @__PURE__ */ jsxs(StatCard$1, { $delay: "0.3s", $color: "var(--colors-warning600, #F59E0B)", children: [
4955
+ /* @__PURE__ */ jsx(StatIcon$1, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
5024
4956
  /* @__PURE__ */ jsx(StatValue$1, { className: "stat-value", variant: "alpha", children: showSkeleton ? "..." : limits.emailTemplates.max - limits.emailTemplates.current }),
5025
4957
  /* @__PURE__ */ jsx(StatLabel$1, { variant: "pi", children: "Remaining" })
5026
4958
  ] })
@@ -5028,7 +4960,7 @@ const TemplateList = () => {
5028
4960
  /* @__PURE__ */ jsx(Box, { style: { margin: "0 -32px 32px -32px" }, children: /* @__PURE__ */ jsx(Divider, {}) }),
5029
4961
  limits?.emailTemplates && !limits.emailTemplates.unlimited && limits.emailTemplates.current >= limits.emailTemplates.max * 0.8 && /* @__PURE__ */ jsxs(LimitWarning, { children: [
5030
4962
  /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
5031
- /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 24, height: 24, color: theme$1.colors.warning[600] } }),
4963
+ /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 24, height: 24, color: "var(--colors-warning600, #D97706)" } }),
5032
4964
  /* @__PURE__ */ jsxs(Box, { children: [
5033
4965
  /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: limits.emailTemplates.current >= limits.emailTemplates.max ? `You've reached your ${getTierInfo().name} limit!` : `You're approaching your ${getTierInfo().name} limit!` }),
5034
4966
  /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px" }, children: [
@@ -5333,10 +5265,10 @@ const TemplateList = () => {
5333
5265
  padding: "80px 32px",
5334
5266
  textAlign: "center",
5335
5267
  borderRadius: theme$1.borderRadius.lg,
5336
- border: "1px dashed #D1D5DB"
5268
+ border: "1px dashed rgba(128, 128, 128, 0.2)"
5337
5269
  },
5338
5270
  children: [
5339
- /* @__PURE__ */ jsx(MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "#9CA3AF" } }),
5271
+ /* @__PURE__ */ jsx(MagnifyingGlassIcon, { style: { width: "64px", height: "64px", margin: "0 auto 16px", color: "var(--colors-neutral500)" } }),
5340
5272
  /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral700", style: { marginBottom: "8px" }, children: "No templates found" }),
5341
5273
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Try adjusting your search or filters" }),
5342
5274
  /* @__PURE__ */ jsx(
@@ -5360,7 +5292,7 @@ const TemplateList = () => {
5360
5292
  /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Core Email Templates" }),
5361
5293
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Design the default Strapi system emails (Password Reset & Email Confirmation)" })
5362
5294
  ] }),
5363
- /* @__PURE__ */ jsx(Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid #E5E7EB", overflow: "hidden" }, children: /* @__PURE__ */ jsxs(Table, { colCount: 2, rowCount: 2, children: [
5295
+ /* @__PURE__ */ jsx(Box, { background: "neutral0", borderRadius: theme$1.borderRadius.lg, shadow: "md", style: { border: "1px solid rgba(128, 128, 128, 0.2)", overflow: "hidden" }, children: /* @__PURE__ */ jsxs(Table, { colCount: 2, rowCount: 2, children: [
5364
5296
  /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
5365
5297
  /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Email Type" }) }),
5366
5298
  /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Actions" }) }) })
@@ -5398,20 +5330,20 @@ const TemplateList = () => {
5398
5330
  ] }) }),
5399
5331
  /* @__PURE__ */ jsxs(ScrollableDialogBody, { children: [
5400
5332
  /* @__PURE__ */ jsx(InfoBox$1, { style: { marginTop: 0, marginBottom: "20px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", children: [
5401
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5333
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
5402
5334
  /* @__PURE__ */ jsx("strong", { children: "Template ID:" }),
5403
5335
  " #",
5404
5336
  selectedTemplate.templateReferenceId
5405
5337
  ] }),
5406
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: theme$1.colors.primary[700] }, children: [
5338
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: "var(--colors-primary600, #075985)" }, children: [
5407
5339
  /* @__PURE__ */ jsx("strong", { children: "Status:" }),
5408
5340
  " ",
5409
5341
  selectedTemplate.isActive ? "Active" : "Inactive"
5410
5342
  ] })
5411
5343
  ] }) }),
5412
5344
  !selectedTemplate.isActive && /* @__PURE__ */ jsxs(WarningBox, { style: { marginTop: 0, marginBottom: "20px" }, children: [
5413
- /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 20, height: 20, color: theme$1.colors.warning[600] } }),
5414
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: theme$1.colors.warning[700], fontWeight: 500 }, children: [
5345
+ /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 20, height: 20, color: "var(--colors-warning600, #D97706)" } }),
5346
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: "var(--colors-warning600, #A16207)", fontWeight: 500 }, children: [
5415
5347
  "This template is currently ",
5416
5348
  /* @__PURE__ */ jsx("strong", { children: "INACTIVE" }),
5417
5349
  " and will not be sent."
@@ -5419,7 +5351,7 @@ const TemplateList = () => {
5419
5351
  ] }),
5420
5352
  /* @__PURE__ */ jsxs(Accordion.Root, { defaultValue: "native", collapsible: true, children: [
5421
5353
  /* @__PURE__ */ jsxs(Accordion.Item, { value: "native", children: [
5422
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: theme$1.colors.success[600] } }), children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
5354
+ /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-success600, #16A34A)" } }), children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
5423
5355
  "Native Strapi Email Service",
5424
5356
  /* @__PURE__ */ jsx(RecommendedBadge, { children: "Recommended" })
5425
5357
  ] }) }) }),
@@ -5469,7 +5401,7 @@ const TemplateList = () => {
5469
5401
  ] }) })
5470
5402
  ] }),
5471
5403
  /* @__PURE__ */ jsxs(Accordion.Item, { value: "plugin", children: [
5472
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(CodeBracketIcon, { style: { width: 16, height: 16, color: theme$1.colors.primary[600] } }), children: "MagicMail Plugin Service" }) }),
5404
+ /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(CodeBracketIcon, { style: { width: 16, height: 16, color: "var(--colors-primary600, #0284C7)" } }), children: "MagicMail Plugin Service" }) }),
5473
5405
  /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
5474
5406
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "Direct access to the MagicMail service for advanced options." }),
5475
5407
  /* @__PURE__ */ jsxs(CodeBlockWrapper, { children: [
@@ -5517,7 +5449,7 @@ const TemplateList = () => {
5517
5449
  ] }) })
5518
5450
  ] }),
5519
5451
  /* @__PURE__ */ jsxs(Accordion.Item, { value: "rest", children: [
5520
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(DocumentArrowDownIcon, { style: { width: 16, height: 16, color: theme$1.colors.secondary[600] } }), children: "REST API (cURL)" }) }),
5452
+ /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { icon: () => /* @__PURE__ */ jsx(DocumentArrowDownIcon, { style: { width: 16, height: 16, color: "var(--colors-secondary600, #7C3AED)" } }), children: "REST API (cURL)" }) }),
5521
5453
  /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
5522
5454
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block" }, children: "For external applications, frontend calls, or Postman tests." }),
5523
5455
  /* @__PURE__ */ jsxs(CodeBlockWrapper, { children: [
@@ -5718,11 +5650,11 @@ const Container$1 = styled.div`
5718
5650
  min-height: 100vh;
5719
5651
  display: flex;
5720
5652
  flex-direction: column;
5721
- background: ${(props) => props.theme.colors.neutral100};
5653
+ background: var(--colors-neutral100);
5722
5654
  `;
5723
5655
  const Header$1 = styled.div`
5724
5656
  padding: 24px;
5725
- background: ${(props) => props.theme.colors.neutral0};
5657
+ background: ${(p) => p.theme.colors.neutral0};
5726
5658
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
5727
5659
  `;
5728
5660
  const HeaderRow = styled.div`
@@ -5762,8 +5694,8 @@ const ToggleWrapper = styled.div`
5762
5694
 
5763
5695
  /* Custom green styling for active toggle */
5764
5696
  button[aria-checked="true"] {
5765
- background-color: #22C55E !important;
5766
- border-color: #22C55E !important;
5697
+ background-color: var(--colors-success600, #22C55E) !important;
5698
+ border-color: var(--colors-success600, #22C55E) !important;
5767
5699
 
5768
5700
  span {
5769
5701
  background-color: white !important;
@@ -5771,8 +5703,8 @@ const ToggleWrapper = styled.div`
5771
5703
  }
5772
5704
 
5773
5705
  button[aria-checked="false"] {
5774
- background-color: #E5E7EB !important;
5775
- border-color: #D1D5DB !important;
5706
+ background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
5707
+ border-color: rgba(128, 128, 128, 0.2) !important;
5776
5708
 
5777
5709
  span {
5778
5710
  background-color: white !important;
@@ -5781,7 +5713,7 @@ const ToggleWrapper = styled.div`
5781
5713
 
5782
5714
  /* Label styling based on state */
5783
5715
  p {
5784
- color: ${(props) => props.$isActive ? "#22C55E" : "#6B7280"};
5716
+ color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
5785
5717
  font-weight: 600;
5786
5718
  transition: color 0.2s;
5787
5719
  }
@@ -5793,8 +5725,8 @@ const TabsWrapper = styled.div`
5793
5725
  `;
5794
5726
  const TabListWrapper = styled.div`
5795
5727
  padding: 0 24px;
5796
- background: ${(props) => props.theme.colors.neutral0};
5797
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
5728
+ background: ${(p) => p.theme.colors.neutral0};
5729
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
5798
5730
  `;
5799
5731
  const StyledTabsRoot = styled(Tabs.Root)`
5800
5732
  display: flex;
@@ -5808,7 +5740,7 @@ const StyledTabsContent = styled(Tabs.Content)`
5808
5740
  `;
5809
5741
  const TabContentWrapper = styled.div`
5810
5742
  height: calc(100vh - 240px);
5811
- background: ${(props) => props.theme.colors.neutral0};
5743
+ background: ${(p) => p.theme.colors.neutral0};
5812
5744
  position: relative;
5813
5745
  `;
5814
5746
  const TextTabContent = styled.div`
@@ -5840,7 +5772,7 @@ const HiddenInput = styled.input`
5840
5772
  display: none;
5841
5773
  `;
5842
5774
  const SaveButton = styled(Button)`
5843
- background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
5775
+ background: linear-gradient(135deg, var(--colors-success600, #22C55E) 0%, var(--colors-success700, #16A34A) 100%);
5844
5776
  border: none;
5845
5777
  color: white;
5846
5778
  font-weight: 600;
@@ -5853,7 +5785,7 @@ const SaveButton = styled(Button)`
5853
5785
  &:hover {
5854
5786
  transform: translateY(-1px);
5855
5787
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
5856
- background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
5788
+ background: linear-gradient(135deg, var(--colors-success700, #16A34A) 0%, var(--colors-success800, #15803D) 100%);
5857
5789
  }
5858
5790
 
5859
5791
  &:active {
@@ -5880,10 +5812,10 @@ const ImportExportButton = styled.span`
5880
5812
  gap: 6px;
5881
5813
  padding: 8px 16px;
5882
5814
  height: 36px;
5883
- background: ${(props) => props.theme.colors.neutral0};
5884
- border: 1px solid ${(props) => props.theme.colors.neutral200};
5815
+ background: ${(p) => p.theme.colors.neutral0};
5816
+ border: 1px solid rgba(128, 128, 128, 0.2);
5885
5817
  border-radius: 4px;
5886
- color: ${(props) => props.theme.colors.neutral800};
5818
+ color: var(--colors-neutral800);
5887
5819
  font-weight: 500;
5888
5820
  font-size: 13px;
5889
5821
  cursor: pointer;
@@ -5891,9 +5823,9 @@ const ImportExportButton = styled.span`
5891
5823
  white-space: nowrap;
5892
5824
 
5893
5825
  &:hover {
5894
- background: ${(props) => props.theme.colors.neutral100};
5895
- border-color: ${(props) => props.theme.colors.primary600};
5896
- color: ${(props) => props.theme.colors.primary600};
5826
+ background: var(--colors-neutral100);
5827
+ border-color: var(--colors-primary600, #0284C7);
5828
+ color: var(--colors-primary600, #0284C7);
5897
5829
  transform: translateY(-1px);
5898
5830
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
5899
5831
  }
@@ -5912,8 +5844,8 @@ const ImportLabel = styled.label`
5912
5844
  display: inline-block;
5913
5845
  `;
5914
5846
  const BackButton = styled.button`
5915
- background: ${(props) => props.theme.colors.neutral0};
5916
- border: 1px solid ${(props) => props.theme.colors.neutral200};
5847
+ background: ${(p) => p.theme.colors.neutral0};
5848
+ border: 1px solid rgba(128, 128, 128, 0.2);
5917
5849
  border-radius: 4px;
5918
5850
  padding: 8px 10px;
5919
5851
  height: 36px;
@@ -5924,8 +5856,8 @@ const BackButton = styled.button`
5924
5856
  transition: all 200ms;
5925
5857
 
5926
5858
  &:hover {
5927
- background: ${(props) => props.theme.colors.neutral100};
5928
- border-color: ${(props) => props.theme.colors.neutral300};
5859
+ background: var(--colors-neutral100);
5860
+ border-color: rgba(128, 128, 128, 0.3);
5929
5861
  transform: translateY(-1px);
5930
5862
  }
5931
5863
 
@@ -5939,8 +5871,8 @@ const BackButton = styled.button`
5939
5871
  }
5940
5872
  `;
5941
5873
  const VersionButton = styled.button`
5942
- background: ${(props) => props.theme.colors.neutral0};
5943
- border: 1px solid ${(props) => props.theme.colors.neutral200};
5874
+ background: ${(p) => p.theme.colors.neutral0};
5875
+ border: 1px solid rgba(128, 128, 128, 0.2);
5944
5876
  border-radius: 4px;
5945
5877
  padding: 8px 16px;
5946
5878
  height: 36px;
@@ -5952,13 +5884,13 @@ const VersionButton = styled.button`
5952
5884
  transition: all 200ms;
5953
5885
  font-size: 13px;
5954
5886
  font-weight: 500;
5955
- color: ${(props) => props.theme.colors.neutral800};
5887
+ color: var(--colors-neutral800);
5956
5888
  white-space: nowrap;
5957
5889
 
5958
5890
  &:hover {
5959
- background: ${(props) => props.theme.colors.neutral100};
5960
- border-color: ${(props) => props.theme.colors.primary600};
5961
- color: ${(props) => props.theme.colors.primary600};
5891
+ background: var(--colors-neutral100);
5892
+ border-color: var(--colors-primary600, #0284C7);
5893
+ color: var(--colors-primary600, #0284C7);
5962
5894
  transform: translateY(-1px);
5963
5895
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
5964
5896
  }
@@ -5978,7 +5910,7 @@ const VersionModal = styled.div`
5978
5910
  right: ${(props) => props.$isOpen ? "0" : "-450px"};
5979
5911
  width: 450px;
5980
5912
  height: 100vh;
5981
- background: ${(props) => props.theme.colors.neutral0};
5913
+ background: ${(p) => p.theme.colors.neutral0};
5982
5914
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
5983
5915
  z-index: 9999;
5984
5916
  transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -5999,7 +5931,7 @@ const VersionModalOverlay = styled.div`
5999
5931
  `;
6000
5932
  const VersionModalHeader = styled.div`
6001
5933
  padding: 24px;
6002
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral200};
5934
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
6003
5935
  display: flex;
6004
5936
  justify-content: space-between;
6005
5937
  align-items: center;
@@ -6011,13 +5943,13 @@ const VersionModalContent = styled.div`
6011
5943
  `;
6012
5944
  const VersionItem = styled.div`
6013
5945
  padding: 16px;
6014
- border: 1px solid ${(props) => props.theme.colors.neutral200};
5946
+ border: 1px solid rgba(128, 128, 128, 0.2);
6015
5947
  border-radius: 8px;
6016
5948
  margin-bottom: 12px;
6017
5949
  transition: all 150ms;
6018
5950
 
6019
5951
  &:hover {
6020
- border-color: ${(props) => props.theme.colors.primary600};
5952
+ border-color: var(--colors-primary600, #0284C7);
6021
5953
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
6022
5954
  }
6023
5955
  `;
@@ -6029,13 +5961,13 @@ const VersionItemHeader = styled.div`
6029
5961
  `;
6030
5962
  const VersionNumber = styled.div`
6031
5963
  font-weight: 600;
6032
- color: ${(props) => props.theme.colors.neutral800};
5964
+ color: var(--colors-neutral800);
6033
5965
  display: flex;
6034
5966
  align-items: center;
6035
5967
  gap: 8px;
6036
5968
  `;
6037
5969
  const VersionBadge = styled.span`
6038
- background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
5970
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-primary700, #0284C7) 100%);
6039
5971
  color: white;
6040
5972
  padding: 2px 8px;
6041
5973
  border-radius: 4px;
@@ -6044,11 +5976,11 @@ const VersionBadge = styled.span`
6044
5976
  `;
6045
5977
  const VersionDate = styled.div`
6046
5978
  font-size: 13px;
6047
- color: ${(props) => props.theme.colors.neutral600};
5979
+ color: var(--colors-neutral600);
6048
5980
  `;
6049
5981
  const VersionMeta = styled.div`
6050
5982
  font-size: 13px;
6051
- color: ${(props) => props.theme.colors.neutral600};
5983
+ color: var(--colors-neutral600);
6052
5984
  margin-bottom: 12px;
6053
5985
  `;
6054
5986
  const VersionActions = styled.div`
@@ -6056,14 +5988,14 @@ const VersionActions = styled.div`
6056
5988
  gap: 8px;
6057
5989
  `;
6058
5990
  const RestoreButton = styled(Button)`
6059
- background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
5991
+ background: linear-gradient(135deg, var(--colors-success600, #22C55E) 0%, var(--colors-success700, #16A34A) 100%);
6060
5992
  border: none;
6061
5993
  color: white;
6062
5994
  font-size: 13px;
6063
5995
  padding: 8px 16px;
6064
5996
 
6065
5997
  &:hover {
6066
- background: linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
5998
+ background: linear-gradient(135deg, var(--colors-success400, #4ADE80) 0%, var(--colors-success600, #22C55E) 100%);
6067
5999
  transform: translateY(-1px);
6068
6000
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
6069
6001
  border-color: transparent;
@@ -6075,14 +6007,14 @@ const RestoreButton = styled(Button)`
6075
6007
  }
6076
6008
  `;
6077
6009
  const DeleteButton = styled(Button)`
6078
- background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
6010
+ background: linear-gradient(135deg, var(--colors-danger500, #EF4444) 0%, var(--colors-danger600, #DC2626) 100%);
6079
6011
  border: none;
6080
6012
  color: white;
6081
6013
  font-size: 13px;
6082
6014
  padding: 8px 16px;
6083
6015
 
6084
6016
  &:hover {
6085
- background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
6017
+ background: linear-gradient(135deg, var(--colors-danger400, #F87171) 0%, var(--colors-danger500, #EF4444) 100%);
6086
6018
  transform: translateY(-1px);
6087
6019
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
6088
6020
  border-color: transparent;
@@ -6101,12 +6033,12 @@ const CloseButton$1 = styled.button`
6101
6033
  display: flex;
6102
6034
  align-items: center;
6103
6035
  justify-content: center;
6104
- color: ${(props) => props.theme.colors.neutral600};
6036
+ color: var(--colors-neutral600);
6105
6037
  transition: all 150ms;
6106
6038
 
6107
6039
  &:hover {
6108
- color: ${(props) => props.theme.colors.neutral800};
6109
- background: ${(props) => props.theme.colors.neutral100};
6040
+ color: var(--colors-neutral800);
6041
+ background: var(--colors-neutral100);
6110
6042
  border-radius: 4px;
6111
6043
  }
6112
6044
 
@@ -6118,7 +6050,7 @@ const CloseButton$1 = styled.button`
6118
6050
  const EmptyVersions = styled.div`
6119
6051
  text-align: center;
6120
6052
  padding: 60px 20px;
6121
- color: ${(props) => props.theme.colors.neutral600};
6053
+ color: var(--colors-neutral600);
6122
6054
  display: flex;
6123
6055
  flex-direction: column;
6124
6056
  align-items: center;
@@ -6128,7 +6060,7 @@ const EmptyVersions = styled.div`
6128
6060
  width: 64px;
6129
6061
  height: 64px;
6130
6062
  margin-bottom: 16px;
6131
- color: ${(props) => props.theme.colors.neutral300};
6063
+ color: rgba(128, 128, 128, 0.3);
6132
6064
  }
6133
6065
  `;
6134
6066
  const EditorPage = () => {
@@ -6754,9 +6686,9 @@ const EditorPage = () => {
6754
6686
  /* @__PURE__ */ jsxs(VersionModal, { $isOpen: showVersionHistory, children: [
6755
6687
  /* @__PURE__ */ jsxs(VersionModalHeader, { children: [
6756
6688
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
6757
- /* @__PURE__ */ jsx(ClockIcon, { style: { width: 20, height: 20, color: "#32324d" } }),
6689
+ /* @__PURE__ */ jsx(ClockIcon, { style: { width: 20, height: 20, color: "var(--colors-neutral800, #32324d)" } }),
6758
6690
  /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: "Version History" }),
6759
- versions.length > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "#666687", marginLeft: "8px" }, children: [
6691
+ versions.length > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--colors-neutral600, #666687)", marginLeft: "8px" }, children: [
6760
6692
  "(",
6761
6693
  versions.length,
6762
6694
  ")"
@@ -6826,12 +6758,6 @@ const EditorPage = () => {
6826
6758
  ] });
6827
6759
  };
6828
6760
  const theme = {
6829
- colors: {
6830
- primary: { 50: "#F0F9FF", 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },
6831
- secondary: { 50: "#F5F3FF", 100: "#EDE9FE", 600: "#9333EA" },
6832
- success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
6833
- danger: { 100: "#FEE2E2", 500: "#EF4444", 600: "#DC2626" }
6834
- },
6835
6761
  shadows: {
6836
6762
  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
6837
6763
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
@@ -6869,8 +6795,8 @@ const Container = styled(Box)`
6869
6795
  `;
6870
6796
  const Header = styled(Box)`
6871
6797
  background: linear-gradient(135deg,
6872
- ${theme.colors.secondary[600]} 0%,
6873
- ${theme.colors.primary[600]} 100%
6798
+ var(--colors-secondary600, #7C3AED) 0%,
6799
+ ${"var(--colors-primary600, #0284C7)"} 100%
6874
6800
  );
6875
6801
  border-radius: ${theme.borderRadius.xl};
6876
6802
  padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
@@ -6964,7 +6890,7 @@ const StatsGrid = styled.div`
6964
6890
  }
6965
6891
  `;
6966
6892
  const StatCard = styled(Box)`
6967
- background: ${(props) => props.theme.colors.neutral0};
6893
+ background: ${(p) => p.theme.colors.neutral0};
6968
6894
  border-radius: ${theme.borderRadius.lg};
6969
6895
  padding: 28px ${theme.spacing.lg};
6970
6896
  position: relative;
@@ -6973,7 +6899,7 @@ const StatCard = styled(Box)`
6973
6899
  ${css`animation: ${fadeIn$2} ${theme.transitions.slow} backwards;`}
6974
6900
  animation-delay: ${(props) => props.$delay || "0s"};
6975
6901
  box-shadow: ${theme.shadows.sm};
6976
- border: 1px solid ${(props) => props.theme.colors.neutral200};
6902
+ border: 1px solid rgba(128, 128, 128, 0.2);
6977
6903
  min-width: 200px;
6978
6904
  flex: 1;
6979
6905
  text-align: center;
@@ -6994,7 +6920,7 @@ const StatCard = styled(Box)`
6994
6920
  &:hover {
6995
6921
  transform: translateY(-6px);
6996
6922
  box-shadow: ${theme.shadows.xl};
6997
- border-color: ${(props) => props.$color || theme.colors.primary[500]};
6923
+ border-color: ${(props) => props.$color || "var(--colors-primary600, #0EA5E9)"};
6998
6924
 
6999
6925
  .stat-icon {
7000
6926
  transform: scale(1.15) rotate(5deg);
@@ -7002,7 +6928,7 @@ const StatCard = styled(Box)`
7002
6928
 
7003
6929
  .stat-value {
7004
6930
  transform: scale(1.08);
7005
- color: ${(props) => props.$color || theme.colors.primary[600]};
6931
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
7006
6932
  }
7007
6933
  }
7008
6934
  `;
@@ -7014,13 +6940,13 @@ const StatIcon = styled(Box)`
7014
6940
  align-items: center;
7015
6941
  justify-content: center;
7016
6942
  margin-bottom: ${theme.spacing.md};
7017
- background: ${(props) => props.$bg || theme.colors.primary[100]};
6943
+ background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
7018
6944
  transition: all ${theme.transitions.normal};
7019
6945
 
7020
6946
  svg {
7021
6947
  width: 32px;
7022
6948
  height: 32px;
7023
- color: ${(props) => props.$color || theme.colors.primary[600]};
6949
+ color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
7024
6950
  }
7025
6951
 
7026
6952
  @media screen and (max-width: ${breakpoints.mobile}) {
@@ -7037,7 +6963,7 @@ const StatIcon = styled(Box)`
7037
6963
  const StatValue = styled(Typography)`
7038
6964
  font-size: 2.25rem;
7039
6965
  font-weight: 700;
7040
- color: ${(props) => props.theme.colors.neutral800};
6966
+ color: var(--colors-neutral800);
7041
6967
  transition: all ${theme.transitions.normal};
7042
6968
  line-height: 1;
7043
6969
  margin-bottom: ${theme.spacing.xs};
@@ -7048,7 +6974,7 @@ const StatValue = styled(Typography)`
7048
6974
  `;
7049
6975
  const StatLabel = styled(Typography)`
7050
6976
  font-size: 0.875rem;
7051
- color: ${(props) => props.theme.colors.neutral600};
6977
+ color: var(--colors-neutral600);
7052
6978
  font-weight: 500;
7053
6979
  text-transform: uppercase;
7054
6980
  letter-spacing: 0.05em;
@@ -7058,21 +6984,21 @@ const StatLabel = styled(Typography)`
7058
6984
  }
7059
6985
  `;
7060
6986
  const FilterBar = styled(Box)`
7061
- background: ${(props) => props.theme.colors.neutral0};
6987
+ background: ${(p) => p.theme.colors.neutral0};
7062
6988
  border-radius: ${theme.borderRadius.lg};
7063
6989
  padding: ${theme.spacing.lg} ${theme.spacing.xl};
7064
6990
  margin-bottom: ${theme.spacing.lg};
7065
6991
  box-shadow: ${theme.shadows.sm};
7066
- border: 1px solid ${(props) => props.theme.colors.neutral200};
6992
+ border: 1px solid rgba(128, 128, 128, 0.2);
7067
6993
  `;
7068
6994
  const StyledTable = styled(Table)`
7069
6995
  thead {
7070
- background: ${(props) => props.theme.colors.neutral100};
7071
- border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
6996
+ background: var(--colors-neutral100);
6997
+ border-bottom: 2px solid rgba(128, 128, 128, 0.2);
7072
6998
 
7073
6999
  th {
7074
7000
  font-weight: 600;
7075
- color: ${(props) => props.theme.colors.neutral800};
7001
+ color: var(--colors-neutral800);
7076
7002
  font-size: 0.875rem;
7077
7003
  text-transform: uppercase;
7078
7004
  letter-spacing: 0.025em;
@@ -7082,35 +7008,35 @@ const StyledTable = styled(Table)`
7082
7008
 
7083
7009
  tbody tr {
7084
7010
  transition: all ${theme.transitions.fast};
7085
- border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
7011
+ border-bottom: 1px solid rgba(128, 128, 128, 0.15);
7086
7012
 
7087
7013
  &:last-child {
7088
7014
  border-bottom: none;
7089
7015
  }
7090
7016
 
7091
7017
  &:hover {
7092
- background: ${(props) => props.theme.colors.primary100};
7018
+ background: rgba(2, 132, 199, 0.12);
7093
7019
  }
7094
7020
 
7095
7021
  td {
7096
7022
  padding: ${theme.spacing.lg} ${theme.spacing.lg};
7097
- color: ${(props) => props.theme.colors.neutral800};
7023
+ color: var(--colors-neutral800);
7098
7024
  vertical-align: middle;
7099
7025
  }
7100
7026
  }
7101
7027
  `;
7102
7028
  const TableContainer = styled(Box)`
7103
- background: ${(props) => props.theme.colors.neutral0};
7029
+ background: ${(p) => p.theme.colors.neutral0};
7104
7030
  border-radius: ${theme.borderRadius.lg};
7105
7031
  box-shadow: ${theme.shadows.md};
7106
- border: 1px solid ${(props) => props.theme.colors.neutral200};
7032
+ border: 1px solid rgba(128, 128, 128, 0.2);
7107
7033
  overflow: hidden;
7108
7034
  margin-bottom: ${theme.spacing.xl};
7109
7035
  `;
7110
7036
  const EmptyState = styled(Box)`
7111
- background: ${(props) => props.theme.colors.neutral0};
7037
+ background: ${(p) => p.theme.colors.neutral0};
7112
7038
  border-radius: ${theme.borderRadius.xl};
7113
- border: 2px dashed ${(props) => props.theme.colors.neutral300};
7039
+ border: 2px dashed rgba(128, 128, 128, 0.3);
7114
7040
  padding: 80px 32px;
7115
7041
  text-align: center;
7116
7042
  position: relative;
@@ -7127,7 +7053,7 @@ const EmptyState = styled(Box)`
7127
7053
  left: 0;
7128
7054
  right: 0;
7129
7055
  bottom: 0;
7130
- background: linear-gradient(135deg, ${theme.colors.secondary[50]} 0%, ${theme.colors.primary[50]} 100%);
7056
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, ${"rgba(2, 132, 199, 0.06)"} 100%);
7131
7057
  opacity: 0.3;
7132
7058
  z-index: 0;
7133
7059
  }
@@ -7143,7 +7069,7 @@ const EmptyIcon = styled.div`
7143
7069
  height: 120px;
7144
7070
  margin: 0 auto ${theme.spacing.lg};
7145
7071
  border-radius: 50%;
7146
- background: linear-gradient(135deg, ${theme.colors.secondary[100]} 0%, ${theme.colors.primary[100]} 100%);
7072
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, ${"rgba(2, 132, 199, 0.12)"} 100%);
7147
7073
  display: flex;
7148
7074
  align-items: center;
7149
7075
  justify-content: center;
@@ -7152,7 +7078,7 @@ const EmptyIcon = styled.div`
7152
7078
  svg {
7153
7079
  width: 60px;
7154
7080
  height: 60px;
7155
- color: ${theme.colors.primary[600]};
7081
+ color: ${"var(--colors-primary600, #0284C7)"};
7156
7082
  }
7157
7083
  `;
7158
7084
  const Analytics = () => {
@@ -7268,23 +7194,23 @@ const Analytics = () => {
7268
7194
  /* @__PURE__ */ jsx(Subtitle, { variant: "epsilon", children: "Track your email performance and engagement" })
7269
7195
  ] }) }) }),
7270
7196
  /* @__PURE__ */ jsxs(StatsGrid, { children: [
7271
- /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.primary[500], children: [
7272
- /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(EnvelopeIcon, {}) }),
7197
+ /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: "var(--colors-primary600, #0EA5E9)", children: [
7198
+ /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(EnvelopeIcon, {}) }),
7273
7199
  /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: stats?.totalSent || 0 }),
7274
7200
  /* @__PURE__ */ jsx(StatLabel, { children: "Total Sent" })
7275
7201
  ] }),
7276
- /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.success[500], children: [
7277
- /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(EnvelopeOpenIcon, {}) }),
7202
+ /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: "var(--colors-success600, #22C55E)", children: [
7203
+ /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(EnvelopeOpenIcon, {}) }),
7278
7204
  /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: stats?.totalOpened || 0 }),
7279
7205
  /* @__PURE__ */ jsx(StatLabel, { children: "Opened" })
7280
7206
  ] }),
7281
- /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.primary[500], children: [
7282
- /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(CursorArrowRaysIcon, {}) }),
7207
+ /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: "var(--colors-primary600, #0EA5E9)", children: [
7208
+ /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(CursorArrowRaysIcon, {}) }),
7283
7209
  /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: stats?.totalClicked || 0 }),
7284
7210
  /* @__PURE__ */ jsx(StatLabel, { children: "Clicked" })
7285
7211
  ] }),
7286
- /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: theme.colors.danger[500], children: [
7287
- /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, {}) }),
7212
+ /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: "var(--colors-danger600, #EF4444)", children: [
7213
+ /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(220, 38, 38, 0.12)", $color: "var(--colors-danger600, #DC2626)", children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, {}) }),
7288
7214
  /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: stats?.totalBounced || 0 }),
7289
7215
  /* @__PURE__ */ jsx(StatLabel, { children: "Bounced" })
7290
7216
  ] })
@@ -7339,25 +7265,25 @@ const Analytics = () => {
7339
7265
  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: log.templateName || "-" }) }),
7340
7266
  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatDate(log.sentAt) }) }),
7341
7267
  /* @__PURE__ */ jsx(Td, { children: log.openCount > 0 ? /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
7342
- /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: theme.colors.success[600] } }),
7343
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme.colors.success[600] }, children: [
7268
+ /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-success600, #16A34A)" } }),
7269
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: "var(--colors-success600, #16A34A)" }, children: [
7344
7270
  log.openCount,
7345
7271
  " ",
7346
7272
  log.openCount === 1 ? "time" : "times"
7347
7273
  ] })
7348
7274
  ] }) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
7349
- /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
7275
+ /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-neutral500)" } }),
7350
7276
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No" })
7351
7277
  ] }) }),
7352
7278
  /* @__PURE__ */ jsx(Td, { children: log.clickCount > 0 ? /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
7353
- /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: theme.colors.primary[600] } }),
7354
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme.colors.primary[600] }, children: [
7279
+ /* @__PURE__ */ jsx(CheckCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-primary600, #0284C7)" } }),
7280
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: "var(--colors-primary600, #0284C7)" }, children: [
7355
7281
  log.clickCount,
7356
7282
  " ",
7357
7283
  log.clickCount === 1 ? "time" : "times"
7358
7284
  ] })
7359
7285
  ] }) : /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
7360
- /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "#9CA3AF" } }),
7286
+ /* @__PURE__ */ jsx(XCircleIcon, { style: { width: 16, height: 16, color: "var(--colors-neutral500)" } }),
7361
7287
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No" })
7362
7288
  ] }) })
7363
7289
  ] }, log.id)) })
@@ -7423,17 +7349,16 @@ const spin = keyframes`
7423
7349
  const colors = {
7424
7350
  whatsapp: "#25D366",
7425
7351
  whatsappDark: "#128C7E",
7426
- whatsappLight: "#DCF8C6",
7352
+ whatsappLight: "rgba(37, 211, 102, 0.2)",
7427
7353
  primary: "#4945ff",
7428
- primaryLight: "#f0f0ff",
7354
+ primaryLight: "rgba(73, 69, 255, 0.06)",
7429
7355
  success: "#5cb176",
7430
- successLight: "#eafaf1",
7356
+ successLight: "rgba(92, 177, 118, 0.12)",
7431
7357
  danger: "#d02b20",
7432
7358
  neutral: "#8e8ea9",
7433
- neutralLight: "#f6f6f9",
7434
- white: "#ffffff",
7435
- border: "#dcdce4",
7436
- textLight: "#666687"
7359
+ neutralLight: "rgba(142, 142, 169, 0.08)",
7360
+ border: "rgba(128, 128, 128, 0.2)",
7361
+ textLight: "var(--colors-neutral600, #666687)"
7437
7362
  };
7438
7363
  const PageContainer = styled(Box)`
7439
7364
  padding: 40px;
@@ -7494,8 +7419,8 @@ const StepDot = styled.div`
7494
7419
  width: 56px;
7495
7420
  height: 56px;
7496
7421
  border-radius: 50%;
7497
- background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.white};
7498
- color: ${(props) => props.$active || props.$completed ? colors.white : colors.textLight};
7422
+ background: ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : props.theme.colors.neutral0};
7423
+ color: ${(props) => props.$active || props.$completed ? "#ffffff" : colors.textLight};
7499
7424
  border: 4px solid ${(props) => props.$active ? colors.whatsapp : props.$completed ? colors.success : colors.border};
7500
7425
  display: flex;
7501
7426
  align-items: center;
@@ -7526,7 +7451,7 @@ const StepLabel = styled(Typography)`
7526
7451
  transition: all 0.3s ease;
7527
7452
  `;
7528
7453
  const ContentCard = styled(Box)`
7529
- background: ${colors.white};
7454
+ background: ${(p) => p.theme.colors.neutral0};
7530
7455
  border: 1px solid ${colors.border};
7531
7456
  border-radius: 16px;
7532
7457
  padding: 32px;
@@ -7602,14 +7527,14 @@ const ConnectedCard = styled(Box)`
7602
7527
  text-align: center;
7603
7528
  `;
7604
7529
  const InfoBox = styled(Box)`
7605
- background: linear-gradient(135deg, ${theme$3.colors.primary[50]} 0%, ${colors.whatsappLight} 100%);
7606
- border: 1px solid ${theme$3.colors.primary[200]};
7530
+ background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, ${colors.whatsappLight} 100%);
7531
+ border: 1px solid rgba(2, 132, 199, 0.2);
7607
7532
  border-radius: 12px;
7608
7533
  padding: 24px;
7609
7534
  margin: 20px 0;
7610
7535
  `;
7611
7536
  const TestSection = styled(Box)`
7612
- background: linear-gradient(135deg, ${colors.whatsappLight} 0%, #E8F5E9 100%);
7537
+ background: linear-gradient(135deg, ${colors.whatsappLight} 0%, rgba(34, 197, 94, 0.1) 100%);
7613
7538
  border: 1px solid ${colors.whatsapp}40;
7614
7539
  border-radius: 16px;
7615
7540
  padding: 24px;
@@ -7618,11 +7543,11 @@ const TestSection = styled(Box)`
7618
7543
  const WhatsAppInput = styled.input`
7619
7544
  width: 100%;
7620
7545
  padding: 14px 16px;
7621
- border: 2px solid ${(props) => props.theme.colors.neutral200};
7546
+ border: 2px solid rgba(128, 128, 128, 0.2);
7622
7547
  border-radius: 12px;
7623
7548
  font-size: 15px;
7624
- background: white;
7625
- color: ${(props) => props.theme.colors.neutral800};
7549
+ background: ${(p) => p.theme.colors.neutral0};
7550
+ color: var(--colors-neutral800);
7626
7551
  transition: all 0.2s ease;
7627
7552
  box-sizing: border-box;
7628
7553
 
@@ -7633,17 +7558,17 @@ const WhatsAppInput = styled.input`
7633
7558
  }
7634
7559
 
7635
7560
  &::placeholder {
7636
- color: ${(props) => props.theme.colors.neutral400};
7561
+ color: rgba(128, 128, 128, 0.4);
7637
7562
  }
7638
7563
  `;
7639
7564
  const WhatsAppTextarea = styled.textarea`
7640
7565
  width: 100%;
7641
7566
  padding: 14px 16px;
7642
- border: 2px solid ${(props) => props.theme.colors.neutral200};
7567
+ border: 2px solid rgba(128, 128, 128, 0.2);
7643
7568
  border-radius: 12px;
7644
7569
  font-size: 15px;
7645
- background: white;
7646
- color: ${(props) => props.theme.colors.neutral800};
7570
+ background: ${(p) => p.theme.colors.neutral0};
7571
+ color: var(--colors-neutral800);
7647
7572
  transition: all 0.2s ease;
7648
7573
  box-sizing: border-box;
7649
7574
  resize: vertical;
@@ -7657,7 +7582,7 @@ const WhatsAppTextarea = styled.textarea`
7657
7582
  }
7658
7583
 
7659
7584
  &::placeholder {
7660
- color: ${(props) => props.theme.colors.neutral400};
7585
+ color: rgba(128, 128, 128, 0.4);
7661
7586
  }
7662
7587
  `;
7663
7588
  const InputLabel = styled.label`
@@ -7671,7 +7596,7 @@ const InputLabel = styled.label`
7671
7596
  `;
7672
7597
  const InputHint = styled.span`
7673
7598
  font-size: 12px;
7674
- color: ${(props) => props.theme.colors.neutral500};
7599
+ color: var(--colors-neutral500);
7675
7600
  margin-top: 6px;
7676
7601
  display: block;
7677
7602
  `;
@@ -7683,7 +7608,7 @@ const MessageSymbol = styled.span`
7683
7608
  font-size: 16px;
7684
7609
  `;
7685
7610
  const UseCaseCard = styled(Box)`
7686
- background: linear-gradient(135deg, ${colors.whatsappLight}, ${theme$3.colors.primary[50]});
7611
+ background: linear-gradient(135deg, ${colors.whatsappLight}, rgba(2, 132, 199, 0.06));
7687
7612
  border: 2px solid ${colors.whatsapp};
7688
7613
  border-radius: 16px;
7689
7614
  padding: 24px;
@@ -7692,11 +7617,11 @@ const UseCaseCard = styled(Box)`
7692
7617
  const ButtonRow = styled(Flex)`
7693
7618
  margin-top: 32px;
7694
7619
  padding-top: 24px;
7695
- border-top: 1px solid ${(props) => props.theme.colors.neutral200};
7620
+ border-top: 1px solid rgba(128, 128, 128, 0.2);
7696
7621
  `;
7697
7622
  const AlertBox = styled(Box)`
7698
- background: ${theme$3.colors.primary[50]};
7699
- border: 1px solid ${theme$3.colors.primary[200]};
7623
+ background: rgba(2, 132, 199, 0.06);
7624
+ border: 1px solid rgba(2, 132, 199, 0.2);
7700
7625
  border-radius: 12px;
7701
7626
  padding: 16px 20px;
7702
7627
  margin-top: 20px;
@@ -7708,7 +7633,7 @@ const AlertIcon = styled.div`
7708
7633
  width: 24px;
7709
7634
  height: 24px;
7710
7635
  border-radius: 50%;
7711
- background: ${theme$3.colors.primary[500]};
7636
+ background: var(--colors-primary600, #0EA5E9);
7712
7637
  color: white;
7713
7638
  display: flex;
7714
7639
  align-items: center;
@@ -7718,8 +7643,8 @@ const AlertIcon = styled.div`
7718
7643
  flex-shrink: 0;
7719
7644
  `;
7720
7645
  const SuccessBox = styled(Box)`
7721
- background: ${theme$3.colors.success[50]};
7722
- border: 1px solid ${theme$3.colors.success[200]};
7646
+ background: rgba(22, 163, 74, 0.06);
7647
+ border: 1px solid rgba(22, 163, 74, 0.2);
7723
7648
  border-radius: 12px;
7724
7649
  padding: 16px 20px;
7725
7650
  display: flex;
@@ -7730,7 +7655,7 @@ const SuccessIcon = styled.div`
7730
7655
  width: 24px;
7731
7656
  height: 24px;
7732
7657
  border-radius: 50%;
7733
- background: ${theme$3.colors.success[500]};
7658
+ background: var(--colors-success600, #22C55E);
7734
7659
  color: white;
7735
7660
  display: flex;
7736
7661
  align-items: center;
@@ -7747,8 +7672,8 @@ const WhatsAppButton = styled(GradientButton$1)`
7747
7672
  }
7748
7673
  `;
7749
7674
  const NotInstalledCard = styled(Box)`
7750
- background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
7751
- border: 2px solid #F59E0B;
7675
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(220, 38, 38, 0.12));
7676
+ border: 2px solid var(--colors-warning600, #F59E0B);
7752
7677
  border-radius: 16px;
7753
7678
  padding: 32px;
7754
7679
  text-align: center;
@@ -7981,7 +7906,7 @@ const WhatsAppPage = () => {
7981
7906
  isAvailable ? /* @__PURE__ */ jsxs(SuccessBox, { children: [
7982
7907
  /* @__PURE__ */ jsx(SuccessIcon, { children: /* @__PURE__ */ jsx(Check, { style: { width: 14, height: 14 } }) }),
7983
7908
  /* @__PURE__ */ jsxs(Box, { children: [
7984
- /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: theme$3.colors.success[700] }, children: "Dependencies Installed" }),
7909
+ /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { display: "block", marginBottom: "4px", color: "var(--colors-success600, #15803D)" }, children: "Dependencies Installed" }),
7985
7910
  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Baileys library is installed and ready to use. You can proceed to connect your WhatsApp account." })
7986
7911
  ] })
7987
7912
  ] }) : /* @__PURE__ */ jsxs(NotInstalledCard, { children: [
@@ -8030,7 +7955,7 @@ const WhatsAppPage = () => {
8030
7955
  /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Connect Your WhatsApp" }),
8031
7956
  /* @__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." }),
8032
7957
  /* @__PURE__ */ jsxs(InfoBox, { children: [
8033
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "How it works" }),
7958
+ /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "How it works" }),
8034
7959
  /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
8035
7960
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: '1. Click "Connect WhatsApp" to generate a QR code' }),
8036
7961
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "2. Open WhatsApp on your phone" }),
@@ -8076,7 +8001,7 @@ const WhatsAppPage = () => {
8076
8001
  /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "Generating QR code..." })
8077
8002
  ] }) }),
8078
8003
  /* @__PURE__ */ jsxs(InfoBox, { children: [
8079
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: theme$3.colors.primary[700] }, children: "Instructions" }),
8004
+ /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "16px", color: "var(--colors-primary600, #075985)" }, children: "Instructions" }),
8080
8005
  /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
8081
8006
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "1. Open WhatsApp on your phone" }),
8082
8007
  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral700", children: "2. Tap Menu or Settings" }),
@@ -8233,7 +8158,7 @@ const ModalOverlay = styled.div`
8233
8158
  padding: 20px;
8234
8159
  `;
8235
8160
  const ModalContent = styled(Box)`
8236
- background: white;
8161
+ background: ${(p) => p.theme.colors.neutral0};
8237
8162
  border-radius: 16px;
8238
8163
  width: 100%;
8239
8164
  max-width: 580px;
@@ -8242,7 +8167,7 @@ const ModalContent = styled(Box)`
8242
8167
  overflow: hidden;
8243
8168
  `;
8244
8169
  const GradientHeader = styled(Box)`
8245
- background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
8170
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
8246
8171
  padding: 32px 40px;
8247
8172
  position: relative;
8248
8173
  overflow: hidden;
@@ -8308,7 +8233,7 @@ const CloseButton = styled.button`
8308
8233
  `;
8309
8234
  const GradientButton = styled(Button)`
8310
8235
  && {
8311
- background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
8236
+ background: linear-gradient(135deg, var(--colors-primary600, #0EA5E9) 0%, var(--colors-secondary500, #A855F7) 100%);
8312
8237
  color: white;
8313
8238
  font-weight: 600;
8314
8239
  border: none;
@@ -8317,7 +8242,7 @@ const GradientButton = styled(Button)`
8317
8242
  min-height: 44px;
8318
8243
 
8319
8244
  &:hover:not(:disabled) {
8320
- background: linear-gradient(135deg, #0284C7 0%, #9333EA 100%);
8245
+ background: linear-gradient(135deg, var(--colors-primary700, #0284C7) 0%, var(--colors-secondary600, #9333EA) 100%);
8321
8246
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5);
8322
8247
  }
8323
8248
 
@@ -8329,22 +8254,22 @@ const GradientButton = styled(Button)`
8329
8254
  `;
8330
8255
  styled(Button)`
8331
8256
  && {
8332
- background: #f0f9ff;
8333
- color: #0EA5E9;
8257
+ background: rgba(14, 165, 233, 0.06);
8258
+ color: var(--colors-primary600, #0EA5E9);
8334
8259
  font-weight: 600;
8335
- border: 2px solid #0EA5E9;
8260
+ border: 2px solid var(--colors-primary600, #0EA5E9);
8336
8261
  padding: 12px 24px;
8337
8262
  min-height: 44px;
8338
8263
 
8339
8264
  &:hover:not(:disabled) {
8340
- background: #e0f2fe;
8265
+ background: rgba(14, 165, 233, 0.12);
8341
8266
  }
8342
8267
  }
8343
8268
  `;
8344
8269
  const ToggleButton = styled.button`
8345
8270
  background: none;
8346
8271
  border: none;
8347
- color: #0EA5E9;
8272
+ color: var(--colors-primary600, #0EA5E9);
8348
8273
  font-size: 13px;
8349
8274
  font-weight: 600;
8350
8275
  cursor: pointer;
@@ -8353,7 +8278,7 @@ const ToggleButton = styled.button`
8353
8278
  transition: color 0.2s;
8354
8279
 
8355
8280
  &:hover {
8356
- color: #A855F7;
8281
+ color: var(--colors-secondary600, #A855F7);
8357
8282
  }
8358
8283
 
8359
8284
  &:disabled {
@@ -8524,7 +8449,7 @@ const LicenseGuard = ({ children }) => {
8524
8449
  padding: 4,
8525
8450
  style: {
8526
8451
  borderRadius: "8px",
8527
- border: "2px solid #BAE6FD",
8452
+ border: "2px solid rgba(14, 165, 233, 0.3)",
8528
8453
  width: "100%"
8529
8454
  },
8530
8455
  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' })
@@ -8588,7 +8513,7 @@ const LicenseGuard = ({ children }) => {
8588
8513
  padding: 5,
8589
8514
  style: {
8590
8515
  borderRadius: "8px",
8591
- border: "2px solid #DCFCE7",
8516
+ border: "2px solid rgba(34, 197, 94, 0.3)",
8592
8517
  textAlign: "center"
8593
8518
  },
8594
8519
  children: [