@ciromaciel/auth-react 1.5.0 → 1.7.0

package/dist/index.js

@@ -3237,47 +3237,579 @@ function SignIn({
   });
 }
 
+/*
+ * How a session reads on the account screen: which device, since when, and
+ * how many there are.
+ *
+ * Pure functions, kept out of the component so they can be tested against real
+ * user agents. The order of the checks is the point of this file:
+ *   - iPhone and iPad announce themselves as "like Mac OS X", so they must be
+ *     recognised BEFORE macOS — the old parser showed every phone as a Mac;
+ *   - Edge, Opera and Samsung Internet all carry "Chrome" in the string, and
+ *     Chrome on iOS carries "Safari", so each is checked before the engine it
+ *     imitates — the old parser never reached its Opera branch.
+ */
+
+const BROWSERS = [['Edge', /\bEdg(?:e|A|iOS)?\//], ['Opera', /\b(?:OPR|Opera|OPT)\//], ['Samsung Internet', /\bSamsungBrowser\//], ['Firefox', /\b(?:Firefox|FxiOS)\//], ['Chrome', /\b(?:Chrome|CriOS)\//], ['Safari', /\bSafari\//]];
+
+/**
+ * @param {string} [userAgent]
+ * @returns {{ browser: string|null, os: string|null, kind: 'desktop'|'phone'|'tablet' }}
+ */
+function describeDevice(userAgent) {
+  const ua = userAgent || '';
+  const browser = BROWSERS.find(([, pattern]) => pattern.test(ua))?.[0] || null;
+  if (/\biPad\b/.test(ua)) return {
+    browser,
+    os: 'iPadOS',
+    kind: 'tablet'
+  };
+  if (/\biPhone\b|\biPod\b/.test(ua)) return {
+    browser,
+    os: 'iOS',
+    kind: 'phone'
+  };
+  if (/\bAndroid\b/.test(ua)) return {
+    browser,
+    os: 'Android',
+    kind: /\bMobile\b/.test(ua) ? 'phone' : 'tablet'
+  };
+  if (/\bWindows\b/.test(ua)) return {
+    browser,
+    os: 'Windows',
+    kind: 'desktop'
+  };
+  if (/\bCrOS\b/.test(ua)) return {
+    browser,
+    os: 'ChromeOS',
+    kind: 'desktop'
+  };
+  if (/\bMac OS X\b|\bMacintosh\b/.test(ua)) return {
+    browser,
+    os: 'macOS',
+    kind: 'desktop'
+  };
+  if (/\bLinux\b/.test(ua)) return {
+    browser,
+    os: 'Linux',
+    kind: 'desktop'
+  };
+  return {
+    browser,
+    os: null,
+    kind: 'desktop'
+  };
+}
+
+/** "Chrome no macOS", "Safari", "iOS", or "Aparelho desconhecido". */
+function deviceLabel({
+  browser,
+  os
+}) {
+  if (browser && os) return `${browser} no ${os}`;
+  return browser || os || 'Aparelho desconhecido';
+}
+const pad = n => String(n).padStart(2, '0');
+
+/**
+ * "hoje, 09:12", "ontem, 21:40", "23/09, 14:05" or "23/09/2025, 14:05".
+ *
+ * Calendar days in the viewer's own time zone: a session opened at 23:50 is
+ * "ontem" ten minutes later, which is what the person remembers.
+ */
+function formatSessionStart(value, now = new Date()) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  const startOfDay = d => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000);
+  if (days === 0) return `hoje, ${time}`;
+  if (days === 1) return `ontem, ${time}`;
+  const day = `${pad(date.getDate())}/${pad(date.getMonth() + 1)}`;
+  return date.getFullYear() === now.getFullYear() ? `${day}, ${time}` : `${day}/${date.getFullYear()}, ${time}`;
+}
+
+/** "1 sessão aberta", "3 sessões abertas". */
+function countSessions(count) {
+  return count === 1 ? '1 sessão aberta' : `${count} sessões abertas`;
+}
+
+/**
+ * The current session first, then the others from the newest.
+ *
+ * The API orders by creation only, so the device the person is holding could
+ * land anywhere in the list; it is the one they look for first.
+ */
+function orderSessions(sessions, currentId) {
+  return [...(sessions || [])].sort((a, b) => {
+    if (a.id === currentId) return -1;
+    if (b.id === currentId) return 1;
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  });
+}
+
+/*
+ * Who the signed-in person is, as the account card and the account screen
+ * show it. One rule for both, so the two never disagree about the same person.
+ *
+ * A name equal to the email's local part is not a name: it is what an account
+ * born from a code gets by default, and showing it on top of the email repeats
+ * the same fact. It counts as "no name", and the email becomes the title.
+ */
+function describeUser(user) {
+  const name = (user?.fullName || user?.name || '').trim();
+  const email = (user?.primaryEmailAddress || user?.email || '').trim();
+  const hasRealName = Boolean(name) && name.toLowerCase() !== email.split('@')[0].toLowerCase() && name.toLowerCase() !== email.toLowerCase();
+  const title = hasRealName ? name : email || name;
+  const initials = hasRealName ? name.split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() : (email || name).charAt(0).toUpperCase();
+  return {
+    name,
+    email,
+    hasRealName,
+    title,
+    initials,
+    image: user?.imageUrl || user?.image || null
+  };
+}
+
+const LABELS = {
+  title: 'Conta',
+  subtitle: 'Quem você é, como você entra e onde a sua sessão está aberta.',
+  close: 'Fechar',
+  profileSection: 'Perfil',
+  avatar: 'Foto',
+  name: 'Nome',
+  email: 'E-mail',
+  edit: 'Alterar',
+  save: 'Salvar',
+  cancel: 'Cancelar',
+  remove: 'Remover',
+  notDefined: 'Não definido',
+  namePlaceholder: 'Seu nome',
+  nameHint: 'Aparece no cartão da conta e para quem divide uma organização com você. Enter salva, Esc cancela.',
+  nameRequired: 'Digite um nome.',
+  emailHint: 'É para onde vai o código de acesso, por isso não muda por aqui.',
+  avatarPrompt: 'Arraste uma imagem ou clique para escolher',
+  avatarHint: 'JPG, PNG, GIF ou WebP, até {size}. Ela aparece em todos os painéis.',
+  avatarInvalidType: 'Escolha uma imagem: JPG, PNG, GIF ou WebP.',
+  avatarTooLarge: 'Imagem grande demais. O máximo é {size}.',
+  signInSection: 'Formas de entrar',
+  codeMethod: 'Código',
+  codeByEmail: 'Por e-mail',
+  alwaysOn: 'Sempre ativo',
+  notConnected: 'Não conectado',
+  connect: 'Conectar',
+  disconnect: 'Desconectar',
+  sessionsSection: 'Sessões',
+  devices: 'Aparelhos',
+  showSessions: 'Ver sessões',
+  hideSessions: 'Ocultar',
+  thisDevice: 'Este aparelho',
+  end: 'Encerrar',
+  since: 'desde',
+  unknownIP: 'IP desconhecido',
+  loadingSessions: 'Carregando as sessões…',
+  noSessionsFound: 'Nenhuma sessão encontrada.',
+  confirmEndBody: 'Quem estiver nesses aparelhos volta para a tela de entrar. Este aparelho continua conectado.',
+  genericFailure: 'Não foi possível concluir. Tente de novo.'
+};
+const PROVIDER_MARKS = {
+  google: iconsReact.IconBrandGoogle,
+  github: iconsReact.IconBrandGithub
+};
+const DEVICE_MARKS = {
+  desktop: iconsReact.IconDeviceLaptop,
+  phone: iconsReact.IconDeviceMobile,
+  tablet: iconsReact.IconDeviceTablet
+};
+const color = token => token === 'transparent' ? 'transparent' : `var(--mantine-color-${token.replace('.', '-')})`;
+
+/*
+ * The action buttons, as data. Hover and keyboard focus share the same look,
+ * like the account card's rows. A destructive action keeps its red text on
+ * hover and only gains a light red ground: turning the text black while the
+ * border turned red read as a different button.
+ */
+const TONES = {
+  default: {
+    rest: {
+      text: 'gray.9',
+      border: 'gray.3',
+      ground: 'transparent'
+    },
+    active: {
+      border: 'gray.9'
+    }
+  },
+  dark: {
+    rest: {
+      text: 'white',
+      border: 'gray.9',
+      ground: 'gray.9'
+    },
+    active: {
+      border: 'gray.7',
+      ground: 'gray.7'
+    }
+  },
+  quiet: {
+    rest: {
+      text: 'gray.6',
+      border: 'transparent',
+      ground: 'transparent'
+    },
+    active: {
+      text: 'gray.9',
+      border: 'gray.3'
+    }
+  },
+  danger: {
+    rest: {
+      text: 'red.8',
+      border: 'transparent',
+      ground: 'transparent'
+    },
+    active: {
+      ground: 'red.0',
+      border: 'red.2'
+    }
+  },
+  dangerOutline: {
+    rest: {
+      text: 'red.8',
+      border: 'gray.3',
+      ground: 'transparent'
+    },
+    active: {
+      ground: 'red.0',
+      border: 'red.2'
+    }
+  },
+  dangerFill: {
+    rest: {
+      text: 'white',
+      border: 'red.8',
+      ground: 'red.8'
+    },
+    active: {
+      border: 'red.9',
+      ground: 'red.9'
+    }
+  }
+};
+function ActionButton({
+  tone = 'default',
+  loading = false,
+  disabled = false,
+  children,
+  style,
+  ...others
+}) {
+  const [isActive, setIsActive] = react.useState(false);
+  const isBlocked = disabled || loading;
+  const look = {
+    ...TONES[tone].rest,
+    ...(isActive && !isBlocked ? TONES[tone].active : {})
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(core.UnstyledButton, {
+    disabled: isBlocked,
+    onMouseEnter: () => setIsActive(true),
+    onMouseLeave: () => setIsActive(false),
+    onFocus: () => setIsActive(true),
+    onBlur: () => setIsActive(false),
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+      padding: '5px 12px',
+      fontSize: 12,
+      fontWeight: 700,
+      lineHeight: 1.5,
+      whiteSpace: 'nowrap',
+      borderRadius: 0,
+      color: color(look.text),
+      background: color(look.ground),
+      border: `1px solid ${color(look.border)}`,
+      opacity: disabled ? 0.4 : 1,
+      cursor: isBlocked ? 'default' : 'pointer',
+      ...style
+    },
+    ...others,
+    children: [loading && /*#__PURE__*/jsxRuntime.jsx(core.Loader, {
+      size: 10,
+      color: "currentColor"
+    }), children]
+  });
+}
+function SectionLabel({
+  children,
+  note
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+    justify: "space-between",
+    align: "baseline",
+    gap: 8,
+    mb: 4,
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: 11,
+      fw: 800,
+      tt: "uppercase",
+      lts: "1.5px",
+      c: "gray.4",
+      children: children
+    }), note && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: 12,
+      fw: 500,
+      c: "gray.5",
+      children: note
+    })]
+  });
+}
+function Section({
+  label,
+  note,
+  isFirst,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    px: 24,
+    pt: 16,
+    pb: 8,
+    style: isFirst ? undefined : {
+      borderTop: '1px solid var(--mantine-color-gray-2)'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(SectionLabel, {
+      note: note,
+      children: label
+    }), children]
+  });
+}
+const rowDivider = {
+  borderTop: '1px solid var(--mantine-color-gray-2)'
+};
+
+/** A label, a value and an optional action, on the same 88px label column. */
+function Row$1({
+  label,
+  children,
+  action,
+  isFirst
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    py: 10,
+    mih: 52,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: label ? '88px 1fr auto' : '1fr auto',
+      alignItems: 'center',
+      gap: 12,
+      ...(isFirst ? {} : rowDivider)
+    },
+    children: [label && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: 12,
+      fw: 500,
+      c: "gray.5",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+      fz: 13,
+      fw: 500,
+      c: "gray.9",
+      style: {
+        minWidth: 0,
+        overflowWrap: 'anywhere'
+      },
+      children: children
+    }), action || /*#__PURE__*/jsxRuntime.jsx("span", {})]
+  });
+}
+function Hint({
+  children,
+  c = 'gray.5'
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+    fz: 12,
+    fw: 500,
+    c: c,
+    mt: 2,
+    children: children
+  });
+}
+
+/*
+ * A failure is shown where it happened, on the screen itself. Five of the
+ * seven panels passed no `onError`, and a rejected photo or a failed rename
+ * vanished without a word.
+ */
+function FailureNote({
+  failure,
+  section
+}) {
+  if (failure?.section !== section) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+    role: "alert",
+    fz: 12,
+    fw: 600,
+    c: "red.8",
+    mt: 4,
+    children: failure.message
+  });
+}
+function Chip({
+  children,
+  tone = 'outline'
+}) {
+  const looks = {
+    outline: {
+      c: 'gray.6',
+      bg: 'transparent',
+      border: 'gray.3'
+    },
+    dark: {
+      c: 'white',
+      bg: 'gray.9',
+      border: 'gray.9'
+    },
+    good: {
+      c: 'teal.9',
+      bg: 'teal.0',
+      border: 'teal.2'
+    }
+  };
+  const look = looks[tone];
+  return /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+    component: "span",
+    fz: 10,
+    fw: 800,
+    tt: "uppercase",
+    lts: "1.2px",
+    lh: 1.6,
+    px: 6,
+    c: look.c,
+    bg: look.bg,
+    style: {
+      border: `1px solid ${color(look.border)}`,
+      whiteSpace: 'nowrap',
+      display: 'inline-block'
+    },
+    children: children
+  });
+}
+
+/** An icon and a label, side by side, with an optional line under the label. */
+function WithIcon({
+  icon: Icon,
+  children,
+  detail
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+    gap: 10,
+    wrap: "nowrap",
+    align: detail ? 'flex-start' : 'center',
+    children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+      size: 18,
+      stroke: 1.5,
+      style: {
+        flex: 'none',
+        color: 'var(--mantine-color-gray-5)',
+        marginTop: detail ? 1 : 0
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      style: {
+        minWidth: 0
+      },
+      children: [children, detail && /*#__PURE__*/jsxRuntime.jsx(Hint, {
+        children: detail
+      })]
+    })]
+  });
+}
+function SquareAvatar({
+  src,
+  initials,
+  size
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+    src: src || null,
+    alt: "",
+    size: size,
+    radius: 0,
+    color: "gray.9",
+    variant: "filled",
+    styles: {
+      root: {
+        borderRadius: 0,
+        flex: 'none'
+      },
+      placeholder: {
+        fontSize: Math.round(size / 3),
+        fontWeight: 800
+      }
+    },
+    children: initials
+  });
+}
+const formatSize = bytes => `${Math.round(bytes / 1024)} KB`;
+
+/**
+ * @param {object} props
+ * @param {'modal'|'card'} [props.variant='modal']
+ * @param {boolean} [props.opened] - Visibility (modal only)
+ * @param {Function} [props.onClose] - Closing (modal only)
+ * @param {Function} [props.onProfileUpdate] - Receives `{ name }` or `{ image }`
+ * @param {Function} [props.onSessionRevoked] - Receives the ended session's id
+ * @param {Function} [props.onOtherSessionsRevoked]
+ * @param {Function} [props.onProviderUnlinked] - Receives the provider id
+ * @param {Function} [props.onError] - Receives the Error and `{ section, isShownOnScreen: true }`:
+ *   the screen already shows the message, so a panel should not toast it again
+ * @param {boolean} [props.showAvatar=true]
+ * @param {boolean} [props.showName=true]
+ * @param {boolean} [props.showEmail=true]
+ * @param {boolean} [props.showSignInMethods=true] - Drawn only when the application enabled a provider
+ * @param {boolean} [props.showSessions=true]
+ * @param {Partial<typeof LABELS>} [props.labels] - To change a word; the defaults are already Portuguese
+ * @param {string} [props.title]
+ * @param {string} [props.subtitle]
+ * @param {string|import('react').ReactNode} [props.logo] - Card variant only
+ * @param {number} [props.logoHeight=28]
+ * @param {number} [props.width=520]
+ * @param {number} [props.maxAvatarSize=512000] - In bytes
+ * @param {import('react').ReactNode} [props.customSections] - Rendered after the built-in sections
+ */
 function UserProfile({
-  // Variant
   variant = 'modal',
   opened,
   onClose,
-  // Callbacks
   onProfileUpdate,
   onSessionRevoked,
   onOtherSessionsRevoked,
+  onProviderUnlinked,
   onError,
-  // Features toggle
   showAvatar = true,
   showName = true,
   showEmail = true,
+  showSignInMethods = true,
   showSessions = true,
-  // Customização
   labels = {},
-  title = 'Account',
-  subtitle = 'Manage your account info.',
+  title,
+  subtitle,
   logo,
   logoHeight = 28,
-  width = 500,
-  // Avatar config
+  width = 520,
   maxAvatarSize = 500 * 1024,
-  // 500KB
-
-  // Custom sections (React nodes to render after built-in sections)
   customSections,
   ...containerProps
 }) {
-  // Local state - which section is expanded
-  const [editingSection, setEditingSection] = react.useState(null); // 'password' | 'email' | 'name' | 'avatar' | null
-
-  // Hook para profile
+  const t = {
+    ...LABELS,
+    ...labels
+  };
+  const isVisible = variant === 'card' || Boolean(opened);
   const {
     user,
     updateProfile,
     loadingUpdateProfile
   } = useUser();
-
-  // Hook para sessions
   const {
     currentSession,
     sessions,
@@ -3288,698 +3820,650 @@ function UserProfile({
     loadingListSessions,
     loadingRevokeSession
   } = useSessions();
+  const identity = describeUser(user);
 
-  // Load sessions when opened (modal) or component mounts (card), and when sessions section is opened
-  react.useEffect(() => {
-    if (showSessions && (variant === 'card' || opened)) {
-      // Fetch current session first to get the session ID, then list all sessions
-      getSession().catch(err => console.warn('Failed to get current session:', err));
-      listSessions().catch(err => console.warn('Failed to load sessions:', err));
-    }
-  }, [opened, showSessions, variant]);
-
-  // Helper to parse user agent string
-  const parseUserAgent = ua => {
-    if (!ua) return {
-      browser: 'Unknown Browser',
-      os: 'Unknown OS'
-    };
-    let browser = 'Unknown Browser';
-    let os = 'Unknown OS';
-
-    // Detect browser
-    if (ua.includes('Chrome') && !ua.includes('Edg')) browser = 'Chrome';else if (ua.includes('Firefox')) browser = 'Firefox';else if (ua.includes('Safari') && !ua.includes('Chrome')) browser = 'Safari';else if (ua.includes('Edg')) browser = 'Edge';else if (ua.includes('Opera') || ua.includes('OPR')) browser = 'Opera';
-
-    // Detect OS
-    if (ua.includes('Windows')) os = 'Windows';else if (ua.includes('Mac OS')) os = 'macOS';else if (ua.includes('Linux')) os = 'Linux';else if (ua.includes('Android')) os = 'Android';else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
-    return {
-      browser,
-      os
-    };
-  };
-
-  // Session handlers
-  const handleRevokeSession = async sessionId => {
-    // Check if revoking current session
-    const isCurrentSession = sessionId === currentSession?.id || sessions.length === 1;
-
-    // If revoking current session, handle logout immediately after revocation
-    if (isCurrentSession) {
-      try {
-        await revokeSession(sessionId);
-        onSessionRevoked?.(sessionId);
-      } catch (error) {
-        onError?.(error);
-        // Even if it fails, we're revoking our own session, so just logout
-        // The server already revoked our session
-      }
-      // Clear auth state and redirect
-      localStorage.removeItem('auth:token');
-      window.dispatchEvent(new CustomEvent('auth:session-revoked'));
-      if (variant === 'modal') onClose?.();
-      return;
-    }
-
-    // Revoking another session
-    try {
-      await revokeSession(sessionId);
-      onSessionRevoked?.(sessionId);
-    } catch (error) {
-      // Check for 401 error (our SDK uses error.res, axios uses error.response)
-      const status = error.res?.status || error.response?.status;
-      if (status === 401) {
-        // This means our session was revoked, not the target one - do logout
-        localStorage.removeItem('auth:token');
-        window.dispatchEvent(new CustomEvent('auth:session-revoked'));
-        if (variant === 'modal') onClose?.();
-        return;
-      }
-      onError?.(error);
-    }
-  };
-  const handleRevokeOtherSessions = async () => {
-    try {
-      await revokeOtherSessions();
-      onOtherSessionsRevoked?.();
-    } catch (error) {
-      onError?.(error);
-    }
-  };
-
-  // Name form
+  // One editor open at a time: 'name', 'avatar' or null.
+  const [editing, setEditing] = react.useState(null);
+  const [avatarPreview, setAvatarPreview] = react.useState(null);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [areSessionsOpen, setAreSessionsOpen] = react.useState(false);
+  const [isSessionsRowActive, setIsSessionsRowActive] = react.useState(false);
+  const [isConfirmingEnd, setIsConfirmingEnd] = react.useState(false);
+  const [providers, setProviders] = react.useState([]);
+  const [linked, setLinked] = react.useState([]);
+  const [pendingProvider, setPendingProvider] = react.useState(null);
+  const [failure, setFailure] = react.useState(null);
+  const sessionsListId = react.useId();
   const nameForm = form.useForm({
     initialValues: {
       name: ''
     },
     validate: {
-      name: v => !v ? labels.nameRequired || 'Nome obrigatório' : null
+      name: value => value.trim() ? null : t.nameRequired
     }
   });
 
-  // Avatar state (base64)
-  const [avatarPreview, setAvatarPreview] = react.useState(null);
-  const [avatarFile, setAvatarFile] = react.useState(null);
+  // Sessions and sign-in methods load when the screen is shown, not before.
+  react.useEffect(() => {
+    if (!isVisible) return;
+    if (showSessions) {
+      getSession().catch(error => console.warn('[AuthSDK] Failed to read the current session:', error.message));
+      listSessions().catch(error => console.warn('[AuthSDK] Failed to list sessions:', error.message));
+    }
+    if (showSignInMethods) refreshSignInMethods();
+  }, [isVisible, showSessions, showSignInMethods]);
 
-  // Handle file selection and convert to base64
-  const handleAvatarFileChange = file => {
-    if (!file) {
-      setAvatarPreview(null);
-      setAvatarFile(null);
-      return;
+  // Closing the modal resets it: the next opening starts at rest.
+  react.useEffect(() => {
+    if (isVisible) return;
+    closeEditor();
+    setAreSessionsOpen(false);
+    setIsConfirmingEnd(false);
+  }, [isVisible]);
+  async function refreshSignInMethods() {
+    const available = await getSocialProviders();
+    setProviders(available);
+    if (available.length === 0) return;
+    try {
+      setLinked(await getLinkedProviders());
+    } catch (error) {
+      console.warn('[AuthSDK] Failed to list linked providers:', error.message);
+      setLinked([]);
     }
+  }
 
-    // Validate file type
-    if (!file.type.startsWith('image/')) {
-      onError?.(new Error(labels.avatarInvalidType || 'Por favor, selecione uma imagem válida'));
+  /*
+   * `onError` still fires, with `isShownOnScreen: true`: a panel that wants a
+   * log or a metric has it, and knows not to show a second message.
+   */
+  function fail(section, error) {
+    setFailure({
+      section,
+      message: error?.message || t.genericFailure
+    });
+    onError?.(error, {
+      section,
+      isShownOnScreen: true
+    });
+  }
+  function closeEditor() {
+    setFailure(null);
+    setEditing(null);
+    setAvatarPreview(null);
+    setIsDragging(false);
+    nameForm.reset();
+  }
+  function openEditor(section) {
+    closeEditor();
+    setEditing(section);
+    if (section === 'name') nameForm.setValues({
+      name: identity.name
+    });
+  }
+  async function handleSaveName(values) {
+    const name = values.name.trim();
+    try {
+      await updateProfile({
+        name
+      });
+      closeEditor();
+      onProfileUpdate?.({
+        name
+      });
+    } catch (error) {
+      fail('name', error);
+    }
+  }
+  function handleAvatarFile(file) {
+    if (!file) return;
+    setFailure(null);
+    if (!file.type?.startsWith('image/')) {
+      fail('avatar', new Error(t.avatarInvalidType));
       return;
     }
-
-    // Validate file size
     if (file.size > maxAvatarSize) {
-      onError?.(new Error(labels.avatarTooLarge || `Imagem muito grande. Máximo ${Math.round(maxAvatarSize / 1024)}KB.`));
+      fail('avatar', new Error(t.avatarTooLarge.replace('{size}', formatSize(maxAvatarSize))));
       return;
     }
-    setAvatarFile(file);
-
-    // Convert to base64
     const reader = new FileReader();
-    reader.onloadend = () => {
-      setAvatarPreview(reader.result);
-    };
+    reader.onloadend = () => setAvatarPreview(reader.result);
     reader.readAsDataURL(file);
-  };
-
-  // Populate forms when user data is available or section opens
-  react.useEffect(() => {
-    if (editingSection === 'name' && user?.name) {
-      nameForm.setValues({
-        name: user.name
-      });
-    }
-    if (editingSection === 'avatar' && user?.image) {
-      setAvatarPreview(user.image);
-    }
-  }, [editingSection, user]);
-  const handleToggleSection = section => {
-    if (editingSection === section) {
-      setEditingSection(null);
-      nameForm.reset();
-      setAvatarPreview(null);
-      setAvatarFile(null);
-    } else {
-      setEditingSection(section);
-    }
-  };
-  const handleChangeName = async values => {
+  }
+  async function saveAvatar(image) {
     try {
       await updateProfile({
-        name: values.name
+        image
       });
-      nameForm.reset();
-      setEditingSection(null);
+      closeEditor();
       onProfileUpdate?.({
-        name: values.name
+        image
       });
     } catch (error) {
-      onError?.(error);
+      fail('avatar', error);
     }
-  };
-  const handleChangeAvatar = async () => {
-    if (!avatarPreview) {
-      // Optionally handle this validation error via callback or just return?
-      // Since it's a validation error before async call, we might want to expose it too?
-      // The original code used notifications. Let's send to onError for consistency or just return if it's UI state.
-      // Actually, for validation within the component, maybe we can just let it be silent or use form error if applicable?
-      // But this is outside form context. Let's use onError with a custom error object.
-      onError?.(new Error(labels.avatarRequired || 'Selecione uma imagem'));
-      return;
+  }
+  async function handleUnlink(provider) {
+    setPendingProvider(provider);
+    setFailure(null);
+    try {
+      await unlinkSocialProvider(provider);
+      setLinked(current => current.filter(item => item.provider !== provider));
+      onProviderUnlinked?.(provider);
+    } catch (error) {
+      fail('signIn', error);
+    } finally {
+      setPendingProvider(null);
     }
+  }
+  async function handleLink(provider) {
+    setPendingProvider(provider);
+    setFailure(null);
     try {
-      await updateProfile({
-        image: avatarPreview
-      });
-      setAvatarPreview(null);
-      setAvatarFile(null);
-      setEditingSection(null);
-      onProfileUpdate?.({
-        image: avatarPreview
-      });
+      // Leaves for the provider's consent screen; the page navigates away.
+      await startSocialLink(provider);
     } catch (error) {
-      onError?.(error);
+      setPendingProvider(null);
+      fail('signIn', error);
     }
-  };
-  const handleRemoveAvatar = async () => {
+  }
+  async function handleEndSession(sessionId) {
+    setFailure(null);
     try {
-      await updateProfile({
-        image: ''
-      });
-      setAvatarPreview(null);
-      setAvatarFile(null);
-      setEditingSection(null);
-      onProfileUpdate?.({
-        image: ''
-      });
+      await revokeSession(sessionId);
+      onSessionRevoked?.(sessionId);
     } catch (error) {
-      onError?.(error);
+      fail('sessions', error);
     }
-  };
-
-  // Reusable Section Header
-  const SectionHeader = ({
-    icon: Icon,
-    sectionTitle,
-    description
-  }) => /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-    gap: "sm",
-    mb: "lg",
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-      size: 36,
-      variant: "subtle",
-      color: "gray",
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        size: 28,
+  }
+  async function handleEndOthers() {
+    setFailure(null);
+    try {
+      await revokeOtherSessions();
+      setIsConfirmingEnd(false);
+      onOtherSessionsRevoked?.();
+    } catch (error) {
+      fail('sessions', error);
+    }
+  }
+  if (!user) return null;
+  const ordered = orderSessions(sessions, currentSession?.id);
+  const current = ordered.find(item => item.id === currentSession?.id);
+  const othersCount = ordered.filter(item => item.id !== currentSession?.id).length;
+  const hasProfile = showAvatar || showName || showEmail;
+  const hasSignInMethods = showSignInMethods && providers.length > 0;
+  const sessionsSummary = current ? `${deviceLabel(describeDevice(current.userAgent))} (${t.thisDevice.toLowerCase()})${othersCount ? ` e mais ${othersCount}` : ''}` : null;
+  const header = /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+    align: "flex-start",
+    wrap: "nowrap",
+    gap: 12,
+    px: 24,
+    pt: 20,
+    pb: 16,
+    style: {
+      borderBottom: '1px solid var(--mantine-color-gray-2)'
+    },
+    children: [variant === 'card' && logo && (typeof logo === 'string' ? /*#__PURE__*/jsxRuntime.jsx(core.Image, {
+      src: logo,
+      alt: "",
+      h: logoHeight,
+      w: "auto",
+      fit: "contain"
+    }) : logo), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        component: variant === 'modal' ? core.Modal.Title : 'h2',
+        m: 0,
+        fz: 20,
+        fw: 900,
+        lts: "-0.03em",
+        lh: 1.2,
+        c: "gray.9",
+        children: title || t.title
+      }), /*#__PURE__*/jsxRuntime.jsx(Hint, {
+        children: subtitle || t.subtitle
+      })]
+    }), variant === 'modal' && /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+      "aria-label": t.close,
+      onClick: onClose,
+      style: {
+        width: 32,
+        height: 32,
+        padding: 0,
+        flex: 'none'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+        size: 16,
         stroke: 1.5
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-      gap: 0,
+    })]
+  });
+  const identityStrip = /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+    gap: 14,
+    wrap: "nowrap",
+    px: 24,
+    py: 18,
+    bg: "gray.1",
+    style: {
+      borderBottom: '1px solid var(--mantine-color-gray-2)'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(SquareAvatar, {
+      src: identity.image,
+      initials: identity.initials,
+      size: 48
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      style: {
+        minWidth: 0
+      },
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-        fw: 600,
-        size: "sm",
-        children: sectionTitle
-      }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-        size: "xs",
-        c: "dimmed",
-        children: description
+        fz: 15,
+        fw: 800,
+        c: "gray.9",
+        lh: 1.3,
+        truncate: "end",
+        children: identity.title
+      }), identity.hasRealName && identity.email && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 12,
+        fw: 500,
+        c: "gray.5",
+        truncate: "end",
+        children: identity.email
       })]
     })]
   });
-
-  // Reusable Row component
-  const SettingRow = ({
-    label,
-    children,
-    action,
-    actionLabel,
-    onClick,
-    expanded
-  }) => /*#__PURE__*/jsxRuntime.jsx(core.Box, {
-    py: "xs",
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-      justify: "space-between",
-      wrap: "nowrap",
-      align: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        gap: "xl",
-        wrap: "nowrap",
-        flex: 1,
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-          size: "sm",
-          c: "dimmed",
-          w: 100,
-          children: label
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
-          flex: 1,
-          children: children
+  const avatarEditor = /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+    gap: 10,
+    py: 12,
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      fz: 12,
+      fw: 700,
+      c: "gray.9",
+      children: t.avatar
+    }), /*#__PURE__*/jsxRuntime.jsx(core.FileButton, {
+      onChange: handleAvatarFile,
+      accept: "image/png,image/jpeg,image/gif,image/webp",
+      children: props => /*#__PURE__*/jsxRuntime.jsxs(core.UnstyledButton, {
+        ...props,
+        onDragOver: event => {
+          event.preventDefault();
+          setIsDragging(true);
+        },
+        onDragLeave: () => setIsDragging(false),
+        onDrop: event => {
+          event.preventDefault();
+          setIsDragging(false);
+          handleAvatarFile(event.dataTransfer.files?.[0]);
+        },
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 14,
+          padding: 14,
+          borderRadius: 0,
+          background: isDragging ? 'var(--mantine-color-gray-2)' : 'var(--mantine-color-gray-1)',
+          border: `1px dashed var(--mantine-color-${isDragging ? 'gray-9' : 'gray-4'})`
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(SquareAvatar, {
+          src: avatarPreview || identity.image,
+          initials: identity.initials,
+          size: 64
+        }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+            fz: 13,
+            fw: 700,
+            c: "gray.9",
+            children: t.avatarPrompt
+          }), /*#__PURE__*/jsxRuntime.jsx(Hint, {
+            children: t.avatarHint.replace('{size}', formatSize(maxAvatarSize))
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(FailureNote, {
+      failure: failure,
+      section: "avatar"
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      justify: "flex-end",
+      gap: 8,
+      children: [identity.image && !avatarPreview && /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+        tone: "danger",
+        loading: loadingUpdateProfile,
+        onClick: () => saveAvatar(''),
+        style: {
+          marginRight: 'auto'
+        },
+        children: t.remove
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+        tone: "quiet",
+        onClick: closeEditor,
+        children: t.cancel
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+        tone: "dark",
+        loading: loadingUpdateProfile,
+        disabled: !avatarPreview,
+        onClick: () => saveAvatar(avatarPreview),
+        children: t.save
+      })]
+    })]
+  });
+  const nameEditor = /*#__PURE__*/jsxRuntime.jsx("form", {
+    onSubmit: nameForm.onSubmit(handleSaveName),
+    style: {
+      ...rowDivider,
+      padding: '12px 0 14px'
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      gap: 10,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+        label: t.name,
+        placeholder: t.namePlaceholder,
+        autoComplete: "name",
+        "data-autofocus": true,
+        autoFocus: true,
+        radius: 0,
+        size: "sm",
+        styles: {
+          label: {
+            fontSize: 12,
+            fontWeight: 700,
+            color: 'var(--mantine-color-gray-9)',
+            marginBottom: 6
+          }
+        },
+        onKeyDown: event => {
+          if (event.key !== 'Escape') return;
+          event.stopPropagation();
+          closeEditor();
+        },
+        ...nameForm.getInputProps('name')
+      }), /*#__PURE__*/jsxRuntime.jsx(Hint, {
+        children: t.nameHint
+      }), /*#__PURE__*/jsxRuntime.jsx(FailureNote, {
+        failure: failure,
+        section: "name"
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        justify: "flex-end",
+        gap: 8,
+        children: [/*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tone: "quiet",
+          onClick: closeEditor,
+          children: t.cancel
+        }), /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tone: "dark",
+          type: "submit",
+          loading: loadingUpdateProfile,
+          children: t.save
         })]
-      }), action && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
-        label: actionLabel || action,
-        position: "left",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
-          size: "xs",
-          fw: 300,
-          onClick: onClick,
-          c: "gray",
-          underline: "none",
-          children: expanded ? labels.cancel || 'Cancel' : action
-        })
       })]
     })
   });
-
-  // Conteúdo interno compartilhado
-  const profileContent = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [(showAvatar || showName || showEmail) && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
-      mb: "lg",
-      children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
-        icon: iconsReact.IconUser,
-        sectionTitle: labels.profileSection || 'Profile',
-        description: labels.profileDescription || 'Your personal information'
-      }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-        gap: "sm",
-        children: [showAvatar && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
-            label: labels.avatar || 'Avatar',
-            action: labels.update || 'Update',
-            actionLabel: labels.updateAvatar || 'Update your profile picture',
-            onClick: () => handleToggleSection('avatar'),
-            expanded: editingSection === 'avatar',
-            children: /*#__PURE__*/jsxRuntime.jsx(core.Group, {
-              gap: "md",
-              children: /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
-                src: user?.image,
-                name: user?.name || user?.email,
-                size: 48,
-                radius: "xl"
-                // color="initials"
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
-            in: editingSection === 'avatar',
-            children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
-              p: "sm",
-              withBorder: true,
-              radius: "sm",
-              children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-                gap: "md",
-                align: "center",
-                children: [/*#__PURE__*/jsxRuntime.jsx(core.FileButton, {
-                  onChange: handleAvatarFileChange,
-                  accept: "image/*",
-                  children: props => /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
-                    label: labels.clickToChange || 'Clique para alterar',
-                    position: "bottom",
-                    children: /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
-                      ...props,
-                      pos: "relative",
-                      style: {
-                        cursor: 'pointer'
-                      },
-                      children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
-                        src: avatarPreview || user?.image,
-                        name: user?.name || user?.email,
-                        size: 80,
-                        radius: 80,
-                        color: "gray"
-                      }), /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-                        size: 26,
-                        radius: "xl",
-                        color: "gray",
-                        pos: "absolute",
-                        bottom: 0,
-                        right: 0,
-                        bd: "2px solid body",
-                        children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconPhoto, {
-                          size: 14,
-                          stroke: 1.5
-                        })
-                      })]
-                    })
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                  size: "xs",
-                  c: "dimmed",
-                  ta: "center",
-                  children: labels.avatarHint || `Máximo ${Math.round(maxAvatarSize / 1024)}KB • JPG, PNG, GIF, WebP`
-                }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                  justify: "center",
-                  gap: "xs",
-                  children: [user?.image && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                    variant: "subtle",
-                    color: "gray",
-                    size: "xs",
-                    onClick: handleRemoveAvatar,
-                    loading: loadingUpdateProfile,
-                    loaderProps: {
-                      size: 12
-                    },
-                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconTrash, {
-                      size: 14,
-                      stroke: 1.5
-                    }),
-                    children: labels.remove || 'Remover'
-                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                    variant: "default",
-                    size: "xs",
-                    onClick: () => handleToggleSection('avatar'),
-                    children: labels.cancel || 'Cancelar'
-                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                    size: "xs",
-                    loading: loadingUpdateProfile,
-                    loaderProps: {
-                      size: 12
-                    },
-                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
-                      size: 14,
-                      stroke: 1.5
-                    }),
-                    onClick: handleChangeAvatar,
-                    disabled: !avatarPreview || avatarPreview === user?.image,
-                    children: labels.save || 'Salvar'
-                  })]
-                })]
-              })
-            })
-          })]
-        }), showName && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
-            label: labels.name || 'Nome',
-            action: labels.change || 'Change',
-            actionLabel: labels.changeName || 'Change your display name',
-            onClick: () => handleToggleSection('name'),
-            expanded: editingSection === 'name',
-            children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-              gap: "xs",
-              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconPencil, {
-                size: 18,
-                stroke: 1.5,
-                color: "var(--mantine-color-dimmed)"
-              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                size: "sm",
-                children: user?.name || labels.notDefined || 'Não definido'
-              })]
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
-            in: editingSection === 'name',
-            children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
-              p: "sm",
-              withBorder: true,
-              radius: "sm",
-              children: /*#__PURE__*/jsxRuntime.jsx("form", {
-                onSubmit: nameForm.onSubmit(handleChangeName),
-                children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-                  gap: "sm",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
-                    label: labels.name || 'Nome',
-                    placeholder: labels.namePlaceholder || 'Digite seu nome',
-                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUser, {
-                      size: 16,
-                      stroke: 1.5
-                    }),
-                    ...nameForm.getInputProps('name')
-                  }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                    justify: "flex-end",
-                    gap: "xs",
-                    children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                      variant: "default",
-                      size: "xs",
-                      onClick: () => handleToggleSection('name'),
-                      children: labels.cancel || 'Cancelar'
-                    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                      type: "submit",
-                      size: "xs",
-                      loading: loadingUpdateProfile,
-                      loaderProps: {
-                        size: 12
-                      },
-                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
-                        size: 14,
-                        stroke: 1.5
-                      }),
-                      children: labels.save || 'Salvar'
-                    })]
-                  })]
-                })
-              })
-            })
-          })]
-        }), showEmail && /*#__PURE__*/jsxRuntime.jsx(SettingRow, {
-          label: labels.email || 'Email',
+  const sessionsList = /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+    id: sessionsListId,
+    mb: 10,
+    children: [loadingListSessions && ordered.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(Hint, {
+      children: t.loadingSessions
+    }) : ordered.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(Hint, {
+      children: t.noSessionsFound
+    }) : ordered.map((item, index) => {
+      const device = describeDevice(item.userAgent);
+      const isCurrent = item.id === currentSession?.id;
+      const since = formatSessionStart(item.createdAt);
+      return /*#__PURE__*/jsxRuntime.jsx(Row$1, {
+        isFirst: index === 0,
+        action: isCurrent ? null : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tone: "danger",
+          loading: loadingRevokeSession === item.id,
+          onClick: () => handleEndSession(item.id),
+          "aria-label": `${t.end} ${deviceLabel(device)}`,
+          children: t.end
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(WithIcon, {
+          icon: DEVICE_MARKS[device.kind] || iconsReact.IconDeviceDesktop,
+          detail: `${item.ipAddress ? `IP ${item.ipAddress}` : t.unknownIP}${since ? ` · ${t.since} ${since}` : ''}`,
           children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-            gap: "xs",
-            children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconMail, {
-              size: 18,
-              stroke: 1.5,
-              color: "var(--mantine-color-dimmed)"
-            }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-              size: "sm",
-              children: user?.email || 'email@exemplo.com'
+            gap: 6,
+            wrap: "wrap",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              children: deviceLabel(device)
+            }), isCurrent && /*#__PURE__*/jsxRuntime.jsx(Chip, {
+              tone: "dark",
+              children: t.thisDevice
             })]
           })
+        })
+      }, item.id);
+    }), /*#__PURE__*/jsxRuntime.jsx(FailureNote, {
+      failure: failure,
+      section: "sessions"
+    }), othersCount > 0 && current && (isConfirmingEnd ? /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      role: "alertdialog",
+      "aria-label": endOthersQuestion(othersCount),
+      gap: 10,
+      p: 12,
+      mt: 4,
+      bg: "red.0",
+      style: {
+        border: '1px solid var(--mantine-color-red-2)'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+        fz: 12,
+        fw: 500,
+        c: "gray.7",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          span: true,
+          inherit: true,
+          fw: 800,
+          c: "gray.9",
+          children: endOthersQuestion(othersCount)
+        }), ' ', t.confirmEndBody]
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        justify: "flex-end",
+        gap: 8,
+        children: [/*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tone: "quiet",
+          onClick: () => setIsConfirmingEnd(false),
+          children: t.cancel
+        }), /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tone: "dangerFill",
+          loading: loadingRevokeSession === 'all',
+          onClick: handleEndOthers,
+          children: endOthersConfirm(othersCount)
         })]
       })]
-    }), showSessions && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
-      mb: "md",
-      children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
-        icon: iconsReact.IconShield,
-        sectionTitle: labels.securitySection || 'Security',
-        description: labels.securityDescription || 'Protect your account'
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
-        gap: "sm",
-        children: showSessions && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
-            label: labels.sessions || 'Sessions',
-            action: editingSection === 'sessions' ? labels.close || 'Close' : labels.manage || 'Manage',
-            actionLabel: labels.manageSessions || 'Manage your active sessions',
-            onClick: () => handleToggleSection('sessions'),
-            expanded: editingSection === 'sessions',
-            children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-              gap: "xs",
-              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconDevices, {
-                size: 18,
-                stroke: 1.5,
-                color: "var(--mantine-color-dimmed)"
-              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                size: "sm",
-                c: "dimmed",
-                children: sessions.length > 0 ? `${sessions.length} active session${sessions.length > 1 ? 's' : ''}` : loadingListSessions ? 'Loading...' : 'No sessions'
-              })]
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
-            in: editingSection === 'sessions',
-            children: /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
-              p: "sm",
-              withBorder: true,
-              radius: "sm",
-              children: /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
-                gap: "xs",
-                children: loadingListSessions ? /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                  size: "xs",
-                  c: "dimmed",
-                  ta: "center",
-                  py: "md",
-                  children: labels.loadingSessions || 'Carregando sessões...'
-                }) : sessions.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                  size: "xs",
-                  c: "dimmed",
-                  ta: "center",
-                  py: "md",
-                  children: labels.noSessionsFound || 'Nenhuma sessão encontrada'
-                }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [sessions.map(sessionItem => {
-                    const isCurrentSession = sessionItem.id === currentSession?.id;
-                    const deviceInfo = parseUserAgent(sessionItem.userAgent);
-                    const createdDate = new Date(sessionItem.createdAt);
-                    return /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
-                      p: "xs",
-                      withBorder: isCurrentSession,
-                      bd: isCurrentSession ? '1px solid gray' : undefined,
-                      radius: "sm",
-                      children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                        justify: "space-between",
-                        wrap: "nowrap",
-                        align: "center",
-                        children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                          gap: "sm",
-                          wrap: "nowrap",
-                          flex: 1,
-                          children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-                            size: 32,
-                            variant: "subtle",
-                            color: "gray",
-                            children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconDeviceMobile, {
-                              size: 18,
-                              stroke: 1.5
-                            })
-                          }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
-                            flex: 1,
-                            children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-                              gap: "xs",
-                              children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
-                                size: "xs",
-                                fw: 600,
-                                children: deviceInfo.browser
-                              }), isCurrentSession && /*#__PURE__*/jsxRuntime.jsx(core.Badge, {
-                                size: "xs",
-                                variant: "light",
-                                color: "gray",
-                                children: labels.thisDevice || 'Este dispositivo'
-                              })]
-                            }), /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
-                              size: "xs",
-                              c: "dimmed",
-                              children: [deviceInfo.os, " \u2022 ", sessionItem.ipAddress || labels.unknownIP || 'IP desconhecido']
-                            }), /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
-                              size: "xs",
-                              c: "dimmed",
-                              children: [labels.createdAt || 'Criada em', " ", createdDate.toLocaleDateString('pt-BR'), " ", labels.at || 'às', ' ', createdDate.toLocaleTimeString('pt-BR', {
-                                hour: '2-digit',
-                                minute: '2-digit'
-                              })]
-                            })]
-                          })]
-                        }), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
-                          label: isCurrentSession ? labels.signOutAndEnd || 'Encerrar e sair' : labels.endSession || 'Encerrar sessão',
-                          children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                            variant: "subtle",
-                            color: "gray",
-                            size: "xs",
-                            onClick: () => handleRevokeSession(sessionItem.id),
-                            loading: loadingRevokeSession === sessionItem.id,
-                            loaderProps: {
-                              size: 12
-                            },
-                            leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
-                              size: 14,
-                              stroke: 1.5
-                            }),
-                            children: labels.end || 'Encerrar'
-                          })
-                        })]
-                      })
-                    }, sessionItem.id);
-                  }), sessions.length > 1 && /*#__PURE__*/jsxRuntime.jsx(core.Group, {
-                    justify: "flex-end",
-                    mt: "xs",
-                    children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-                      variant: "subtle",
-                      color: "gray",
-                      size: "xs",
-                      onClick: handleRevokeOtherSessions,
-                      loading: loadingRevokeSession === 'all',
-                      loaderProps: {
-                        size: 12
-                      },
-                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconLogout, {
-                        size: 14,
-                        stroke: 1.5
-                      }),
-                      children: labels.endOtherSessions || 'Encerrar todas as outras sessões'
-                    })
-                  })]
-                })
-              })
-            })
-          })]
+    }) : /*#__PURE__*/jsxRuntime.jsx(core.Group, {
+      justify: "flex-end",
+      pt: 4,
+      pb: 4,
+      children: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+        tone: "dangerOutline",
+        onClick: () => setIsConfirmingEnd(true),
+        children: endOthersAction(othersCount)
+      })
+    }))]
+  });
+  const content = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [header, identityStrip, hasProfile && /*#__PURE__*/jsxRuntime.jsxs(Section, {
+      label: t.profileSection,
+      isFirst: true,
+      children: [showAvatar && (editing === 'avatar' ? avatarEditor : /*#__PURE__*/jsxRuntime.jsx(Row$1, {
+        label: t.avatar,
+        isFirst: true,
+        action: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          onClick: () => openEditor('avatar'),
+          children: t.edit
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(SquareAvatar, {
+          src: identity.image,
+          initials: identity.initials,
+          size: 32
+        })
+      })), showName && (editing === 'name' ? nameEditor : /*#__PURE__*/jsxRuntime.jsx(Row$1, {
+        label: t.name,
+        isFirst: !showAvatar,
+        action: /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          onClick: () => openEditor('name'),
+          children: t.edit
+        }),
+        children: identity.name || /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          span: true,
+          inherit: true,
+          c: "gray.5",
+          children: t.notDefined
+        })
+      })), showEmail && /*#__PURE__*/jsxRuntime.jsxs(Row$1, {
+        label: t.email,
+        isFirst: !showAvatar && !showName,
+        children: [identity.email, /*#__PURE__*/jsxRuntime.jsx(Hint, {
+          children: t.emailHint
+        })]
+      })]
+    }), hasSignInMethods && /*#__PURE__*/jsxRuntime.jsxs(Section, {
+      label: t.signInSection,
+      isFirst: !hasProfile,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Row$1, {
+        label: t.codeMethod,
+        isFirst: true,
+        action: /*#__PURE__*/jsxRuntime.jsx(Chip, {
+          tone: "good",
+          children: t.alwaysOn
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(WithIcon, {
+          icon: iconsReact.IconMail,
+          children: t.codeByEmail
         })
+      }), providers.map(item => {
+        const link = linked.find(entry => entry.provider === item.provider);
+        return /*#__PURE__*/jsxRuntime.jsx(Row$1, {
+          label: item.name,
+          action: link ? /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+            tone: "quiet",
+            loading: pendingProvider === item.provider,
+            onClick: () => handleUnlink(item.provider),
+            "aria-label": `${t.disconnect} ${item.name}`,
+            children: t.disconnect
+          }) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+            loading: pendingProvider === item.provider,
+            onClick: () => handleLink(item.provider),
+            "aria-label": `${t.connect} ${item.name}`,
+            children: t.connect
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(WithIcon, {
+            icon: PROVIDER_MARKS[item.provider] || iconsReact.IconLink,
+            children: link ? link.email || item.name : /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              span: true,
+              inherit: true,
+              c: "gray.5",
+              children: t.notConnected
+            })
+          })
+        }, item.provider);
+      }), /*#__PURE__*/jsxRuntime.jsx(FailureNote, {
+        failure: failure,
+        section: "signIn"
       })]
+    }), showSessions && /*#__PURE__*/jsxRuntime.jsxs(Section, {
+      label: t.sessionsSection,
+      isFirst: !hasProfile && !hasSignInMethods,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.UnstyledButton, {
+        "aria-expanded": areSessionsOpen,
+        "aria-controls": sessionsListId,
+        onClick: () => {
+          setAreSessionsOpen(isOpen => !isOpen);
+          setIsConfirmingEnd(false);
+        },
+        onMouseEnter: () => setIsSessionsRowActive(true),
+        onMouseLeave: () => setIsSessionsRowActive(false),
+        onFocus: () => setIsSessionsRowActive(true),
+        onBlur: () => setIsSessionsRowActive(false),
+        w: "100%",
+        style: {
+          display: 'block',
+          borderRadius: 0
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Row$1, {
+          label: t.devices,
+          isFirst: true,
+          action: /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+            component: "span",
+            style: {
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 4,
+              padding: '5px 12px',
+              fontSize: 12,
+              fontWeight: 700,
+              color: 'var(--mantine-color-gray-9)',
+              // The whole line is the button; the pill only shows it.
+              border: `1px solid var(--mantine-color-${isSessionsRowActive ? 'gray-9' : 'gray-3'})`,
+              whiteSpace: 'nowrap'
+            },
+            children: [areSessionsOpen ? t.hideSessions : t.showSessions, /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconChevronDown, {
+              size: 14,
+              stroke: 1.5,
+              style: {
+                transform: areSessionsOpen ? 'rotate(180deg)' : 'none',
+                transition: 'transform 150ms ease'
+              }
+            })]
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(WithIcon, {
+            icon: iconsReact.IconDeviceLaptop,
+            detail: sessionsSummary,
+            children: loadingListSessions && ordered.length === 0 ? t.loadingSessions : countSessions(ordered.length)
+          })
+        })
+      }), areSessionsOpen && sessionsList]
     }), customSections]
   });
-
-  // Renderizar como Modal
   if (variant === 'modal') {
-    return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, {
-      opened: opened,
+    return /*#__PURE__*/jsxRuntime.jsxs(core.Modal.Root, {
+      opened: Boolean(opened),
       onClose: onClose,
-      size: width,
-      withCloseButton: true,
-      radius: "md",
-      overlayProps: {
+      size: width
+      // With an editor open, Esc belongs to the editor: it cancels the
+      // edit and leaves the screen open. Mantine listens for Esc on its
+      // own, so stopping the key in the field is not enough.
+      ,
+      closeOnEscape: !editing && !isConfirmingEnd,
+      ...containerProps,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Modal.Overlay, {
         backgroundOpacity: 0.5,
         blur: 4
-      },
-      title: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        gap: "sm",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-          size: 32,
-          variant: "subtle",
-          color: "gray",
-          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
-            size: 24,
-            stroke: 1.5
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-          gap: 0,
-          children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
-            order: 5,
-            fw: 600,
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: "xs",
-            c: "dimmed",
-            children: subtitle
-          })]
-        })]
-      }),
-      ...containerProps,
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.Divider, {
-        mb: "md"
-      }), profileContent]
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Modal.Content, {
+        radius: 0,
+        style: {
+          border: '1px solid var(--mantine-color-gray-3)'
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Modal.Body, {
+          p: 0,
+          children: content
+        })
+      })]
     });
   }
-
-  // Renderizar como Card
   return /*#__PURE__*/jsxRuntime.jsx(core.Paper, {
-    withBorder: true
-    // shadow="md"
-    ,
-    p: "md",
+    withBorder: true,
+    radius: 0,
+    p: 0,
     w: width,
-    radius: "md",
+    maw: "100%",
     ...containerProps,
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-      gap: "sm",
-      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
-        gap: "sm",
-        children: [logo ? /*#__PURE__*/jsxRuntime.jsx(core.Image, {
-          src: logo,
-          alt: "Auth",
-          h: logoHeight,
-          fit: "contain"
-        }) : /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
-          size: 32,
-          variant: "subtle",
-          color: "gray",
-          children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
-            size: 24,
-            stroke: 1.5
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
-          gap: 0,
-          children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
-            order: 5,
-            fw: 600,
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-            size: "xs",
-            c: "dimmed",
-            children: subtitle
-          })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}), profileContent]
-    })
+    children: content
   });
 }
 
+/* The only texts that change with the count, so they are functions, not labels. */
+function endOthersAction(count) {
+  return count === 1 ? 'Encerrar a outra' : `Encerrar as outras ${count}`;
+}
+function endOthersQuestion(count) {
+  return count === 1 ? 'Encerrar 1 sessão?' : `Encerrar ${count} sessões?`;
+}
+function endOthersConfirm(count) {
+  return count === 1 ? 'Encerrar 1 sessão' : `Encerrar ${count} sessões`;
+}
+
 const ROLE_LABELS = {
   owner: 'Dono',
   admin: 'Administrador',
@@ -3998,6 +4482,8 @@ const UPGRADE_THRESHOLD = 0.8;
  * @property {string} [id] - Stable key
  * @property {string} label - The row's text
  * @property {Function} [icon] - A Tabler icon component
+ * @property {string} [description] - One line under the label, saying what the action does
+ * @property {'danger'} [tone] - For what cannot be undone: red label and icon
  * @property {Function} onClick
  *
  * @typedef {Object} UserInformationPlan
@@ -4024,6 +4510,7 @@ const UPGRADE_THRESHOLD = 0.8;
  * @param {Function} [props.onAccountClick]
  * @param {Function} [props.onBillingClick]
  * @param {UserInformationItem[]} [props.items] - The panel's own rows, shown in their own group
+ * @param {string} [props.itemsLabel] - A title for that group ("Seus dados"); without it, none
  * @param {UserInformationPlan} [props.plan] - The plan strip; omitted, the strip is not drawn
  * @param {UserInformationOrganization} [props.organization] - Where the person is acting
  * @param {boolean} [props.branded=true] - The footer: "Protegido por Auth" and the terms link
@@ -4039,6 +4526,7 @@ function UserInformation({
   onAccountClick,
   onBillingClick,
   items = [],
+  itemsLabel,
   plan,
   organization,
   branded = true,
@@ -4056,17 +4544,13 @@ function UserInformation({
   ...others
 }) {
   if (!user) return null;
-  const name = (user.fullName || user.name || '').trim();
-  const email = (user.primaryEmailAddress || user.email || '').trim();
-
-  /*
-   * A name equal to the email's local part is not a name: it is what an
-   * account born from a code gets by default, and showing it on top of the
-   * email repeats the same fact. It counts as "no name".
-   */
-  const hasRealName = Boolean(name) && name.toLowerCase() !== email.split('@')[0].toLowerCase() && name.toLowerCase() !== email.toLowerCase();
-  const title = hasRealName ? name : email || name;
-  const initials = hasRealName ? name.split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() : (email || name).charAt(0).toUpperCase();
+  const {
+    email,
+    hasRealName,
+    title,
+    initials,
+    image
+  } = describeUser(user);
   const baseRows = [onAccountClick && {
     id: 'account',
     label: accountLabel,
@@ -4090,7 +4574,7 @@ function UserInformation({
       px: padded ? 16 : 0,
       py: 14,
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
-        src: user.imageUrl || user.image,
+        src: image,
         alt: "",
         size: 32,
         radius: 0,
@@ -4140,6 +4624,7 @@ function UserInformation({
         hasDivider: !organization?.name && !plan
       }), panelRows.length > 0 && /*#__PURE__*/jsxRuntime.jsx(RowGroup, {
         rows: panelRows,
+        label: itemsLabel,
         hasDivider: true
       }), signOut && /*#__PURE__*/jsxRuntime.jsx(RowGroup, {
         rows: [{
@@ -4311,24 +4796,59 @@ function ContextStrip({
 }
 function RowGroup({
   rows,
+  label,
   hasDivider
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(core.Stack, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
     gap: 0,
     p: 6,
+    role: label ? 'group' : undefined,
+    "aria-label": label || undefined,
     style: hasDivider ? {
       borderTop: '1px solid var(--mantine-color-gray-2)'
     } : undefined,
-    children: rows.map(row => /*#__PURE__*/jsxRuntime.jsx(Row, {
+    children: [label && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+      "aria-hidden": true,
+      fz: 11,
+      fw: 800,
+      tt: "uppercase",
+      lts: "1.5px",
+      c: "gray.4",
+      px: 10,
+      pt: 6,
+      pb: 2,
+      children: label
+    }), rows.map(row => /*#__PURE__*/jsxRuntime.jsx(Row, {
       ...row
-    }, row.id || row.label))
+    }, row.id || row.label))]
   });
 }
+
+/*
+ * A panel's row may carry a line saying what it does and, for what cannot be
+ * undone, the danger tone — still as data, so every card keeps one shape. The
+ * History needed both: "Apagar tudo" looked exactly like "Exportar".
+ */
+const ROW_TONES = {
+  default: {
+    text: 'gray.9',
+    icon: 'var(--mantine-color-gray-5)',
+    hover: 'var(--mantine-color-gray-1)'
+  },
+  danger: {
+    text: 'red.8',
+    icon: 'var(--mantine-color-red-8)',
+    hover: 'var(--mantine-color-red-0)'
+  }
+};
 function Row({
   label,
+  description,
+  tone,
   icon: Icon,
   onClick
 }) {
+  const look = ROW_TONES[tone] || ROW_TONES.default;
   return /*#__PURE__*/jsxRuntime.jsxs(core.UnstyledButton, {
     role: "menuitem",
     onClick: onClick,
@@ -4337,7 +4857,7 @@ function Row({
     w: "100%",
     style: {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: description ? 'flex-start' : 'center',
       gap: 10,
       borderRadius: 0
     }
@@ -4345,23 +4865,35 @@ function Row({
      * Hover and keyboard focus share the same surface: a row reached
      * with the arrows must look exactly like the one under the mouse.
      */,
-    onMouseEnter: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onMouseEnter: event => event.currentTarget.style.background = look.hover,
     onMouseLeave: event => event.currentTarget.style.background = 'transparent',
-    onFocus: event => event.currentTarget.style.background = 'var(--mantine-color-gray-1)',
+    onFocus: event => event.currentTarget.style.background = look.hover,
     onBlur: event => event.currentTarget.style.background = 'transparent',
     children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
       size: 16,
       stroke: 1.5,
       style: {
         flex: 'none',
-        color: 'var(--mantine-color-gray-5)'
+        color: look.icon,
+        marginTop: description ? 1 : 0
       }
-    }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
-      fz: 12,
-      fw: 500,
-      c: "gray.9",
-      truncate: "end",
-      children: label
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      style: {
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 12,
+        fw: 500,
+        c: look.text,
+        truncate: "end",
+        children: label
+      }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fz: 12,
+        fw: 500,
+        c: "gray.5",
+        lh: 1.4,
+        children: description
+      })]
     })]
   });
 }