@sesionario/blocks 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -43,7 +43,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
@@ -54,9 +54,9 @@ var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
 var flags__default = /*#__PURE__*/_interopDefault(flags);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 
-var LanguageContext = React5.createContext(null);
+var LanguageContext = React6.createContext(null);
 function useLanguageContext() {
-  return React5.useContext(LanguageContext);
+  return React6.useContext(LanguageContext);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -609,18 +609,18 @@ function ThemeSwitcher({
   labels: userLabels
 }) {
   const { theme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = React5.useState(false);
+  const [mounted, setMounted] = React6.useState(false);
   const reduceMotion = framerMotion.useReducedMotion();
   const sizes = sizeClasses[size];
   const shapeClass = shapeClasses[shape];
   const labels = { ...defaultLabels, ...userLabels };
-  const handleThemeClick = React5.useCallback(
+  const handleThemeClick = React6.useCallback(
     (themeKey) => {
       setTheme(themeKey);
     },
     [setTheme]
   );
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) {
@@ -861,7 +861,7 @@ function SwitcherSkeleton({
     {
       "data-testid": "org-switcher-skeleton",
       className: cn(
-        "pointer-events-none flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2",
+        "pointer-events-none flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2 has-[>svg]:px-2",
         className
       ),
       children: [
@@ -875,8 +875,8 @@ function SwitcherSkeleton({
     }
   );
 }
-var triggerClassName = "flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground";
-var collapsedTriggerClassName = "size-8 min-h-0 h-8 w-8 justify-center gap-0 p-0 px-0";
+var triggerClassName = "flex h-12 min-h-12 w-full items-center gap-2 rounded-md px-2 py-0 has-[>svg]:px-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground";
+var collapsedTriggerClassName = "size-8 min-h-0 h-8 w-8 justify-center gap-0 p-0 px-0 has-[>svg]:p-0 has-[>svg]:px-0";
 function OrgSwitcher({
   activeTenant,
   tenants,
@@ -1162,7 +1162,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React5__namespace.useMemo(
+  const _values = React6__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -1256,18 +1256,18 @@ function AvatarEditor({
   className,
   controlSize = "default"
 }) {
-  const canvasRef = React5.useRef(null);
-  const fileInputRef = React5.useRef(null);
-  const containerRef = React5.useRef(null);
-  const [image, setImage] = React5.useState(null);
-  const [imageLoaded, setImageLoaded] = React5.useState(false);
-  const [zoom, setZoom] = React5.useState(1);
-  const [rotation, setRotation] = React5.useState(0);
-  const [position, setPosition] = React5.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React5.useState(false);
-  const [dragStart, setDragStart] = React5.useState({ x: 0, y: 0 });
-  const [showGrid, setShowGrid] = React5.useState(initialShowGrid);
-  const generateOutput = React5.useCallback(() => {
+  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(() => {
     if (!canvasRef.current || !image) return null;
     const outputCanvas = document.createElement("canvas");
     outputCanvas.width = outputSize;
@@ -1278,7 +1278,7 @@ function AvatarEditor({
     const mimeType = `image/${outputFormat}`;
     return outputCanvas.toDataURL(mimeType, outputQuality);
   }, [image, outputSize, outputFormat, outputQuality]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!canvasRef.current || !image || !imageLoaded) return;
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");
@@ -1346,12 +1346,12 @@ function AvatarEditor({
     generateOutput,
     onChange
   ]);
-  const resetTransforms = React5.useCallback(() => {
+  const resetTransforms = React6.useCallback(() => {
     setZoom(1);
     setRotation(0);
     setPosition({ x: 0, y: 0 });
   }, []);
-  const handleFileSelect = React5.useCallback(
+  const handleFileSelect = React6.useCallback(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -1370,7 +1370,7 @@ function AvatarEditor({
     },
     [resetTransforms]
   );
-  const handleMouseDown = React5.useCallback(
+  const handleMouseDown = React6.useCallback(
     (e) => {
       if (!imageLoaded) return;
       setIsDragging(true);
@@ -1378,7 +1378,7 @@ function AvatarEditor({
     },
     [imageLoaded, position]
   );
-  const handleMouseMove = React5.useCallback(
+  const handleMouseMove = React6.useCallback(
     (e) => {
       if (!isDragging) return;
       setPosition({
@@ -1388,10 +1388,10 @@ function AvatarEditor({
     },
     [isDragging, dragStart]
   );
-  const handleMouseUp = React5.useCallback(() => {
+  const handleMouseUp = React6.useCallback(() => {
     setIsDragging(false);
   }, []);
-  const handleTouchStart = React5.useCallback(
+  const handleTouchStart = React6.useCallback(
     (e) => {
       if (!imageLoaded) return;
       const touch = e.touches[0];
@@ -1403,7 +1403,7 @@ function AvatarEditor({
     },
     [imageLoaded, position]
   );
-  const handleTouchMove = React5.useCallback(
+  const handleTouchMove = React6.useCallback(
     (e) => {
       if (!isDragging) return;
       const touch = e.touches[0];
@@ -1414,7 +1414,7 @@ function AvatarEditor({
     },
     [isDragging, dragStart]
   );
-  const handleDiscard = React5.useCallback(() => {
+  const handleDiscard = React6.useCallback(() => {
     setImage(null);
     setImageLoaded(false);
     resetTransforms();
@@ -1963,8 +1963,8 @@ function DrawerTitle({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React5.useState(false);
-  React5.useEffect(() => {
+  const [matches, setMatches] = React6.useState(false);
+  React6.useEffect(() => {
     const media = window.matchMedia(query);
     if (media.matches !== matches) {
       setMatches(media.matches);
@@ -1991,13 +1991,13 @@ function AvatarEditorDialog({
   errorMessage = "Failed to save avatar. Please try again.",
   className
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [editedValue, setEditedValue] = React5.useState(value ?? null);
-  const [isSaving, setIsSaving] = React5.useState(false);
-  const [feedback, setFeedback] = React5.useState(null);
+  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 isMobile = useMediaQuery("(max-width: 640px)");
   const caption = (placeholder ?? "").trim();
-  const handleOpenChange = React5.useCallback(
+  const handleOpenChange = React6.useCallback(
     (open) => {
       if (open) {
         setEditedValue(value ?? null);
@@ -2007,7 +2007,7 @@ function AvatarEditorDialog({
     },
     [value]
   );
-  const handleAccept = React5.useCallback(async () => {
+  const handleAccept = React6.useCallback(async () => {
     if (!editedValue) return;
     setIsSaving(true);
     setFeedback(null);
@@ -2289,22 +2289,22 @@ function EmojiPicker({
   recentLimit = 24,
   storageKey = "blocks-emoji"
 }) {
-  const strings = React5__namespace.useMemo(
+  const strings = React6__namespace.useMemo(
     () => ({ ...DEFAULT_LABELS[locale], ...labels }),
     [locale, labels]
   );
-  const titles = React5__namespace.useMemo(
+  const titles = React6__namespace.useMemo(
     () => ({ ...DEFAULT_TITLES[locale], ...labels?.categoryTitles }),
     [locale, labels]
   );
-  const [query, setQuery] = React5__namespace.useState("");
-  const [skinTone, setSkinTone] = React5__namespace.useState(() => {
+  const [query, setQuery] = React6__namespace.useState("");
+  const [skinTone, setSkinTone] = React6__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] = React5__namespace.useState(false);
-  const [recents, setRecents] = React5__namespace.useState(() => {
+  const [toneOpen, setToneOpen] = React6__namespace.useState(false);
+  const [recents, setRecents] = React6__namespace.useState(() => {
     const raw = readStored(storageKey, "recent");
     if (!raw) return [];
     try {
@@ -2314,13 +2314,13 @@ function EmojiPicker({
       return [];
     }
   });
-  const [focusIndex, setFocusIndex] = React5__namespace.useState(-1);
-  const scrollRef = React5__namespace.useRef(null);
-  const sectionRefs = React5__namespace.useRef(
+  const [focusIndex, setFocusIndex] = React6__namespace.useState(-1);
+  const scrollRef = React6__namespace.useRef(null);
+  const sectionRefs = React6__namespace.useRef(
     /* @__PURE__ */ new Map()
   );
   const normalizedQuery = normalizeEmojiQuery(query);
-  const sections = React5__namespace.useMemo(() => {
+  const sections = React6__namespace.useMemo(() => {
     if (normalizedQuery) return [];
     const result = [];
     if (recents.length > 0) {
@@ -2339,7 +2339,7 @@ function EmojiPicker({
     }
     return result;
   }, [normalizedQuery, recents, titles]);
-  const searchResults = React5__namespace.useMemo(() => {
+  const searchResults = React6__namespace.useMemo(() => {
     if (!normalizedQuery) return [];
     const out = [];
     for (const category of EMOJI_CATEGORIES) {
@@ -2349,21 +2349,21 @@ function EmojiPicker({
     }
     return out;
   }, [normalizedQuery]);
-  const flatList = React5__namespace.useMemo(() => {
+  const flatList = React6__namespace.useMemo(() => {
     if (normalizedQuery) return searchResults;
     return sections.flatMap((s) => s.emojis);
   }, [normalizedQuery, searchResults, sections]);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     setFocusIndex(-1);
   }, [normalizedQuery]);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     if (focusIndex < 0) return;
     const el = scrollRef.current?.querySelector(
       `[data-emoji-index="${focusIndex}"]`
     );
     el?.focus();
   }, [focusIndex]);
-  const commitRecent = React5__namespace.useCallback(
+  const commitRecent = React6__namespace.useCallback(
     (glyph) => {
       setRecents((prev) => {
         const next = [glyph, ...prev.filter((e) => e !== glyph)].slice(
@@ -2376,14 +2376,14 @@ function EmojiPicker({
     },
     [recentLimit, storageKey]
   );
-  const handleSelect = React5__namespace.useCallback(
+  const handleSelect = React6__namespace.useCallback(
     (glyph) => {
       commitRecent(glyph);
       onSelect(glyph);
     },
     [commitRecent, onSelect]
   );
-  const chooseTone = React5__namespace.useCallback(
+  const chooseTone = React6__namespace.useCallback(
     (tone) => {
       setSkinTone(tone);
       setToneOpen(false);
@@ -2680,6 +2680,7 @@ function EmojiPickerPopover({
   onSelect,
   triggerLabel,
   triggerClassName: triggerClassName2,
+  disabled = false,
   side = "top",
   align = "end",
   open,
@@ -2688,17 +2689,17 @@ function EmojiPickerPopover({
   locale = "en",
   ...pickerProps
 }) {
-  const [internalOpen, setInternalOpen] = React5__namespace.useState(false);
+  const [internalOpen, setInternalOpen] = React6__namespace.useState(false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
-  const setOpen = React5__namespace.useCallback(
+  const setOpen = React6__namespace.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const handleSelect = React5__namespace.useCallback(
+  const handleSelect = React6__namespace.useCallback(
     (emoji) => {
       onSelect(emoji);
       if (!keepOpenOnSelect) setOpen(false);
@@ -2712,6 +2713,7 @@ function EmojiPickerPopover({
         type: "button",
         variant: "ghost",
         size: "icon",
+        disabled,
         "aria-label": triggerLabel ?? DEFAULT_TRIGGER_LABEL[locale],
         className: cn("text-muted-foreground", triggerClassName2),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smile, { className: "size-5" })
@@ -2721,6 +2723,196 @@ function EmojiPickerPopover({
   ] });
 }
 
+// src/lib/insert-at-caret.ts
+function insertAtCaret(element, value, text) {
+  const start = element?.selectionStart ?? value.length;
+  const end = element?.selectionEnd ?? value.length;
+  return {
+    value: value.slice(0, start) + text + value.slice(end),
+    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";
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+  };
+}
+function emitChange(element, nextValue, onChange) {
+  const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(prototype, "value");
+  descriptor?.set?.call(element, nextValue);
+  const tracker = element._valueTracker;
+  tracker?.setValue?.(nextValue === "" ? " " : "");
+  onChange?.({
+    target: element,
+    currentTarget: element
+  });
+}
+function useEmojiInsert(fieldRef, value, onChange) {
+  return React6__namespace.useCallback(
+    (emoji) => {
+      const el = fieldRef.current;
+      const current = value !== void 0 && value !== null ? String(value) : el?.value ?? "";
+      const { value: next, caret } = insertAtCaret(el, current, emoji);
+      if (el) {
+        emitChange(el, next, onChange);
+        requestAnimationFrame(() => {
+          el.focus();
+          el.setSelectionRange(caret, caret);
+        });
+        return;
+      }
+      onChange?.({
+        target: { value: next },
+        currentTarget: { value: next }
+      });
+    },
+    [fieldRef, value, onChange]
+  );
+}
+var EmojiTextarea = React6__namespace.forwardRef(
+  function EmojiTextarea2({
+    className,
+    locale = "en",
+    disabled,
+    readOnly,
+    value,
+    onChange,
+    triggerLabel,
+    keepOpenOnSelect,
+    open,
+    onOpenChange,
+    side = "top",
+    align = "end",
+    labels,
+    recentLimit,
+    storageKey,
+    emojiTriggerClassName,
+    ...props
+  }, ref) {
+    const fieldRef = React6__namespace.useRef(null);
+    const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
+    const pickerDisabled = Boolean(disabled || readOnly);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(wrapperClassName, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          "data-slot": "textarea",
+          ref: mergeRefs(fieldRef, ref),
+          disabled,
+          readOnly,
+          value,
+          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,
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 bottom-1", 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
+          )
+        }
+      ) })
+    ] });
+  }
+);
+EmojiTextarea.displayName = "EmojiTextarea";
+var EmojiInput = React6__namespace.forwardRef(
+  function EmojiInput2({
+    className,
+    locale = "en",
+    disabled,
+    readOnly,
+    value,
+    onChange,
+    type = "text",
+    triggerLabel,
+    keepOpenOnSelect,
+    open,
+    onOpenChange,
+    side = "top",
+    align = "end",
+    labels,
+    recentLimit,
+    storageKey,
+    emojiTriggerClassName,
+    ...props
+  }, ref) {
+    const fieldRef = React6__namespace.useRef(null);
+    const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
+    const pickerDisabled = Boolean(disabled || readOnly);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(wrapperClassName, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          "data-slot": "input",
+          type,
+          ref: mergeRefs(fieldRef, ref),
+          disabled,
+          readOnly,
+          value,
+          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,
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 right-1 -translate-y-1/2", 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
+          )
+        }
+      ) })
+    ] });
+  }
+);
+EmojiInput.displayName = "EmojiInput";
+
 // src/components/video/hls-config.ts
 function shouldRetryLiveEdge404(retryConfig, retryCount, _isTimeout, loaderResponse, defaultRetry) {
   if (loaderResponse?.code === 404) {
@@ -2881,27 +3073,27 @@ function useHlsPlayback({
   onError,
   onPlayingChange
 }) {
-  const videoRef = React5__namespace.useRef(null);
-  const hlsRef = React5__namespace.useRef(null);
-  const [state, setState] = React5__namespace.useState("idle");
-  const [qualities, setQualities] = React5__namespace.useState([]);
-  const [activeLevel, setActiveLevel] = React5__namespace.useState(-1);
-  const [autoplayState, setAutoplayState] = React5__namespace.useState("none");
-  const [error, setError] = React5__namespace.useState(null);
-  const [reloadKey, setReloadKey] = React5__namespace.useState(0);
-  const onErrorRef = React5__namespace.useRef(onError);
-  const onPlayingChangeRef = React5__namespace.useRef(onPlayingChange);
-  React5__namespace.useEffect(() => {
+  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(() => {
     onErrorRef.current = onError;
     onPlayingChangeRef.current = onPlayingChange;
   }, [onError, onPlayingChange]);
-  const retry = React5__namespace.useCallback(() => {
+  const retry = React6__namespace.useCallback(() => {
     setError(null);
     setState("loading");
     setAutoplayState("none");
     setReloadKey((k) => k + 1);
   }, []);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const media = videoRef.current;
     if (!media || !src || !active) {
       setState("idle");
@@ -3113,7 +3305,7 @@ function useHlsPlayback({
       destroyHls();
     };
   }, [src, mode, active, autoPlay, muted, reloadKey]);
-  const setLevel = React5__namespace.useCallback((index) => {
+  const setLevel = React6__namespace.useCallback((index) => {
     const hls = hlsRef.current;
     if (!hls) return;
     hls.nextLevel = index;
@@ -3183,12 +3375,12 @@ function VideoPlayer({
   className
 }) {
   const t = { ...DEFAULT_LABELS2, ...labels };
-  const containerRef = React5__namespace.useRef(null);
-  const firstPlayFiredRef = React5__namespace.useRef(false);
-  const [userStarted, setUserStarted] = React5__namespace.useState(false);
+  const containerRef = React6__namespace.useRef(null);
+  const firstPlayFiredRef = React6__namespace.useRef(false);
+  const [userStarted, setUserStarted] = React6__namespace.useState(false);
   const active = autoPlay || !poster || userStarted;
   const autoplayActive = autoPlay || userStarted;
-  const handlePlayingChange = React5__namespace.useCallback(
+  const handlePlayingChange = React6__namespace.useCallback(
     (playing) => {
       setIsPlaying(playing);
       if (playing && !firstPlayFiredRef.current) {
@@ -3217,25 +3409,25 @@ function VideoPlayer({
     onError,
     onPlayingChange: handlePlayingChange
   });
-  const [isPlaying, setIsPlaying] = React5__namespace.useState(false);
-  const [isMuted, setIsMuted] = React5__namespace.useState(muted);
-  const [volume, setVolume] = React5__namespace.useState(1);
-  const [currentTime, setCurrentTime] = React5__namespace.useState(0);
-  const [duration, setDuration] = React5__namespace.useState(0);
-  const [buffered, setBuffered] = React5__namespace.useState(0);
-  const [isFullscreen, setIsFullscreen] = React5__namespace.useState(false);
-  const [pipActive, setPipActive] = React5__namespace.useState(false);
-  const [controlsVisible, setControlsVisible] = React5__namespace.useState(true);
-  const [playbackRate, setPlaybackRate] = React5__namespace.useState(1);
-  const [openMenu, setOpenMenu] = React5__namespace.useState(
+  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(
     null
   );
-  const [behindLive, setBehindLive] = React5__namespace.useState(false);
-  const hideTimerRef = React5__namespace.useRef(null);
+  const [behindLive, setBehindLive] = React6__namespace.useState(false);
+  const hideTimerRef = React6__namespace.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
   const fullscreenSupported = typeof document !== "undefined" && (!!document.fullscreenEnabled || // Safari
   "webkitFullscreenEnabled" in document);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
     const onTimeUpdate = () => {
@@ -3268,12 +3460,12 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     const onEnter = () => setPipActive(true);
@@ -3285,18 +3477,18 @@ function VideoPlayer({
       video.removeEventListener("leavepictureinpicture", onLeave);
     };
   }, [videoRef]);
-  const scheduleHide = React5__namespace.useCallback(() => {
+  const scheduleHide = React6__namespace.useCallback(() => {
     if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     hideTimerRef.current = setTimeout(() => {
       setControlsVisible(false);
       setOpenMenu(null);
     }, CONTROLS_HIDE_MS);
   }, []);
-  const revealControls = React5__namespace.useCallback(() => {
+  const revealControls = React6__namespace.useCallback(() => {
     setControlsVisible(true);
     scheduleHide();
   }, [scheduleHide]);
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     return () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     };
@@ -3749,8 +3941,8 @@ function MenuItem({
   );
 }
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
-  const [stats, setStats] = React5__namespace.useState({});
-  React5__namespace.useEffect(() => {
+  const [stats, setStats] = React6__namespace.useState({});
+  React6__namespace.useEffect(() => {
     if (!statsUrl || !enabled) return;
     let cancelled = false;
     const controller = new AbortController();
@@ -3780,16 +3972,16 @@ function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {})
   return stats;
 }
 function useDebouncedValue(value, delayMs) {
-  const [debounced, setDebounced] = React5.useState(value);
-  React5.useEffect(() => {
+  const [debounced, setDebounced] = React6.useState(value);
+  React6.useEffect(() => {
     const id = window.setTimeout(() => setDebounced(value), delayMs);
     return () => window.clearTimeout(id);
   }, [value, delayMs]);
   return debounced;
 }
 function useDebouncedValueStrict(value, delayMs) {
-  const [debounced, setDebounced] = React5.useState(void 0);
-  React5.useEffect(() => {
+  const [debounced, setDebounced] = React6.useState(void 0);
+  React6.useEffect(() => {
     setDebounced(void 0);
     const id = window.setTimeout(() => setDebounced(value), delayMs);
     return () => window.clearTimeout(id);
@@ -3798,9 +3990,9 @@ function useDebouncedValueStrict(value, delayMs) {
 }
 function useSearchHotkey(options = {}) {
   const { defaultOpen = false, disabled = false } = options;
-  const [open, setOpen] = React5.useState(defaultOpen);
-  const toggle = React5.useCallback(() => setOpen((prev) => !prev), []);
-  React5.useEffect(() => {
+  const [open, setOpen] = React6.useState(defaultOpen);
+  const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
+  React6.useEffect(() => {
     if (disabled) return;
     function handleKeyDown(event) {
       if (event.key.toLowerCase() !== "k") return;
@@ -3997,20 +4189,20 @@ function SearchCommand({
   className
 }) {
   const labels = { ...defaultLabels3, ...userLabels };
-  const [query, setQuery] = React5.useState("");
-  const [hits, setHits] = React5.useState([]);
-  const [isLoading, setIsLoading] = React5.useState(false);
-  const [hasError, setHasError] = React5.useState(false);
+  const [query, setQuery] = React6.useState("");
+  const [hits, setHits] = React6.useState([]);
+  const [isLoading, setIsLoading] = React6.useState(false);
+  const [hasError, setHasError] = React6.useState(false);
   const debouncedQuery = useDebouncedValue(query, debounceMs);
-  const requestIdRef = React5.useRef(0);
-  React5.useEffect(() => {
+  const requestIdRef = React6.useRef(0);
+  React6.useEffect(() => {
     if (!open) {
       setQuery("");
       setHits([]);
       setHasError(false);
     }
   }, [open]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const trimmed = debouncedQuery.trim();
     if (trimmed.length < minQueryLength) {
       setHits([]);
@@ -4033,13 +4225,13 @@ function SearchCommand({
       setIsLoading(false);
     });
   }, [debouncedQuery, minQueryLength, fetchResults]);
-  const filteredFeatures = React5.useMemo(() => {
+  const filteredFeatures = React6.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 = React5.useMemo(() => groupHitsByType(hits), [hits]);
+  const groupedHits = React6.useMemo(() => groupHitsByType(hits), [hits]);
   function handleSelect(selection) {
     onSelect(selection);
     onOpenChange(false);
@@ -4173,7 +4365,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 = React5__namespace.forwardRef(
+var PhoneInput = React6__namespace.forwardRef(
   ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       RPNInput__namespace.default,
@@ -4193,7 +4385,7 @@ var PhoneInput = React5__namespace.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var InputComponent = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputComponent = React6__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   Input,
   {
     className: cn(
@@ -4211,9 +4403,9 @@ var CountrySelect = ({
   options: countryList,
   onChange
 }) => {
-  const scrollAreaRef = React5__namespace.useRef(null);
-  const [searchValue, setSearchValue] = React5__namespace.useState("");
-  const [isOpen, setIsOpen] = React5__namespace.useState(false);
+  const scrollAreaRef = React6__namespace.useRef(null);
+  const [searchValue, setSearchValue] = React6__namespace.useState("");
+  const [isOpen, setIsOpen] = React6__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Popover,
     {
@@ -4394,8 +4586,8 @@ var MEXICO_STATE_PATHS = {
 };
 function MexicoMap({ selected, onToggle, className }) {
   const isInteractive = typeof onToggle === "function";
-  const selectedSet = React5__namespace.useMemo(() => new Set(selected), [selected]);
-  const handleKeyDown = React5__namespace.useCallback(
+  const selectedSet = React6__namespace.useMemo(() => new Set(selected), [selected]);
+  const handleKeyDown = React6__namespace.useCallback(
     (event, id) => {
       if (!onToggle) return;
       if (event.key === "Enter" || event.key === " ") {
@@ -4898,8 +5090,10 @@ exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
 exports.ChatMessageList = ChatMessageList;
 exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
+exports.EmojiInput = EmojiInput;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
+exports.EmojiTextarea = EmojiTextarea;
 exports.Empty = Empty;
 exports.EmptyContent = EmptyContent;
 exports.EmptyDescription = EmptyDescription;
@@ -4945,6 +5139,7 @@ exports.describePlaybackError = describePlaybackError;
 exports.fuzzyMatch = fuzzyMatch;
 exports.getAvatarColors = getAvatarColors;
 exports.getInitials = getInitials;
+exports.insertAtCaret = insertAtCaret;
 exports.markerVariants = markerVariants;
 exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;