@remit/web-client 0.0.141 → 0.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.141",
+  "version": "0.0.142",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/IntelligencePane.tsx

@@ -1,5 +1,6 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
+	DialogBackdrop,
 	IntelligencePanel,
 	type IntelligenceQuickActions,
 	type SimilarMessageLinkComponent,
@@ -154,19 +155,17 @@ function ReclassifyDialog({
 }) {
 	if (!isOpen) return null;
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			aria-hidden="true"
-			onClick={onCancel}
-		>
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<DialogBackdrop
+				label="Dismiss reclassify sender"
+				onDismiss={onCancel}
+				className="backdrop-blur-sm"
+			/>
 			<div
 				role="dialog"
 				aria-modal="true"
 				aria-label="Reclassify sender"
 				className="relative z-10 w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg"
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<h2 className="text-lg font-semibold">Reclassify this sender</h2>
 				<p className="mt-2 text-sm text-fg-muted">

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,4 +1,4 @@
-import { Kbd, KEY_HINT_GROUPS } from "@remit/ui";
+import { DialogBackdrop, Kbd, KEY_HINT_GROUPS } from "@remit/ui";
 import { X } from "lucide-react";
 import { Fragment, useCallback, useEffect } from "react";
 import { cn } from "@/lib/utils";
@@ -37,29 +37,23 @@ export const KeyboardShortcutsModal = ({
 	if (!isOpen) return null;
 
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			role="dialog"
-			aria-modal="true"
-			aria-label="Keyboard shortcuts"
-			onClick={onClose}
-			onKeyDown={(e) => e.key === "Escape" && onClose()}
-		>
-			{/* Backdrop */}
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<DialogBackdrop
+				label="Dismiss keyboard shortcuts"
+				onDismiss={onClose}
+				className="backdrop-blur-sm"
+			/>
 
 			{/* Modal */}
-			{/* biome-ignore lint/a11y/noStaticElementInteractions: stops event propagation from the modal content; keyboard is handled by the outer wrapper */}
 			<div
+				role="dialog"
+				aria-modal="true"
+				aria-label="Keyboard shortcuts"
 				className={cn(
 					"relative z-10 max-h-[85vh] w-full max-w-2xl overflow-y-auto",
 					"rounded-lg border border-line bg-surface shadow-lg",
 					"p-6",
 				)}
-				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => {
-					if (e.key !== "Escape") e.stopPropagation();
-				}}
 			>
 				{/* Header */}
 				<div className="mb-6 flex items-center justify-between">