@dmsi/wedgekit-react 0.0.81 → 0.0.83

package/dist/components/{DataGrid.cjs → index.cjs}

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -57,21 +56,83 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/DataGrid.tsx
-var DataGrid_exports = {};
-__export(DataGrid_exports, {
-  DataGrid: () => DataGrid
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  DataCellHeader: () => DataCellHeader,
+  DataGrid: () => DataGrid,
+  DataGridCell: () => DataGridCell,
+  DragAlongCell: () => DragAlongCell,
+  DraggableCellHeader: () => DraggableCellHeader,
+  Icon: () => Icon,
+  Input: () => Input,
+  Label: () => Label,
+  Menu: () => Menu,
+  MenuOption: () => MenuOption,
+  Paragraph: () => Paragraph,
+  Search: () => Search,
+  Select: () => Select,
+  Subheader: () => Subheader,
+  Tooltip: () => Tooltip
 });
-module.exports = __toCommonJS(DataGrid_exports);
-var import_react13 = __toESM(require("react"), 1);
-var import_react_table = require("@tanstack/react-table");
-var import_react_virtual = require("@tanstack/react-virtual");
-var import_core = require("@dnd-kit/core");
-var import_sortable2 = require("@dnd-kit/sortable");
-var import_modifiers = require("@dnd-kit/modifiers");
+module.exports = __toCommonJS(components_exports);
 
-// src/components/Button.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
+// src/components/DataGridCell.tsx
+var import_sortable = require("@dnd-kit/sortable");
+
+// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
+var import_react = require("react");
+var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+
+// src/components/DataGridCell.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_react10 = require("react");
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -199,148 +260,9 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/Button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (_a) => {
-  var _b = _a, {
-    variant = "primary",
-    as = "button",
-    block,
-    leftIcon,
-    rightIcon,
-    className,
-    classNameLabel,
-    disabled = false,
-    children,
-    iconOnly = false,
-    colorClassName,
-    href,
-    id
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children",
-    "iconOnly",
-    "colorClassName",
-    "href",
-    "id"
-  ]);
-  const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-primary-normal border-background-action-primary-normal",
-    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
-    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
-    "active:bg-background-action-primary-active active:border-background-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-background-action-secondary-normal border-border-action-normal",
-    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
-  );
-  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx2.default)(
-    "bg-transparent border-transparent",
-    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-transparent border-transparent",
-    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
-  );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
-    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
-    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
-    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
-    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
-    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
-  );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-transparent border-transparent text-text-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
-  );
-  const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
-    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-    "flex-col",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx2.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = (0, import_clsx2.default)(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className
-  );
-  const labelClasses = (0, import_clsx2.default)(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = href ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      type: Element === "button" ? "button" : void 0,
-      className: buttonClasses
-    }, props), {
-      disabled,
-      href,
-      children: [
-        leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-// src/components/Checkbox.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-
 // src/components/Icon.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 function Icon(_a) {
   var _b = _a, {
     name,
@@ -353,10 +275,10 @@ function Icon(_a) {
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
-      className: (0, import_clsx3.default)(
+      className: (0, import_clsx2.default)(
         "icon",
         `icon-${size}`,
         // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
@@ -370,276 +292,53 @@ function Icon(_a) {
   );
 }
 
-// src/components/Paragraph.tsx
+// src/components/Search.tsx
+var import_react3 = require("react");
+
+// src/components/Input.tsx
+var import_react2 = require("react");
 var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Paragraph = (_a) => {
+
+// src/components/Label.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Label = (_a) => {
   var _b = _a, {
+    as = "span",
+    padded,
     className,
     color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
+    align,
     id
   } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
     "className",
     "color",
-    "padded",
     "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
     "id"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
-    }, props), {
-      className: (0, import_clsx4.default)(
-        typography.paragraph,
-        className,
-        padded && componentPaddingXUsingComponentGap,
+      id,
+      className: (0, import_clsx3.default)(
+        typography.label,
         align === "left" && "text-left",
         align === "center" && "text-center",
         align === "right" && "text-right",
-        tall && "!leading-6",
-        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
-      ),
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
       style: __spreadProps(__spreadValues({}, props.style), {
         color: color ? `var(--color-${color})` : void 0
-      }),
-      children
+      })
     })
   );
 };
-Paragraph.displayName = "Paragraph";
-
-// src/components/Checkbox.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Checkbox = (_a) => {
-  var _b = _a, {
-    label,
-    error,
-    disabled,
-    readOnly,
-    checked,
-    onChange,
-    indeterminate,
-    paragraphClassName,
-    id
-  } = _b, props = __objRest(_b, [
-    "label",
-    "error",
-    "disabled",
-    "readOnly",
-    "checked",
-    "onChange",
-    "indeterminate",
-    "paragraphClassName",
-    "id"
-  ]);
-  const selected = indeterminate || checked;
-  const normalClassName = (0, import_clsx5.default)(
-    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
-  );
-  const normalSelectedClassName = (0, import_clsx5.default)(
-    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
-  );
-  const errorClassName = (0, import_clsx5.default)(
-    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
-  );
-  const errorSelectedClassName = (0, import_clsx5.default)(
-    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
-  );
-  const disabledClassName = (0, import_clsx5.default)(
-    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
-  );
-  const readOnlyClassName = (0, import_clsx5.default)(
-    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
-  );
-  const checkColor = (0, import_clsx5.default)(
-    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
-    selected && disabled && "color-background-action-primary-disabled"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "label",
-    {
-      id,
-      htmlFor: id ? `${id}-input` : void 0,
-      className: (0, import_clsx5.default)(
-        "flex items-center",
-        componentGap,
-        (disabled || readOnly && error || readOnly) && "cursor-default",
-        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            __spreadValues({
-              id: id ? `${id}-input` : void 0,
-              type: "checkbox",
-              className: "sr-only peer",
-              disabled,
-              checked: selected,
-              onChange: handleOnChange,
-              "data-indeterminate": indeterminate
-            }, props)
-          ),
-          error && (readOnly || disabled) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx5.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
-            {
-              className: (0, import_clsx5.default)(
-                "size-6 border rounded-base",
-                "flex items-center justify-center",
-                baseTransition,
-                normalClassName,
-                normalSelectedClassName,
-                errorClassName,
-                errorSelectedClassName,
-                disabledClassName,
-                readOnlyClassName,
-                checkColor
-              ),
-              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close" }) })
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          Paragraph,
-          {
-            id: id ? `${id}-label` : void 0,
-            as: "span",
-            padded: true,
-            className: (0, import_clsx5.default)(
-              "text-nowrap",
-              disabled && !error && "!text-text-primary-disabled",
-              error && !disabled && !readOnly && "!text-text-primary-error",
-              paragraphClassName
-            ),
-            children: label
-          }
-        )
-      ]
-    }
-  );
-  function handleOnChange(e) {
-    if (disabled || readOnly || readOnly && error || !onChange) {
-      return;
-    }
-    onChange(e);
-  }
-};
-Checkbox.displayName = "Checkbox";
-
-// src/components/DataGridCell.tsx
-var import_sortable = require("@dnd-kit/sortable");
-
-// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
-var import_react = require("react");
-var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var CSS = /* @__PURE__ */ Object.freeze({
-  Translate: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        x,
-        y
-      } = transform;
-      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
-    }
-  },
-  Scale: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        scaleX,
-        scaleY
-      } = transform;
-      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
-    }
-  },
-  Transform: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
-    }
-  },
-  Transition: {
-    toString(_ref) {
-      let {
-        property,
-        duration,
-        easing
-      } = _ref;
-      return property + " " + duration + "ms " + easing;
-    }
-  }
-});
-
-// src/components/DataGridCell.tsx
-var import_clsx10 = __toESM(require("clsx"), 1);
-var import_react9 = require("react");
-
-// src/components/Search.tsx
-var import_react3 = require("react");
-
-// src/components/Input.tsx
-var import_react2 = require("react");
-var import_clsx7 = __toESM(require("clsx"), 1);
-
-// src/components/Label.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Label = (_a) => {
-  var _b = _a, {
-    as = "span",
-    padded,
-    className,
-    color,
-    align,
-    id
-  } = _b, props = __objRest(_b, [
-    "as",
-    "padded",
-    "className",
-    "color",
-    "align",
-    "id"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      className: (0, import_clsx6.default)(
-        typography.label,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        className,
-        padded && componentPaddingXUsingComponentGap
-      )
-    }, props), {
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    })
-  );
-};
-Label.displayName = "Label";
+Label.displayName = "Label";
 
 // src/utils/formatting.tsx
 function getDecimalPlaceholder(decimals) {
@@ -675,7 +374,7 @@ function formatCurrencyDisplay(value) {
 }
 
 // src/components/Input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
@@ -733,7 +432,7 @@ var InputBase = (_a) => {
       };
     }
   }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx7.default)(
+  const inputBaseClass = (0, import_clsx4.default)(
     fullWidth ? "w-full" : "w-fit",
     "flex flex-row items-center",
     "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
@@ -745,25 +444,25 @@ var InputBase = (_a) => {
     !removeBorder && "border border-border-primary-normal",
     "relative"
   );
-  const inputFocusClass = (0, import_clsx7.default)(
+  const inputFocusClass = (0, import_clsx4.default)(
     "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
   );
-  const inputDisabledClass = (0, import_clsx7.default)(
+  const inputDisabledClass = (0, import_clsx4.default)(
     "has-disabled:bg-background-action-secondary-disabled"
   );
-  const inputReadOnlyClass = (0, import_clsx7.default)(
+  const inputReadOnlyClass = (0, import_clsx4.default)(
     "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
   );
-  const inputInvalidClass = (0, import_clsx7.default)(
+  const inputInvalidClass = (0, import_clsx4.default)(
     "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
       id,
       htmlFor: inputId,
       ref: inputContainerRef,
-      className: (0, import_clsx7.default)(
+      className: (0, import_clsx4.default)(
         "w-full flex flex-col",
         "block",
         "text-text-primary-normal has-disabled:text-text-primary-disabled",
@@ -771,29 +470,29 @@ var InputBase = (_a) => {
       ),
       style: __spreadValues({}, props.style),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx7.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx4.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             Label,
             {
               id: id ? `${id}-label` : void 0,
-              className: (0, import_clsx7.default)(
+              className: (0, import_clsx4.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
               children: label
             }
           ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
-              className: (0, import_clsx7.default)(typography.label, "text-text-critical-normal"),
+              className: (0, import_clsx4.default)(typography.label, "text-text-critical-normal"),
               children: "*"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
-            className: (0, import_clsx7.default)(
+            className: (0, import_clsx4.default)(
               inputBaseClass,
               !props.disabled && inputInvalidClass,
               inputFocusClass,
@@ -803,7 +502,7 @@ var InputBase = (_a) => {
             ),
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -813,7 +512,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
-                  className: (0, import_clsx7.default)(
+                  className: (0, import_clsx4.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
                     "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
@@ -830,7 +529,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -915,9 +614,9 @@ var Input = (_a) => {
     if (props.before) return props.before;
     switch (variant) {
       case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" }) }) : null;
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" }) }) : null;
       case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "attach_money" }) });
       default:
         return null;
     }
@@ -927,7 +626,7 @@ var Input = (_a) => {
     switch (variant) {
       case "search": {
         const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
@@ -938,11 +637,11 @@ var Input = (_a) => {
         ) : null;
       }
       case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
       default:
         return null;
     }
@@ -1024,7 +723,7 @@ var Input = (_a) => {
     onBlur == null ? void 0 : onBlur(e);
   };
   const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     InputBase,
     __spreadProps(__spreadValues({}, inputProps), {
       before: getBeforeElement(),
@@ -1035,15 +734,15 @@ var Input = (_a) => {
   );
 };
 Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
 var Currency = (props) => {
   var _a;
   const handleCurrencyChange = (e) => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Input,
     __spreadProps(__spreadValues({}, props), {
       variant: "currency",
@@ -1052,14 +751,14 @@ var Currency = (props) => {
     })
   );
 };
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
 Finder.displayName = "Finder";
 UOM.displayName = "UOM";
 Currency.displayName = "Currency";
 Percentage.displayName = "Percentage";
 
 // src/components/Search.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
     id,
@@ -1097,8 +796,8 @@ var Search = (_a) => {
     }
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   }, [props.value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Input,
       __spreadValues({
         id,
@@ -1169,21 +868,50 @@ var Search = (_a) => {
 Search.displayName = "Search";
 
 // src/components/Menu.tsx
-var import_clsx8 = __toESM(require("clsx"), 1);
-var import_react7 = require("react");
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_react8 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/useMenuSystem.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/useKeydown.ts
 var import_react4 = require("react");
 
-// src/hooks/useMatchesMedia.ts
+// src/hooks/useInfiniteScroll.tsx
 var import_react5 = require("react");
+function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true
+  // ✅ Add this
+}) {
+  (0, import_react5.useEffect)(() => {
+    if (!enabled) return;
+    const handleScroll = () => {
+      const el2 = containerRef.current;
+      if (!el2 || isLoading) return;
+      const { scrollTop, scrollHeight, clientHeight } = el2;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
+}
+
+// src/hooks/useMatchesMedia.ts
+var import_react6 = require("react");
 var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react5.useState)();
-  (0, import_react5.useLayoutEffect)(() => {
+  const [matches, setMatches] = (0, import_react6.useState)();
+  (0, import_react6.useLayoutEffect)(() => {
     const mediaQueryList = window.matchMedia(query);
     const listener = () => setMatches(mediaQueryList.matches);
     listener();
@@ -1196,17 +924,17 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
 // src/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react6.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react6.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react6.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.useState)(
     null
   );
-  const menuRootRef = (0, import_react6.useRef)(null);
-  const subMenuRefs = (0, import_react6.useRef)({});
-  const hoverTimeoutRef = (0, import_react6.useRef)(null);
-  const closeTimeoutRef = (0, import_react6.useRef)(null);
+  const menuRootRef = (0, import_react7.useRef)(null);
+  const subMenuRefs = (0, import_react7.useRef)({});
+  const hoverTimeoutRef = (0, import_react7.useRef)(null);
+  const closeTimeoutRef = (0, import_react7.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -1304,7 +1032,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -1323,7 +1051,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -1400,13 +1128,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react6.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = useMatchesMobile();
-  const updatePosition = (0, import_react6.useCallback)(() => {
+  const updatePosition = (0, import_react7.useCallback)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -1442,7 +1170,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -1468,7 +1196,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {
@@ -1509,7 +1237,7 @@ function findDocumentRoot(element) {
 }
 
 // src/components/Menu.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     id,
@@ -1546,9 +1274,9 @@ var Menu = (_a) => {
     "autoFocusOff",
     "menuName"
   ]);
-  const internalRef = (0, import_react7.useRef)(null);
+  const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react7.useState)("180px");
+  const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
   const isMobile = useMatchesMobile();
   const { menuPosition, updatePosition } = useMenuPosition(
     isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
@@ -1560,7 +1288,7 @@ var Menu = (_a) => {
       topOffset
     }
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       if (!actualRef || !actualRef.current || customMaxHeight) {
         return;
@@ -1581,14 +1309,14 @@ var Menu = (_a) => {
       cancelAnimationFrame(raf);
     };
   }, [actualRef, customMaxHeight]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!show) {
       return;
     }
     initializeMenuFocus();
     updatePosition();
   }, [show, updatePosition]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!show || !setShow) {
       return;
     }
@@ -1606,12 +1334,12 @@ var Menu = (_a) => {
     };
   }, [show, setShow, positionTo]);
   return show && (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         id,
         ref: setRefs,
-        className: (0, import_clsx8.default)(
+        className: (0, import_clsx5.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
@@ -1740,12 +1468,64 @@ var Menu = (_a) => {
 Menu.displayName = "Menu";
 
 // src/components/MenuOption.tsx
-var import_clsx9 = __toESM(require("clsx"), 1);
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var MenuOption = ({
-  id,
-  children,
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_react9 = require("react");
+
+// src/components/Paragraph.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
+      className: (0, import_clsx6.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/MenuOption.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MenuOption = ({
+  id,
+  children,
   disabled = false,
   variant = "normal",
   value,
@@ -1767,10 +1547,10 @@ var MenuOption = ({
   highlightMatchingText = false,
   menuValue
 }) => {
-  const uniqueId = (0, import_react8.useId)();
-  const internalRef = (0, import_react8.useRef)(null);
+  const uniqueId = (0, import_react9.useId)();
+  const internalRef = (0, import_react9.useRef)(null);
   const actualRef = ref || internalRef;
-  const menuId = (0, import_react8.useRef)(`menu-${uniqueId}`);
+  const menuId = (0, import_react9.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
@@ -1790,36 +1570,36 @@ var MenuOption = ({
   const additionalAttributes = {
     "data-selected": selected || null
   };
-  const svgStyles = (0, import_clsx9.default)(
+  const svgStyles = (0, import_clsx7.default)(
     "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
   );
-  const textLabelStyles = (0, import_clsx9.default)("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && (0, import_clsx9.default)(
+  const textLabelStyles = (0, import_clsx7.default)("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && (0, import_clsx7.default)(
     "bg-transparent text-text-primary-normal",
     "hover:bg-background-action-secondary-hover",
     "focus:bg-background-action-secondary-hover",
     "data-selected:bg-background-action-secondary-hover",
     "active:bg-background-action-secondary-active"
   );
-  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx9.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx9.default)(
+  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx7.default)("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && (0, import_clsx7.default)(
     "text-action-400 bg-transparent",
     "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
     "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
     "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
     "active:bg-background-action-secondary-active active:text-text-action-active"
   );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx9.default)("text-text-action-disabled");
-  const disabledStyles = disabled && (0, import_clsx9.default)("bg-transparent cursor-default pointer-events-none");
+  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx7.default)("text-text-action-disabled");
+  const disabledStyles = disabled && (0, import_clsx7.default)("bg-transparent cursor-default pointer-events-none");
   const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         id,
         ref: actualRef,
-        className: (0, import_clsx9.default)(
+        className: (0, import_clsx7.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
           svgStyles,
           componentGap,
@@ -1845,13 +1625,13 @@ var MenuOption = ({
         role: "menuitem",
         "aria-haspopup": subMenu ? "menu" : void 0,
         children: [
-          before && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
+          before && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
           renderChildren,
           renderAfterProp()
         ]
       })
     ),
-    subMenu && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         onMouseEnter: handleSubMenuEnter,
@@ -1875,14 +1655,14 @@ var MenuOption = ({
       return after;
     }
     if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_right" });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_right" });
     }
   }
   function mobileBackMenuOption() {
     if (!isMobile) {
       return;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuOption,
       {
         id: id ? `${id}-back` : void 0,
@@ -1890,7 +1670,7 @@ var MenuOption = ({
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
         variant: "action",
-        before: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_left" }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_left" }),
         children: "Back"
       }
     );
@@ -1907,13 +1687,13 @@ function highlightMatch(text, searchValue) {
   );
   const parts = text.split(regex);
   return parts.map(
-    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-bold", children: part }, index) : part
+    (part, index) => regex.test(part) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-bold", children: part }, index) : part
   );
 }
 
 // src/components/DataGridCell.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react9.memo)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DataGridCell = (0, import_react10.memo)(
   (_a) => {
     var _b = _a, {
       id,
@@ -1949,10 +1729,10 @@ var DataGridCell = (0, import_react9.memo)(
       "width"
     ]);
     const Element = type === "header" ? "th" : "td";
-    const timerRef = (0, import_react9.useRef)(null);
-    const [isGrabbing, setIsGrabbing] = (0, import_react9.useState)(false);
-    const [isPointerPressed, setIsPointerPressed] = (0, import_react9.useState)(false);
-    (0, import_react9.useEffect)(() => {
+    const timerRef = (0, import_react10.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react10.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react10.useState)(false);
+    (0, import_react10.useEffect)(() => {
       return () => {
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -1989,10 +1769,10 @@ var DataGridCell = (0, import_react9.memo)(
     };
     const headerBgStyles = type === "header" && !locked && !["button"].includes(component) && "bg-brand-400 border-brand-200";
     const lockedHeaderBgStyles = locked && !["button"].includes(component) && "bg-neutral-400 border-neutral-300";
-    const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && (0, import_clsx10.default)("border-r");
-    const buttonComponentStyles = component === "button" && (0, import_clsx10.default)("border-r border-b border-border-primary-normal");
-    const iconComponentStyles = component === "icon" && (0, import_clsx10.default)("border-l");
-    const cellClasses = (0, import_clsx10.default)(
+    const headerTypeStyles = type === "header" && component !== "button" && component !== "icon" && (0, import_clsx8.default)("border-r");
+    const buttonComponentStyles = component === "button" && (0, import_clsx8.default)("border-r border-b border-border-primary-normal");
+    const iconComponentStyles = component === "icon" && (0, import_clsx8.default)("border-l");
+    const cellClasses = (0, import_clsx8.default)(
       headerTypeStyles,
       buttonComponentStyles,
       headerBgStyles,
@@ -2011,14 +1791,14 @@ var DataGridCell = (0, import_react9.memo)(
       isGrabbing && "!cursor-grabbing",
       component === "checkbox" || center && "justify-center"
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Element,
       __spreadProps(__spreadValues({
         id,
-        className: (0, import_clsx10.default)("flex h-10", !width && "flex-1"),
+        className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: cellClasses,
@@ -2044,21 +1824,23 @@ function DataCellHeader(_a) {
     children,
     setNodeRef,
     node,
-    id
+    id,
+    useMenuDefaultMinWidth
   } = _b, props = __objRest(_b, [
     "header",
     "children",
     "setNodeRef",
     "node",
-    "id"
+    "id",
+    "useMenuDefaultMinWidth"
   ]);
   var _a2;
-  const [showMenu, setShowMenu] = (0, import_react9.useState)(false);
-  const [filter, setFilter] = (0, import_react9.useState)(
+  const [showMenu, setShowMenu] = (0, import_react10.useState)(false);
+  const [filter, setFilter] = (0, import_react10.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
-  const ref = (0, import_react9.useRef)(null);
-  const predeterminedPinned = (0, import_react9.useRef)(false);
+  const ref = (0, import_react10.useRef)(null);
+  const predeterminedPinned = (0, import_react10.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
@@ -2066,14 +1848,16 @@ function DataCellHeader(_a) {
     listeners: subMenuListeners,
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a3;
     const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
     const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
     const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
-    predeterminedPinned.current = [...left, ...right].includes(header.column.id);
+    predeterminedPinned.current = [...left, ...right].includes(
+      header.column.id
+    );
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
     }, 500);
@@ -2087,7 +1871,7 @@ function DataCellHeader(_a) {
     width: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)"
   }, props.style);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     DataGridCell,
     __spreadProps(__spreadValues({
       id,
@@ -2100,7 +1884,7 @@ function DataCellHeader(_a) {
     }, props), {
       children: [
         children,
-        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
@@ -2109,15 +1893,16 @@ function DataCellHeader(_a) {
             show: showMenu,
             setShow: setShowMenu,
             mobileHide,
+            useDefaultMinWidth: useMenuDefaultMinWidth,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   id: id ? `${id}-filter-option` : void 0
                 }, subMenuListeners), {
                   subMenu: (_b2) => {
                     var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({
                         id: id ? `${id}-filter-submenu` : void 0
@@ -2126,8 +1911,9 @@ function DataCellHeader(_a) {
                         ref: (el) => {
                           registerSubMenu(menuId, el);
                         },
+                        useDefaultMinWidth: useMenuDefaultMinWidth,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             Search,
                             {
                               id: id ? `${id}-filter-search` : void 0,
@@ -2142,7 +1928,7 @@ function DataCellHeader(_a) {
                               value: filter != null ? filter : ""
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-contains` : void 0,
@@ -2151,7 +1937,7 @@ function DataCellHeader(_a) {
                               children: "Contains"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-startswith` : void 0,
@@ -2160,7 +1946,7 @@ function DataCellHeader(_a) {
                               children: "Starts with"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             MenuOption,
                             {
                               id: id ? `${id}-filter-endswith` : void 0,
@@ -2176,7 +1962,7 @@ function DataCellHeader(_a) {
                   children: "Filter"
                 })
               ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 MenuOption,
                 __spreadProps(__spreadValues({
                   onClick: () => {
@@ -2185,7 +1971,7 @@ function DataCellHeader(_a) {
                 }, subMenuListeners), {
                   subMenu: (_d) => {
                     var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({}, props2), {
                         show: isMenuActive(menuId, subMenuLevel),
@@ -2193,7 +1979,7 @@ function DataCellHeader(_a) {
                           registerSubMenu(menuId, el);
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             MenuOption,
                             {
                               selected: header.column.getIsPinned() === "left",
@@ -2204,11 +1990,11 @@ function DataCellHeader(_a) {
                                   header.column.pin("left");
                                 }
                               },
-                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "check" }),
+                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
                               children: "Left"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             MenuOption,
                             {
                               selected: header.column.getIsPinned() === "right",
@@ -2219,7 +2005,7 @@ function DataCellHeader(_a) {
                                   header.column.pin("right");
                                 }
                               },
-                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "check" }),
+                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }),
                               children: "Right"
                             }
                           )
@@ -2241,11 +2027,11 @@ function DataCellHeader(_a) {
     })
   );
   function menuOptionIcon(value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Icon,
       {
         name: "check",
-        className: (0, import_clsx10.default)(
+        className: (0, import_clsx8.default)(
           header.column.columnDef.filterFn !== value && "text-transparent"
         )
       }
@@ -2287,9 +2073,10 @@ function DraggableCellHeader(_a) {
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
     width: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-neutral-000)"
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+    userSelect: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DataCellHeader,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues({
       header,
@@ -2321,378 +2108,567 @@ function DragAlongCell(_a) {
     width: cell.column.getSize(),
     zIndex: isDragging ? 1 : 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
 }
 DragAlongCell.displayName = "DragAlongCell";
 
-// src/components/Select.tsx
-var import_react10 = require("react");
-var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Select = (_a) => {
-  var _b = _a, {
-    id,
-    label,
-    error,
-    children,
-    readOnly,
-    renderMenu,
-    onClick,
-    className,
-    wrapperClassName,
-    removeRoundness,
-    displayValue,
-    value
-  } = _b, props = __objRest(_b, [
-    "id",
-    "label",
-    "error",
-    "children",
-    "readOnly",
-    "renderMenu",
-    "onClick",
-    "className",
-    "wrapperClassName",
-    "removeRoundness",
-    "displayValue",
-    "value"
-  ]);
-  const inputRef = (0, import_react10.useRef)(null);
-  const inputContainerRef = (0, import_react10.useRef)(null);
-  const preventFocusOnInitialRender = (0, import_react10.useRef)(true);
-  const [show, setShow] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    var _a2;
-    if (preventFocusOnInitialRender.current) {
-      preventFocusOnInitialRender.current = false;
-      return;
-    }
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      InputBase,
-      __spreadProps(__spreadValues({
-        id,
-        inputContainerRef,
-        ref: inputRef,
-        label,
-        after: !readOnly && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "span",
-          {
-            className: (0, import_clsx11.default)(
-              props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
-              "contents"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "keyboard_arrow_down" })
-          }
-        ),
-        maxLength: 0,
-        className: (0, import_clsx11.default)("!caret-transparent !cursor-default", className),
-        wrapperClassName,
-        onKeyDown: (e) => {
-          const openKeys = ["Enter", "Space", " "];
-          if (openKeys.includes(e.key)) {
-            e.preventDefault();
-            e.target.click();
-          }
-        },
-        onClick: (e) => {
-          if (props.disabled || readOnly) {
-            return;
-          }
-          setShow(!show);
-          onClick == null ? void 0 : onClick(e);
-        },
-        error,
-        readOnly,
-        removeRoundness,
-        focus: show
-      }, props), {
-        value: displayValue != null ? displayValue : value
-      })
-    ),
-    renderMenu ? renderMenu({
-      id: id ? `${id}-menu` : void 0,
-      positionTo: inputContainerRef,
-      show,
-      setShow,
-      topOffset: props.caption ? -16 : null
-    }) : children
-  ] });
-};
-Select.displayName = "Select";
+// src/components/DataGrid/index.tsx
+var import_react15 = __toESM(require("react"), 1);
+var import_react_table3 = require("@tanstack/react-table");
+var import_core = require("@dnd-kit/core");
+var import_sortable2 = require("@dnd-kit/sortable");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_react_virtual2 = require("@tanstack/react-virtual");
+var import_clsx13 = __toESM(require("clsx"), 1);
 
-// src/components/Subheader.tsx
+// src/components/DataGrid/PinnedColumns.tsx
+var import_react_table2 = require("@tanstack/react-table");
 var import_clsx12 = __toESM(require("clsx"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Subheader = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    align,
-    color,
-    tall,
-    id
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "align",
-    "color",
-    "tall",
-    "id"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      className: (0, import_clsx12.default)(
-        typography.subheader,
-        className,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    }, props), {
-      children
-    })
+
+// src/components/DataGrid/utils.tsx
+var import_clsx9 = __toESM(require("clsx"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function getSortIcon(sort, nextSort = false) {
+  const iconClassName = (0, import_clsx9.default)(
+    "text-icon-on-action-primary-normal",
+    nextSort && "hidden group-hover:block"
   );
-};
-Subheader.displayName = "Subheader";
+  if (sort === "asc")
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
+  if (sort === "desc")
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
+  return null;
+}
 
-// src/components/Tooltip.tsx
-var import_clsx13 = __toESM(require("clsx"), 1);
-var import_react11 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Tooltip = ({
+// src/components/DataGrid/PinnedColumns.tsx
+var import_react12 = __toESM(require("react"), 1);
+
+// src/components/DataGrid/TableBody/index.tsx
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_clsx11 = __toESM(require("clsx"), 1);
+
+// src/components/DataGrid/TableBody/TableBodyRow.tsx
+var import_clsx10 = __toESM(require("clsx"), 1);
+var import_react_table = require("@tanstack/react-table");
+var import_react11 = __toESM(require("react"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TableBodyRow({
   id,
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8
-}) => {
-  const ref = (0, import_react11.useRef)(null);
-  const tooltipRef = (0, import_react11.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react11.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react11.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react11.useState)(false);
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-  const handleMouseEnter = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      setIsVisible(true);
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-  (0, import_react11.useEffect)(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-  (0, import_react11.useEffect)(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection
+}) {
+  var _a;
+  let visibleCells;
+  if (locked) {
+    visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
+  } else {
+    visibleCells = row.getCenterVisibleCells();
+  }
+  const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
+  const columns = locked ? visibleCells : virtualColumns;
+  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "tr",
     {
-      id,
-      ref,
-      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      className: (0, import_clsx10.default)(
+        "transition-colors hover:bg-background-action-secondary-hover",
+        row.getIsSelected() && "!bg-background-action-secondary-hover",
+        isError && "!bg-background-action-critical-secondary-hover",
+        showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+      ),
+      style: {
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
+        width: "100%"
+      },
       children: [
-        children,
-        isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "div",
+        !locked && virtualPaddingLeft ? (
+          // fake empty column to the left for virtualization scroll padding
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
+        ) : null,
+        columns.map((column) => {
+          var _a2, _b;
+          const cell = locked ? column : visibleCells[column.index];
+          if (!cell) {
+            return;
+          }
+          const cellValue = cell.getValue();
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            CellElement,
             {
-              id: id ? `${id}-message` : void 0,
-              ref: tooltipRef,
-              style: {
-                position: "fixed",
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                zIndex: 9999
-              },
-              className: (0, import_clsx13.default)(
-                typography.caption,
-                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-                componentPadding,
-                !removeOpacity && "opacity-0"
-              ),
-              children: message
-            }
-          ),
-          document.body
-        )
+              id: id ? `${id}-cell-${cell.id}` : void 0,
+              cell,
+              className: (0, import_clsx10.default)({
+                "justify-end": typeof cellValue === "number"
+              }),
+              width: (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Tooltip,
+                {
+                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  showOnTruncation: true,
+                  message: cellValue,
+                  position: "bottom",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Paragraph, { addOverflow: true, tall: true, children: cellValue })
+                }
+              )
+            },
+            cell.id
+          );
+        }),
+        !locked && virtualPaddingRight ? (
+          // fake empty column to the right for virtualization scroll padding
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
+        ) : null,
+        enableColumnSelector && !locked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "p-2", style: { width: "48.8px" } })
       ]
-    }
+    },
+    row.id
   );
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const paragraph = ref.current.querySelector("p");
-      if (paragraph) {
-        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
-        return isTruncated;
-      }
-    }
-    return false;
-  }
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/useInfiniteScroll.tsx
-var import_react12 = require("react");
-function useInfiniteScroll({
-  containerRef,
-  onLoadMore,
-  isLoading,
-  offset = 50,
-  enabled = true
-  // ✅ Add this
-}) {
-  (0, import_react12.useEffect)(() => {
-    if (!enabled) return;
-    const handleScroll = () => {
-      const el2 = containerRef.current;
-      if (!el2 || isLoading) return;
-      const { scrollTop, scrollHeight, clientHeight } = el2;
-      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
-      if (isNearBottom) {
-        onLoadMore();
-      }
-    };
-    const el = containerRef.current;
-    if (el) el.addEventListener("scroll", handleScroll);
-    return () => {
-      if (el) el.removeEventListener("scroll", handleScroll);
-    };
-  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
 }
 
-// src/components/DataGrid.tsx
-var import_clsx14 = __toESM(require("clsx"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
-var NO_RESULTS_HEIGHT = "h-[120px]";
-function adaptTableStateSetter(setter) {
-  return (valueOrFn) => {
-    setter(
-      (prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
+// src/components/DataGrid/TableBody/LoadingCell.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function LoadingCell({
+  id,
+  column
+}) {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
+  }
+  if (column.cell === "input") {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DataGridCell,
+      {
+        id: id ? `${id}-${key}` : void 0,
+        component: "input",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Input,
+          {
+            id: id ? `${id}-${key}-input` : void 0,
+            align: "left",
+            disabled: true,
+            wrapperClassName: "!rounded-none !border-0"
+          }
+        )
+      },
+      key
     );
-  };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 }
-function DataGrid({
+
+// src/components/DataGrid/TableBody/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function TableBody({
   id,
-  data,
-  columns,
-  status,
-  isLoadingMore = false,
-  onLoadMore,
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
   pagination,
-  showFilterRow = false,
-  hasMore = false,
-  sorting: externalSorting,
-  onSortingChange,
-  columnFilters: externalColumnFilters,
-  onColumnFiltersChange,
-  rowSelection: externalRowSelection,
-  onRowSelectionChange,
-  filteredSortedData,
-  totalRowCount,
-  hideStatusBar,
-  centerHeader,
-  enableColumnSelector,
-  predeterminedLeftPins = [],
-  predeterminedRightPins = []
+  isLoadingMore,
+  hasMore,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection
 }) {
-  var _a, _b, _c, _d, _e;
-  const [columnOrder, setColumnOrder] = (0, import_react13.useState)(
-    () => columns.map((c) => c.id)
-  );
-  const [localSorting, setLocalSorting] = (0, import_react13.useState)([]);
-  const [localColumnFilters, setLocalColumnFilters] = (0, import_react13.useState)([]);
-  const [localRowSelection, setLocalRowSelection] = (0, import_react13.useState)({});
-  const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
-  const setSortingState = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(
-      externalSorting != null ? externalSorting : []
-    ) : updaterOrValue;
-    (onSortingChange != null ? onSortingChange : setLocalSorting)(value);
-  } : setLocalSorting;
-  const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
-  const setColumnFilterState = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
-    (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
-  } : setLocalColumnFilters;
-  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
-  const setRowSelection = pagination ? (updaterOrValue) => {
-    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
-    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
-  } : setLocalRowSelection;
-  const dndId = (0, import_react13.useId)();
-  const containerRef = import_react13.default.useRef(null);
-  const [columnVisibility, setColumnVisibility] = (0, import_react13.useState)(() => {
-    const initialVisibility = {};
-    columns.forEach((column) => {
-      var _a2, _b2;
-      if (column.id) {
-        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-      }
-    });
-    return initialVisibility;
+  const { rows } = table.getRowModel();
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: rows.length,
+    estimateSize: () => 40,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 8
   });
-  const toggleColumnVisibility = (0, import_react13.useCallback)(
-    (columnId, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
-    },
-    [setColumnVisibility]
-  );
-  const resetColumnVisibility = (0, import_react13.useCallback)(() => {
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+  let headerGroups;
+  if (pinDirection === "left") {
+    headerGroups = table.getLeftHeaderGroups();
+  } else if (pinDirection === "right") {
+    headerGroups = table.getRightHeaderGroups();
+  } else {
+    headerGroups = table.getCenterHeaderGroups();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "tbody",
+    {
+      className: (0, import_clsx11.default)(locked ? "shadow-16" : ""),
+      style: {
+        display: "grid",
+        height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
+        // tells scrollbar how big the table is
+        position: "relative"
+        // needed for absolute positioning of rows
+      },
+      children: [
+        showFilterRow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "sticky",
+              top: "40px",
+              width: "100%",
+              height: "40px",
+              zIndex: 10
+            },
+            className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
+            children: headerGroups.flatMap(
+              (x) => x.headers.map((header) => {
+                var _a, _b, _c, _d, _e;
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  CellElement,
+                  {
+                    id: id ? `${id}-filter-cell-${header.id}` : void 0,
+                    noPadding: true,
+                    cell: header,
+                    width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
+                    children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
+                      header,
+                      table
+                    })) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      Search,
+                      {
+                        id: id ? `${id}-filter-search-${header.id}` : void 0,
+                        removeRoundness: true,
+                        onChange: (e) => header.column.setFilterValue(e.target.value),
+                        value: (_d = header.column.getFilterValue()) != null ? _d : "",
+                        placeholder: "",
+                        removeSearchIcon: true
+                      }
+                    ))
+                  },
+                  header.id
+                );
+              })
+            )
+          }
+        ),
+        virtualRows.map((virtualRow) => {
+          const row = rows[virtualRow.index];
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            TableBodyRow,
+            {
+              id,
+              columnVirtualizer,
+              row,
+              rowVirtualizer,
+              virtualPaddingLeft,
+              virtualPaddingRight,
+              virtualRow,
+              showFilterRow,
+              enableColumnSelector,
+              locked,
+              pinDirection
+            },
+            row.id
+          );
+        }),
+        !pagination && isLoadingMore && hasMore && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "tr",
+          {
+            style: {
+              display: "flex",
+              position: "absolute",
+              width: "100%",
+              transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
+            },
+            className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingCell, { id, column: column.columnDef }, column.id))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataGrid/PinnedColumns.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function PinnedColumns(_a) {
+  var _b = _a, {
+    pinDirection = "left",
+    table,
+    centerHeader,
+    allSelectedAcrossPages,
+    someSelectedAcrossPages,
+    toggleSelectAllAcrossPages
+  } = _b, props = __objRest(_b, [
+    "pinDirection",
+    "table",
+    "centerHeader",
+    "allSelectedAcrossPages",
+    "someSelectedAcrossPages",
+    "toggleSelectAllAcrossPages"
+  ]);
+  var _a2;
+  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "table",
+    {
+      className: (0, import_clsx12.default)(
+        "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
+        pinDirection === "left" ? "left-0" : "right-0"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
+            var _a3, _b2, _c;
+            if (!header) {
+              return;
+            }
+            if (typeof header.column.columnDef.header === "string") {
+              const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
+              return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                DataCellHeader,
+                {
+                  locked: true,
+                  header,
+                  center: centerHeader,
+                  width: customHeaderWidth,
+                  className: (0, import_clsx12.default)(
+                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
+                    "group"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                    getSortIcon(header.column.getIsSorted()),
+                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
+                      header.column.getNextSortingOrder(),
+                      true
+                    ),
+                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "div",
+                      {
+                        onDoubleClick: (e) => {
+                          e.stopPropagation();
+                          header.column.resetSize();
+                        },
+                        onMouseDown: (e) => {
+                          e.stopPropagation();
+                          header.getResizeHandler()(e);
+                        },
+                        onTouchStart: (e) => {
+                          e.stopPropagation();
+                          header.getResizeHandler()(e);
+                        },
+                        className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                      }
+                    )
+                  ]
+                },
+                header.id
+              );
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react12.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              Checkbox,
+              {
+                checked: allSelectedAcrossPages,
+                indeterminate: someSelectedAcrossPages,
+                onChange: toggleSelectAllAcrossPages
+              }
+            ) }) : (0, import_react_table2.flexRender)(
+              header.column.columnDef.header,
+              header.getContext()
+            ) }, header.id);
+          }) }, headerGroup.id);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          TableBody,
+          __spreadProps(__spreadValues({}, props), {
+            table,
+            locked: true,
+            pinDirection
+          })
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
+var import_react14 = require("react");
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
+var import_react13 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ColumnSelectorMenuOption({
+  id,
+  column,
+  toggleColumnVisibility
+}) {
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
+  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Checkbox,
+    {
+      id: id ? `${id}-checkbox` : void 0,
+      label: label != null ? label : "Unknown",
+      checked: isVisible,
+      onChange: (e) => {
+        setIsVisible(e.target.checked);
+        toggleColumnVisibility(column.id, e.target.checked);
+      }
+    }
+  ) });
+}
+
+// src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ColumnSelectorHeaderCell({
+  id,
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility
+}) {
+  const ref = (0, import_react14.useRef)(null);
+  const [show, setShow] = (0, import_react14.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    DataGridCell,
+    {
+      id,
+      width: "48",
+      type: "header",
+      color: "text-secondary-normal",
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Button,
+          {
+            id: id ? `${id}-button` : void 0,
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          Menu,
+          {
+            id: id ? `${id}-menu` : void 0,
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Button,
+                {
+                  id: id ? `${id}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              table.getAllColumns().filter((x) => {
+                var _a;
+                return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
+              }).map((column) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                ColumnSelectorMenuOption,
+                {
+                  id: id ? `${id}-option-${column.id}` : void 0,
+                  column,
+                  toggleColumnVisibility
+                },
+                column.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataGrid/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
+var NO_RESULTS_HEIGHT = "h-[120px]";
+function DataGrid({
+  id,
+  data,
+  columns,
+  status,
+  isLoadingMore = false,
+  onLoadMore,
+  pagination,
+  showFilterRow = false,
+  hasMore = false,
+  sorting: externalSorting,
+  onSortingChange,
+  columnFilters: externalColumnFilters,
+  onColumnFiltersChange,
+  rowSelection: externalRowSelection,
+  onRowSelectionChange,
+  filteredSortedData,
+  totalRowCount,
+  hideStatusBar,
+  centerHeader,
+  enableColumnSelector,
+  predeterminedLeftPins = [],
+  predeterminedRightPins = [],
+  useMenuDefaultMinWidth
+}) {
+  var _a, _b, _c, _d, _e;
+  const [columnOrder, setColumnOrder] = (0, import_react15.useState)(
+    () => columns.map((c) => c.id)
+  );
+  const [localSorting, setLocalSorting] = (0, import_react15.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react15.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react15.useState)({});
+  const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
+  const setSortingState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(
+      externalSorting != null ? externalSorting : []
+    ) : updaterOrValue;
+    (onSortingChange != null ? onSortingChange : setLocalSorting)(value);
+  } : setLocalSorting;
+  const columnFilterState = pagination ? externalColumnFilters != null ? externalColumnFilters : localColumnFilters : localColumnFilters;
+  const setColumnFilterState = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalColumnFilters != null ? externalColumnFilters : []) : updaterOrValue;
+    (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
+  } : setLocalColumnFilters;
+  const rowSelection = pagination ? externalRowSelection != null ? externalRowSelection : localRowSelection : localRowSelection;
+  const setRowSelection = pagination ? (updaterOrValue) => {
+    const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
+    (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
+  } : setLocalRowSelection;
+  const dndId = (0, import_react15.useId)();
+  const containerRef = import_react15.default.useRef(null);
+  const [columnVisibility, setColumnVisibility] = (0, import_react15.useState)(() => {
+    const initialVisibility = {};
+    columns.forEach((column) => {
+      var _a2, _b2;
+      if (column.id) {
+        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+      }
+    });
+    return initialVisibility;
+  });
+  const toggleColumnVisibility = (0, import_react15.useCallback)(
+    (columnId, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
+    },
+    [setColumnVisibility]
+  );
+  const resetColumnVisibility = (0, import_react15.useCallback)(() => {
     setColumnVisibility(() => {
       const initialVisibility = {};
       columns.forEach((column) => {
@@ -2704,12 +2680,12 @@ function DataGrid({
       return initialVisibility;
     });
   }, [columns]);
-  const table = (0, import_react_table.useReactTable)({
+  const table = (0, import_react_table3.useReactTable)({
     columns,
     data,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
-    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
+    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
+    getFilteredRowModel: (0, import_react_table3.getFilteredRowModel)(),
     columnResizeMode: "onChange",
     getRowId: (row, index) => {
       var _a2;
@@ -2799,7 +2775,7 @@ function DataGrid({
     (0, import_core.useSensor)(import_core.KeyboardSensor)
   );
   const visibleColumns = table.getVisibleLeafColumns();
-  const columnVirtualizer = (0, import_react_virtual.useVirtualizer)({
+  const columnVirtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: visibleColumns.length,
     estimateSize: (index) => visibleColumns[index].getSize(),
     //estimate width of each column for accurate scrollbar dragging
@@ -2816,7 +2792,7 @@ function DataGrid({
     virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
   }
   const empty = table.getRowModel().rows.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_core.DndContext,
     {
       id: dndId,
@@ -2824,27 +2800,27 @@ function DataGrid({
       modifiers: [import_modifiers.restrictToHorizontalAxis],
       onDragEnd: handleDragEnd,
       sensors,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_sortable2.SortableContext,
         {
           items: columnOrder,
           strategy: import_sortable2.horizontalListSortingStrategy,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               id,
               className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                   "div",
                   {
-                    className: (0, import_clsx14.default)(
+                    className: (0, import_clsx13.default)(
                       "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
                       empty ? "overflow-y-hidden" : "h-full"
                     ),
                     ref: containerRef,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         PinnedColumns,
                         {
                           pinDirection: "left",
@@ -2857,11 +2833,11 @@ function DataGrid({
                           enableColumnSelector
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: "flex w-full", children: [
                           virtualPaddingLeft ? (
                             // fake empty column to the left for virtualization scroll padding
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               "th",
                               {
                                 style: { display: "flex", width: virtualPaddingLeft }
@@ -2869,34 +2845,39 @@ function DataGrid({
                             )
                           ) : null,
                           virtualColumns.map((virtualColumn) => {
-                            var _a2, _b2, _c2, _d2;
+                            var _a2, _b2, _c2, _d2, _e2;
                             const header = headerGroup.headers[virtualColumn.index];
                             if (!header) {
                               return;
                             }
                             if (typeof header.column.columnDef.header === "string") {
                               const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                              return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                              const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                              return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                                 DraggableCellHeader,
                                 {
                                   id: id ? `${id}-header-${header.id}` : void 0,
                                   header,
-                                  locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                                  locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
                                   center: centerHeader,
                                   width: customHeaderWidth,
-                                  className: (0, import_clsx14.default)(
+                                  className: (0, import_clsx13.default)(
                                     header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                                    "group"
+                                    "group",
+                                    {
+                                      "justify-end": typeof cellValue === "number"
+                                    }
                                   ),
+                                  useMenuDefaultMinWidth,
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
                                     getSortIcon(header.column.getIsSorted()),
                                     !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
                                       header.column.getNextSortingOrder(),
                                       true
                                     ),
-                                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                       "div",
                                       {
                                         onDoubleClick: (e) => {
@@ -2919,14 +2900,14 @@ function DataGrid({
                                 header.id
                               );
                             }
-                            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               DataGridCell,
                               {
                                 id: id ? `${id}-header-${header.id}` : void 0,
                                 type: "header",
                                 component: "checkbox",
-                                locked: (_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.locked,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                   Checkbox,
                                   {
                                     id: id ? `${id}-select-all-checkbox` : void 0,
@@ -2936,21 +2917,21 @@ function DataGrid({
                                   }
                                 )
                               }
-                            ) : (0, import_react_table.flexRender)(
+                            ) : (0, import_react_table3.flexRender)(
                               header.column.columnDef.header,
                               header.getContext()
                             ) }, header.id);
                           }),
                           virtualPaddingRight ? (
                             //fake empty column to the right for virtualization scroll padding
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               "th",
                               {
                                 style: { display: "flex", width: virtualPaddingRight }
                               }
                             )
                           ) : null,
-                          enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                             ColumnSelectorHeaderCell,
                             {
                               id: id ? `${id}-column-selector` : void 0,
@@ -2960,7 +2941,7 @@ function DataGrid({
                             }
                           )
                         ] }, headerGroup.id)) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                           TableBody,
                           {
                             id,
@@ -2977,7 +2958,7 @@ function DataGrid({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         PinnedColumns,
                         {
                           pinDirection: "right",
@@ -2993,25 +2974,25 @@ function DataGrid({
                     ]
                   }
                 ),
-                empty && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                empty && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                   "div",
                   {
-                    className: (0, import_clsx14.default)(
+                    className: (0, import_clsx13.default)(
                       NO_RESULTS_HEIGHT,
                       "flex flex-col items-center justify-center",
                       componentGap,
                       componentPadding
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
                     ]
                   }
                 ),
-                !hideStatusBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
-                  pagination && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between items-center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 w-min", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                !hideStatusBar && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-2 pt-[7px] border-t border-border-primary-normal h-full min-h-[34px]", children: [
+                  pagination && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 w-min", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         Select,
                         {
                           id: id ? `${id}-pagesize-select` : void 0,
@@ -3021,11 +3002,11 @@ function DataGrid({
                             var _a2;
                             return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
                           },
-                          renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                             Menu,
                             __spreadProps(__spreadValues({}, props), {
                               id: id ? `${id}-pagesize-menu` : void 0,
-                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                              children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                 MenuOption,
                                 {
                                   id: id ? `${id}-pagesize-option-${option}` : void 0,
@@ -3042,21 +3023,21 @@ function DataGrid({
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label, { children: "Per Page" })
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { children: "Per Page" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         Button,
                         {
                           id: id ? `${id}-prev-page-button` : void 0,
                           iconOnly: true,
-                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_left" }),
+                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_left" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
                           variant: "tertiary",
                           disabled: pagination.pageIndex === 0
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Paragraph, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Paragraph, { children: [
                         pagination.pageIndex * pagination.pageSize + 1,
                         " -",
                         " ",
@@ -3068,12 +3049,12 @@ function DataGrid({
                         "of ",
                         pagination.total
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         Button,
                         {
                           id: id ? `${id}-next-page-button` : void 0,
                           iconOnly: true,
-                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_right" }),
+                          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_right" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
                           variant: "tertiary",
                           disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
@@ -3081,7 +3062,7 @@ function DataGrid({
                       )
                     ] })
                   ] }),
-                  status && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { children: status })
+                  status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { children: status })
                 ] })
               ]
             }
@@ -3089,441 +3070,549 @@ function DataGrid({
         }
       )
     }
-  );
-}
-DataGrid.displayName = "DataGrid";
-function TableBody({
-  id,
-  columnVirtualizer,
-  table,
-  tableContainerRef,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  pagination,
-  isLoadingMore,
-  hasMore,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection
-}) {
-  const { rows } = table.getRowModel();
-  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
-    count: rows.length,
-    estimateSize: () => 40,
-    getScrollElement: () => tableContainerRef.current,
-    overscan: 8
-  });
-  const virtualRows = rowVirtualizer.getVirtualItems();
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-  let headerGroups;
-  if (pinDirection === "left") {
-    headerGroups = table.getLeftHeaderGroups();
-  } else if (pinDirection === "right") {
-    headerGroups = table.getRightHeaderGroups();
-  } else {
-    headerGroups = table.getCenterHeaderGroups();
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "tbody",
-    {
-      className: (0, import_clsx14.default)(locked ? "shadow-16" : ""),
-      style: {
-        display: "grid",
-        height: `${showFilterRow ? rowVirtualizer.getTotalSize() + 40 : rowVirtualizer.getTotalSize()}px`,
-        // tells scrollbar how big the table is
-        position: "relative"
-        // needed for absolute positioning of rows
-      },
-      children: [
-        showFilterRow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "tr",
+  );
+}
+DataGrid.displayName = "DataGrid";
+function adaptTableStateSetter(setter) {
+  return (valueOrFn) => {
+    setter(
+      (prev) => typeof valueOrFn === "function" ? valueOrFn(prev) : valueOrFn
+    );
+  };
+}
+
+// src/components/Select.tsx
+var import_react16 = require("react");
+var import_clsx14 = __toESM(require("clsx"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Select = (_a) => {
+  var _b = _a, {
+    id,
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness,
+    displayValue,
+    value
+  } = _b, props = __objRest(_b, [
+    "id",
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness",
+    "displayValue",
+    "value"
+  ]);
+  const inputRef = (0, import_react16.useRef)(null);
+  const inputContainerRef = (0, import_react16.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react16.useRef)(true);
+  const [show, setShow] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      InputBase,
+      __spreadProps(__spreadValues({
+        id,
+        inputContainerRef,
+        ref: inputRef,
+        label,
+        after: !readOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "span",
           {
-            style: {
-              display: "flex",
-              position: "sticky",
-              top: "40px",
-              width: "100%",
-              height: "40px",
-              zIndex: 10
-            },
-            className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
-            children: headerGroups.flatMap(
-              (x) => x.headers.map((header) => {
-                var _a, _b, _c, _d, _e;
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  CellElement,
-                  {
-                    id: id ? `${id}-filter-cell-${header.id}` : void 0,
-                    noPadding: true,
-                    cell: header,
-                    width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
-                    children: header.column.getCanFilter() && ((_e = (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.filterRowCell) == null ? void 0 : _c.call(_b, {
-                      header,
-                      table
-                    })) != null ? _e : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      Search,
-                      {
-                        id: id ? `${id}-filter-search-${header.id}` : void 0,
-                        removeRoundness: true,
-                        onChange: (e) => header.column.setFilterValue(e.target.value),
-                        value: (_d = header.column.getFilterValue()) != null ? _d : "",
-                        placeholder: "",
-                        removeSearchIcon: true
-                      }
-                    ))
-                  },
-                  header.id
-                );
-              })
-            )
+            className: (0, import_clsx14.default)(
+              props.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
+              "contents"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "keyboard_arrow_down" })
           }
         ),
-        virtualRows.map((virtualRow) => {
-          const row = rows[virtualRow.index];
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            TableBodyRow,
-            {
-              id,
-              columnVirtualizer,
-              row,
-              rowVirtualizer,
-              virtualPaddingLeft,
-              virtualPaddingRight,
-              virtualRow,
-              showFilterRow,
-              enableColumnSelector,
-              locked,
-              pinDirection
-            },
-            row.id
-          );
-        }),
-        !pagination && isLoadingMore && hasMore && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "tr",
-          {
-            style: {
-              display: "flex",
-              position: "absolute",
-              width: "100%",
-              transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
-            },
-            className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingCell, { id, column: column.columnDef }, column.id))
+        maxLength: 0,
+        className: (0, import_clsx14.default)("!caret-transparent !cursor-default", className),
+        wrapperClassName,
+        onKeyDown: (e) => {
+          const openKeys = ["Enter", "Space", " "];
+          if (openKeys.includes(e.key)) {
+            e.preventDefault();
+            e.target.click();
           }
-        )
-      ]
-    }
+        },
+        onClick: (e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+          setShow(!show);
+          onClick == null ? void 0 : onClick(e);
+        },
+        error,
+        readOnly,
+        removeRoundness,
+        focus: show
+      }, props), {
+        value: displayValue != null ? displayValue : value
+      })
+    ),
+    renderMenu ? renderMenu({
+      id: id ? `${id}-menu` : void 0,
+      positionTo: inputContainerRef,
+      show,
+      setShow,
+      topOffset: props.caption ? -16 : null
+    }) : children
+  ] });
+};
+Select.displayName = "Select";
+
+// src/components/Subheader.tsx
+var import_clsx15 = __toESM(require("clsx"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Subheader = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    align,
+    color,
+    tall,
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "align",
+    "color",
+    "tall",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx15.default)(
+        typography.subheader,
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Subheader.displayName = "Subheader";
+
+// src/components/Checkbox.tsx
+var import_clsx16 = __toESM(require("clsx"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName,
+    id
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName",
+    "id"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = (0, import_clsx16.default)(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = (0, import_clsx16.default)(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = (0, import_clsx16.default)(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = (0, import_clsx16.default)(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = (0, import_clsx16.default)(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = (0, import_clsx16.default)(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = (0, import_clsx16.default)(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
   );
-}
-function TableBodyRow({
-  id,
-  columnVirtualizer,
-  row,
-  // rowVirtualizer,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  virtualRow,
-  showFilterRow,
-  enableColumnSelector = false,
-  locked,
-  pinDirection
-}) {
-  var _a;
-  let visibleCells;
-  if (locked) {
-    visibleCells = pinDirection === "left" ? row.getLeftVisibleCells() : row.getRightVisibleCells();
-  } else {
-    visibleCells = row.getCenterVisibleCells();
-  }
-  const virtualColumns = (_a = columnVirtualizer == null ? void 0 : columnVirtualizer.getVirtualItems()) != null ? _a : [];
-  const columns = locked ? visibleCells : virtualColumns;
-  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
-  const CellElement = locked ? DataGridCell : DragAlongCell;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "tr",
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "label",
     {
-      className: (0, import_clsx14.default)(
-        "transition-colors hover:bg-background-action-secondary-hover",
-        row.getIsSelected() && "!bg-background-action-secondary-hover",
-        isError && "!bg-background-action-critical-secondary-hover",
-        showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+      id,
+      htmlFor: id ? `${id}-input` : void 0,
+      className: (0, import_clsx16.default)(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
       ),
-      style: {
-        display: "flex",
-        position: "absolute",
-        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
-        width: "100%"
-      },
       children: [
-        !locked && virtualPaddingLeft ? (
-          // fake empty column to the left for virtualization scroll padding
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
-        ) : null,
-        columns.map((column) => {
-          var _a2;
-          const cell = locked ? column : visibleCells[column.index];
-          if (!cell) {
-            return;
-          }
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            CellElement,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "input",
+            __spreadValues({
+              id: id ? `${id}-input` : void 0,
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx16.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
             {
-              id: id ? `${id}-cell-${cell.id}` : void 0,
-              cell,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                Tooltip,
-                {
-                  id: id ? `${id}-tooltip-${cell.id}` : void 0,
-                  showOnTruncation: true,
-                  message: cell.getValue(),
-                  position: "bottom",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
-                }
-              )
-            },
-            cell.id
-          );
-        }),
-        !locked && virtualPaddingRight ? (
-          // fake empty column to the right for virtualization scroll padding
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
-        ) : null,
-        enableColumnSelector && !locked && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "p-2", style: { width: "48.8px" } })
+              className: (0, import_clsx16.default)(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Paragraph,
+          {
+            id: id ? `${id}-label` : void 0,
+            as: "span",
+            padded: true,
+            className: (0, import_clsx16.default)(
+              "text-nowrap",
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
       ]
-    },
-    row.id
+    }
   );
-}
-function PinnedColumns(_a) {
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/Button.tsx
+var import_clsx17 = __toESM(require("clsx"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Button = (_a) => {
   var _b = _a, {
-    pinDirection = "left",
-    table,
-    centerHeader,
-    allSelectedAcrossPages,
-    someSelectedAcrossPages,
-    toggleSelectAllAcrossPages
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href,
+    id
   } = _b, props = __objRest(_b, [
-    "pinDirection",
-    "table",
-    "centerHeader",
-    "allSelectedAcrossPages",
-    "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages"
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href",
+    "id"
   ]);
-  var _a2;
-  const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
-  return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "table",
-    {
-      className: (0, import_clsx14.default)(
-        "flex flex-col min-h-min sticky z-20 bg-background-grouped-primary-normal",
-        pinDirection === "left" ? "left-0" : "right-0"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
-            var _a3, _b2, _c;
-            if (!header) {
-              return;
-            }
-            if (typeof header.column.columnDef.header === "string") {
-              const customHeaderWidth = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.headerWidth;
-              return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                DataCellHeader,
-                {
-                  locked: true,
-                  header,
-                  center: centerHeader,
-                  width: customHeaderWidth,
-                  className: (0, import_clsx14.default)(
-                    header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
-                    "group"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
-                    getSortIcon(header.column.getIsSorted()),
-                    !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
-                      header.column.getNextSortingOrder(),
-                      true
-                    ),
-                    header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
-                    !((_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                      "div",
-                      {
-                        onDoubleClick: (e) => {
-                          e.stopPropagation();
-                          header.column.resetSize();
-                        },
-                        onMouseDown: (e) => {
-                          e.stopPropagation();
-                          header.getResizeHandler()(e);
-                        },
-                        onTouchStart: (e) => {
-                          e.stopPropagation();
-                          header.getResizeHandler()(e);
-                        },
-                        className: "absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
-                      }
-                    )
-                  ]
-                },
-                header.id
-              );
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react13.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              Checkbox,
-              {
-                checked: allSelectedAcrossPages,
-                indeterminate: someSelectedAcrossPages,
-                onChange: toggleSelectAllAcrossPages
-              }
-            ) }) : (0, import_react_table.flexRender)(
-              header.column.columnDef.header,
-              header.getContext()
-            ) }, header.id);
-          }) }, headerGroup.id);
-        }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          TableBody,
-          __spreadProps(__spreadValues({}, props), {
-            table,
-            locked: true,
-            pinDirection
-          })
-        )
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx17.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
+  );
+  const navigationVarianStyles = variant === "navigation" && (0, import_clsx17.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-transparent",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
+    "flex-col",
+    paddingUsingComponentGap
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx17.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx17.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx17.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        rightIcon && rightIcon
       ]
-    }
+    })
   );
-}
-var LoadingCell = ({
-  id,
-  column
-}) => {
-  const key = `loading-${column.id}`;
-  if (column.cell === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
-  }
-  if (column.cell === "input") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      DataGridCell,
-      {
-        id: id ? `${id}-${key}` : void 0,
-        component: "input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Input,
-          {
-            id: id ? `${id}-${key}-input` : void 0,
-            align: "left",
-            disabled: true,
-            wrapperClassName: "!rounded-none !border-0"
-          }
-        )
-      },
-      key
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 };
-function ColumnSelectorHeaderCell({
+Button.displayName = "Button";
+
+// src/components/Tooltip.tsx
+var import_clsx18 = __toESM(require("clsx"), 1);
+var import_react17 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Tooltip = ({
   id,
-  table,
-  toggleColumnVisibility,
-  resetColumnVisibility
-}) {
-  const ref = (0, import_react13.useRef)(null);
-  const [show, setShow] = (0, import_react13.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    DataGridCell,
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8
+}) => {
+  const ref = (0, import_react17.useRef)(null);
+  const tooltipRef = (0, import_react17.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react17.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react17.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react17.useState)(false);
+  const updatePosition = () => {
+    if (!ref.current || !tooltipRef.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = rect.top - tooltipRect.height - offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + offset;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.right + offset;
+        break;
+    }
+    setTooltipPosition({ top, left });
+    requestAnimationFrame(() => {
+      setRemoveOpacity(true);
+    });
+  };
+  const handleMouseEnter = () => {
+    if (!showOnTruncation || checkForTextTruncation()) {
+      setIsVisible(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+    setRemoveOpacity(false);
+  };
+  (0, import_react17.useEffect)(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isVisible]);
+  (0, import_react17.useEffect)(() => {
+    if (isVisible) {
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
     {
       id,
-      width: "48",
-      type: "header",
-      color: "text-secondary-normal",
       ref,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Button,
-          {
-            id: id ? `${id}-button` : void 0,
-            onClick: () => setShow((prev) => !prev),
-            variant: "navigation",
-            iconOnly: true,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "tune" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-          Menu,
-          {
-            id: id ? `${id}-menu` : void 0,
-            positionTo: ref,
-            position: "bottom-right",
-            show,
-            setShow,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                Button,
-                {
-                  id: id ? `${id}-reset-button` : void 0,
-                  variant: "tertiary",
-                  onClick: () => {
-                    resetColumnVisibility();
-                    setShow(false);
-                  },
-                  children: "Reset to default"
-                }
+        children,
+        isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
+            {
+              id: id ? `${id}-message` : void 0,
+              ref: tooltipRef,
+              style: {
+                position: "fixed",
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                zIndex: 9999
+              },
+              className: (0, import_clsx18.default)(
+                typography.caption,
+                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                componentPadding,
+                !removeOpacity && "opacity-0"
               ),
-              table.getAllColumns().filter((x) => {
-                var _a;
-                return (_a = x.columnDef.meta) == null ? void 0 : _a.inVisibilityMenu;
-              }).map((column) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                ColumnSelectorMenuOption,
-                {
-                  id: id ? `${id}-option-${column.id}` : void 0,
-                  column,
-                  toggleColumnVisibility
-                },
-                column.id
-              ))
-            ]
-          }
+              children: message
+            }
+          ),
+          document.body
         )
       ]
     }
   );
-}
-function ColumnSelectorMenuOption({
-  id,
-  column,
-  toggleColumnVisibility
-}) {
-  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
-  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    Checkbox,
-    {
-      id: id ? `${id}-checkbox` : void 0,
-      label: label != null ? label : "Unknown",
-      checked: isVisible,
-      onChange: (e) => {
-        setIsVisible(e.target.checked);
-        toggleColumnVisibility(column.id, e.target.checked);
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
+        return isTruncated;
       }
     }
-  ) });
-}
-function getSortIcon(sort, nextSort = false) {
-  const iconClassName = (0, import_clsx14.default)(
-    "text-icon-on-action-primary-normal",
-    nextSort && "hidden group-hover:block"
-  );
-  if (sort === "asc")
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_upward" });
-  if (sort === "desc")
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { size: 16, className: iconClassName, name: "arrow_downward" });
-  return null;
-}
+    return false;
+  }
+};
+Tooltip.displayName = "Tooltip";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DataGrid
+  Button,
+  Checkbox,
+  DataCellHeader,
+  DataGrid,
+  DataGridCell,
+  DragAlongCell,
+  DraggableCellHeader,
+  Icon,
+  Input,
+  Label,
+  Menu,
+  MenuOption,
+  Paragraph,
+  Search,
+  Select,
+  Subheader,
+  Tooltip
 });