strapi-plugin-magic-mail 3.0.1 → 3.0.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 (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/admin/{App-CjlxXCZb.mjs → App-bZGJVVWn.mjs} +99 -157
  3. package/dist/admin/{App-BhDvUsMa.js → App-pjasEbqe.js} +98 -156
  4. package/dist/admin/{PluginSettings-Css2nHrB.js → PluginSettings-B6TdA1qd.js} +19 -13
  5. package/dist/admin/{PluginSettings-Duc_Y571.mjs → PluginSettings-DTqdZ-nW.mjs} +20 -14
  6. package/dist/admin/index.js +2 -2
  7. package/dist/admin/index.mjs +2 -2
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## [3.0.3](https://github.com/Schero94/Magic-Mail/compare/v3.0.2...v3.0.3) (2026-07-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **admin:** use compact switch in template editor ([710db87](https://github.com/Schero94/Magic-Mail/commit/710db87e3b1db2c4ed3c7a1f75f30cc528574823))
7
+ * **admin:** use compact switches in account setup ([0b7abbb](https://github.com/Schero94/Magic-Mail/commit/0b7abbb24668de4199dc2b4cd1ff08f7551b0dc4))
8
+ * **admin:** use compact switches in plugin settings ([81b17cf](https://github.com/Schero94/Magic-Mail/commit/81b17cf60b9ae192307380e1177c03eec84868a6))
9
+ * **admin:** use compact switches in routing rules ([25e540e](https://github.com/Schero94/Magic-Mail/commit/25e540e0627e7e1b570696bdd5622ee32291faff))
10
+ * **admin:** use theme-aware switch card borders ([c04600d](https://github.com/Schero94/Magic-Mail/commit/c04600d4c0f8fe1168c15d5e84824da5511f3cd9))
11
+
12
+ ## [3.0.2](https://github.com/Schero94/Magic-Mail/compare/v3.0.1...v3.0.2) (2026-07-11)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **admin:** make Test Mode option title and description readable ([ccb605c](https://github.com/Schero94/Magic-Mail/commit/ccb605c0998c4b5d05da309411adf81466b383cc))
18
+
1
19
  ## [3.0.1](https://github.com/Schero94/Magic-Mail/compare/v3.0.0...v3.0.1) (2026-07-11)
2
20
 
3
21
 
package/dist/admin/{App-CjlxXCZb.mjs → App-bZGJVVWn.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React, { useRef, useEffect, useState, useCallback } from "react";
3
3
  import { useNavigate, useLocation } from "react-router-dom";
4
- import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Toggle, Badge, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, Tabs, Accordion } from "@strapi/design-system";
4
+ import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Switch, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Badge, Table, Tabs, Accordion } from "@strapi/design-system";
5
5
  import { useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
6
6
  import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, BoltIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
7
7
  import styled, { css, keyframes } from "styled-components";
@@ -375,18 +375,6 @@ const SectionTitle = styled(Typography)`
375
375
  align-items: center;
376
376
  gap: 8px;
377
377
  `;
378
- styled(Box)`
379
- background: linear-gradient(135deg, ${colors$1.primaryLight}, ${colors$1.successLight});
380
- border: 2px solid ${colors$1.primary}33;
381
- border-radius: 12px;
382
- padding: 20px;
383
- transition: all 0.3s;
384
-
385
- &:hover {
386
- border-color: ${colors$1.primary}66;
387
- box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
388
- }
389
- `;
390
378
  const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }) => {
391
379
  const { post, get, put } = useFetchClient();
392
380
  const { toggleNotification } = useNotification();
@@ -1196,41 +1184,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1196
1184
  Box,
1197
1185
  {
1198
1186
  padding: 4,
1199
- background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
1187
+ background: "neutral100",
1200
1188
  hasRadius: true,
1189
+ borderColor: "neutral200",
1190
+ borderStyle: "solid",
1191
+ borderWidth: "1px",
1201
1192
  style: {
1202
- border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
1203
- borderRadius: "8px",
1204
- transition: "all 0.2s ease"
1193
+ borderRadius: "8px"
1205
1194
  },
1206
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
1207
- /* @__PURE__ */ jsx(
1208
- Toggle,
1195
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1196
+ /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, children: [
1197
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Use SSL/TLS Encryption" }),
1198
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "Use this for implicit SSL/TLS connections, typically on port 465." : "Port 587 will use STARTTLS instead. Confirm the server supports STARTTLS before sending." })
1199
+ ] }),
1200
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1201
+ Switch,
1209
1202
  {
1210
1203
  checked: formData.secure,
1211
- onChange: () => handleChange("secure", !formData.secure),
1204
+ onCheckedChange: (checked) => handleChange("secure", checked),
1205
+ "aria-label": "Use SSL/TLS encryption",
1212
1206
  onLabel: "Enabled",
1213
- offLabel: "Disabled"
1207
+ offLabel: "Disabled",
1208
+ visibleLabels: false
1214
1209
  }
1215
- ),
1216
- /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [
1217
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
1218
- /* @__PURE__ */ jsxs(Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: [
1219
- formData.secure ? "🔒" : "⚠️",
1220
- " Use SSL/TLS Encryption"
1221
- ] }),
1222
- /* @__PURE__ */ jsx(
1223
- Badge,
1224
- {
1225
- backgroundColor: formData.secure ? "success600" : "warning600",
1226
- textColor: "neutral0",
1227
- size: "S",
1228
- children: formData.secure ? "ENABLED" : "DISABLED"
1229
- }
1230
- )
1231
- ] }),
1232
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "SSL/TLS enabled - Use this for port 465" : "SSL/TLS disabled - Port 587 will use STARTTLS instead" })
1233
- ] })
1210
+ ) })
1234
1211
  ] })
1235
1212
  }
1236
1213
  )
@@ -1832,33 +1809,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1832
1809
  Box,
1833
1810
  {
1834
1811
  padding: 4,
1835
- background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
1812
+ background: "neutral100",
1836
1813
  hasRadius: true,
1814
+ borderColor: "neutral200",
1815
+ borderStyle: "solid",
1816
+ borderWidth: "1px",
1837
1817
  style: {
1838
- border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
1839
- borderRadius: "8px",
1840
- transition: "all 0.2s ease"
1818
+ borderRadius: "8px"
1841
1819
  },
1842
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
1843
- /* @__PURE__ */ jsx(Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsx(
1844
- Toggle,
1820
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1821
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
1822
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Account Active" }),
1823
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account can send emails. Turn it off to pause sending without deleting the account." : "This account will not send emails until it is turned on again." })
1824
+ ] }),
1825
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1826
+ Switch,
1845
1827
  {
1846
1828
  checked: formData.isActive,
1847
- onChange: () => handleChange("isActive", !formData.isActive),
1829
+ onCheckedChange: (checked) => handleChange("isActive", checked),
1830
+ "aria-label": "Account active",
1848
1831
  onLabel: "Active",
1849
- offLabel: "Inactive"
1832
+ offLabel: "Inactive",
1833
+ visibleLabels: false
1850
1834
  }
1851
- ) }),
1852
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
1853
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1854
- /* @__PURE__ */ jsxs(Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: [
1855
- formData.isActive ? "✅" : "❌",
1856
- " Account Active"
1857
- ] }),
1858
- formData.isActive ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "danger600", textColor: "neutral0", size: "S", children: "DISABLED" })
1859
- ] }),
1860
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account is enabled and can send emails. Disable it to prevent sending without deleting the account." : "This account is disabled and will not send any emails. Enable it to start sending again." })
1861
- ] })
1835
+ ) })
1862
1836
  ] })
1863
1837
  }
1864
1838
  ),
@@ -1866,30 +1840,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1866
1840
  Box,
1867
1841
  {
1868
1842
  padding: 4,
1869
- background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
1843
+ background: "neutral100",
1870
1844
  hasRadius: true,
1845
+ borderColor: "neutral200",
1846
+ borderStyle: "solid",
1847
+ borderWidth: "1px",
1871
1848
  style: {
1872
- border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
1873
- borderRadius: "8px",
1874
- transition: "all 0.2s ease"
1849
+ borderRadius: "8px"
1875
1850
  },
1876
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
1877
- /* @__PURE__ */ jsx(Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsx(
1878
- Toggle,
1851
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1852
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
1853
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Set as Primary Account" }),
1854
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1855
+ ] }),
1856
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
1857
+ Switch,
1879
1858
  {
1880
1859
  checked: formData.isPrimary,
1881
- onChange: () => handleChange("isPrimary", !formData.isPrimary),
1860
+ onCheckedChange: (checked) => handleChange("isPrimary", checked),
1861
+ "aria-label": "Primary account",
1882
1862
  onLabel: "Primary",
1883
- offLabel: "Off"
1863
+ offLabel: "Not primary",
1864
+ visibleLabels: false
1884
1865
  }
1885
- ) }),
1886
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
1887
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1888
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: "⭐ Set as Primary Account" }),
1889
- formData.isPrimary && /* @__PURE__ */ jsx(Badge, { backgroundColor: "warning600", textColor: "neutral0", size: "S", children: "PRIMARY" })
1890
- ] }),
1891
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1892
- ] })
1866
+ ) })
1893
1867
  ] })
1894
1868
  }
1895
1869
  )
@@ -2849,8 +2823,8 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2849
2823
  children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
2850
2824
  /* @__PURE__ */ jsx(PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2851
2825
  /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
2852
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
2853
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
2826
+ /* @__PURE__ */ jsx(Typography, { tag: "div", fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
2827
+ /* @__PURE__ */ jsx(Typography, { tag: "div", variant: "pi", textColor: "neutral500", style: { fontSize: "12px", marginTop: "2px" }, children: "Send directly through this account" })
2854
2828
  ] })
2855
2829
  ] })
2856
2830
  }
@@ -2863,8 +2837,8 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2863
2837
  children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
2864
2838
  /* @__PURE__ */ jsx(SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2865
2839
  /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
2866
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
2867
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2840
+ /* @__PURE__ */ jsx(Typography, { tag: "div", fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
2841
+ /* @__PURE__ */ jsx(Typography, { tag: "div", variant: "pi", textColor: "neutral500", style: { fontSize: "12px", marginTop: "2px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2868
2842
  ] })
2869
2843
  ] })
2870
2844
  }
@@ -3756,31 +3730,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3756
3730
  Box,
3757
3731
  {
3758
3732
  padding: 4,
3759
- background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
3733
+ background: "neutral100",
3760
3734
  hasRadius: true,
3735
+ borderColor: "neutral200",
3736
+ borderStyle: "solid",
3737
+ borderWidth: "1px",
3761
3738
  style: {
3762
3739
  width: "100%",
3763
- border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
3764
- borderRadius: theme$2.borderRadius.md,
3765
- transition: "all 0.2s ease"
3740
+ borderRadius: theme$2.borderRadius.md
3766
3741
  },
3767
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
3768
- /* @__PURE__ */ jsx(
3769
- Toggle,
3742
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3743
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
3744
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3745
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3746
+ ] }),
3747
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
3748
+ Switch,
3770
3749
  {
3771
3750
  checked: formData.whatsappFallback,
3772
- onChange: () => handleChange("whatsappFallback", !formData.whatsappFallback),
3751
+ onCheckedChange: (checked) => handleChange("whatsappFallback", checked),
3752
+ "aria-label": "WhatsApp fallback",
3773
3753
  onLabel: "Enabled",
3774
- offLabel: "Disabled"
3754
+ offLabel: "Disabled",
3755
+ visibleLabels: false
3775
3756
  }
3776
- ),
3777
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
3778
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
3779
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3780
- formData.whatsappFallback && /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" })
3781
- ] }),
3782
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3783
- ] })
3757
+ ) })
3784
3758
  ] })
3785
3759
  }
3786
3760
  ),
@@ -3802,39 +3776,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3802
3776
  Box,
3803
3777
  {
3804
3778
  padding: 4,
3805
- background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
3779
+ background: "neutral100",
3806
3780
  hasRadius: true,
3781
+ borderColor: "neutral200",
3782
+ borderStyle: "solid",
3783
+ borderWidth: "1px",
3807
3784
  style: {
3808
3785
  width: "100%",
3809
- border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
3810
- borderRadius: theme$2.borderRadius.md,
3811
- transition: "all 0.2s ease"
3786
+ borderRadius: theme$2.borderRadius.md
3812
3787
  },
3813
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
3814
- /* @__PURE__ */ jsx(
3815
- Toggle,
3788
+ children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3789
+ /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minWidth: 0 }, children: [
3790
+ /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: "Rule Active" }),
3791
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3792
+ ] }),
3793
+ /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
3794
+ Switch,
3816
3795
  {
3817
3796
  checked: formData.isActive,
3818
- onChange: () => handleChange("isActive", !formData.isActive),
3797
+ onCheckedChange: (checked) => handleChange("isActive", checked),
3798
+ "aria-label": "Routing rule active",
3819
3799
  onLabel: "Active",
3820
- offLabel: "Inactive"
3800
+ offLabel: "Inactive",
3801
+ visibleLabels: false
3821
3802
  }
3822
- ),
3823
- /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
3824
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
3825
- /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: formData.isActive ? "✅ Rule Active" : "❌ Rule Inactive" }),
3826
- /* @__PURE__ */ jsx(
3827
- Badge,
3828
- {
3829
- backgroundColor: formData.isActive ? "success600" : "danger600",
3830
- textColor: "neutral0",
3831
- size: "S",
3832
- children: formData.isActive ? "ENABLED" : "DISABLED"
3833
- }
3834
- )
3835
- ] }),
3836
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3837
- ] })
3803
+ ) })
3838
3804
  ] })
3839
3805
  }
3840
3806
  )
@@ -5550,37 +5516,11 @@ const FieldWrapper = styled.div`
5550
5516
  flex: ${(props) => props.flex || "initial"};
5551
5517
  width: ${(props) => props.width || "auto"};
5552
5518
  `;
5553
- const ToggleWrapper = styled.div`
5519
+ const SwitchWrapper = styled.div`
5554
5520
  padding-top: 28px;
5555
5521
  display: flex;
5556
5522
  gap: 12px;
5557
5523
  align-items: center;
5558
-
5559
- /* Custom green styling for active toggle */
5560
- button[aria-checked="true"] {
5561
- background-color: var(--colors-success600, #22C55E) !important;
5562
- border-color: var(--colors-success600, #22C55E) !important;
5563
-
5564
- span {
5565
- background-color: white !important;
5566
- }
5567
- }
5568
-
5569
- button[aria-checked="false"] {
5570
- background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
5571
- border-color: rgba(128, 128, 128, 0.2) !important;
5572
-
5573
- span {
5574
- background-color: white !important;
5575
- }
5576
- }
5577
-
5578
- /* Label styling based on state */
5579
- p {
5580
- color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
5581
- font-weight: 600;
5582
- transition: color 0.2s;
5583
- }
5584
5524
  `;
5585
5525
  const TabsWrapper = styled.div`
5586
5526
  flex: 1;
@@ -6342,17 +6282,19 @@ const EditorPage = () => {
6342
6282
  }
6343
6283
  )
6344
6284
  ] }) }),
6345
- !isCoreEmail && /* @__PURE__ */ jsxs(ToggleWrapper, { $isActive: templateData.isActive, children: [
6285
+ !isCoreEmail && /* @__PURE__ */ jsxs(SwitchWrapper, { children: [
6286
+ /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: "Template active" }),
6346
6287
  /* @__PURE__ */ jsx(
6347
- Toggle,
6288
+ Switch,
6348
6289
  {
6349
6290
  checked: templateData.isActive,
6350
- onChange: () => setTemplateData({ ...templateData, isActive: !templateData.isActive }),
6291
+ onCheckedChange: (checked) => setTemplateData({ ...templateData, isActive: checked }),
6292
+ "aria-label": "Template active",
6351
6293
  onLabel: "Active",
6352
- offLabel: "Inactive"
6294
+ offLabel: "Inactive",
6295
+ visibleLabels: false
6353
6296
  }
6354
- ),
6355
- /* @__PURE__ */ jsx(Typography, { variant: "omega", children: templateData.isActive ? "Active" : "Inactive" })
6297
+ )
6356
6298
  ] })
6357
6299
  ] })
6358
6300
  ] }),
package/dist/admin/{App-BhDvUsMa.js → App-pjasEbqe.js} RENAMED
@@ -398,18 +398,6 @@ const SectionTitle = styled__default.default(designSystem.Typography)`
398
398
  align-items: center;
399
399
  gap: 8px;
400
400
  `;
401
- styled__default.default(designSystem.Box)`
402
- background: linear-gradient(135deg, ${colors$1.primaryLight}, ${colors$1.successLight});
403
- border: 2px solid ${colors$1.primary}33;
404
- border-radius: 12px;
405
- padding: 20px;
406
- transition: all 0.3s;
407
-
408
- &:hover {
409
- border-color: ${colors$1.primary}66;
410
- box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
411
- }
412
- `;
413
401
  const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }) => {
414
402
  const { post, get, put } = admin.useFetchClient();
415
403
  const { toggleNotification } = admin.useNotification();
@@ -1219,41 +1207,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1219
1207
  designSystem.Box,
1220
1208
  {
1221
1209
  padding: 4,
1222
- background: formData.secure ? "rgba(34, 197, 94, 0.15)" : "rgba(245, 158, 11, 0.15)",
1210
+ background: "neutral100",
1223
1211
  hasRadius: true,
1212
+ borderColor: "neutral200",
1213
+ borderStyle: "solid",
1214
+ borderWidth: "1px",
1224
1215
  style: {
1225
- border: formData.secure ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-warning600, #F59E0B)",
1226
- borderRadius: "8px",
1227
- transition: "all 0.2s ease"
1216
+ borderRadius: "8px"
1228
1217
  },
1229
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
1230
- /* @__PURE__ */ jsxRuntime.jsx(
1231
- designSystem.Toggle,
1218
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1219
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, children: [
1220
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: "Use SSL/TLS Encryption" }),
1221
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "Use this for implicit SSL/TLS connections, typically on port 465." : "Port 587 will use STARTTLS instead. Confirm the server supports STARTTLS before sending." })
1222
+ ] }),
1223
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1224
+ designSystem.Switch,
1232
1225
  {
1233
1226
  checked: formData.secure,
1234
- onChange: () => handleChange("secure", !formData.secure),
1227
+ onCheckedChange: (checked) => handleChange("secure", checked),
1228
+ "aria-label": "Use SSL/TLS encryption",
1235
1229
  onLabel: "Enabled",
1236
- offLabel: "Disabled"
1230
+ offLabel: "Disabled",
1231
+ visibleLabels: false
1237
1232
  }
1238
- ),
1239
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [
1240
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
1241
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px" }, children: [
1242
- formData.secure ? "🔒" : "⚠️",
1243
- " Use SSL/TLS Encryption"
1244
- ] }),
1245
- /* @__PURE__ */ jsxRuntime.jsx(
1246
- designSystem.Badge,
1247
- {
1248
- backgroundColor: formData.secure ? "success600" : "warning600",
1249
- textColor: "neutral0",
1250
- size: "S",
1251
- children: formData.secure ? "ENABLED" : "DISABLED"
1252
- }
1253
- )
1254
- ] }),
1255
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.5" }, children: formData.secure ? "SSL/TLS enabled - Use this for port 465" : "SSL/TLS disabled - Port 587 will use STARTTLS instead" })
1256
- ] })
1233
+ ) })
1257
1234
  ] })
1258
1235
  }
1259
1236
  )
@@ -1855,33 +1832,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1855
1832
  designSystem.Box,
1856
1833
  {
1857
1834
  padding: 4,
1858
- background: formData.isActive ? "rgba(34, 197, 94, 0.15)" : "rgba(220, 38, 38, 0.12)",
1835
+ background: "neutral100",
1859
1836
  hasRadius: true,
1837
+ borderColor: "neutral200",
1838
+ borderStyle: "solid",
1839
+ borderWidth: "1px",
1860
1840
  style: {
1861
- border: formData.isActive ? "2px solid var(--colors-success600, #22C55E)" : "2px solid var(--colors-danger600, #EF4444)",
1862
- borderRadius: "8px",
1863
- transition: "all 0.2s ease"
1841
+ borderRadius: "8px"
1864
1842
  },
1865
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
1866
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1867
- designSystem.Toggle,
1843
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1844
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
1845
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Account Active" }),
1846
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account can send emails. Turn it off to pause sending without deleting the account." : "This account will not send emails until it is turned on again." })
1847
+ ] }),
1848
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1849
+ designSystem.Switch,
1868
1850
  {
1869
1851
  checked: formData.isActive,
1870
- onChange: () => handleChange("isActive", !formData.isActive),
1852
+ onCheckedChange: (checked) => handleChange("isActive", checked),
1853
+ "aria-label": "Account active",
1871
1854
  onLabel: "Active",
1872
- offLabel: "Inactive"
1855
+ offLabel: "Inactive",
1856
+ visibleLabels: false
1873
1857
  }
1874
- ) }),
1875
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
1876
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1877
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: [
1878
- formData.isActive ? "✅" : "❌",
1879
- " Account Active"
1880
- ] }),
1881
- formData.isActive ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "danger600", textColor: "neutral0", size: "S", children: "DISABLED" })
1882
- ] }),
1883
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: formData.isActive ? "This account is enabled and can send emails. Disable it to prevent sending without deleting the account." : "This account is disabled and will not send any emails. Enable it to start sending again." })
1884
- ] })
1858
+ ) })
1885
1859
  ] })
1886
1860
  }
1887
1861
  ),
@@ -1889,30 +1863,30 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
1889
1863
  designSystem.Box,
1890
1864
  {
1891
1865
  padding: 4,
1892
- background: formData.isPrimary ? "rgba(245, 158, 11, 0.15)" : "neutral100",
1866
+ background: "neutral100",
1893
1867
  hasRadius: true,
1868
+ borderColor: "neutral200",
1869
+ borderStyle: "solid",
1870
+ borderWidth: "1px",
1894
1871
  style: {
1895
- border: formData.isPrimary ? "2px solid var(--colors-warning600, #F59E0B)" : `1px solid ${colors$1.border}`,
1896
- borderRadius: "8px",
1897
- transition: "all 0.2s ease"
1872
+ borderRadius: "8px"
1898
1873
  },
1899
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
1900
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
1901
- designSystem.Toggle,
1874
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "center", justifyContent: "space-between", children: [
1875
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
1876
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", marginBottom: 1, style: { fontSize: "15px" }, children: "Set as Primary Account" }),
1877
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1878
+ ] }),
1879
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
1880
+ designSystem.Switch,
1902
1881
  {
1903
1882
  checked: formData.isPrimary,
1904
- onChange: () => handleChange("isPrimary", !formData.isPrimary),
1883
+ onCheckedChange: (checked) => handleChange("isPrimary", checked),
1884
+ "aria-label": "Primary account",
1905
1885
  onLabel: "Primary",
1906
- offLabel: "Off"
1886
+ offLabel: "Not primary",
1887
+ visibleLabels: false
1907
1888
  }
1908
- ) }),
1909
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
1910
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, marginBottom: 1, children: [
1911
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "15px" }, children: "⭐ Set as Primary Account" }),
1912
- formData.isPrimary && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "warning600", textColor: "neutral0", size: "S", children: "PRIMARY" })
1913
- ] }),
1914
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: "This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time." })
1915
- ] })
1889
+ ) })
1916
1890
  ] })
1917
1891
  }
1918
1892
  )
@@ -2872,8 +2846,8 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2872
2846
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
2873
2847
  /* @__PURE__ */ jsxRuntime.jsx(outline.PlayIcon, { style: { width: 20, height: 20, color: testMode === "direct" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2874
2848
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
2875
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
2876
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Send directly through this account" })
2849
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "div", fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "direct" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Direct Test" }),
2850
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "div", variant: "pi", textColor: "neutral500", style: { fontSize: "12px", marginTop: "2px" }, children: "Send directly through this account" })
2877
2851
  ] })
2878
2852
  ] })
2879
2853
  }
@@ -2886,8 +2860,8 @@ const TestEmailModal = ({ account, onClose, onTest }) => {
2886
2860
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
2887
2861
  /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { style: { width: 20, height: 20, color: testMode === "strapi" ? "var(--colors-primary600, #0284C7)" : "var(--colors-neutral600)", flexShrink: 0 } }),
2888
2862
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
2889
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
2890
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "12px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2863
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "div", fontWeight: "semiBold", style: { fontSize: "14px", color: testMode === "strapi" ? "var(--colors-primary600, #075985)" : "var(--colors-neutral800)" }, children: "Strapi Service Test" }),
2864
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "div", variant: "pi", textColor: "neutral500", style: { fontSize: "12px", marginTop: "2px" }, children: "Verify MagicMail intercepts Strapi's email service" })
2891
2865
  ] })
2892
2866
  ] })
2893
2867
  }
@@ -3779,31 +3753,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3779
3753
  designSystem.Box,
3780
3754
  {
3781
3755
  padding: 4,
3782
- background: formData.whatsappFallback ? "rgba(22, 163, 74, 0.12)" : "var(--colors-neutral100)",
3756
+ background: "neutral100",
3783
3757
  hasRadius: true,
3758
+ borderColor: "neutral200",
3759
+ borderStyle: "solid",
3760
+ borderWidth: "1px",
3784
3761
  style: {
3785
3762
  width: "100%",
3786
- border: formData.whatsappFallback ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `1px solid ${"rgba(128, 128, 128, 0.2)"}`,
3787
- borderRadius: theme$2.borderRadius.md,
3788
- transition: "all 0.2s ease"
3763
+ borderRadius: theme$2.borderRadius.md
3789
3764
  },
3790
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
3791
- /* @__PURE__ */ jsxRuntime.jsx(
3792
- designSystem.Toggle,
3765
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3766
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
3767
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3768
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3769
+ ] }),
3770
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3771
+ designSystem.Switch,
3793
3772
  {
3794
3773
  checked: formData.whatsappFallback,
3795
- onChange: () => handleChange("whatsappFallback", !formData.whatsappFallback),
3774
+ onCheckedChange: (checked) => handleChange("whatsappFallback", checked),
3775
+ "aria-label": "WhatsApp fallback",
3796
3776
  onLabel: "Enabled",
3797
- offLabel: "Disabled"
3777
+ offLabel: "Disabled",
3778
+ visibleLabels: false
3798
3779
  }
3799
- ),
3800
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
3801
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
3802
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "WhatsApp Fallback" }),
3803
- formData.whatsappFallback && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: "ENABLED" })
3804
- ] }),
3805
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.whatsappFallback ? "If ALL email accounts fail, message will be sent via WhatsApp (requires connected WhatsApp & phone number in email data)" : "Enable to use WhatsApp as last-resort fallback when email delivery fails" })
3806
- ] })
3780
+ ) })
3807
3781
  ] })
3808
3782
  }
3809
3783
  ),
@@ -3825,39 +3799,31 @@ const RuleModal = ({ rule, accounts, onClose, onSave }) => {
3825
3799
  designSystem.Box,
3826
3800
  {
3827
3801
  padding: 4,
3828
- background: formData.isActive ? "rgba(22, 163, 74, 0.12)" : "rgba(220, 38, 38, 0.12)",
3802
+ background: "neutral100",
3829
3803
  hasRadius: true,
3804
+ borderColor: "neutral200",
3805
+ borderStyle: "solid",
3806
+ borderWidth: "1px",
3830
3807
  style: {
3831
3808
  width: "100%",
3832
- border: formData.isActive ? `2px solid ${"var(--colors-success600, #16A34A)"}` : `2px solid ${"var(--colors-danger600, #DC2626)"}`,
3833
- borderRadius: theme$2.borderRadius.md,
3834
- transition: "all 0.2s ease"
3809
+ borderRadius: theme$2.borderRadius.md
3835
3810
  },
3836
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
3837
- /* @__PURE__ */ jsxRuntime.jsx(
3838
- designSystem.Toggle,
3811
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", justifyContent: "space-between", children: [
3812
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
3813
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: "Rule Active" }),
3814
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3815
+ ] }),
3816
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
3817
+ designSystem.Switch,
3839
3818
  {
3840
3819
  checked: formData.isActive,
3841
- onChange: () => handleChange("isActive", !formData.isActive),
3820
+ onCheckedChange: (checked) => handleChange("isActive", checked),
3821
+ "aria-label": "Routing rule active",
3842
3822
  onLabel: "Active",
3843
- offLabel: "Inactive"
3823
+ offLabel: "Inactive",
3824
+ visibleLabels: false
3844
3825
  }
3845
- ),
3846
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
3847
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
3848
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: formData.isActive ? "✅ Rule Active" : "❌ Rule Inactive" }),
3849
- /* @__PURE__ */ jsxRuntime.jsx(
3850
- designSystem.Badge,
3851
- {
3852
- backgroundColor: formData.isActive ? "success600" : "danger600",
3853
- textColor: "neutral0",
3854
- size: "S",
3855
- children: formData.isActive ? "ENABLED" : "DISABLED"
3856
- }
3857
- )
3858
- ] }),
3859
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: formData.isActive ? "This rule is active and will be used for email routing" : "This rule is disabled and will be ignored" })
3860
- ] })
3826
+ ) })
3861
3827
  ] })
3862
3828
  }
3863
3829
  )
@@ -5573,37 +5539,11 @@ const FieldWrapper = styled__default.default.div`
5573
5539
  flex: ${(props) => props.flex || "initial"};
5574
5540
  width: ${(props) => props.width || "auto"};
5575
5541
  `;
5576
- const ToggleWrapper = styled__default.default.div`
5542
+ const SwitchWrapper = styled__default.default.div`
5577
5543
  padding-top: 28px;
5578
5544
  display: flex;
5579
5545
  gap: 12px;
5580
5546
  align-items: center;
5581
-
5582
- /* Custom green styling for active toggle */
5583
- button[aria-checked="true"] {
5584
- background-color: var(--colors-success600, #22C55E) !important;
5585
- border-color: var(--colors-success600, #22C55E) !important;
5586
-
5587
- span {
5588
- background-color: white !important;
5589
- }
5590
- }
5591
-
5592
- button[aria-checked="false"] {
5593
- background-color: var(--colors-neutral200, rgba(128, 128, 128, 0.2)) !important;
5594
- border-color: rgba(128, 128, 128, 0.2) !important;
5595
-
5596
- span {
5597
- background-color: white !important;
5598
- }
5599
- }
5600
-
5601
- /* Label styling based on state */
5602
- p {
5603
- color: ${(props) => props.$isActive ? "var(--colors-success600, #22C55E)" : "var(--colors-neutral600, #6B7280)"};
5604
- font-weight: 600;
5605
- transition: color 0.2s;
5606
- }
5607
5547
  `;
5608
5548
  const TabsWrapper = styled__default.default.div`
5609
5549
  flex: 1;
@@ -6365,17 +6305,19 @@ const EditorPage = () => {
6365
6305
  }
6366
6306
  )
6367
6307
  ] }) }),
6368
- !isCoreEmail && /* @__PURE__ */ jsxRuntime.jsxs(ToggleWrapper, { $isActive: templateData.isActive, children: [
6308
+ !isCoreEmail && /* @__PURE__ */ jsxRuntime.jsxs(SwitchWrapper, { children: [
6309
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: "Template active" }),
6369
6310
  /* @__PURE__ */ jsxRuntime.jsx(
6370
- designSystem.Toggle,
6311
+ designSystem.Switch,
6371
6312
  {
6372
6313
  checked: templateData.isActive,
6373
- onChange: () => setTemplateData({ ...templateData, isActive: !templateData.isActive }),
6314
+ onCheckedChange: (checked) => setTemplateData({ ...templateData, isActive: checked }),
6315
+ "aria-label": "Template active",
6374
6316
  onLabel: "Active",
6375
- offLabel: "Inactive"
6317
+ offLabel: "Inactive",
6318
+ visibleLabels: false
6376
6319
  }
6377
- ),
6378
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: templateData.isActive ? "Active" : "Inactive" })
6320
+ )
6379
6321
  ] })
6380
6322
  ] })
6381
6323
  ] }),
package/dist/admin/{PluginSettings-Css2nHrB.js → PluginSettings-B6TdA1qd.js} RENAMED
@@ -103,7 +103,7 @@ const SettingDescription = styled__default.default(designSystem.Typography)`
103
103
  line-height: 1.5;
104
104
  display: block;
105
105
  `;
106
- const ToggleWrapper = styled__default.default(designSystem.Box)`
106
+ const SwitchWrapper = styled__default.default(designSystem.Box)`
107
107
  flex-shrink: 0;
108
108
  display: flex;
109
109
  align-items: center;
@@ -241,13 +241,15 @@ const PluginSettingsPage = () => {
241
241
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable Link Tracking" }),
242
242
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: "Rewrite all links in outgoing emails to track click-through rates. This helps measure email engagement and campaign effectiveness." })
243
243
  ] }),
244
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
245
- designSystem.Toggle,
244
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
245
+ designSystem.Switch,
246
246
  {
247
247
  checked: settings.enableLinkTracking,
248
- onChange: (e) => handleChange("enableLinkTracking", e.target.checked),
248
+ onCheckedChange: (checked) => handleChange("enableLinkTracking", checked),
249
+ "aria-label": "Enable Link Tracking",
249
250
  onLabel: "Enabled",
250
- offLabel: "Disabled"
251
+ offLabel: "Disabled",
252
+ visibleLabels: false
251
253
  }
252
254
  ) })
253
255
  ] }),
@@ -290,13 +292,15 @@ const PluginSettingsPage = () => {
290
292
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable Open Tracking" }),
291
293
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: "Inject an invisible tracking pixel into emails to detect when they are opened. Note: Some email clients block tracking pixels." })
292
294
  ] }),
293
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
294
- designSystem.Toggle,
295
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
296
+ designSystem.Switch,
295
297
  {
296
298
  checked: settings.enableOpenTracking,
297
- onChange: (e) => handleChange("enableOpenTracking", e.target.checked),
299
+ onCheckedChange: (checked) => handleChange("enableOpenTracking", checked),
300
+ "aria-label": "Enable Open Tracking",
298
301
  onLabel: "Enabled",
299
- offLabel: "Disabled"
302
+ offLabel: "Disabled",
303
+ visibleLabels: false
300
304
  }
301
305
  ) })
302
306
  ] }) })
@@ -315,13 +319,15 @@ const PluginSettingsPage = () => {
315
319
  /* @__PURE__ */ jsxRuntime.jsx(SettingLabel, { children: "Enable List-Unsubscribe Header" }),
316
320
  /* @__PURE__ */ jsxRuntime.jsx(SettingDescription, { children: 'Add RFC 8058 compliant unsubscribe headers. This enables the "Unsubscribe" button in email clients like Gmail and Outlook.' })
317
321
  ] }),
318
- /* @__PURE__ */ jsxRuntime.jsx(ToggleWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
319
- designSystem.Toggle,
322
+ /* @__PURE__ */ jsxRuntime.jsx(SwitchWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
323
+ designSystem.Switch,
320
324
  {
321
325
  checked: settings.enableUnsubscribeHeader,
322
- onChange: (e) => handleChange("enableUnsubscribeHeader", e.target.checked),
326
+ onCheckedChange: (checked) => handleChange("enableUnsubscribeHeader", checked),
327
+ "aria-label": "Enable List-Unsubscribe Header",
323
328
  onLabel: "Enabled",
324
- offLabel: "Disabled"
329
+ offLabel: "Disabled",
330
+ visibleLabels: false
325
331
  }
326
332
  ) })
327
333
  ] }),
package/dist/admin/{PluginSettings-Duc_Y571.mjs → PluginSettings-DTqdZ-nW.mjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { useState, useEffect } from "react";
3
- import { Loader, Typography, Flex, Toggle, Box, Field, TextInput } from "@strapi/design-system";
3
+ import { Loader, Typography, Flex, Switch, Box, Field, TextInput } from "@strapi/design-system";
4
4
  import { useFetchClient, useNotification } from "@strapi/strapi/admin";
5
5
  import { ArrowPathIcon, LinkIcon, EyeIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/24/outline";
6
6
  import styled, { css, keyframes } from "styled-components";
@@ -99,7 +99,7 @@ const SettingDescription = styled(Typography)`
99
99
  line-height: 1.5;
100
100
  display: block;
101
101
  `;
102
- const ToggleWrapper = styled(Box)`
102
+ const SwitchWrapper = styled(Box)`
103
103
  flex-shrink: 0;
104
104
  display: flex;
105
105
  align-items: center;
@@ -237,13 +237,15 @@ const PluginSettingsPage = () => {
237
237
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable Link Tracking" }),
238
238
  /* @__PURE__ */ jsx(SettingDescription, { children: "Rewrite all links in outgoing emails to track click-through rates. This helps measure email engagement and campaign effectiveness." })
239
239
  ] }),
240
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
241
- Toggle,
240
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
241
+ Switch,
242
242
  {
243
243
  checked: settings.enableLinkTracking,
244
- onChange: (e) => handleChange("enableLinkTracking", e.target.checked),
244
+ onCheckedChange: (checked) => handleChange("enableLinkTracking", checked),
245
+ "aria-label": "Enable Link Tracking",
245
246
  onLabel: "Enabled",
246
- offLabel: "Disabled"
247
+ offLabel: "Disabled",
248
+ visibleLabels: false
247
249
  }
248
250
  ) })
249
251
  ] }),
@@ -286,13 +288,15 @@ const PluginSettingsPage = () => {
286
288
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable Open Tracking" }),
287
289
  /* @__PURE__ */ jsx(SettingDescription, { children: "Inject an invisible tracking pixel into emails to detect when they are opened. Note: Some email clients block tracking pixels." })
288
290
  ] }),
289
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
290
- Toggle,
291
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
292
+ Switch,
291
293
  {
292
294
  checked: settings.enableOpenTracking,
293
- onChange: (e) => handleChange("enableOpenTracking", e.target.checked),
295
+ onCheckedChange: (checked) => handleChange("enableOpenTracking", checked),
296
+ "aria-label": "Enable Open Tracking",
294
297
  onLabel: "Enabled",
295
- offLabel: "Disabled"
298
+ offLabel: "Disabled",
299
+ visibleLabels: false
296
300
  }
297
301
  ) })
298
302
  ] }) })
@@ -311,13 +315,15 @@ const PluginSettingsPage = () => {
311
315
  /* @__PURE__ */ jsx(SettingLabel, { children: "Enable List-Unsubscribe Header" }),
312
316
  /* @__PURE__ */ jsx(SettingDescription, { children: 'Add RFC 8058 compliant unsubscribe headers. This enables the "Unsubscribe" button in email clients like Gmail and Outlook.' })
313
317
  ] }),
314
- /* @__PURE__ */ jsx(ToggleWrapper, { children: /* @__PURE__ */ jsx(
315
- Toggle,
318
+ /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
319
+ Switch,
316
320
  {
317
321
  checked: settings.enableUnsubscribeHeader,
318
- onChange: (e) => handleChange("enableUnsubscribeHeader", e.target.checked),
322
+ onCheckedChange: (checked) => handleChange("enableUnsubscribeHeader", checked),
323
+ "aria-label": "Enable List-Unsubscribe Header",
319
324
  onLabel: "Enabled",
320
- offLabel: "Disabled"
325
+ offLabel: "Disabled",
326
+ visibleLabels: false
321
327
  }
322
328
  ) })
323
329
  ] }),
package/dist/admin/index.js CHANGED
@@ -50,7 +50,7 @@ const index = {
50
50
  id: `${pluginId}.plugin.name`,
51
51
  defaultMessage: "MagicMail"
52
52
  },
53
- Component: () => Promise.resolve().then(() => require("./App-BhDvUsMa.js")),
53
+ Component: () => Promise.resolve().then(() => require("./App-pjasEbqe.js")),
54
54
  permissions: pluginPermissions
55
55
  });
56
56
  app.createSettingSection(
@@ -67,7 +67,7 @@ const index = {
67
67
  },
68
68
  id: "plugin-settings",
69
69
  to: `${pluginId}/plugin-settings`,
70
- Component: () => Promise.resolve().then(() => require("./PluginSettings-Css2nHrB.js")),
70
+ Component: () => Promise.resolve().then(() => require("./PluginSettings-B6TdA1qd.js")),
71
71
  permissions: pluginPermissions
72
72
  }
73
73
  ]
package/dist/admin/index.mjs CHANGED
@@ -48,7 +48,7 @@ const index = {
48
48
  id: `${pluginId}.plugin.name`,
49
49
  defaultMessage: "MagicMail"
50
50
  },
51
- Component: () => import("./App-CjlxXCZb.mjs"),
51
+ Component: () => import("./App-bZGJVVWn.mjs"),
52
52
  permissions: pluginPermissions
53
53
  });
54
54
  app.createSettingSection(
@@ -65,7 +65,7 @@ const index = {
65
65
  },
66
66
  id: "plugin-settings",
67
67
  to: `${pluginId}/plugin-settings`,
68
- Component: () => import("./PluginSettings-Duc_Y571.mjs"),
68
+ Component: () => import("./PluginSettings-DTqdZ-nW.mjs"),
69
69
  permissions: pluginPermissions
70
70
  }
71
71
  ]
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.1",
2
+ "version": "3.0.3",
3
3
  "keywords": [
4
4
  "strapi",
5
5
  "plugin",