strapi-plugin-magic-link-v5 5.5.8 → 6.0.0

package/dist/admin/index-Dv5PVT1E.mjs

@@ -0,0 +1,3867 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState, useMemo, useCallback, useEffect } from "react";
+import styled, { css } from "styled-components";
+import { Field, Flex, Typography, Switch, SingleSelect, SingleSelectOption, NumberInput, TextInput, Badge, Radio, Button, Loader, Alert, Box, Accordion } from "@strapi/design-system";
+import { Link, Mail, Lock, Lightning, Information, WarningCircle, CheckCircle, Key, Check, Duplicate, ArrowClockwise, Trash, Code, Cog, Clock } from "@strapi/icons";
+import { useNotification, useFetchClient, Page } from "@strapi/strapi/admin";
+import { s as space, t as theme, c as color, S as SubsectionHeading, f as fontSize, r as reducedMotion, g as byScheme, a as brand, e as tint, u as useMagicLinkIntl, l as usePluginLanguage, d as accent, j as useCopyToClipboard, h as useFormatters, i as useMagicLinkRBAC, P as PluginPageTitle, L as LicenseGuard, k as LanguageProvider } from "./LicenseGuard-BgLA9go3.mjs";
+import { C as ConfirmDialog, b as useUnsavedChangesGuard, U as UnsavedChangesDialog } from "./useUnsavedChangesGuard-QnkiZTLP.mjs";
+const EMAIL_TEMPLATES = {
+  modern: {
+    name: "Modern Gradient",
+    preview: "Modern design with gradient header",
+    html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Magic Link Login</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f7fafc; padding: 40px 20px;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);">
+          <!-- Header with Gradient -->
+          <tr>
+            <td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
+              <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                Magic Link Login
+              </h1>
+              <p style="color: rgba(255, 255, 255, 0.9); margin: 10px 0 0; font-size: 16px;">
+                Secure passwordless authentication
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Content -->
+          <tr>
+            <td style="padding: 40px 30px;">
+              <h2 style="color: #2d3748; margin: 0 0 20px; font-size: 22px; font-weight: 600;">
+                Click to login
+              </h2>
+              <p style="color: #4a5568; line-height: 1.6; margin: 0 0 30px; font-size: 16px;">
+                We received a login request for your account. Click the button below to securely sign in.
+              </p>
+              
+              <!-- Button -->
+              <table width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td align="center" style="padding: 20px 0;">
+                    <a href="{{LOGIN_URL}}" 
+                       style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; padding: 16px 48px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);">
+                      Sign In Securely
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              
+              <p style="color: #718096; line-height: 1.6; margin: 30px 0 0; font-size: 14px;">
+                Or copy and paste this link into your browser:<br>
+                <a href="{{LOGIN_URL}}" style="color: #667eea; word-break: break-all;">{{LOGIN_URL}}</a>
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Footer -->
+          <tr>
+            <td style="background-color: #f7fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
+              <p style="color: #718096; margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                This link expires in {{EXPIRY_TEXT}}
+              </p>
+              <p style="color: #a0aec0; margin: 0; font-size: 12px;">
+                If you didn't request this, you can safely ignore this email.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`,
+    text: `Magic Link Login
+
+Click to login:
+{{LOGIN_URL}}
+
+This link expires in {{EXPIRY_TEXT}}.
+
+If you didn't request this, you can safely ignore this email.`
+  },
+  minimal: {
+    name: "Clean Minimal",
+    preview: "Simple and elegant design",
+    html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Your Magic Link</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; padding: 60px 20px;">
+    <tr>
+      <td align="center">
+        <table width="500" cellpadding="0" cellspacing="0">
+          <tr>
+            <td style="text-align: center; padding-bottom: 40px;">
+              <div style="width: 64px; height: 64px; background: #0EA5E9; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <h1 style="color: #111827; margin: 0 0 16px; font-size: 32px; font-weight: 700;">
+                Your Magic Link
+              </h1>
+              <p style="color: #6B7280; line-height: 1.6; margin: 0 0 40px; font-size: 16px;">
+                Click the button below to sign in to your account
+              </p>
+              
+              <a href="{{LOGIN_URL}}" 
+                 style="display: inline-block; background-color: #0EA5E9; color: #ffffff; padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px;">
+                Sign In
+              </a>
+              
+              <p style="color: #9CA3AF; margin: 40px 0 0; font-size: 14px;">
+                Link expires in {{EXPIRY_TEXT}}
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`,
+    text: `Your Magic Link
+
+Click to sign in:
+{{LOGIN_URL}}
+
+Link expires in {{EXPIRY_TEXT}}.`
+  },
+  professional: {
+    name: "Professional Blue",
+    preview: "Corporate and trustworthy",
+    html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Secure Login Request</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #F3F4F6;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="padding: 40px 20px;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden;">
+          <!-- Logo/Brand Area -->
+          <tr>
+            <td style="background-color: #1E40AF; padding: 30px; text-align: center;">
+              <h1 style="color: #ffffff; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0.5px;">
+                SECURE ACCESS
+              </h1>
+            </td>
+          </tr>
+          
+          <!-- Content -->
+          <tr>
+            <td style="padding: 40px 40px 30px;">
+              <p style="color: #111827; margin: 0 0 20px; font-size: 16px; font-weight: 600;">
+                Hello,
+              </p>
+              <p style="color: #4B5563; line-height: 1.6; margin: 0 0 30px; font-size: 15px;">
+                You have requested secure access to your account. Please click the button below to proceed with authentication.
+              </p>
+              
+              <!-- Button Container -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="margin: 0 0 30px;">
+                <tr>
+                  <td align="center" style="padding: 10px 0;">
+                    <a href="{{LOGIN_URL}}" 
+                       style="display: inline-block; background-color: #1E40AF; color: #ffffff; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px;">
+                      Verify & Sign In
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              
+              <!-- Security Info Box -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #EFF6FF; border-left: 4px solid #3B82F6; padding: 16px; margin: 0 0 20px;">
+                <tr>
+                  <td>
+                    <p style="color: #1E40AF; margin: 0; font-size: 13px; line-height: 1.5;">
+                      <strong>Security Notice:</strong><br>
+                      This link will expire in {{EXPIRY_TEXT}}. For your security, do not share this link with anyone.
+                    </p>
+                  </td>
+                </tr>
+              </table>
+              
+              <p style="color: #6B7280; line-height: 1.6; margin: 0; font-size: 13px;">
+                If you did not request this authentication, please disregard this email or contact support if you have concerns.
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Footer -->
+          <tr>
+            <td style="background-color: #F9FAFB; padding: 20px 40px; border-top: 1px solid #E5E7EB;">
+              <p style="color: #9CA3AF; margin: 0; font-size: 12px; text-align: center;">
+                This is an automated message. Please do not reply to this email.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`,
+    text: `SECURE ACCESS
+
+Hello,
+
+You have requested secure access to your account.
+
+Click to verify and sign in:
+{{LOGIN_URL}}
+
+Security Notice:
+This link will expire in {{EXPIRY_TEXT}}. Do not share this link.
+
+If you did not request this, please disregard this email.`
+  },
+  dark: {
+    name: "Dark Mode",
+    preview: "Modern dark theme",
+    html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Magic Link</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #0F172A; padding: 40px 20px;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #1E293B; border-radius: 16px; overflow: hidden; border: 1px solid #334155;">
+          <!-- Header -->
+          <tr>
+            <td style="padding: 40px 30px; text-align: center; background: linear-gradient(135deg, #312E81 0%, #1E293B 100%);">
+              <h1 style="color: #E0E7FF; margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                Magic Link
+              </h1>
+              <p style="color: #A5B4FC; margin: 10px 0 0; font-size: 16px;">
+                Passwordless Authentication
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Content -->
+          <tr>
+            <td style="padding: 40px 30px;">
+              <p style="color: #E2E8F0; line-height: 1.6; margin: 0 0 24px; font-size: 16px;">
+                Hey there!
+              </p>
+              <p style="color: #CBD5E1; line-height: 1.6; margin: 0 0 32px; font-size: 15px;">
+                Click the magic button below to access your account. No passwords, no hassle.
+              </p>
+              
+              <!-- Button -->
+              <table width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td align="center" style="padding: 20px 0;">
+                    <a href="{{LOGIN_URL}}" 
+                       style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); color: #ffffff; padding: 16px 48px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);">
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                      Launch Access
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              
+              <p style="color: #94A3B8; line-height: 1.6; margin: 32px 0 0; font-size: 13px; text-align: center;">
+                Or paste this URL in your browser:<br>
+                <span style="color: #818CF8; word-break: break-all;">{{LOGIN_URL}}</span>
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Footer -->
+          <tr>
+            <td style="background-color: #0F172A; padding: 24px 30px; text-align: center; border-top: 1px solid #334155;">
+              <p style="color: #64748B; margin: 0 0 8px; font-size: 13px;">
+                Expires in {{EXPIRY_TEXT}}
+              </p>
+              <p style="color: #475569; margin: 0; font-size: 12px;">
+                Didn't request this? Just ignore this email.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`,
+    text: `Magic Link
+
+Hey there!
+
+Click the link below to access your account:
+{{LOGIN_URL}}
+
+Expires in {{EXPIRY_TEXT}}.
+
+Didn't request this? Just ignore this email.`
+  },
+  playful: {
+    name: "Playful & Fun",
+    preview: "Colorful and engaging",
+    html: `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Your Magic Link is Ready!</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 50%, #FECACA 100%); padding: 40px 20px;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);">
+          <!-- Fun Header -->
+          <tr>
+            <td style="padding: 40px 30px 30px; text-align: center;">
+              <div style="margin-bottom: 16px; display: inline-block;">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+              </div>
+              <h1 style="color: #DC2626; margin: 0; font-size: 32px; font-weight: 800;">
+                Your Magic Link is Ready!
+              </h1>
+              <p style="color: #F59E0B; margin: 12px 0 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
+                Let's get you signed in
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Content -->
+          <tr>
+            <td style="padding: 20px 40px 40px;">
+              <p style="color: #374151; line-height: 1.7; margin: 0 0 30px; font-size: 16px; text-align: center;">
+                Hey friend! We've prepared something special for you. Click the shiny button below to access your account!
+              </p>
+              
+              <!-- Colorful Button -->
+              <table width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td align="center" style="padding: 10px 0 30px;">
+                    <a href="{{LOGIN_URL}}" 
+                       style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%); color: #ffffff; padding: 18px 54px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 18px; box-shadow: 0 8px 16px rgba(245, 158, 11, 0.4); text-transform: uppercase; letter-spacing: 0.5px;">
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
+                      Click Here!
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              
+              <!-- Fun Fact Box -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="background: linear-gradient(135deg, #DBEAFE 0%, #E0E7FF 100%); border-radius: 12px; padding: 20px; margin: 20px 0;">
+                <tr>
+                  <td style="text-align: center;">
+                    <p style="color: #1E40AF; margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                      Pro Tip: Save this email for quick access later!
+                    </p>
+                  </td>
+                </tr>
+              </table>
+              
+              <p style="color: #6B7280; line-height: 1.6; margin: 20px 0 0; font-size: 13px; text-align: center;">
+                Can't click? Copy & paste: <span style="color: #F59E0B; word-break: break-all;">{{LOGIN_URL}}</span>
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Footer -->
+          <tr>
+            <td style="background: linear-gradient(135deg, #FEF3C7 0%, #FECACA 100%); padding: 24px; text-align: center;">
+              <p style="color: #B91C1C; margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                Hurry! Link expires in {{EXPIRY_TEXT}}
+              </p>
+              <p style="color: #DC2626; margin: 0; font-size: 12px;">
+                Not you? No worries, just delete this email!
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`,
+    text: `Your Magic Link is Ready!
+
+Let's get you signed in!
+
+Click here:
+{{LOGIN_URL}}
+
+Pro Tip: Save this email for quick access later!
+
+Hurry! Link expires in {{EXPIRY_TEXT}}.
+
+Not you? No worries, just delete this email!`
+  }
+};
+const LEGACY_PLACEHOLDER = /<%=\s*([A-Za-z_]+)\s*%>/g;
+const LEGACY_LINK = /<%=\s*URL\s*%>\?loginToken=<%=\s*CODE\s*%>/g;
+const toPlaceholderSyntax = (template) => String(template ?? "").replace(LEGACY_LINK, "{{LOGIN_URL}}").replace(LEGACY_PLACEHOLDER, (_match, name) => `{{${name.toUpperCase()}}}`);
+const getTemplateList = () => Object.entries(EMAIL_TEMPLATES).map(([key, template]) => ({
+  value: key,
+  label: template.name,
+  preview: template.preview
+}));
+const getTemplate = (key) => Object.hasOwn(EMAIL_TEMPLATES, key) ? EMAIL_TEMPLATES[key] : EMAIL_TEMPLATES.modern;
+const DEFAULT_SETTINGS = Object.freeze({
+  createUserIfNotExists: true,
+  expire_period: 3600,
+  confirmationUrl: "",
+  from_name: "",
+  from_email: "",
+  response_email: "",
+  token_length: 32,
+  stays_valid: false,
+  object: "",
+  message_html: "",
+  message_text: "",
+  context_whitelist: [],
+  context_blacklist: ["password", "secret", "apiKey", "token"],
+  user_creation_strategy: "email",
+  verify_email: false,
+  welcome_email: false,
+  use_jwt_token: true,
+  jwt_token_expires_in: "30d",
+  allow_magic_links_on_public_registration: false,
+  store_login_info: true,
+  rate_limit_enabled: true,
+  rate_limit_max_attempts: 5,
+  rate_limit_window_minutes: 15,
+  use_email_designer: false,
+  email_designer_template_id: "",
+  use_magic_mail: false,
+  magic_mail_template_id: "",
+  otp_enabled: false,
+  otp_type: "email",
+  otp_length: 6,
+  otp_expiry: 300,
+  otp_max_attempts: 3,
+  otp_resend_cooldown: 60,
+  mfa_mode: "disabled",
+  mfa_require_totp: false,
+  totp_as_primary_auth: false,
+  totp_issuer: "Magic Link",
+  totp_digits: 6,
+  totp_period: 30,
+  frontend_url: "",
+  frontend_login_path: "/auth/magic-link",
+  passwordlessCompatibility: false
+});
+const REMOVED_KEY_PATTERN = /^(whatsapp_|sms_)/;
+const REMOVED_KEYS = /* @__PURE__ */ new Set(["delivery", "phoneNumber", "phone", "via", "settings"]);
+const FIELD_SECTIONS = Object.freeze({
+  expire_period: "general",
+  token_length: "general",
+  context_whitelist: "general",
+  context_blacklist: "general",
+  frontend_url: "general",
+  frontend_login_path: "general",
+  confirmationUrl: "general",
+  jwt_token_expires_in: "auth",
+  from_name: "email",
+  from_email: "email",
+  response_email: "email",
+  object: "email",
+  message_html: "email",
+  message_text: "email",
+  otp_length: "mfa",
+  otp_expiry: "mfa",
+  otp_max_attempts: "mfa",
+  otp_resend_cooldown: "mfa",
+  totp_issuer: "mfa",
+  totp_period: "mfa",
+  totp_digits: "mfa",
+  mfa_mode: "mfa",
+  rate_limit_max_attempts: "ratelimit",
+  rate_limit_window_minutes: "ratelimit"
+});
+const NUMBER_RANGES = Object.freeze({
+  expire_period: [10, 31536e3],
+  token_length: [22, 128],
+  otp_length: [4, 16],
+  otp_expiry: [30, 86400],
+  otp_max_attempts: [1, 20],
+  otp_resend_cooldown: [0, 86400],
+  rate_limit_max_attempts: [1, 1e3],
+  rate_limit_window_minutes: [1, 10080],
+  totp_period: [15, 300]
+});
+const STRING_LIMITS = Object.freeze({
+  from_name: 200,
+  object: 500,
+  message_html: 1e5,
+  message_text: 5e4,
+  totp_issuer: 128
+});
+const JWT_EXPIRY_PATTERN = /^[1-9]\d{0,5}[mhd]$/;
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const FRONTEND_PATH_PATTERN = /^(\/[A-Za-z0-9._~!$&'()*+,;=:@%/-]*)?$/;
+const LOCAL_HOSTNAMES = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
+const CONTEXT_KEY_MAX = 128;
+const CONTEXT_LIST_MAX = 100;
+const isValidJwtExpiry = (value) => typeof value === "string" && value.length <= 16 && JWT_EXPIRY_PATTERN.test(value);
+const isValidOptionalEmail = (value) => {
+  if (value === void 0 || value === null) return true;
+  if (typeof value !== "string") return false;
+  const address = value.trim();
+  return address === "" || address.length <= 320 && EMAIL_PATTERN.test(address);
+};
+const isValidLinkUrl = (value) => {
+  if (value === void 0 || value === null) return true;
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (trimmed === "") return true;
+  if (trimmed.length > 2048) return false;
+  let parsed;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return false;
+  }
+  if (parsed.username || parsed.password) return false;
+  if (parsed.protocol === "https:") return true;
+  if (parsed.protocol === "http:") {
+    const host = parsed.hostname.toLowerCase();
+    return LOCAL_HOSTNAMES.has(host) || host.endsWith(".localhost");
+  }
+  return false;
+};
+const isValidFrontendPath = (value) => value === void 0 || value === null || typeof value === "string" && value.length <= 256 && FRONTEND_PATH_PATTERN.test(value);
+const parseList = (value) => {
+  const items = Array.isArray(value) ? value : String(value ?? "").split(",");
+  return items.map((item) => String(item).trim()).filter(Boolean);
+};
+const formatList = (value) => typeof value === "string" ? value : parseList(value).join(", ");
+const validateSettings = (settings = {}) => {
+  const errors = {};
+  for (const key of ["frontend_url", "confirmationUrl"]) {
+    if (!isValidLinkUrl(settings[key])) errors[key] = { code: "url" };
+  }
+  if (!isValidFrontendPath(settings.frontend_login_path)) {
+    errors.frontend_login_path = { code: "path" };
+  }
+  if (settings.jwt_token_expires_in !== void 0 && !isValidJwtExpiry(settings.jwt_token_expires_in)) {
+    errors.jwt_token_expires_in = { code: "jwtExpiry" };
+  }
+  for (const key of ["from_email", "response_email"]) {
+    if (!isValidOptionalEmail(settings[key])) errors[key] = { code: "email" };
+  }
+  for (const [key, [min, max]] of Object.entries(NUMBER_RANGES)) {
+    if (!Object.hasOwn(settings, key)) continue;
+    const value = settings[key];
+    if (!Number.isInteger(value) || value < min || value > max) {
+      errors[key] = { code: "range", min, max };
+    }
+  }
+  if (settings.totp_digits !== void 0 && settings.totp_digits !== 6 && settings.totp_digits !== 8) {
+    errors.totp_digits = { code: "digits" };
+  }
+  for (const [key, max] of Object.entries(STRING_LIMITS)) {
+    const value = settings[key];
+    if (typeof value === "string" && value.length > max) errors[key] = { code: "length", max };
+  }
+  for (const key of ["context_whitelist", "context_blacklist"]) {
+    if (settings[key] === void 0) continue;
+    const list = parseList(settings[key]);
+    if (list.length > CONTEXT_LIST_MAX || list.some((item) => item.length > CONTEXT_KEY_MAX)) {
+      errors[key] = { code: "list", max: CONTEXT_LIST_MAX };
+    }
+  }
+  return errors;
+};
+const orderedErrorKeys = (errors) => {
+  const order = Object.keys(FIELD_SECTIONS);
+  return Object.keys(errors).sort((a, b) => {
+    const ia = order.indexOf(a);
+    const ib = order.indexOf(b);
+    return (ia === -1 ? order.length : ia) - (ib === -1 ? order.length : ib);
+  });
+};
+const sanitizeLoadedSettings = (raw) => {
+  const source = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
+  const clean = { ...DEFAULT_SETTINGS };
+  for (const [key, value] of Object.entries(source)) {
+    if (REMOVED_KEY_PATTERN.test(key) || REMOVED_KEYS.has(key)) continue;
+    if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+    clean[key] = value;
+  }
+  clean.otp_type = "email";
+  const mfaMode = resolveMfaMode(clean);
+  clean.mfa_mode = mfaMode;
+  clean.mfa_require_totp = mfaMode === "required";
+  for (const key of ["email_designer_template_id", "magic_mail_template_id"]) {
+    clean[key] = clean[key] === null || clean[key] === void 0 ? "" : String(clean[key]);
+  }
+  return clean;
+};
+const stableStringify = (value) => {
+  if (Array.isArray(value)) return `[${value.map(stableStringify).join(",")}]`;
+  if (value && typeof value === "object") {
+    return `{${Object.keys(value).sort().map((key) => `${JSON.stringify(key)}:${stableStringify(value[key])}`).join(",")}}`;
+  }
+  return JSON.stringify(value);
+};
+const sameValue = (key, a, b) => {
+  if (key === "context_whitelist" || key === "context_blacklist") {
+    return stableStringify(parseList(a)) === stableStringify(parseList(b));
+  }
+  return stableStringify(a) === stableStringify(b);
+};
+const diffSettings = (initial, current) => {
+  if (!initial) return {};
+  const patch = {};
+  const keys = /* @__PURE__ */ new Set([...Object.keys(initial), ...Object.keys(current ?? {})]);
+  for (const key of keys) {
+    if (!sameValue(key, initial[key], current?.[key])) patch[key] = current?.[key];
+  }
+  return patch;
+};
+const isSettingsDirty = (initial, current) => initial !== null && Object.keys(diffSettings(initial, current)).length > 0;
+const buildSavePayload = (initial, current) => {
+  const patch = diffSettings(initial, current);
+  for (const key of ["context_whitelist", "context_blacklist"]) {
+    if (key in patch) patch[key] = parseList(patch[key]);
+  }
+  for (const key of ["frontend_url", "confirmationUrl", "from_email", "response_email"]) {
+    if (typeof patch[key] === "string") patch[key] = patch[key].trim();
+  }
+  for (const key of Object.keys(patch)) {
+    if (REMOVED_KEY_PATTERN.test(key) || REMOVED_KEYS.has(key) || patch[key] === void 0) {
+      delete patch[key];
+    }
+  }
+  return patch;
+};
+const getServerErrorField = (error) => {
+  const message = error?.response?.data?.error?.message ?? error?.response?.data?.message ?? error?.message ?? "";
+  const match = /at '([A-Za-z0-9_]+)(?:\.[^']*)?'/.exec(String(message));
+  return match && match[1] !== "(root)" ? match[1] : null;
+};
+const FIELD_LIST_ERRORS = Object.freeze({
+  "settings.security.forbidden": "securityForbidden",
+  "settings.linkOrigin.notAllowed": "linkOrigin",
+  "settings.mfa.noEnrolledUsers": "mfaNoEnrolled"
+});
+const getServerErrorFields = (error) => {
+  const details = error?.response?.data?.error?.details;
+  const code = FIELD_LIST_ERRORS[details?.key];
+  if (!code) return null;
+  const list = Array.isArray(details.fields) ? details.fields : [];
+  const fields = list.filter(
+    (field) => typeof field === "string" && Object.hasOwn(FIELD_SECTIONS, field)
+  );
+  return { code, fields };
+};
+const MFA_MODES = /* @__PURE__ */ new Set(["disabled", "optional", "required"]);
+const resolveMfaMode = (settings = {}) => {
+  if (settings.mfa_require_totp === true) return "required";
+  return MFA_MODES.has(settings.mfa_mode) ? settings.mfa_mode : "disabled";
+};
+const getAuthMode = (settings = {}) => {
+  if (resolveMfaMode(settings) !== "disabled") return "totp";
+  if (settings.otp_enabled === true) return "email-otp";
+  return "magic-link";
+};
+const AUTH_MODES = Object.freeze(["magic-link", "email-otp", "totp"]);
+const applyAuthMode = (mode, settings = {}) => {
+  if (mode === "email-otp") {
+    return { otp_enabled: true, mfa_mode: "disabled", mfa_require_totp: false };
+  }
+  if (mode === "totp") {
+    const current = resolveMfaMode(settings);
+    const policy = current === "disabled" ? "optional" : current;
+    return { otp_enabled: false, mfa_mode: policy, mfa_require_totp: policy === "required" };
+  }
+  return { otp_enabled: false, mfa_mode: "disabled", mfa_require_totp: false };
+};
+const applyTotpPolicy = (policy) => policy === "required" ? { mfa_mode: "required", mfa_require_totp: true } : { mfa_mode: "optional", mfa_require_totp: false };
+const parseEnrollmentSummary = (payload) => {
+  const data = payload?.data && typeof payload.data === "object" ? payload.data : payload;
+  const enrolled = Number(data?.enrolled);
+  return Number.isInteger(enrolled) && enrolled >= 0 ? { enrolled } : null;
+};
+const canRequireTotp = (summary) => {
+  if (!summary) return { allowed: true, reason: "unknown" };
+  if (summary.enrolled === 0) return { allowed: false, reason: "none-enrolled" };
+  return { allowed: true, reason: "some-enrolled" };
+};
+const joinUrl = (base, path) => {
+  const cleanBase = String(base || "").replace(/\/+$/, "");
+  const cleanPath = String(path || "").trim();
+  if (!cleanPath) return cleanBase;
+  return `${cleanBase}/${cleanPath.replace(/^\/+/, "")}`;
+};
+const buildLoginUrlPreview = (settings = {}, origin = "http://localhost:1337") => {
+  const sample = "loginToken=EXAMPLE";
+  const withToken = (base) => {
+    try {
+      const url = new URL(base);
+      url.search = url.search ? `${url.search.slice(1)}&${sample}` : sample;
+      return url.toString();
+    } catch {
+      return `${base}?${sample}`;
+    }
+  };
+  const frontend = typeof settings.frontend_url === "string" ? settings.frontend_url.trim() : "";
+  if (frontend && isValidLinkUrl(frontend)) {
+    return {
+      url: withToken(joinUrl(frontend, settings.frontend_login_path || "")),
+      source: "frontend"
+    };
+  }
+  const confirmation = typeof settings.confirmationUrl === "string" ? settings.confirmationUrl.trim() : "";
+  if (confirmation && isValidLinkUrl(confirmation)) {
+    return { url: withToken(confirmation), source: "confirmation" };
+  }
+  return { url: withToken(joinUrl(joinUrl(origin, "/api"), "/magic-link/login")), source: "api" };
+};
+const HTML_ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+const escapeHtml = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => HTML_ESCAPES[ch]);
+const buildDefaultTemplates = (copy) => {
+  const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body style="font-family: Arial, sans-serif; padding: 24px; color: #1F2937;">
+  <h2>${escapeHtml(copy.heading)}</h2>
+  <p>${escapeHtml(copy.intro)}</p>
+  <p><a href="{{LOGIN_URL}}">${escapeHtml(copy.button)}</a></p>
+  <p style="color: #4B5563; font-size: 14px;">${escapeHtml(copy.expiry)}</p>
+  <p style="color: #4B5563; font-size: 14px;">${escapeHtml(copy.ignore)}</p>
+</body>
+</html>`;
+  const text = `${copy.heading}
+
+${copy.intro}
+
+{{LOGIN_URL}}
+
+${copy.expiry}
+
+${copy.ignore}`;
+  return { html, text };
+};
+const isCustomTemplate = (current, known, normalize = (value) => value) => {
+  const value = normalize(String(current ?? "")).trim();
+  if (value === "") return false;
+  return !known.some((template) => normalize(String(template ?? "")).trim() === value);
+};
+const templateStats = (value) => {
+  const text = String(value ?? "");
+  return { lines: text === "" ? 0 : text.split("\n").length, chars: text.length };
+};
+const fieldId = (key) => `magic-link-settings-${String(key).replace(/[^A-Za-z0-9_-]/g, "-")}`;
+const SectionBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(6)};
+  padding: ${space(6)};
+
+  @media (max-width: 480px) {
+    padding: ${space(4)};
+  }
+`;
+const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(4)};
+  padding: ${space(6)};
+  border-radius: ${theme.borderRadius.md};
+  background: ${color("neutral100")};
+  border: 1px solid ${color("neutral150")};
+
+  @media (max-width: 480px) {
+    padding: ${space(4)};
+  }
+`;
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(4)};
+  min-width: 0;
+  padding: ${space(6)};
+  border-radius: ${theme.borderRadius.lg};
+  background: ${color("neutral0")};
+  border: 1px solid ${color("neutral200")};
+
+  @media (max-width: 480px) {
+    padding: ${space(4)};
+  }
+`;
+const CardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, ${(p) => p.$min ?? "220px"}), 1fr));
+  gap: ${(p) => p.$gap === 6 ? space(6) : space(4)};
+  align-items: stretch;
+`;
+const FieldGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${(p) => p.$columns ?? 2}, minmax(0, 1fr));
+  gap: ${space(6)};
+  align-items: start;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(${(p) => Math.min(p.$columns ?? 2, 2)}, minmax(0, 1fr));
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`;
+const GroupTitle = ({ title, subtitle, align = "left", id }) => /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: align === "center" ? "center" : "flex-start", children: [
+  /* @__PURE__ */ jsx(
+    SubsectionHeading,
+    {
+      tag: "h4",
+      id,
+      variant: "sigma",
+      textColor: "neutral700",
+      style: align === "center" ? { textAlign: "center" } : void 0,
+      children: title
+    }
+  ),
+  subtitle ? /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "pi",
+      textColor: "neutral600",
+      style: align === "center" ? { textAlign: "center" } : void 0,
+      children: subtitle
+    }
+  ) : null
+] });
+const NoteBox = styled.div`
+  display: flex;
+  gap: ${space(2)};
+  align-items: flex-start;
+  padding: ${(p) => p.$compact ? `${space(2)(p)} ${space(3)(p)}` : space(4)(p)};
+  border-radius: ${theme.borderRadius.md};
+  background: ${(p) => tint[p.$tone].bg(p)};
+  border: 1px solid ${(p) => tint[p.$tone].border(p)};
+  color: ${(p) => tint[p.$tone].fg(p)};
+  font-size: ${fontSize(1)};
+  line-height: 1.5;
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  > svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
+  }
+
+  > svg path {
+    fill: currentColor;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+`;
+const Note = ({ tone = "primary", icon: Icon, title, children, compact = false, role }) => /* @__PURE__ */ jsxs(NoteBox, { $tone: tone, $compact: compact, role, children: [
+  Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", focusable: "false" }) : null,
+  /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { minWidth: 0 }, children: [
+    title ? /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { color: "inherit" }, children: title }) : null,
+    children ? /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: "inherit" }, tag: "div", children }) : null
+  ] })
+] });
+const BulletList = styled.ul`
+  margin: 0;
+  padding-left: ${space(4)};
+  list-style: disc;
+
+  li + li {
+    margin-top: ${space(1)};
+  }
+`;
+const StepList = styled.ol`
+  margin: 0;
+  padding-left: ${space(4)};
+  list-style: decimal;
+
+  li + li {
+    margin-top: ${space(1)};
+  }
+`;
+const Mono = styled.code`
+  font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: ${fontSize(1)};
+  overflow-wrap: anywhere;
+  word-break: break-all;
+`;
+const SettingField = ({ name, label, hint, error, required = false, children }) => /* @__PURE__ */ jsxs(Field.Root, { name, id: fieldId(name), hint, error, required, children: [
+  /* @__PURE__ */ jsx(Field.Label, { children: label }),
+  children,
+  /* @__PURE__ */ jsx(Field.Hint, {}),
+  /* @__PURE__ */ jsx(Field.Error, {})
+] });
+const ToggleCardLabel = styled.label`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${space(3)};
+  height: 100%;
+  min-width: 0;
+  padding: ${space(6)} ${space(4)} ${space(4)};
+  border-radius: ${theme.borderRadius.md};
+  text-align: center;
+  user-select: none;
+  cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
+  background: ${(p) => p.$active ? "rgba(22, 163, 74, 0.08)" : "rgba(128, 128, 128, 0.06)"};
+  border: 2px solid ${(p) => p.$active ? "rgba(22, 163, 74, 0.4)" : color("neutral200")(p)};
+  box-shadow: ${(p) => p.$active ? "0 4px 12px rgba(34, 197, 94, 0.15)" : theme.shadows.sm};
+  transition:
+    border-color ${theme.transitions.fast},
+    box-shadow ${theme.transitions.fast},
+    transform ${theme.transitions.fast};
+
+  ${(p) => !p.$disabled && css`
+      &:hover {
+        transform: translateY(-2px);
+        border-color: ${p.$active ? "rgba(22, 163, 74, 0.6)" : color("neutral300")(p)};
+      }
+    `}
+
+  &:focus-within {
+    border-color: ${byScheme(brand.primary, "#7DD3FC")};
+  }
+
+  ${reducedMotion}
+`;
+const StatusPill = styled.span`
+  position: absolute;
+  top: ${space(2)};
+  right: ${space(2)};
+  padding: 2px ${space(2)};
+  border-radius: ${theme.borderRadius.sm};
+  font-size: ${fontSize(0)};
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  line-height: 1.6;
+  background: ${(p) => p.$active ? brand.success : color("neutral150")(p)};
+  color: ${(p) => p.$active ? brand.onFill : color("neutral700")(p)};
+`;
+const ToggleCard = ({
+  title,
+  description,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  statusOn,
+  statusOff,
+  children
+}) => {
+  const id = useId();
+  const switchId = `${id}-switch`;
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  const isOn = Boolean(checked);
+  return /* @__PURE__ */ jsxs(ToggleCardLabel, { htmlFor: switchId, $active: isOn, $disabled: disabled, children: [
+    /* @__PURE__ */ jsx(StatusPill, { $active: isOn, "aria-hidden": "true", children: isOn ? statusOn : statusOff }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id: switchId,
+        checked: isOn,
+        disabled,
+        onCheckedChange: (value) => onCheckedChange(Boolean(value)),
+        "aria-labelledby": titleId,
+        "aria-describedby": description ? descriptionId : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "omega", fontWeight: "bold", textColor: "neutral800", children: title }),
+      description ? /* @__PURE__ */ jsx(Typography, { id: descriptionId, variant: "pi", textColor: "neutral600", children: description }) : null
+    ] }),
+    children
+  ] });
+};
+const SwitchRow = ({
+  title,
+  description,
+  checked,
+  onCheckedChange,
+  disabled = false,
+  icon
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "flex-start", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { minWidth: 0, flex: 1 }, children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        icon,
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            tag: "label",
+            htmlFor: `${id}-switch`,
+            id: `${id}-title`,
+            variant: "omega",
+            fontWeight: "bold",
+            textColor: "neutral800",
+            children: title
+          }
+        )
+      ] }),
+      description ? /* @__PURE__ */ jsx(Typography, { id: `${id}-description`, variant: "pi", textColor: "neutral600", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        id: `${id}-switch`,
+        checked: Boolean(checked),
+        disabled,
+        onCheckedChange: (value) => onCheckedChange(Boolean(value)),
+        "aria-labelledby": `${id}-title`,
+        "aria-describedby": description ? `${id}-description` : void 0
+      }
+    )
+  ] });
+};
+const EditorFrame = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: ${theme.borderRadius.md};
+  border: 1px solid ${color("neutral200")};
+  overflow: hidden;
+`;
+const EditorBar = styled.div`
+  padding: ${space(2)} ${space(3)};
+  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
+  font-size: ${fontSize(1)};
+  background: ${(p) => p.$dark ? "#2D2D2D" : color("neutral150")(p)};
+  color: ${(p) => p.$dark ? "#C8C8C8" : color("neutral700")(p)};
+  border-bottom: 1px solid ${(p) => p.$dark ? "#3C3C3C" : color("neutral200")(p)};
+`;
+const EditorTextarea = styled.textarea`
+  display: block;
+  width: 100%;
+  min-height: ${(p) => p.$height};
+  height: ${(p) => p.$height};
+  margin: 0;
+  padding: ${space(4)};
+  border: none;
+  resize: vertical;
+  box-sizing: border-box;
+  font-family: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
+  font-size: ${fontSize(2)};
+  line-height: 1.7;
+  /* The HTML editor keeps its dark code-editor look in both schemes. */
+  background: ${(p) => p.$dark ? "#1E1E1E" : color("neutral100")(p)};
+  color: ${(p) => p.$dark ? "#D4D4D4" : color("neutral800")(p)};
+
+  &:focus-visible {
+    outline: 2px solid ${byScheme(brand.primary, "#7DD3FC")};
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.8;
+  }
+
+  @media (max-width: 768px) {
+    height: ${(p) => p.$mobileHeight ?? p.$height};
+    min-height: ${(p) => p.$mobileHeight ?? p.$height};
+  }
+`;
+const CodeEditor = ({
+  id,
+  labelledBy,
+  describedBy,
+  filename,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  dark = false,
+  height = "480px",
+  mobileHeight = "320px"
+}) => /* @__PURE__ */ jsxs(EditorFrame, { children: [
+  /* @__PURE__ */ jsx(EditorBar, { $dark: dark, "aria-hidden": "true", children: filename }),
+  /* @__PURE__ */ jsx(
+    EditorTextarea,
+    {
+      id,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      value: value ?? "",
+      onChange: (event) => onChange(event.target.value),
+      placeholder,
+      disabled,
+      spellCheck: false,
+      $dark: dark,
+      $height: height,
+      $mobileHeight: mobileHeight
+    }
+  )
+] });
+const Tile = styled.button`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${space(2)};
+  /* A button shrinks to its content by default; fill the grid cell like a card. */
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  padding: ${space(4)};
+  border-radius: ${theme.borderRadius.md};
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  background: ${(p) => p.$active ? "rgba(14, 165, 233, 0.08)" : color("neutral0")(p)};
+  border: 2px solid
+    ${(p) => p.$active ? byScheme("rgba(2, 132, 199, 0.6)", "#38BDF8")(p) : color("neutral200")(p)};
+  box-shadow: ${(p) => p.$active ? "0 8px 20px rgba(2, 132, 199, 0.2)" : theme.shadows.sm};
+  transition:
+    border-color ${theme.transitions.fast},
+    box-shadow ${theme.transitions.fast},
+    transform ${theme.transitions.fast};
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    border-color: ${byScheme("rgba(2, 132, 199, 0.6)", "#38BDF8")};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${byScheme(brand.primary, "#7DD3FC")};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  ${reducedMotion}
+`;
+const StatBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${space(1)};
+  height: 100%;
+  padding: ${space(4)};
+  border-radius: ${theme.borderRadius.md};
+  text-align: center;
+  background: ${(p) => p.$tone === "neutral" ? color("neutral100")(p) : tint[p.$tone].bg(p)};
+  border: 1px solid
+    ${(p) => p.$tone === "neutral" ? color("neutral200")(p) : tint[p.$tone].border(p)};
+`;
+const StatValue = styled.span`
+  font-size: ${fontSize(5)};
+  font-weight: 700;
+  line-height: 1.2;
+  color: ${(p) => p.$tone === "neutral" ? color("neutral800")(p) : tint[p.$tone].fg(p)};
+`;
+const Stat = ({ value, label, tone = "neutral" }) => /* @__PURE__ */ jsxs(StatBox, { $tone: tone, children: [
+  /* @__PURE__ */ jsx(StatValue, { $tone: tone, children: value }),
+  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: label })
+] });
+const IconBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  border-radius: ${theme.borderRadius.lg};
+  background: ${(p) => typeof p.$background === "function" ? p.$background(p) : p.$background};
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg path {
+    fill: ${(p) => typeof p.$color === "function" ? p.$color(p) : p.$color};
+  }
+`;
+const FOLLOW_ADMIN = "admin";
+const LANGUAGE_LABELS = {
+  en: "English",
+  de: "Deutsch",
+  fr: "Français",
+  es: "Español",
+  pt: "Português"
+};
+const GeneralSection = ({ settings, update, disabled, errorFor, statusOn, statusOff }) => {
+  const { t } = useMagicLinkIntl();
+  const { language, isFollowingAdmin, changeLanguage, languages } = usePluginLanguage();
+  const origin = typeof window === "undefined" ? void 0 : window.location.origin;
+  const preview = buildLoginUrlPreview(settings, origin);
+  const previewSource = {
+    frontend: t(
+      "settings.links.preview.source.frontend",
+      "Built from the frontend URL and login path."
+    ),
+    confirmation: t(
+      "settings.links.preview.source.confirmation",
+      "Built from the confirmation URL."
+    ),
+    api: t(
+      "settings.links.preview.source.api",
+      "No valid frontend or confirmation URL is set, so the link opens the Strapi API login route."
+    )
+  }[preview.source];
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(FieldGrid, { $columns: 2, children: /* @__PURE__ */ jsx(
+      SettingField,
+      {
+        name: "ui_language",
+        label: t("settings.language.label", "Interface Language"),
+        hint: t(
+          "settings.language.hint",
+          "Language of the Magic Link admin pages in this browser. It applies immediately."
+        ),
+        children: /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: isFollowingAdmin ? FOLLOW_ADMIN : language,
+            onChange: (value) => changeLanguage(value === FOLLOW_ADMIN ? null : value),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: FOLLOW_ADMIN, children: t("common.language.followAdmin", "Same as admin interface") }),
+              languages.map((code) => /* @__PURE__ */ jsx(SingleSelectOption, { value: code, children: LANGUAGE_LABELS[code] ?? code }, code))
+            ]
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          align: "center",
+          title: t("settings.features.title", "MAIN FEATURES"),
+          subtitle: t(
+            "settings.features.subtitle",
+            "Enable or disable the main features of the Magic Link plugin"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(CardGrid, { $min: "240px", children: [
+        /* @__PURE__ */ jsx(
+          ToggleCard,
+          {
+            title: t("settings.feature.createUser.title", "Automatically Create Users"),
+            description: t(
+              "settings.feature.createUser.description",
+              "Creates an account when the email address is unknown. Follows the Users & Permissions registration and email confirmation settings."
+            ),
+            checked: settings.createUserIfNotExists,
+            onCheckedChange: (checked) => update("createUserIfNotExists", checked),
+            disabled,
+            statusOn,
+            statusOff
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleCard,
+          {
+            title: t("settings.feature.staysValid.title", "Reusable links"),
+            description: t(
+              "settings.feature.staysValid.description",
+              "A link can be used more than once until it expires. Less secure; keep it off unless users need to open the link on several devices."
+            ),
+            checked: settings.stays_valid,
+            onCheckedChange: (checked) => update("stays_valid", checked),
+            disabled,
+            statusOn,
+            statusOff
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(GroupTitle, { title: t("settings.time.title", "Link lifetime and length") }),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "expire_period",
+          label: t("settings.expire.label", "Link lifetime (seconds)"),
+          hint: t(
+            "settings.expire.hint",
+            "Recommended: 3600 seconds (1 hour). Allowed: 10 to 31,536,000."
+          ),
+          error: errorFor("expire_period"),
+          required: true,
+          children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.expire_period,
+              onValueChange: (value) => update("expire_period", value),
+              placeholder: "3600",
+              disabled,
+              min: 10,
+              step: 60
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "token_length",
+          label: t("settings.tokenLength.label", "Token length (characters)"),
+          hint: t(
+            "settings.tokenLength.hint",
+            "Longer tokens are harder to guess. Allowed: 22 to 128. Current: {length} characters.",
+            { length: settings.token_length ?? "-" }
+          ),
+          error: errorFor("token_length"),
+          required: true,
+          children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.token_length,
+              onValueChange: (value) => update("token_length", value),
+              placeholder: "32",
+              disabled,
+              min: 22,
+              max: 128
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      GroupTitle,
+      {
+        title: t("settings.context.title", "Context field policy"),
+        subtitle: t(
+          "settings.context.subtitle",
+          "Applies to every login link, whether your frontend or an administrator creates it. Reserved fields such as userId or otpVerified are always removed."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "context_whitelist",
+          label: t("settings.context.whitelist.label", "Allowed fields"),
+          hint: t(
+            "settings.context.whitelist.hint",
+            "Comma-separated. When set, only these fields are kept. Leave empty to allow all fields that are not blocked."
+          ),
+          error: errorFor("context_whitelist"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: formatList(settings.context_whitelist),
+              onChange: (event) => update("context_whitelist", event.target.value),
+              onBlur: () => update("context_whitelist", parseList(settings.context_whitelist)),
+              placeholder: "redirectTo, role, source",
+              disabled
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "context_blacklist",
+          label: t("settings.context.blacklist.label", "Blocked fields"),
+          hint: t(
+            "settings.context.blacklist.hint",
+            "Comma-separated. These fields are always removed, even when they are also allowed."
+          ),
+          error: errorFor("context_blacklist"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: formatList(settings.context_blacklist),
+              onChange: (event) => update("context_blacklist", event.target.value),
+              onBlur: () => update("context_blacklist", parseList(settings.context_blacklist)),
+              placeholder: "password, secret, apiKey, token",
+              disabled
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      GroupTitle,
+      {
+        title: t("settings.links.title", "Login link URLs"),
+        subtitle: t(
+          "settings.links.subtitle",
+          "Use https. http is only accepted for localhost. The frontend URL wins over the confirmation URL."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "frontend_url",
+          label: t("settings.links.frontendUrl.label", "Frontend base URL"),
+          hint: t(
+            "settings.links.frontendUrl.hint",
+            "Base URL of your frontend app (React, Vue, mobile deep link page). Leave empty to use the confirmation URL."
+          ),
+          error: errorFor("frontend_url"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "url",
+              inputMode: "url",
+              value: settings.frontend_url ?? "",
+              onChange: (event) => update("frontend_url", event.target.value),
+              placeholder: "https://app.example.com",
+              disabled
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "frontend_login_path",
+          label: t("settings.links.frontendPath.label", "Frontend login path"),
+          hint: t(
+            "settings.links.frontendPath.hint",
+            "Path of the page that receives the link, appended to the frontend URL. Starts with /."
+          ),
+          error: errorFor("frontend_login_path"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: settings.frontend_login_path ?? "",
+              onChange: (event) => update("frontend_login_path", event.target.value),
+              placeholder: "/auth/magic-link",
+              disabled
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      SettingField,
+      {
+        name: "confirmationUrl",
+        label: t("settings.confirmationUrl.label", "Confirmation URL"),
+        hint: t(
+          "settings.confirmationUrl.hint",
+          "Full URL of the page that receives the link when no frontend URL is set."
+        ),
+        error: errorFor("confirmationUrl"),
+        children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "url",
+            inputMode: "url",
+            value: settings.confirmationUrl ?? "",
+            onChange: (event) => update("confirmationUrl", event.target.value),
+            placeholder: "https://app.example.com/auth/magic-link",
+            disabled
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Note,
+      {
+        tone: "primary",
+        icon: Link,
+        title: t("settings.links.preview.title", "Resulting login link"),
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "p", style: { color: "inherit", margin: 0 }, children: /* @__PURE__ */ jsx(Mono, { children: preview.url }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", tag: "p", style: { color: "inherit", margin: 0 }, children: previewSource })
+        ]
+      }
+    )
+  ] });
+};
+const AuthSection = ({ settings, update, disabled, errorFor, statusOn, statusOff }) => {
+  const { t } = useMagicLinkIntl();
+  const toggles = [
+    {
+      key: "verify_email",
+      title: t("settings.auth.verifyEmail.title", "Email Verification"),
+      description: t(
+        "settings.auth.verifyEmail.description",
+        "Users must confirm their email address before they can sign in."
+      )
+    },
+    {
+      key: "welcome_email",
+      title: t("settings.auth.welcomeEmail.title", "Welcome Email"),
+      description: t(
+        "settings.auth.welcomeEmail.description",
+        "Sends a welcome email to newly created users."
+      )
+    },
+    {
+      key: "use_jwt_token",
+      title: t("settings.auth.useJwt.title", "Issue a JWT"),
+      description: t(
+        "settings.auth.useJwt.description",
+        "Returns a Users & Permissions JWT after login, like the native login. Recommended for SPAs and mobile apps."
+      )
+    },
+    {
+      key: "store_login_info",
+      title: t("settings.auth.storeLoginInfo.title", "Store Login Data"),
+      description: t(
+        "settings.auth.storeLoginInfo.description",
+        "Stores the IP address and browser of each login for security monitoring."
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          align: "center",
+          title: t("settings.auth.options.title", "AUTHENTICATION OPTIONS"),
+          subtitle: t(
+            "settings.auth.options.subtitle",
+            "Configure how users are authenticated and managed"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(CardGrid, { $min: "200px", children: toggles.map((toggle) => /* @__PURE__ */ jsx(
+        ToggleCard,
+        {
+          title: toggle.title,
+          description: toggle.description,
+          checked: settings[toggle.key],
+          onCheckedChange: (checked) => update(toggle.key, checked),
+          disabled,
+          statusOn,
+          statusOff
+        },
+        toggle.key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(GroupTitle, { title: t("settings.auth.management.title", "User management and sessions") }),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "user_creation_strategy",
+          label: t("settings.auth.strategy.label", "User Creation Strategy"),
+          hint: t(
+            "settings.auth.strategy.hint",
+            "Used when an administrator creates a link for an unknown email address."
+          ),
+          children: /* @__PURE__ */ jsxs(
+            SingleSelect,
+            {
+              value: settings.user_creation_strategy,
+              onChange: (value) => update("user_creation_strategy", value),
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(SingleSelectOption, { value: "email", children: t(
+                  "settings.auth.strategy.email",
+                  "Email only: the account is created with the email address"
+                ) }),
+                /* @__PURE__ */ jsx(SingleSelectOption, { value: "emailUsername", children: t(
+                  "settings.auth.strategy.emailUsername",
+                  "Email and username: the username is generated from the email address"
+                ) }),
+                /* @__PURE__ */ jsx(SingleSelectOption, { value: "manual", children: t(
+                  "settings.auth.strategy.manual",
+                  "Manual: no automatic creation, users must exist"
+                ) })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "jwt_token_expires_in",
+          label: t("settings.auth.jwtExpiration.label", "JWT lifetime"),
+          hint: t(
+            "settings.auth.jwtExpiration.hint",
+            "A number followed by m, h or d, such as 15m, 1h, 7d or 30d. Revoked tokens stay blocked until they expire."
+          ),
+          error: errorFor("jwt_token_expires_in"),
+          required: true,
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: settings.jwt_token_expires_in ?? "",
+              onChange: (event) => update("jwt_token_expires_in", event.target.value.trim()),
+              placeholder: "30d",
+              disabled,
+              maxLength: 16
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+const ModeCard = styled.button`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${space(3)};
+  height: 100%;
+  min-width: 0;
+  padding: ${space(6)} ${space(4)} ${space(4)};
+  border-radius: ${theme.borderRadius.md};
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: ${(p) => p.$active ? "rgba(22, 163, 74, 0.08)" : "rgba(128, 128, 128, 0.06)"};
+  border: 2px solid ${(p) => p.$active ? "rgba(22, 163, 74, 0.5)" : color("neutral200")(p)};
+  box-shadow: ${(p) => p.$active ? "0 4px 12px rgba(34, 197, 94, 0.15)" : theme.shadows.sm};
+  transition:
+    border-color ${theme.transitions.fast},
+    box-shadow ${theme.transitions.fast},
+    transform ${theme.transitions.fast};
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    border-color: ${(p) => p.$active ? "rgba(22, 163, 74, 0.7)" : color("neutral300")(p)};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${byScheme(brand.primary, "#7DD3FC")};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  ${reducedMotion}
+`;
+const ModePill = styled.span`
+  position: absolute;
+  top: ${space(2)};
+  right: ${space(2)};
+  padding: 2px ${space(2)};
+  border-radius: ${theme.borderRadius.sm};
+  font-size: ${fontSize(0)};
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  line-height: 1.6;
+  background: ${(p) => p.$active ? brand.success : color("neutral150")(p)};
+  color: ${(p) => p.$active ? brand.onFill : color("neutral700")(p)};
+`;
+const FeatureList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+
+  li {
+    display: flex;
+    gap: ${space(2)};
+    align-items: center;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+  }
+
+  svg path {
+    fill: ${(p) => typeof p.$accent === "function" ? p.$accent(p) : p.$accent};
+  }
+`;
+const CardFooter = styled.div`
+  margin-top: auto;
+`;
+const MfaSection = ({
+  settings,
+  update,
+  patch,
+  disabled,
+  errorFor,
+  enrollment,
+  savedMfaMode,
+  statusOn,
+  statusOff
+}) => {
+  const { t } = useMagicLinkIntl();
+  const id = useId();
+  const cardRefs = useRef([]);
+  const [confirmRequired, setConfirmRequired] = useState(false);
+  const mode = getAuthMode(settings);
+  const mfaMode = resolveMfaMode(settings);
+  const requireCheck = canRequireTotp(enrollment.status === "ready" ? enrollment.summary : null);
+  const enrolled = enrollment.summary?.enrolled;
+  const modes = {
+    "magic-link": {
+      icon: Link,
+      accent: accent.primary,
+      background: "rgba(2, 132, 199, 0.12)",
+      title: t("settings.mfa.mode.magicLink.title", "Magic link only"),
+      description: t(
+        "settings.mfa.mode.magicLink.description",
+        "One-click sign-in by email. Fast and easy to use."
+      ),
+      features: [
+        t("settings.mfa.mode.magicLink.feature1", "No passwords"),
+        t("settings.mfa.mode.magicLink.feature2", "Fast sign-in"),
+        t("settings.mfa.mode.magicLink.feature3", "Works on every device")
+      ],
+      badge: t("settings.mfa.mode.magicLink.badge", "Fast")
+    },
+    "email-otp": {
+      icon: Mail,
+      accent: accent.secondary,
+      background: "rgba(124, 58, 237, 0.1)",
+      title: t("settings.mfa.mode.emailOtp.title", "Magic link + email code"),
+      description: t(
+        "settings.mfa.mode.emailOtp.description",
+        "After opening the link, users enter a one-time code sent by email."
+      ),
+      features: [
+        t("settings.mfa.mode.emailOtp.feature1", "Code sent by email"),
+        t("settings.mfa.mode.emailOtp.feature2", "Configurable code length"),
+        t("settings.mfa.mode.emailOtp.feature3", "Configurable lifetime")
+      ],
+      badge: t("settings.mfa.mode.emailOtp.badge", "Stronger")
+    },
+    totp: {
+      icon: Lock,
+      accent: accent.warning,
+      background: "rgba(217, 119, 6, 0.1)",
+      title: t("settings.mfa.mode.totp.title", "Magic link + authenticator app"),
+      description: t(
+        "settings.mfa.mode.totp.description",
+        "After opening the link, users enter a code from an authenticator app such as Google Authenticator or Authy."
+      ),
+      features: [
+        t("settings.mfa.mode.totp.feature1", "Authenticator app codes"),
+        t("settings.mfa.mode.totp.feature2", "Set up by QR code"),
+        t("settings.mfa.mode.totp.feature3", "Codes rotate every 30 seconds")
+      ],
+      badge: t("settings.mfa.mode.totp.badge", "Strongest")
+    }
+  };
+  const selectMode = (next) => {
+    if (disabled || next === mode) return;
+    patch(applyAuthMode(next, settings));
+  };
+  const handleKeyDown = (event, index) => {
+    const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+    let nextIndex = null;
+    if (event.key in keys)
+      nextIndex = (index + keys[event.key] + AUTH_MODES.length) % AUTH_MODES.length;
+    if (event.key === "Home") nextIndex = 0;
+    if (event.key === "End") nextIndex = AUTH_MODES.length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    selectMode(AUTH_MODES[nextIndex]);
+    cardRefs.current[nextIndex]?.focus();
+  };
+  const handlePolicyChange = (value) => {
+    if (disabled || value === mfaMode) return;
+    if (value === "required") {
+      if (!requireCheck.allowed) return;
+      setConfirmRequired(true);
+      return;
+    }
+    patch(applyTotpPolicy("optional"));
+  };
+  const enrollmentText = (() => {
+    if (enrollment.status === "loading") {
+      return t(
+        "settings.mfa.enrollment.loading",
+        "Checking how many users have set up an authenticator app..."
+      );
+    }
+    if (enrollment.status !== "ready") {
+      return t(
+        "settings.mfa.enrollment.unavailable",
+        "The number of users with an authenticator app could not be determined."
+      );
+    }
+    if (enrolled === 0) {
+      return t("settings.mfa.enrollment.none", "No user has set up an authenticator app yet.");
+    }
+    return t(
+      "settings.mfa.enrollment.count",
+      "{count, plural, one {# user has} other {# users have}} set up an authenticator app.",
+      { count: enrolled }
+    );
+  })();
+  const savedLockout = savedMfaMode === "required" && enrollment.status === "ready" && enrolled === 0;
+  const emailOtpSteps = [
+    t("settings.mfa.otp.step1", "The user opens the magic link from the email."),
+    t("settings.mfa.otp.step2", "Your app shows the code entry page."),
+    t(
+      "settings.mfa.otp.step3",
+      "The user enters the {length}-digit code sent to their email address.",
+      {
+        length: settings.otp_length ?? 6
+      }
+    ),
+    t("settings.mfa.otp.step4", "After a correct code, the user is signed in.")
+  ];
+  const summary = [];
+  if (mode === "magic-link") {
+    summary.push({
+      icon: Link,
+      text: t("settings.mfa.summary.magicLink", "Users sign in with the magic link only.")
+    });
+  }
+  if (mode === "email-otp") {
+    summary.push({
+      icon: Mail,
+      text: t(
+        "settings.mfa.summary.emailOtp",
+        "Users open the magic link, then enter the code from the email."
+      )
+    });
+  }
+  if (mode === "totp") {
+    summary.push({
+      icon: Lock,
+      text: mfaMode === "required" ? t(
+        "settings.mfa.summary.totpRequired",
+        "Users open the magic link, then enter a code from their authenticator app. Users without an app cannot sign in."
+      ) : t(
+        "settings.mfa.summary.totpOptional",
+        "Users open the magic link. Users who set up an authenticator app must also enter its code."
+      )
+    });
+  }
+  if (settings.totp_as_primary_auth) {
+    summary.push({
+      icon: Lightning,
+      text: t(
+        "settings.mfa.summary.totpOnly",
+        "Users with an authenticator app can also sign in with email and code, without waiting for an email."
+      )
+    });
+  }
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    /* @__PURE__ */ jsx(Note, { tone: "primary", icon: Information, children: t(
+      "settings.mfa.intro",
+      "Choose how users sign in. The selection takes effect when you save. Email codes and authenticator apps are separate modes."
+    ) }),
+    savedLockout ? /* @__PURE__ */ jsx(
+      Note,
+      {
+        tone: "danger",
+        icon: WarningCircle,
+        role: "alert",
+        title: t("settings.mfa.lockout.title", "Every sign-in currently fails"),
+        children: t(
+          "settings.mfa.lockout.body",
+          'The saved policy requires an authenticator app, but no user has set one up. Choose "Users who set up an app" or another mode and save.'
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(GroupTitle, { id: `${id}-modes`, title: t("settings.mfa.modes.title", "Sign-in mode") }),
+    /* @__PURE__ */ jsx(CardGrid, { $min: "240px", role: "radiogroup", "aria-labelledby": `${id}-modes`, children: AUTH_MODES.map((key, index) => {
+      const item = modes[key];
+      const Icon = item.icon;
+      const isActive = mode === key;
+      return /* @__PURE__ */ jsxs(
+        ModeCard,
+        {
+          ref: (node) => {
+            cardRefs.current[index] = node;
+          },
+          type: "button",
+          role: "radio",
+          "aria-checked": isActive,
+          "aria-labelledby": `${id}-${key}-title`,
+          "aria-describedby": `${id}-${key}-description`,
+          tabIndex: isActive ? 0 : -1,
+          $active: isActive,
+          disabled,
+          onClick: () => selectMode(key),
+          onKeyDown: (event) => handleKeyDown(event, index),
+          children: [
+            /* @__PURE__ */ jsx(ModePill, { $active: isActive, "aria-hidden": "true", children: isActive ? statusOn : statusOff }),
+            /* @__PURE__ */ jsx(IconBadge, { $background: item.background, $color: item.accent, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  id: `${id}-${key}-title`,
+                  variant: "omega",
+                  fontWeight: "bold",
+                  textColor: "neutral800",
+                  children: item.title
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { id: `${id}-${key}-description`, variant: "pi", textColor: "neutral600", children: item.description })
+            ] }),
+            /* @__PURE__ */ jsx(FeatureList, { $accent: item.accent, children: item.features.map((feature) => /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: feature })
+            ] }, feature)) }),
+            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Badge, { children: item.badge }) })
+          ]
+        },
+        key
+      );
+    }) }),
+    mode === "email-otp" ? /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          title: t("settings.mfa.otp.title", "Email code settings"),
+          subtitle: t(
+            "settings.mfa.otp.delivery",
+            "Delivery: email. Codes are sent to the address of the account."
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "otp_length",
+            label: t("settings.mfa.otp.length.label", "Code length (digits)"),
+            hint: t("settings.mfa.otp.length.hint", "Default: 6 digits. Allowed: 4 to 16."),
+            error: errorFor("otp_length"),
+            required: true,
+            children: /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: settings.otp_length,
+                onValueChange: (value) => update("otp_length", value),
+                min: 4,
+                max: 16,
+                disabled
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "otp_expiry",
+            label: t("settings.mfa.otp.expiry.label", "Code lifetime (seconds)"),
+            hint: t(
+              "settings.mfa.otp.expiry.hint",
+              "Default: 300 seconds (5 minutes). Allowed: 30 to 86,400."
+            ),
+            error: errorFor("otp_expiry"),
+            required: true,
+            children: /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: settings.otp_expiry,
+                onValueChange: (value) => update("otp_expiry", value),
+                min: 30,
+                max: 86400,
+                step: 30,
+                disabled
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "otp_max_attempts",
+            label: t("settings.mfa.otp.attempts.label", "Maximum wrong attempts"),
+            hint: t(
+              "settings.mfa.otp.attempts.hint",
+              "The code becomes invalid after this many wrong entries. Default: 3."
+            ),
+            error: errorFor("otp_max_attempts"),
+            required: true,
+            children: /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: settings.otp_max_attempts,
+                onValueChange: (value) => update("otp_max_attempts", value),
+                min: 1,
+                max: 20,
+                disabled
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "otp_resend_cooldown",
+            label: t("settings.mfa.otp.cooldown.label", "Wait before a new code (seconds)"),
+            hint: t(
+              "settings.mfa.otp.cooldown.hint",
+              "How long users wait before they can request a new code. Default: 60."
+            ),
+            error: errorFor("otp_resend_cooldown"),
+            required: true,
+            children: /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: settings.otp_resend_cooldown,
+                onValueChange: (value) => update("otp_resend_cooldown", value),
+                min: 0,
+                max: 86400,
+                disabled
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Note,
+        {
+          tone: "success",
+          icon: CheckCircle,
+          title: t("settings.mfa.otp.howItWorks", "How it works"),
+          children: /* @__PURE__ */ jsx(StepList, { children: emailOtpSteps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) })
+        }
+      )
+    ] }) : null,
+    mode === "totp" ? /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          id: `${id}-policy`,
+          title: t("settings.mfa.policy.title", "Who must use an authenticator app?")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Note,
+        {
+          tone: enrollment.status === "ready" && enrolled === 0 ? "warning" : "primary",
+          icon: Key,
+          title: t("settings.mfa.enrollment.title", "Enrollment"),
+          children: /* @__PURE__ */ jsxs(BulletList, { children: [
+            /* @__PURE__ */ jsx("li", { "aria-live": "polite", children: enrollmentText }),
+            /* @__PURE__ */ jsx("li", { children: t(
+              "settings.mfa.enrollment.howTo",
+              "Users set up their app while signed in, from your frontend. They cannot set it up during a sign-in that already requires a code."
+            ) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Radio.Group,
+        {
+          value: mfaMode === "required" ? "required" : "optional",
+          onValueChange: handlePolicyChange,
+          "aria-labelledby": `${id}-policy`,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(Radio.Item, { value: "optional", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", tag: "span", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral800", children: t("settings.mfa.policy.optional", "Users who set up an app (recommended)") }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+                "settings.mfa.policy.optionalHint",
+                "Users with an authenticator app must enter its code. Everyone else signs in with the magic link."
+              ) })
+            ] }) }),
+            /* @__PURE__ */ jsx(Radio.Item, { value: "required", disabled: disabled || !requireCheck.allowed, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", tag: "span", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral800", children: t("settings.mfa.policy.required", "Every user") }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: requireCheck.allowed ? t(
+                "settings.mfa.policy.requiredHint",
+                "Users without an authenticator app can no longer sign in."
+              ) : t(
+                "settings.mfa.policy.requiredBlocked",
+                "Unavailable: no user has set up an authenticator app, so every sign-in would fail."
+              ) })
+            ] }) })
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(CardGrid, { $min: "260px", children: /* @__PURE__ */ jsx(
+      ToggleCard,
+      {
+        title: t("settings.mfa.totpOnly.title", "Sign-in with authenticator code only"),
+        description: t(
+          "settings.mfa.totpOnly.description",
+          "Users who set up an authenticator app can sign in with their email address and a current code, without waiting for an email."
+        ),
+        checked: settings.totp_as_primary_auth,
+        onCheckedChange: (checked) => update("totp_as_primary_auth", checked),
+        disabled,
+        statusOn,
+        statusOff
+      }
+    ) }),
+    mode === "totp" || settings.totp_as_primary_auth ? /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          title: t("settings.mfa.totp.title", "Authenticator app settings"),
+          subtitle: t(
+            "settings.mfa.totp.subtitle",
+            "Changes apply to new setups. Apps that are already set up keep working."
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(FieldGrid, { $columns: 3, children: [
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "totp_issuer",
+            label: t("settings.mfa.totp.issuer.label", "Issuer name"),
+            hint: t(
+              "settings.mfa.totp.issuer.hint",
+              "Shown in the authenticator app, for example your app name."
+            ),
+            error: errorFor("totp_issuer"),
+            children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: settings.totp_issuer ?? "",
+                onChange: (event) => update("totp_issuer", event.target.value),
+                placeholder: "Magic Link",
+                disabled,
+                maxLength: 128
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "totp_digits",
+            label: t("settings.mfa.totp.digits.label", "Code digits"),
+            error: errorFor("totp_digits"),
+            children: /* @__PURE__ */ jsxs(
+              SingleSelect,
+              {
+                value: String(settings.totp_digits ?? 6),
+                onChange: (value) => update("totp_digits", Number.parseInt(value, 10)),
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "6", children: t("settings.mfa.totp.digits.option", "{count} digits", { count: 6 }) }),
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "8", children: t("settings.mfa.totp.digits.option", "{count} digits", { count: 8 }) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "totp_period",
+            label: t("settings.mfa.totp.period.label", "Code period (seconds)"),
+            hint: t(
+              "settings.mfa.totp.period.hint",
+              "Default: 30 seconds. Most apps only support 30."
+            ),
+            error: errorFor("totp_period"),
+            required: true,
+            children: /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: settings.totp_period,
+                onValueChange: (value) => update("totp_period", value),
+                min: 15,
+                max: 300,
+                disabled
+              }
+            )
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Note,
+      {
+        tone: "primary",
+        icon: CheckCircle,
+        title: t("settings.mfa.summary.title", "Current selection"),
+        children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: summary.map(({ icon: Icon, text }) => /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              "aria-hidden": "true",
+              width: "14px",
+              height: "14px",
+              style: { flexShrink: 0, marginTop: 2 }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: text })
+        ] }, text)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: !disabled && confirmRequired,
+        variant: "danger",
+        title: t(
+          "settings.mfa.confirmRequired.title",
+          "Require an authenticator app for every user?"
+        ),
+        description: enrollment.status === "ready" ? t(
+          "settings.mfa.confirmRequired.bodyCount",
+          "Only {count, plural, one {# user has} other {# users have}} set up an authenticator app. Everyone else can no longer sign in after you save.",
+          { count: enrolled }
+        ) : t(
+          "settings.mfa.confirmRequired.bodyUnknown",
+          "Users without an authenticator app can no longer sign in after you save. The number of enrolled users is unknown."
+        ),
+        confirmLabel: t("settings.mfa.confirmRequired.confirm", "Require for everyone"),
+        onConfirm: () => {
+          patch(applyTotpPolicy("required"));
+          setConfirmRequired(false);
+        },
+        onClose: () => setConfirmRequired(false),
+        children: t(
+          "settings.mfa.confirmRequired.recovery",
+          'To undo it, choose "Users who set up an app" or another sign-in mode and save again.'
+        )
+      }
+    )
+  ] });
+};
+const PLACEHOLDERS = ["LOGIN_URL", "EXPIRY_TEXT", "EMAIL", "USER", "URL", "CODE", "EXPIRES_AT"];
+const templateValue = (template) => String(template?.templateReferenceId ?? template?.id ?? "");
+const templateName = (template, fallback) => template?.name || template?.subject || fallback.replace("{id}", String(template?.id ?? ""));
+const EmailSection = ({
+  settings,
+  update,
+  patch,
+  disabled,
+  errorFor,
+  integrations,
+  emailDesignerTemplates,
+  magicMailTemplates
+}) => {
+  const { t } = useMagicLinkIntl();
+  const copy = useCopyToClipboard();
+  const [pendingTemplate, setPendingTemplate] = useState(null);
+  const { emailDesignerInstalled, magicMailInstalled, emailProviderConfigured, emailProviderName } = integrations;
+  const gallery = useMemo(() => getTemplateList(), []);
+  const defaults = buildDefaultTemplates({
+    heading: t("settings.email.default.heading", "Sign in"),
+    intro: t(
+      "settings.email.default.intro",
+      "Use the button below to sign in. No password needed."
+    ),
+    button: t("settings.email.default.button", "Sign in now"),
+    expiry: t("settings.email.default.expiry", "The link expires in {expiry}.", {
+      expiry: "{{EXPIRY_TEXT}}"
+    }),
+    ignore: t(
+      "settings.email.default.ignore",
+      "If you did not request this email, you can ignore it."
+    )
+  });
+  const currentHtml = toPlaceholderSyntax(settings.message_html);
+  const currentText = toPlaceholderSyntax(settings.message_text);
+  const activeGalleryKey = gallery.find(({ value }) => {
+    const template = getTemplate(value);
+    return template.html === currentHtml && template.text === currentText;
+  })?.value ?? null;
+  const knownHtml = [...gallery.map(({ value }) => getTemplate(value).html), defaults.html];
+  const knownText = [...gallery.map(({ value }) => getTemplate(value).text), defaults.text];
+  const htmlIsCustom = isCustomTemplate(settings.message_html, knownHtml, toPlaceholderSyntax);
+  const textIsCustom = isCustomTemplate(settings.message_text, knownText, toPlaceholderSyntax);
+  const requestTemplate = (request) => {
+    if (disabled) return;
+    const overwrites = "message_html" in request.values && htmlIsCustom && request.values.message_html !== settings.message_html || "message_text" in request.values && textIsCustom && request.values.message_text !== settings.message_text;
+    if (overwrites) {
+      setPendingTemplate(request);
+    } else {
+      patch(request.values);
+    }
+  };
+  const designerSelected = emailDesignerTemplates.some(
+    (template) => templateValue(template) === String(settings.email_designer_template_id ?? "")
+  );
+  const magicMailSelected = magicMailTemplates.some(
+    (template) => String(template.id) === String(settings.magic_mail_template_id ?? "")
+  );
+  const htmlStats = templateStats(settings.message_html);
+  const usingThirdParty = emailDesignerInstalled && settings.use_email_designer || settings.use_magic_mail;
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    emailProviderConfigured || magicMailInstalled ? /* @__PURE__ */ jsx(Note, { tone: "success", icon: Check, compact: true, children: magicMailInstalled ? t(
+      "settings.email.provider.magicMail",
+      "Email provider: Magic Mail (advanced routing)"
+    ) : t("settings.email.provider.configured", "Email provider: {name}", {
+      name: emailProviderName || t("settings.email.provider.defaultName", "configured")
+    }) }) : /* @__PURE__ */ jsx(
+      Note,
+      {
+        tone: "danger",
+        icon: WarningCircle,
+        role: "alert",
+        title: t("settings.email.provider.missing.title", "No email provider configured"),
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx("span", { children: t(
+            "settings.email.provider.missing.body",
+            "Magic Link cannot send emails until an email provider is configured. Choose one of these options:"
+          ) }),
+          /* @__PURE__ */ jsxs(BulletList, { children: [
+            /* @__PURE__ */ jsxs("li", { children: [
+              t(
+                "settings.email.provider.missing.nodemailer",
+                "Install Nodemailer (recommended):"
+              ),
+              " ",
+              /* @__PURE__ */ jsx(Mono, { children: "npm install @strapi/provider-email-nodemailer" }),
+              " ",
+              t("settings.email.provider.missing.configure", "and configure it in {file}.", {
+                file: "config/plugins.js"
+              })
+            ] }),
+            /* @__PURE__ */ jsx("li", { children: t(
+              "settings.email.provider.missing.magicMail",
+              "Install the Magic Mail plugin for routing, OAuth2 accounts and analytics."
+            ) }),
+            /* @__PURE__ */ jsx("li", { children: t(
+              "settings.email.provider.missing.other",
+              "Use any other Strapi email provider, such as SendGrid, Mailgun or Amazon SES."
+            ) })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GroupTitle,
+      {
+        title: t("settings.email.sender.title", "SENDER INFORMATION"),
+        subtitle: t(
+          "settings.email.sender.subtitle",
+          "This information appears in emails sent to users"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 3, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "from_name",
+          label: t("settings.email.fromName.label", "Sender Name"),
+          hint: t(
+            "settings.email.fromName.hint",
+            "The name users see as the sender, such as your app name."
+          ),
+          error: errorFor("from_name"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: settings.from_name ?? "",
+              onChange: (event) => update("from_name", event.target.value),
+              placeholder: "My App",
+              disabled,
+              maxLength: 200
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "from_email",
+          label: t("settings.email.fromEmail.label", "Sender Email"),
+          hint: t(
+            "settings.email.fromEmail.hint",
+            "Must be an address your email provider may send from. Leave empty to use the provider default."
+          ),
+          error: errorFor("from_email"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "email",
+              value: settings.from_email ?? "",
+              onChange: (event) => update("from_email", event.target.value),
+              placeholder: "noreply@example.com",
+              disabled
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "response_email",
+          label: t("settings.email.responseEmail.label", "Reply-to email"),
+          hint: t(
+            "settings.email.responseEmail.hint",
+            "Optional. Replies from users go to this address."
+          ),
+          error: errorFor("response_email"),
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              type: "email",
+              value: settings.response_email ?? "",
+              onChange: (event) => update("response_email", event.target.value),
+              placeholder: "support@example.com",
+              disabled
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      SettingField,
+      {
+        name: "object",
+        label: t("settings.email.subject.label", "Subject line"),
+        hint: t(
+          "settings.email.subject.hint",
+          "Keep it clear so the email is not marked as spam. Placeholders such as {placeholder} work here too.",
+          { placeholder: "{{EMAIL}}" }
+        ),
+        error: errorFor("object"),
+        children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: settings.object ?? "",
+            onChange: (event) => update("object", event.target.value),
+            placeholder: t("settings.email.subject.placeholder", "Your sign-in link"),
+            disabled,
+            maxLength: 500
+          }
+        )
+      }
+    ),
+    emailDesignerInstalled ? /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(
+        SwitchRow,
+        {
+          icon: /* @__PURE__ */ jsx(Mail, { "aria-hidden": "true", width: "16px", height: "16px" }),
+          title: t("settings.email.designer.useTemplate", "Use an Email Designer 5 template"),
+          description: t(
+            "settings.email.designer.useTemplateHint",
+            "Login emails use the selected Email Designer template. The templates below stay as the fallback."
+          ),
+          checked: settings.use_email_designer,
+          onCheckedChange: (checked) => update("use_email_designer", checked),
+          disabled
+        }
+      ),
+      settings.use_email_designer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SettingField,
+          {
+            name: "email_designer_template_id",
+            label: t("settings.email.designer.selectTemplate", "Email Designer template"),
+            hint: emailDesignerTemplates.length > 0 ? t(
+              "settings.email.designer.templatesAvailable",
+              "{count, plural, one {# template available} other {# templates available}}. The choice applies after you save.",
+              { count: emailDesignerTemplates.length }
+            ) : void 0,
+            error: settings.email_designer_template_id && !designerSelected && emailDesignerTemplates.length > 0 ? t(
+              "settings.email.template.missing",
+              "The saved template no longer exists. Select another one."
+            ) : void 0,
+            children: /* @__PURE__ */ jsx(
+              SingleSelect,
+              {
+                value: designerSelected ? String(settings.email_designer_template_id) : null,
+                onChange: (value) => update("email_designer_template_id", String(value)),
+                placeholder: t("settings.email.designer.placeholder", "Choose a template..."),
+                disabled: disabled || emailDesignerTemplates.length === 0,
+                children: emailDesignerTemplates.map((template) => /* @__PURE__ */ jsx(
+                  SingleSelectOption,
+                  {
+                    value: templateValue(template),
+                    children: templateName(
+                      template,
+                      t("settings.email.template.fallbackName", "Template {id}")
+                    )
+                  },
+                  templateValue(template)
+                ))
+              }
+            )
+          }
+        ),
+        emailDesignerTemplates.length === 0 ? /* @__PURE__ */ jsx(Note, { tone: "warning", icon: WarningCircle, compact: true, children: t(
+          "settings.email.designer.noTemplates",
+          "No templates found. Create one in Email Designer 5 first."
+        ) }) : null,
+        /* @__PURE__ */ jsx(Note, { tone: "primary", compact: true, children: t(
+          "settings.email.designer.variables",
+          "Template variables: '{{magicLink}}' (login link), '{{expiryText}}', '{{user.email}}' and '{{user.username}}'."
+        ) })
+      ] }) : null
+    ] }) : null,
+    magicMailInstalled ? /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(
+        SwitchRow,
+        {
+          icon: /* @__PURE__ */ jsx(Mail, { "aria-hidden": "true", width: "16px", height: "16px" }),
+          title: t("settings.email.magicMail.use", "Send with Magic Mail"),
+          description: t(
+            "settings.email.magicMail.description",
+            "Uses your Magic Mail accounts, routing rules and failover. Make sure at least one account is active."
+          ),
+          checked: settings.use_magic_mail,
+          onCheckedChange: (checked) => update("use_magic_mail", checked),
+          disabled
+        }
+      ),
+      settings.use_magic_mail ? /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "magic_mail_template_id",
+          label: t("settings.email.magicMail.template", "Magic Mail template"),
+          hint: t(
+            "settings.email.magicMail.templateHint",
+            "Optional. Templates are managed in Magic Mail. The choice applies after you save."
+          ),
+          error: settings.magic_mail_template_id && !magicMailSelected && magicMailTemplates.length > 0 ? t(
+            "settings.email.template.missing",
+            "The saved template no longer exists. Select another one."
+          ) : void 0,
+          children: /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              value: magicMailSelected ? String(settings.magic_mail_template_id) : null,
+              onChange: (value) => {
+                const template = magicMailTemplates.find(
+                  (item) => String(item.id) === String(value)
+                );
+                patch({
+                  magic_mail_template_id: String(value),
+                  magic_mail_template_reference_id: template?.templateReferenceId ?? ""
+                });
+              },
+              placeholder: t("settings.email.magicMail.placeholder", "Choose a template"),
+              disabled: disabled || magicMailTemplates.length === 0,
+              children: magicMailTemplates.map((template) => /* @__PURE__ */ jsx(SingleSelectOption, { value: String(template.id), children: templateName(
+                template,
+                t("settings.email.template.fallbackName", "Template {id}")
+              ) }, template.id))
+            }
+          )
+        }
+      ) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          GroupTitle,
+          {
+            title: t("settings.email.templates.title", "EMAIL TEMPLATES"),
+            subtitle: usingThirdParty ? t(
+              "settings.email.designer.fallbackDescription",
+              "These templates are used when the selected integration cannot send."
+            ) : t(
+              "settings.email.templates.subtitle",
+              "Design the emails sent to users. Use placeholders for dynamic content."
+            )
+          }
+        ),
+        usingThirdParty ? /* @__PURE__ */ jsx(Badge, { children: t("settings.email.designer.fallbackBadge", "Fallback only") }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(SubsectionHeading, { tag: "h4", children: t("settings.email.placeholders.title", "Available placeholders") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+          "settings.email.placeholders.intro",
+          "Values are inserted as plain text and escaped in HTML. Select a placeholder to copy it."
+        ) }),
+        /* @__PURE__ */ jsx(CardGrid, { $min: "200px", children: PLACEHOLDERS.map((name) => {
+          const code = `{{${name}}}`;
+          return /* @__PURE__ */ jsxs(
+            Tile,
+            {
+              type: "button",
+              onClick: () => copy(code, {
+                success: t("settings.email.placeholders.copied", "{placeholder} copied", {
+                  placeholder: code
+                })
+              }),
+              "aria-label": t("settings.email.placeholders.copyLabel", "Copy {placeholder}", {
+                placeholder: code
+              }),
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: /* @__PURE__ */ jsx(Mono, { children: code }) }),
+                  /* @__PURE__ */ jsx(Duplicate, { "aria-hidden": "true", width: "14px", height: "14px" })
+                ] }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: {
+                  LOGIN_URL: t(
+                    "settings.email.placeholders.loginUrl.description",
+                    "Complete login link with the token. Use it for buttons and links."
+                  ),
+                  EXPIRY_TEXT: t(
+                    "settings.email.placeholders.expiry.description",
+                    "How long the link stays valid, such as 1 hour."
+                  ),
+                  EMAIL: t(
+                    "settings.email.placeholders.email.description",
+                    "Email address of the recipient."
+                  ),
+                  USER: t(
+                    "settings.email.placeholders.username.description",
+                    "Username of the recipient, or the email address when there is none."
+                  ),
+                  URL: t(
+                    "settings.email.placeholders.url.description",
+                    "Login URL without the token."
+                  ),
+                  CODE: t(
+                    "settings.email.placeholders.code.description",
+                    "The token alone, for custom link formats only."
+                  ),
+                  EXPIRES_AT: t(
+                    "settings.email.placeholders.expiresAt.description",
+                    "Expiry date and time in ISO 8601 format."
+                  )
+                }[name] })
+              ]
+            },
+            name
+          );
+        }) })
+      ] }),
+      !settings.use_magic_mail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Mail, { "aria-hidden": "true", width: "20px", height: "20px" }),
+            /* @__PURE__ */ jsx(SubsectionHeading, { tag: "h4", variant: "delta", children: t("settings.email.gallery.title", "Template gallery") })
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+            "settings.email.gallery.description",
+            "Load a ready-made design into the editors below. Save to apply it."
+          ) }),
+          /* @__PURE__ */ jsx(CardGrid, { $min: "180px", role: "list", children: gallery.map((template) => {
+            const isActive = activeGalleryKey === template.value;
+            return /* @__PURE__ */ jsx("div", { role: "listitem", style: { minWidth: 0 }, children: /* @__PURE__ */ jsxs(
+              Tile,
+              {
+                type: "button",
+                $active: isActive,
+                "aria-pressed": isActive,
+                disabled,
+                onClick: () => {
+                  const selected = getTemplate(template.value);
+                  requestTemplate({
+                    label: template.label,
+                    values: { message_html: selected.html, message_text: selected.text }
+                  });
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      gap: 2,
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      width: "100%",
+                      children: [
+                        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: template.label }),
+                        isActive ? /* @__PURE__ */ jsx(Badge, { variant: "success", size: "S", children: t("settings.email.gallery.active", "In use") }) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: template.preview })
+                ]
+              }
+            ) }, template.value);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "space-between", alignItems: "center", wrap: "wrap", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+              /* @__PURE__ */ jsx(
+                SubsectionHeading,
+                {
+                  tag: "h4",
+                  variant: "delta",
+                  id: `${fieldId("message_html")}-label`,
+                  children: t("settings.email.html.title", "HTML template")
+                }
+              ),
+              /* @__PURE__ */ jsx(Badge, { variant: "success", children: t("settings.email.html.badge", "Main Template") })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "S",
+                disabled,
+                onClick: () => requestTemplate({
+                  label: t("settings.email.default.name", "Default template"),
+                  values: { message_html: defaults.html }
+                }),
+                children: t("settings.email.html.loadDefault", "Load Default Template")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "pi",
+              textColor: "neutral600",
+              id: `${fieldId("message_html")}-hint`,
+              children: t(
+                "settings.email.html.description",
+                "HTML version of the login email. Use the placeholders above, at least {placeholder}.",
+                { placeholder: "{{LOGIN_URL}}" }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CodeEditor,
+            {
+              id: fieldId("message_html"),
+              labelledBy: `${fieldId("message_html")}-label`,
+              describedBy: `${fieldId("message_html")}-hint`,
+              filename: "email.html",
+              value: settings.message_html,
+              onChange: (value) => update("message_html", value),
+              placeholder: '<p><a href="{{LOGIN_URL}}">...</a></p>',
+              disabled,
+              dark: true,
+              height: "560px"
+            }
+          ),
+          errorFor("message_html") ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", role: "alert", children: errorFor("message_html") }) : null,
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "space-between", alignItems: "center", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+              "settings.email.html.stats",
+              "{lines, plural, one {# line} other {# lines}}, {chars, plural, one {# character} other {# characters}}",
+              htmlStats
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "S",
+                startIcon: /* @__PURE__ */ jsx(Duplicate, {}),
+                onClick: () => copy(settings.message_html ?? "", {
+                  success: t("settings.email.html.copied", "HTML template copied")
+                }),
+                children: t("settings.email.html.copy", "Copy Template")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "space-between", alignItems: "center", wrap: "wrap", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+              /* @__PURE__ */ jsx(
+                SubsectionHeading,
+                {
+                  tag: "h4",
+                  variant: "delta",
+                  id: `${fieldId("message_text")}-label`,
+                  children: t("settings.email.text.title", "Plain text template")
+                }
+              ),
+              /* @__PURE__ */ jsx(Badge, { children: t("settings.email.text.badge", "Fallback") })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "S",
+                disabled,
+                onClick: () => requestTemplate({
+                  label: t("settings.email.default.name", "Default template"),
+                  values: { message_text: defaults.text }
+                }),
+                children: t("settings.email.text.loadDefault", "Load Default Template")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "pi",
+              textColor: "neutral600",
+              id: `${fieldId("message_text")}-hint`,
+              children: t(
+                "settings.email.text.description",
+                "Text version for email clients without HTML. Placeholders are inserted as they are."
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CodeEditor,
+            {
+              id: fieldId("message_text"),
+              labelledBy: `${fieldId("message_text")}-label`,
+              describedBy: `${fieldId("message_text")}-hint`,
+              filename: "email.txt",
+              value: settings.message_text,
+              onChange: (value) => update("message_text", value),
+              placeholder: "{{LOGIN_URL}}",
+              disabled,
+              height: "320px",
+              mobileHeight: "240px"
+            }
+          ),
+          errorFor("message_text") ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", role: "alert", children: errorFor("message_text") }) : null,
+          /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsx(Duplicate, {}),
+              onClick: () => copy(settings.message_text ?? "", {
+                success: t("settings.email.text.copied", "Text template copied")
+              }),
+              children: t("settings.email.text.copy", "Copy Template")
+            }
+          ) })
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: !disabled && pendingTemplate !== null,
+        variant: "danger",
+        title: t("settings.email.overwrite.title", "Replace your template?"),
+        description: t(
+          "settings.email.overwrite.body",
+          'Loading "{name}" replaces your custom template in the editor. Your saved settings stay unchanged until you save.',
+          { name: pendingTemplate?.label ?? "" }
+        ),
+        confirmLabel: t("settings.email.overwrite.confirm", "Replace template"),
+        onConfirm: () => {
+          if (pendingTemplate) patch(pendingTemplate.values);
+          setPendingTemplate(null);
+        },
+        onClose: () => setPendingTemplate(null)
+      }
+    )
+  ] });
+};
+const RateLimitSection = ({
+  settings,
+  update,
+  disabled,
+  canManage,
+  errorFor,
+  stats,
+  onRetryStats,
+  onCleanup,
+  onRequestReset,
+  isCleaning,
+  statusOn,
+  statusOff
+}) => {
+  const { t } = useMagicLinkIntl();
+  const { formatNumber } = useFormatters();
+  const value = (key) => formatNumber(Number(stats.data?.[key] ?? 0));
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    /* @__PURE__ */ jsxs(Panel, { children: [
+      /* @__PURE__ */ jsx(
+        GroupTitle,
+        {
+          align: "center",
+          title: t("settings.rateLimit.title", "RATE LIMITING"),
+          subtitle: t(
+            "settings.rateLimit.subtitle",
+            "Prevent abuse by limiting the number of requests per IP address and email"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(CardGrid, { $min: "260px", children: /* @__PURE__ */ jsx(
+        ToggleCard,
+        {
+          title: t("settings.rateLimit.enable.title", "Enable Rate Limiting"),
+          description: t(
+            "settings.rateLimit.enable.description",
+            "Protects against brute-force attacks and spam by limiting login link requests."
+          ),
+          checked: settings.rate_limit_enabled,
+          onCheckedChange: (checked) => update("rate_limit_enabled", checked),
+          disabled,
+          statusOn,
+          statusOff
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(GroupTitle, { title: t("settings.rateLimit.config.title", "Limits") }),
+    /* @__PURE__ */ jsxs(FieldGrid, { $columns: 2, children: [
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "rate_limit_max_attempts",
+          label: t("settings.rateLimit.maxAttempts.label", "Maximum requests"),
+          hint: t(
+            "settings.rateLimit.maxAttempts.hint",
+            "Requests allowed per time window before blocking (1 to 1,000)."
+          ),
+          error: errorFor("rate_limit_max_attempts"),
+          required: true,
+          children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.rate_limit_max_attempts,
+              onValueChange: (next) => update("rate_limit_max_attempts", next),
+              min: 1,
+              max: 1e3,
+              disabled
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SettingField,
+        {
+          name: "rate_limit_window_minutes",
+          label: t("settings.rateLimit.windowMinutes.label", "Time Window (Minutes)"),
+          hint: t(
+            "settings.rateLimit.windowMinutes.hint",
+            "Period in which requests are counted (1 to 10,080 minutes)."
+          ),
+          error: errorFor("rate_limit_window_minutes"),
+          required: true,
+          children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.rate_limit_window_minutes,
+              onValueChange: (next) => update("rate_limit_window_minutes", next),
+              min: 1,
+              max: 10080,
+              disabled
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(GroupTitle, { title: t("settings.rateLimit.stats.title", "CURRENT STATISTICS") }),
+    stats.status === "loading" || stats.status === "idle" ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { small: true, children: t("settings.rateLimit.stats.loading", "Loading statistics...") }) }) : null,
+    stats.status === "error" ? /* @__PURE__ */ jsx(Note, { tone: "danger", role: "alert", children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx("span", { children: t("settings.rateLimit.stats.error", "Statistics could not be loaded.") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "S",
+          startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
+          onClick: onRetryStats,
+          children: t("settings.retry", "Try again")
+        }
+      )
+    ] }) }) : null,
+    stats.status === "ready" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CardGrid, { $min: "160px", children: [
+        /* @__PURE__ */ jsx(
+          Stat,
+          {
+            tone: "neutral",
+            value: value("totalEntries"),
+            label: t("settings.rateLimit.stats.total", "Total Entries")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Stat,
+          {
+            tone: "danger",
+            value: value("blocked"),
+            label: t("settings.rateLimit.stats.blocked", "Currently Blocked")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Stat,
+          {
+            tone: "primary",
+            value: value("ipLimits"),
+            label: t("settings.rateLimit.stats.ipLimits", "IP address limits")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Stat,
+          {
+            tone: "success",
+            value: value("emailLimits"),
+            label: t("settings.rateLimit.stats.emailLimits", "Email Limits")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+        "settings.rateLimit.stats.note",
+        "Statistics cover this server process only. Cleanup and reset do not change your unsaved settings."
+      ) }),
+      canManage ? /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "M",
+            onClick: onCleanup,
+            loading: isCleaning,
+            startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}),
+            children: t("settings.rateLimit.cleanup", "Clean up expired entries")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger-light",
+            size: "M",
+            onClick: onRequestReset,
+            startIcon: /* @__PURE__ */ jsx(Trash, {}),
+            children: t("settings.rateLimit.reset", "Reset All Limits")
+          }
+        )
+      ] }) : null
+    ] }) : null
+  ] });
+};
+const AdvancedSection = ({ settings, update, disabled, statusOn, statusOff }) => {
+  const { t } = useMagicLinkIntl();
+  return /* @__PURE__ */ jsxs(SectionBody, { children: [
+    /* @__PURE__ */ jsx(
+      GroupTitle,
+      {
+        title: t("settings.advanced.title", "ADDITIONAL OPTIONS"),
+        subtitle: t("settings.advanced.subtitle", "Advanced features for special use cases")
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardGrid, { $min: "260px", children: [
+      /* @__PURE__ */ jsx(
+        ToggleCard,
+        {
+          title: t(
+            "settings.advanced.publicRegistration.title",
+            "Magic Links on Public Registration"
+          ),
+          description: t(
+            "settings.advanced.publicRegistration.description",
+            "Allows users to sign in with a magic link from public registration forms without a password."
+          ),
+          checked: settings.allow_magic_links_on_public_registration,
+          onCheckedChange: (checked) => update("allow_magic_links_on_public_registration", checked),
+          disabled,
+          statusOn,
+          statusOff
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToggleCard,
+        {
+          title: t(
+            "settings.compatibility.passwordless.title",
+            "Passwordless Plugin Compatibility"
+          ),
+          description: t(
+            "settings.compatibility.passwordless.description",
+            "Keeps the /api/passwordless routes of strapi-plugin-passwordless working while you migrate."
+          ),
+          checked: settings.passwordlessCompatibility,
+          onCheckedChange: (checked) => update("passwordlessCompatibility", checked),
+          disabled,
+          statusOn,
+          statusOff,
+          children: settings.passwordlessCompatibility ? /* @__PURE__ */ jsxs(Note, { tone: "success", compact: true, children: [
+            /* @__PURE__ */ jsx(Mono, { children: "POST /api/passwordless/send-link" }),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(Mono, { children: "GET /api/passwordless/login" })
+          ] }) : null
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Note,
+      {
+        tone: "warning",
+        icon: Code,
+        title: t("settings.compatibility.migration.title", "Migration Note"),
+        children: t(
+          "settings.compatibility.migration.description",
+          "After the migration, switch your clients to the Magic Link API (/api/magic-link/*) and turn compatibility mode off."
+        )
+      }
+    )
+  ] });
+};
+const Container = styled.form`
+  max-width: 1440px;
+  margin: 0 auto;
+`;
+const StickySaveBar = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${space(4)};
+  padding: ${space(6)};
+  background: ${color("neutral0")};
+  border-bottom: 1px solid ${color("neutral150")};
+  box-shadow: ${theme.shadows.sm};
+
+  @media (max-width: 768px) {
+    position: static;
+    padding: ${space(4)};
+  }
+`;
+const HeaderActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${space(2)};
+  min-width: 0;
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(6)};
+  padding: ${space(6)} ${space(6)} ${space(7)};
+
+  @media (max-width: 768px) {
+    padding: ${space(4)};
+  }
+`;
+const InfoBanner = styled.div`
+  display: flex;
+  gap: ${space(3)};
+  align-items: flex-start;
+  padding: ${space(6)};
+  border-radius: ${theme.borderRadius.lg};
+  background: ${tint.primary.bg};
+  border: 1px solid ${tint.primary.border};
+
+  @media (max-width: 480px) {
+    padding: ${space(4)};
+  }
+`;
+const BannerIcon = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: ${brand.primary};
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg path {
+    fill: ${brand.onFill};
+  }
+`;
+const FooterBox = styled.div`
+  display: flex;
+  gap: ${space(3)};
+  align-items: center;
+  justify-content: center;
+  padding: ${space(6)};
+  border-radius: ${theme.borderRadius.lg};
+  background: ${tint.success.bg};
+  border: 1px solid ${tint.success.border};
+  text-align: left;
+
+  > svg {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  > svg path {
+    fill: ${tint.success.fg};
+  }
+`;
+const UnsavedBadge = styled(Badge)`
+  && {
+    background: ${tint.warning.bg};
+    box-shadow: inset 0 0 0 1px ${tint.warning.border};
+  }
+
+  && span {
+    color: ${tint.warning.fg};
+  }
+`;
+const SectionErrorMark = styled.span`
+  display: inline-block;
+  margin-left: ${space(1)};
+  padding: 0 ${space(2)};
+  border-radius: ${theme.borderRadius.sm};
+  font-size: 1.1rem;
+  font-weight: 700;
+  line-height: 1.8rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+  background: ${tint.danger.bg};
+  box-shadow: inset 0 0 0 1px ${tint.danger.border};
+  color: ${tint.danger.fg};
+`;
+const SaveButton = styled(Button)`
+  && {
+    background: ${brand.gradient};
+    border: none;
+    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
+    transition:
+      box-shadow ${theme.transitions.fast},
+      transform ${theme.transitions.fast};
+  }
+
+  && span,
+  && svg path {
+    color: ${brand.onFill};
+    fill: ${brand.onFill};
+    font-weight: 700;
+  }
+
+  &&:hover:not([aria-disabled='true']) {
+    background: ${brand.gradientHover};
+    transform: translateY(-1px);
+  }
+
+  &&[aria-disabled='true'] {
+    opacity: 0.5;
+  }
+
+  ${reducedMotion}
+`;
+const toFormState = (raw) => {
+  const clean = sanitizeLoadedSettings(raw);
+  for (const key of ["message_html", "message_text", "object"]) {
+    if (typeof clean[key] === "string") clean[key] = toPlaceholderSyntax(clean[key]);
+  }
+  return clean;
+};
+const listFrom = (payload) => {
+  const data = payload?.data ?? payload;
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.data)) return data.data;
+  if (Array.isArray(data?.templates)) return data.templates;
+  return [];
+};
+const NO_INTEGRATIONS = Object.freeze({
+  emailDesignerInstalled: false,
+  magicMailInstalled: false,
+  emailProviderConfigured: false,
+  emailProviderName: null
+});
+const SettingsModern = () => {
+  const { t } = useMagicLinkIntl();
+  const { formatNumber } = useFormatters();
+  const { toggleNotification } = useNotification();
+  const { get, put, post } = useFetchClient();
+  const {
+    canReadSettings,
+    canUpdateSettings,
+    isLoading: isPermissionLoading,
+    error: permissionError
+  } = useMagicLinkRBAC();
+  const canWriteSettings = canUpdateSettings;
+  const { language } = usePluginLanguage();
+  const [loadState, setLoadState] = useState("loading");
+  const [settings, setSettings] = useState(null);
+  const [initialSettings, setInitialSettings] = useState(null);
+  const [integrations, setIntegrations] = useState(NO_INTEGRATIONS);
+  const [emailDesignerTemplates, setEmailDesignerTemplates] = useState([]);
+  const [magicMailTemplates, setMagicMailTemplates] = useState([]);
+  const [rateLimitStats, setRateLimitStats] = useState({ status: "idle", data: null });
+  const [enrollment, setEnrollment] = useState({ status: "loading", summary: null });
+  const [serverErrors, setServerErrors] = useState({});
+  const [openSection, setOpenSection] = useState("general");
+  const [isSaving, setIsSaving] = useState(false);
+  const [isCleaning, setIsCleaning] = useState(false);
+  const [confirmReset, setConfirmReset] = useState(false);
+  const focusRequest = useRef(null);
+  const [, setFocusTick] = useState(0);
+  const formRef = useRef(null);
+  const focusBeforeSave = useRef(null);
+  const getSectionFocusTarget = useCallback(
+    () => formRef.current?.querySelector('h3 button[aria-expanded="true"]') ?? formRef.current?.querySelector("h3 button"),
+    []
+  );
+  const isReady = loadState === "ready" && settings !== null;
+  const isDirty = isReady && isSettingsDirty(initialSettings, settings);
+  const guard = useUnsavedChangesGuard(isDirty);
+  const formDisabled = !canWriteSettings || isSaving;
+  const clientErrors = useMemo(() => settings ? validateSettings(settings) : {}, [settings]);
+  const errorKeys = useMemo(
+    () => orderedErrorKeys({ ...clientErrors, ...serverErrors }),
+    [clientErrors, serverErrors]
+  );
+  const settingsFormValid = Object.keys(clientErrors).length === 0;
+  const errorFor = useCallback(
+    (key) => {
+      const error = clientErrors[key];
+      if (!error) {
+        switch (serverErrors[key]) {
+          case void 0:
+            return void 0;
+          case "securityForbidden":
+            return t(
+              "settings.validation.securityForbidden",
+              'Changing this value needs the "Settings: Security" permission.'
+            );
+          case "linkOrigin":
+            return t(
+              "settings.validation.linkOrigin",
+              "This origin is not in the allowed link origins of the server configuration."
+            );
+          case "mfaNoEnrolled":
+            return t(
+              "settings.validation.mfaNoEnrolled",
+              'No user has an authenticator app yet, so "Every user" cannot be saved.'
+            );
+          default:
+            return t(
+              "settings.validation.server",
+              "The server rejected this value. Check it and save again."
+            );
+        }
+      }
+      switch (error.code) {
+        case "url":
+          return t(
+            "settings.validation.url",
+            "Enter an https URL. http is only allowed for localhost."
+          );
+        case "path":
+          return t(
+            "settings.validation.path",
+            "Enter a path that starts with / and contains only URL characters."
+          );
+        case "jwtExpiry":
+          return t(
+            "settings.auth.jwtExpiration.invalid",
+            "Enter a number followed by m, h or d, such as 15m, 1h or 30d."
+          );
+        case "email":
+          return t(
+            "settings.email.invalidEmail",
+            "Enter a valid email address or leave this field blank."
+          );
+        case "range":
+          return t("settings.validation.range", "Enter a whole number from {min} to {max}.", {
+            min: formatNumber(error.min),
+            max: formatNumber(error.max)
+          });
+        case "length":
+          return t("settings.validation.length", "Use at most {max} characters.", {
+            max: formatNumber(error.max)
+          });
+        case "list":
+          return t(
+            "settings.validation.list",
+            "Use at most {max} fields with up to 128 characters each.",
+            {
+              max: error.max
+            }
+          );
+        case "digits":
+          return t("settings.validation.digits", "Choose 6 or 8 digits.");
+        default:
+          return t(
+            "settings.validation.server",
+            "The server rejected this value. Check it and save again."
+          );
+      }
+    },
+    [clientErrors, serverErrors, t, formatNumber]
+  );
+  const fetchSettings = useCallback(async () => {
+    try {
+      const res = await get("/magic-link/settings");
+      const payload = res?.data ?? {};
+      const formState = toFormState(payload.settings ?? payload.data ?? payload);
+      setSettings(formState);
+      setInitialSettings(formState);
+      setServerErrors({});
+      setIntegrations({
+        emailDesignerInstalled: payload.emailDesignerInstalled === true,
+        magicMailInstalled: payload.magicMailInstalled === true,
+        emailProviderConfigured: payload.emailProviderConfigured === true,
+        emailProviderName: typeof payload.emailProviderName === "string" ? payload.emailProviderName : null
+      });
+      setLoadState("ready");
+    } catch {
+      setLoadState("error");
+    }
+  }, [get]);
+  const retrySettings = useCallback(() => {
+    setLoadState("loading");
+    return fetchSettings();
+  }, [fetchSettings]);
+  const fetchStats = useCallback(async () => {
+    try {
+      const res = await get("/magic-link/rate-limit/stats");
+      setRateLimitStats({ status: "ready", data: res?.data?.data ?? {} });
+    } catch {
+      setRateLimitStats({ status: "error", data: null });
+    }
+  }, [get]);
+  const loadStats = useCallback(() => {
+    setRateLimitStats((current) => ({ status: "loading", data: current.data }));
+    return fetchStats();
+  }, [fetchStats]);
+  const fetchEnrollment = useCallback(async () => {
+    try {
+      const res = await get("/magic-link/totp/enrollment-summary");
+      const summary = parseEnrollmentSummary(res?.data);
+      setEnrollment(
+        summary ? { status: "ready", summary } : { status: "unavailable", summary: null }
+      );
+    } catch {
+      setEnrollment({ status: "unavailable", summary: null });
+    }
+  }, [get]);
+  useEffect(() => {
+    if (!canReadSettings) return;
+    const load = async () => {
+      await Promise.all([fetchSettings(), fetchStats(), fetchEnrollment()]);
+    };
+    load();
+  }, [canReadSettings, fetchSettings, fetchStats, fetchEnrollment]);
+  useEffect(() => {
+    if (!integrations.emailDesignerInstalled) return void 0;
+    let active = true;
+    get("/email-designer-5/templates").then((res) => active && setEmailDesignerTemplates(listFrom(res?.data))).catch(() => active && setEmailDesignerTemplates([]));
+    return () => {
+      active = false;
+    };
+  }, [integrations.emailDesignerInstalled, get]);
+  useEffect(() => {
+    if (!integrations.magicMailInstalled) return void 0;
+    let active = true;
+    get("/magic-mail/designer/templates").then((res) => active && setMagicMailTemplates(listFrom(res?.data))).catch(() => active && setMagicMailTemplates([]));
+    return () => {
+      active = false;
+    };
+  }, [integrations.magicMailInstalled, get]);
+  const updateSetting = useCallback((key, value) => {
+    setSettings((current) => ({ ...current, [key]: value }));
+    setServerErrors((current) => {
+      if (!current[key]) return current;
+      const next = { ...current };
+      delete next[key];
+      return next;
+    });
+  }, []);
+  const patchSettings = useCallback((values) => {
+    setSettings((current) => ({ ...current, ...values }));
+  }, []);
+  const focusField = useCallback((key) => {
+    const section = FIELD_SECTIONS[key];
+    if (section) setOpenSection(section);
+    focusRequest.current = key;
+    setFocusTick((tick) => tick + 1);
+  }, []);
+  useEffect(() => {
+    const key = focusRequest.current;
+    if (!key) return void 0;
+    const frame = window.requestAnimationFrame(() => {
+      const element = document.getElementById(fieldId(key));
+      if (element) {
+        element.focus();
+        element.scrollIntoView?.({ block: "center" });
+      }
+      focusRequest.current = null;
+    });
+    return () => window.cancelAnimationFrame(frame);
+  });
+  useEffect(() => {
+    if (isSaving || !focusBeforeSave.current) return;
+    const previous = focusBeforeSave.current;
+    focusBeforeSave.current = null;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    if (previous.isConnected && !previous.disabled) previous.focus();
+    else getSectionFocusTarget()?.focus();
+  }, [isSaving, getSectionFocusTarget]);
+  const discardChanges = () => {
+    setSettings(initialSettings);
+    setServerErrors({});
+  };
+  const handleSave = async (event) => {
+    event.preventDefault();
+    if (!canWriteSettings || isPermissionLoading) return;
+    if (!isDirty || isSaving) return;
+    if (!settingsFormValid) {
+      focusField(errorKeys[0]);
+      toggleNotification({
+        type: "warning",
+        message: t(
+          "settings.save.invalid",
+          "Some fields need attention. Fix them before you save."
+        )
+      });
+      return;
+    }
+    focusBeforeSave.current = document.activeElement;
+    const payload = buildSavePayload(initialSettings, settings);
+    if (language && language !== initialSettings.ui_language) payload.ui_language = language;
+    setIsSaving(true);
+    try {
+      const response = await put("/magic-link/settings", payload);
+      const saved = toFormState(response?.data?.settings ?? { ...initialSettings, ...payload });
+      setSettings(saved);
+      setInitialSettings(saved);
+      setServerErrors({});
+      toggleNotification({
+        type: "success",
+        message: t("settings.save.success", "Settings saved")
+      });
+    } catch (error) {
+      const field = getServerErrorField(error);
+      const rejected = getServerErrorFields(error);
+      if (rejected) {
+        if (rejected.fields.length > 0) {
+          const named = Object.fromEntries(rejected.fields.map((name) => [name, rejected.code]));
+          setServerErrors(named);
+          focusField(orderedErrorKeys(named)[0]);
+        }
+        toggleNotification({
+          type: "danger",
+          message: {
+            securityForbidden: t(
+              "settings.save.securityForbidden",
+              'Changing link targets, templates, sender, account, MFA, code or rate-limit rules needs the "Settings: Security" permission.'
+            ),
+            linkOrigin: t(
+              "settings.save.linkOriginNotAllowed",
+              "Login link URLs must use an origin allowed in the server configuration."
+            ),
+            mfaNoEnrolled: t(
+              "settings.save.mfaNoEnrolled",
+              'No user has an authenticator app yet. Choose "Users who set up an app" first so users can set one up, then require it for every user.'
+            )
+          }[rejected.code]
+        });
+      } else if (field) {
+        setServerErrors({ [field]: "server" });
+        focusField(field);
+        toggleNotification({
+          type: "danger",
+          message: t(
+            "settings.save.rejected",
+            "The server rejected a value. Check the highlighted field."
+          )
+        });
+      } else {
+        toggleNotification({
+          type: "danger",
+          message: t("settings.save.error", "Settings could not be saved. Please try again.")
+        });
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const handleRateLimitCleanup = async () => {
+    if (!canWriteSettings || isPermissionLoading) return;
+    setIsCleaning(true);
+    try {
+      await post("/magic-link/rate-limit/cleanup");
+      toggleNotification({
+        type: "success",
+        message: t("settings.rateLimit.cleanupSuccess", "Expired entries removed")
+      });
+      await loadStats();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t("settings.rateLimit.cleanupError", "Expired entries could not be removed")
+      });
+    } finally {
+      setIsCleaning(false);
+    }
+  };
+  const handleRateLimitReset = async () => {
+    if (!canWriteSettings || isPermissionLoading) return;
+    try {
+      await post("/magic-link/rate-limit/reset");
+      toggleNotification({
+        type: "success",
+        message: t("settings.rateLimit.resetSuccess", "All rate limits reset")
+      });
+      setConfirmReset(false);
+      await loadStats();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t("settings.rateLimit.resetError", "Rate limits could not be reset")
+      });
+    }
+  };
+  const pageTitle = /* @__PURE__ */ jsx(PluginPageTitle, { children: t("settings.pageTitle", "Settings") });
+  if (isPermissionLoading) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(Page.Loading, {})
+    ] });
+  }
+  if (permissionError) {
+    return /* @__PURE__ */ jsxs(Page.Main, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(
+        Page.Error,
+        {
+          content: t(
+            "common.permissions.loadError",
+            "Your permissions could not be loaded. Reload the page to try again."
+          )
+        }
+      )
+    ] });
+  }
+  if (!canReadSettings) {
+    return /* @__PURE__ */ jsxs(Page.Main, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(Page.NoPermissions, {})
+    ] });
+  }
+  if (loadState === "error") {
+    return /* @__PURE__ */ jsxs(Page.Main, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(
+        Page.Error,
+        {
+          content: t("settings.load.error", "Settings could not be loaded."),
+          action: /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}), onClick: retrySettings, children: t("settings.retry", "Try again") })
+        }
+      )
+    ] });
+  }
+  if (!isReady) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(Page.Loading, { children: t("settings.load.loading", "Loading settings...") })
+    ] });
+  }
+  const statusOn = t("status.active", "ACTIVE");
+  const statusOff = t("status.inactive", "INACTIVE");
+  const sectionProps = {
+    settings,
+    update: updateSetting,
+    patch: patchSettings,
+    disabled: formDisabled,
+    errorFor,
+    statusOn,
+    statusOff
+  };
+  const sections = [
+    {
+      value: "general",
+      icon: Cog,
+      title: t("settings.section.general", "General"),
+      content: /* @__PURE__ */ jsx(GeneralSection, { ...sectionProps })
+    },
+    {
+      value: "auth",
+      icon: Key,
+      title: t("settings.section.auth", "Authentication"),
+      content: /* @__PURE__ */ jsx(AuthSection, { ...sectionProps })
+    },
+    {
+      value: "mfa",
+      icon: Lock,
+      title: t("settings.section.mfa", "Sign-in modes and MFA"),
+      content: /* @__PURE__ */ jsx(
+        MfaSection,
+        {
+          ...sectionProps,
+          enrollment,
+          savedMfaMode: resolveMfaMode(initialSettings)
+        }
+      )
+    },
+    {
+      value: "email",
+      icon: Mail,
+      title: t("settings.section.email", "Email"),
+      content: /* @__PURE__ */ jsx(
+        EmailSection,
+        {
+          ...sectionProps,
+          integrations,
+          emailDesignerTemplates,
+          magicMailTemplates
+        }
+      )
+    },
+    {
+      value: "ratelimit",
+      icon: Clock,
+      title: t("settings.section.rateLimit", "Rate limiting"),
+      content: /* @__PURE__ */ jsx(
+        RateLimitSection,
+        {
+          ...sectionProps,
+          canManage: canWriteSettings,
+          stats: rateLimitStats,
+          onRetryStats: loadStats,
+          onCleanup: handleRateLimitCleanup,
+          onRequestReset: () => setConfirmReset(true),
+          isCleaning
+        }
+      )
+    },
+    {
+      value: "advanced",
+      icon: Code,
+      title: t("settings.section.advanced", "Advanced"),
+      content: /* @__PURE__ */ jsx(AdvancedSection, { ...sectionProps })
+    }
+  ];
+  const invalidSections = new Set(errorKeys.map((key) => FIELD_SECTIONS[key]).filter(Boolean));
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    pageTitle,
+    /* @__PURE__ */ jsxs(Container, { ref: formRef, onSubmit: handleSave, noValidate: true, "aria-busy": isSaving, children: [
+      /* @__PURE__ */ jsxs(StickySaveBar, { children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", textColor: "neutral800", children: t("settings.page.title", "Magic Link Settings") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: t("settings.page.subtitle", "Configure passwordless authentication for your users") })
+        ] }),
+        /* @__PURE__ */ jsxs(HeaderActions, { children: [
+          errorKeys.length > 0 ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "danger-light",
+              size: "M",
+              startIcon: /* @__PURE__ */ jsx(WarningCircle, {}),
+              onClick: () => focusField(errorKeys[0]),
+              children: t(
+                "settings.errors.summary",
+                "{count, plural, one {# field needs attention} other {# fields need attention}}",
+                { count: errorKeys.length }
+              )
+            }
+          ) : null,
+          isDirty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(UnsavedBadge, { role: "status", children: t("common.unsaved.badge", "Unsaved changes") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "M",
+                onClick: () => guard.runGuarded(discardChanges),
+                disabled: isSaving,
+                children: t("settings.discard", "Discard")
+              }
+            )
+          ] }) : null,
+          canWriteSettings ? /* @__PURE__ */ jsx(
+            SaveButton,
+            {
+              type: "submit",
+              size: "M",
+              loading: isSaving,
+              startIcon: /* @__PURE__ */ jsx(Check, {}),
+              disabled: isSaving || isPermissionLoading || !canWriteSettings || !isDirty,
+              children: isSaving ? t("settings.save.saving", "Saving...") : t("settings.save.button", "Save Changes")
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        !canWriteSettings ? /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "default",
+            closeLabel: t("common.close", "Close"),
+            title: t("settings.permission.readOnlyTitle", "Read-only"),
+            children: t(
+              "settings.permission.readOnly",
+              "You have read-only access. Changes cannot be saved."
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(InfoBanner, { children: [
+          /* @__PURE__ */ jsx(BannerIcon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Cog, {}) }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", tag: "p", children: t("settings.info.header", "Important Configuration Notes") }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", tag: "div", children: /* @__PURE__ */ jsxs(BulletList, { children: [
+              /* @__PURE__ */ jsx("li", { children: t("settings.info.line1", "Changes take effect after you save.") }),
+              /* @__PURE__ */ jsx("li", { children: t("settings.info.line2", "Make sure all URLs are correctly configured") }),
+              /* @__PURE__ */ jsx("li", { children: t(
+                "settings.info.line3",
+                "Test the configuration after saving with a test token"
+              ) }),
+              /* @__PURE__ */ jsx("li", { children: t(
+                "settings.info.line4",
+                "Green cards are active features, grey cards are inactive."
+              ) })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Accordion.Root, { value: openSection, onValueChange: setOpenSection, children: sections.map((section) => /* @__PURE__ */ jsxs(Accordion.Item, { value: section.value, children: [
+          /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsxs(Accordion.Trigger, { icon: section.icon, children: [
+            section.title,
+            invalidSections.has(section.value) ? (
+              // The space keeps "General Fields to fix" apart in the accessible name.
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx(SectionErrorMark, { children: t("settings.section.fieldsToFix", "Fields to fix") })
+              ] })
+            ) : null
+          ] }) }),
+          /* @__PURE__ */ jsx(Accordion.Content, { children: section.content })
+        ] }, section.value)) }) }),
+        /* @__PURE__ */ jsxs(FooterBox, { children: [
+          /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: t("settings.footer.quickhelp", "Quick Help") }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: t(
+              "settings.footer.reminder",
+              "After saving, create a test token and try the magic link."
+            ) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: canWriteSettings && confirmReset,
+        title: t("settings.rateLimit.resetTitle", "Reset all rate limits?"),
+        description: t(
+          "settings.rateLimit.resetConfirm",
+          "All blocked IP addresses and email addresses can send requests again immediately."
+        ),
+        confirmLabel: t("settings.rateLimit.reset", "Reset All Limits"),
+        onConfirm: handleRateLimitReset,
+        onClose: () => setConfirmReset(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(UnsavedChangesDialog, { guard, getReturnFocusFallback: getSectionFocusTarget })
+  ] });
+};
+const SettingsWithLanguage = () => /* @__PURE__ */ jsx(LicenseGuard, { children: /* @__PURE__ */ jsx(LanguageProvider, { children: /* @__PURE__ */ jsx(SettingsModern, {}) }) });
+export {
+  SettingsWithLanguage as default
+};