@optigrit/optigrit-ui 0.0.1 → 0.0.2

package/dist/components/index.js

@@ -1,8 +1,12 @@
 import {
   Input,
   Popover,
+  Ripple,
+  Show,
+  ShowWithAnimation,
+  Spinner,
   cn
-} from "../chunk-2LJSVQ6B.js";
+} from "../chunk-EUAKUHDG.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -12,81 +16,49 @@ import "../chunk-U65NGM6F.js";
 // src/components/Buttons/Button/index.tsx
 import {
   forwardRef,
-  useCallback
+  useCallback,
+  useRef
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var variantClasses = {
-  primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-  outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-  ghost: "hover:bg-accent hover:text-accent-foreground",
-  destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+  primary: "bg-primary text-white shadow-xl",
+  secondary: "bg-secondary text-white shadow-xl",
+  outline: "border border-primary/70 text-primary hover:border-primary hover:bg-primary/[0.04]",
+  ghost: "text-primary hover:bg-primary/[0.04]",
+  destructive: "bg-error text-white shadow-lg",
   link: "text-primary underline-offset-4 hover:underline"
 };
 var sizeClasses = {
-  xs: "text-xs px-2 py-1 gap-1",
-  sm: "text-sm px-3 py-1.5 gap-1.5",
-  md: "text-sm px-4 py-2 gap-2",
-  lg: "text-base px-5 py-2.5 gap-2.5",
-  xl: "text-lg px-6 py-3 gap-3"
+  xs: "h-7 px-[10px] text-[13px] gap-[8px]",
+  sm: "h-[30px] px-[10px] text-[13px] gap-[8px]",
+  md: "h-9 px-6 py-3 text-[14px] gap-[8px]",
+  lg: "h-11 px-[22px] text-[16px] gap-[8px]",
+  xl: "h-14 px-[22px] text-[16px] gap-[8px]"
 };
 var iconOnlySizeClasses = {
-  xs: "text-xs p-1",
-  sm: "text-sm p-1.5",
-  md: "text-sm p-2",
-  lg: "text-base p-2.5",
-  xl: "text-lg p-3"
+  xs: "text-xs h-7 w-7",
+  sm: "text-sm h-9 w-9",
+  md: "text-base h-11 w-11",
+  lg: "text-base h-13 w-13",
+  xl: "text-lg h-15 w-15"
 };
 var roundnessClasses = {
   none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
+  sm: "rounded-[2px]",
+  md: "rounded-[12px]",
+  lg: "rounded-[16px]",
   full: "rounded-full"
 };
-function Spinner({ className = "" }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `animate-spin ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
-      ]
-    }
-  );
-}
 function cn2(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var rippleColor = {
-  primary: "rgba(255, 255, 255, 0.45)",
-  secondary: "rgba(0, 0, 0, 0.12)",
-  outline: "rgba(0, 0, 0, 0.10)",
-  ghost: "rgba(0, 0, 0, 0.10)",
-  destructive: "rgba(255, 255, 255, 0.45)",
-  link: "rgba(0, 0, 0, 0.10)"
+  primary: "rgba(255, 255, 255, 0.3)",
+  secondary: "rgba(255, 255, 255, 0.3)",
+  outline: "rgba(25, 118, 210, 0.1)",
+  ghost: "rgba(25, 118, 210, 0.1)",
+  destructive: "rgba(255, 255, 255, 0.3)",
+  link: "rgba(25, 118, 210, 0.1)"
 };
 var Button = forwardRef(
   ({
@@ -106,43 +78,23 @@ var Button = forwardRef(
     onClick,
     ...rest
   }, ref) => {
+    const rippleRef = useRef(null);
     const isDisabled = disabled || loading;
     const spinnerSize = {
-      xs: "h-3 w-3",
-      sm: "h-3.5 w-3.5",
-      md: "h-4 w-4",
-      lg: "h-5 w-5",
-      xl: "h-5 w-5"
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 20,
+      xl: 24
     };
     const handleClick = useCallback(
       (e) => {
-        if (!disableRipple) {
-          const button = e.currentTarget;
-          const rect = button.getBoundingClientRect();
-          const diameter = Math.max(button.clientWidth, button.clientHeight);
-          const radius = diameter / 2;
-          const circle = document.createElement("span");
-          circle.style.position = "absolute";
-          circle.style.width = `${diameter}px`;
-          circle.style.height = `${diameter}px`;
-          circle.style.left = `${e.clientX - rect.left - radius}px`;
-          circle.style.top = `${e.clientY - rect.top - radius}px`;
-          circle.style.borderRadius = "9999px";
-          circle.style.pointerEvents = "none";
-          circle.style.backgroundColor = rippleColor[variant];
-          button.appendChild(circle);
-          const anim = circle.animate(
-            [
-              { transform: "scale(0)", opacity: "1" },
-              { transform: "scale(4)", opacity: "0" }
-            ],
-            { duration: 600, easing: "linear" }
-          );
-          anim.onfinish = () => circle.remove();
+        if (!disableRipple && !isDisabled) {
+          rippleRef.current?.addRipple(e);
         }
         onClick?.(e);
       },
-      [disableRipple, variant, onClick]
+      [disableRipple, isDisabled, onClick]
     );
     return /* @__PURE__ */ jsxs(
       "button",
@@ -163,10 +115,11 @@ var Button = forwardRef(
         ),
         ...rest,
         children: [
-          loading && /* @__PURE__ */ jsx(Spinner, { className: spinnerSize[size] }),
-          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: leftIcon }),
-          children,
-          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: rightIcon })
+          /* @__PURE__ */ jsx(Ripple, { ref: rippleRef, color: rippleColor[variant] }),
+          loading && /* @__PURE__ */ jsx(Spinner, { size: spinnerSize[size], color: "inherit" }),
+          !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 z-10", children: leftIcon }),
+          /* @__PURE__ */ jsx("span", { className: "z-10", children }),
+          !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 z-10", children: rightIcon })
         ]
       }
     );
@@ -176,7 +129,7 @@ Button.displayName = "Button";
 var Button_default = Button;
 
 // src/components/Feedback/Tooltip/Tooltip.tsx
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Tooltip(props) {
   const {
@@ -189,7 +142,7 @@ function Tooltip(props) {
     popoverProps = {},
     ...containerProps
   } = props;
-  const container = useRef(null);
+  const container = useRef2(null);
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs2(
     "div",
@@ -237,7 +190,7 @@ function Tooltip(props) {
 }
 
 // src/components/Forms/InputField/InputField.tsx
-import { useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useLayoutEffect, useRef as useRef3, useState as useState2 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function InputField(props) {
   const {
@@ -247,7 +200,7 @@ function InputField(props) {
     errorColor = "rgb(240, 70, 70)",
     ...inputProps
   } = props;
-  const initRef = useRef2({ isUserTyped: false });
+  const initRef = useRef3({ isUserTyped: false });
   const [error, setError] = useState2("");
   function handleError(value) {
     if (!initRef.current.isUserTyped) return;
@@ -296,7 +249,7 @@ function InputField(props) {
 }
 
 // src/components/Forms/Select/index.tsx
-import { Fragment, useRef as useRef3, useState as useState3 } from "react";
+import { Fragment, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Select(props) {
   const {
@@ -305,8 +258,8 @@ function Select(props) {
     optionsPosition = "bottom-start",
     ...inputProps
   } = props;
-  const container = useRef3(null);
-  const optionsContainer = useRef3(null);
+  const container = useRef4(null);
+  const optionsContainer = useRef4(null);
   const [isOpen, setIsOpen] = useState3(false);
   const [activeOption, setActiveOption] = useState3("");
   useKeyboardShortcuts([
@@ -427,7 +380,7 @@ function Select(props) {
 }
 
 // src/components/Forms/MultiSelect/index.tsx
-import { Fragment as Fragment2, useRef as useRef4, useState as useState4 } from "react";
+import { Fragment as Fragment2, useRef as useRef5, useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function MultiSelect(props) {
   const {
@@ -439,8 +392,8 @@ function MultiSelect(props) {
     ...inputProps
   } = props;
   const labelMap = new Map(options.map((option) => [option.value, option.label]));
-  const container = useRef4(null);
-  const optionsContainer = useRef4(null);
+  const container = useRef5(null);
+  const optionsContainer = useRef5(null);
   const [isOpen, setIsOpen] = useState4(false);
   const [activeOption, setActiveOption] = useState4("");
   useKeyboardShortcuts([
@@ -566,10 +519,454 @@ function MultiSelect(props) {
     )
   ] });
 }
+
+// src/components/DataDisplay/Table/Table.tsx
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/components/DataDisplay/Table/TableContext.tsx
+import { createContext, useContext } from "react";
+var TableContext = createContext({
+  size: "medium",
+  stickyHeader: false
+});
+var useTableContext = () => useContext(TableContext);
+
+// src/components/DataDisplay/Table/Table.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Table = forwardRef2(
+  ({ className = "", children, stickyHeader = false, size = "medium", ...props }, ref) => {
+    const value = useMemo(() => ({ size, stickyHeader }), [size, stickyHeader]);
+    return /* @__PURE__ */ jsx6(TableContext.Provider, { value, children: /* @__PURE__ */ jsx6(
+      "table",
+      {
+        ref,
+        className: `w-full caption-bottom text-sm border-collapse ${stickyHeader ? "relative" : ""} ${className}`,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Table.displayName = "Table";
+var Table_default = Table;
+
+// src/components/DataDisplay/Table/TableBody.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TableBody = forwardRef3(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "tbody",
+      {
+        ref,
+        className: `[&_tr:last-child]:border-0 ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;
+
+// src/components/DataDisplay/Table/TableCell.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TableCell = forwardRef4(
+  ({ className = "", align = "left", padding, variant, component, children, ...props }, ref) => {
+    const { size, stickyHeader } = useTableContext();
+    const isHead = variant === "head";
+    const Component = component || (isHead ? "th" : "td");
+    const alignClasses = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify",
+      inherit: "text-inherit"
+    };
+    const paddingClasses = {
+      normal: size === "small" ? "p-2" : "p-4",
+      none: "p-0",
+      checkbox: "p-0 w-[48px] text-center"
+    };
+    const effectivePadding = padding || "normal";
+    return /* @__PURE__ */ jsx8(
+      Component,
+      {
+        ref,
+        className: `align-middle transition-colors [&:has([role=checkbox])]:pr-0 ${isHead ? "font-semibold text-slate-700 bg-slate-50" : "text-slate-600"} ${stickyHeader && isHead ? "sticky top-0 z-10 shadow-[inset_0_-1px_0_rgba(226,232,240,1)]" : ""} ${alignClasses[align]} ${paddingClasses[effectivePadding]} ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCell_default = TableCell;
+
+// src/components/DataDisplay/Table/TableContainer.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TableContainer = forwardRef5(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ref,
+        className: `w-full overflow-auto rounded-lg border border-slate-200 bg-white shadow-sm ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableContainer.displayName = "TableContainer";
+var TableContainer_default = TableContainer;
+
+// src/components/DataDisplay/Table/TableFooter.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TableFooter = forwardRef6(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx10(
+      "tfoot",
+      {
+        ref,
+        className: `border-t bg-slate-50/50 font-medium [&>tr]:last:border-b-0 ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableFooter_default = TableFooter;
+
+// src/components/DataDisplay/Table/TableHead.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TableHead = forwardRef7(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      "thead",
+      {
+        ref,
+        className: `[&_tr]:border-b bg-slate-50/50 ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableHead_default = TableHead;
+
+// src/components/DataDisplay/Table/TableRow.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TableRow = forwardRef8(
+  ({ className = "", children, hover = false, selected = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "tr",
+      {
+        ref,
+        className: `border-b transition-colors ${hover ? "hover:bg-slate-100/50" : ""} ${selected ? "bg-slate-100/80" : ""} ${className}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableRow.displayName = "TableRow";
+var TableRow_default = TableRow;
+
+// src/components/Overlay/Dialog/Dialog.tsx
+import { createPortal } from "react-dom";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Dialog(props) {
+  const {
+    open,
+    onClose,
+    children,
+    className,
+    size = "auto",
+    closeOnEsc = true,
+    backdropClose = true,
+    animationDuration = 220
+  } = props;
+  const sizeClasses2 = {
+    xs: "max-w-xs",
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full",
+    auto: "max-w-lg"
+  };
+  useKeyboardShortcuts([
+    {
+      key: "escape",
+      options: { preventDefault: true },
+      callback: () => {
+        if (closeOnEsc && open && onClose) onClose();
+      }
+    }
+  ]);
+  if (typeof window === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx13(
+      ShowWithAnimation,
+      {
+        when: open,
+        removeOnHide: true,
+        containerProps: {
+          style: { position: "fixed" },
+          className: "fixed inset-0 w-screen h-screen flex items-center justify-center"
+        },
+        animationDuration: 1.5 * animationDuration,
+        animationStyle: {
+          children: {
+            from: {
+              opacity: 0,
+              backdropFilter: "blur(0)"
+            },
+            active: {
+              opacity: 1,
+              backdropFilter: "blur(10px)"
+            }
+          }
+        },
+        className: "w-full h-full bg-[#0004] flex items-center justify-center",
+        onClick: (event) => {
+          if (backdropClose && event.target === event.currentTarget) {
+            onClose?.();
+          }
+        },
+        children: /* @__PURE__ */ jsx13(
+          ShowWithAnimation,
+          {
+            when: open,
+            animationDuration,
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "relative z-10 w-full mx-4 bg-white rounded-lg shadow-lg overflow-hidden",
+              sizeClasses2[size],
+              className
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Overlay/Dialog/DialogHeader.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function DialogHeader(props) {
+  const { title, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs6("div", { ...rest, className: "px-6 py-4 border-b", children: [
+    /* @__PURE__ */ jsx14(Show, { when: !!title, children: /* @__PURE__ */ jsx14("h1", { className: "text-lg font-medium", children: title }) }),
+    children
+  ] });
+}
+
+// src/components/Overlay/Dialog/DialogFooter.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function DialogFooter(props) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      ...props,
+      className: cn("px-6 py-4 border-t flex items-center justify-end", props.className)
+    }
+  );
+}
+
+// src/components/Overlay/Dialog/DialogContent.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function DialogContent(props) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ...props,
+      className: cn("p-6", props.className)
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/Drawer.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Drawer(props) {
+  const {
+    open,
+    onClose,
+    children,
+    rounded = 0,
+    side = "right",
+    closeOnEsc = true,
+    size: _size = "md",
+    backdropClose = true,
+    animationDuration = 220
+  } = props;
+  useKeyboardShortcuts([
+    {
+      key: "escape",
+      options: { preventDefault: true },
+      callback: () => {
+        if (closeOnEsc && open && onClose) onClose?.();
+      }
+    }
+  ]);
+  if (typeof window === "undefined") return null;
+  const isHorizontal = side === "left" || side === "right";
+  const size = (() => {
+    if (typeof _size === "number") return _size + "px";
+    return {
+      "xs": "20",
+      "sm": "35",
+      "md": "50",
+      "lg": "75",
+      "xl": "90"
+    }[_size] + (isHorizontal ? "vw" : "vh");
+  })();
+  return createPortal2(
+    /* @__PURE__ */ jsx17(
+      ShowWithAnimation,
+      {
+        when: open,
+        removeOnHide: true,
+        containerProps: {
+          style: { position: "fixed" },
+          className: `fixed inset-0 w-screen h-screen flex`
+        },
+        animationDuration: 1.5 * animationDuration,
+        animationStyle: {
+          children: {
+            from: { opacity: 0, backdropFilter: "blur(0)" },
+            active: { opacity: 1, backdropFilter: "blur(8px)" }
+          }
+        },
+        className: cn(
+          "w-full h-full bg-[#0004] flex",
+          {
+            "left": "justify-start items-center",
+            "right": "justify-end items-center ",
+            "top": "justify-center items-start",
+            "bottom": "justify-center items-end"
+          }[side]
+        ),
+        onClick: (event) => {
+          if (backdropClose && event.target === event.currentTarget) {
+            onClose?.();
+          }
+        },
+        children: /* @__PURE__ */ jsx17(
+          ShowWithAnimation,
+          {
+            when: open,
+            role: "dialog",
+            "aria-modal": "true",
+            containerProps: {
+              className: "w-full h-full",
+              style: {
+                maxWidth: isHorizontal ? size : "100%",
+                maxHeight: !isHorizontal ? size : "100%"
+              }
+            },
+            className: "w-full h-full bg-white flex flex-col overflow-hidden",
+            style: {
+              borderRadius: {
+                left: `0 ${rounded}px ${rounded}px 0`,
+                right: `${rounded}px 0 0 ${rounded}px`,
+                top: `0 0 ${rounded}px ${rounded}px`,
+                bottom: `${rounded}px ${rounded}px 0 0`
+              }[side]
+            },
+            animationDuration,
+            animationStyle: {
+              children: {
+                active: { transform: "translateX(0) translateY(0)", opacity: 1 },
+                from: {
+                  opacity: 0,
+                  transform: {
+                    left: "translateX(-100%)",
+                    right: "translateX(100%)",
+                    top: "translateY(-100%)",
+                    bottom: "translateY(100%)"
+                  }[side]
+                }
+              }
+            },
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerContent.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function DrawerContent({ children, className, style }) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: cn("overflow-auto flex-1 p-4 relative hide-scrollbar", className),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerHeader.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function DrawerHeader({ children, className, style }) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: cn("sticky top-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-b", className),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/Overlay/Drawer/DrawerFooter.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function DrawerFooter({ children, className, style }) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: cn("sticky bottom-0 z-20 backdrop-blur-sm bg-white/60 px-4 py-3 border-t", className),
+      style,
+      children
+    }
+  );
+}
 export {
   Button_default as Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
   InputField,
   MultiSelect,
   Select,
+  Table_default as Table,
+  TableBody_default as TableBody,
+  TableCell_default as TableCell,
+  TableContainer_default as TableContainer,
+  TableFooter_default as TableFooter,
+  TableHead_default as TableHead,
+  TableRow_default as TableRow,
   Tooltip
 };