@eztrak/shared 0.15.3 → 0.16.0

package/dist/components/index.js

@@ -31,11 +31,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   ActionMenuItem: () => ActionMenuItem,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  Card: () => Card,
   CardSkeleton: () => CardSkeleton,
   CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
   DropdownFilter: () => DropdownFilter,
   EztrakTabs: () => EztrakTabs,
+  Header: () => Header,
   Loader: () => Loader,
   Modal: () => Modal,
   PopupCellRenderer: () => PopupCellRenderer,
@@ -48,6 +52,7 @@ __export(components_exports, {
   ResetFiltersButton: () => ResetFiltersButton,
   RowActions: () => RowActions,
   SearchInput: () => SearchInput,
+  Sidebar: () => Sidebar,
   TableErrorBoundary: () => TableErrorBoundary,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   ToolTip: () => ToolTip,
@@ -1294,8 +1299,473 @@ function Modal({
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
 
-// src/components/skeleton/CardSkeleton.tsx
+// src/components/button/Button.tsx
+var import_react5 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var BASE_STYLES2 = "flex gap-1 items-center font-medium text-sm px-5 py-3 rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+var VARIANTS2 = {
+  primary: "bg-white text-secondary border-secondary hover:bg-lightGray hover:text-black",
+  "primary-outline": "bg-white text-primary-150 border-primary-150 hover:bg-primary-100 hover:text-white font-bold",
+  "primary-fill": "bg-primary-150 text-white border-primary hover:bg-primary/90",
+  secondary: "bg-primary-150 text-white border-primary hover:bg-primary/90",
+  danger: "bg-red-600 text-white border-red-600 hover:bg-red-700",
+  outline: "bg-white text-primary border-primary hover:bg-primary/10",
+  ghost: "bg-transparent text-secondary border-transparent hover:bg-primary/10 p-2",
+  inline: "bg-transparent text-gray-500 border-none hover:text-gray-600 underline shadow-none p-0 m-0"
+};
+var SIZES = {
+  sm: "px-3 py-2 text-xs",
+  md: "px-5 py-3 text-sm",
+  lg: "px-6 py-4 text-base"
+};
+var Button = (0, import_react5.forwardRef)(
+  ({
+    children,
+    className = "",
+    type = "button",
+    onClick,
+    disabled = false,
+    variant = "primary",
+    size = "md",
+    ...props
+  }, ref) => {
+    const variantStyles = VARIANTS2[variant] || VARIANTS2.primary;
+    const sizeStyles = SIZES[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        ref,
+        type,
+        className: cn(
+          BASE_STYLES2,
+          variantStyles,
+          size !== "md" && sizeStyles,
+          className
+        ),
+        onClick,
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/card/Card.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Card({
+  title,
+  content,
+  icon,
+  onClick,
+  containerClassName = "shadow p-6",
+  iconClassName = "",
+  titleClassName = "",
+  contentClassName = "",
+  cardBodyClassName = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(
+        "transform transition duration-300 cursor-pointer select-none",
+        containerClassName
+      ),
+      onClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex space-x-4", cardBodyClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-primary text-3xl", iconClassName), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: cn("font-semibold text-lg text-primary", titleClassName), children: title }),
+          content != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn("text-sm text-secondary", contentClassName), children: content })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/header/Header.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Header({
+  title = "Header",
+  className = "p-2 gap-2 flex-col",
+  containerClass = "",
+  breadcrumbs = "",
+  titleStyle = "text-4xl h-fit font-bold",
+  breadcrumbsStyle = "text-sm",
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "title-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: titleStyle, children: title }),
+      breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `breadcrumbs-wraper ${breadcrumbsStyle}`, children: breadcrumbs })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex flex-row justify-between items-center ${containerClass}`, children })
+  ] });
+}
+
+// src/components/breadcrumbs/Breadcrumbs.tsx
+var import_react6 = require("react");
+var import_react_router_dom5 = require("react-router-dom");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var INACTIVE_LINK_CLASS = "inline-flex items-center justify-center text-[#5D6D7F] bg-white px-4 py-2 rounded-lg transition-colors duration-300 hover:text-[#516378]";
+function asTitleMap(customTitles) {
+  if (Object.prototype.toString.call(customTitles) !== "[object Object]") {
+    return {};
+  }
+  return customTitles;
+}
+function findRoute(pathname, routes, parentPath = "") {
+  for (const route of routes) {
+    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, "/");
+    if (fullPath === pathname) {
+      return route;
+    }
+    if (route.children) {
+      const childRoute = findRoute(pathname, route.children, fullPath);
+      if (childRoute) {
+        return childRoute;
+      }
+    }
+  }
+  return null;
+}
+function getLastParam(str) {
+  return str.endsWith("/") ? str.slice(0, -1).split("/").pop() : str.split("/").pop();
+}
+function Breadcrumbs({
+  routes = [],
+  containerClassName,
+  linkClassName = "",
+  separatorClassName = "",
+  separator = "/",
+  activeClassName = "font-bold whitespace-pre",
+  customTitles = {},
+  customIcons = {},
+  prefix,
+  suffix,
+  nonClickablePaths = []
+}) {
+  const location = (0, import_react_router_dom5.useLocation)();
+  const pathnames = location.pathname.split("/").filter((segment) => segment);
+  const titles = asTitleMap(customTitles);
+  const inactiveLinkClassName = cn(INACTIVE_LINK_CLASS, linkClassName);
+  const getTitle = (pathname) => {
+    const match = findRoute(pathname, routes);
+    if (match && match.title) {
+      return match.title;
+    }
+    const titleKeys = Object.keys(titles);
+    const paramMatch = pathname.split("/").find((segment) => titleKeys.includes(segment)) || "";
+    if (paramMatch && titles[paramMatch]) {
+      return titles[paramMatch];
+    }
+    const lastParamPath = getLastParam(pathname);
+    if (lastParamPath) {
+      return lastParamPath;
+    }
+    return pathname;
+  };
+  const getIcon = (pathname) => {
+    const iconKeys = Object.keys(customIcons);
+    const matchedSegment = pathname.split("/").find((segment) => iconKeys.includes(segment));
+    if (matchedSegment && customIcons[matchedSegment]) {
+      return customIcons[matchedSegment];
+    }
+    return null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-row gap-2 items-center text-sm text-secondary",
+        containerClassName
+      ),
+      children: [
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-prefix", children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_router_dom5.Link, { to: "/", className: inactiveLinkClassName, children: [
+          customIcons.home && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1", children: customIcons.home }),
+          titles.home || "Home"
+        ] }),
+        pathnames.map((segment, index) => {
+          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+          const isLast = index === pathnames.length - 1;
+          const title = getTitle(to);
+          const icon = getIcon(to);
+          const isNonClickable = nonClickablePaths.some(
+            (token) => to.includes(token) || segment === token
+          );
+          const crumb = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1", children: icon }),
+            title
+          ] });
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: separatorClassName, children: separator }),
+            isLast || isNonClickable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: isLast ? activeClassName : linkClassName, children: crumb }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_router_dom5.Link, { to, className: inactiveLinkClassName, children: crumb })
+          ] }, to);
+        }),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix })
+      ]
+    }
+  );
+}
+
+// src/components/sidebar/Sidebar.tsx
+var import_react8 = require("react");
+var import_react_router_dom6 = require("react-router-dom");
+
+// src/components/tooltip/ToolTip.tsx
+var import_react7 = require("react");
+var import_react_tooltip = require("react-tooltip");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var defaultTooltipStyle = {
+  color: "#fff",
+  borderRadius: "5px",
+  zIndex: 999,
+  textAlign: "justify",
+  maxWidth: "300px",
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  overflowWrap: "break-word"
+};
+function ToolTip({
+  text = "tool tip",
+  placement = "top",
+  delayShow,
+  delayHide,
+  className,
+  tooltipClassName,
+  tooltipStyle,
+  wrapperTabIndex,
+  disabled = false,
+  children
+}) {
+  const generatedId = (0, import_react7.useId)();
+  const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
+  const tooltipText = String(text ?? "");
+  if (disabled || !tooltipText) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "span",
+      {
+        className,
+        "data-tooltip-id": tooltipId,
+        "data-tooltip-content": tooltipText,
+        tabIndex: wrapperTabIndex,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_tooltip.Tooltip,
+      {
+        id: tooltipId,
+        place: placement,
+        positionStrategy: "fixed",
+        delayShow,
+        delayHide,
+        className: tooltipClassName,
+        style: { ...defaultTooltipStyle, ...tooltipStyle }
+      }
+    )
+  ] });
+}
+
+// src/components/sidebar/Sidebar.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Sidebar({
+  className,
+  sideCollapseWidth = "w-20",
+  sidebarWidth = "w-48",
+  header,
+  children,
+  footer,
+  items = [],
+  logoUrl = "",
+  logoAltText = "Logo",
+  collapseButtonText = "\u2B05\uFE0F Collapse",
+  expandButtonText = "\u27A1\uFE0F",
+  location: _location,
+  classNames = {},
+  onCollapseChange,
+  isCollapsed = false,
+  itemDropdownIcon = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\u25BC" }),
+  ...rest
+}) {
+  const location = (0, import_react_router_dom6.useLocation)();
+  const [collapsed, setCollapsed] = (0, import_react8.useState)(isCollapsed);
+  const [, setActiveLink] = (0, import_react8.useState)(location.pathname);
+  const [subItemsCollapsed, setSubItemsCollapsed] = (0, import_react8.useState)({});
+  (0, import_react8.useEffect)(() => {
+    if (onCollapseChange) {
+      onCollapseChange(collapsed);
+    }
+  }, [collapsed, onCollapseChange]);
+  (0, import_react8.useEffect)(() => {
+    setActiveLink(location.pathname);
+  }, [location]);
+  const toggleGroup = (group) => {
+    setSubItemsCollapsed((prevState) => ({
+      ...prevState,
+      [group]: !prevState[group]
+    }));
+  };
+  const isActive = (link) => {
+    return location.pathname.startsWith(link);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `flex flex-col h-screen overflow-hidden ${collapsed ? `${sideCollapseWidth} justify-center items-center collapsed` : `${sidebarWidth}`} transition-all duration-100 ${className ?? ""}`,
+      ...rest,
+      children: [
+        logoUrl && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center h-16 border-b border-gray-300",
+              classNames.logoSection
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logoUrl, alt: logoAltText, className: "h-10" })
+          }
+        ),
+        header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-between p-4 border-b border-gray-300", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: cn("flex-grow", classNames.navSection), children: items.map((item, index) => {
+          if (item.subItems) {
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              "div",
+              {
+                className: `my-2 ${item?.subItems && "has-sub-items"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "div",
+                    {
+                      onClick: () => toggleGroup(item.name),
+                      "data-sidebar-item": item.name,
+                      "data-tooltip-id": item.name,
+                      className: `flex cursor-pointer dropdown-title-wrapper ${classNames?.navItem ?? ""}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          ToolTip,
+                          {
+                            text: item.tooltip || item.name,
+                            placement: item.tooltipPlacement || "top",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames?.navItemText, children: item.icon }),
+                              !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames?.navItemText, children: item.name })
+                            ] })
+                          }
+                        ),
+                        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "span",
+                          {
+                            className: `transform transition-transform ${subItemsCollapsed[item.name] ? "rotate-180" : "rotate-0"}`,
+                            children: itemDropdownIcon
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  subItemsCollapsed[item.name] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("collapse-btn-wrapper", classNames.subItem), children: item.subItems.map((subItem, subIndex) => {
+                    if (subItem.component) {
+                      const SubItemComponent = subItem.component;
+                      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SubItemComponent, {}, `${index}-${subIndex}`);
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "div",
+                      {
+                        className: "w-full",
+                        "data-sidebar-item": subItem.name,
+                        "data-tooltip-id": subItem.name,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          ToolTip,
+                          {
+                            text: item.tooltip || item.name,
+                            placement: item.tooltipPlacement || "top",
+                            className: "block w-full",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                              import_react_router_dom6.Link,
+                              {
+                                to: subItem.link || "#",
+                                className: `flex ${classNames?.navItem ?? ""} ${isActive(subItem?.link ?? "") ? "active" : ""} ${item?.itemClassName}`,
+                                onClick: () => subItem.link && setActiveLink(subItem.link || ""),
+                                title: subItem.tooltip || subItem.name,
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                    "span",
+                                    {
+                                      className: classNames.navItemText ?? "text-orange-600",
+                                      children: subItem.icon
+                                    }
+                                  ),
+                                  !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText, children: subItem.name })
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      },
+                      `${index}-${subIndex}`
+                    );
+                  }) })
+                ]
+              },
+              index
+            );
+          }
+          if (item.component) {
+            const ItemComponent = item.component;
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemComponent, {}, index);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: "w-full",
+              "data-sidebar-item": item.name,
+              "data-tooltip-id": item.name,
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                ToolTip,
+                {
+                  text: item.tooltip || item.name,
+                  placement: item.tooltipPlacement || "top",
+                  className: "block w-full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    import_react_router_dom6.Link,
+                    {
+                      to: item.link || "#",
+                      className: `flex ${classNames?.navItem ?? ""} ${isActive(item.link || "") ? "active" : ""} ${item?.itemClassName}`,
+                      onClick: () => setActiveLink(item.link || ""),
+                      title: item.tooltip || item.name,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText ?? "text-orange-600", children: item.icon }),
+                        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText, children: item.name })
+                      ]
+                    }
+                  )
+                }
+              )
+            },
+            index
+          );
+        }) }),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            onClick: () => setCollapsed(!collapsed),
+            className: cn("", classNames.collapseButton) ?? "p-4 border-t border-gray-300",
+            children: collapsed ? expandButtonText : collapseButtonText
+          }
+        ),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classNames?.footer ?? "p-4 border-t border-gray-300", children: footer })
+      ]
+    }
+  );
+}
+
+// src/components/skeleton/CardSkeleton.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
 function shouldShowAvatar(variant, showAvatar) {
   return showAvatar ?? variant === "profile";
@@ -1304,7 +1774,7 @@ function shouldShowImage(variant, showImage) {
   return showImage ?? variant === "image";
 }
 function AvatarSkeleton({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "svg",
     {
       className: cn("w-10 h-10 text-gray-200 dark:text-gray-700", className),
@@ -1312,7 +1782,7 @@ function AvatarSkeleton({ className }) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 20 20",
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
     }
   );
 }
@@ -1321,7 +1791,7 @@ function SkeletonBlock({
   className,
   isFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: cn(
@@ -1353,14 +1823,14 @@ function CardSkeleton({
   const skeletons = Array.from({ length: Math.max(1, count) }, (_, index) => {
     const renderAvatar = shouldShowAvatar(variant, showAvatar);
     const renderImage = shouldShowImage(variant, showImage);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: cn("animate-pulse md:p-6 dark:border-gray-700", className),
         style: { animationDuration, ...style },
         ...props,
         children: [
-          renderImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          renderImage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: cn(
@@ -1369,9 +1839,9 @@ function CardSkeleton({
               )
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
-            renderAvatar ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarSkeleton, { className: avatarClassName }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
+            renderAvatar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AvatarSkeleton, { className: avatarClassName }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               SkeletonBlock,
               {
                 widthClass: lineWidths[lineIndex] ?? lineWidths[lineWidths.length - 1] ?? DEFAULT_LINE_WIDTHS[1],
@@ -1381,71 +1851,13 @@ function CardSkeleton({
               lineIndex
             )) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: srLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: srLabel })
         ]
       },
       index
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: skeletons });
-}
-
-// src/components/tooltip/ToolTip.tsx
-var import_react5 = require("react");
-var import_react_tooltip = require("react-tooltip");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var defaultTooltipStyle = {
-  color: "#fff",
-  borderRadius: "5px",
-  zIndex: 999,
-  textAlign: "justify",
-  maxWidth: "300px",
-  whiteSpace: "pre-wrap",
-  wordWrap: "break-word",
-  overflowWrap: "break-word"
-};
-function ToolTip({
-  text = "tool tip",
-  placement = "top",
-  delayShow,
-  delayHide,
-  className,
-  tooltipClassName,
-  tooltipStyle,
-  wrapperTabIndex,
-  disabled = false,
-  children
-}) {
-  const generatedId = (0, import_react5.useId)();
-  const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
-  const tooltipText = String(text ?? "");
-  if (disabled || !tooltipText) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className, children });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "span",
-      {
-        className,
-        "data-tooltip-id": tooltipId,
-        "data-tooltip-content": tooltipText,
-        tabIndex: wrapperTabIndex,
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_tooltip.Tooltip,
-      {
-        id: tooltipId,
-        place: placement,
-        positionStrategy: "fixed",
-        delayShow,
-        delayHide,
-        className: tooltipClassName,
-        style: { ...defaultTooltipStyle, ...tooltipStyle }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: skeletons });
 }
 
 // src/utils/helpers.ts
@@ -1477,7 +1889,7 @@ var toDateInputValue = (date) => {
 };
 
 // src/components/tooltip/TooltipText.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function TooltipText({
   text = "",
   maxLength = 20,
@@ -1497,7 +1909,7 @@ function TooltipText({
   const displayText = truncateText(fullText, maxLength);
   const isTruncated = displayText !== fullText;
   const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     ToolTip,
     {
       text: fullText,
@@ -1509,17 +1921,17 @@ function TooltipText({
       tooltipStyle,
       wrapperTabIndex: tooltipDisabled ? void 0 : 0,
       disabled: tooltipDisabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
     }
   );
 }
 
 // src/components/cell-editor/CustomCellEditor.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ButtonSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "svg",
     {
       className: "animate-spin",
@@ -1529,7 +1941,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "circle",
           {
             cx: "12",
@@ -1540,7 +1952,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1562,7 +1974,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = (0, import_react6.forwardRef)(
+var CustomCellEditor = (0, import_react9.forwardRef)(
   ({
     value: initialValue,
     name,
@@ -1587,11 +1999,11 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
     cancelButtonClassName
   }, ref) => {
     const normalizedInitial = normalizeInitialValue(initialValue, inputType);
-    const [value, setValue] = (0, import_react6.useState)(normalizedInitial);
-    const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-    const inputRef = (0, import_react6.useRef)(null);
-    const selectRef = (0, import_react6.useRef)(null);
-    const normalizedOptions = (0, import_react6.useMemo)(() => {
+    const [value, setValue] = (0, import_react9.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+    const inputRef = (0, import_react9.useRef)(null);
+    const selectRef = (0, import_react9.useRef)(null);
+    const normalizedOptions = (0, import_react9.useMemo)(() => {
       if (customOptions && customOptions.length > 0) {
         return customOptions.map((opt) => ({
           value: String(opt[valueKey] ?? ""),
@@ -1601,13 +2013,13 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
       return dropdownOptions;
     }, [customOptions, dropdownOptions, valueKey, labelKey]);
     const isDropdown = inputType === "dropdown" || normalizedOptions.length > 0;
-    (0, import_react6.useImperativeHandle)(ref, () => ({
+    (0, import_react9.useImperativeHandle)(ref, () => ({
       getValue: () => value,
       isCancelBeforeStart: () => false,
       isCancelAfterEnd: () => false,
       isPopup: () => true
     }));
-    (0, import_react6.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (isDropdown) {
         selectRef.current?.focus();
         return;
@@ -1676,7 +2088,7 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
     const defaultInputClass = "w-48 px-2 py-1 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-400";
     const defaultSaveBtnClass = "px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600 disabled:opacity-50 whitespace-nowrap shrink-0";
     const defaultCancelBtnClass = "px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 disabled:opacity-50 whitespace-nowrap shrink-0";
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: cn(
@@ -1685,7 +2097,7 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
         ),
         style: containerStyle,
         children: [
-          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "select",
             {
               ref: selectRef,
@@ -1695,11 +2107,11 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
               className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
-                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               ref: inputRef,
@@ -1712,7 +2124,7 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -1721,10 +2133,10 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -1744,10 +2156,10 @@ var CustomCellEditor = (0, import_react6.forwardRef)(
 CustomCellEditor.displayName = "CustomCellEditor";
 
 // src/components/popup-cell-renderer/PopupCellRenderer.tsx
-var import_react7 = require("react");
-var import_react8 = __toESM(require("@tippyjs/react"));
+var import_react10 = require("react");
+var import_react11 = __toESM(require("@tippyjs/react"));
 var import_bi = require("react-icons/bi");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PopupCellRenderer({
   dropDownContent,
   actionIcon: ActionIcon = import_bi.BiDotsVerticalRounded,
@@ -1761,8 +2173,8 @@ function PopupCellRenderer({
   ariaLabel = "Row actions",
   openOnHover = false
 }) {
-  const [visible, setVisible] = (0, import_react7.useState)(false);
-  const instanceRef = (0, import_react7.useRef)(null);
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const instanceRef = (0, import_react10.useRef)(null);
   const show = () => setVisible(true);
   const hide = () => {
     setVisible(false);
@@ -1782,8 +2194,8 @@ function PopupCellRenderer({
     visible,
     onClickOutside: hide
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex h-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react8.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react11.default,
     {
       content,
       allowHTML: true,
@@ -1800,7 +2212,7 @@ function PopupCellRenderer({
       },
       ...hoverOrClickProps,
       ...tippyProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "button",
         {
           type: "button",
@@ -1812,7 +2224,7 @@ function PopupCellRenderer({
           "aria-label": ariaLabel,
           children: [
             !hideTitle && title,
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionIcon, { "aria-hidden": true })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ActionIcon, { "aria-hidden": true })
           ]
         }
       )
@@ -1840,7 +2252,7 @@ var ROW_ACTION_PRESETS = {
 };
 
 // src/components/row-actions/ActionMenuItem.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ActionMenuItem({
   label,
   icon: Icon,
@@ -1861,7 +2273,7 @@ function ActionMenuItem({
   onClick
 }) {
   const tooltipText = tooltip ?? label;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     ToolTip,
     {
       text: tooltipText,
@@ -1872,7 +2284,7 @@ function ActionMenuItem({
       tooltipClassName,
       tooltipStyle: { ...ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE, ...tooltipStyle },
       className: showLabel ? "block w-full" : "inline-flex",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "button",
         {
           type: "button",
@@ -1892,7 +2304,7 @@ function ActionMenuItem({
             className
           ),
           children: [
-            Icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               Icon,
               {
                 className: cn("shrink-0", iconClassName),
@@ -1900,7 +2312,7 @@ function ActionMenuItem({
                 size: iconSize
               }
             ) : null,
-            showLabel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: labelClassName, children: label }) : null
+            showLabel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: labelClassName, children: label }) : null
           ]
         }
       )
@@ -1958,7 +2370,7 @@ function resolveActions(actions, data, hasPermission, presets) {
 }
 
 // src/components/row-actions/RowActions.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function runAction(action, data, hide, confirmFn = confirmationAlert) {
   if (!action.onClick) {
     if (action.closeOnClick) hide?.();
@@ -2012,7 +2424,7 @@ function RowActions({
   };
   const renderDefaultItem = (action, hide, showLabel = true) => {
     if (action.type === "divider") {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           role: "separator",
@@ -2022,9 +2434,9 @@ function RowActions({
       );
     }
     if (action.content) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: action.className, children: action.content }, action.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: action.className, children: action.content }, action.key);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ActionMenuItem,
       {
         label: action.label,
@@ -2051,15 +2463,15 @@ function RowActions({
   const renderItems = (hide, showLabel = true) => resolved.map((action) => {
     const defaultItem = renderDefaultItem(action, hide, showLabel);
     if (!renderItem) return defaultItem;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
   });
   if (mode === "inline") {
     const inlineItems = renderItems(void 0, false);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex h-full items-center justify-center gap-1", className), children: inlineItems });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex h-full items-center justify-center gap-1", className), children: inlineItems });
   }
   const triggerTooltipText = triggerTooltip === false ? void 0 : triggerTooltip;
   const buildMenu = (hide) => {
-    const defaultMenu = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    const defaultMenu = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: cn(
@@ -2078,14 +2490,14 @@ function RowActions({
     });
   };
   if (renderTrigger) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: renderTrigger({
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: renderTrigger({
       data,
       actions: resolved,
       hide: () => void 0,
       defaultMenu: buildMenu(() => void 0)
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     ToolTip,
     {
       text: triggerTooltipText,
@@ -2096,7 +2508,7 @@ function RowActions({
       tooltipClassName,
       tooltipStyle,
       className: "flex h-full items-center justify-center",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         PopupCellRenderer,
         {
           params: { data },
@@ -2115,9 +2527,9 @@ function RowActions({
 }
 
 // src/components/table-error-boundary/TableErrorBoundary.tsx
-var import_react9 = require("react");
+var import_react12 = require("react");
 var import_fa6 = require("react-icons/fa6");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -2128,13 +2540,13 @@ var TableErrorBoundary = ({
   className,
   minHeight = "280px"
 }) => {
-  const message = (0, import_react9.useMemo)(() => {
+  const message = (0, import_react12.useMemo)(() => {
     if (errorMessage) return errorMessage;
     if (error) return classifyError(error).userMessage;
     return "Unable to load table data. Please try again.";
   }, [error, errorMessage]);
   if (isLoading && !isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: cn(
@@ -2145,12 +2557,12 @@ var TableErrorBoundary = ({
         role: "status",
         "aria-live": "polite",
         "aria-busy": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { size: "40px" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, { size: "40px" })
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -2161,7 +2573,7 @@ var TableErrorBoundary = ({
         role: "alert",
         "aria-live": "assertive",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_fa6.FaTriangleExclamation,
             {
               className: "text-red-500",
@@ -2169,11 +2581,11 @@ var TableErrorBoundary = ({
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "max-w-md space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-gray-600", children: message })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "max-w-md space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-gray-600", children: message })
           ] }),
-          refetch && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          refetch && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "button",
             {
               type: "button",
@@ -2181,7 +2593,7 @@ var TableErrorBoundary = ({
               disabled: isLoading,
               className: "inline-flex items-center gap-2 rounded-lg bg-primary-150 px-4 py-2 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fa6.FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fa6.FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
                 isLoading ? "Retrying..." : "Try again"
               ]
             }
@@ -2190,16 +2602,20 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionMenuItem,
+  Breadcrumbs,
+  Button,
+  Card,
   CardSkeleton,
   CustomCellEditor,
   CustomPagination,
   DropdownFilter,
   EztrakTabs,
+  Header,
   Loader,
   Modal,
   PopupCellRenderer,
@@ -2212,6 +2628,7 @@ var TableErrorBoundary = ({
   ResetFiltersButton,
   RowActions,
   SearchInput,
+  Sidebar,
   TableErrorBoundary,
   TableLayoutToolbarControls,
   ToolTip,