lecom-ui 4.1.8 → 4.2.0

package/dist/components/Layout/Layout.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { initializeI18n } from '../../i18n/index.js';
 import { getCookie } from '../../utils/cookie.js';
 import '../CustomIcon/Icons/CadastroFacil.js';
 import '../CustomIcon/Icons/LogoLecom.js';
@@ -9,53 +9,70 @@ import { LogoLecomBrand } from '../CustomIcon/Icons/LogoLecomBrand.js';
 import { Header } from '../Header/Header.js';
 import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarFooter } from '../Sidebar/Sidebar.js';
 import { Typography } from '../Typography/Typography.js';
+import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 
-initializeI18n();
 const Layout = ({ children, header, sideBar }) => {
+  const { t } = useTranslation();
   const { items, info } = sideBar;
-  const sidebarState = getCookie("sidebar:state") === "true";
-  return /* @__PURE__ */ React.createElement(SidebarProvider, { className: "flex-col", defaultOpen: sidebarState }, /* @__PURE__ */ React.createElement(Header, { ...header }), /* @__PURE__ */ React.createElement("div", { className: "flex grow" }, /* @__PURE__ */ React.createElement(Sidebar, { collapsible: "icon", variant: "sidebar" }, /* @__PURE__ */ React.createElement(SidebarContent, null, /* @__PURE__ */ React.createElement(SidebarGroup, null, /* @__PURE__ */ React.createElement(SidebarGroupContent, null, /* @__PURE__ */ React.createElement(SidebarMenu, null, items.map((item) => /* @__PURE__ */ React.createElement(SidebarMenuItem, { key: item.title }, /* @__PURE__ */ React.createElement(
-    SidebarMenuButton,
-    {
-      asChild: true,
-      tooltip: item.title,
-      isActive: !!item.isActive
-    },
-    item.url ? /* @__PURE__ */ React.createElement("a", { href: item.url }, item.icon, /* @__PURE__ */ React.createElement("span", null, item.title)) : /* @__PURE__ */ React.createElement("div", { onClick: item.onClick }, item.icon, /* @__PURE__ */ React.createElement("span", null, item.title))
-  ))))))), /* @__PURE__ */ React.createElement(SidebarFooter, { className: "p-6 pt-0 gap-1" }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "heading-xsmall-600",
-      textColor: "text-grey-800",
-      className: "flex items-center gap-2 w-[200px]"
-    },
-    info.platformText,
-    /* @__PURE__ */ React.createElement(LogoLecomBrand, { className: "w-16 shrink-0" })
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "body-medium-400",
-      textColor: "text-grey-800",
-      className: "w-[200px]"
-    },
-    info.versionText,
-    " ",
-    info.version,
-    " - ",
-    info.cycle,
-    " ",
-    info.build
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "body-medium-400",
-      textColor: "text-grey-800",
-      className: "w-[200px]"
-    },
-    info.authorizedForText,
-    " ",
-    info.authorizedFor
-  ))), /* @__PURE__ */ React.createElement("main", { className: "grow w-full" }, children)));
+  const [sidebarState, setSidebarState] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const cookieState = getCookie("sidebar:state") === "true";
+    setSidebarState(cookieState);
+  }, []);
+  return /* @__PURE__ */ jsxs(SidebarProvider, { className: "flex-col", defaultOpen: sidebarState, children: [
+    /* @__PURE__ */ jsx(Header, { ...header }),
+    /* @__PURE__ */ jsxs("div", { className: "flex grow", children: [
+      /* @__PURE__ */ jsxs(Sidebar, { collapsible: "icon", variant: "sidebar", children: [
+        /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
+          {
+            asChild: true,
+            tooltip: item.title,
+            isActive: !!item.isActive,
+            children: item.url ? /* @__PURE__ */ jsxs("a", { href: item.url, children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] }) : /* @__PURE__ */ jsxs("div", { onClick: item.onClick, children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { children: item.title })
+            ] })
+          }
+        ) }, item.title)) }) }) }) }),
+        /* @__PURE__ */ jsxs(SidebarFooter, { className: "p-6 pt-0 gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "heading-xsmall-600",
+              textColor: "text-grey-800",
+              className: "flex items-center gap-2",
+              children: [
+                t("sidebar.platform"),
+                " ",
+                /* @__PURE__ */ jsx(LogoLecomBrand, { className: "w-16 shrink-0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body-medium-400", textColor: "text-grey-800", children: [
+            t("sidebar.version"),
+            " ",
+            info.version,
+            " - ",
+            info.cycle,
+            " ",
+            info.build
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body-medium-400", textColor: "text-grey-800", children: [
+            t("sidebar.authorizedFor"),
+            " ",
+            info.authorizedFor
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "grow", children })
+    ] })
+  ] });
 };
 Layout.displayName = "Layout";
 

package/dist/components/Notification/Notification.js

@@ -1,6 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { cva } from 'class-variance-authority';
+import { cva } from '../../node_modules/class-variance-authority/dist/index.js';
 import { NotificationCallout } from './NotificationCallout.js';
 import { NotificationInline } from './NotificationInline.js';
 import { MemoizedNotificationToast } from './NotificationToast.js';
@@ -37,11 +38,11 @@ const posistionMap = {
 const renderNotification = (props) => {
   switch (props.type) {
     case "toast":
-      return /* @__PURE__ */ React.createElement(MemoizedNotificationToast, { ...props });
+      return /* @__PURE__ */ jsx(MemoizedNotificationToast, { ...props });
     case "inline":
-      return /* @__PURE__ */ React.createElement(NotificationInline, { ...props });
+      return /* @__PURE__ */ jsx(NotificationInline, { ...props });
     case "callout":
-      return /* @__PURE__ */ React.createElement(NotificationCallout, { ...props });
+      return /* @__PURE__ */ jsx(NotificationCallout, { ...props });
     default:
       return null;
   }
@@ -58,7 +59,7 @@ const Notification = React.forwardRef(
     const { shouldExpand } = props;
     const widthStyle = shouldExpand ? "w-full" : "inline-block";
     const positionClass = getPositionClass(type, placement);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "main",
       {
         className: cn(
@@ -66,9 +67,9 @@ const Notification = React.forwardRef(
           type === "toast" && "fixed z-50 p-4 space-y-2",
           positionClass
         ),
-        ref
-      },
-      renderNotification(props)
+        ref,
+        children: renderNotification(props)
+      }
     );
   }
 );

package/dist/components/Notification/NotificationBase.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../lib/utils.js';
 import { notificationVariants } from './Notification.js';
 
@@ -9,16 +9,16 @@ const NotificationBase = ({
   children,
   className,
   dataTestId
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(notificationVariants({ variant }), className),
     onMouseEnter,
     onMouseLeave,
     "data-testid": dataTestId,
-    "aria-hidden": "true"
-  },
-  children
+    "aria-hidden": "true",
+    children
+  }
 );
 
 export { NotificationBase };

package/dist/components/Notification/NotificationCallout.js

@@ -1,9 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { ChevronUpIcon } from 'lucide-react';
 import { NotificationBase } from './NotificationBase.js';
 import { NotificationContent } from './NotificationContent.js';
 import { NotificationIcon } from './NotificationIcon.js';
+import ChevronUp from '../../node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 
 const NotificationCallout = ({ ...props }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(false);
@@ -46,37 +47,42 @@ const NotificationCallout = ({ ...props }) => {
     if (isCollapsed && props.title) return "max-h-0 overflow-hidden";
     return "no-collapse";
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     NotificationBase,
     {
       variant: defaultVariant,
       className: cn(getGridColumns(), isCollapsed && "place-items-center"),
-      dataTestId: "notification-callout"
-    },
-    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
-      NotificationContent,
-      {
-        title: props.title,
-        content: props.content,
-        ref: contentRef,
-        className: cn(
-          "transition-all duration-300",
-          isCollapsed && getCollapseClass()
+      dataTestId: "notification-callout",
+      children: [
+        /* @__PURE__ */ jsx(NotificationIcon, { variant: defaultVariant }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            NotificationContent,
+            {
+              title: props.title,
+              content: props.content,
+              ref: contentRef,
+              className: cn(
+                "transition-all duration-300",
+                isCollapsed && getCollapseClass()
+              )
+            }
+          ),
+          props.action
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronUp,
+          {
+            "data-testid": "collapse-icon",
+            onClick: handleCollapse,
+            ref: refCollapse,
+            className: cn(
+              shouldCollapse ? "opacity-100 size-5 text-grey-800 transition-transform duration-200 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
+            )
+          }
         )
-      }
-    ), props.action),
-    /* @__PURE__ */ React.createElement(
-      ChevronUpIcon,
-      {
-        "data-testid": "collapse-icon",
-        onClick: handleCollapse,
-        ref: refCollapse,
-        className: cn(
-          shouldCollapse ? "opacity-100 size-5 text-grey-800 transition-transform duration-200 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
-        )
-      }
-    )
+      ]
+    }
   );
 };
 NotificationCallout.displayName = "NotificationCallout";

package/dist/components/Notification/NotificationCloseButton.js

@@ -1,11 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../lib/utils.js';
-import { XIcon } from 'lucide-react';
+import X from '../../node_modules/lucide-react/dist/esm/icons/x.js';
 
 const NotificationCloseButton = ({
   onClose,
   enableClose
-}) => /* @__PURE__ */ React.createElement(
-  XIcon,
+}) => /* @__PURE__ */ jsx(
+  X,
   {
     className: cn(
       enableClose ? "opacity-100 size-5 text-grey-800 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"

package/dist/components/Notification/NotificationContent.js

@@ -1,24 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Typography } from '../Typography/Typography.js';
 
-const NotificationContent = React.forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 flex-1" }, title && /* @__PURE__ */ React.createElement(
-  Typography,
-  {
-    variant: "body-medium-500",
-    color: "grey-800",
-    "data-testid": "title"
-  },
-  title
-), /* @__PURE__ */ React.createElement("div", { ref, className, "data-testid": "collapse-content" }, /* @__PURE__ */ React.createElement(
-  Typography,
-  {
-    variant: "body-medium-400",
-    color: "grey-800",
-    "data-testid": "content"
-  },
-  content,
-  children
-))));
+const NotificationContent = React.forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+  title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body-medium-500",
+      color: "grey-800",
+      "data-testid": "title",
+      children: title
+    }
+  ),
+  /* @__PURE__ */ jsx("div", { ref, className, "data-testid": "collapse-content", children: /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      variant: "body-medium-400",
+      color: "grey-800",
+      "data-testid": "content",
+      children: [
+        content,
+        children
+      ]
+    }
+  ) })
+] }));
 NotificationContent.displayName = "NotificationContent";
 
 export { NotificationContent };

package/dist/components/Notification/NotificationIcon.js

@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { CircleCheckIcon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+import TriangleAlert from '../../node_modules/lucide-react/dist/esm/icons/triangle-alert.js';
+import Info from '../../node_modules/lucide-react/dist/esm/icons/info.js';
+import CircleAlert from '../../node_modules/lucide-react/dist/esm/icons/circle-alert.js';
+import CircleCheck from '../../node_modules/lucide-react/dist/esm/icons/circle-check.js';
 
 const iconMap = {
-  success: /* @__PURE__ */ React.createElement(CircleCheckIcon, { className: "text-green-600 size-5" }),
-  error: /* @__PURE__ */ React.createElement(CircleAlertIcon, { className: "text-red-600 size-5" }),
-  information: /* @__PURE__ */ React.createElement(InfoIcon, { className: "text-blue-600 size-5" }),
-  warning: /* @__PURE__ */ React.createElement(TriangleAlertIcon, { className: "size-5 text-yellow-600" })
+  success: /* @__PURE__ */ jsx(CircleCheck, { className: "text-green-600 size-5" }),
+  error: /* @__PURE__ */ jsx(CircleAlert, { className: "text-red-600 size-5" }),
+  information: /* @__PURE__ */ jsx(Info, { className: "text-blue-600 size-5" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5 text-yellow-600" })
 };
 const NotificationIcon = ({
   variant

package/dist/components/Notification/NotificationInline.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
@@ -45,30 +46,32 @@ const NotificationInline = ({
       return getNonFullWidthColumns();
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     NotificationBase,
     {
       variant: defaultVariant,
       className: cn(getGridColumns()),
-      dataTestId: "notification-inline"
-    },
-    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
-    /* @__PURE__ */ React.createElement(
-      NotificationContent,
-      {
-        title,
-        content,
-        className: "max-h-10 overflow-hidden"
-      }
-    ),
-    action,
-    /* @__PURE__ */ React.createElement(
-      NotificationCloseButton,
-      {
-        enableClose: enableClose ?? false,
-        onClose: () => setIsVisible(false)
-      }
-    )
+      dataTestId: "notification-inline",
+      children: [
+        /* @__PURE__ */ jsx(NotificationIcon, { variant: defaultVariant }),
+        /* @__PURE__ */ jsx(
+          NotificationContent,
+          {
+            title,
+            content,
+            className: "max-h-11 overflow-hidden"
+          }
+        ),
+        action,
+        /* @__PURE__ */ jsx(
+          NotificationCloseButton,
+          {
+            enableClose: enableClose ?? false,
+            onClose: () => setIsVisible(false)
+          }
+        )
+      ]
+    }
   );
 };
 NotificationInline.displayName = "NotificationInline";

package/dist/components/Notification/NotificationToast.js

@@ -1,3 +1,4 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
@@ -107,14 +108,13 @@ const NotificationToast = (props) => {
   );
   const renderAction = (action) => {
     if (action) {
-      return /* @__PURE__ */ React.createElement("div", { className: cn(props.showProgress ? "py-2" : "pt-2") }, action);
+      return /* @__PURE__ */ jsx("div", { className: cn(props.showProgress ? "py-2" : "pt-2"), children: action });
     }
     return null;
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, toasts.map((toast) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsxs(
     NotificationBase,
     {
-      key: toast.id,
       variant: toast.variant,
       className: cn(
         "sm:w-[17.5rem] min-w-auto cursor-pointer",
@@ -122,29 +122,32 @@ const NotificationToast = (props) => {
       ),
       onMouseEnter: () => handleMouseEnter(toast.id),
       onMouseLeave: () => handleMouseLeave(toast.id),
-      dataTestId: "notification-toast"
-    },
-    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: toast.variant }),
-    /* @__PURE__ */ React.createElement(NotificationContent, { title: toast.title, content: toast.content }, renderAction(toast.action)),
-    /* @__PURE__ */ React.createElement(
-      NotificationCloseButton,
-      {
-        enableClose: props.enableClose ?? false,
-        onClose: () => closeNotification(toast.id)
-      }
-    ),
-    props.showProgress && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        "data-testid": "progress-bar",
-        className: cn(
-          `absolute bottom-0 left-0 h-1 rounded-b-lg transition-all`,
-          colorMap[toast.variant]
+      dataTestId: "notification-toast",
+      children: [
+        /* @__PURE__ */ jsx(NotificationIcon, { variant: toast.variant }),
+        /* @__PURE__ */ jsx(NotificationContent, { title: toast.title, content: toast.content, children: renderAction(toast.action) }),
+        /* @__PURE__ */ jsx(
+          NotificationCloseButton,
+          {
+            enableClose: props.enableClose ?? false,
+            onClose: () => closeNotification(toast.id)
+          }
         ),
-        style: { width: `${progressMap[toast.id] ?? 100}%` }
-      }
-    )
-  )));
+        props.showProgress && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "progress-bar",
+            className: cn(
+              `absolute bottom-0 left-0 h-1 rounded-b-lg transition-all`,
+              colorMap[toast.variant]
+            ),
+            style: { width: `${progressMap[toast.id] ?? 100}%` }
+          }
+        )
+      ]
+    },
+    toast.id
+  )) });
 };
 NotificationToast.displayName = "NotificationToast";
 const MemoizedNotificationToast = React.memo(NotificationToast);

package/dist/components/Notification/useNotificationToast.js

@@ -4,7 +4,6 @@ const TOAST_LIMIT = Infinity;
 const TOAST_REMOVE_DELAY = 5e3;
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
   PAUSE_TOAST: "PAUSE_TOAST",

package/dist/components/Popover/Popover.js

@@ -1,11 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Portal, Content as Content2, Root as Root2, Trigger } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
 
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-  PopoverPrimitive.Content,
+const Popover = Root2;
+const PopoverTrigger = Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  Content2,
   {
     ref,
     align,
@@ -16,7 +17,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     ),
     ...props
   }
-)));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+) }));
+PopoverContent.displayName = Content2.displayName;
 
 export { Popover, PopoverContent, PopoverTrigger };

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,21 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { Root, Viewport, Corner, ScrollAreaScrollbar, ScrollAreaThumb } from '../../node_modules/@radix-ui/react-scroll-area/dist/index.js';
 
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  ScrollAreaPrimitive.Root,
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]" }, children),
-  /* @__PURE__ */ React.createElement(ScrollBar, null),
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(Corner, {})
+    ]
+  }
 ));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
+ScrollArea.displayName = Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaScrollbar,
   {
     ref,
     orientation,
@@ -25,10 +28,10 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
       orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     ),
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollBar.displayName = ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };