lecom-ui 4.1.8 → 4.2.0

package/dist/components/DataTable/DataTable.js

@@ -1,151 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
-import { Pagination } from '../Pagination/Pagination.js';
-import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
-import { Skeleton } from '../Skeleton/Skeleton.js';
-import { buildColumns } from './DataTable.utils.js';
+import { useReactTable, flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../Table/Table.js';
+import { getSortedRowModel, getCoreRowModel } from '../../node_modules/@tanstack/table-core/build/lib/index.js';
 
 function DataTable({
-  isLoading,
   columns,
   data,
-  noResults,
-  pagination,
-  vwDiff,
-  vhDiff,
-  onIsSelected
+  noResults
 }) {
   const [sorting, setSorting] = React.useState([]);
+  const [rowSelection, setRowSelection] = React.useState({});
   const table = useReactTable({
     data,
-    columns: buildColumns({ columns }),
+    columns,
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    onRowSelectionChange: setRowSelection,
     state: {
-      sorting
+      sorting,
+      rowSelection
     }
   });
-  const styleDataTableContainer = () => ({
-    width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
-    height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
-  });
-  const hasPagination = () => {
-    if (!pagination) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
-  };
-  const styleColumn = (meta, elem) => {
-    if (elem === "td" && meta.truncate) {
-      return {
-        width: meta.width,
-        overflow: "hidden",
-        maxWidth: "0",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      };
+  const getMetaStyle = (header) => {
+    const meta = header.column.columnDef.meta;
+    if (!meta) {
+      return {};
     }
-    return {
-      width: meta.width
-    };
+    return meta["style"] ?? {};
   };
-  const getFixed = (meta) => meta.fixed;
-  const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
-  React.useEffect(() => {
-    if (!isLoading) {
-      const listRows = document.querySelectorAll(`table#data-table tr`);
-      listRows.forEach((listRow, listRowIndex) => {
-        const rowsElem = listRow.querySelectorAll("[data-fixed]");
-        rowsElem.forEach((rowElem, rowElemIndex) => {
-          const beforeElem = rowsElem[rowElemIndex - 1];
-          const currentElem = rowElem;
-          const beforeElemWidth = beforeElem?.getBoundingClientRect()?.width ?? 0;
-          const beforeElemLeft = beforeElem?.style?.left ? Number(beforeElem.style.left.replace(/px/g, "")) : 0;
-          const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
-          const lastRow = listRows.length - 1 === listRowIndex;
-          const currentElemIsTh = currentElem.tagName === "TH";
-          const boxShadow = lastColumnFixed ? `#c9c9c9 -0.5px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset` : `#c9c9c9 0px ${lastRow ? "0px" : currentElemIsTh ? "-1.5px" : "-0.5px"} 0px inset`;
-          currentElem.style.position = "sticky";
-          currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
-          currentElem.style.boxShadow = boxShadow;
-        });
-      });
-    }
-  }, [isLoading]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "bg-white rounded-[8px] p-2 transition-all duration-500",
-      style: { width: styleDataTableContainer().width }
-    },
-    /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
-      "div",
+  return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[8px] py-0 px-2 pb-2", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: "[&_tr]:border-b-[1.5px] [&_tr]:border-grey-400", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+      TableHead,
       {
-        className: "transition-all duration-500",
-        style: { maxHeight: styleDataTableContainer().height }
-      },
-      isLoading ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
-        Skeleton,
-        {
-          key: id,
-          className: "w-full h-[25px] rounded-lg bg-grey-200"
-        }
-      ))) : /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
-        "th",
-        {
-          key: header.id,
-          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
-          "data-header": header.id,
-          "data-fixed": getFixed(
-            header.column.columnDef.meta
-          ),
-          style: styleColumn(
-            header.column.columnDef.meta,
-            "th"
-          )
-        },
-        header.isPlaceholder ? null : flexRender(
+        style: getMetaStyle(header),
+        children: header.isPlaceholder ? null : flexRender(
           header.column.columnDef.header,
           header.getContext()
         )
-      ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
-        "tr",
-        {
-          key: row.id,
-          "data-state": !!onIsSelected?.(row) ? "selected" : "",
-          className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
-        },
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
-          "td",
-          {
-            key: cell.id,
-            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
-            "data-column": cell.column.id,
-            "data-fixed": getFixed(
-              cell.column.columnDef.meta
-            ),
-            style: styleColumn(
-              cell.column.columnDef.meta,
-              "td"
-            )
-          },
-          flexRender(
-            cell.column.columnDef.cell,
-            cell.getContext()
-          )
-        ))
-      )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
-        "td",
-        {
-          colSpan: columns.length,
-          className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors bg-white"
-        },
-        noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
-      ))))
-    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
-  ), hasPagination());
+      },
+      header.id
+    )) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        "data-state": row.getIsSelected() && "selected",
+        className: "border-b-[0.5px] border-grey-400",
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: "py-0 h-10", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+      },
+      row.id
+    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, children: noResults ?? /* @__PURE__ */ jsx("div", { className: "text-center", children: "No results." }) }) }) })
+  ] }) });
 }
-DataTable.displayName = "DataTable";
 
 export { DataTable };

package/dist/components/Dialog/Dialog.js

@@ -1,14 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
+import { Overlay, Portal, Content, Close, Title, Description, Root, Trigger } from '../../node_modules/@radix-ui/react-dialog/dist/index.js';
+import X from '../../node_modules/lucide-react/dist/esm/icons/x.js';
 
-const Dialog = SheetPrimitive.Root;
-const DialogTrigger = SheetPrimitive.Trigger;
-const DialogPortal = SheetPrimitive.Portal;
-const DialogClose = SheetPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  SheetPrimitive.Overlay,
+const Dialog = Root;
+const DialogTrigger = Trigger;
+const DialogPortal = Portal;
+const DialogClose = Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Overlay,
   {
     ref,
     className: cn(
@@ -18,25 +19,33 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
     ...props
   }
 ));
-DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
-  SheetPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-      className
-    ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React.createElement(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" }, /* @__PURE__ */ React.createElement(X, { className: "h-4 w-4" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
-)));
-DialogContent.displayName = SheetPrimitive.Content.displayName;
+DialogOverlay.displayName = Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = Content.displayName;
 const DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -50,7 +59,7 @@ DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -61,8 +70,8 @@ const DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  SheetPrimitive.Title,
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Title,
   {
     ref,
     className: cn(
@@ -72,15 +81,15 @@ const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-DialogTitle.displayName = SheetPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  SheetPrimitive.Description,
+DialogTitle.displayName = Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Description,
   {
     ref,
     className: cn("text-sm text-muted-foreground", className),
     ...props
   }
 ));
-DialogDescription.displayName = SheetPrimitive.Description.displayName;
+DialogDescription.displayName = Description.displayName;
 
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,16 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle } from 'lucide-react';
+import { SubTrigger as SubTrigger2, SubContent as SubContent2, Portal as Portal2, Content as Content2, Item as Item2, CheckboxItem as CheckboxItem2, ItemIndicator as ItemIndicator2, RadioItem as RadioItem2, Label as Label2, Separator as Separator2, Root as Root2, Trigger, Group as Group2, Sub as Sub2, RadioGroup as RadioGroup2 } from '../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js';
+import ChevronRight from '../../node_modules/lucide-react/dist/esm/icons/chevron-right.js';
+import Check from '../../node_modules/lucide-react/dist/esm/icons/check.js';
+import Circle from '../../node_modules/lucide-react/dist/esm/icons/circle.js';
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.SubTrigger,
+const DropdownMenu = Root2;
+const DropdownMenuTrigger = Trigger;
+const DropdownMenuGroup = Group2;
+const DropdownMenuPortal = Portal2;
+const DropdownMenuSub = Sub2;
+const DropdownMenuRadioGroup = RadioGroup2;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SubTrigger2,
   {
     ref,
     className: cn(
@@ -18,14 +21,16 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
       inset && "pl-8",
       className
     ),
-    ...props
-  },
-  children,
-  /* @__PURE__ */ React.createElement(ChevronRight, { className: "ml-auto" })
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
+    ]
+  }
 ));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.SubContent,
+DropdownMenuSubTrigger.displayName = SubTrigger2.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SubContent2,
   {
     ref,
     className: cn(
@@ -35,9 +40,9 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     ...props
   }
 ));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.Content,
+DropdownMenuSubContent.displayName = SubContent2.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal2, { children: /* @__PURE__ */ jsx(
+  Content2,
   {
     ref,
     sideOffset,
@@ -47,10 +52,10 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     ),
     ...props
   }
-)));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.Item,
+) }));
+DropdownMenuContent.displayName = Content2.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Item2,
   {
     ref,
     className: cn(
@@ -61,9 +66,9 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
     ...props
   }
 ));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.CheckboxItem,
+DropdownMenuItem.displayName = Item2.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  CheckboxItem2,
   {
     ref,
     className: cn(
@@ -71,28 +76,32 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
       className
     ),
     checked,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }))),
-  children
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ItemIndicator2, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
 ));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.RadioItem,
+DropdownMenuCheckboxItem.displayName = CheckboxItem2.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  RadioItem2,
   {
     ref,
     className: cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
-  children
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ItemIndicator2, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
 ));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.Label,
+DropdownMenuRadioItem.displayName = RadioItem2.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Label2,
   {
     ref,
     className: cn(
@@ -103,20 +112,20 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
     ...props
   }
 ));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
-  DropdownMenuPrimitive.Separator,
+DropdownMenuLabel.displayName = Label2.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Separator2,
   {
     ref,
     className: cn("-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+DropdownMenuSeparator.displayName = Separator2.displayName;
 const DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "span",
   {
     className: cn("ml-auto text-xs tracking-widest opacity-60", className),

package/dist/components/Header/Header.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { cn } from '../../lib/utils.js';
-import { cva } from 'class-variance-authority';
-import { Menu } from 'lucide-react';
-import { colorLuminance } from 'use-color-luminance';
+import { cva } from '../../node_modules/class-variance-authority/dist/index.js';
+import { colorLuminance } from '../../node_modules/use-color-luminance/index.es.js';
 import { useSidebar } from '../Sidebar/Sidebar.js';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { HelpMenu } from './HelpMenu.js';
 import { ImgBrand } from './ImgBrand.js';
 import { ModulesMenu } from './ModulesMenu.js';
 import { SocialMenu } from './SocialMenu.js';
 import { UserMenu } from './UserMenu.js';
+import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
+import Menu from '../../node_modules/lucide-react/dist/esm/icons/menu.js';
 
 const headerVariants = cva(
   "w-full h-12 bg-blue-800 flex items-center justify-center gap-4 px-4",
@@ -54,39 +54,55 @@ const Header = ({
       }
     };
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "header",
     {
       className: cn(headerVariants({ className }), ""),
       style: { backgroundColor: customStyles.bgColor },
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(Tooltip, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      Menu,
-      {
-        className: "text-white transition-all duration-300 hover:cursor-pointer hover:opacity-70 shrink-0",
-        size: 32,
-        onClick: () => {
-          onOpenMenuChange?.();
-          toggleSidebar();
-        },
-        style: { color: customStyles.textColor }
-      }
-    )), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black", align: "start", side: "bottom" }, open ? t("header.collapseMenu") : t("header.expandMenu"))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center grow gap-24" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-12" }, /* @__PURE__ */ React.createElement(ImgBrand, { src: customImgSrc }), module && /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "heading-medium-600",
-        textColor: "text-white",
-        className: "border-l-2 border-white pl-2 max-md:hidden",
-        style: {
-          color: customStyles.textColor,
-          borderColor: customStyles.textColor
-        }
-      },
-      module
-    )), /* @__PURE__ */ React.createElement("div", { className: "max-md:hidden" }, extraContent && extraContent)),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(SocialMenu, { customStyles: getCustomStyles(), ...socialMenu }), /* @__PURE__ */ React.createElement(UserMenu, { customStyles: getCustomStyles(), ...userMenu }), /* @__PURE__ */ React.createElement(HelpMenu, { customStyles: getCustomStyles(), ...helpMenu }), /* @__PURE__ */ React.createElement(ModulesMenu, { customStyles: getCustomStyles(), ...modulesMenu }))
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Menu,
+            {
+              className: "text-white transition-all duration-300 hover:cursor-pointer hover:opacity-70 shrink-0",
+              size: 32,
+              onClick: () => {
+                onOpenMenuChange?.();
+                toggleSidebar();
+              },
+              style: { color: customStyles.textColor }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { color: "black", align: "start", side: "bottom", children: open ? t("header.collapseMenu") : t("header.expandMenu") })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center grow gap-24", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-12", children: [
+            /* @__PURE__ */ jsx(ImgBrand, { src: customImgSrc }),
+            module && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "heading-medium-600",
+                textColor: "text-white",
+                className: "border-l-2 border-white pl-2 max-md:hidden",
+                style: {
+                  color: customStyles.textColor,
+                  borderColor: customStyles.textColor
+                },
+                children: module
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-md:hidden", children: extraContent && extraContent })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(SocialMenu, { customStyles: getCustomStyles(), ...socialMenu }),
+          /* @__PURE__ */ jsx(UserMenu, { customStyles: getCustomStyles(), ...userMenu }),
+          /* @__PURE__ */ jsx(HelpMenu, { customStyles: getCustomStyles(), ...helpMenu }),
+          /* @__PURE__ */ jsx(ModulesMenu, { customStyles: getCustomStyles(), ...modulesMenu })
+        ] })
+      ]
+    }
   );
 };
 Header.displayName = "Header";