@sesionario/blocks 1.10.0 → 1.11.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React6 = require('react');
+var React7 = require('react');
 var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -44,7 +44,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
@@ -55,9 +55,9 @@ var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
 var flags__default = /*#__PURE__*/_interopDefault(flags);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 
-var LanguageContext = React6.createContext(null);
+var LanguageContext = React7.createContext(null);
 function useLanguageContext() {
-  return React6.useContext(LanguageContext);
+  return React7.useContext(LanguageContext);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -464,13 +464,13 @@ function ExpandableText({
   className,
   textClassName
 }) {
-  const [expanded, setExpanded] = React6.useState(false);
-  const [overflowing, setOverflowing] = React6.useState(false);
-  const contentRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const [expanded, setExpanded] = React7.useState(false);
+  const [overflowing, setOverflowing] = React7.useState(false);
+  const contentRef = React7.useRef(null);
+  React7.useEffect(() => {
     setExpanded(false);
   }, [children]);
-  React6.useLayoutEffect(() => {
+  React7.useLayoutEffect(() => {
     const el = contentRef.current;
     if (!el) return;
     const measure = () => {
@@ -557,29 +557,29 @@ function ImageLightbox({
   const previousLabel = labels?.previous ?? "Anterior";
   const nextLabel = labels?.next ?? "Siguiente";
   const hasMultiple = images.length > 1;
-  const [transform, setTransform] = React6.useState(IDENTITY);
-  const transformRef = React6.useRef(transform);
+  const [transform, setTransform] = React7.useState(IDENTITY);
+  const transformRef = React7.useRef(transform);
   transformRef.current = transform;
-  const [isSwipeDragging, setIsSwipeDragging] = React6.useState(false);
-  const [snapBack, setSnapBack] = React6.useState(false);
-  const stageRef = React6.useRef(null);
-  const pointersRef = React6.useRef(/* @__PURE__ */ new Map());
-  const pinchStartRef = React6.useRef(null);
-  const panRef = React6.useRef(null);
-  const swipeRef = React6.useRef(null);
-  const lastTapRef = React6.useRef(
+  const [isSwipeDragging, setIsSwipeDragging] = React7.useState(false);
+  const [snapBack, setSnapBack] = React7.useState(false);
+  const stageRef = React7.useRef(null);
+  const pointersRef = React7.useRef(/* @__PURE__ */ new Map());
+  const pinchStartRef = React7.useRef(null);
+  const panRef = React7.useRef(null);
+  const swipeRef = React7.useRef(null);
+  const lastTapRef = React7.useRef(
     null
   );
-  const indexRef = React6.useRef(index);
+  const indexRef = React7.useRef(index);
   indexRef.current = index;
-  const imagesLengthRef = React6.useRef(images.length);
+  const imagesLengthRef = React7.useRef(images.length);
   imagesLengthRef.current = images.length;
-  const resetZoom = React6.useCallback(() => {
+  const resetZoom = React7.useCallback(() => {
     setTransform(IDENTITY);
     setIsSwipeDragging(false);
     setSnapBack(false);
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     resetZoom();
   }, [index, images[index], resetZoom]);
   function goPrev() {
@@ -588,7 +588,7 @@ function ImageLightbox({
   function goNext() {
     onIndexChange((index + 1) % images.length);
   }
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key === "Escape") {
         onClose();
@@ -604,14 +604,14 @@ function ImageLightbox({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [index, images.length, hasMultiple, onClose, onIndexChange]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = previousOverflow;
     };
   }, []);
-  const stageOrigin = React6.useCallback((clientX, clientY) => {
+  const stageOrigin = React7.useCallback((clientX, clientY) => {
     const stage = stageRef.current;
     if (!stage) return { x: 0, y: 0 };
     const rect = stage.getBoundingClientRect();
@@ -620,7 +620,7 @@ function ImageLightbox({
       y: clientY - rect.top - rect.height / 2
     };
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const stage = stageRef.current;
     if (!stage) return;
     const handleWheel = (e) => {
@@ -1052,18 +1052,18 @@ function ThemeSwitcher({
   labels: userLabels
 }) {
   const { theme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = React6.useState(false);
+  const [mounted, setMounted] = React7.useState(false);
   const reduceMotion = framerMotion.useReducedMotion();
   const sizes = sizeClasses[size];
   const shapeClass = shapeClasses[shape];
   const labels = { ...defaultLabels, ...userLabels };
-  const handleThemeClick = React6.useCallback(
+  const handleThemeClick = React7.useCallback(
     (themeKey) => {
       setTheme(themeKey);
     },
     [setTheme]
   );
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) {
@@ -1605,7 +1605,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React6__namespace.useMemo(
+  const _values = React7__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -1699,18 +1699,18 @@ function AvatarEditor({
   className,
   controlSize = "default"
 }) {
-  const canvasRef = React6.useRef(null);
-  const fileInputRef = React6.useRef(null);
-  const containerRef = React6.useRef(null);
-  const [image, setImage] = React6.useState(null);
-  const [imageLoaded, setImageLoaded] = React6.useState(false);
-  const [zoom, setZoom] = React6.useState(1);
-  const [rotation, setRotation] = React6.useState(0);
-  const [position, setPosition] = React6.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React6.useState(false);
-  const [dragStart, setDragStart] = React6.useState({ x: 0, y: 0 });
-  const [showGrid, setShowGrid] = React6.useState(initialShowGrid);
-  const generateOutput = React6.useCallback(() => {
+  const canvasRef = React7.useRef(null);
+  const fileInputRef = React7.useRef(null);
+  const containerRef = React7.useRef(null);
+  const [image, setImage] = React7.useState(null);
+  const [imageLoaded, setImageLoaded] = React7.useState(false);
+  const [zoom, setZoom] = React7.useState(1);
+  const [rotation, setRotation] = React7.useState(0);
+  const [position, setPosition] = React7.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React7.useState(false);
+  const [dragStart, setDragStart] = React7.useState({ x: 0, y: 0 });
+  const [showGrid, setShowGrid] = React7.useState(initialShowGrid);
+  const generateOutput = React7.useCallback(() => {
     if (!canvasRef.current || !image) return null;
     const outputCanvas = document.createElement("canvas");
     outputCanvas.width = outputSize;
@@ -1721,7 +1721,7 @@ function AvatarEditor({
     const mimeType = `image/${outputFormat}`;
     return outputCanvas.toDataURL(mimeType, outputQuality);
   }, [image, outputSize, outputFormat, outputQuality]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!canvasRef.current || !image || !imageLoaded) return;
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");
@@ -1789,12 +1789,12 @@ function AvatarEditor({
     generateOutput,
     onChange
   ]);
-  const resetTransforms = React6.useCallback(() => {
+  const resetTransforms = React7.useCallback(() => {
     setZoom(1);
     setRotation(0);
     setPosition({ x: 0, y: 0 });
   }, []);
-  const handleFileSelect = React6.useCallback(
+  const handleFileSelect = React7.useCallback(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -1813,7 +1813,7 @@ function AvatarEditor({
     },
     [resetTransforms]
   );
-  const handleMouseDown = React6.useCallback(
+  const handleMouseDown = React7.useCallback(
     (e) => {
       if (!imageLoaded) return;
       setIsDragging(true);
@@ -1821,7 +1821,7 @@ function AvatarEditor({
     },
     [imageLoaded, position]
   );
-  const handleMouseMove = React6.useCallback(
+  const handleMouseMove = React7.useCallback(
     (e) => {
       if (!isDragging) return;
       setPosition({
@@ -1831,10 +1831,10 @@ function AvatarEditor({
     },
     [isDragging, dragStart]
   );
-  const handleMouseUp = React6.useCallback(() => {
+  const handleMouseUp = React7.useCallback(() => {
     setIsDragging(false);
   }, []);
-  const handleTouchStart = React6.useCallback(
+  const handleTouchStart = React7.useCallback(
     (e) => {
       if (!imageLoaded) return;
       const touch = e.touches[0];
@@ -1846,7 +1846,7 @@ function AvatarEditor({
     },
     [imageLoaded, position]
   );
-  const handleTouchMove = React6.useCallback(
+  const handleTouchMove = React7.useCallback(
     (e) => {
       if (!isDragging) return;
       const touch = e.touches[0];
@@ -1857,7 +1857,7 @@ function AvatarEditor({
     },
     [isDragging, dragStart]
   );
-  const handleDiscard = React6.useCallback(() => {
+  const handleDiscard = React7.useCallback(() => {
     setImage(null);
     setImageLoaded(false);
     resetTransforms();
@@ -2406,8 +2406,8 @@ function DrawerTitle({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React6.useState(false);
-  React6.useEffect(() => {
+  const [matches, setMatches] = React7.useState(false);
+  React7.useEffect(() => {
     const media = window.matchMedia(query);
     if (media.matches !== matches) {
       setMatches(media.matches);
@@ -2436,13 +2436,13 @@ function AvatarEditorDialog({
   errorMessage = "Failed to save avatar. Please try again.",
   className
 }) {
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [editedValue, setEditedValue] = React6.useState(value ?? null);
-  const [isSaving, setIsSaving] = React6.useState(false);
-  const [feedback, setFeedback] = React6.useState(null);
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const [editedValue, setEditedValue] = React7.useState(value ?? null);
+  const [isSaving, setIsSaving] = React7.useState(false);
+  const [feedback, setFeedback] = React7.useState(null);
   const isMobile = useMediaQuery("(max-width: 640px)");
   const caption = (placeholder ?? "").trim();
-  const handleOpenChange = React6.useCallback(
+  const handleOpenChange = React7.useCallback(
     (open) => {
       if (open) {
         setEditedValue(value ?? null);
@@ -2452,7 +2452,7 @@ function AvatarEditorDialog({
     },
     [value]
   );
-  const handleAccept = React6.useCallback(async () => {
+  const handleAccept = React7.useCallback(async () => {
     if (!editedValue) return;
     setIsSaving(true);
     setFeedback(null);
@@ -2734,22 +2734,22 @@ function EmojiPicker({
   recentLimit = 24,
   storageKey = "blocks-emoji"
 }) {
-  const strings = React6__namespace.useMemo(
+  const strings = React7__namespace.useMemo(
     () => ({ ...DEFAULT_LABELS[locale], ...labels }),
     [locale, labels]
   );
-  const titles = React6__namespace.useMemo(
+  const titles = React7__namespace.useMemo(
     () => ({ ...DEFAULT_TITLES[locale], ...labels?.categoryTitles }),
     [locale, labels]
   );
-  const [query, setQuery] = React6__namespace.useState("");
-  const [skinTone, setSkinTone] = React6__namespace.useState(() => {
+  const [query, setQuery] = React7__namespace.useState("");
+  const [skinTone, setSkinTone] = React7__namespace.useState(() => {
     const raw = readStored(storageKey, "tone");
     const parsed = raw != null ? Number.parseInt(raw, 10) : 0;
     return parsed >= 0 && parsed <= 5 ? parsed : 0;
   });
-  const [toneOpen, setToneOpen] = React6__namespace.useState(false);
-  const [recents, setRecents] = React6__namespace.useState(() => {
+  const [toneOpen, setToneOpen] = React7__namespace.useState(false);
+  const [recents, setRecents] = React7__namespace.useState(() => {
     const raw = readStored(storageKey, "recent");
     if (!raw) return [];
     try {
@@ -2759,13 +2759,13 @@ function EmojiPicker({
       return [];
     }
   });
-  const [focusIndex, setFocusIndex] = React6__namespace.useState(-1);
-  const scrollRef = React6__namespace.useRef(null);
-  const sectionRefs = React6__namespace.useRef(
+  const [focusIndex, setFocusIndex] = React7__namespace.useState(-1);
+  const scrollRef = React7__namespace.useRef(null);
+  const sectionRefs = React7__namespace.useRef(
     /* @__PURE__ */ new Map()
   );
   const normalizedQuery = normalizeEmojiQuery(query);
-  const sections = React6__namespace.useMemo(() => {
+  const sections = React7__namespace.useMemo(() => {
     if (normalizedQuery) return [];
     const result = [];
     if (recents.length > 0) {
@@ -2784,7 +2784,7 @@ function EmojiPicker({
     }
     return result;
   }, [normalizedQuery, recents, titles]);
-  const searchResults = React6__namespace.useMemo(() => {
+  const searchResults = React7__namespace.useMemo(() => {
     if (!normalizedQuery) return [];
     const out = [];
     for (const category of EMOJI_CATEGORIES) {
@@ -2794,21 +2794,21 @@ function EmojiPicker({
     }
     return out;
   }, [normalizedQuery]);
-  const flatList = React6__namespace.useMemo(() => {
+  const flatList = React7__namespace.useMemo(() => {
     if (normalizedQuery) return searchResults;
     return sections.flatMap((s) => s.emojis);
   }, [normalizedQuery, searchResults, sections]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     setFocusIndex(-1);
   }, [normalizedQuery]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     if (focusIndex < 0) return;
     const el = scrollRef.current?.querySelector(
       `[data-emoji-index="${focusIndex}"]`
     );
     el?.focus();
   }, [focusIndex]);
-  const commitRecent = React6__namespace.useCallback(
+  const commitRecent = React7__namespace.useCallback(
     (glyph) => {
       setRecents((prev) => {
         const next = [glyph, ...prev.filter((e) => e !== glyph)].slice(
@@ -2821,14 +2821,14 @@ function EmojiPicker({
     },
     [recentLimit, storageKey]
   );
-  const handleSelect = React6__namespace.useCallback(
+  const handleSelect = React7__namespace.useCallback(
     (glyph) => {
       commitRecent(glyph);
       onSelect(glyph);
     },
     [commitRecent, onSelect]
   );
-  const chooseTone = React6__namespace.useCallback(
+  const chooseTone = React7__namespace.useCallback(
     (tone) => {
       setSkinTone(tone);
       setToneOpen(false);
@@ -3134,17 +3134,17 @@ function EmojiPickerPopover({
   locale = "en",
   ...pickerProps
 }) {
-  const [internalOpen, setInternalOpen] = React6__namespace.useState(false);
+  const [internalOpen, setInternalOpen] = React7__namespace.useState(false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
-  const setOpen = React6__namespace.useCallback(
+  const setOpen = React7__namespace.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const handleSelect = React6__namespace.useCallback(
+  const handleSelect = React7__namespace.useCallback(
     (emoji) => {
       onSelect(emoji);
       if (!keepOpenOnSelect) setOpen(false);
@@ -3177,8 +3177,10 @@ function insertAtCaret(element, value, text) {
     caret: start + text.length
   };
 }
-var wrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
-var fieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
+
+// src/components/emoji/emoji-field-shared.ts
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
     for (const ref of refs) {
@@ -3202,7 +3204,7 @@ function emitChange(element, nextValue, onChange) {
   });
 }
 function useEmojiInsert(fieldRef, value, onChange) {
-  return React6__namespace.useCallback(
+  return React7__namespace.useCallback(
     (emoji) => {
       const el = fieldRef.current;
       const current = value !== void 0 && value !== null ? String(value) : el?.value ?? "";
@@ -3223,7 +3225,7 @@ function useEmojiInsert(fieldRef, value, onChange) {
     [fieldRef, value, onChange]
   );
 }
-var EmojiTextarea = React6__namespace.forwardRef(
+var EmojiTextarea = React7__namespace.forwardRef(
   function EmojiTextarea2({
     className,
     locale = "en",
@@ -3243,10 +3245,10 @@ var EmojiTextarea = React6__namespace.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6__namespace.useRef(null);
+    const fieldRef = React7__namespace.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -3258,7 +3260,7 @@ var EmojiTextarea = React6__namespace.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex min-h-20 w-full rounded-md px-3 py-2 pb-9 pr-10 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3289,7 +3291,7 @@ var EmojiTextarea = React6__namespace.forwardRef(
   }
 );
 EmojiTextarea.displayName = "EmojiTextarea";
-var EmojiInput = React6__namespace.forwardRef(
+var EmojiInput = React7__namespace.forwardRef(
   function EmojiInput2({
     className,
     locale = "en",
@@ -3310,10 +3312,10 @@ var EmojiInput = React6__namespace.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6__namespace.useRef(null);
+    const fieldRef = React7__namespace.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -3326,7 +3328,7 @@ var EmojiInput = React6__namespace.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md px-3 py-1 pr-10 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3518,27 +3520,27 @@ function useHlsPlayback({
   onError,
   onPlayingChange
 }) {
-  const videoRef = React6__namespace.useRef(null);
-  const hlsRef = React6__namespace.useRef(null);
-  const [state, setState] = React6__namespace.useState("idle");
-  const [qualities, setQualities] = React6__namespace.useState([]);
-  const [activeLevel, setActiveLevel] = React6__namespace.useState(-1);
-  const [autoplayState, setAutoplayState] = React6__namespace.useState("none");
-  const [error, setError] = React6__namespace.useState(null);
-  const [reloadKey, setReloadKey] = React6__namespace.useState(0);
-  const onErrorRef = React6__namespace.useRef(onError);
-  const onPlayingChangeRef = React6__namespace.useRef(onPlayingChange);
-  React6__namespace.useEffect(() => {
+  const videoRef = React7__namespace.useRef(null);
+  const hlsRef = React7__namespace.useRef(null);
+  const [state, setState] = React7__namespace.useState("idle");
+  const [qualities, setQualities] = React7__namespace.useState([]);
+  const [activeLevel, setActiveLevel] = React7__namespace.useState(-1);
+  const [autoplayState, setAutoplayState] = React7__namespace.useState("none");
+  const [error, setError] = React7__namespace.useState(null);
+  const [reloadKey, setReloadKey] = React7__namespace.useState(0);
+  const onErrorRef = React7__namespace.useRef(onError);
+  const onPlayingChangeRef = React7__namespace.useRef(onPlayingChange);
+  React7__namespace.useEffect(() => {
     onErrorRef.current = onError;
     onPlayingChangeRef.current = onPlayingChange;
   }, [onError, onPlayingChange]);
-  const retry = React6__namespace.useCallback(() => {
+  const retry = React7__namespace.useCallback(() => {
     setError(null);
     setState("loading");
     setAutoplayState("none");
     setReloadKey((k) => k + 1);
   }, []);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     const media = videoRef.current;
     if (!media || !src || !active) {
       setState("idle");
@@ -3750,7 +3752,7 @@ function useHlsPlayback({
       destroyHls();
     };
   }, [src, mode, active, autoPlay, muted, reloadKey]);
-  const setLevel = React6__namespace.useCallback((index) => {
+  const setLevel = React7__namespace.useCallback((index) => {
     const hls = hlsRef.current;
     if (!hls) return;
     hls.nextLevel = index;
@@ -3833,12 +3835,12 @@ function VideoPlayer({
   className
 }) {
   const t = { ...DEFAULT_LABELS2, ...labels };
-  const containerRef = React6__namespace.useRef(null);
-  const firstPlayFiredRef = React6__namespace.useRef(false);
-  const [userStarted, setUserStarted] = React6__namespace.useState(false);
+  const containerRef = React7__namespace.useRef(null);
+  const firstPlayFiredRef = React7__namespace.useRef(false);
+  const [userStarted, setUserStarted] = React7__namespace.useState(false);
   const active = autoPlay || !poster || userStarted;
   const autoplayActive = autoPlay || userStarted;
-  const handlePlayingChange = React6__namespace.useCallback(
+  const handlePlayingChange = React7__namespace.useCallback(
     (playing) => {
       setIsPlaying(playing);
       if (playing && !firstPlayFiredRef.current) {
@@ -3867,25 +3869,25 @@ function VideoPlayer({
     onError,
     onPlayingChange: handlePlayingChange
   });
-  const [isPlaying, setIsPlaying] = React6__namespace.useState(false);
-  const [isMuted, setIsMuted] = React6__namespace.useState(muted);
-  const [volume, setVolume] = React6__namespace.useState(1);
-  const [currentTime, setCurrentTime] = React6__namespace.useState(0);
-  const [duration, setDuration] = React6__namespace.useState(0);
-  const [buffered, setBuffered] = React6__namespace.useState(0);
-  const [isFullscreen, setIsFullscreen] = React6__namespace.useState(false);
-  const [pipActive, setPipActive] = React6__namespace.useState(false);
-  const [controlsVisible, setControlsVisible] = React6__namespace.useState(true);
-  const [playbackRate, setPlaybackRate] = React6__namespace.useState(1);
-  const [openMenu, setOpenMenu] = React6__namespace.useState(
+  const [isPlaying, setIsPlaying] = React7__namespace.useState(false);
+  const [isMuted, setIsMuted] = React7__namespace.useState(muted);
+  const [volume, setVolume] = React7__namespace.useState(1);
+  const [currentTime, setCurrentTime] = React7__namespace.useState(0);
+  const [duration, setDuration] = React7__namespace.useState(0);
+  const [buffered, setBuffered] = React7__namespace.useState(0);
+  const [isFullscreen, setIsFullscreen] = React7__namespace.useState(false);
+  const [pipActive, setPipActive] = React7__namespace.useState(false);
+  const [controlsVisible, setControlsVisible] = React7__namespace.useState(true);
+  const [playbackRate, setPlaybackRate] = React7__namespace.useState(1);
+  const [openMenu, setOpenMenu] = React7__namespace.useState(
     null
   );
-  const [behindLive, setBehindLive] = React6__namespace.useState(false);
-  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React6__namespace.useState(false);
-  const hideTimerRef = React6__namespace.useRef(null);
+  const [behindLive, setBehindLive] = React7__namespace.useState(false);
+  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React7__namespace.useState(false);
+  const hideTimerRef = React7__namespace.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
   const fullscreenSupported = hasStandardFullscreen() || webkitFullscreenSupported;
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
     const onTimeUpdate = () => {
@@ -3918,15 +3920,15 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
   }, [videoRef, active]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     const video = asWebkitVideo(videoRef.current);
     if (!video) return;
     const onBegin = () => setIsFullscreen(true);
@@ -3938,7 +3940,7 @@ function VideoPlayer({
       video.removeEventListener("webkitendfullscreen", onEnd);
     };
   }, [videoRef, active]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     const onEnter = () => setPipActive(true);
@@ -3950,18 +3952,18 @@ function VideoPlayer({
       video.removeEventListener("leavepictureinpicture", onLeave);
     };
   }, [videoRef]);
-  const scheduleHide = React6__namespace.useCallback(() => {
+  const scheduleHide = React7__namespace.useCallback(() => {
     if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     hideTimerRef.current = setTimeout(() => {
       setControlsVisible(false);
       setOpenMenu(null);
     }, CONTROLS_HIDE_MS);
   }, []);
-  const revealControls = React6__namespace.useCallback(() => {
+  const revealControls = React7__namespace.useCallback(() => {
     setControlsVisible(true);
     scheduleHide();
   }, [scheduleHide]);
-  React6__namespace.useEffect(() => {
+  React7__namespace.useEffect(() => {
     return () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     };
@@ -4424,8 +4426,8 @@ function MenuItem({
   );
 }
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
-  const [stats, setStats] = React6__namespace.useState({});
-  React6__namespace.useEffect(() => {
+  const [stats, setStats] = React7__namespace.useState({});
+  React7__namespace.useEffect(() => {
     if (!statsUrl || !enabled) return;
     let cancelled = false;
     const controller = new AbortController();
@@ -4455,16 +4457,16 @@ function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {})
   return stats;
 }
 function useDebouncedValue(value, delayMs) {
-  const [debounced, setDebounced] = React6.useState(value);
-  React6.useEffect(() => {
+  const [debounced, setDebounced] = React7.useState(value);
+  React7.useEffect(() => {
     const id = window.setTimeout(() => setDebounced(value), delayMs);
     return () => window.clearTimeout(id);
   }, [value, delayMs]);
   return debounced;
 }
 function useDebouncedValueStrict(value, delayMs) {
-  const [debounced, setDebounced] = React6.useState(void 0);
-  React6.useEffect(() => {
+  const [debounced, setDebounced] = React7.useState(void 0);
+  React7.useEffect(() => {
     setDebounced(void 0);
     const id = window.setTimeout(() => setDebounced(value), delayMs);
     return () => window.clearTimeout(id);
@@ -4472,8 +4474,8 @@ function useDebouncedValueStrict(value, delayMs) {
   return debounced;
 }
 function useMediaQuery2(query) {
-  const [matches, setMatches] = React6.useState(false);
-  React6.useEffect(() => {
+  const [matches, setMatches] = React7.useState(false);
+  React7.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
@@ -4485,9 +4487,9 @@ function useMediaQuery2(query) {
 }
 function useSearchHotkey(options = {}) {
   const { defaultOpen = false, disabled = false } = options;
-  const [open, setOpen] = React6.useState(defaultOpen);
-  const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
-  React6.useEffect(() => {
+  const [open, setOpen] = React7.useState(defaultOpen);
+  const toggle = React7.useCallback(() => setOpen((prev) => !prev), []);
+  React7.useEffect(() => {
     if (disabled) return;
     function handleKeyDown(event) {
       if (event.key.toLowerCase() !== "k") return;
@@ -4902,26 +4904,26 @@ function SearchablePicker(props) {
   const labels = { ...defaultLabels3, ...userLabels };
   const resolvedEmptyLabel = emptyLabel ?? labels.emptyOption;
   const isMobile = useMediaQuery2("(max-width: 767px)");
-  const generatedId = React6.useId();
+  const generatedId = React7.useId();
   const triggerId = id ?? generatedId;
-  const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(false);
   const open = openProp ?? uncontrolledOpen;
-  const setOpen = React6.useCallback(
+  const setOpen = React7.useCallback(
     (next) => {
       onOpenChange?.(next);
       if (openProp === void 0) setUncontrolledOpen(next);
     },
     [onOpenChange, openProp]
   );
-  const [query, setQuery] = React6.useState("");
-  const [remoteItems, setRemoteItems] = React6.useState([]);
-  const [isLoading, setIsLoading] = React6.useState(false);
-  const [hasError, setHasError] = React6.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React6.useState(false);
+  const [query, setQuery] = React7.useState("");
+  const [remoteItems, setRemoteItems] = React7.useState([]);
+  const [isLoading, setIsLoading] = React7.useState(false);
+  const [hasError, setHasError] = React7.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React7.useState(false);
   const debouncedQuery = useDebouncedValue(query, debounceMs);
-  const requestIdRef = React6.useRef(0);
-  const knownItemsRef = React6.useRef(/* @__PURE__ */ new Map());
-  const rememberItems = React6.useCallback(
+  const requestIdRef = React7.useRef(0);
+  const knownItemsRef = React7.useRef(/* @__PURE__ */ new Map());
+  const rememberItems = React7.useCallback(
     (items) => {
       for (const item of items) {
         knownItemsRef.current.set(getOptionValue(item), item);
@@ -4929,12 +4931,12 @@ function SearchablePicker(props) {
     },
     [getOptionValue]
   );
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (options) rememberItems(options);
     if (pinned?.recommended) rememberItems(pinned.recommended);
     if (pinned?.recent) rememberItems(pinned.recent);
   }, [options, pinned, rememberItems]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!open) {
       setQuery("");
       setRemoteItems([]);
@@ -4944,7 +4946,7 @@ function SearchablePicker(props) {
   }, [open]);
   const trimmedDebounced = debouncedQuery.trim();
   const shouldFetch = Boolean(fetchOptions) && open && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!shouldFetch || !fetchOptions) {
       if (!trimmedDebounced) {
         setRemoteItems([]);
@@ -4969,7 +4971,7 @@ function SearchablePicker(props) {
       setIsLoading(false);
     });
   }, [shouldFetch, fetchOptions, trimmedDebounced, rememberItems]);
-  const selectedValues = React6.useMemo(() => {
+  const selectedValues = React7.useMemo(() => {
     if (mode === "multiple") {
       const multiValue = props.value ?? [];
       return new Set(multiValue);
@@ -4978,12 +4980,12 @@ function SearchablePicker(props) {
     return singleValue ? /* @__PURE__ */ new Set([singleValue]) : /* @__PURE__ */ new Set();
   }, [mode, props]);
   const selectedValueKey = mode === "multiple" ? (props.value ?? []).join("\0") : props.value ?? "";
-  const selectedItems = React6.useMemo(() => {
+  const selectedItems = React7.useMemo(() => {
     const values = mode === "multiple" ? selectedValueKey ? selectedValueKey.split("\0") : [] : selectedValueKey ? [selectedValueKey] : [];
     return values.map((value) => knownItemsRef.current.get(value)).filter((item) => item !== void 0);
   }, [mode, selectedValueKey, options, pinned, remoteItems]);
   const queryForFilter = query.trim();
-  const recommended = React6.useMemo(() => {
+  const recommended = React7.useMemo(() => {
     if (queryForFilter) return [];
     const pinnedValues = /* @__PURE__ */ new Set();
     const items = dedupeByValue(
@@ -4992,7 +4994,7 @@ function SearchablePicker(props) {
     for (const entry of items) pinnedValues.add(entry.value);
     return items;
   }, [queryForFilter, pinned?.recommended, getOptionValue, getOptionLabel]);
-  const recent = React6.useMemo(() => {
+  const recent = React7.useMemo(() => {
     if (queryForFilter) return [];
     const exclude = new Set(recommended.map((e) => e.value));
     return dedupeByValue(
@@ -5006,13 +5008,13 @@ function SearchablePicker(props) {
     getOptionValue,
     getOptionLabel
   ]);
-  const pinnedValueSet = React6.useMemo(() => {
+  const pinnedValueSet = React7.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const entry of recommended) set.add(entry.value);
     for (const entry of recent) set.add(entry.value);
     return set;
   }, [recommended, recent]);
-  const results = React6.useMemo(() => {
+  const results = React7.useMemo(() => {
     const usingRemote = Boolean(fetchOptions) && trimmedDebounced.length >= minQueryLength && (trimmedDebounced.length > 0 || !options);
     if (usingRemote) {
       return dedupeByValue(
@@ -5038,7 +5040,7 @@ function SearchablePicker(props) {
     pinnedValueSet
   ]);
   const closeOnSelect = keepOpenOnSelect !== void 0 ? !keepOpenOnSelect : mode === "single";
-  const handleSelectEmpty = React6.useCallback(() => {
+  const handleSelectEmpty = React7.useCallback(() => {
     if (mode === "single") {
       props.onValueChange?.(
         null
@@ -5046,7 +5048,7 @@ function SearchablePicker(props) {
     }
     if (closeOnSelect) setOpen(false);
   }, [mode, props, closeOnSelect, setOpen]);
-  const handleSelectItem = React6.useCallback(
+  const handleSelectItem = React7.useCallback(
     (value) => {
       if (mode === "multiple") {
         const current = props.value ?? [];
@@ -5069,7 +5071,7 @@ function SearchablePicker(props) {
     },
     [mode, props, maxSelected, closeOnSelect, setOpen]
   );
-  const handleClear = React6.useCallback(
+  const handleClear = React7.useCallback(
     (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -5083,7 +5085,7 @@ function SearchablePicker(props) {
     },
     [mode, props]
   );
-  const handleLoadMore = React6.useCallback(async () => {
+  const handleLoadMore = React7.useCallback(async () => {
     if (!onLoadMore || isLoadingMore) return;
     setIsLoadingMore(true);
     try {
@@ -5092,7 +5094,7 @@ function SearchablePicker(props) {
       setIsLoadingMore(false);
     }
   }, [onLoadMore, isLoadingMore]);
-  const triggerLabel = React6.useMemo(() => {
+  const triggerLabel = React7.useMemo(() => {
     if (renderValue) {
       if (mode === "multiple") {
         return renderValue(selectedItems);
@@ -5274,20 +5276,20 @@ function SearchCommand({
   className
 }) {
   const labels = { ...defaultLabels4, ...userLabels };
-  const [query, setQuery] = React6.useState("");
-  const [hits, setHits] = React6.useState([]);
-  const [isLoading, setIsLoading] = React6.useState(false);
-  const [hasError, setHasError] = React6.useState(false);
+  const [query, setQuery] = React7.useState("");
+  const [hits, setHits] = React7.useState([]);
+  const [isLoading, setIsLoading] = React7.useState(false);
+  const [hasError, setHasError] = React7.useState(false);
   const debouncedQuery = useDebouncedValue(query, debounceMs);
-  const requestIdRef = React6.useRef(0);
-  React6.useEffect(() => {
+  const requestIdRef = React7.useRef(0);
+  React7.useEffect(() => {
     if (!open) {
       setQuery("");
       setHits([]);
       setHasError(false);
     }
   }, [open]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const trimmed = debouncedQuery.trim();
     if (trimmed.length < minQueryLength) {
       setHits([]);
@@ -5310,13 +5312,13 @@ function SearchCommand({
       setIsLoading(false);
     });
   }, [debouncedQuery, minQueryLength, fetchResults]);
-  const filteredFeatures = React6.useMemo(() => {
+  const filteredFeatures = React7.useMemo(() => {
     if (!query.trim()) return features;
     return features.filter(
       (feature) => fuzzyMatch(query, feature.label) || feature.keywords?.some((keyword) => fuzzyMatch(query, keyword))
     );
   }, [features, query]);
-  const groupedHits = React6.useMemo(() => groupHitsByType(hits), [hits]);
+  const groupedHits = React7.useMemo(() => groupHitsByType(hits), [hits]);
   function handleSelect(selection) {
     onSelect(selection);
     onOpenChange(false);
@@ -5450,7 +5452,7 @@ function ScrollBar({
   );
 }
 var phoneInputGroupClass = "flex h-9 w-full gap-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] [--PhoneInputCountrySelect-marginRight:0] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30 [&_.PhoneInputCountry]:mr-0";
-var PhoneInput = React6__namespace.forwardRef(
+var PhoneInput = React7__namespace.forwardRef(
   ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       RPNInput__namespace.default,
@@ -5470,7 +5472,7 @@ var PhoneInput = React6__namespace.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var InputComponent = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputComponent = React7__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   Input,
   {
     className: cn(
@@ -5488,9 +5490,9 @@ var CountrySelect = ({
   options: countryList,
   onChange
 }) => {
-  const scrollAreaRef = React6__namespace.useRef(null);
-  const [searchValue, setSearchValue] = React6__namespace.useState("");
-  const [isOpen, setIsOpen] = React6__namespace.useState(false);
+  const scrollAreaRef = React7__namespace.useRef(null);
+  const [searchValue, setSearchValue] = React7__namespace.useState("");
+  const [isOpen, setIsOpen] = React7__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Popover,
     {
@@ -5671,8 +5673,8 @@ var MEXICO_STATE_PATHS = {
 };
 function MexicoMap({ selected, onToggle, className }) {
   const isInteractive = typeof onToggle === "function";
-  const selectedSet = React6__namespace.useMemo(() => new Set(selected), [selected]);
-  const handleKeyDown = React6__namespace.useCallback(
+  const selectedSet = React7__namespace.useMemo(() => new Set(selected), [selected]);
+  const handleKeyDown = React7__namespace.useCallback(
     (event, id) => {
       if (!onToggle) return;
       if (event.key === "Enter" || event.key === " ") {
@@ -6154,6 +6156,121 @@ function ChatMessageList({
     /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerButton, {})
   ] }) });
 }
+var MessageComposer = React7__namespace.forwardRef(function MessageComposer2({
+  className,
+  locale = "en",
+  disabled,
+  readOnly,
+  value,
+  onChange,
+  onSubmit,
+  onKeyDown,
+  sendLabel,
+  sendDisabled = false,
+  sendButtonClassName,
+  sendButtonSize = "sm",
+  triggerLabel,
+  keepOpenOnSelect,
+  open,
+  onOpenChange,
+  side = "top",
+  align = "end",
+  labels,
+  recentLimit,
+  storageKey,
+  emojiTriggerClassName,
+  rows = 2,
+  ...props
+}, ref) {
+  const formRef = React7__namespace.useRef(null);
+  const fieldRef = React7__namespace.useRef(null);
+  const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
+  const pickerDisabled = Boolean(disabled || readOnly);
+  const draft = value !== void 0 && value !== null ? String(value) : "";
+  const canSubmit = Boolean(draft.trim()) && !sendDisabled && !disabled && !readOnly;
+  const handleSubmit = React7__namespace.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!canSubmit) return;
+      onSubmit(event);
+    },
+    [canSubmit, onSubmit]
+  );
+  const handleKeyDown = React7__namespace.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key !== "Enter" || event.shiftKey) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      if (!canSubmit) return;
+      formRef.current?.requestSubmit();
+    },
+    [canSubmit, onKeyDown]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: cn(emojiFieldWrapperClassName, "flex flex-col", className),
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            "data-slot": "textarea",
+            ref: mergeRefs(fieldRef, ref),
+            disabled,
+            readOnly,
+            value,
+            onChange,
+            onKeyDown: handleKeyDown,
+            rows,
+            className: cn(
+              "placeholder:text-muted-foreground flex min-h-10 w-full resize-none rounded-md px-3 pt-2 pb-1 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              emojiFieldResetClassName
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-1.5 pb-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EmojiPickerPopover,
+            {
+              locale,
+              onSelect: handleEmojiSelect,
+              disabled: pickerDisabled,
+              triggerLabel,
+              keepOpenOnSelect,
+              open,
+              onOpenChange,
+              side,
+              align,
+              labels,
+              recentLimit,
+              storageKey,
+              triggerClassName: cn(
+                "size-7 text-muted-foreground",
+                emojiTriggerClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "submit",
+              size: sendButtonSize,
+              disabled: !canSubmit,
+              className: sendButtonClassName,
+              children: sendLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MessageComposer.displayName = "MessageComposer";
 var RECONNECT_DELAY_MS = 2e3;
 function useSupportConversation({
   client,
@@ -6164,21 +6281,21 @@ function useSupportConversation({
   onConversationReady,
   onIncomingMessage
 }) {
-  const [conversationId, setConversationId] = React6.useState(
+  const [conversationId, setConversationId] = React7.useState(
     conversationIdProp
   );
-  const [messages, setMessages] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(false);
-  const [sending, setSending] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
-  const socketRef = React6.useRef(null);
-  const reconnectRef = React6.useRef(null);
-  const closedByUser = React6.useRef(false);
-  const onReadyRef = React6.useRef(onConversationReady);
-  const onIncomingRef = React6.useRef(onIncomingMessage);
+  const [messages, setMessages] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(false);
+  const [sending, setSending] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
+  const socketRef = React7.useRef(null);
+  const reconnectRef = React7.useRef(null);
+  const closedByUser = React7.useRef(false);
+  const onReadyRef = React7.useRef(onConversationReady);
+  const onIncomingRef = React7.useRef(onIncomingMessage);
   onReadyRef.current = onConversationReady;
   onIncomingRef.current = onIncomingMessage;
-  const load = React6.useCallback(async () => {
+  const load = React7.useCallback(async () => {
     if (!enabled) return;
     setLoading(true);
     setError(null);
@@ -6204,10 +6321,10 @@ function useSupportConversation({
       setLoading(false);
     }
   }, [client, conversationIdProp, enabled, open]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     void load();
   }, [load]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     closedByUser.current = false;
     if (!enabled || !conversationId) return;
     let cancelled = false;
@@ -6253,7 +6370,7 @@ function useSupportConversation({
       socketRef.current = null;
     };
   }, [conversationId, enabled, getWsUrl]);
-  const send = React6.useCallback(
+  const send = React7.useCallback(
     async (text) => {
       const trimmed = text.trim();
       if (!conversationId || !trimmed || sending) return;
@@ -6285,9 +6402,9 @@ function useSupportConversation({
     reload: load
   };
 }
-var SupportMessengerContext = React6.createContext(null);
+var SupportMessengerContext = React7.createContext(null);
 function useSupportMessenger() {
-  const ctx = React6.useContext(SupportMessengerContext);
+  const ctx = React7.useContext(SupportMessengerContext);
   if (!ctx) {
     throw new Error(
       "useSupportMessenger must be used within SupportMessengerProvider"
@@ -6296,7 +6413,7 @@ function useSupportMessenger() {
   return ctx;
 }
 function useSupportMessengerOptional() {
-  return React6.useContext(SupportMessengerContext);
+  return React7.useContext(SupportMessengerContext);
 }
 function ThreadPanel({
   thread,
@@ -6311,7 +6428,7 @@ function ThreadPanel({
   onConversationReady,
   className
 }) {
-  const [draft, setDraft] = React6.useState("");
+  const [draft, setDraft] = React7.useState("");
   const { messages, loading, sending, error, send } = useSupportConversation({
     client,
     getWsUrl,
@@ -6374,23 +6491,22 @@ function ThreadPanel({
             emptyDescription: labels.emptyThread
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex gap-2 border-t p-3", onSubmit, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            EmojiTextarea,
-            {
-              locale: emojiLocale,
-              value: draft,
-              onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
-              placeholder: labels.placeholder,
-              "aria-label": labels.placeholder,
-              disabled: loading || sending,
-              maxLength: 2e3,
-              rows: 2,
-              className: "min-h-10 flex-1"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", disabled: !draft.trim() || sending || loading, children: labels.send })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          MessageComposer,
+          {
+            locale: emojiLocale,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
+            onSubmit,
+            sendLabel: labels.send,
+            placeholder: labels.placeholder,
+            "aria-label": labels.placeholder,
+            disabled: loading || sending,
+            sendDisabled: loading || sending,
+            maxLength: 2e3,
+            rows: 2
+          }
+        ) })
       ]
     }
   );
@@ -6406,9 +6522,9 @@ function ListPanel({
   searchThreshold,
   className
 }) {
-  const [query, setQuery] = React6.useState("");
+  const [query, setQuery] = React7.useState("");
   const showSearch = items.length >= searchThreshold;
-  const filtered = React6.useMemo(() => {
+  const filtered = React7.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return items;
     return items.filter(
@@ -6512,32 +6628,32 @@ function SupportMessengerProvider({
   className
 }) {
   const isMobile = useMediaQuery2("(max-width: 767px)");
-  const [listOpen, setListOpen] = React6.useState(false);
-  const [threads, setThreads] = React6.useState([]);
-  const [mobileThreadKey, setMobileThreadKey] = React6.useState(null);
-  const totalUnread = React6.useMemo(
+  const [listOpen, setListOpen] = React7.useState(false);
+  const [threads, setThreads] = React7.useState([]);
+  const [mobileThreadKey, setMobileThreadKey] = React7.useState(null);
+  const totalUnread = React7.useMemo(
     () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
     [items]
   );
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!forceMinimized) return;
     setListOpen(false);
     setThreads([]);
     setMobileThreadKey(null);
   }, [forceMinimized]);
-  const openList = React6.useCallback(() => {
+  const openList = React7.useCallback(() => {
     setListOpen(true);
     void onRefreshItems?.();
   }, [onRefreshItems]);
-  const closeList = React6.useCallback(() => setListOpen(false), []);
-  const toggleList = React6.useCallback(() => {
+  const closeList = React7.useCallback(() => setListOpen(false), []);
+  const toggleList = React7.useCallback(() => {
     setListOpen((prev) => {
       const next = !prev;
       if (next) void onRefreshItems?.();
       return next;
     });
   }, [onRefreshItems]);
-  const openThread = React6.useCallback((req) => {
+  const openThread = React7.useCallback((req) => {
     setListOpen(false);
     setThreads((prev) => {
       const existing = prev.find((t) => t.key === req.key);
@@ -6552,16 +6668,16 @@ function SupportMessengerProvider({
     });
     setMobileThreadKey(req.key);
   }, []);
-  const closeThread = React6.useCallback((key) => {
+  const closeThread = React7.useCallback((key) => {
     setThreads((prev) => prev.filter((t) => t.key !== key));
     setMobileThreadKey((prev) => prev === key ? null : prev);
   }, []);
-  const closeAll = React6.useCallback(() => {
+  const closeAll = React7.useCallback(() => {
     setListOpen(false);
     setThreads([]);
     setMobileThreadKey(null);
   }, []);
-  const ctx = React6.useMemo(
+  const ctx = React7.useMemo(
     () => ({
       listOpen,
       openList,
@@ -6586,7 +6702,7 @@ function SupportMessengerProvider({
       totalUnread
     ]
   );
-  const handleSelectItem = React6.useCallback(
+  const handleSelectItem = React7.useCallback(
     (item) => {
       openThread({
         key: item.key,
@@ -6816,6 +6932,7 @@ exports.MarkerContent = MarkerContent;
 exports.MarkerIcon = MarkerIcon;
 exports.Message = Message;
 exports.MessageAvatar = MessageAvatar;
+exports.MessageComposer = MessageComposer;
 exports.MessageContent = MessageContent;
 exports.MessageFooter = MessageFooter;
 exports.MessageGroup = MessageGroup;