@dmsi/wedgekit-react 0.0.4

package/dist/components/DataGrid.cjs

@@ -0,0 +1,2985 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DataGrid.tsx
+var DataGrid_exports = {};
+__export(DataGrid_exports, {
+  DataGrid: () => DataGrid
+});
+module.exports = __toCommonJS(DataGrid_exports);
+var import_react12 = __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");
+
+// src/components/Button.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+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
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href"
+  ]);
+  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({
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 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");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx3.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// src/components/Paragraph.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Element,
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx4.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/Checkbox.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName"
+  ]);
+  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",
+    {
+      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({
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              id: props.id,
+              "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,
+          {
+            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_react8 = 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
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      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";
+
+// src/utils/formatting.tsx
+function getDecimalPlaceholder(decimals) {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`
+  };
+}
+function formatDecimalValue(value, decimals) {
+  if (!value || value === "") {
+    return "";
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+  return numValue.toFixed(decimals);
+}
+function formatCurrencyDisplay(value) {
+  if (!value || value === "") {
+    return "";
+  }
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+}
+
+// src/components/Input.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var InputBase = (_a) => {
+  var _b = _a, {
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    selectOnFocus,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName,
+    focus
+  } = _b, props = __objRest(_b, [
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName",
+    "focus"
+  ]);
+  const attributes = {
+    "data-error": error && !focus || null,
+    "data-focus": focus || null
+  };
+  const inputRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    var _a2;
+    const input = inputRef.current;
+    const focusHandler = () => {
+      input == null ? void 0 : input.select();
+    };
+    if (selectOnFocus) {
+      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
+      return () => {
+        input == null ? void 0 : input.removeEventListener("focus", focusHandler);
+      };
+    }
+  }, [selectOnFocus]);
+  const inputBaseClass = (0, import_clsx7.default)(
+    "w-full",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    componentGap,
+    baseTransition,
+    "outline-transparent outline-2 -outline-offset-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal",
+    "relative"
+  );
+  const inputFocusClass = (0, import_clsx7.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)(
+    "has-disabled:bg-background-action-secondary-disabled"
+  );
+  const inputReadOnlyClass = (0, import_clsx7.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)(
+    "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)(
+    "label",
+    {
+      ref: inputContainerRef,
+      className: (0, import_clsx7.default)(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        componentGap
+      ),
+      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,
+            {
+              className: (0, import_clsx7.default)(
+                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: label
+            }
+          ),
+          required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "span",
+            {
+              className: (0, import_clsx7.default)(typography.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx7.default)(
+              inputBaseClass,
+              !props.disabled && inputInvalidClass,
+              inputFocusClass,
+              inputDisabledClass,
+              inputReadOnlyClass,
+              wrapperClassName
+            ),
+            children: [
+              before,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "input",
+                __spreadProps(__spreadValues(__spreadValues({
+                  ref: (el) => {
+                    inputRef.current = el;
+                  },
+                  type,
+                  required
+                }, props), attributes), {
+                  id: props.id,
+                  className: (0, import_clsx7.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",
+                    align === "right" && "text-right",
+                    align === "center" && "text-center",
+                    componentPaddingXUsingComponentGap,
+                    typography.paragraph,
+                    className,
+                    props.readOnly && !props.disabled && "!px-0"
+                  )
+                })
+              ),
+              after
+            ]
+          }
+        ),
+        caption
+      ]
+    }
+  );
+};
+var Input = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    decimals,
+    uom,
+    removeSearchIcon,
+    value: propValue,
+    onChange,
+    onBlur,
+    onClear
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur",
+    "onClear"
+  ]);
+  const [internalValue, setInternalValue] = (0, import_react2.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
+    var _a2;
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (variant === "currency") {
+      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
+        setInternalValue("");
+        setDisplayValue("");
+      } else {
+        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
+        if (!isNaN(numValue)) {
+          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
+          setInternalValue(formatted);
+          setDisplayValue(formatCurrencyDisplay(formatted));
+        }
+      }
+    } else {
+      setInternalValue(stringValue);
+      setDisplayValue(stringValue);
+    }
+  }, [propValue, decimals, variant]);
+  const getInputProps = () => {
+    var _a2;
+    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    switch (variant) {
+      case "search":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+          className: "!mr-6",
+          value: displayValue
+        });
+      case "finder":
+        return baseProps;
+      case "currency":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          align: "right",
+          type: "text",
+          value: displayValue
+        });
+      case "percentage":
+      case "uom":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          type: "number",
+          align: "right"
+        });
+      default:
+        return baseProps;
+    }
+  };
+  const getBeforeElement = () => {
+    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;
+      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" }) });
+      default:
+        return null;
+    }
+  };
+  const getAfterElement = () => {
+    if (props.after) return props.after;
+    switch (variant) {
+      case "search": {
+        const hasValue = displayValue.length > 0;
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Icon,
+          {
+            name: "close",
+            onClick: handleSearchReset,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      }
+      case "finder":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : 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" }) });
+      default:
+        return null;
+    }
+  };
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+    onClear == null ? void 0 : onClear();
+  };
+  const handleChange = (e) => {
+    const rawValue = e.target.value;
+    if (variant === "search") {
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+    if (variant === "currency") {
+      const raw = rawValue.replace(/,/g, "");
+      if (raw === "") {
+        setInternalValue("");
+        setDisplayValue("");
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      const regex = /^\d*\.?\d*$/;
+      if (!regex.test(raw)) return;
+      const parts = raw.split(".");
+      const currentDecimals = decimals != null ? decimals : 2;
+      if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      setInternalValue(raw);
+      setDisplayValue(formatCurrencyDisplay(raw));
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+      return;
+    }
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    if (variant === "currency") {
+      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
+      setInternalValue(formatted);
+      setDisplayValue(formatCurrencyDisplay(formatted));
+      const asNumber = Number(formatted);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur
+    })
+  );
+};
+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 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)(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
+  );
+};
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.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 Search = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  const inputRef = (0, import_react3.useRef)(null);
+  const inputContainerRef = (0, import_react3.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react3.useRef)(true);
+  const [show, setShow] = (0, import_react3.useState)(false);
+  const [clearing, setClearing] = (0, import_react3.useState)(false);
+  const uniqueId = (0, import_react3.useId)();
+  const searchMenuName = `search-menu-${uniqueId}`;
+  (0, import_react3.useEffect)(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_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)(
+      Input,
+      __spreadValues({
+        variant: "search",
+        inputContainerRef,
+        ref: inputRef,
+        label,
+        wrapperClassName,
+        onClick: (e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+          if (clearing) {
+            setClearing(false);
+            return;
+          }
+          onClick == null ? void 0 : onClick(e);
+          setShow(!show);
+        },
+        onClear: () => {
+          setClearing(true);
+        },
+        onKeyDown: (e) => {
+          setShow(true);
+          if (["ArrowUp", "ArrowDown"].includes(e.key)) {
+            e.preventDefault();
+            const menu = document.querySelector(`[data-menu="${searchMenuName}"]`);
+            const selectedMenuOption = menu == null ? void 0 : menu.querySelector("[data-selected]");
+            if (selectedMenuOption) {
+              const allMenuOptions = Array.from((menu == null ? void 0 : menu.querySelectorAll('[role="menuitem"]')) || []);
+              const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
+              let targetOption;
+              if (e.key === "ArrowDown") {
+                targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0];
+              } else {
+                targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1];
+              }
+              targetOption == null ? void 0 : targetOption.focus();
+            } else {
+              const toFocusMenuOption = e.key === "ArrowDown" ? menu == null ? void 0 : menu.querySelector('[role="menuitem"]') : menu == null ? void 0 : menu.querySelector('[role="menuitem"]:last-child');
+              toFocusMenuOption == null ? void 0 : toFocusMenuOption.focus();
+            }
+          }
+        },
+        error,
+        readOnly,
+        removeRoundness,
+        focus: show
+      }, props)
+    ),
+    renderMenu ? renderMenu({
+      positionTo: inputContainerRef,
+      show,
+      setShow,
+      topOffset: props.caption ? -16 : null,
+      autoFocusOff: true,
+      menuName: searchMenuName
+    }) : children
+  ] });
+};
+Search.displayName = "Search";
+
+// src/components/Menu.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_react6 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/useMenuSystem.tsx
+var import_react5 = require("react");
+
+// src/components/useMatchesMedia.tsx
+var import_react4 = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react4.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react4.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+  return isMobile;
+};
+
+// src/components/useMenuSystem.tsx
+function useSubMenuSystem(mobilePositionTo) {
+  const [activeMenus, setActiveMenus] = (0, import_react5.useState)(
+    {}
+  );
+  const [activeMenu, setActiveMenu] = (0, import_react5.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react5.useState)(null);
+  const menuRootRef = (0, import_react5.useRef)(null);
+  const subMenuRefs = (0, import_react5.useRef)({});
+  const hoverTimeoutRef = (0, import_react5.useRef)(null);
+  const closeTimeoutRef = (0, import_react5.useRef)(null);
+  const isMobile = useMatchesMobile();
+  const toggleMenu = (menuId, level) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setActiveMenu(menuId);
+    setCurrentSubMenuLevel(level);
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      if (newActiveMenus[level] === menuId) {
+        delete newActiveMenus[level];
+      } else {
+        newActiveMenus[level] = menuId;
+      }
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) > level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      return newActiveMenus;
+    });
+  };
+  const openMenu = (menuId, level) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      newActiveMenus[level] = menuId;
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) > level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      return newActiveMenus;
+    });
+  };
+  const openMenuWithDelay = (menuId, level, delay = 150) => {
+    if (isMobile) {
+      return;
+    }
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = setTimeout(() => {
+      openMenu(menuId, level);
+    }, delay);
+  };
+  const closeMenuWithDelay = (level, delay = 500) => {
+    if (isMobile) {
+      return;
+    }
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeSubMenuLevel(level);
+    }, delay);
+  };
+  const cancelCloseTimeout = () => {
+    if (isMobile) {
+      return;
+    }
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  };
+  const closeSubMenuLevel = (level) => {
+    setActiveMenus((prev) => {
+      const newActiveMenus = __spreadValues({}, prev);
+      delete newActiveMenus[level];
+      Object.keys(newActiveMenus).forEach((key) => {
+        if (Number(key) >= level) {
+          delete newActiveMenus[Number(key)];
+        }
+      });
+      if (isMobile) {
+        const newSubMenuLevel = level - 1;
+        setCurrentSubMenuLevel(newSubMenuLevel);
+        const newActiveMenu = newActiveMenus[newSubMenuLevel];
+        if (Object.keys(newActiveMenus).length > 0 && newActiveMenu) {
+          setActiveMenu(newActiveMenu);
+        }
+      }
+      return newActiveMenus;
+    });
+  };
+  const registerSubMenu = (id, element) => {
+    subMenuRefs.current[id] = element;
+  };
+  const isMenuActive = (menuId, level) => {
+    return activeMenus[level] === menuId;
+  };
+  (0, import_react5.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      var _a;
+      if (Object.keys(activeMenus).length === 0) return;
+      const target = event.target;
+      if ((_a = menuRootRef.current) == null ? void 0 : _a.contains(target)) return;
+      const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
+        const submenuEl = subMenuRefs.current[id];
+        return submenuEl == null ? void 0 : submenuEl.contains(target);
+      });
+      if (!isInsideActiveSubmenu) {
+        setActiveMenus({});
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [activeMenus]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getAllFocusableMenuElements = () => {
+    const elements = [];
+    if (menuRootRef.current) {
+      elements.push(...Array.from(menuRootRef.current.children));
+    }
+    Object.values(activeMenus).forEach((menuId) => {
+      const submenuEl = subMenuRefs.current[menuId];
+      if (submenuEl) {
+        elements.push(...Array.from(submenuEl.children));
+      }
+    });
+    return elements;
+  };
+  const findCurrentMenuLevel = (element) => {
+    let current = element.parentElement;
+    while (current) {
+      const level = current.getAttribute("data-menu-level");
+      if (level !== null) {
+        return parseInt(level, 10);
+      }
+      current = current.parentElement;
+    }
+    return 0;
+  };
+  const getMenuElementsAtLevel = (level) => {
+    var _a;
+    if (level === 0 && menuRootRef.current) {
+      return Array.from(menuRootRef.current.children);
+    }
+    const menuId = (_a = Object.entries(activeMenus).find(([, id]) => {
+      const submenuEl = subMenuRefs.current[id];
+      return submenuEl && submenuEl.getAttribute("data-menu-level") === level.toString();
+    })) == null ? void 0 : _a[1];
+    if (menuId) {
+      const submenuEl = subMenuRefs.current[menuId];
+      if (submenuEl) {
+        return Array.from(submenuEl.children);
+      }
+    }
+    return [];
+  };
+  return {
+    menuRootRef,
+    activeMenus,
+    openMenu,
+    isMenuActive,
+    registerSubMenu,
+    closeSubMenuLevel,
+    getAllFocusableMenuElements,
+    findCurrentMenuLevel,
+    getMenuElementsAtLevel,
+    mobileHide: isMobile && Object.keys(activeMenus).length > 0,
+    listeners: {
+      onSubMenuHover: openMenuWithDelay,
+      onSubMenuLeave: closeMenuWithDelay,
+      onSubMenuEnter: cancelCloseTimeout,
+      toggleMenu,
+      mobilePositionTo,
+      activeMenu,
+      currentSubMenuLevel,
+      closeSubMenuLevel
+    }
+  };
+}
+function useMenuPosition(elementRef, position = "bottom", options) {
+  const [menuPosition, setMenuPosition] = (0, import_react5.useState)({
+    top: 0,
+    left: 0,
+    minWidth: 0
+  });
+  const isMobile = useMatchesMobile();
+  const updatePosition = (0, import_react5.useCallback)(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!(elementRef == null ? void 0 : elementRef.current)) return;
+    const triggerRect = elementRef.current.getBoundingClientRect();
+    const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const menuWidth = (menuRect == null ? void 0 : menuRect.width) || triggerRect.width;
+    const topOffset = (_c = options == null ? void 0 : options.topOffset) != null ? _c : 4;
+    let top = 0;
+    let left = 0;
+    if (position === "bottom" || position === "bottom-right") {
+      top = triggerRect.top + triggerRect.height + topOffset;
+    } else {
+      top = triggerRect.top;
+    }
+    if (position === "bottom") {
+      left = triggerRect.left + window.scrollX;
+    } else if (position === "bottom-right") {
+      left = triggerRect.right + window.scrollX - menuWidth;
+    } else if (position === "right") {
+      left = triggerRect.right + window.scrollX;
+    }
+    const overflowsLeftViewport = left + menuWidth > viewportWidth;
+    if (overflowsLeftViewport) {
+      left = triggerRect.left - menuWidth;
+    }
+    if (isMobile) {
+      left = triggerRect.left + menuWidth > viewportWidth ? Math.max(viewportWidth - menuWidth, 0) - 8 : triggerRect.left;
+      top = ((_f = (_e = (_d = elementRef.current.parentElement) == null ? void 0 : _d.getBoundingClientRect()) == null ? void 0 : _e.top) != null ? _f : 0) + ((_i = (_h = (_g = elementRef.current.parentElement) == null ? void 0 : _g.getBoundingClientRect()) == null ? void 0 : _h.height) != null ? _i : 0) + topOffset;
+    }
+    setMenuPosition({
+      top,
+      left,
+      minWidth: triggerRect.width
+    });
+  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
+  (0, import_react5.useEffect)(() => {
+    if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
+    const handleClickOutside = (event) => {
+      var _a, _b, _c, _d, _e;
+      const target = event.target;
+      if ((_a = elementRef.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(target)) return;
+      if ((_d = options.additionalRefs) == null ? void 0 : _d.some((ref) => {
+        var _a2;
+        return (_a2 = ref.current) == null ? void 0 : _a2.contains(target);
+      }))
+        return;
+      (_e = options.setIsOpen) == null ? void 0 : _e.call(options, false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [
+    options,
+    elementRef,
+    options == null ? void 0 : options.isOpen,
+    options == null ? void 0 : options.setIsOpen,
+    options == null ? void 0 : options.menuRef,
+    options == null ? void 0 : options.additionalRefs
+  ]);
+  (0, import_react5.useEffect)(() => {
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (elementRef == null ? void 0 : elementRef.current) {
+      resizeObserver.observe(elementRef.current);
+    }
+    window.addEventListener("scroll", updatePosition);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [elementRef, updatePosition]);
+  return { menuPosition, updatePosition };
+}
+
+// src/utils.ts
+function findDocumentRoot(element) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment."
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.document.body;
+  }
+  var currentElement = element;
+  while (currentElement && currentElement.parentNode) {
+    if (currentElement.parentNode === document) {
+      return document.body;
+    } else if (currentElement.parentNode instanceof DocumentFragment) {
+      return currentElement.parentNode;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return window.document.body;
+}
+
+// src/components/Menu.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Menu = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    ref,
+    positionTo,
+    mobilePositionTo,
+    show,
+    setShow,
+    position = "bottom",
+    maxHeight: customMaxHeight,
+    topOffset,
+    mobileBackMenuOption,
+    mobileHide,
+    useDefaultMinWidth,
+    autoFocusOff,
+    menuName
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "ref",
+    "positionTo",
+    "mobilePositionTo",
+    "show",
+    "setShow",
+    "position",
+    "maxHeight",
+    "topOffset",
+    "mobileBackMenuOption",
+    "mobileHide",
+    "useDefaultMinWidth",
+    "autoFocusOff",
+    "menuName"
+  ]);
+  const internalRef = (0, import_react6.useRef)(null);
+  const actualRef = ref || internalRef;
+  const [maxHeight, setMaxHeight] = (0, import_react6.useState)("180px");
+  const isMobile = useMatchesMobile();
+  const { menuPosition, updatePosition } = useMenuPosition(
+    isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
+    position,
+    {
+      isOpen: show,
+      setIsOpen: setShow,
+      menuRef: internalRef,
+      topOffset
+    }
+  );
+  (0, import_react6.useEffect)(() => {
+    const raf = requestAnimationFrame(() => {
+      if (!actualRef || !actualRef.current || customMaxHeight) {
+        return;
+      }
+      if (actualRef.current.childElementCount > 4) {
+        let accumulatedHeight = 0;
+        Array.from(actualRef.current.children).forEach((child, index) => {
+          if (index >= 5) {
+            return;
+          }
+          accumulatedHeight += child.clientHeight;
+        });
+        accumulatedHeight = accumulatedHeight / 5 * 4.5;
+        setMaxHeight(`${accumulatedHeight}px`);
+      }
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+    };
+  }, [actualRef, customMaxHeight]);
+  (0, import_react6.useEffect)(() => {
+    if (!show) {
+      return;
+    }
+    initializeMenuFocus();
+    updatePosition();
+  }, [show, updatePosition]);
+  (0, import_react6.useEffect)(() => {
+    if (!show || !setShow) {
+      return;
+    }
+    const handleEscapeKey = (event) => {
+      var _a2;
+      if (event.key !== "Escape") {
+        return;
+      }
+      setShow(false);
+      (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
+    };
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [show, setShow, positionTo]);
+  return show && (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: setRefs,
+        className: (0, import_clsx8.default)(
+          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
+          "fixed",
+          "z-50",
+          mobileHide && "opacity-0 pointer-events-none",
+          className
+        )
+      }, props), {
+        style: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props.style), {
+          maxHeight: customMaxHeight || maxHeight
+        }), menuPosition), {
+          minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth
+        }),
+        onKeyDown: handleKeydown,
+        onMouseDown: stopPropagation,
+        onMouseUp: stopPropagation,
+        onTouchStart: stopPropagation,
+        onTouchEnd: stopPropagation,
+        tabIndex: -1,
+        "data-menu": menuName != null ? menuName : "",
+        children: [
+          mobileBackMenuOption == null ? void 0 : mobileBackMenuOption(),
+          children
+        ]
+      })
+    ),
+    findDocumentRoot(internalRef.current)
+  );
+  function handleKeydown(e) {
+    var _a2, _b2;
+    if (!internalRef.current) {
+      return;
+    }
+    if (e.key !== "Escape") {
+      e.stopPropagation();
+    }
+    const menuOptions = Array.from(
+      internalRef.current.querySelectorAll('[role="menuitem"]')
+    );
+    if (menuOptions.length === 0) {
+      return;
+    }
+    let currentIndex = -1;
+    const focusedElement = document.activeElement;
+    for (let i = 0; i < menuOptions.length; i++) {
+      if (menuOptions[i] === focusedElement) {
+        currentIndex = i;
+        break;
+      }
+    }
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
+        menuOptions[nextIndex].focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
+        menuOptions[prevIndex].focus();
+        break;
+      }
+      case "Home":
+        e.preventDefault();
+        menuOptions[0].focus();
+        break;
+      case "End":
+        e.preventDefault();
+        menuOptions[menuOptions.length - 1].focus();
+        break;
+      case "Enter":
+      case " ":
+      case "ArrowRight":
+        e.preventDefault();
+        if (currentIndex >= 0) {
+          menuOptions[currentIndex].click();
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
+        (_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
+        break;
+    }
+  }
+  function initializeMenuFocus() {
+    var _a2, _b2, _c;
+    if (!autoFocusOff) {
+      (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
+    }
+    const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
+      "[data-selected]"
+    );
+    const firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
+      '[role="menuitem"]'
+    );
+    const targetElement = selectedOption || firstMenuItem;
+    if (!targetElement) {
+      return;
+    }
+    targetElement.scrollIntoView({
+      block: "nearest",
+      behavior: "instant"
+    });
+    if (autoFocusOff) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      targetElement.focus();
+    });
+  }
+  function setRefs(node) {
+    internalRef.current = node;
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  }
+  function stopPropagation(e) {
+    e.stopPropagation();
+  }
+};
+Menu.displayName = "Menu";
+
+// src/components/MenuOption.tsx
+var import_clsx9 = __toESM(require("clsx"), 1);
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MenuOption = ({
+  children,
+  disabled = false,
+  variant = "normal",
+  value,
+  before,
+  after,
+  subMenu,
+  onClick,
+  selected,
+  ref,
+  onSubMenuHover,
+  onSubMenuLeave,
+  onSubMenuEnter,
+  toggleMenu,
+  subMenuLevel = 1,
+  currentSubMenuLevel,
+  closeSubMenuLevel,
+  activeMenu,
+  mobilePositionTo,
+  highlightMatchingText = false,
+  menuValue
+}) => {
+  const uniqueId = (0, import_react7.useId)();
+  const internalRef = (0, import_react7.useRef)(null);
+  const actualRef = ref || internalRef;
+  const menuId = (0, import_react7.useRef)(`menu-${uniqueId}`);
+  const isMobile = useMatchesMobile();
+  const handleMouseEnter = () => {
+    if (subMenu && onSubMenuHover && !disabled) {
+      onSubMenuHover(menuId.current, subMenuLevel);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (subMenu && onSubMenuLeave && !disabled) {
+      onSubMenuLeave(subMenuLevel);
+    }
+  };
+  const handleSubMenuEnter = () => {
+    if (onSubMenuEnter) {
+      onSubMenuEnter();
+    }
+  };
+  const additionalAttributes = {
+    "data-selected": selected || null
+  };
+  const svgStyles = (0, import_clsx9.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)(
+    "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)(
+    "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 renderChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: actualRef,
+        className: (0, import_clsx9.default)(
+          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          svgStyles,
+          componentGap,
+          componentPadding,
+          baseTransition,
+          normalStyles,
+          normalDisabledStyles,
+          actionStyles,
+          actionDisabledStyles,
+          disabledStyles
+        ),
+        "data-value": value || children,
+        onClick: () => {
+          onClick == null ? void 0 : onClick(menuId.current, value || children);
+          if (subMenu) {
+            toggleMenu(menuId.current, subMenuLevel);
+          }
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }, additionalAttributes), {
+        tabIndex: -1,
+        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 }),
+          variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label, { padded: true, className: textLabelStyles, children: renderChildren }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: renderChildren }),
+          renderAfterProp()
+        ]
+      })
+    ),
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        onMouseEnter: handleSubMenuEnter,
+        onMouseLeave: handleMouseLeave,
+        "data-submenu-parent": menuId.current,
+        "data-menu-level": subMenuLevel + 1,
+        children: subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })
+      }
+    )
+  ] });
+  function renderAfterProp() {
+    if (after) {
+      return after;
+    }
+    if (subMenu && after !== null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_right" });
+    }
+  }
+  function mobileBackMenuOption() {
+    if (!isMobile) {
+      return;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      MenuOption,
+      {
+        onClick: () => {
+          closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
+        },
+        variant: "action",
+        before: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "chevron_left" }),
+        children: "Back"
+      }
+    );
+  }
+};
+MenuOption.displayName = "MenuOption";
+function highlightMatch(text, searchValue) {
+  if (!searchValue || !searchValue.trim()) {
+    return text;
+  }
+  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+  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
+  );
+}
+
+// src/components/DataGridCell.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DataGridCell = (0, import_react8.memo)(
+  (_a) => {
+    var _b = _a, {
+      type = "default",
+      component = "static",
+      children,
+      className,
+      locked = false,
+      noPadding = false,
+      paddedLeft = false,
+      style,
+      onClick,
+      onRightClick,
+      error,
+      warning,
+      center,
+      width
+    } = _b, props = __objRest(_b, [
+      "type",
+      "component",
+      "children",
+      "className",
+      "locked",
+      "noPadding",
+      "paddedLeft",
+      "style",
+      "onClick",
+      "onRightClick",
+      "error",
+      "warning",
+      "center",
+      "width"
+    ]);
+    const Element = type === "header" ? "th" : "td";
+    const timerRef = (0, import_react8.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react8.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react8.useState)(false);
+    (0, import_react8.useEffect)(() => {
+      return () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      };
+    }, []);
+    const handlePointerDown = (_event) => {
+      setIsPointerPressed(true);
+      timerRef.current = window.setTimeout(() => {
+        setIsGrabbing(true);
+      }, 500);
+    };
+    const handlePointerUp = (event) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      const rightClick = event.nativeEvent instanceof MouseEvent && event.nativeEvent.button === 2;
+      if (!isGrabbing && onClick && !rightClick && isPointerPressed) {
+        onClick(event);
+      }
+      if (rightClick && onRightClick) {
+        onRightClick();
+      }
+      setIsGrabbing(false);
+      setIsPointerPressed(false);
+    };
+    const handlePointerLeave = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+    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)(
+      headerTypeStyles,
+      buttonComponentStyles,
+      headerBgStyles,
+      lockedHeaderBgStyles,
+      iconComponentStyles,
+      className,
+      "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+      "focus-within:!z-10",
+      component === "input" && "border",
+      component === "input" && !error && !warning && "border-border-primary-normal",
+      component === "input" && error && "border-border-primary-error",
+      component === "input" && warning && "border-background-warning-normal",
+      !["button", "icon"].includes(component) && !noPadding && "p-2",
+      paddedLeft && "pl-2",
+      component === "icon" && "border-l",
+      isGrabbing && "!cursor-grabbing",
+      component === "checkbox" || center && "justify-center"
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Element,
+      __spreadProps(__spreadValues({
+        className: (0, import_clsx10.default)("flex", !width && "flex-1"),
+        style: { width }
+      }, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: cellClasses,
+            style: __spreadValues({}, style),
+            onMouseDown: handlePointerDown,
+            onMouseUp: handlePointerUp,
+            onMouseLeave: handlePointerLeave,
+            onTouchStart: handlePointerDown,
+            onTouchEnd: handlePointerUp,
+            onTouchCancel: handlePointerLeave,
+            onContextMenu: (e) => e.preventDefault(),
+            children
+          }
+        )
+      })
+    );
+  }
+);
+DataGridCell.displayName = "DataGridCell";
+function DraggableCellHeader(_a) {
+  var _b = _a, {
+    header,
+    children,
+    locked = false
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children",
+    "locked"
+  ]);
+  var _a2;
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
+    id: header.column.id
+  });
+  const [showMenu, setShowMenu] = (0, import_react8.useState)(false);
+  const [filter, setFilter] = (0, import_react8.useState)(
+    (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
+  );
+  const {
+    menuRootRef,
+    isMenuActive,
+    registerSubMenu,
+    listeners: subMenuListeners,
+    mobileHide
+  } = useSubMenuSystem(node);
+  (0, import_react8.useEffect)(() => {
+    const handler = setTimeout(() => {
+      header.column.setFilterValue(filter);
+    }, 500);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [filter]);
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+    "--color-text-primary-normal": "var(--color-neutral-000)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    DataGridCell,
+    __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      locked,
+      type: "header",
+      component: "header",
+      ref: setNodeRef,
+      colSpan: header.colSpan,
+      style
+    }, props), {
+      onClick: header.column.getToggleSortingHandler(),
+      onRightClick: () => setShowMenu(!showMenu)
+    }), locked ? {} : attributes), locked ? {} : listeners), {
+      children: [
+        children,
+        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Menu,
+          {
+            ref: menuRootRef,
+            positionTo: node,
+            show: showMenu,
+            setShow: setShowMenu,
+            mobileHide,
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              MenuOption,
+              __spreadProps(__spreadValues({}, subMenuListeners), {
+                subMenu: (_b2) => {
+                  var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    Menu,
+                    __spreadProps(__spreadValues({}, props2), {
+                      show: isMenuActive(menuId, subMenuLevel),
+                      ref: (el) => {
+                        registerSubMenu(menuId, el);
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_clsx10.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          Search,
+                          {
+                            onChange: (event) => {
+                              setFilter(event.target.value);
+                            },
+                            onKeyDown: (event) => {
+                              if ([" ", "Space"].includes(event.key)) {
+                                event.stopPropagation();
+                              }
+                            },
+                            value: filter != null ? filter : ""
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          MenuOption,
+                          {
+                            onClick: handleFilterFnChange,
+                            before: menuOptionIcon("includesString"),
+                            children: "Contains"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          MenuOption,
+                          {
+                            onClick: handleFilterFnChange,
+                            before: menuOptionIcon("startsWith"),
+                            children: "Starts with"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          MenuOption,
+                          {
+                            onClick: handleFilterFnChange,
+                            before: menuOptionIcon("endsWith"),
+                            children: "Ends with"
+                          }
+                        )
+                      ]
+                    })
+                  );
+                },
+                children: "Filter"
+              })
+            )
+          }
+        )
+      ]
+    })
+  );
+  function menuOptionIcon(value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Icon,
+      {
+        name: "check",
+        className: (0, import_clsx10.default)(
+          header.column.columnDef.filterFn !== value && "text-transparent"
+        )
+      }
+    );
+  }
+  function handleFilterFnChange(_id, value) {
+    var _a3;
+    let filterFn = "includesString";
+    const currentFilterFn = header.column.columnDef.filterFn;
+    if ((value == null ? void 0 : value.toLowerCase()) === "starts with") {
+      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "ends with") {
+      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
+    }
+    if ((value == null ? void 0 : value.toLowerCase()) === "contains") {
+      filterFn = currentFilterFn === "includesString" ? "auto" : "includesString";
+    }
+    header.column.columnDef.filterFn = filterFn;
+    header.column.setFilterValue((_a3 = header.column.getFilterValue()) != null ? _a3 : "");
+  }
+}
+DraggableCellHeader.displayName = "DraggableCellHeader";
+function DragAlongCell(_a) {
+  var _b = _a, {
+    cell,
+    children
+  } = _b, props = __objRest(_b, [
+    "cell",
+    "children"
+  ]);
+  const { isDragging, setNodeRef, transform } = (0, import_sortable.useSortable)({
+    id: cell.column.id
+  });
+  const style = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: isDragging ? 1 : 0,
+    width: cell.column.getSize(),
+    minWidth: "min-content"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
+}
+DragAlongCell.displayName = "DragAlongCell";
+
+// src/components/Select.tsx
+var import_react9 = require("react");
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Select = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    className,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "className",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  const inputRef = (0, import_react9.useRef)(null);
+  const inputContainerRef = (0, import_react9.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react9.useRef)(true);
+  const [show, setShow] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
+    var _a2;
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [props.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      InputBase,
+      __spreadValues({
+        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)
+    ),
+    renderMenu ? renderMenu({
+      positionTo: inputContainerRef,
+      show,
+      setShow,
+      topOffset: props.caption ? -16 : null
+    }) : children
+  ] });
+};
+Select.displayName = "Select";
+
+// src/components/Subheader.tsx
+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
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "align",
+    "color",
+    "tall"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      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
+    })
+  );
+};
+Subheader.displayName = "Subheader";
+
+// src/components/Tooltip.tsx
+var import_clsx13 = __toESM(require("clsx"), 1);
+var import_react10 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8
+}) => {
+  const ref = (0, import_react10.useRef)(null);
+  const tooltipRef = (0, import_react10.useRef)(null);
+  const [isTruncated, setIsTruncated] = (0, import_react10.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react10.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react10.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react10.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_react10.useEffect)(() => {
+    if (isVisible && tooltipRef.current) {
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+  }, [isVisible]);
+  (0, import_react10.useEffect)(() => {
+    if (isVisible) {
+      window.addEventListener("resize", updatePosition);
+      return () => window.removeEventListener("resize", updatePosition);
+    }
+  }, [isVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ref,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        isVisible && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              ref: tooltipRef,
+              style: {
+                position: "fixed",
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                zIndex: 9999
+              },
+              className: (0, import_clsx13.default)(
+                typography.caption,
+                "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                !removeOpacity && "opacity-0"
+              ),
+              children: message
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+  function checkForTextTruncation() {
+    if (showOnTruncation && ref.current) {
+      const paragraph = ref.current.querySelector("p");
+      if (paragraph) {
+        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
+        setIsTruncated(isTruncated2);
+        return isTruncated2;
+      }
+    }
+    return false;
+  }
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/useInfiniteScroll.tsx
+var import_react11 = require("react");
+function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true
+  // ✅ Add this
+}) {
+  (0, import_react11.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 = (
+  // fake empty column to the left for virtualization scroll padding
+  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
+    );
+  };
+}
+function DataGrid({
+  data,
+  columns,
+  status,
+  isLoadingMore = false,
+  onLoadMore,
+  pagination,
+  showFilterRow = false,
+  hasMore = false,
+  sorting: externalSorting,
+  onSortingChange,
+  columnFilters: externalColumnFilters,
+  onColumnFiltersChange,
+  rowSelection: externalRowSelection,
+  onRowSelectionChange,
+  filteredSortedData,
+  totalRowCount,
+  hideStatusBar,
+  centerHeader
+}) {
+  var _a, _b, _c, _d, _e;
+  const [columnOrder, setColumnOrder] = (0, import_react12.useState)(
+    () => columns.map((c) => c.id)
+  );
+  const [localSorting, setLocalSorting] = (0, import_react12.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react12.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react12.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 id = (0, import_react12.useId)();
+  const containerRef = import_react12.default.useRef(null);
+  const table = (0, import_react_table.useReactTable)({
+    columns,
+    data,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    columnResizeMode: "onChange",
+    getRowId: (row, index) => {
+      var _a2;
+      return String((_a2 = row.id) != null ? _a2 : index + 1);
+    },
+    state: {
+      columnOrder,
+      sorting: sortingState,
+      columnFilters: columnFilterState,
+      rowSelection
+    },
+    onColumnOrderChange: setColumnOrder,
+    onSortingChange: adaptTableStateSetter(setSortingState),
+    onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
+    onRowSelectionChange: adaptTableStateSetter(setRowSelection),
+    filterFns: {
+      startsWith: (row, columnId, filterValue) => {
+        var _a2;
+        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().startsWith(filterValue.toLowerCase());
+      },
+      endsWith: (row, columnId, filterValue) => {
+        var _a2;
+        return (_a2 = row.getValue(columnId)) == null ? void 0 : _a2.toLowerCase().endsWith(filterValue.toLowerCase());
+      }
+    }
+  });
+  const allRowIds = pagination ? (_a = filteredSortedData == null ? void 0 : filteredSortedData.map((row) => String(row.id))) != null ? _a : [] : Array.from(
+    { length: totalRowCount != null ? totalRowCount : data.length },
+    (_, i) => String(i + 1)
+  );
+  const allSelectedAcrossPages = allRowIds.every((id2) => rowSelection[id2]);
+  const someSelectedAcrossPages = !allSelectedAcrossPages && allRowIds.some((id2) => rowSelection[id2]);
+  const toggleSelectAllAcrossPages = () => {
+    setRowSelection((prev) => {
+      const isSelecting = !allSelectedAcrossPages;
+      if (isSelecting) {
+        const newSelection = {};
+        for (const id2 of allRowIds) {
+          newSelection[id2] = true;
+        }
+        return __spreadValues(__spreadValues({}, prev), newSelection);
+      } else {
+        const updatedSelection = __spreadValues({}, prev);
+        for (const id2 of allRowIds) {
+          delete updatedSelection[id2];
+        }
+        return updatedSelection;
+      }
+    });
+  };
+  useInfiniteScroll({
+    containerRef,
+    onLoadMore: onLoadMore != null ? onLoadMore : () => {
+    },
+    isLoading: isLoadingMore,
+    enabled: !pagination
+  });
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((prev) => {
+        const oldIndex = prev.indexOf(active.id);
+        const newIndex = prev.indexOf(over.id);
+        return (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
+      });
+    }
+  };
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.MouseSensor),
+    (0, import_core.useSensor)(import_core.TouchSensor),
+    (0, import_core.useSensor)(import_core.KeyboardSensor)
+  );
+  const visibleColumns = table.getVisibleLeafColumns();
+  const columnVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
+    getScrollElement: () => containerRef.current,
+    horizontal: true,
+    overscan: 3
+    //how many columns to render on each side off screen each way
+  });
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
+    virtualPaddingLeft = (_c = (_b = virtualColumns[0]) == null ? void 0 : _b.start) != null ? _c : 0;
+    virtualPaddingRight = columnVirtualizer.getTotalSize() - ((_e = (_d = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _d.end) != null ? _e : 0);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core.DndContext,
+    {
+      id,
+      collisionDetection: import_core.closestCenter,
+      modifiers: [import_modifiers.restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_sortable2.SortableContext,
+        {
+          items: columnOrder,
+          strategy: import_sortable2.horizontalListSortingStrategy,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col flex-1 max-h-screen m-4 rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "overflow-auto scrollbar-thin max-h-full relative contain-paint will-change-transform",
+                ref: containerRef,
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full grid", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: "flex w-full", children: [
+                    virtualPaddingLeft ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      "th",
+                      {
+                        style: { display: "flex", width: virtualPaddingLeft }
+                      }
+                    ) : null,
+                    virtualColumns.map((virtualColumn) => {
+                      var _a2, _b2, _c2, _d2, _e2;
+                      const header = headerGroup.headers[virtualColumn.index];
+                      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)(
+                          DraggableCellHeader,
+                          {
+                            header,
+                            locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
+                            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 }),
+                              !((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.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_react12.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        DataGridCell,
+                        {
+                          type: "header",
+                          component: "checkbox",
+                          locked: (_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.locked,
+                          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);
+                    }),
+                    virtualPaddingRight ? (
+                      //fake empty column to the right for virtualization scroll padding
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        "th",
+                        {
+                          style: { display: "flex", width: virtualPaddingRight }
+                        }
+                      )
+                    ) : null
+                  ] }, headerGroup.id)) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    TableBody,
+                    {
+                      columnVirtualizer,
+                      table,
+                      tableContainerRef: containerRef,
+                      virtualPaddingLeft,
+                      virtualPaddingRight,
+                      pagination,
+                      isLoadingMore,
+                      hasMore,
+                      showFilterRow
+                    }
+                  )
+                ] })
+              }
+            ),
+            table.getRowModel().rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              "div",
+              {
+                className: (0, import_clsx14.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." })
+                ]
+              }
+            ),
+            !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)(
+                    Select,
+                    {
+                      wrapperClassName: "!w-20",
+                      value: pagination.pageSize.toString(),
+                      onChange: (e) => {
+                        var _a2;
+                        return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, Number(e.target.value));
+                      },
+                      renderMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Menu, __spreadProps(__spreadValues({}, props), { onClick: () => props.setShow(false), children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        MenuOption,
+                        {
+                          selected: pagination.pageSize === option,
+                          onClick: () => {
+                            var _a2;
+                            return (_a2 = pagination.onPageSizeChange) == null ? void 0 : _a2.call(pagination, option);
+                          },
+                          children: option
+                        },
+                        option
+                      )) }))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label, { className: "whitespace-nowrap", children: "Per Page" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    Button,
+                    {
+                      iconOnly: true,
+                      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.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: [
+                    pagination.pageIndex * pagination.pageSize + 1,
+                    " -",
+                    " ",
+                    Math.min(
+                      (pagination.pageIndex + 1) * pagination.pageSize,
+                      pagination.total
+                    ),
+                    " ",
+                    "of ",
+                    pagination.total
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    Button,
+                    {
+                      iconOnly: true,
+                      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron_right" }),
+                      onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
+                      variant: "tertiary",
+                      disabled: (pagination.pageIndex + 1) * pagination.pageSize >= pagination.total
+                    }
+                  )
+                ] })
+              ] }),
+              status && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { children: status })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+DataGrid.displayName = "DataGrid";
+function TableBody({
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  pagination,
+  isLoadingMore,
+  hasMore,
+  showFilterRow
+}) {
+  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();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "tbody",
+    {
+      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",
+          {
+            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: table.getHeaderGroups().flatMap(
+              (x) => x.headers.map((header) => {
+                var _a, _b, _c, _d, _e;
+                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  DragAlongCell,
+                  {
+                    noPadding: true,
+                    cell: header,
+                    width: (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth,
+                    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,
+                      {
+                        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_runtime14.jsx)(
+            TableBodyRow,
+            {
+              columnVirtualizer,
+              row,
+              rowVirtualizer,
+              virtualPaddingLeft,
+              virtualPaddingRight,
+              virtualRow,
+              showFilterRow
+            },
+            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, { column: column.columnDef }, column.id))
+          }
+        )
+      ]
+    }
+  );
+}
+function TableBodyRow({
+  columnVirtualizer,
+  row,
+  // rowVirtualizer,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualRow,
+  showFilterRow
+}) {
+  const visibleCells = row.getVisibleCells();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const isError = typeof row.original === "object" && row.original !== null && "rowState" in row.original && row.original.rowState === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "tr",
+    {
+      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"
+      ),
+      style: {
+        display: "flex",
+        position: "absolute",
+        transform: `translateY(${showFilterRow ? virtualRow.start + 40 : virtualRow.start}px)`,
+        width: "100%"
+      },
+      children: [
+        virtualPaddingLeft ? (
+          // fake empty column to the left for virtualization scroll padding
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
+        ) : null,
+        virtualColumns.map((virtualColumn) => {
+          var _a;
+          const cell = visibleCells[virtualColumn.index];
+          return ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DragAlongCell, { cell, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Tooltip,
+            {
+              showOnTruncation: true,
+              message: cell.getValue(),
+              position: "bottom",
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { addOverflow: true, tall: true, children: cell.getValue() })
+            }
+          ) }, cell.id);
+        }),
+        virtualPaddingRight ? (
+          // fake empty column to the right for virtualization scroll padding
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { style: { display: "flex", width: virtualPaddingRight } })
+        ) : null
+      ]
+    },
+    row.id
+  );
+}
+var LoadingCell = ({
+  column
+}) => {
+  const key = `loading-${column.id}`;
+  if (column.cell === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox, { disabled: true }) }, key);
+  }
+  if (column.cell === "input") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { component: "input", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Input,
+      {
+        align: "left",
+        disabled: true,
+        wrapperClassName: "!rounded-none !border-0"
+      }
+    ) }, key);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataGridCell, { 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 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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataGrid
+});