reflet-sdk 0.3.4 → 0.4.0

package/dist/react.js

@@ -1,5 +1,5 @@
+import { a as REFLET_Z_INDEX, i as useRefletContext, n as RefletProvider, r as useRefletClient, t as RefletContext } from "./react-context-3_IbhIFB.js";
 import { t as Reflet } from "./client-BYuSKJw5.js";
-import { i as useRefletContext, n as RefletProvider, r as useRefletClient, t as RefletContext } from "./react-context-DZw_HHjj.js";
 import { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react-changelog-widget.tsx
@@ -96,9 +96,7 @@ function ChangelogWidget({ publicKey, mode = "card", position = "bottom-right",
 //#region src/react-feedback-dialog-types.ts
 const DEFAULT_LABELS = {
 	cancel: "Cancel",
-	categoryBug: "Bug",
-	categoryFeature: "Feature",
-	categoryQuestion: "Question",
+	close: "Close",
 	descriptionPlaceholder: "Tell us more... (optional)",
 	emailLabel: "Email",
 	emailPlaceholder: "your@email.com (optional)",
@@ -109,17 +107,11 @@ const DEFAULT_LABELS = {
 	title: "Send Feedback",
 	titlePlaceholder: "What's on your mind?"
 };
-const CATEGORY_ICONS = {
-	bug: "🐛",
-	feature: "✨",
-	question: "💬"
-};
 const AUTO_CLOSE_DELAY = 2500;
 //#endregion
 //#region src/react-feedback-styles-parts.ts
 function getFeedbackChromeCSS() {
 	return `
-/* ===== Footer ===== */
 .reflet-footer {
   display: flex;
   justify-content: flex-end;
@@ -128,6 +120,7 @@ function getFeedbackChromeCSS() {
 }
 
 .reflet-btn {
+  min-height: 40px;
   padding: 10px 20px;
   border: none;
   border-radius: var(--reflet-radius-sm);
@@ -135,7 +128,7 @@ function getFeedbackChromeCSS() {
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: all 150ms;
+  transition: background 150ms, color 150ms, opacity 150ms, transform 150ms var(--reflet-ease);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -145,7 +138,7 @@ function getFeedbackChromeCSS() {
 
 .reflet-btn-primary {
   background: var(--reflet-primary);
-  color: #ffffff;
+  color: var(--reflet-on-primary);
 }
 
 .reflet-btn-primary:hover:not(:disabled) {
@@ -167,17 +160,15 @@ function getFeedbackChromeCSS() {
   color: var(--reflet-text);
 }
 
-/* ===== Spinner ===== */
 .reflet-spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(255,255,255,0.3);
-  border-top-color: #ffffff;
+  border: 2px solid var(--reflet-on-primary-soft);
+  border-top-color: var(--reflet-on-primary);
   border-radius: 50%;
   animation: reflet-spin 600ms linear infinite;
 }
 
-/* ===== Success State ===== */
 .reflet-success {
   display: flex;
   flex-direction: column;
@@ -223,28 +214,27 @@ function getFeedbackChromeCSS() {
   margin: 0;
 }
 
-/* ===== Error State ===== */
 .reflet-error-msg {
   font-size: 13px;
   color: var(--reflet-error);
   margin: 0;
 }
 
-/* ===== Trigger Button ===== */
 .reflet-trigger {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  min-height: 40px;
   padding: 10px 18px;
   background: var(--reflet-primary);
-  color: #ffffff;
+  color: var(--reflet-on-primary);
   border: none;
   border-radius: var(--reflet-radius-sm);
   font-family: var(--reflet-font);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 150ms;
+  transition: background 150ms, transform 150ms var(--reflet-ease);
   line-height: 1;
 }
 
@@ -257,7 +247,6 @@ function getFeedbackChromeCSS() {
   height: 16px;
 }
 
-/* ===== Honeypot ===== */
 .reflet-hp {
   position: absolute;
   top: -9999px;
@@ -268,7 +257,6 @@ function getFeedbackChromeCSS() {
   z-index: -1;
 }
 
-/* ===== Powered by ===== */
 .reflet-powered {
   text-align: center;
   padding: 0 24px 16px;
@@ -286,7 +274,6 @@ function getFeedbackChromeCSS() {
   color: var(--reflet-primary);
 }
 
-/* ===== Mobile handle ===== */
 @media (max-width: 640px) {
   .reflet-header::before {
     content: '';
@@ -305,15 +292,18 @@ function getFeedbackChromeCSS() {
     padding-top: 24px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .reflet-success-icon svg path {
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+    animation: none;
+  }
+}
 `;
 }
 //#endregion
 //#region src/react-feedback-styles.ts
-/**
-* Self-contained styles for the FeedbackButton and FeedbackDialog components.
-* Uses CSS custom properties for theming. Injected via <style> tag with a unique ID
-* to avoid duplication. All selectors are scoped under `[data-reflet-feedback]`.
-*/
 const STYLE_ID = "reflet-feedback-styles";
 function injectFeedbackStyles() {
 	if (typeof document === "undefined") return;
@@ -325,9 +315,15 @@ function injectFeedbackStyles() {
 }
 function getFeedbackCSS() {
 	return `
+:root {
+  --reflet-scrim: rgb(0 0 0 / 45%);
+}
+
 [data-reflet-feedback] {
   --reflet-primary: #6366f1;
   --reflet-primary-hover: #4f46e5;
+  --reflet-on-primary: #ffffff;
+  --reflet-on-primary-soft: rgb(255 255 255 / 30%);
   --reflet-bg: #ffffff;
   --reflet-bg-secondary: #f9fafb;
   --reflet-text: #111827;
@@ -336,10 +332,11 @@ function getFeedbackCSS() {
   --reflet-border: #e5e7eb;
   --reflet-radius: 12px;
   --reflet-radius-sm: 8px;
-  --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
+  --reflet-shadow: 0 20px 60px -12px rgb(0 0 0 / 25%), 0 0 0 1px rgb(0 0 0 / 5%);
   --reflet-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --reflet-success: #22c55e;
   --reflet-error: #ef4444;
+  --reflet-ease: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -350,7 +347,7 @@ function getFeedbackCSS() {
     --reflet-text-secondary: #9ca3af;
     --reflet-text-tertiary: #6b7280;
     --reflet-border: #374151;
-    --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+    --reflet-shadow: 0 20px 60px -12px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 5%);
   }
 }
 
@@ -361,16 +358,7 @@ function getFeedbackCSS() {
   --reflet-text-secondary: #9ca3af;
   --reflet-text-tertiary: #6b7280;
   --reflet-border: #374151;
-  --reflet-shadow: 0 20px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
-}
-
-/* ===== Overlay ===== */
-.reflet-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.4);
-  z-index: 99998;
-  animation: reflet-fade-in 150ms ease-out;
+  --reflet-shadow: 0 20px 60px -12px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 5%);
 }
 
 @keyframes reflet-fade-in {
@@ -412,34 +400,42 @@ function getFeedbackCSS() {
   to { transform: rotate(360deg); }
 }
 
-.reflet-overlay[data-closing="true"] {
-  animation: reflet-fade-out 150ms ease-in forwards;
-}
-
-/* ===== Dialog (Desktop) ===== */
 .reflet-dialog {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 99999;
+  z-index: ${REFLET_Z_INDEX.dialogContent};
+  margin: 0;
+  border: 0;
+  padding: 0;
   background: var(--reflet-bg);
   border-radius: var(--reflet-radius);
   box-shadow: var(--reflet-shadow);
   width: 480px;
   max-width: calc(100vw - 32px);
-  max-height: calc(100vh - 64px);
+  max-height: calc(100dvh - 64px);
   overflow: hidden;
+  overscroll-behavior: contain;
   font-family: var(--reflet-font);
   color: var(--reflet-text);
-  animation: reflet-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: reflet-scale-in 200ms var(--reflet-ease);
+}
+
+.reflet-dialog::backdrop {
+  z-index: ${REFLET_Z_INDEX.dialogOverlay};
+  background: var(--reflet-scrim);
+  animation: reflet-fade-in 150ms ease-out;
 }
 
 .reflet-dialog[data-closing="true"] {
-  animation: reflet-scale-out 150ms ease-in forwards;
+  animation: reflet-scale-out 150ms ease-out forwards;
+}
+
+.reflet-dialog[data-closing="true"]::backdrop {
+  animation: reflet-fade-out 150ms ease-out forwards;
 }
 
-/* ===== Sheet (Mobile) ===== */
 @media (max-width: 640px) {
   .reflet-dialog {
     top: auto;
@@ -450,16 +446,16 @@ function getFeedbackCSS() {
     width: 100%;
     max-width: 100%;
     border-radius: var(--reflet-radius) var(--reflet-radius) 0 0;
-    max-height: 90vh;
-    animation: reflet-slide-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    max-height: 90dvh;
+    padding-bottom: env(safe-area-inset-bottom);
+    animation: reflet-slide-up 300ms var(--reflet-ease);
   }
 
   .reflet-dialog[data-closing="true"] {
-    animation: reflet-slide-down 200ms ease-in forwards;
+    animation: reflet-slide-down 200ms ease-out forwards;
   }
 }
 
-/* ===== Header ===== */
 .reflet-header {
   display: flex;
   align-items: center;
@@ -479,8 +475,8 @@ function getFeedbackCSS() {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   border: none;
   background: transparent;
   border-radius: 8px;
@@ -488,7 +484,7 @@ function getFeedbackCSS() {
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
-  transition: background 150ms, color 150ms;
+  transition: background 150ms, color 150ms, transform 150ms var(--reflet-ease);
 }
 
 .reflet-close:hover {
@@ -501,7 +497,6 @@ function getFeedbackCSS() {
   height: 18px;
 }
 
-/* ===== Form ===== */
 .reflet-form {
   padding: 20px 24px 24px;
   display: flex;
@@ -553,43 +548,110 @@ function getFeedbackCSS() {
   min-height: 100px;
 }
 
-/* ===== Category Selector ===== */
-.reflet-categories {
-  display: flex;
-  gap: 8px;
+[data-reflet-feedback] :focus-visible {
+  outline: 2px solid var(--reflet-primary);
+  outline-offset: 2px;
 }
 
-.reflet-category {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--reflet-border);
-  border-radius: var(--reflet-radius-sm);
-  background: var(--reflet-bg);
-  color: var(--reflet-text-secondary);
-  font-family: var(--reflet-font);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  text-align: center;
-  transition: all 150ms;
+[data-reflet-feedback] button:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
-.reflet-category:hover {
-  border-color: var(--reflet-primary);
-  color: var(--reflet-text);
+@media (pointer: coarse), (max-width: 640px) {
+  .reflet-input,
+  .reflet-textarea {
+    font-size: 16px;
+  }
 }
+${getFeedbackChromeCSS()}
+@media (prefers-reduced-motion: reduce) {
+  [data-reflet-feedback] *,
+  [data-reflet-feedback] *::before,
+  [data-reflet-feedback] *::after,
+  .reflet-dialog,
+  .reflet-dialog::backdrop {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
 
-.reflet-category[data-selected="true"] {
-  border-color: var(--reflet-primary);
-  background: color-mix(in srgb, var(--reflet-primary) 8%, transparent);
-  color: var(--reflet-primary);
+  [data-reflet-feedback] button:active:not(:disabled) {
+    transform: none;
+  }
 }
-${getFeedbackChromeCSS()}
 `;
 }
 //#endregion
 //#region src/react-feedback-dialog-hook.ts
-function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseUrl, user: userProp, userToken: userTokenProp, primaryColor, defaultCategory = "feature", labels: labelsProp, onSubmit, onOpen, onClose }) {
+const CLOSE_ANIMATION_MS = 200;
+function openDialog(dialog) {
+	if (typeof dialog.showModal === "function") {
+		dialog.showModal();
+		return;
+	}
+	dialog.open = true;
+}
+function closeDialog(dialog) {
+	if (typeof dialog.close === "function") {
+		dialog.close();
+		return;
+	}
+	dialog.open = false;
+}
+function useModalDialog(open, dialogRef, titleInputRef) {
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!(open && dialog) || dialog.open) return;
+		openDialog(dialog);
+		titleInputRef.current?.focus();
+		return () => closeDialog(dialog);
+	}, [
+		open,
+		dialogRef,
+		titleInputRef
+	]);
+}
+function useBackdropDismiss(open, dialogRef, onDismiss) {
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!(open && dialog)) return;
+		const dismiss = (event) => {
+			if (event.target === dialog) onDismiss();
+		};
+		dialog.addEventListener("click", dismiss);
+		return () => dialog.removeEventListener("click", dismiss);
+	}, [
+		open,
+		dialogRef,
+		onDismiss
+	]);
+}
+function useScrollLock(open) {
+	useEffect(() => {
+		if (!open) return;
+		const root = document.documentElement;
+		const previousOverflow = root.style.overflow;
+		const previousGutter = root.style.getPropertyValue("scrollbar-gutter");
+		root.style.setProperty("scrollbar-gutter", "stable");
+		root.style.overflow = "hidden";
+		return () => {
+			root.style.overflow = previousOverflow;
+			if (previousGutter) root.style.setProperty("scrollbar-gutter", previousGutter);
+			else root.style.removeProperty("scrollbar-gutter");
+		};
+	}, [open]);
+}
+function usePrimaryColor(primaryColor, dialogRef) {
+	useEffect(() => {
+		injectFeedbackStyles();
+	}, []);
+	useEffect(() => {
+		if (!(primaryColor && dialogRef.current)) return;
+		const host = dialogRef.current.closest("[data-reflet-feedback]");
+		if (host instanceof HTMLElement) host.style.setProperty("--reflet-primary", primaryColor);
+	}, [primaryColor, dialogRef]);
+}
+function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseUrl, user: userProp, userToken: userTokenProp, primaryColor, labels: labelsProp, onSubmit, onOpen, onClose }) {
 	const context = useContext(RefletContext);
 	const publicKey = publicKeyProp ?? context?.publicKey;
 	const user = userProp ?? context?.user;
@@ -601,7 +663,6 @@ function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseU
 	const [title, setTitle] = useState("");
 	const [description, setDescription] = useState("");
 	const [email, setEmail] = useState("");
-	const [category, setCategory] = useState(defaultCategory);
 	const [honeypot, setHoneypot] = useState("");
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [isSuccess, setIsSuccess] = useState(false);
@@ -609,151 +670,83 @@ function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseU
 	const [isClosing, setIsClosing] = useState(false);
 	const titleInputRef = useRef(null);
 	const dialogRef = useRef(null);
-	const previousActiveElement = useRef(null);
 	const isAnonymous = !(user || userToken);
+	usePrimaryColor(primaryColor, dialogRef);
+	useModalDialog(open, dialogRef, titleInputRef);
+	useScrollLock(open);
 	useEffect(() => {
-		injectFeedbackStyles();
-	}, []);
-	useEffect(() => {
-		if (!(primaryColor && dialogRef.current)) return;
-		const el = dialogRef.current.closest("[data-reflet-feedback]");
-		if (el instanceof HTMLElement) el.style.setProperty("--reflet-primary", primaryColor);
-	}, [primaryColor]);
-	useEffect(() => {
-		if (open) {
-			previousActiveElement.current = document.activeElement;
-			onOpen?.();
-			requestAnimationFrame(() => {
-				titleInputRef.current?.focus();
-			});
-		}
+		if (open) onOpen?.();
 	}, [open, onOpen]);
-	useEffect(() => {
-		if (!open) return;
-		const handleKeyDown = (e) => {
-			if (e.key === "Escape") {
-				e.preventDefault();
-				handleClose();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	});
-	useEffect(() => {
-		if (!open) return;
-		const originalOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = originalOverflow;
-		};
-	}, [open]);
-	const resetForm = useCallback(() => {
+	const resetForm = () => {
 		setTitle("");
 		setDescription("");
 		setEmail("");
-		setCategory(defaultCategory);
 		setHoneypot("");
 		setError(null);
 		setIsSuccess(false);
 		setIsSubmitting(false);
-	}, [defaultCategory]);
-	const handleClose = useCallback(() => {
+	};
+	const handleClose = () => {
 		setIsClosing(true);
 		setTimeout(() => {
 			setIsClosing(false);
 			onOpenChange(false);
 			onClose?.();
 			resetForm();
-			if (previousActiveElement.current instanceof HTMLElement) previousActiveElement.current.focus();
-		}, 200);
-	}, [
-		onOpenChange,
-		onClose,
-		resetForm
-	]);
+		}, CLOSE_ANIMATION_MS);
+	};
+	useBackdropDismiss(open, dialogRef, handleClose);
+	const buildDescription = () => {
+		return `${description.trim() || "No additional details provided."}${isAnonymous && email ? `\n\n---\nContact: ${email}` : ""}`;
+	};
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (honeypot) {
+			setIsSuccess(true);
+			return;
+		}
+		if (!publicKey) {
+			setError("Missing publicKey. Provide it as a prop or via RefletProvider.");
+			return;
+		}
+		if (!title.trim()) {
+			setError(labels.required);
+			return;
+		}
+		setIsSubmitting(true);
+		setError(null);
+		try {
+			const result = await new Reflet({
+				baseUrl,
+				publicKey,
+				user,
+				userToken
+			}).create({
+				description: buildDescription(),
+				title: title.trim()
+			});
+			setIsSuccess(true);
+			onSubmit?.(result);
+			setTimeout(handleClose, AUTO_CLOSE_DELAY);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
 	return {
-		category,
 		description,
 		dialogRef,
 		email,
 		error,
 		handleClose,
-		handleSubmit: useCallback(async (e) => {
-			e.preventDefault();
-			if (honeypot) {
-				setIsSuccess(true);
-				return;
-			}
-			if (!publicKey) {
-				setError("Missing publicKey. Provide it as a prop or via RefletProvider.");
-				return;
-			}
-			if (!title.trim()) {
-				setError(labels.required);
-				return;
-			}
-			setIsSubmitting(true);
-			setError(null);
-			try {
-				const client = new Reflet({
-					baseUrl,
-					publicKey,
-					user,
-					userToken
-				});
-				const categoryPrefix = `[${category.charAt(0).toUpperCase() + category.slice(1)}] `;
-				const fullDescription = description.trim() ? description.trim() : "No additional details provided.";
-				const result = await client.create({
-					description: `${categoryPrefix}${fullDescription}${isAnonymous && email ? `\n\n---\nContact: ${email}` : ""}`,
-					title: title.trim()
-				});
-				setIsSuccess(true);
-				onSubmit?.(result);
-				setTimeout(() => {
-					handleClose();
-				}, AUTO_CLOSE_DELAY);
-			} catch (err) {
-				const message = err instanceof Error ? err.message : "Something went wrong. Please try again.";
-				setError(message);
-			} finally {
-				setIsSubmitting(false);
-			}
-		}, [
-			honeypot,
-			publicKey,
-			title,
-			description,
-			email,
-			category,
-			baseUrl,
-			user,
-			userToken,
-			isAnonymous,
-			labels.required,
-			onSubmit,
-			handleClose
-		]),
-		handleTrapFocus: useCallback((e) => {
-			if (e.key !== "Tab" || !dialogRef.current) return;
-			const focusable = dialogRef.current.querySelectorAll("button, input, textarea, [tabindex]:not([tabindex=\"-1\"])");
-			const first = focusable[0];
-			const last = focusable[focusable.length - 1];
-			if (!(first && last)) return;
-			if (e.shiftKey && document.activeElement === first) {
-				e.preventDefault();
-				last.focus();
-			} else if (!e.shiftKey && document.activeElement === last) {
-				e.preventDefault();
-				first.focus();
-			}
-		}, []),
+		handleSubmit,
 		honeypot,
 		isAnonymous,
 		isClosing,
 		isSubmitting,
 		isSuccess,
 		labels,
-		setCategory,
 		setDescription,
 		setEmail,
 		setError,
@@ -765,14 +758,9 @@ function useFeedbackDialog({ open, onOpenChange, publicKey: publicKeyProp, baseU
 }
 //#endregion
 //#region src/react-feedback-dialog.tsx
-function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, defaultCategory = "feature", categories = [
-	"feature",
-	"bug",
-	"question"
-], labels: labelsProp, onSubmit, onOpen, onClose }) {
-	const { labels, title, setTitle, description, setDescription, email, setEmail, category, setCategory, honeypot, setHoneypot, isSubmitting, isSuccess, error, setError, isClosing, isAnonymous, titleInputRef, dialogRef, handleClose, handleSubmit, handleTrapFocus } = useFeedbackDialog({
+function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, labels: labelsProp, onSubmit, onOpen, onClose }) {
+	const { labels, title, setTitle, description, setDescription, email, setEmail, honeypot, setHoneypot, isSubmitting, isSuccess, error, setError, isClosing, isAnonymous, titleInputRef, dialogRef, handleClose, handleSubmit } = useFeedbackDialog({
 		baseUrl,
-		defaultCategory,
 		labels: labelsProp,
 		onClose,
 		onOpen,
@@ -785,24 +773,18 @@ function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToke
 		userToken
 	});
 	if (!open) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		"data-reflet-feedback": "",
 		"data-theme": theme,
-		children: [/* @__PURE__ */ jsx("button", {
-			"aria-label": "Close feedback dialog",
-			className: "reflet-overlay",
-			"data-closing": isClosing ? "true" : void 0,
-			onClick: handleClose,
-			tabIndex: 0,
-			type: "button"
-		}), /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsx("dialog", {
 			"aria-label": labels.title,
-			"aria-modal": "true",
 			className: "reflet-dialog",
 			"data-closing": isClosing ? "true" : void 0,
-			onKeyDown: handleTrapFocus,
+			onCancel: (event) => {
+				event.preventDefault();
+				handleClose();
+			},
 			ref: dialogRef,
-			role: "dialog",
 			children: isSuccess ? /* @__PURE__ */ jsxs("div", {
 				className: "reflet-success",
 				children: [
@@ -835,7 +817,7 @@ function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToke
 						className: "reflet-title",
 						children: labels.title
 					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": "Close",
+						"aria-label": labels.close,
 						className: "reflet-close",
 						onClick: handleClose,
 						type: "button",
@@ -865,20 +847,6 @@ function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToke
 					className: "reflet-form",
 					onSubmit: handleSubmit,
 					children: [
-						categories.length > 1 && /* @__PURE__ */ jsx("div", {
-							className: "reflet-categories",
-							children: categories.map((cat) => /* @__PURE__ */ jsxs("button", {
-								className: "reflet-category",
-								"data-selected": cat === category ? "true" : void 0,
-								onClick: () => setCategory(cat),
-								type: "button",
-								children: [
-									CATEGORY_ICONS[cat],
-									" ",
-									labels[`category${cat.charAt(0).toUpperCase()}${cat.slice(1)}`]
-								]
-							}, cat))
-						}),
 						/* @__PURE__ */ jsx("div", {
 							className: "reflet-field",
 							children: /* @__PURE__ */ jsx("input", {
@@ -916,7 +884,6 @@ function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToke
 								htmlFor: "reflet-email",
 								children: labels.emailLabel
 							}), /* @__PURE__ */ jsx("input", {
-								"aria-label": "Email address",
 								autoComplete: "email",
 								className: "reflet-input",
 								id: "reflet-email",
@@ -972,7 +939,7 @@ function FeedbackDialog({ open, onOpenChange, publicKey, baseUrl, user, userToke
 					]
 				})
 			] })
-		})]
+		})
 	});
 }
 //#endregion
@@ -991,7 +958,7 @@ function FeedbackIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
 	});
 }
-function FeedbackButton({ publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, defaultCategory = "feature", categories, labels, onSubmit, onOpen, onClose, className, asChild = false, children }) {
+function FeedbackButton({ publicKey, baseUrl, user, userToken, theme = "auto", primaryColor, labels, onSubmit, onOpen, onClose, className, asChild = false, children }) {
 	const [open, setOpen] = useState(false);
 	useState(() => {
 		injectFeedbackStyles();
@@ -1021,8 +988,6 @@ function FeedbackButton({ publicKey, baseUrl, user, userToken, theme = "auto", p
 	}
 	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, /* @__PURE__ */ jsx(FeedbackDialog, {
 		baseUrl,
-		categories,
-		defaultCategory,
 		labels,
 		onClose,
 		onOpen,