@iclips/ui 0.0.7 → 0.0.8

package/dist/index.cjs

@@ -5,10 +5,11 @@ var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React4 = require('react');
+var React5 = require('react');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var reactDayPicker = require('react-day-picker');
@@ -30,7 +31,6 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var ProgressPrimitive = require('@radix-ui/react-progress');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ResizablePrimitive = require('react-resizable-panels');
-var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SelectPrimitive = require('@radix-ui/react-select');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var SliderPrimitive = require('@radix-ui/react-slider');
@@ -70,8 +70,9 @@ function _interopNamespace(e) {
 }
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
@@ -88,7 +89,6 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
-var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
@@ -303,7 +303,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React4__namespace.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+var Button = React5__namespace.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -331,7 +331,7 @@ function AlertDialogPortal({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
-var AlertDialogOverlay = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var AlertDialogOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Overlay,
     {
@@ -502,6 +502,283 @@ function AlertDescription({
     }
   );
 }
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = React5__namespace.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Badge.displayName = "Badge";
+function BrandLogo({ variant = "full", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 120 40",
+      className: cn("h-8", className),
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "logoGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#7F26BF" }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#A855F7" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "8", width: "24", height: "24", rx: "6", fill: "url(#logoGradient)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 18 L16 28", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "14", r: "2", fill: "white" }),
+        variant === "full" && /* @__PURE__ */ jsxRuntime.jsx("text", { x: "36", y: "26", fontFamily: "system-ui", fontSize: "18", fontWeight: "600", fill: "currentColor", children: "iClips" })
+      ]
+    }
+  );
+}
+var DEFAULT_PRIMARY_NAV_ITEMS = [
+  { id: "home", label: "In\xEDcio", icon: lucideReact.Home },
+  { id: "projects", label: "Projetos", icon: lucideReact.Folder },
+  { id: "clients", label: "Clientes", icon: lucideReact.Users },
+  { id: "calendar", label: "Calend\xE1rio", icon: lucideReact.Calendar },
+  { id: "reports", label: "Relat\xF3rios", icon: lucideReact.BarChart3 },
+  { id: "settings", label: "Configura\xE7\xF5es", icon: lucideReact.Settings }
+];
+var DEFAULT_SECONDARY_NAV_ITEMS = [
+  { label: "Todos os Projetos", icon: lucideReact.LayoutGrid },
+  { label: "Documentos", icon: lucideReact.FileText, badge: "3" },
+  { label: "Favoritos", icon: lucideReact.Star, chevron: true },
+  { label: "Coment\xE1rios", icon: lucideReact.MessageSquare, badge: "12", highlighted: true },
+  { label: "Downloads", icon: lucideReact.Download },
+  { label: "Recentes", icon: lucideReact.Sparkles, chevron: true }
+];
+function AppLayout({
+  children,
+  title = "Dashboard",
+  theme = "light",
+  onThemeToggle,
+  primaryNavItems = DEFAULT_PRIMARY_NAV_ITEMS,
+  secondaryNavItems = DEFAULT_SECONDARY_NAV_ITEMS,
+  secondaryNavTitle = "Menu",
+  activePrimaryItem,
+  onPrimaryItemClick,
+  logoComponent,
+  hideSecondaryNav = false,
+  defaultPrimaryNavPinned = false,
+  defaultSecondaryNavOpen = true
+}) {
+  const [isPrimaryNavPinned, setIsPrimaryNavPinned] = React5__namespace.useState(defaultPrimaryNavPinned);
+  const [isPrimaryNavHovered, setIsPrimaryNavHovered] = React5__namespace.useState(false);
+  const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React5__namespace.useState(defaultSecondaryNavOpen);
+  const [activeItem, setActiveItem] = React5__namespace.useState(activePrimaryItem || primaryNavItems[0]?.id);
+  const isPrimaryNavExpanded = isPrimaryNavPinned || isPrimaryNavHovered;
+  const handlePrimaryItemClick = (id) => {
+    setActiveItem(id);
+    if (onPrimaryItemClick) {
+      onPrimaryItemClick(id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen w-full bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "relative border-r bg-card transition-all duration-300 ease-in-out",
+          isPrimaryNavExpanded ? "w-56" : "w-16"
+        ),
+        onMouseEnter: () => setIsPrimaryNavHovered(true),
+        onMouseLeave: () => setIsPrimaryNavHovered(false),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 items-center justify-between border-b px-4", children: logoComponent || /* @__PURE__ */ jsxRuntime.jsx(
+            BrandLogo,
+            {
+              variant: isPrimaryNavExpanded ? "full" : "symbol",
+              className: "transition-all duration-300"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 space-y-1 p-2", children: primaryNavItems.map((item) => {
+            const Icon2 = item.icon;
+            const isActive2 = activeItem === item.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handlePrimaryItemClick(item.id),
+                className: cn(
+                  "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                  isActive2 ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "transition-all duration-300",
+                        isPrimaryNavExpanded ? "opacity-100" : "w-0 opacity-0"
+                      ),
+                      children: item.label
+                    }
+                  )
+                ]
+              },
+              item.id
+            );
+          }) }),
+          isPrimaryNavExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setIsPrimaryNavPinned(!isPrimaryNavPinned),
+              className: "w-full justify-start gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn("h-4 w-4", isPrimaryNavPinned && "fill-current") }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: isPrimaryNavPinned ? "Desafixar" : "Fixar menu" })
+              ]
+            }
+          ) })
+        ] }) })
+      }
+    ),
+    !hideSecondaryNav && isSecondaryNavOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[264px] border-r bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between border-b px-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: secondaryNavTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 space-y-1 p-2", children: secondaryNavItems.map((item, index) => {
+        const Icon2 = item.icon;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: cn(
+              "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+              item.highlighted ? "bg-primary/10 text-primary hover:bg-primary/20" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: item.label }),
+              item.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                Badge,
+                {
+                  variant: item.highlighted ? "default" : "secondary",
+                  className: "h-5 min-w-5 px-1.5 text-xs",
+                  children: item.badge
+                }
+              ),
+              item.chevron && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+            ]
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "A\xE7\xF5es r\xE1pidas" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Ver todas" })
+        ] })
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between border-b bg-card px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          !hideSecondaryNav && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => setIsSecondaryNavOpen(!isSecondaryNavOpen),
+              children: isSecondaryNavOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }) }),
+          onThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: onThemeToggle,
+              children: theme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children }) })
+    ] })
+  ] });
+}
 function AspectRatio({
   ...props
 }) {
@@ -552,35 +829,6 @@ function AvatarFallback({
     }
   );
 }
-var badgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Badge = React4__namespace.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? reactSlot.Slot : "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      ref,
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-});
-Badge.displayName = "Badge";
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }
@@ -671,7 +919,7 @@ function BreadcrumbEllipsis({
     }
   );
 }
-function Calendar({
+function Calendar2({
   className,
   classNames,
   showOutsideDays = true,
@@ -805,9 +1053,9 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-var CarouselContext = React4__namespace.createContext(null);
+var CarouselContext = React5__namespace.createContext(null);
 function useCarousel() {
-  const context = React4__namespace.useContext(CarouselContext);
+  const context = React5__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -829,20 +1077,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React4__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React4__namespace.useState(false);
-  const onSelect = React4__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React5__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React5__namespace.useState(false);
+  const onSelect = React5__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React4__namespace.useCallback(() => {
+  const scrollPrev = React5__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React4__namespace.useCallback(() => {
+  const scrollNext = React5__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown2 = React4__namespace.useCallback(
+  const handleKeyDown2 = React5__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -854,11 +1102,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React4__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React4__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -1061,7 +1309,7 @@ function DialogClose({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
 }
-var DialogOverlay = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var DialogOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
     {
@@ -1504,7 +1752,7 @@ function Drawer({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, { "data-slot": "drawer", ...props });
 }
-var DrawerTrigger = React4__namespace.forwardRef(({ ...props }, ref) => {
+var DrawerTrigger = React5__namespace.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Trigger, { ref, "data-slot": "drawer-trigger", ...props });
 });
 DrawerTrigger.displayName = "DrawerTrigger";
@@ -1513,11 +1761,11 @@ function DrawerPortal({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
 }
-var DrawerClose = React4__namespace.forwardRef(({ ...props }, ref) => {
+var DrawerClose = React5__namespace.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Close, { ref, "data-slot": "drawer-close", ...props });
 });
 DrawerClose.displayName = "DrawerClose";
-var DrawerOverlay = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var DrawerOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     vaul.Drawer.Overlay,
     {
@@ -1532,7 +1780,7 @@ var DrawerOverlay = React4__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React4__namespace.forwardRef(({ className, children, ...props }, ref) => {
+var DrawerContent = React5__namespace.forwardRef(({ className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1578,7 +1826,7 @@ function DrawerFooter({ className, ...props }) {
     }
   );
 }
-var DrawerTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var DrawerTitle = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     vaul.Drawer.Title,
     {
@@ -1590,7 +1838,7 @@ var DrawerTitle = React4__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var DrawerDescription = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     vaul.Drawer.Description,
     {
@@ -1829,7 +2077,7 @@ function Label3({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React4__namespace.createContext(
+var FormFieldContext = React5__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1838,8 +2086,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React4__namespace.useContext(FormFieldContext);
-  const itemContext = React4__namespace.useContext(FormItemContext);
+  const fieldContext = React5__namespace.useContext(FormFieldContext);
+  const itemContext = React5__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1856,11 +2104,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React4__namespace.createContext(
+var FormItemContext = React5__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React4__namespace.useId();
+  const id = React5__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1991,7 +2239,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React4__namespace.useContext(inputOtp.OTPInputContext);
+  const inputOTPContext = React5__namespace.useContext(inputOtp.OTPInputContext);
   const { char, hasFakeCaret, isActive: isActive2 } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2522,11 +2770,11 @@ function Popover({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
 }
-var PopoverTrigger = React4__namespace.forwardRef((props, ref) => {
+var PopoverTrigger = React5__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ref, "data-slot": "popover-trigger", ...props });
 });
 PopoverTrigger.displayName = PopoverPrimitive__namespace.Trigger.displayName;
-var PopoverContent = React4__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
+var PopoverContent = React5__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
     {
@@ -2543,7 +2791,7 @@ var PopoverContent = React4__namespace.forwardRef(({ className, align = "center"
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var PopoverAnchor = React4__namespace.forwardRef((props, ref) => {
+var PopoverAnchor = React5__namespace.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { ref, "data-slot": "popover-anchor", ...props });
 });
 PopoverAnchor.displayName = PopoverPrimitive__namespace.Anchor.displayName;
@@ -2648,59 +2896,6 @@ function ResizableHandle({
     }
   );
 }
-function ScrollArea({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ScrollAreaPrimitive__namespace.Root,
-    {
-      "data-slot": "scroll-area",
-      className: cn("relative", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScrollAreaPrimitive__namespace.Viewport,
-          {
-            "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
-      ]
-    }
-  );
-}
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
-    {
-      "data-slot": "scroll-area-scrollbar",
-      orientation,
-      className: cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
-        {
-          "data-slot": "scroll-area-thumb",
-          className: "bg-border relative flex-1 rounded-full"
-        }
-      )
-    }
-  );
-}
 function Select({
   ...props
 }) {
@@ -2892,7 +3087,7 @@ function SheetPortal({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
 }
-var SheetOverlay = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var SheetOverlay = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DialogPrimitive__namespace.Overlay,
     {
@@ -3003,7 +3198,7 @@ function Slider({
   max: max2 = 100,
   ...props
 }) {
-  const _values = React4__namespace.useMemo(
+  const _values = React5__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min2, max2],
     [value, defaultValue, min2, max2]
   );
@@ -3142,7 +3337,7 @@ function TableFooter({ className, ...props }) {
     }
   );
 }
-var TableRow = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+var TableRow = React5__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
     {
@@ -3302,7 +3497,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React4__namespace.createContext({
+var ToggleGroupContext = React5__namespace.createContext({
   size: "default",
   variant: "default"
 });
@@ -3335,7 +3530,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React4__namespace.useContext(ToggleGroupContext);
+  const context = React5__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -3433,7 +3628,7 @@ var svg_agvoxj05dl_default = {
   p75f2980: "M20.3786 15.1414V5.89714C20.3786 5.76004 20.4058 5.62432 20.4588 5.49788C20.5118 5.37144 20.5894 5.2568 20.6871 5.16067C20.7849 5.06453 20.9008 4.98881 21.0281 4.93792C21.1553 4.88704 21.2915 4.862 21.4286 4.86428H22.4186V16.1743H21.4286C21.2915 16.1766 21.1553 16.1515 21.0281 16.1006C20.9008 16.0498 20.7849 15.974 20.6871 15.8779C20.5894 15.7818 20.5118 15.6671 20.4588 15.5407C20.4058 15.4142 20.3786 15.2785 20.3786 15.1414V15.1414Z",
   pb292700: "M35.4086 9.31285C36.1566 10.1046 36.5616 11.1597 36.5357 12.2486C36.562 13.3426 36.1572 14.4032 35.4086 15.2014C35.0701 15.5832 34.6534 15.8876 34.1867 16.094C33.7201 16.3003 33.2144 16.4037 32.7043 16.3971C32.2189 16.4239 31.7343 16.3336 31.2912 16.1337C30.8481 15.9337 30.4596 15.6302 30.1586 15.2486V19.6371H29.1686C28.8946 19.6371 28.6319 19.5283 28.4382 19.3346C28.2445 19.1409 28.1357 18.8782 28.1357 18.6043V8.31857H29.3314C29.4402 8.318 29.548 8.33901 29.6486 8.38037C29.7492 8.42174 29.8406 8.48264 29.9176 8.55957C29.9945 8.63649 30.0554 8.7279 30.0967 8.82851C30.1381 8.92912 30.1591 9.03693 30.1586 9.14571V9.24428C30.4606 8.864 30.8493 8.56165 31.2923 8.36255C31.7352 8.16346 32.2194 8.07343 32.7043 8.1C33.2156 8.09642 33.7218 8.20287 34.1884 8.41214C34.655 8.62141 35.0711 8.92859 35.4086 9.31285V9.31285ZM32.3271 14.4557C32.6145 14.465 32.9008 14.4155 33.1683 14.3101C33.4359 14.2047 33.679 14.0457 33.8828 13.8429C34.0917 13.6329 34.2554 13.3823 34.3638 13.1067C34.4721 12.831 34.5229 12.536 34.5128 12.24C34.5244 11.9463 34.4743 11.6535 34.3658 11.3804C34.2573 11.1073 34.0928 10.86 33.8828 10.6543C33.4656 10.2505 32.9077 10.0248 32.3271 10.0248C31.7465 10.0248 31.1887 10.2505 30.7714 10.6543C30.5665 10.8628 30.4064 11.1111 30.301 11.3838C30.1956 11.6565 30.1471 11.9479 30.1586 12.24C30.1495 12.5344 30.199 12.8278 30.3042 13.1029C30.4094 13.3781 30.5682 13.6296 30.7714 13.8429C30.9757 14.0456 31.2187 14.2051 31.486 14.3119C31.7533 14.4187 32.0394 14.4705 32.3271 14.4643V14.4557Z"
 };
-function BrandLogo({ variant = "full", mode = "positive", className, ...props }) {
+function BrandLogo2({ variant = "full", mode = "positive", className, ...props }) {
   if (variant === "symbol") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative inline-block", className), ...props, "data-name": "Logo S\xEDmbolo", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
@@ -3503,9 +3698,9 @@ function BrandLogo({ variant = "full", mode = "positive", className, ...props })
   ) });
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React4__namespace.createContext(null);
+var ChartContext = React5__namespace.createContext(null);
 function useChart() {
-  const context = React4__namespace.useContext(ChartContext);
+  const context = React5__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -3518,7 +3713,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React4__namespace.useId();
+  const uniqueId = React5__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -3579,7 +3774,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React4__namespace.useMemo(() => {
+  const tooltipLabel = React5__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3739,9 +3934,9 @@ function ColorPicker({
   className,
   disabled = false
 }) {
-  const [color, setColor] = React4.useState(value);
-  const [open, setOpen] = React4.useState(false);
-  React4__namespace.useEffect(() => {
+  const [color, setColor] = React5.useState(value);
+  const [open, setOpen] = React5.useState(false);
+  React5__namespace.useEffect(() => {
     setColor(value);
   }, [value]);
   const handleColorChange = (newColor) => {
@@ -21587,11 +21782,11 @@ function getInstance() {
     }
   };
 }
-var PureEditorContent = class extends React4__namespace.default.Component {
+var PureEditorContent = class extends React5__namespace.default.Component {
   constructor(props) {
     var _a;
     super(props);
-    this.editorContentRef = React4__namespace.default.createRef();
+    this.editorContentRef = React5__namespace.default.createRef();
     this.initialized = false;
     this.state = {
       hasContentComponentInitialized: Boolean((_a = props.editor) == null ? void 0 : _a.contentComponent)
@@ -21670,20 +21865,20 @@ var PureEditorContent = class extends React4__namespace.default.Component {
     ] });
   }
 };
-var EditorContentWithKey = React4.forwardRef(
+var EditorContentWithKey = React5.forwardRef(
   (props, ref) => {
-    const key = React4__namespace.default.useMemo(() => {
+    const key = React5__namespace.default.useMemo(() => {
       return Math.floor(Math.random() * 4294967295).toString();
     }, [props.editor]);
-    return React4__namespace.default.createElement(PureEditorContent, {
+    return React5__namespace.default.createElement(PureEditorContent, {
       key,
       innerRef: ref,
       ...props
     });
   }
 );
-var EditorContent = React4__namespace.default.memo(EditorContentWithKey);
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React4.useLayoutEffect : React4.useEffect;
+var EditorContent = React5__namespace.default.memo(EditorContentWithKey);
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React5.useLayoutEffect : React5.useEffect;
 var EditorStateManager = class {
   constructor(initialEditor) {
     this.transactionNumber = 0;
@@ -21743,7 +21938,7 @@ var EditorStateManager = class {
 };
 function useEditorState(options) {
   var _a;
-  const [editorStateManager] = React4.useState(() => new EditorStateManager(options.editor));
+  const [editorStateManager] = React5.useState(() => new EditorStateManager(options.editor));
   const selectedState = withSelector_js.useSyncExternalStoreWithSelector(
     editorStateManager.subscribe,
     editorStateManager.getSnapshot,
@@ -21754,7 +21949,7 @@ function useEditorState(options) {
   useIsomorphicLayoutEffect(() => {
     return editorStateManager.watch(options.editor);
   }, [options.editor, editorStateManager]);
-  React4.useDebugValue(selectedState);
+  React5.useDebugValue(selectedState);
   return selectedState;
 }
 var isDev = process.env.NODE_ENV !== "production";
@@ -21991,16 +22186,16 @@ var EditorInstanceManager = class _EditorInstanceManager {
   }
 };
 function useEditor(options = {}, deps = []) {
-  const mostRecentOptions = React4.useRef(options);
+  const mostRecentOptions = React5.useRef(options);
   mostRecentOptions.current = options;
-  const [instanceManager] = React4.useState(() => new EditorInstanceManager(mostRecentOptions));
+  const [instanceManager] = React5.useState(() => new EditorInstanceManager(mostRecentOptions));
   const editor = index_js.useSyncExternalStore(
     instanceManager.subscribe,
     instanceManager.getEditor,
     instanceManager.getServerSnapshot
   );
-  React4.useDebugValue(editor);
-  React4.useEffect(instanceManager.onRender(deps));
+  React5.useDebugValue(editor);
+  React5.useEffect(instanceManager.onRender(deps));
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
@@ -22015,19 +22210,19 @@ function useEditor(options = {}, deps = []) {
   });
   return editor;
 }
-var EditorContext = React4.createContext({
+var EditorContext = React5.createContext({
   editor: null
 });
 EditorContext.Consumer;
-var ReactNodeViewContext = React4.createContext({
+var ReactNodeViewContext = React5.createContext({
   onDragStart: () => {
   },
   nodeViewContentChildren: void 0,
   nodeViewContentRef: () => {
   }
 });
-var useReactNodeView = () => React4.useContext(ReactNodeViewContext);
-React4__namespace.default.forwardRef((props, ref) => {
+var useReactNodeView = () => React5.useContext(ReactNodeViewContext);
+React5__namespace.default.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView();
   const Tag = props.as || "div";
   return (
@@ -22073,8 +22268,8 @@ function canReceiveRef(Component2) {
 }
 function isReact19Plus() {
   try {
-    if (React4.version) {
-      const majorVersion = parseInt(React4.version.split(".")[0], 10);
+    if (React5.version) {
+      const majorVersion = parseInt(React5.version.split(".")[0], 10);
       return majorVersion >= 19;
     }
   } catch {
@@ -22161,7 +22356,7 @@ var ReactRenderer = class {
     });
   }
 };
-React4__namespace.default.createContext({
+React5__namespace.default.createContext({
   markViewContentRef: () => {
   }
 });
@@ -30499,8 +30694,8 @@ tippy.setDefaultProps({
   render
 });
 var tippy_esm_default = tippy;
-var MentionList = React4.forwardRef((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = React4.useState(0);
+var MentionList = React5.forwardRef((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = React5.useState(0);
   const selectItem = (index) => {
     const item = props.items[index];
     if (item) {
@@ -30516,10 +30711,10 @@ var MentionList = React4.forwardRef((props, ref) => {
   const enterHandler = () => {
     selectItem(selectedIndex);
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     setSelectedIndex(0);
   }, [props.items]);
-  React4.useImperativeHandle(ref, () => ({
+  React5.useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
         upHandler();
@@ -30992,8 +31187,8 @@ var commonStyles = /* @__PURE__ */ stylesheet.create({
     ".": ClassNames.hidden
   }, hidden)
 });
-var PickerStyleTag = /* @__PURE__ */ React4.memo(function PickerStyleTag2() {
-  return React4.createElement("style", {
+var PickerStyleTag = /* @__PURE__ */ React5.memo(function PickerStyleTag2() {
+  return React5.createElement("style", {
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: stylesheet.getStyle()
@@ -31089,8 +31284,8 @@ function useDebouncedState(initialValue, delay) {
   if (delay === void 0) {
     delay = 0;
   }
-  var _useState = React4.useState(initialValue), state = _useState[0], setState = _useState[1];
-  var timer = React4.useRef(null);
+  var _useState = React5.useState(initialValue), state = _useState[0], setState = _useState[1];
+  var timer = React5.useRef(null);
   function debouncedSetState(value) {
     return new Promise(function(resolve) {
       var _window;
@@ -31112,9 +31307,9 @@ function useIsUnicodeHidden() {
   };
 }
 function useDisallowedEmojis() {
-  var DisallowedEmojisRef = React4.useRef({});
+  var DisallowedEmojisRef = React5.useRef({});
   var emojiVersionConfig = useEmojiVersionConfig();
-  return React4.useMemo(function() {
+  return React5.useMemo(function() {
     var emojiVersion = parseFloat("" + emojiVersionConfig);
     if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
       return DisallowedEmojisRef.current;
@@ -31139,7 +31334,7 @@ function addedInNewerVersion(emoji2, supportedLevel) {
   return addedIn(emoji2) > supportedLevel;
 }
 function useMarkInitialLoad(dispatch) {
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     dispatch(true);
   }, [dispatch]);
 }
@@ -31194,23 +31389,23 @@ function PickerContextProvider(_ref) {
   var disallowedEmojis = useDisallowedEmojis();
   var defaultSkinTone = useDefaultSkinToneConfig();
   var reactionsDefaultOpen = useReactionsOpenConfig();
-  var filterRef = React4.useRef(alphaNumericEmojiIndex);
-  var disallowClickRef = React4.useRef(false);
-  var disallowMouseRef = React4.useRef(false);
-  var disallowedEmojisRef = React4.useRef(disallowedEmojis);
+  var filterRef = React5.useRef(alphaNumericEmojiIndex);
+  var disallowClickRef = React5.useRef(false);
+  var disallowMouseRef = React5.useRef(false);
+  var disallowedEmojisRef = React5.useRef(disallowedEmojis);
   var suggestedUpdateState = useDebouncedState(Date.now(), 200);
   var searchTerm = useDebouncedState("", 100);
-  var skinToneFanOpenState = React4.useState(false);
-  var activeSkinTone = React4.useState(defaultSkinTone);
-  var activeCategoryState = React4.useState(null);
-  var emojisThatFailedToLoadState = React4.useState(/* @__PURE__ */ new Set());
-  var emojiVariationPickerState = React4.useState(null);
-  var reactionsModeState = React4.useState(reactionsDefaultOpen);
-  var _useState = React4.useState(false), isPastInitialLoad = _useState[0], setIsPastInitialLoad = _useState[1];
-  var visibleCategoriesState = React4.useState([]);
-  var emojiSizeState = React4.useState(null);
+  var skinToneFanOpenState = React5.useState(false);
+  var activeSkinTone = React5.useState(defaultSkinTone);
+  var activeCategoryState = React5.useState(null);
+  var emojisThatFailedToLoadState = React5.useState(/* @__PURE__ */ new Set());
+  var emojiVariationPickerState = React5.useState(null);
+  var reactionsModeState = React5.useState(reactionsDefaultOpen);
+  var _useState = React5.useState(false), isPastInitialLoad = _useState[0], setIsPastInitialLoad = _useState[1];
+  var visibleCategoriesState = React5.useState([]);
+  var emojiSizeState = React5.useState(null);
   useMarkInitialLoad(setIsPastInitialLoad);
-  return React4.createElement(PickerContext.Provider, {
+  return React5.createElement(PickerContext.Provider, {
     value: {
       activeCategoryState,
       activeSkinTone,
@@ -31230,7 +31425,7 @@ function PickerContextProvider(_ref) {
     }
   }, children);
 }
-var PickerContext = /* @__PURE__ */ React4.createContext({
+var PickerContext = /* @__PURE__ */ React5.createContext({
   activeCategoryState: [null, function() {
   }],
   activeSkinTone: [SkinTones.NEUTRAL, function() {
@@ -31270,51 +31465,51 @@ var PickerContext = /* @__PURE__ */ React4.createContext({
   }]
 });
 function useFilterRef() {
-  var _React$useContext = React4.useContext(PickerContext), filterRef = _React$useContext.filterRef;
+  var _React$useContext = React5.useContext(PickerContext), filterRef = _React$useContext.filterRef;
   return filterRef;
 }
 function useDisallowClickRef() {
-  var _React$useContext2 = React4.useContext(PickerContext), disallowClickRef = _React$useContext2.disallowClickRef;
+  var _React$useContext2 = React5.useContext(PickerContext), disallowClickRef = _React$useContext2.disallowClickRef;
   return disallowClickRef;
 }
 function useDisallowMouseRef() {
-  var _React$useContext3 = React4.useContext(PickerContext), disallowMouseRef = _React$useContext3.disallowMouseRef;
+  var _React$useContext3 = React5.useContext(PickerContext), disallowMouseRef = _React$useContext3.disallowMouseRef;
   return disallowMouseRef;
 }
 function useReactionsModeState() {
-  var _React$useContext4 = React4.useContext(PickerContext), reactionsModeState = _React$useContext4.reactionsModeState;
+  var _React$useContext4 = React5.useContext(PickerContext), reactionsModeState = _React$useContext4.reactionsModeState;
   return reactionsModeState;
 }
 function useSearchTermState() {
-  var _React$useContext5 = React4.useContext(PickerContext), searchTerm = _React$useContext5.searchTerm;
+  var _React$useContext5 = React5.useContext(PickerContext), searchTerm = _React$useContext5.searchTerm;
   return searchTerm;
 }
 function useActiveSkinToneState() {
-  var _React$useContext6 = React4.useContext(PickerContext), activeSkinTone = _React$useContext6.activeSkinTone;
+  var _React$useContext6 = React5.useContext(PickerContext), activeSkinTone = _React$useContext6.activeSkinTone;
   return activeSkinTone;
 }
 function useEmojisThatFailedToLoadState() {
-  var _React$useContext7 = React4.useContext(PickerContext), emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
+  var _React$useContext7 = React5.useContext(PickerContext), emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
   return emojisThatFailedToLoadState;
 }
 function useEmojiVariationPickerState() {
-  var _React$useContext9 = React4.useContext(PickerContext), emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
+  var _React$useContext9 = React5.useContext(PickerContext), emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
   return emojiVariationPickerState;
 }
 function useSkinToneFanOpenState() {
-  var _React$useContext0 = React4.useContext(PickerContext), skinToneFanOpenState = _React$useContext0.skinToneFanOpenState;
+  var _React$useContext0 = React5.useContext(PickerContext), skinToneFanOpenState = _React$useContext0.skinToneFanOpenState;
   return skinToneFanOpenState;
 }
 function useVisibleCategoriesState() {
-  var _React$useContext10 = React4.useContext(PickerContext), visibleCategoriesState = _React$useContext10.visibleCategoriesState;
+  var _React$useContext10 = React5.useContext(PickerContext), visibleCategoriesState = _React$useContext10.visibleCategoriesState;
   return visibleCategoriesState;
 }
 function useEmojiSizeState() {
-  var _React$useContext11 = React4.useContext(PickerContext), emojiSizeState = _React$useContext11.emojiSizeState;
+  var _React$useContext11 = React5.useContext(PickerContext), emojiSizeState = _React$useContext11.emojiSizeState;
   return emojiSizeState;
 }
 function useUpdateSuggested() {
-  var _React$useContext12 = React4.useContext(PickerContext), suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+  var _React$useContext12 = React5.useContext(PickerContext), suggestedUpdateState = _React$useContext12.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0], setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
     setsuggestedUpdate(Date.now());
@@ -48319,7 +48514,7 @@ function emojiUnified(emoji2, skinTone) {
 function useGetEmojisByCategory() {
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   var _useUpdateSuggested = useUpdateSuggested(), suggestedUpdated = _useUpdateSuggested[0];
-  var suggested = React4__namespace.default.useMemo(
+  var suggested = React5__namespace.default.useMemo(
     function() {
       var _getSuggested;
       var suggested2 = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
@@ -48463,20 +48658,20 @@ var basePreviewConfig = {
   showPreview: true
 };
 var _excluded = ["children"];
-var ConfigContext = /* @__PURE__ */ React4.createContext(/* @__PURE__ */ basePickerConfig());
+var ConfigContext = /* @__PURE__ */ React5.createContext(/* @__PURE__ */ basePickerConfig());
 function PickerConfigProvider(_ref) {
   var children = _ref.children, config = _objectWithoutPropertiesLoose(_ref, _excluded);
   var mergedConfig = useSetConfig(config);
-  return React4.createElement(ConfigContext.Provider, {
+  return React5.createElement(ConfigContext.Provider, {
     value: mergedConfig
   }, children);
 }
 function useSetConfig(config) {
   var _config$customEmojis;
-  var _React$useState = React4.useState(function() {
+  var _React$useState = React5.useState(function() {
     return mergeConfig(config);
   }), mergedConfig = _React$useState[0], setMergedConfig = _React$useState[1];
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (compareConfig(mergedConfig, config)) {
       return;
     }
@@ -48485,24 +48680,24 @@ function useSetConfig(config) {
   return mergedConfig;
 }
 function usePickerConfig() {
-  return React4.useContext(ConfigContext);
+  return React5.useContext(ConfigContext);
 }
-var MutableConfigContext = /* @__PURE__ */ React4__namespace.default.createContext({});
+var MutableConfigContext = /* @__PURE__ */ React5__namespace.default.createContext({});
 function useMutableConfig() {
-  var mutableConfig = React4__namespace.default.useContext(MutableConfigContext);
+  var mutableConfig = React5__namespace.default.useContext(MutableConfigContext);
   return mutableConfig;
 }
 function useDefineMutableConfig(config) {
-  var MutableConfigRef = React4__namespace.default.useRef({
+  var MutableConfigRef = React5__namespace.default.useRef({
     onEmojiClick: config.onEmojiClick || emptyFunc,
     onReactionClick: config.onReactionClick || config.onEmojiClick,
     onSkinToneChange: config.onSkinToneChange || emptyFunc
   });
-  React4__namespace.default.useEffect(function() {
+  React5__namespace.default.useEffect(function() {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
     MutableConfigRef.current.onReactionClick = config.onReactionClick || config.onEmojiClick;
   }, [config.onEmojiClick, config.onReactionClick]);
-  React4__namespace.default.useEffect(function() {
+  React5__namespace.default.useEffect(function() {
     MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
   }, [config.onSkinToneChange]);
   return MutableConfigRef;
@@ -48687,16 +48882,16 @@ function getActiveElement() {
 }
 function ElementRefContextProvider(_ref) {
   var children = _ref.children;
-  var PickerMainRef = React4.useRef(null);
-  var AnchoredEmojiRef = React4.useRef(null);
-  var BodyRef = React4.useRef(null);
-  var EmojiListRef = React4.useRef(null);
-  var SearchInputRef = React4.useRef(null);
-  var SkinTonePickerRef = React4.useRef(null);
-  var CategoryNavigationRef = React4.useRef(null);
-  var VariationPickerRef = React4.useRef(null);
-  var ReactionsRef = React4.useRef(null);
-  return React4.createElement(ElementRefContext.Provider, {
+  var PickerMainRef = React5.useRef(null);
+  var AnchoredEmojiRef = React5.useRef(null);
+  var BodyRef = React5.useRef(null);
+  var EmojiListRef = React5.useRef(null);
+  var SearchInputRef = React5.useRef(null);
+  var SkinTonePickerRef = React5.useRef(null);
+  var CategoryNavigationRef = React5.useRef(null);
+  var VariationPickerRef = React5.useRef(null);
+  var ReactionsRef = React5.useRef(null);
+  return React5.createElement(ElementRefContext.Provider, {
     value: {
       AnchoredEmojiRef,
       BodyRef,
@@ -48710,19 +48905,19 @@ function ElementRefContextProvider(_ref) {
     }
   }, children);
 }
-var ElementRefContext = /* @__PURE__ */ React4.createContext({
-  AnchoredEmojiRef: /* @__PURE__ */ React4.createRef(),
-  BodyRef: /* @__PURE__ */ React4.createRef(),
-  CategoryNavigationRef: /* @__PURE__ */ React4.createRef(),
-  EmojiListRef: /* @__PURE__ */ React4.createRef(),
-  PickerMainRef: /* @__PURE__ */ React4.createRef(),
-  SearchInputRef: /* @__PURE__ */ React4.createRef(),
-  SkinTonePickerRef: /* @__PURE__ */ React4.createRef(),
-  VariationPickerRef: /* @__PURE__ */ React4.createRef(),
-  ReactionsRef: /* @__PURE__ */ React4.createRef()
+var ElementRefContext = /* @__PURE__ */ React5.createContext({
+  AnchoredEmojiRef: /* @__PURE__ */ React5.createRef(),
+  BodyRef: /* @__PURE__ */ React5.createRef(),
+  CategoryNavigationRef: /* @__PURE__ */ React5.createRef(),
+  EmojiListRef: /* @__PURE__ */ React5.createRef(),
+  PickerMainRef: /* @__PURE__ */ React5.createRef(),
+  SearchInputRef: /* @__PURE__ */ React5.createRef(),
+  SkinTonePickerRef: /* @__PURE__ */ React5.createRef(),
+  VariationPickerRef: /* @__PURE__ */ React5.createRef(),
+  ReactionsRef: /* @__PURE__ */ React5.createRef()
 });
 function useElementRef() {
-  return React4.useContext(ElementRefContext);
+  return React5.useContext(ElementRefContext);
 }
 function useEmojiListRef() {
   return useElementRef()["EmojiListRef"];
@@ -48783,7 +48978,7 @@ function scrollBy(root, by) {
 }
 function useScrollTo() {
   var BodyRef = useBodyRef();
-  return React4.useCallback(function(top2) {
+  return React5.useCallback(function(top2) {
     requestAnimationFrame(function() {
       if (BodyRef.current) {
         BodyRef.current.scrollTop = top2;
@@ -48920,7 +49115,7 @@ function visibleEmojiOneRowDown(element) {
 function useCloseAllOpenToggles() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(), variationPicker = _useEmojiVariationPic[0], setVariationPicker = _useEmojiVariationPic[1];
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(), skinToneFanOpen = _useSkinToneFanOpenSt[0], setSkinToneFanOpen = _useSkinToneFanOpenSt[1];
-  var closeAllOpenToggles = React4.useCallback(function() {
+  var closeAllOpenToggles = React5.useCallback(function() {
     if (variationPicker) {
       setVariationPicker(null);
     }
@@ -48959,7 +49154,7 @@ function useOnMouseMove() {
   var BodyRef = useBodyRef();
   var allowMouseMove = useAllowMouseMove();
   var isMouseDisallowed = useIsMouseDisallowed();
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var bodyRef = BodyRef.current;
     bodyRef == null ? void 0 : bodyRef.addEventListener("mousemove", onMouseMove, {
       passive: true
@@ -48976,13 +49171,13 @@ function useOnMouseMove() {
 }
 function useFocusSearchInput() {
   var SearchInputRef = useSearchInputRef();
-  return React4.useCallback(function() {
+  return React5.useCallback(function() {
     focusElement(SearchInputRef.current);
   }, [SearchInputRef]);
 }
 function useFocusSkinTonePicker() {
   var SkinTonePickerRef = useSkinTonePickerRef();
-  return React4.useCallback(function() {
+  return React5.useCallback(function() {
     if (!SkinTonePickerRef.current) {
       return;
     }
@@ -48991,7 +49186,7 @@ function useFocusSkinTonePicker() {
 }
 function useFocusCategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
-  return React4.useCallback(function() {
+  return React5.useCallback(function() {
     if (!CategoryNavigationRef.current) {
       return;
     }
@@ -49175,7 +49370,7 @@ function usePickerMainKeyboardEvents() {
   var hasOpenToggles = useHasOpenToggles();
   var disallowMouseMove = useDisallowMouseMove();
   var closeAllOpenToggles = useCloseAllOpenToggles();
-  var onKeyDown = React4.useMemo(function() {
+  var onKeyDown = React5.useMemo(function() {
     return function onKeyDown2(event) {
       var key = event.key;
       disallowMouseMove();
@@ -49194,7 +49389,7 @@ function usePickerMainKeyboardEvents() {
       }
     };
   }, [scrollTo2, clearSearch, closeAllOpenToggles, focusSearchInput, hasOpenToggles, disallowMouseMove]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var current = PickerMainRef.current;
     if (!current) {
       return;
@@ -49213,7 +49408,7 @@ function useSearchInputKeyboardEvents() {
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(), setSkinToneFanOpenState = _useSkinToneFanOpenSt[1];
   var goDownFromSearchInput = useGoDownFromSearchInput();
   var isSkinToneInSearch = useIsSkinToneInSearch();
-  var onKeyDown = React4.useMemo(function() {
+  var onKeyDown = React5.useMemo(function() {
     return function onKeyDown2(event) {
       var key = event.key;
       switch (key) {
@@ -49236,7 +49431,7 @@ function useSearchInputKeyboardEvents() {
       }
     };
   }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef, isSkinToneInSearch]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var current = SearchInputRef.current;
     if (!current) {
       return;
@@ -49256,7 +49451,7 @@ function useSkinTonePickerKeyboardEvents() {
   var isSkinToneInPreview = useIsSkinToneInPreview();
   var isSkinToneInSearch = useIsSkinToneInSearch();
   var onType = useOnType();
-  var onKeyDown = React4.useMemo(function() {
+  var onKeyDown = React5.useMemo(function() {
     return (
       // eslint-disable-next-line complexity
       (function onKeyDown2(event) {
@@ -49313,7 +49508,7 @@ function useSkinTonePickerKeyboardEvents() {
       })
     );
   }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType, isSkinToneInPreview, isSkinToneInSearch]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var current = SkinTonePickerRef.current;
     if (!current) {
       return;
@@ -49329,7 +49524,7 @@ function useCategoryNavigationKeyboardEvents() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var BodyRef = useBodyRef();
   var onType = useOnType();
-  var onKeyDown = React4.useMemo(function() {
+  var onKeyDown = React5.useMemo(function() {
     return function onKeyDown2(event) {
       var key = event.key;
       switch (key) {
@@ -49355,7 +49550,7 @@ function useCategoryNavigationKeyboardEvents() {
       }
     };
   }, [BodyRef, focusSearchInput, onType]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var current = CategoryNavigationRef.current;
     if (!current) {
       return;
@@ -49373,7 +49568,7 @@ function useBodyKeyboardEvents() {
   var hasOpenToggles = useHasOpenToggles();
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var onType = useOnType();
-  var onKeyDown = React4.useMemo(function() {
+  var onKeyDown = React5.useMemo(function() {
     return (
       // eslint-disable-next-line complexity
       (function onKeyDown2(event) {
@@ -49415,7 +49610,7 @@ function useBodyKeyboardEvents() {
       })
     );
   }, [goUpFromBody, onType, setVariationPicker, hasOpenToggles, closeAllOpenToggles]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var current = BodyRef.current;
     if (!current) {
       return;
@@ -49430,7 +49625,7 @@ function useGoDownFromSearchInput() {
   var focusCategoryNavigation = useFocusCategoryNavigation();
   var isSearchMode = useIsSearchMode();
   var BodyRef = useBodyRef();
-  return React4.useCallback(function goDownFromSearchInput() {
+  return React5.useCallback(function goDownFromSearchInput() {
     if (isSearchMode) {
       return focusFirstVisibleEmoji(BodyRef.current);
     }
@@ -49441,7 +49636,7 @@ function useGoUpFromBody() {
   var focusSearchInput = useFocusSearchInput();
   var focusCategoryNavigation = useFocusCategoryNavigation();
   var isSearchMode = useIsSearchMode();
-  return React4.useCallback(function goUpFromEmoji() {
+  return React5.useCallback(function goUpFromEmoji() {
     if (isSearchMode) {
       return focusSearchInput();
     }
@@ -49533,7 +49728,7 @@ function useOnFocus() {
   var BodyRef = useBodyRef();
   var emojiStyle = useEmojiStyleConfig();
   var getEmojiUrl = useGetEmojiUrlConfig();
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (emojiStyle === EmojiStyle.NATIVE) {
       return;
     }
@@ -49561,7 +49756,7 @@ var _excluded$1 = ["width", "height"];
 var DEFAULT_LABEL_HEIGHT = 40;
 function PickerMain(_ref) {
   var children = _ref.children;
-  return React4.createElement(PickerContextProvider, null, React4.createElement(PickerRootElement, null, children));
+  return React5.createElement(PickerContextProvider, null, React5.createElement(PickerRootElement, null, children));
 }
 function PickerRootElement(_ref2) {
   var _cx;
@@ -49575,7 +49770,7 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   var _ref3 = style2 || {}, width = _ref3.width, height = _ref3.height, styleProps = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-  return React4.createElement("aside", {
+  return React5.createElement("aside", {
     className: cx(styles.main, styles.baseVariables, theme === Theme.DARK && styles.darkTheme, theme === Theme.AUTO && styles.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles.reactionsMenu, className),
     ref: PickerMainRef,
     style: _extends({}, styleProps, !reactionsMode && {
@@ -49986,7 +50181,7 @@ function isCustomEmoji(emoji2) {
   return emoji2.imgUrl !== void 0;
 }
 function useMouseDownHandlers(ContainerRef, mouseEventSource) {
-  var mouseDownTimerRef = React4.useRef();
+  var mouseDownTimerRef = React5.useRef();
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
   var _useEmojiVariationPic = useEmojiVariationPickerState(), setEmojiVariationPicker = _useEmojiVariationPic[1];
@@ -49996,7 +50191,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
   var _useUpdateSuggested = useUpdateSuggested(), updateSuggested = _useUpdateSuggested[1];
   var getEmojiUrl = useGetEmojiUrlConfig();
   var activeEmojiStyle = useEmojiStyleConfig();
-  var onClick = React4.useCallback(function onClick2(event) {
+  var onClick = React5.useCallback(function onClick2(event) {
     if (disallowClickRef.current) {
       return;
     }
@@ -50010,7 +50205,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     setSuggested(emoji2, skinToneToUse);
     onEmojiClick(emojiClickOutput(emoji2, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
   }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
-  var onMouseDown = React4.useCallback(function onMouseDown2(event) {
+  var onMouseDown = React5.useCallback(function onMouseDown2(event) {
     var _window;
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
@@ -50027,7 +50222,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
       setEmojiVariationPicker(emoji2);
     }, 500);
   }, [disallowClickRef, closeAllOpenToggles, setVariationPicker, setEmojiVariationPicker]);
-  var onMouseUp = React4.useCallback(function onMouseUp2() {
+  var onMouseUp = React5.useCallback(function onMouseUp2() {
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
       mouseDownTimerRef.current = void 0;
@@ -50037,7 +50232,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
       });
     }
   }, [disallowClickRef]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (!ContainerRef.current) {
       return;
     }
@@ -50100,7 +50295,7 @@ function emojiClickOutput(emoji2, activeSkinTone, activeEmojiStyle, getEmojiUrl)
   };
 }
 function Button3(props) {
-  return React4.createElement("button", Object.assign({
+  return React5.createElement("button", Object.assign({
     type: "button"
   }, props, {
     className: cx(styles$1.button, props.className)
@@ -50118,7 +50313,7 @@ var styles$1 = /* @__PURE__ */ stylesheet.create({
 function ClickableEmojiButton(_ref) {
   var _cx;
   var emojiNames2 = _ref.emojiNames, unified = _ref.unified, hidden2 = _ref.hidden, hiddenOnSearch = _ref.hiddenOnSearch, _ref$showVariations = _ref.showVariations, showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations, hasVariations = _ref.hasVariations, children = _ref.children, className = _ref.className, _ref$noBackground = _ref.noBackground, noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground, style2 = _ref.style;
-  return React4.createElement(Button3, {
+  return React5.createElement(Button3, {
     className: cx(styles$2.emoji, hidden2 && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden2 && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
     "data-unified": unified,
     "aria-label": getAriaLabel(emojiNames2),
@@ -50197,7 +50392,7 @@ var emojiStyles = /* @__PURE__ */ stylesheet.create({
 });
 function EmojiImg(_ref) {
   var emojiName2 = _ref.emojiName, style2 = _ref.style, _ref$lazyLoad = _ref.lazyLoad, lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad, imgUrl = _ref.imgUrl, onError = _ref.onError, className = _ref.className;
-  return React4.createElement("img", {
+  return React5.createElement("img", {
     src: imgUrl,
     alt: emojiName2,
     className: cx(styles$3.emojiImag, emojiStyles.external, emojiStyles.common, className),
@@ -50218,7 +50413,7 @@ var styles$3 = /* @__PURE__ */ stylesheet.create({
 });
 function NativeEmoji(_ref) {
   var unified = _ref.unified, style2 = _ref.style, className = _ref.className;
-  return React4.createElement("span", {
+  return React5.createElement("span", {
     className: cx(styles$4.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
     "data-unified": unified,
     style: style2
@@ -50250,7 +50445,7 @@ function ViewOnlyEmoji(_ref) {
     return null;
   }
   if (isCustomEmoji(emojiToRender)) {
-    return React4.createElement(EmojiImg, {
+    return React5.createElement(EmojiImg, {
       style: style2,
       emojiName: unified,
       emojiStyle: EmojiStyle.NATIVE,
@@ -50260,11 +50455,11 @@ function ViewOnlyEmoji(_ref) {
       className
     });
   }
-  return React4.createElement(React4.Fragment, null, emojiStyle === EmojiStyle.NATIVE ? React4.createElement(NativeEmoji, {
+  return React5.createElement(React5.Fragment, null, emojiStyle === EmojiStyle.NATIVE ? React5.createElement(NativeEmoji, {
     unified,
     style: style2,
     className
-  }) : React4.createElement(EmojiImg, {
+  }) : React5.createElement(EmojiImg, {
     style: style2,
     emojiName: emojiName(emojiToRender),
     emojiStyle,
@@ -50282,7 +50477,7 @@ function ViewOnlyEmoji(_ref) {
 function ClickableEmoji(_ref) {
   var emoji2 = _ref.emoji, unified = _ref.unified, hidden2 = _ref.hidden, hiddenOnSearch = _ref.hiddenOnSearch, emojiStyle = _ref.emojiStyle, _ref$showVariations = _ref.showVariations, showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations, size = _ref.size, lazyLoad = _ref.lazyLoad, getEmojiUrl = _ref.getEmojiUrl, className = _ref.className, _ref$noBackground = _ref.noBackground, noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground, style2 = _ref.style;
   var hasVariations = emojiHasVariations(emoji2);
-  return React4.createElement(ClickableEmojiButton, {
+  return React5.createElement(ClickableEmojiButton, {
     hasVariations,
     showVariations,
     hidden: hidden2,
@@ -50291,7 +50486,7 @@ function ClickableEmoji(_ref) {
     unified,
     noBackground,
     style: style2
-  }, React4.createElement(ViewOnlyEmoji, {
+  }, React5.createElement(ViewOnlyEmoji, {
     unified,
     emoji: emoji2,
     size,
@@ -50301,10 +50496,10 @@ function ClickableEmoji(_ref) {
     className
   }));
 }
-var Plus = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNS43LDEwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsMTAuOSw2LjEsMTEsNi4zLDExaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjRWNi43YzAtMC4zLTAuMi0wLjUtMC41LTAuNQoJQzkuOCw2LDkuNiw2LjIsOS42LDYuNXYzLjRINi4yQzUuOSw5LjksNS43LDEwLjEsNS43LDEwLjRMNS43LDEwLjR6Ii8+CjxwYXRoIGZpbGw9IiMzMzcxQjciIGQ9Ik01LjcsMzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDMxLDYuMywzMWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuMgoJQzUuOSwyOS45LDUuNywzMC4xLDUuNywzMC40TDUuNywzMC40eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNS43LDUwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsNTAuOSw2LjEsNTEsNi4zLDUxaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjR2LTMuNGMwLTAuMy0wLjItMC41LTAuNS0wLjUKCXMtMC41LDAuMi0wLjUsMC41djMuNEg2LjJDNS45LDQ5LjksNS43LDUwLjEsNS43LDUwLjRMNS43LDUwLjR6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik01LjcsNzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDcxLDYuMyw3MWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuNAoJQzUuOSw2OS45LDUuNyw3MC4xLDUuNyw3MC40TDUuNyw3MC40eiIvPgo8L3N2Zz4=";
+var Plus2 = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNS43LDEwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsMTAuOSw2LjEsMTEsNi4zLDExaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjRWNi43YzAtMC4zLTAuMi0wLjUtMC41LTAuNQoJQzkuOCw2LDkuNiw2LjIsOS42LDYuNXYzLjRINi4yQzUuOSw5LjksNS43LDEwLjEsNS43LDEwLjRMNS43LDEwLjR6Ii8+CjxwYXRoIGZpbGw9IiMzMzcxQjciIGQ9Ik01LjcsMzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDMxLDYuMywzMWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuMgoJQzUuOSwyOS45LDUuNywzMC4xLDUuNywzMC40TDUuNywzMC40eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNS43LDUwLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40QzYsNTAuOSw2LjEsNTEsNi4zLDUxaDMuNHYzLjRjMCwwLjEsMC4xLDAuMywwLjIsMC40CgljMC4xLDAuMSwwLjIsMC4yLDAuNCwwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41di0zLjRoMy40YzAuMywwLDAuNS0wLjIsMC41LTAuNXMtMC4yLTAuNS0wLjUtMC41aC0zLjR2LTMuNGMwLTAuMy0wLjItMC41LTAuNS0wLjUKCXMtMC41LDAuMi0wLjUsMC41djMuNEg2LjJDNS45LDQ5LjksNS43LDUwLjEsNS43LDUwLjRMNS43LDUwLjR6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik01LjcsNzAuNGMwLDAuMSwwLjEsMC4zLDAuMiwwLjRTNi4xLDcxLDYuMyw3MWgzLjR2My40YzAsMC4xLDAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuMgoJYzAuMywwLDAuNS0wLjIsMC41LTAuNXYtMy40aDMuNGMwLjMsMCwwLjUtMC4yLDAuNS0wLjVzLTAuMi0wLjUtMC41LTAuNWgtMy40di0zLjRjMC0wLjMtMC4yLTAuNS0wLjUtMC41cy0wLjUsMC4yLTAuNSwwLjV2My40SDYuNAoJQzUuOSw2OS45LDUuNyw3MC4xLDUuNyw3MC40TDUuNyw3MC40eiIvPgo8L3N2Zz4=";
 function BtnPlus() {
   var _useReactionsModeStat = useReactionsModeState(), setReactionsMode = _useReactionsModeStat[1];
-  return React4.createElement(Button3, {
+  return React5.createElement(Button3, {
     "aria-label": "Show all Emojis",
     title: "Show all Emojis",
     tabIndex: 0,
@@ -50332,7 +50527,7 @@ var styles$5 = /* @__PURE__ */ stylesheet.create(/* @__PURE__ */ _extends({
       content: "",
       minWidth: "20px",
       minHeight: "20px",
-      backgroundImage: "url(" + Plus + ")",
+      backgroundImage: "url(" + Plus2 + ")",
       backgroundColor: "transparent",
       backgroundRepeat: "no-repeat",
       backgroundSize: "20px",
@@ -50372,13 +50567,13 @@ function Reactions() {
   if (!reactionsOpen) {
     return null;
   }
-  return React4.createElement("ul", {
+  return React5.createElement("ul", {
     className: cx(styles$6.list, !reactionsOpen && commonStyles.hidden),
     ref: ReactionsRef
   }, reactions.map(function(reaction) {
-    return React4.createElement("li", {
+    return React5.createElement("li", {
       key: reaction
-    }, React4.createElement(ClickableEmoji, {
+    }, React5.createElement(ClickableEmoji, {
       emoji: emojiByUnified(reaction),
       emojiStyle,
       unified: reaction,
@@ -50387,7 +50582,7 @@ function Reactions() {
       noBackground: true,
       getEmojiUrl
     }));
-  }), allowExpandReactions ? React4.createElement("li", null, React4.createElement(BtnPlus, null)) : null);
+  }), allowExpandReactions ? React5.createElement("li", null, React5.createElement(BtnPlus, null)) : null);
 }
 var styles$6 = /* @__PURE__ */ stylesheet.create({
   list: {
@@ -50414,8 +50609,8 @@ var styles$6 = /* @__PURE__ */ stylesheet.create({
 });
 function useOnScroll(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
-  var _useState = React4.useState(0), scrollTop = _useState[0], setScrollTop = _useState[1];
-  React4.useEffect(function() {
+  var _useState = React5.useState(0), scrollTop = _useState[0], setScrollTop = _useState[1];
+  React5.useEffect(function() {
     var bodyRef = BodyRef.current;
     if (!bodyRef) {
       return;
@@ -50455,11 +50650,11 @@ function useCategoryHeight(emojiCount) {
   var EmojiListRef = useEmojiListRef();
   var _useReactionsModeStat = useReactionsModeState(), isReactionsMode = _useReactionsModeStat[0];
   var PickerMainRef = usePickerMainRef();
-  var emojiSizeRef = React4.useRef();
+  var emojiSizeRef = React5.useRef();
   var _useVisibleCategories = useVisibleCategoriesState(), visibleCategories = _useVisibleCategories[0];
   var _useEmojiSizeState = useEmojiSizeState(), emojiSizeFromContext = _useEmojiSizeState[0];
-  var _React$useState = React4.useState(), dimensions = _React$useState[0], setDimensions = _React$useState[1];
-  var computeAndSetDimensions = React4.useCallback(function() {
+  var _React$useState = React5.useState(), dimensions = _React$useState[0], setDimensions = _React$useState[1];
+  var computeAndSetDimensions = React5.useCallback(function() {
     var listEl = EmojiListRef.current;
     if (!listEl) return;
     var emojiElement = listEl.querySelector(EmojiButtonSelector);
@@ -50479,10 +50674,10 @@ function useCategoryHeight(emojiCount) {
       emojiSize
     });
   }, [EmojiListRef, emojiCount, emojiSizeFromContext]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     computeAndSetDimensions();
   }, [emojiCount, isReactionsMode, computeAndSetDimensions, visibleCategories.length]);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var rootEl = PickerMainRef.current;
     if (!rootEl) return;
     var handler = function handler2(e) {
@@ -50540,7 +50735,7 @@ function useEmojiVirtualization(_ref) {
     return !failedToLoad && !filteredOut && !hidden2 && !isDisallowed;
   });
   var dimensions = useCategoryHeight(emojisToPush.length);
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (dimensions) {
       onHeightReady(dimensions.categoryHeight);
     }
@@ -50568,7 +50763,7 @@ function useEmojiVirtualization(_ref) {
       virtualizedCounter++;
       return accumulator;
     }
-    accumulator.push(React4.createElement(ClickableEmoji, {
+    accumulator.push(React5.createElement(ClickableEmoji, {
       showVariations,
       key: unified,
       emoji: emoji2,
@@ -50592,13 +50787,13 @@ function EmojiCategory(_ref) {
   var categoryConfig = _ref.categoryConfig, children = _ref.children, hidden2 = _ref.hidden, hiddenOnSearch = _ref.hiddenOnSearch, height = _ref.height;
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
-  return React4.createElement("li", {
+  return React5.createElement("li", {
     className: cx(styles$7.category, hidden2 && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
-  }, React4.createElement("h2", {
+  }, React5.createElement("h2", {
     className: cx(styles$7.label)
-  }, categoryName), React4.createElement("div", {
+  }, categoryName), React5.createElement("div", {
     className: cx(styles$7.categoryContent),
     style: {
       height
@@ -50648,8 +50843,8 @@ function MeasureEmoji() {
   var lazyLoadEmojis = useLazyLoadEmojisConfig();
   var _useActiveSkinToneSta = useActiveSkinToneState(), activeSkinTone = _useActiveSkinToneSta[0];
   var _useEmojiSizeState = useEmojiSizeState(), emojiSize = _useEmojiSizeState[0], setEmojiSize = _useEmojiSizeState[1];
-  var ref = React4.useRef(null);
-  React4.useLayoutEffect(function() {
+  var ref = React5.useRef(null);
+  React5.useLayoutEffect(function() {
     if (ref.current) {
       setEmojiSize(ref.current.clientHeight);
     }
@@ -50663,9 +50858,9 @@ function MeasureEmoji() {
   if (!dummyEmoji) {
     return null;
   }
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     ref
-  }, React4.createElement(ClickableEmoji, {
+  }, React5.createElement(ClickableEmoji, {
     emoji: dummyEmoji,
     unified,
     emojiStyle,
@@ -50688,24 +50883,24 @@ function MeasureEmoji() {
 function EmojiList(_ref) {
   var scrollTop = _ref.scrollTop;
   var categories = useCategoriesConfig();
-  var _React$useState = React4.useState({}), categoryHeights = _React$useState[0], setCategoryHeights = _React$useState[1];
+  var _React$useState = React5.useState({}), categoryHeights = _React$useState[0], setCategoryHeights = _React$useState[1];
   var EmojiListRef = useEmojiListRef();
   var getEmojisByCategory = useGetEmojisByCategory();
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
-  return React4.createElement("ul", {
+  return React5.createElement("ul", {
     className: cx(styles$8.emojiList),
     ref: EmojiListRef
-  }, React4.createElement(MeasureEmoji, null), categories.map(function(categoryConfig) {
+  }, React5.createElement(MeasureEmoji, null), categories.map(function(categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     var currentOffset = topOffset;
     var categoryHeight = categoryHeights[category];
     if (categoryHeight) {
       topOffset += categoryHeight + labelHeight;
     }
-    return React4.createElement(React4.Suspense, {
+    return React5.createElement(React5.Suspense, {
       key: category
-    }, React4.createElement(RenderCategory, {
+    }, React5.createElement(RenderCategory, {
       categoryEmojis: getEmojisByCategory(category),
       categoryConfig,
       topOffset: currentOffset,
@@ -50731,7 +50926,7 @@ function RenderCategory(_ref2) {
     scrollTop,
     isCategoryVisible: visibleCategories.includes(categoryConfig.category)
   }), virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter, emojis2 = _useEmojiVirtualizati.emojis, dimensions = _useEmojiVirtualizati.dimensions;
-  return React4.createElement(EmojiCategory, {
+  return React5.createElement(EmojiCategory, {
     categoryConfig,
     height: dimensions == null ? void 0 : dimensions.categoryHeight,
     // Indicates that there are no visible emojis
@@ -50764,7 +50959,7 @@ function EmojiVariationPicker() {
   var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
   var visible = Boolean(emoji2 && button && emojiHasVariations(emoji2) && button.classList.contains(ClassNames.emojiHasVariations));
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (!visible) {
       return;
     }
@@ -50777,14 +50972,14 @@ function EmojiVariationPicker() {
     top2 = getTop();
     pointerStyle = getPointerStyle();
   }
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     ref: VariationPickerRef,
     className: cx(styles$9.variationPicker, getMenuDirection() === Direction.Down && styles$9.pointingUp, visible && styles$9.visible),
     style: {
       top: top2
     }
   }, visible && emoji2 ? [emojiUnified(emoji2)].concat(emojiVariations(emoji2)).slice(0, 6).map(function(unified) {
-    return React4.createElement(ClickableEmoji, {
+    return React5.createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji2,
       unified,
@@ -50792,7 +50987,7 @@ function EmojiVariationPicker() {
       showVariations: false,
       getEmojiUrl
     });
-  }) : null, React4.createElement("div", {
+  }) : null, React5.createElement("div", {
     className: cx(styles$9.pointer),
     style: pointerStyle
   }));
@@ -50909,10 +51104,10 @@ function Body() {
   var scrollTop = useOnScroll(BodyRef);
   useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     className: cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
-  }, React4.createElement(EmojiVariationPicker, null), React4.createElement(EmojiList, {
+  }, React5.createElement(EmojiVariationPicker, null), React5.createElement(EmojiList, {
     scrollTop
   }));
 }
@@ -50937,7 +51132,7 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
   var isMouseDisallowed = useIsMouseDisallowed();
   var allowMouseMove = useAllowMouseMove();
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (!allow) {
       return;
     }
@@ -51022,7 +51217,7 @@ var FlexDirection;
 })(FlexDirection || (FlexDirection = {}));
 function Flex(_ref) {
   var children = _ref.children, className = _ref.className, _ref$style = _ref.style, style2 = _ref$style === void 0 ? {} : _ref$style, _ref$direction = _ref.direction, direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     style: _extends({}, style2),
     className: cx(styles$b.flex, className, styles$b[direction])
   }, children);
@@ -51038,7 +51233,7 @@ var styles$b = /* @__PURE__ */ stylesheet.create((_stylesheet$create = {
 }, _stylesheet$create));
 function Space(_ref) {
   var className = _ref.className, _ref$style = _ref.style, style2 = _ref$style === void 0 ? {} : _ref$style;
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     style: _extends({
       flex: 1
     }, style2),
@@ -51047,7 +51242,7 @@ function Space(_ref) {
 }
 function Absolute(_ref) {
   var children = _ref.children, className = _ref.className, style2 = _ref.style;
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     style: _extends({}, style2, {
       position: "absolute"
     }),
@@ -51056,7 +51251,7 @@ function Absolute(_ref) {
 }
 function Relative(_ref) {
   var children = _ref.children, className = _ref.className, style2 = _ref.style;
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     style: _extends({}, style2, {
       position: "relative"
     }),
@@ -51065,7 +51260,7 @@ function Relative(_ref) {
 }
 function BtnSkinToneVariation(_ref) {
   var isOpen = _ref.isOpen, onClick = _ref.onClick, isActive2 = _ref.isActive, skinToneVariation = _ref.skinToneVariation, style2 = _ref.style;
-  return React4.createElement(Button3, {
+  return React5.createElement(Button3, {
     style: style2,
     onClick,
     className: cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive2 && styles$c.active),
@@ -51124,16 +51319,16 @@ var styles$c = /* @__PURE__ */ stylesheet.create({
 });
 var ITEM_SIZE = 28;
 function SkinTonePickerMenu() {
-  return React4.createElement(Relative, {
+  return React5.createElement(Relative, {
     style: {
       height: ITEM_SIZE
     }
-  }, React4.createElement(Absolute, {
+  }, React5.createElement(Absolute, {
     style: {
       bottom: 0,
       right: 0
     }
-  }, React4.createElement(SkinTonePicker, {
+  }, React5.createElement(SkinTonePicker, {
     direction: SkinTonePickerDirection.VERTICAL
   })));
 }
@@ -51152,7 +51347,7 @@ function SkinTonePicker(_ref) {
   var fullWidth = ITEM_SIZE * skinToneVariations.length + "px";
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + "px";
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
-  return React4.createElement(Relative, {
+  return React5.createElement(Relative, {
     className: cx(styles$d.skinTones, vertical && styles$d.vertical, isOpen && styles$d.open, vertical && isOpen && styles$d.verticalShadow),
     style: vertical ? {
       flexBasis: expandedSize,
@@ -51160,12 +51355,12 @@ function SkinTonePicker(_ref) {
     } : {
       flexBasis: expandedSize
     }
-  }, React4.createElement("div", {
+  }, React5.createElement("div", {
     className: cx(styles$d.select),
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function(skinToneVariation, i) {
     var active = skinToneVariation === activeSkinTone;
-    return React4.createElement(BtnSkinToneVariation, {
+    return React5.createElement(BtnSkinToneVariation, {
       key: skinToneVariation,
       skinToneVariation,
       isOpen,
@@ -51235,42 +51430,42 @@ function Preview() {
   if (!previewConfig.showPreview) {
     return null;
   }
-  return React4.createElement(Flex, {
+  return React5.createElement(Flex, {
     className: cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
-  }, React4.createElement(PreviewBody, null), React4.createElement(Space, null), isSkinToneInPreview ? React4.createElement(SkinTonePickerMenu, null) : null);
+  }, React5.createElement(PreviewBody, null), React5.createElement(Space, null), isSkinToneInPreview ? React5.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
   var _previewEmoji$unified;
   var previewConfig = usePreviewConfig();
-  var _useState = React4.useState(null), previewEmoji = _useState[0], setPreviewEmoji = _useState[1];
+  var _useState = React5.useState(null), previewEmoji = _useState[0], setPreviewEmoji = _useState[1];
   var emojiStyle = useEmojiStyleConfig();
   var _useEmojiVariationPic = useEmojiVariationPickerState(), variationPickerEmoji = _useEmojiVariationPic[0];
   var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
   var emoji2 = emojiByUnified((_previewEmoji$unified = previewEmoji == null ? void 0 : previewEmoji.unified) != null ? _previewEmoji$unified : previewEmoji == null ? void 0 : previewEmoji.originalUnified);
   var show = emoji2 != null && previewEmoji != null;
-  return React4.createElement(PreviewContent, null);
+  return React5.createElement(PreviewContent, null);
   function PreviewContent() {
     var defaultEmoji = variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji);
     if (!defaultEmoji) {
       return null;
     }
     var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
-    return React4.createElement(React4.Fragment, null, React4.createElement("div", null, show ? React4.createElement(ViewOnlyEmoji, {
+    return React5.createElement(React5.Fragment, null, React5.createElement("div", null, show ? React5.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: emoji2,
       emojiStyle,
       size: 45,
       getEmojiUrl,
       className: cx(styles$e.emoji)
-    }) : defaultEmoji ? React4.createElement(ViewOnlyEmoji, {
+    }) : defaultEmoji ? React5.createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle,
       size: 45,
       getEmojiUrl,
       className: cx(styles$e.emoji)
-    }) : null), React4.createElement("div", {
+    }) : null), React5.createElement("div", {
       className: cx(styles$e.label)
     }, show ? emojiName(emoji2) : defaultText));
   }
@@ -51305,7 +51500,7 @@ function categoryNameFromDom($category) {
 function useActiveCategoryScrollDetection(_ref) {
   var setActiveCategory = _ref.setActiveCategory, setVisibleCategories = _ref.setVisibleCategories;
   var BodyRef = useBodyRef();
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     var visibleCategories = /* @__PURE__ */ new Map();
     var intersectingCategories = /* @__PURE__ */ new Map();
     var bodyRef = BodyRef.current;
@@ -51381,7 +51576,7 @@ var SVGNavigation = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZ
 function CategoryButton(_ref) {
   var _cx;
   var isActiveCategory = _ref.isActiveCategory, category = _ref.category, allowNavigation = _ref.allowNavigation, categoryConfig = _ref.categoryConfig, onClick = _ref.onClick;
-  return React4.createElement(Button3, {
+  return React5.createElement(Button3, {
     tabIndex: allowNavigation ? 0 : -1,
     className: cx(styles$f.catBtn, commonInteractionStyles.categoryBtn, "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
     onClick,
@@ -51463,7 +51658,7 @@ var styles$f = /* @__PURE__ */ stylesheet.create(/* @__PURE__ */ _extends({
   ".epr-auto-theme": /* @__PURE__ */ _extends({}, DarkInactivePosition)
 }));
 function CategoryNavigation() {
-  var _useState = React4.useState(null), activeCategory = _useState[0], setActiveCategory = _useState[1];
+  var _useState = React5.useState(null), activeCategory = _useState[0], setActiveCategory = _useState[1];
   var _useVisibleCategories = useVisibleCategoriesState(), setVisibleCategories = _useVisibleCategories[1];
   var scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection({
@@ -51474,7 +51669,7 @@ function CategoryNavigation() {
   var categoriesConfig = useCategoriesConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     className: cx(styles$g.nav),
     role: "tablist",
     "aria-label": "Category navigation",
@@ -51487,7 +51682,7 @@ function CategoryNavigation() {
       return null;
     }
     var allowNavigation = !isSearchMode && !isActiveCategory;
-    return React4.createElement(CategoryButton, {
+    return React5.createElement(CategoryButton, {
       key: category,
       category,
       isActiveCategory,
@@ -51528,12 +51723,12 @@ var styles$g = /* @__PURE__ */ stylesheet.create({
 var SVGTimes = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjgwcHgiIHZpZXdCb3g9IjAgMCAyMCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjODY4Njg2IiBkPSJNNi45OCwxMy41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsOAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQyTDcuNzQsNy4yN2MtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywxMy4wNSw2Ljc3LDEzLjM5LDYuOTgsMTMuNTlMNi45OCwxMy41OXoiLz4KPHBhdGggZmlsbD0iIzg2ODY4NiIgZD0iTTEwLjE1LDE4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDE0Ljg0LDUuNzQsMTguNDMsMTAuMTUsMTguNDN6CgkgTTEwLjE1LDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0QzMuMjEsNi42LDYuMzMsMy40OSwxMC4xNSwzLjQ5CglMMTAuMTUsMy40OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTYuOTgsMzMuNTljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1czAuMjctMC4wNSwwLjM3LTAuMTVsMi40Mi0yLjQybDIuNDMsMi40MwoJYzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNWMwLjE0LDAsMC4yNy0wLjA1LDAuMzctMC4xNWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWwtMi40My0yLjQzTDEzLjMyLDI4CgljMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwbC0yLjQyLDIuNDJsLTIuNDEtMi40MWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDAKCWMtMC4yMSwwLjIxLTAuMjEsMC41NCwwLDAuNzVsMi40MSwyLjQxbC0yLjQyLDIuNDJDNi43NywzMy4wNSw2Ljc3LDMzLjM5LDYuOTgsMzMuNTlMNi45OCwzMy41OXoiLz4KPHBhdGggZmlsbD0iIzMzNzFCNyIgZD0iTTEwLjE1LDM4LjQzYzQuNDEsMCw4LTMuNTksOC04YzAtNC40MS0zLjU5LTgtOC04Yy00LjQxLDAtOCwzLjU5LTgsOEMyLjE1LDM0Ljg0LDUuNzQsMzguNDMsMTAuMTUsMzguNDN6CgkgTTEwLjE1LDIzLjQ5YzMuODMsMCw2Ljk0LDMuMTEsNi45NCw2Ljk0YzAsMy44My0zLjExLDYuOTQtNi45NCw2Ljk0Yy0zLjgzLDAtNi45NC0zLjExLTYuOTQtNi45NAoJQzMuMjEsMjYuNiw2LjMzLDIzLjQ5LDEwLjE1LDIzLjQ5TDEwLjE1LDIzLjQ5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNNi45OCw1My41OWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVzMC4yNy0wLjA1LDAuMzctMC4xNWwyLjQyLTIuNDJsMi40MywyLjQzCgljMC4xLDAuMSwwLjI0LDAuMTUsMC4zNywwLjE1YzAuMTQsMCwwLjI3LTAuMDUsMC4zNy0wLjE1YzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1bC0yLjQzLTIuNDNMMTMuMzIsNDgKCWMwLjIxLTAuMjEsMC4yMS0wLjU0LDAtMC43NWMtMC4yMS0wLjIxLTAuNTQtMC4yMS0wLjc1LDBsLTIuNDIsMi40MmwtMi40MS0yLjQxYy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMAoJYy0wLjIxLDAuMjEtMC4yMSwwLjU0LDAsMC43NWwyLjQxLDIuNDFsLTIuNDIsMi40MkM2Ljc3LDUzLjA1LDYuNzcsNTMuMzksNi45OCw1My41OUw2Ljk4LDUzLjU5eiIvPgo8cGF0aCBmaWxsPSIjQzBDMEJGIiBkPSJNMTAuMTUsNTguNDNjNC40MSwwLDgtMy41OSw4LThjMC00LjQxLTMuNTktOC04LThjLTQuNDEsMC04LDMuNTktOCw4QzIuMTUsNTQuODQsNS43NCw1OC40MywxMC4xNSw1OC40M3oKCSBNMTAuMTUsNDMuNDljMy44MywwLDYuOTQsMy4xMSw2Ljk0LDYuOTRjMCwzLjgzLTMuMTEsNi45NC02Ljk0LDYuOTRjLTMuODMsMC02Ljk0LTMuMTEtNi45NC02Ljk0CglDMy4yMSw0Ni42LDYuMzMsNDMuNDksMTAuMTUsNDMuNDlMMTAuMTUsNDMuNDl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik02Ljk4LDczLjU5YzAuMSwwLjEsMC4yNCwwLjE1LDAuMzcsMC4xNXMwLjI3LTAuMDUsMC4zNy0wLjE1bDIuNDItMi40MmwyLjQzLDIuNDMKCWMwLjEsMC4xLDAuMjQsMC4xNSwwLjM3LDAuMTVjMC4xNCwwLDAuMjctMC4wNSwwLjM3LTAuMTVjMC4yMS0wLjIxLDAuMjEtMC41NCwwLTAuNzVsLTIuNDMtMi40M0wxMy4zMiw2OAoJYzAuMjEtMC4yMSwwLjIxLTAuNTQsMC0wLjc1Yy0wLjIxLTAuMjEtMC41NC0wLjIxLTAuNzUsMGwtMi40MiwyLjQybC0yLjQxLTIuNDFjLTAuMjEtMC4yMS0wLjU0LTAuMjEtMC43NSwwCgljLTAuMjEsMC4yMS0wLjIxLDAuNTQsMCwwLjc1bDIuNDEsMi40MWwtMi40MiwyLjQyQzYuNzcsNzMuMDUsNi43Nyw3My4zOSw2Ljk4LDczLjU5TDYuOTgsNzMuNTl6Ii8+CjxwYXRoIGZpbGw9IiM2QUE5REQiIGQ9Ik0xMC4xNSw3OC40M2M0LjQxLDAsOC0zLjU5LDgtOGMwLTQuNDEtMy41OS04LTgtOGMtNC40MSwwLTgsMy41OS04LDhDMi4xNSw3NC44NCw1Ljc0LDc4LjQzLDEwLjE1LDc4LjQzegoJIE0xMC4xNSw2My40OWMzLjgzLDAsNi45NCwzLjExLDYuOTQsNi45NGMwLDMuODMtMy4xMSw2Ljk0LTYuOTQsNi45NGMtMy44MywwLTYuOTQtMy4xMS02Ljk0LTYuOTQKCUMzLjIxLDY2LjYsNi4zMyw2My40OSwxMC4xNSw2My40OUwxMC4xNSw2My40OXoiLz4KPC9zdmc+";
 function BtnClearSearch() {
   var clearSearch = useClearSearch();
-  return React4.createElement(Button3, {
+  return React5.createElement(Button3, {
     className: cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
     "aria-label": "Clear",
     title: "Clear"
-  }, React4.createElement("div", {
+  }, React5.createElement("div", {
     className: cx(styles$h.icnClearnSearch)
   }));
 }
@@ -51585,7 +51780,7 @@ var styles$h = /* @__PURE__ */ stylesheet.create(/* @__PURE__ */ _extends({
 }), /* @__PURE__ */ darkMode("btnClearSearch", HoverDark)));
 var SVGMagnifier = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg2ODY4NiIgZD0iTTEyLDguODFjMCwyLjA4LTEuNjgsMy43Ni0zLjc2LDMuNzZjLTIuMDgsMC0zLjc2LTEuNjgtMy43Ni0zLjc2CgljMC0yLjA4LDEuNjgtMy43NiwzLjc2LTMuNzZDMTAuMzIsNS4wNSwxMiw2LjczLDEyLDguODF6IE0xMS4yMywxMi43MmMtMC44MywwLjY0LTEuODcsMS4wMS0yLjk5LDEuMDFjLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTIKCWMwLTIuNzIsMi4yLTQuOTIsNC45Mi00LjkyYzIuNzIsMCw0LjkyLDIuMiw0LjkyLDQuOTJjMCwxLjEzLTAuMzgsMi4xNi0xLjAxLDIuOTlsMy45NCwzLjkzYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyCgljLTAuMjUsMC4yNS0wLjY2LDAuMjUtMC45MiwwTDExLjIzLDEyLjcyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0MwQzBCRiIgZD0iTTEyLDI4LjgxYzAsMi4wOC0xLjY4LDMuNzYtMy43NiwzLjc2Yy0yLjA4LDAtMy43Ni0xLjY4LTMuNzYtMy43NgoJYzAtMi4wOCwxLjY4LTMuNzYsMy43Ni0zLjc2QzEwLjMyLDI1LjA1LDEyLDI2LjczLDEyLDI4LjgxeiBNMTEuMjMsMzIuNzJjLTAuODMsMC42NC0xLjg3LDEuMDEtMi45OSwxLjAxCgljLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTJjMC0yLjcyLDIuMi00LjkyLDQuOTItNC45MmMyLjcyLDAsNC45MiwyLjIsNC45Miw0LjkyYzAsMS4xMy0wLjM4LDIuMTYtMS4wMSwyLjk5bDMuOTQsMy45MwoJYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyYy0wLjI1LDAuMjUtMC42NiwwLjI1LTAuOTIsMEwxMS4yMywzMi43MnoiLz4KPC9zdmc+";
 function IcnSearch() {
-  return React4.createElement("div", {
+  return React5.createElement("div", {
     className: cx(styles$i.icnSearch)
   });
 }
@@ -51613,9 +51808,9 @@ function SearchContainer() {
   if (searchDisabled) {
     return null;
   }
-  return React4.createElement(Flex, {
+  return React5.createElement(Flex, {
     className: cx(styles$j.overlay)
-  }, React4.createElement(Search, null), isSkinToneInSearch ? React4.createElement(SkinTonePicker, null) : null);
+  }, React5.createElement(Search, null), isSkinToneInSearch ? React5.createElement(SkinTonePicker, null) : null);
 }
 function Search() {
   var closeAllOpenToggles = useCloseAllOpenToggles();
@@ -51625,9 +51820,9 @@ function Search() {
   var _useFilter = useFilter(), statusSearchResults = _useFilter.statusSearchResults, searchTerm = _useFilter.searchTerm, _onChange = _useFilter.onChange;
   var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
   var value = input == null ? void 0 : input.value;
-  return React4.createElement(Relative, {
+  return React5.createElement(Relative, {
     className: cx(styles$j.searchContainer)
-  }, React4.createElement("input", {
+  }, React5.createElement("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus,
     "aria-label": "Type to search for an emoji",
@@ -51641,13 +51836,13 @@ function Search() {
       _onChange((_event$target$value = event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) != null ? _event$target$value : value);
     },
     ref: SearchInputRef
-  }), searchTerm ? React4.createElement("div", {
+  }), searchTerm ? React5.createElement("div", {
     role: "status",
     className: cx("epr-status-search-results", styles$j.visuallyHidden),
     "aria-live": "polite",
     id: "epr-search-id",
     "aria-atomic": "true"
-  }, statusSearchResults) : null, React4.createElement(IcnSearch, null), React4.createElement(BtnClearSearch, null));
+  }, statusSearchResults) : null, React5.createElement(IcnSearch, null), React5.createElement(BtnClearSearch, null));
 }
 var styles$j = /* @__PURE__ */ stylesheet.create(/* @__PURE__ */ _extends({
   overlay: {
@@ -51730,19 +51925,19 @@ var styles$j = /* @__PURE__ */ stylesheet.create(/* @__PURE__ */ _extends({
   }
 })));
 function Header2() {
-  return React4.createElement(Relative, {
+  return React5.createElement(Relative, {
     className: cx("epr-header", commonInteractionStyles.hiddenOnReactions)
-  }, React4.createElement(SearchContainer, null), React4.createElement(CategoryNavigation, null));
+  }, React5.createElement(SearchContainer, null), React5.createElement(CategoryNavigation, null));
 }
 function EmojiPicker(props) {
-  return React4.createElement(ElementRefContextProvider, null, React4.createElement(PickerStyleTag, null), React4.createElement(PickerConfigProvider, Object.assign({}, props), React4.createElement(ContentControl, null)));
+  return React5.createElement(ElementRefContextProvider, null, React5.createElement(PickerStyleTag, null), React5.createElement(PickerConfigProvider, Object.assign({}, props), React5.createElement(ContentControl, null)));
 }
 function ContentControl() {
   var _useReactionsModeStat = useReactionsModeState(), reactionsDefaultOpen = _useReactionsModeStat[0];
   var allowExpandReactions = useAllowExpandReactions();
-  var _React$useState = React4.useState(!reactionsDefaultOpen), renderAll = _React$useState[0], setRenderAll = _React$useState[1];
+  var _React$useState = React5.useState(!reactionsDefaultOpen), renderAll = _React$useState[0], setRenderAll = _React$useState[1];
   var isOpen = useOpenConfig();
-  React4.useEffect(function() {
+  React5.useEffect(function() {
     if (reactionsDefaultOpen && !allowExpandReactions) {
       return;
     }
@@ -51753,7 +51948,7 @@ function ContentControl() {
   if (!isOpen) {
     return null;
   }
-  return React4.createElement(PickerMain, null, React4.createElement(Reactions, null), React4.createElement(ExpandedPickerContent, {
+  return React5.createElement(PickerMain, null, React5.createElement(Reactions, null), React5.createElement(ExpandedPickerContent, {
     renderAll
   }));
 }
@@ -51762,9 +51957,9 @@ function ExpandedPickerContent(_ref) {
   if (!renderAll) {
     return null;
   }
-  return React4.createElement(React4.Fragment, null, React4.createElement(Header2, null), React4.createElement(Body, null), React4.createElement(Preview, null));
+  return React5.createElement(React5.Fragment, null, React5.createElement(Header2, null), React5.createElement(Body, null), React5.createElement(Preview, null));
 }
-var EmojiPickerReact = /* @__PURE__ */ React4.memo(EmojiPicker, compareConfig);
+var EmojiPickerReact = /* @__PURE__ */ React5.memo(EmojiPicker, compareConfig);
 var ErrorBoundary = /* @__PURE__ */ (function(_React$Component) {
   _inheritsLoose(ErrorBoundary2, _React$Component);
   function ErrorBoundary2(props) {
@@ -51791,16 +51986,16 @@ var ErrorBoundary = /* @__PURE__ */ (function(_React$Component) {
     return this.props.children;
   };
   return ErrorBoundary2;
-})(React4.Component);
+})(React5.Component);
 function EmojiPicker$1(props) {
   var MutableConfigRef = useDefineMutableConfig({
     onEmojiClick: props.onEmojiClick,
     onReactionClick: props.onReactionClick,
     onSkinToneChange: props.onSkinToneChange
   });
-  return React4.createElement(ErrorBoundary, null, React4.createElement(MutableConfigContext.Provider, {
+  return React5.createElement(ErrorBoundary, null, React5.createElement(MutableConfigContext.Provider, {
     value: MutableConfigRef
-  }, React4.createElement(EmojiPickerReact, Object.assign({}, props))));
+  }, React5.createElement(EmojiPickerReact, Object.assign({}, props))));
 }
 var emoji_picker_react_esm_default = EmojiPicker$1;
 var RoleBadge = ({ role }) => {
@@ -51897,12 +52092,12 @@ var CommentEditor = ({
   onSubmit,
   users = []
 }) => {
-  const [isRevision, setIsRevision] = React4__namespace.useState(false);
-  const [showToolbar, setShowToolbar] = React4__namespace.useState(false);
-  const [attachments, setAttachments] = React4__namespace.useState([]);
-  const [isEditorEmpty, setIsEditorEmpty] = React4__namespace.useState(true);
-  const fileInputRef = React4__namespace.useRef(null);
-  const extensions = React4__namespace.useMemo(() => [
+  const [isRevision, setIsRevision] = React5__namespace.useState(false);
+  const [showToolbar, setShowToolbar] = React5__namespace.useState(false);
+  const [attachments, setAttachments] = React5__namespace.useState([]);
+  const [isEditorEmpty, setIsEditorEmpty] = React5__namespace.useState(true);
+  const fileInputRef = React5__namespace.useRef(null);
+  const extensions = React5__namespace.useMemo(() => [
     index_default3.configure({
       // @ts-ignore
       link: false,
@@ -52302,13 +52497,13 @@ function TimePicker({
   className,
   disabled = false
 }) {
-  const [hours, setHours2] = React4__namespace.useState(
+  const [hours, setHours2] = React5__namespace.useState(
     date ? String(date.getHours()).padStart(2, "0") : "00"
   );
-  const [minutes, setMinutes] = React4__namespace.useState(
+  const [minutes, setMinutes] = React5__namespace.useState(
     date ? String(date.getMinutes()).padStart(2, "0") : "00"
   );
-  React4__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (date) {
       setHours2(String(date.getHours()).padStart(2, "0"));
       setMinutes(String(date.getMinutes()).padStart(2, "0"));
@@ -52404,9 +52599,9 @@ function DateRangePicker({
   disabled = false,
   withTime = false
 }) {
-  const [open, setOpen] = React4__namespace.useState(false);
-  const [range, setRange] = React4__namespace.useState(dateRange);
-  React4__namespace.useEffect(() => {
+  const [open, setOpen] = React5__namespace.useState(false);
+  const [range, setRange] = React5__namespace.useState(dateRange);
+  React5__namespace.useEffect(() => {
     setRange(dateRange);
   }, [dateRange]);
   const handleRangeSelect = (newRange) => {
@@ -52479,7 +52674,7 @@ function DateRangePicker({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Calendar,
+          Calendar2,
           {
             mode: "range",
             selected: range,
@@ -52542,9 +52737,9 @@ function DateTimePicker({
   className,
   disabled = false
 }) {
-  const [open, setOpen] = React4__namespace.useState(false);
-  const [selectedDate, setSelectedDate] = React4__namespace.useState(date);
-  React4__namespace.useEffect(() => {
+  const [open, setOpen] = React5__namespace.useState(false);
+  const [selectedDate, setSelectedDate] = React5__namespace.useState(date);
+  React5__namespace.useEffect(() => {
     setSelectedDate(date);
   }, [date]);
   const handleDateSelect = (newDate) => {
@@ -52590,7 +52785,7 @@ function DateTimePicker({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Calendar,
+          Calendar2,
           {
             mode: "single",
             selected: selectedDate,
@@ -52777,7 +52972,7 @@ function DocumentEditor({
   readOnly = false,
   label
 }) {
-  const extensions = React4__namespace.useMemo(() => {
+  const extensions = React5__namespace.useMemo(() => {
     return [
       index_default3.configure({
         heading: {
@@ -52847,7 +53042,7 @@ function DocumentEditor({
     ] })
   ] });
 }
-var DndContext = React4.createContext({
+var DndContext = React5.createContext({
   dragDropManager: void 0
 });
 
@@ -54295,12 +54490,12 @@ function _objectWithoutPropertiesLoose2(source, excluded) {
 }
 var refCount = 0;
 var INSTANCE_SYM = Symbol.for("__REACT_DND_CONTEXT_INSTANCE__");
-var DndProvider = /* @__PURE__ */ React4.memo(function DndProvider2(_param) {
+var DndProvider = /* @__PURE__ */ React5.memo(function DndProvider2(_param) {
   var { children } = _param, props = _objectWithoutProperties(_param, [
     "children"
   ]);
   const [manager, isGlobalInstance] = getDndContextValue(props);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isGlobalInstance) {
       const context = getGlobalContext();
       ++refCount;
@@ -54349,14 +54544,14 @@ function getGlobalContext() {
 
 // ../node_modules/react-dnd/dist/hooks/useCollector.js
 var import_fast_deep_equal = __toESM(require_fast_deep_equal());
-var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React4.useLayoutEffect : React4.useEffect;
+var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React5.useLayoutEffect : React5.useEffect;
 
 // ../node_modules/react-dnd/dist/hooks/useCollector.js
 function useCollector(monitor, collect, onUpdate) {
-  const [collected, setCollected] = React4.useState(
+  const [collected, setCollected] = React5.useState(
     () => collect(monitor)
   );
-  const updateCollected = React4.useCallback(() => {
+  const updateCollected = React5.useCallback(() => {
     const nextValue = collect(monitor);
     if (!(0, import_fast_deep_equal.default)(collected, nextValue)) {
       setCollected(nextValue);
@@ -54411,12 +54606,12 @@ function useOptionalFactory(arg, deps) {
   if (deps == null && typeof arg !== "function") {
     memoDeps.push(arg);
   }
-  return React4.useMemo(() => {
+  return React5.useMemo(() => {
     return typeof arg === "function" ? arg() : arg;
   }, memoDeps);
 }
 function useConnectDragSource(connector) {
-  return React4.useMemo(
+  return React5.useMemo(
     () => connector.hooks.dragSource(),
     [
       connector
@@ -54424,7 +54619,7 @@ function useConnectDragSource(connector) {
   );
 }
 function useConnectDragPreview(connector) {
-  return React4.useMemo(
+  return React5.useMemo(
     () => connector.hooks.dragPreview(),
     [
       connector
@@ -54653,7 +54848,7 @@ function throwIfCompositeComponentElement(element) {
 }
 function wrapHookToRecognizeElement(hook) {
   return (elementOrNode = null, options = null) => {
-    if (!React4.isValidElement(elementOrNode)) {
+    if (!React5.isValidElement(elementOrNode)) {
       const node = elementOrNode;
       hook(node, options);
       return node;
@@ -54688,11 +54883,11 @@ function cloneWithRef(element, newRef) {
   const previousRef = element.ref;
   invariant(typeof previousRef !== "string", "Cannot connect React DnD to an element with an existing string ref. Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs");
   if (!previousRef) {
-    return React4.cloneElement(element, {
+    return React5.cloneElement(element, {
       ref: newRef
     });
   } else {
-    return React4.cloneElement(element, {
+    return React5.cloneElement(element, {
       ref: (node) => {
         setRef(previousRef, node);
         setRef(newRef, node);
@@ -54933,7 +55128,7 @@ var TargetConnector = class {
   }
 };
 function useDragDropManager() {
-  const { dragDropManager } = React4.useContext(DndContext);
+  const { dragDropManager } = React5.useContext(DndContext);
   invariant(dragDropManager != null, "Expected drag drop context");
   return dragDropManager;
 }
@@ -54941,7 +55136,7 @@ function useDragDropManager() {
 // ../node_modules/react-dnd/dist/hooks/useDrag/useDragSourceConnector.js
 function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
   const manager = useDragDropManager();
-  const connector = React4.useMemo(
+  const connector = React5.useMemo(
     () => new SourceConnector(manager.getBackend()),
     [
       manager
@@ -54967,7 +55162,7 @@ function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
 }
 function useDragSourceMonitor() {
   const manager = useDragDropManager();
-  return React4.useMemo(
+  return React5.useMemo(
     () => new DragSourceMonitorImpl(manager),
     [
       manager
@@ -55026,14 +55221,14 @@ var DragSourceImpl = class {
 
 // ../node_modules/react-dnd/dist/hooks/useDrag/useDragSource.js
 function useDragSource(spec, monitor, connector) {
-  const handler = React4.useMemo(
+  const handler = React5.useMemo(
     () => new DragSourceImpl(spec, monitor, connector),
     [
       monitor,
       connector
     ]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     handler.spec = spec;
   }, [
     spec
@@ -55041,7 +55236,7 @@ function useDragSource(spec, monitor, connector) {
   return handler;
 }
 function useDragType(spec) {
-  return React4.useMemo(() => {
+  return React5.useMemo(() => {
     const result = spec.type;
     invariant(result != null, "spec.type must be defined");
     return result;
@@ -55086,7 +55281,7 @@ function useDrag(specArg, deps) {
   ];
 }
 function useConnectDropTarget(connector) {
-  return React4.useMemo(
+  return React5.useMemo(
     () => connector.hooks.dropTarget(),
     [
       connector
@@ -55095,7 +55290,7 @@ function useConnectDropTarget(connector) {
 }
 function useDropTargetConnector(options) {
   const manager = useDragDropManager();
-  const connector = React4.useMemo(
+  const connector = React5.useMemo(
     () => new TargetConnector(manager.getBackend()),
     [
       manager
@@ -55112,7 +55307,7 @@ function useDropTargetConnector(options) {
 }
 function useDropTargetMonitor() {
   const manager = useDragDropManager();
-  return React4.useMemo(
+  return React5.useMemo(
     () => new DropTargetMonitorImpl(manager),
     [
       manager
@@ -55121,7 +55316,7 @@ function useDropTargetMonitor() {
 }
 function useAccept(spec) {
   const { accept } = spec;
-  return React4.useMemo(() => {
+  return React5.useMemo(() => {
     invariant(spec.accept != null, "accept must be defined");
     return Array.isArray(accept) ? accept : [
       accept
@@ -55161,13 +55356,13 @@ var DropTargetImpl = class {
 
 // ../node_modules/react-dnd/dist/hooks/useDrop/useDropTarget.js
 function useDropTarget(spec, monitor) {
-  const dropTarget = React4.useMemo(
+  const dropTarget = React5.useMemo(
     () => new DropTargetImpl(spec, monitor),
     [
       monitor
     ]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     dropTarget.spec = spec;
   }, [
     spec
@@ -56597,8 +56792,8 @@ function TaskModal({
   onSave,
   isNew = false
 }) {
-  const [editedTask, setEditedTask] = React4.useState(task || {});
-  React4.useMemo(() => {
+  const [editedTask, setEditedTask] = React5.useState(task || {});
+  React5.useMemo(() => {
     setEditedTask(task || {});
   }, [task]);
   const handleSave = () => {
@@ -56709,13 +56904,13 @@ function useCalendarController({
   onTaskCreate,
   defaultView = "month"
 }) {
-  const [currentDate, setCurrentDate] = React4.useState(/* @__PURE__ */ new Date());
-  const [view, setView] = React4.useState(defaultView);
-  const [isSidebarOpen, setIsSidebarOpen] = React4.useState(true);
-  const [isModalOpen, setIsModalOpen] = React4.useState(false);
-  const [editingTask, setEditingTask] = React4.useState(null);
-  const [isNewTask, setIsNewTask] = React4.useState(false);
-  const calendarDays = React4.useMemo(() => {
+  const [currentDate, setCurrentDate] = React5.useState(/* @__PURE__ */ new Date());
+  const [view, setView] = React5.useState(defaultView);
+  const [isSidebarOpen, setIsSidebarOpen] = React5.useState(true);
+  const [isModalOpen, setIsModalOpen] = React5.useState(false);
+  const [editingTask, setEditingTask] = React5.useState(null);
+  const [isNewTask, setIsNewTask] = React5.useState(false);
+  const calendarDays = React5.useMemo(() => {
     let startDate, endDate;
     if (view === "month") {
       const monthStart = dateFns.startOfMonth(currentDate);
@@ -57439,7 +57634,7 @@ function getPositionAndWidth(taskStart, taskEnd, timelineStart, timelineEnd, col
   const width = duration / totalDays * 100;
   return { left: left2, width };
 }
-var TaskRow = React4__namespace.memo(({
+var TaskRow = React5__namespace.memo(({
   task,
   timelineStart,
   timelineEnd,
@@ -57603,7 +57798,7 @@ var TaskRow = React4__namespace.memo(({
 });
 TaskRow.displayName = "TaskRow";
 var WEEKDAYS = ["DOM", "SEG", "TER", "QUA", "QUI", "SEX", "SAB"];
-var GanttChart = React4__namespace.forwardRef(
+var GanttChart = React5__namespace.forwardRef(
   ({
     tasks,
     projects = [],
@@ -57613,15 +57808,15 @@ var GanttChart = React4__namespace.forwardRef(
     columnWidth = 40,
     groupBy = "projects"
   }, ref) => {
-    const [currentDate, setCurrentDate] = React4__namespace.useState(/* @__PURE__ */ new Date());
-    const [collapsedGroups, setCollapsedGroups] = React4__namespace.useState(/* @__PURE__ */ new Set());
+    const [currentDate, setCurrentDate] = React5__namespace.useState(/* @__PURE__ */ new Date());
+    const [collapsedGroups, setCollapsedGroups] = React5__namespace.useState(/* @__PURE__ */ new Set());
     const timelineStart = dateFns.startOfMonth(currentDate);
     const timelineEnd = dateFns.endOfMonth(currentDate);
     const days = dateFns.eachDayOfInterval({ start: timelineStart, end: timelineEnd });
     const handlePrevMonth = () => setCurrentDate(dateFns.subMonths(currentDate, 1));
     const handleNextMonth = () => setCurrentDate(dateFns.addMonths(currentDate, 1));
     const handleToday = () => setCurrentDate(/* @__PURE__ */ new Date());
-    const taskGroups = React4__namespace.useMemo(() => {
+    const taskGroups = React5__namespace.useMemo(() => {
       if (groupBy === "assignees") {
         const grouped = /* @__PURE__ */ new Map();
         tasks.forEach((task) => {
@@ -57837,7 +58032,7 @@ var GanttChart = React4__namespace.forwardRef(
   }
 );
 GanttChart.displayName = "GanttChart";
-var GanttLegend = React4__namespace.forwardRef(
+var GanttLegend = React5__namespace.forwardRef(
   ({ className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-wrap gap-4", className), children: [
       Object.entries(statusConfig).map(([status, config]) => {
@@ -57880,7 +58075,7 @@ var priorityConfig = {
     bgColor: "bg-red-50 dark:bg-red-950/20"
   }
 };
-var KanbanCard = React4__namespace.forwardRef(
+var KanbanCard = React5__namespace.forwardRef(
   ({
     title,
     description,
@@ -58225,10 +58420,10 @@ function FilterMenuItem({
 }
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React4__namespace.useState(
+  const [isMobile, setIsMobile] = React5__namespace.useState(
     void 0
   );
-  React4__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -58245,9 +58440,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React4__namespace.createContext(null);
+var SidebarContext = React5__namespace.createContext(null);
 function useSidebar() {
-  const context = React4__namespace.useContext(SidebarContext);
+  const context = React5__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -58263,10 +58458,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React4__namespace.useState(false);
-  const [_open, _setOpen] = React4__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React5__namespace.useState(false);
+  const [_open, _setOpen] = React5__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React4__namespace.useCallback(
+  const setOpen = React5__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -58278,10 +58473,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React4__namespace.useCallback(() => {
+  const toggleSidebar = React5__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React4__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -58292,7 +58487,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React4__namespace.useMemo(
+  const contextValue = React5__namespace.useMemo(
     () => ({
       state,
       open,
@@ -58750,7 +58945,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React4__namespace.useMemo(() => {
+  const width = React5__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -58854,10 +59049,10 @@ function TaskEditDialog({
   availableTasks = [],
   availableAssignees = []
 }) {
-  const [formData, setFormData] = React4__namespace.useState(null);
-  const [startDateOpen, setStartDateOpen] = React4__namespace.useState(false);
-  const [endDateOpen, setEndDateOpen] = React4__namespace.useState(false);
-  React4__namespace.useEffect(() => {
+  const [formData, setFormData] = React5__namespace.useState(null);
+  const [startDateOpen, setStartDateOpen] = React5__namespace.useState(false);
+  const [endDateOpen, setEndDateOpen] = React5__namespace.useState(false);
+  React5__namespace.useEffect(() => {
     if (task) {
       setFormData({ ...task });
     }
@@ -58930,7 +59125,7 @@ function TaskEditDialog({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Calendar,
+              Calendar2,
               {
                 mode: "single",
                 selected: formData.startDate,
@@ -58963,7 +59158,7 @@ function TaskEditDialog({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Calendar,
+              Calendar2,
               {
                 mode: "single",
                 selected: formData.endDate,
@@ -59144,7 +59339,7 @@ var getActionColor = (type) => {
   }
 };
 var TimelineItem = ({ event, isLast }) => {
-  const [isOpen, setIsOpen] = React4__namespace.useState(false);
+  const [isOpen, setIsOpen] = React5__namespace.useState(false);
   const hasDetails = !!(event.metadata?.before || event.metadata?.after || event.metadata?.details);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 group", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
@@ -59204,9 +59399,9 @@ var Timeline = ({ events, className }) => {
     event.id
   )) });
 };
-var UnderlineTabsContext = React4__namespace.createContext(void 0);
+var UnderlineTabsContext = React5__namespace.createContext(void 0);
 function useUnderlineTabs() {
-  const context = React4__namespace.useContext(UnderlineTabsContext);
+  const context = React5__namespace.useContext(UnderlineTabsContext);
   if (!context) {
     throw new Error("UnderlineTabs components must be used within UnderlineTabs");
   }
@@ -59219,7 +59414,7 @@ function UnderlineTabs({
   children,
   className
 }) {
-  const [internalValue, setInternalValue] = React4__namespace.useState(defaultValue || "");
+  const [internalValue, setInternalValue] = React5__namespace.useState(defaultValue || "");
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const handleValueChange = (newValue) => {
     if (controlledValue === void 0) {
@@ -59298,12 +59493,13 @@ exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AlertTitle = AlertTitle;
+exports.AppLayout = AppLayout;
 exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
-exports.BrandLogo = BrandLogo;
+exports.BrandLogo = BrandLogo2;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -59312,7 +59508,7 @@ exports.BreadcrumbList = BreadcrumbList;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = Button;
-exports.Calendar = Calendar;
+exports.Calendar = Calendar2;
 exports.Card = Card;
 exports.CardAction = CardAction;
 exports.CardContent = CardContent;