lecom-ui 4.3.5 → 4.3.7

package/dist/components/DataTable/DataTable.js

@@ -1,4 +1,3 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useReactTable, flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
 import { Pagination } from '../Pagination/Pagination.js';
@@ -36,7 +35,7 @@ function DataTable({
     if (!pagination) {
       return null;
     }
-    return /* @__PURE__ */ jsx(Pagination, { ...pagination });
+    return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
   };
   const styleColumn = (meta, elem) => {
     if (elem === "td" && meta.truncate) {
@@ -107,87 +106,78 @@ function DataTable({
     document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
     return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
   }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  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",
       {
-        className: "bg-white rounded-[8px] p-2 transition-all duration-500",
-        style: { width: styleDataTableContainer().width },
-        children: /* @__PURE__ */ jsxs(ScrollArea, { type: "always", className: "p-2", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "transition-all duration-500",
-              style: { maxHeight: styleDataTableContainer().height },
-              children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: arrSkeleton.map((id) => /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  className: "w-full h-[25px] rounded-lg bg-grey-200"
-                },
-                id
-              )) }) : /* @__PURE__ */ jsxs("table", { id: "data-table", className: "w-full", children: [
-                /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-                  "th",
-                  {
-                    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"
-                    ),
-                    children: header.isPlaceholder ? null : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  },
-                  header.id
-                )) }, headerGroup.id)) }),
-                /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-                  "tr",
-                  {
-                    "data-state": onIsSelected?.(row) ? "selected" : "",
-                    className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100",
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
-                      "td",
-                      {
-                        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"
-                        ),
-                        children: flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )
-                      },
-                      cell.id
-                    ))
-                  },
-                  row.id
-                )) : /* @__PURE__ */ jsx("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100", children: /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    colSpan: columns.length,
-                    className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors bg-white",
-                    children: noResults ?? /* @__PURE__ */ jsx("div", { className: "text-center", children: "-" })
-                  }
-                ) }) })
-              ] })
-            }
+        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
           ),
-          /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
-        ] })
-      }
-    ),
-    hasPagination()
-  ] });
+          style: styleColumn(
+            header.column.columnDef.meta,
+            "th"
+          )
+        },
+        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());
 }
 DataTable.displayName = "DataTable";
 

package/dist/components/DataTable/DataTable.utils.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Typography } from '../Typography/Typography.js';
@@ -10,7 +10,7 @@ function buildHeaderSelect({
   checkedHeader,
   onCheckedHeaderChange
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     Checkbox,
     {
       checked: !!checkedHeader?.({ table, column }),
@@ -23,7 +23,7 @@ function buildCellSelect({
   checkedCell,
   onCheckedCellChange
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     Checkbox,
     {
       checked: !!checkedCell?.({ row }),
@@ -50,25 +50,23 @@ function buildColumns({
       }
       const hasSort = !!externalColumn.onSort;
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ React.createElement(
         "div",
         {
           className: clsx(
             "group flex items-center gap-1",
             hasSort && "hover:cursor-pointer"
           ),
-          onClick: () => externalColumn.onSort?.({ table, column }),
-          children: [
-            typeof externalColumn.title === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body-large-500", textColor: "text-grey-950", children: externalColumn.title }) : title,
-            hasSort && /* @__PURE__ */ jsx(
-              ArrowUpDown,
-              {
-                size: 16,
-                className: "text-grey-400 group-hover:text-grey-950"
-              }
-            )
-          ]
-        }
+          onClick: () => externalColumn.onSort?.({ table, column })
+        },
+        typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-500", textColor: "text-grey-950" }, externalColumn.title) : title,
+        hasSort && /* @__PURE__ */ React.createElement(
+          ArrowUpDown,
+          {
+            size: 16,
+            className: "text-grey-400 group-hover:text-grey-950"
+          }
+        )
       );
     },
     cell: ({ row }) => {
@@ -88,7 +86,7 @@ function buildColumns({
         }
         return externalColumn.render;
       }
-      return /* @__PURE__ */ jsx(Typography, { variant: "body-large-400", textColor: "text-grey-800", children: row.getValue(externalColumn.key) });
+      return /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-400", textColor: "text-grey-800" }, row.getValue(externalColumn.key));
     },
     meta: {
       width: externalColumn.width,

package/dist/components/Dialog/Dialog.js

@@ -1,4 +1,3 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { Overlay, Portal, Content, Close, Title, Description, Root, Trigger } from '../../node_modules/@radix-ui/react-dialog/dist/index.js';
@@ -8,7 +7,7 @@ const Dialog = Root;
 const DialogTrigger = Trigger;
 const DialogPortal = Portal;
 const DialogClose = Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Overlay,
   {
     ref,
@@ -20,32 +19,24 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 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" })
-        ] })
-      ]
-    }
-  )
-] }));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
+  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(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 = Content.displayName;
 const DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn(
@@ -59,7 +50,7 @@ DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn(
@@ -70,7 +61,7 @@ const DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Title,
   {
     ref,
@@ -82,7 +73,7 @@ const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Description,
   {
     ref,

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,4 +1,3 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 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';
@@ -12,7 +11,7 @@ const DropdownMenuGroup = Group2;
 const DropdownMenuPortal = Portal2;
 const DropdownMenuSub = Sub2;
 const DropdownMenuRadioGroup = RadioGroup2;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SubTrigger2,
   {
     ref,
@@ -21,15 +20,13 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
       inset && "pl-8",
       className
     ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
-    ]
-  }
+    ...props
+  },
+  children,
+  /* @__PURE__ */ React.createElement(ChevronRight, { className: "ml-auto" })
 ));
 DropdownMenuSubTrigger.displayName = SubTrigger2.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SubContent2,
   {
     ref,
@@ -41,7 +38,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = SubContent2.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal2, { children: /* @__PURE__ */ jsx(
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(Portal2, null, /* @__PURE__ */ React.createElement(
   Content2,
   {
     ref,
@@ -52,9 +49,9 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     ),
     ...props
   }
-) }));
+)));
 DropdownMenuContent.displayName = Content2.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Item2,
   {
     ref,
@@ -67,7 +64,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = Item2.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React.createElement(
   CheckboxItem2,
   {
     ref,
@@ -76,15 +73,13 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
       className
     ),
     checked,
-    ...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
-    ]
-  }
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React.createElement(ItemIndicator2, null, /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }))),
+  children
 ));
 DropdownMenuCheckboxItem.displayName = CheckboxItem2.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
   RadioItem2,
   {
     ref,
@@ -92,15 +87,13 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
       "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,
-    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
-    ]
-  }
+    ...props
+  },
+  /* @__PURE__ */ React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React.createElement(ItemIndicator2, null, /* @__PURE__ */ React.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
+  children
 ));
 DropdownMenuRadioItem.displayName = RadioItem2.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Label2,
   {
     ref,
@@ -113,7 +106,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = Label2.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Separator2,
   {
     ref,
@@ -125,7 +118,7 @@ DropdownMenuSeparator.displayName = Separator2.displayName;
 const DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   "span",
   {
     className: cn("ml-auto text-xs tracking-widest opacity-60", className),

package/dist/components/ErrorEmptyDisplay/ErrorEmptyDisplay.js

@@ -1,4 +1,3 @@
-import { jsxs } from 'react/jsx-runtime';
 import { cn } from '../../lib/utils.js';
 
 const ErrorEmptyDisplay = ({
@@ -13,7 +12,7 @@ const ErrorEmptyDisplay = ({
   if (render) {
     return render;
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       id: "error-empty-display",
@@ -21,25 +20,21 @@ const ErrorEmptyDisplay = ({
       className: cn(
         "flex flex-col justify-center items-center space-y-8 p-6",
         className
-      ),
-      children: [
-        image,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-col items-center justify-center space-y-2",
-              classContent
-            ),
-            children: [
-              title,
-              description,
-              footer
-            ]
-          }
+      )
+    },
+    image,
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center space-y-2",
+          classContent
         )
-      ]
-    }
+      },
+      title,
+      description,
+      footer
+    )
   );
 };
 ErrorEmptyDisplay.displayName = "ErrorEmptyDisplay";

package/dist/components/Header/Header.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { Typography } from '../Typography/Typography.js';
 import { cn } from '../../lib/utils.js';
 import { cva } from '../../node_modules/class-variance-authority/dist/index.js';
@@ -54,55 +54,39 @@ const Header = ({
       }
     };
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     "header",
     {
       className: cn(headerVariants({ className }), ""),
       style: { backgroundColor: customStyles.bgColor },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, 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 })
-        ] })
-      ]
-    }
+      ...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 }))
   );
 };
 Header.displayName = "Header";