@dmsi/wedgekit-react 0.0.1242 → 1.0.0

package/dist/components/DataGridCell.cjs

@@ -1,2531 +0,0 @@
-"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/DataGridCell.tsx
-var DataGridCell_exports = {};
-__export(DataGridCell_exports, {
-  DataCellHeader: () => DataCellHeader,
-  DataGridCell: () => DataGridCell,
-  DragAlongCell: () => DragAlongCell,
-  DraggableCellHeader: () => DraggableCellHeader
-});
-module.exports = __toCommonJS(DataGridCell_exports);
-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_clsx9 = __toESM(require("clsx"), 1);
-var import_react12 = require("react");
-
-// 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"
-  ),
-  breadcrumb: (0, import_clsx.default)(
-    "font-sans font-normal",
-    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
-    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
-  )
-};
-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 paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
-  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-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 componentPaddingX = (0, import_clsx.default)(
-  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-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 componentPaddingYUsingComponentGap2xMobile = (0, import_clsx.default)(
-  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] 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 componentPaddingMinusBorderDesktop = (0, import_clsx.default)(
-  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
-);
-var layoutPaddding = (0, import_clsx.default)(
-  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
-);
-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 layoutPaddingX = (0, import_clsx.default)(
-  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-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/MenuOption.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_react7 = require("react");
-
-// src/components/Label.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var Label = (_a) => {
-  var _b = _a, {
-    as = "span",
-    padded,
-    className,
-    color,
-    align,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "as",
-    "padded",
-    "className",
-    "color",
-    "align",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx2.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/components/Paragraph.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Paragraph = (_a) => {
-  var _b = _a, {
-    className,
-    color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx3.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/Icon.tsx
-var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Icon(_a) {
-  var _b = _a, {
-    name,
-    size = 24,
-    variant = "outline",
-    testid
-  } = _b, props = __objRest(_b, [
-    "name",
-    "size",
-    "variant",
-    "testid"
-  ]);
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      "data-testid": testid,
-      className: (0, import_clsx4.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/hooks/useKeydown.ts
-var import_react2 = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react3 = require("react");
-
-// src/hooks/useMatchesMedia.ts
-var import_react4 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react4.useState)();
-  (0, import_react4.useLayoutEffect)(() => {
-    const mediaQueryList = window.matchMedia(query);
-    const listener = () => setMatches(mediaQueryList.matches);
-    listener();
-    mediaQueryList.addEventListener("change", listener);
-    return () => mediaQueryList.removeEventListener("change", listener);
-  }, [query]);
-  return matches;
-};
-var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
-
-// src/hooks/useTableLayout/useTableLayout.ts
-var import_react5 = require("react");
-
-// 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/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
-
-// 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;
-  }
-  let 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/hooks/useTableLayout/storage.ts
-var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
-var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
-
-// src/hooks/useEditCell.tsx
-var import_react6 = require("react");
-
-// src/components/Caption.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Caption = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    style = "default",
-    color,
-    align,
-    id,
-    testid,
-    marginTopDesktop
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "style",
-    "color",
-    "align",
-    "id",
-    "testid",
-    "marginTopDesktop"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      WhichIcon,
-      {
-        id,
-        testid,
-        style,
-        size: 16,
-        className: "mt-[3px] desktop:mt-0"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Element,
-      __spreadProps(__spreadValues({
-        id: id ? `${id}-text` : void 0,
-        "data-testid": testid ? `${testid}-text` : void 0,
-        className: (0, import_clsx5.default)(
-          typography.caption.replace("text-text-primary-normal", ""),
-          (style === "default" || style === "info") && "text-text-secondary-normal",
-          style === "success" && "text-text-success-normal",
-          style === "warning" && "text-text-warning-normal",
-          style === "error" && "text-text-critical-normal",
-          align === "left" && "text-left",
-          align === "center" && "text-center",
-          align === "right" && "text-right",
-          className,
-          marginTopDesktop && `desktop:mt-px`
-        )
-      }, props), {
-        style: {
-          color: color ? `var(--color-${color})` : void 0
-        },
-        children
-      })
-    )
-  ] });
-};
-var WhichIcon = ({
-  style,
-  size,
-  className,
-  id,
-  testid
-}) => {
-  if (style === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "check_circle",
-        size
-      }
-    ) });
-  }
-  if (style === "warning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "warning",
-        size
-      }
-    ) });
-  }
-  if (style === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  if (style === "info") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Icon,
-      {
-        id: id ? `${id}-icon` : void 0,
-        testid: testid ? `${testid}-icon` : void 0,
-        className,
-        name: "info",
-        size
-      }
-    ) });
-  }
-  return null;
-};
-Caption.displayName = "Caption";
-
-// src/components/MenuOption.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MenuOption = ({
-  id,
-  testid,
-  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,
-  onMouseMove,
-  onMouseEnter,
-  onMouseLeave,
-  small = false
-}) => {
-  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 [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react7.useState)(false);
-  const handleMouseEnter = () => {
-    if (subMenu && onSubMenuHover && !disabled) {
-      onSubMenuHover(menuId.current, subMenuLevel);
-    }
-    onMouseEnter == null ? void 0 : onMouseEnter();
-  };
-  const handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
-    }
-    setIsSubMenuHovered(false);
-    onMouseLeave == null ? void 0 : onMouseLeave();
-  };
-  const handleMouseMove = () => {
-    if (subMenu && onMouseMove && !disabled) {
-      onMouseMove();
-    }
-  };
-  const handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
-    }
-    setIsSubMenuHovered(true);
-  };
-  const additionalAttributes = {
-    "data-selected": selected || null,
-    "data-submenu-hovered": isSubMenuHovered || null
-  };
-  const svgStyles = (0, import_clsx6.default)(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = (0, import_clsx6.default)("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && (0, import_clsx6.default)(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus-visible:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "data-submenu-hovered:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx6.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx6.default)(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx6.default)("text-text-action-disabled");
-  const disabledStyles = disabled && (0, import_clsx6.default)("bg-transparent cursor-default pointer-events-none");
-  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : !small ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Caption, { padded: true, className: textLabelStyles, children: processChildren });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        ref: actualRef,
-        className: (0, import_clsx6.default)(
-          "flex cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          small ? layoutGroupGap : componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles,
-          { "items-center": !small }
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-          if (subMenu) {
-            toggleMenu(menuId.current, subMenuLevel);
-          }
-        },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onMouseMove: handleMouseMove
-      }, additionalAttributes), {
-        tabIndex: -1,
-        role: "menuitem",
-        "aria-haspopup": subMenu ? "menu" : void 0,
-        children: [
-          before && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)("shrink-0", { "items-center flex": !small }), children: before }),
-          renderChildren,
-          renderAfterProp()
-        ]
-      })
-    ),
-    subMenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "div",
-      {
-        onMouseEnter: handleSubMenuEnter,
-        onMouseLeave: () => {
-          handleMouseLeave();
-          setIsSubMenuHovered(false);
-        },
-        "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,
-          autoFocusOff: true
-        })
-      }
-    )
-  ] });
-  function renderAfterProp() {
-    if (after) {
-      return after;
-    }
-    if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "chevron_right" });
-    }
-  }
-  function mobileBackMenuOption() {
-    if (!isMobile) {
-      return;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      MenuOption,
-      {
-        id: id ? `${id}-back` : void 0,
-        testid: testid ? `${testid}-back` : void 0,
-        onClick: () => {
-          closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
-        },
-        variant: "action",
-        before: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("span", { className: "font-bold", children: part }, index) : part
-  );
-}
-
-// src/components/Menu.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react9 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/components/useMenuSystem.tsx
-var import_react8 = require("react");
-function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react8.useState)(
-    {}
-  );
-  const [activeMenu, setActiveMenu] = (0, import_react8.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react8.useState)(
-    null
-  );
-  const menuRootRef = (0, import_react8.useRef)(null);
-  const subMenuRefs = (0, import_react8.useRef)({});
-  const hoverTimeoutRef = (0, import_react8.useRef)(null);
-  const closeTimeoutRef = (0, import_react8.useRef)(null);
-  const mouseStopTimeoutRef = (0, import_react8.useRef)(null);
-  const isMouseMovingRef = (0, import_react8.useRef)(false);
-  const pendingOpenActionRef = (0, import_react8.useRef)(null);
-  const pendingCloseActionRef = (0, import_react8.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 executePendingActions = (0, import_react8.useCallback)(() => {
-    if (pendingCloseActionRef.current) {
-      pendingCloseActionRef.current();
-      pendingCloseActionRef.current = null;
-    }
-    if (pendingOpenActionRef.current) {
-      pendingOpenActionRef.current();
-      pendingOpenActionRef.current = null;
-    }
-  }, []);
-  const openMenuWithDelay = (menuId, level, delay = 150) => {
-    if (isMobile) {
-      return;
-    }
-    pendingOpenActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-      hoverTimeoutRef.current = setTimeout(() => {
-        openMenu(menuId, level);
-      }, delay);
-    };
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-  const closeMenuWithDelay = (level, delay = 500) => {
-    if (isMobile) {
-      return;
-    }
-    pendingCloseActionRef.current = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-      closeTimeoutRef.current = setTimeout(() => {
-        closeSubMenuLevel(level);
-      }, delay);
-    };
-    if (!isMouseMovingRef.current) {
-      executePendingActions();
-    }
-  };
-  const handleMouseMove = () => {
-    isMouseMovingRef.current = true;
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-    }
-    mouseStopTimeoutRef.current = setTimeout(() => {
-      isMouseMovingRef.current = false;
-      executePendingActions();
-    }, 200);
-  };
-  const cancelCloseTimeout = () => {
-    if (isMobile) {
-      return;
-    }
-    if (mouseStopTimeoutRef.current) {
-      clearTimeout(mouseStopTimeoutRef.current);
-      mouseStopTimeoutRef.current = null;
-      isMouseMovingRef.current = false;
-    }
-  };
-  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_react8.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_react8.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,
-      onMouseMove: handleMouseMove,
-      toggleMenu,
-      mobilePositionTo,
-      activeMenu,
-      currentSubMenuLevel,
-      closeSubMenuLevel
-    }
-  };
-}
-function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react8.useState)({
-    top: 0,
-    left: 0,
-    minWidth: 0
-  });
-  const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react8.useCallback)(() => {
-    var _a, _b, _c;
-    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") {
-      if (isMobile) {
-        left = triggerRect.left + window.scrollX;
-      } else {
-        left = triggerRect.right + window.scrollX;
-      }
-    }
-    const overflowsRightViewport = left + menuWidth > viewportWidth;
-    if (overflowsRightViewport) {
-      const newLeft = triggerRect.left - menuWidth;
-      const overflowsLeftViewport = newLeft < 0;
-      if (overflowsLeftViewport) {
-        left = (viewportWidth - menuWidth) / 2;
-      } else {
-        left = newLeft;
-      }
-    }
-    if (isMobile && position === "right") {
-      top = triggerRect.top + triggerRect.height + topOffset;
-    }
-    if (isMobile && menuWidth > viewportWidth) {
-      left = 0;
-    }
-    setMenuPosition({
-      top,
-      left,
-      minWidth: triggerRect.width
-    });
-  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react8.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_react8.useEffect)(() => {
-    updatePosition();
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (elementRef == null ? void 0 : elementRef.current) {
-      resizeObserver.observe(elementRef.current);
-    }
-    window.addEventListener("scroll", updatePosition);
-    const hideMenuWhenParentIsScrolled = () => {
-      var _a;
-      (_a = options == null ? void 0 : options.setIsOpen) == null ? void 0 : _a.call(options, false);
-    };
-    const scrollableAncestors = getScrollableAncestors(elementRef.current);
-    scrollableAncestors.forEach((ancestor) => ancestor.addEventListener("scroll", hideMenuWhenParentIsScrolled));
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-      scrollableAncestors.forEach((ancestor) => ancestor.removeEventListener("scroll", hideMenuWhenParentIsScrolled));
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [elementRef, updatePosition]);
-  return { menuPosition, updatePosition };
-}
-function getScrollableAncestors(element) {
-  if (!element) {
-    return [];
-  }
-  const scrollables = [];
-  let parent = element.parentElement;
-  while (parent) {
-    const overflowY = window.getComputedStyle(parent).overflowY;
-    if (overflowY === "auto" || overflowY === "scroll") {
-      scrollables.push(parent);
-    }
-    parent = parent.parentElement;
-  }
-  return scrollables;
-}
-
-// src/components/Menu.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Menu = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    children,
-    className,
-    ref,
-    positionTo,
-    mobilePositionTo,
-    show,
-    setShow,
-    position = "bottom",
-    maxHeight: customMaxHeight,
-    topOffset,
-    mobileBackMenuOption,
-    mobileHide,
-    useDefaultMinWidth,
-    autoFocusOff,
-    menuName,
-    calculateMinMaxHeight
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "children",
-    "className",
-    "ref",
-    "positionTo",
-    "mobilePositionTo",
-    "show",
-    "setShow",
-    "position",
-    "maxHeight",
-    "topOffset",
-    "mobileBackMenuOption",
-    "mobileHide",
-    "useDefaultMinWidth",
-    "autoFocusOff",
-    "menuName",
-    "calculateMinMaxHeight"
-  ]);
-  const internalRef = (0, import_react9.useRef)(null);
-  const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react9.useState)("180px");
-  const isMobile = useMatchesMobile();
-  const { menuPosition, updatePosition } = useMenuPosition(
-    isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
-    position,
-    {
-      isOpen: show,
-      setIsOpen: setShow,
-      menuRef: internalRef,
-      topOffset,
-      isMobile: !!(isMobile && mobilePositionTo)
-    }
-  );
-  (0, import_react9.useEffect)(() => {
-    if (calculateMinMaxHeight) {
-      return;
-    }
-    const raf = requestAnimationFrame(() => {
-      if (!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.current, customMaxHeight, calculateMinMaxHeight]);
-  (0, import_react9.useEffect)(() => {
-    if (!calculateMinMaxHeight) {
-      return;
-    }
-    if ((positionTo == null ? void 0 : positionTo.current) && actualRef.current) {
-      const positionToRect = positionTo.current.getBoundingClientRect();
-      const offsetInPx = 16;
-      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
-      setMaxHeight(`${calculatedMaxHeight}px`);
-    }
-  }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
-  (0, import_react9.useEffect)(() => {
-    if (!show) {
-      return;
-    }
-    initializeMenuFocus();
-    updatePosition();
-  }, [show, updatePosition]);
-  (0, import_react9.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_runtime6.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        ref: setRefs,
-        className: (0, import_clsx7.default)(
-          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
-          "fixed",
-          "z-50",
-          "max-w-screen",
-          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/Search.tsx
-var import_react11 = require("react");
-
-// src/components/Input.tsx
-var import_react10 = require("react");
-var import_clsx8 = __toESM(require("clsx"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var InputBase = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    before,
-    after,
-    rightAdornment,
-    type,
-    label,
-    error,
-    className,
-    align = "left",
-    caption,
-    required,
-    selectOnFocus,
-    removeRoundness,
-    inputContainerRef,
-    removeBorder,
-    wrapperClassName,
-    focus,
-    secondaryIconColor,
-    fullWidth = true,
-    width,
-    wrapperRef,
-    autocompletePadding = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "before",
-    "after",
-    "rightAdornment",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "removeRoundness",
-    "inputContainerRef",
-    "removeBorder",
-    "wrapperClassName",
-    "focus",
-    "secondaryIconColor",
-    "fullWidth",
-    "width",
-    "wrapperRef",
-    "autocompletePadding"
-  ]);
-  const attributes = {
-    "data-error": error && !focus || null,
-    "data-focus": focus || null
-  };
-  const inputRef = (0, import_react10.useRef)(null);
-  const inputId = id ? `${id}-input` : void 0;
-  (0, import_react10.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_clsx8.default)(
-    fullWidth ? "w-full" : "w-fit",
-    "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",
-    !autocompletePadding && componentPaddingMinusBorder,
-    autocompletePadding && componentPaddingMinusBorderDesktop,
-    !removeRoundness && "rounded-base",
-    !removeBorder && "border border-border-primary-normal",
-    "relative"
-  );
-  const inputFocusClass = (0, import_clsx8.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_clsx8.default)(
-    "has-disabled:bg-background-action-secondary-disabled"
-  );
-  const inputReadOnlyClass = (0, import_clsx8.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_clsx8.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_runtime7.jsxs)(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: inputId,
-      ref: inputContainerRef,
-      className: (0, import_clsx8.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_runtime7.jsxs)("div", { className: (0, import_clsx8.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            Label,
-            {
-              id: id ? `${id}-label` : void 0,
-              color: error ? "text-primary-error" : void 0,
-              className: (0, import_clsx8.default)(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "span",
-            {
-              className: (0, import_clsx8.default)(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx8.default)(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            ref: (el) => {
-              if (wrapperRef) {
-                wrapperRef.current = el;
-              }
-            },
-            children: [
-              before,
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "input",
-                __spreadProps(__spreadValues(__spreadValues({
-                  ref: (el) => {
-                    inputRef.current = el;
-                  },
-                  type,
-                  required
-                }, props), attributes), {
-                  id: inputId,
-                  "data-testid": testid ? `${testid}-input` : void 0,
-                  className: (0, import_clsx8.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"
-                  ),
-                  style: __spreadProps(__spreadValues({}, props.style), { width })
-                })
-              ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
-              rightAdornment
-            ]
-          }
-        ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
-          {
-            id: id ? `${id}-caption` : void 0,
-            "data-testid": testid ? `${testid}-caption` : void 0,
-            children: caption
-          }
-        )
-      ]
-    }
-  );
-};
-var Input = (_a) => {
-  var _b = _a, {
-    variant = "default",
-    decimals,
-    uom,
-    currencyFormat = false,
-    formatOnBlur = false,
-    removeSearchIcon,
-    value: propValue,
-    onChange,
-    onBlur,
-    onClear,
-    id,
-    testid,
-    rightAdornment
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "decimals",
-    "uom",
-    "currencyFormat",
-    "formatOnBlur",
-    "removeSearchIcon",
-    "value",
-    "onChange",
-    "onBlur",
-    "onClear",
-    "id",
-    "testid",
-    "rightAdornment"
-  ]);
-  const [internalValue, setInternalValue] = (0, import_react10.useState)("");
-  const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    var _a2;
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
-    if (!stringValue) {
-      setInternalValue("");
-      setDisplayValue("");
-      return;
-    }
-    if (!shouldUseThousandsFormatting) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
-    if (formatOnBlur && isFocused) {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
-      return;
-    }
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
-  const getInputProps = () => {
-    var _a2;
-    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
-      id
-    }), getDecimalPlaceholder(decimals)), {
-      value: propValue
-    });
-    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: currencyFormat ? "text" : "number",
-          align: "right",
-          value: currencyFormat ? displayValue : propValue
-        });
-      default:
-        return baseProps;
-    }
-  };
-  const getBeforeElement = () => {
-    if (props.before) return props.before;
-    switch (variant) {
-      case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "search" }) }) : null;
-      case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "attach_money" }) });
-      case "uom":
-        return currencyFormat ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "attach_money" }) }) : null;
-      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_runtime7.jsx)(
-          Icon,
-          {
-            id: id ? `${id}-clear-button` : void 0,
-            testid: testid ? `${testid}-clear-button` : void 0,
-            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_runtime7.jsx)(Icon, { name: "search" });
-      case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
-      case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.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;
-    const maxNumber = props.max != null ? Number(String(props.max).replace(/,/g, "")) : void 0;
-    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;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(
-          formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
-        );
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (variant === "uom" && currencyFormat) {
-      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;
-      const asNumber = Number(raw);
-      if (!isNaN(asNumber) && maxNumber != null && asNumber > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          currentDecimals
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formatCurrencyDisplay(formattedClamped));
-        if (onChange) {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(raw);
-      setDisplayValue(formatCurrencyDisplay(raw));
-      if (!isNaN(asNumber) && onChange) {
-        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
-        });
-        onChange(syntheticEvent);
-      }
-      return;
-    }
-    if (variant === "uom" && e.target.type === "number") {
-      const numeric = Number(rawValue);
-      if (!isNaN(numeric) && maxNumber != null && numeric > maxNumber) {
-        const clamped = maxNumber;
-        const formattedClamped = formatDecimalValue(
-          clamped.toString(),
-          decimals != null ? decimals : 0
-        );
-        setInternalValue(formattedClamped);
-        setDisplayValue(formattedClamped);
-        if (typeof onChange === "function") {
-          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
-            target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
-          });
-          onChange(syntheticEvent);
-        }
-        return;
-      }
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-  };
-  const handleBlur = (e) => {
-    setIsFocused(false);
-    if (!internalValue) {
-      onBlur == null ? void 0 : onBlur(e);
-      return;
-    }
-    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") {
-      if (currencyFormat) {
-        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 {
-        const formattedValue = formatDecimalValue(e.target.value, decimals);
-        e.target.value = formattedValue;
-      }
-    }
-    onBlur == null ? void 0 : onBlur(e);
-  };
-  const handleFocus = (e) => {
-    var _a2;
-    setIsFocused(true);
-    (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
-  };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onFocus: handleFocus,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      testid,
-      rightAdornment
-    })
-  );
-};
-Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
-  );
-};
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime8 = require("react/jsx-runtime");
-var Search = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    label,
-    error,
-    children,
-    readOnly,
-    renderMenu,
-    onClick,
-    wrapperClassName,
-    removeRoundness,
-    autocompletePadding = false
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "label",
-    "error",
-    "children",
-    "readOnly",
-    "renderMenu",
-    "onClick",
-    "wrapperClassName",
-    "removeRoundness",
-    "autocompletePadding"
-  ]);
-  const inputRef = (0, import_react11.useRef)(null);
-  const inputContainerRef = (0, import_react11.useRef)(null);
-  const preventFocusOnInitialRender = (0, import_react11.useRef)(true);
-  const [show, setShow] = (0, import_react11.useState)(false);
-  const [clearing, setClearing] = (0, import_react11.useState)(false);
-  const uniqueId = (0, import_react11.useId)();
-  const searchMenuName = `search-menu-${uniqueId}`;
-  (0, import_react11.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_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Input,
-      __spreadValues({
-        id,
-        testid,
-        variant: "search",
-        inputContainerRef,
-        ref: inputRef,
-        label,
-        wrapperClassName,
-        autocompletePadding,
-        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: renderMenu && show
-      }, props)
-    ),
-    renderMenu ? renderMenu({
-      id: id ? `${id}-menu` : void 0,
-      testid: testid ? `${testid}-menu` : void 0,
-      positionTo: inputContainerRef,
-      show,
-      setShow,
-      topOffset: props.caption ? -16 : null,
-      autoFocusOff: true,
-      menuName: searchMenuName
-    }) : children
-  ] });
-};
-Search.displayName = "Search";
-
-// src/components/DataGridCell.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react12.memo)(
-  (_a) => {
-    var _b = _a, {
-      id,
-      type = "default",
-      component = "static",
-      children,
-      className,
-      locked = false,
-      noPadding = false,
-      paddedLeft = false,
-      style,
-      onClick,
-      onRightClick,
-      error,
-      warning,
-      center,
-      width,
-      minWidth,
-      disabled,
-      testid
-    } = _b, props = __objRest(_b, [
-      "id",
-      "type",
-      "component",
-      "children",
-      "className",
-      "locked",
-      "noPadding",
-      "paddedLeft",
-      "style",
-      "onClick",
-      "onRightClick",
-      "error",
-      "warning",
-      "center",
-      "width",
-      "minWidth",
-      "disabled",
-      "testid"
-    ]);
-    const Element = type === "header" ? "th" : "td";
-    const timerRef = (0, import_react12.useRef)(null);
-    const [isGrabbing, setIsGrabbing] = (0, import_react12.useState)(false);
-    const [isPointerPressed, setIsPointerPressed] = (0, import_react12.useState)(false);
-    (0, import_react12.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_clsx9.default)("border-r");
-    const buttonComponentStyles = component === "button" && (0, import_clsx9.default)("border-r border-b border-border-primary-normal");
-    const iconComponentStyles = component === "icon" && (0, import_clsx9.default)("border-l");
-    const cellClasses = (0, import_clsx9.default)(
-      headerTypeStyles,
-      buttonComponentStyles,
-      headerBgStyles,
-      lockedHeaderBgStyles,
-      iconComponentStyles,
-      className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
-      "focus-within:!z-10",
-      "overflow-x-hidden",
-      "overflow-y-hidden",
-      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 && componentPadding,
-      paddedLeft && "pl-2",
-      component === "icon" && "border-l",
-      isGrabbing && "!cursor-grabbing",
-      component === "checkbox" || center && "justify-center",
-      disabled && "!text-text-primary-disabled"
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Element,
-      __spreadProps(__spreadValues({
-        id,
-        "data-testid": testid,
-        className: (0, import_clsx9.default)("flex h-10", !width && "flex-1"),
-        style: { width, minWidth }
-      }, props), {
-        "data-theme": type === "header" && !locked ? "brand" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.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 DataCellHeader(_a) {
-  var _b = _a, {
-    header,
-    children,
-    setNodeRef,
-    node,
-    id,
-    testid,
-    useMenuDefaultMinWidth
-  } = _b, props = __objRest(_b, [
-    "header",
-    "children",
-    "setNodeRef",
-    "node",
-    "id",
-    "testid",
-    "useMenuDefaultMinWidth"
-  ]);
-  var _a2;
-  const [showMenu, setShowMenu] = (0, import_react12.useState)(false);
-  const [filter, setFilter] = (0, import_react12.useState)(
-    (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
-  );
-  const ref = (0, import_react12.useRef)(null);
-  const predeterminedPinned = (0, import_react12.useRef)(false);
-  const { column, getContext } = header;
-  const { id: columnId, setFilterValue } = column;
-  const {
-    menuRootRef,
-    isMenuActive,
-    registerSubMenu,
-    listeners: subMenuListeners,
-    mobileHide
-  } = useSubMenuSystem(node ? node : ref);
-  (0, import_react12.useEffect)(() => {
-    var _a3, _b2, _c;
-    const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
-    const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
-    const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
-    predeterminedPinned.current = [...left, ...right].includes(columnId);
-  }, [columnId, getContext]);
-  (0, import_react12.useEffect)(() => {
-    const handler = setTimeout(() => {
-      setFilterValue(filter);
-    }, 500);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [filter, setFilterValue]);
-  const style = __spreadValues({
-    position: "relative",
-    whiteSpace: "nowrap",
-    minWidth: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
-    "--color-icon-on-action-primary-normal": "var(--color-text-brand-primary-normal)",
-    "--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
-  }, props.style);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    DataGridCell,
-    __spreadProps(__spreadValues({
-      id,
-      testid,
-      ref: setNodeRef ? setNodeRef : ref,
-      type: "header",
-      component: "header",
-      style,
-      minWidth: `${header.column.getSize()}px`,
-      onClick: header.column.getToggleSortingHandler(),
-      onRightClick: () => setShowMenu(!showMenu)
-    }, props), {
-      children: [
-        children,
-        header.column.getCanFilter() && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          Menu,
-          {
-            id: id ? `${id}-menu` : void 0,
-            testid: testid ? `${testid}-menu` : void 0,
-            ref: menuRootRef,
-            positionTo: node ? node : ref,
-            show: showMenu,
-            setShow: setShowMenu,
-            mobileHide,
-            useDefaultMinWidth: useMenuDefaultMinWidth,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                MenuOption,
-                __spreadProps(__spreadValues({
-                  id: id ? `${id}-filter-option` : void 0,
-                  testid: testid ? `${testid}-filter-option` : void 0
-                }, subMenuListeners), {
-                  subMenu: (_b2) => {
-                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      Menu,
-                      __spreadProps(__spreadValues({
-                        id: id ? `${id}-filter-submenu` : void 0,
-                        testid: testid ? `${testid}-filter-submenu` : void 0
-                      }, props2), {
-                        show: isMenuActive(menuId, subMenuLevel),
-                        ref: (el) => {
-                          registerSubMenu(menuId, el);
-                        },
-                        useDefaultMinWidth: useMenuDefaultMinWidth,
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_clsx9.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            Search,
-                            {
-                              id: id ? `${id}-filter-search` : void 0,
-                              testid: testid ? `${testid}-filter-search` : void 0,
-                              onChange: (event) => {
-                                setFilter(event.target.value);
-                              },
-                              onKeyDown: (event) => {
-                                if ([" ", "Space"].includes(event.key)) {
-                                  event.stopPropagation();
-                                }
-                              },
-                              value: filter != null ? filter : ""
-                            }
-                          ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-contains` : void 0,
-                              testid: testid ? `${testid}-filter-contains` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("includesString"),
-                              children: "Contains"
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-startswith` : void 0,
-                              testid: testid ? `${testid}-filter-startswith` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("startsWith"),
-                              children: "Starts with"
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            MenuOption,
-                            {
-                              id: id ? `${id}-filter-endswith` : void 0,
-                              testid: testid ? `${testid}-filter-endswith` : void 0,
-                              onClick: handleFilterFnChange,
-                              before: menuOptionIcon("endsWith"),
-                              children: "Ends with"
-                            }
-                          )
-                        ]
-                      })
-                    );
-                  },
-                  children: "Filter"
-                })
-              ),
-              !predeterminedPinned.current && header.column.getCanPin() && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                MenuOption,
-                __spreadProps(__spreadValues({
-                  onClick: () => {
-                    setShowMenu(!showMenu);
-                  }
-                }, subMenuListeners), {
-                  subMenu: (_d) => {
-                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
-                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      Menu,
-                      __spreadProps(__spreadValues({}, props2), {
-                        show: isMenuActive(menuId, subMenuLevel),
-                        ref: (el) => {
-                          registerSubMenu(menuId, el);
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            MenuOption,
-                            {
-                              selected: header.column.getIsPinned() === "left",
-                              onClick: () => {
-                                if (header.column.getIsPinned() === "left") {
-                                  header.column.pin(false);
-                                } else {
-                                  header.column.pin("left");
-                                }
-                              },
-                              after: header.column.getIsPinned() === "left" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check" }),
-                              children: "Left"
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            MenuOption,
-                            {
-                              selected: header.column.getIsPinned() === "right",
-                              onClick: () => {
-                                if (header.column.getIsPinned() === "right") {
-                                  header.column.pin(false);
-                                } else {
-                                  header.column.pin("right");
-                                }
-                              },
-                              after: header.column.getIsPinned() === "right" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check" }),
-                              children: "Right"
-                            }
-                          )
-                        ]
-                      })
-                    );
-                  },
-                  children: `Freeze [${header.column.columnDef.header}]`
-                })
-              )
-            ]
-          }
-        )
-      ]
-    })
-  );
-  function menuOptionIcon(value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Icon,
-      {
-        name: "check",
-        className: (0, import_clsx9.default)(
-          header.column.columnDef.filterFn !== value && "text-transparent"
-        )
-      }
-    );
-  }
-  function handleFilterFnChange(_id, value) {
-    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(filter);
-  }
-}
-DataCellHeader.displayName = "DataCellHeader";
-function DraggableCellHeader(_a) {
-  var _b = _a, {
-    header,
-    children
-  } = _b, props = __objRest(_b, [
-    "header",
-    "children"
-  ]);
-  const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
-    id: header.column.id
-  });
-  const style = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    whiteSpace: "nowrap",
-    zIndex: isDragging ? 1 : 0,
-    "--color-text-primary-normal": "var(--color-action-000)",
-    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
-    userSelect: "none"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    DataCellHeader,
-    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-      header,
-      setNodeRef,
-      node,
-      style
-    }, props), attributes), listeners), {
-      children
-    })
-  );
-}
-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",
-    minWidth: cell.column.getSize(),
-    zIndex: isDragging ? 1 : 0
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
-}
-DragAlongCell.displayName = "DragAlongCell";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DataCellHeader,
-  DataGridCell,
-  DragAlongCell,
-  DraggableCellHeader
-});