@dmsi/wedgekit-react 0.0.208 → 0.0.209

package/dist/components/DataGridCell.cjs

@@ -246,66 +246,78 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/Icon.tsx
+// src/components/MenuOption.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_react6 = require("react");
+
+// src/components/Label.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-function Icon(_a) {
+var Label = (_a) => {
   var _b = _a, {
-    name,
-    size = 24,
-    variant = "outline",
+    as = "span",
+    padded,
+    className,
+    color,
+    align,
+    id,
     testid
   } = _b, props = __objRest(_b, [
-    "name",
-    "size",
-    "variant",
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align",
+    "id",
     "testid"
   ]);
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
+    Element,
+    __spreadProps(__spreadValues({
+      id,
       "data-testid": testid,
       className: (0, import_clsx2.default)(
-        "icon",
-        `icon-${size}`,
-        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
-        props.className
-      ),
-      style: __spreadValues({
-        fontVariationSettings: variantStyle + `, ${weightStyle}`
-      }, props.style),
-      children: name
+        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
+      })
     })
   );
-}
-
-// src/components/Search.tsx
-var import_react3 = require("react");
-
-// src/components/Input.tsx
-var import_react2 = require("react");
-var import_clsx4 = __toESM(require("clsx"), 1);
+};
+Label.displayName = "Label";
 
-// src/components/Label.tsx
+// src/components/Paragraph.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Label = (_a) => {
+var Paragraph = (_a) => {
   var _b = _a, {
-    as = "span",
-    padded,
     className,
     color,
-    align,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
     id,
     testid
   } = _b, props = __objRest(_b, [
-    "as",
-    "padded",
     "className",
     "color",
+    "padded",
     "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
     "id",
     "testid"
   ]);
@@ -314,23 +326,82 @@ var Label = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
-      "data-testid": testid,
+      "data-testid": testid
+    }, props), {
       className: (0, import_clsx3.default)(
-        typography.label,
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
         align === "left" && "text-left",
         align === "center" && "text-center",
         align === "right" && "text-right",
-        className,
-        padded && componentPaddingXUsingComponentGap
-      )
-    }, props), {
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
       style: __spreadProps(__spreadValues({}, props.style), {
         color: color ? `var(--color-${color})` : void 0
-      })
+      }),
+      children
     })
   );
 };
-Label.displayName = "Label";
+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/utils/formatting.tsx
 function getDecimalPlaceholder(decimals) {
@@ -365,578 +436,235 @@ function formatCurrencyDisplay(value) {
   return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
 }
 
-// src/components/Input.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var InputBase = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    before,
-    after,
-    type,
-    label,
-    error,
-    className,
-    align = "left",
-    caption,
-    required,
-    selectOnFocus,
-    removeRoundness,
-    inputContainerRef,
-    removeBorder,
-    wrapperClassName,
-    focus,
-    fullWidth = true
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "before",
-    "after",
-    "type",
-    "label",
-    "error",
-    "className",
-    "align",
-    "caption",
-    "required",
-    "selectOnFocus",
-    "removeRoundness",
-    "inputContainerRef",
-    "removeBorder",
-    "wrapperClassName",
-    "focus",
-    "fullWidth"
-  ]);
-  const attributes = {
-    "data-error": error && !focus || null,
-    "data-focus": focus || null
-  };
-  const inputRef = (0, import_react2.useRef)(null);
-  const inputId = id ? `${id}-input` : void 0;
-  (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);
-      };
+// 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;
     }
-  }, [selectOnFocus]);
-  const inputBaseClass = (0, import_clsx4.default)(
-    fullWidth ? "w-full" : "w-fit",
-    "flex flex-row items-center",
-    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
-    componentGap,
-    baseTransition,
-    "outline-transparent outline-2 -outline-offset-2",
-    componentPaddingMinusBorder,
-    !removeRoundness && "rounded-base",
-    !removeBorder && "border border-border-primary-normal",
-    "relative"
-  );
-  const inputFocusClass = (0, import_clsx4.default)(
-    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
-  );
-  const inputDisabledClass = (0, import_clsx4.default)(
-    "has-disabled:bg-background-action-secondary-disabled"
-  );
-  const inputReadOnlyClass = (0, import_clsx4.default)(
-    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
-  );
-  const inputInvalidClass = (0, import_clsx4.default)(
-    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: inputId,
-      ref: inputContainerRef,
-      className: (0, import_clsx4.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_runtime3.jsxs)("div", { className: (0, import_clsx4.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Label,
-            {
-              id: id ? `${id}-label` : void 0,
-              className: (0, import_clsx4.default)(
-                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
-              ),
-              children: label
-            }
-          ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              className: (0, import_clsx4.default)(typography.label, "text-text-critical-normal"),
-              children: "*"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx4.default)(
-              inputBaseClass,
-              !props.disabled && inputInvalidClass,
-              inputFocusClass,
-              inputDisabledClass,
-              inputReadOnlyClass,
-              wrapperClassName
-            ),
-            children: [
-              before,
-              /* @__PURE__ */ (0, import_jsx_runtime3.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_clsx4.default)(
-                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
-                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
-                    align === "right" && "text-right",
-                    align === "center" && "text-center",
-                    componentPaddingXUsingComponentGap,
-                    typography.paragraph,
-                    className,
-                    props.readOnly && !props.disabled && "!px-0"
-                  )
-                })
-              ),
-              after
-            ]
-          }
-        ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.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,
-    removeSearchIcon,
-    value: propValue,
-    onChange,
-    onBlur,
-    onClear,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "decimals",
-    "uom",
-    "removeSearchIcon",
-    "value",
-    "onChange",
-    "onBlur",
-    "onClear",
-    "id",
-    "testid"
-  ]);
-  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 : "";
-    setInternalValue(stringValue);
-    setDisplayValue(stringValue);
-  }, [propValue]);
-  (0, import_react2.useEffect)(() => {
-    var _a2;
-    if (variant !== "currency") {
-      return;
-    }
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (!stringValue) {
-      return;
-    }
-    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
-  }, []);
-  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: "number",
-          align: "right"
-        });
-      default:
-        return baseProps;
-    }
-  };
-  const getBeforeElement = () => {
-    if (props.before) return props.before;
-    switch (variant) {
-      case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" }) }) : null;
-      case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "attach_money" }) });
-      default:
-        return null;
+  }
+  return window.document.body;
+}
+
+// src/hooks/useTableLayout.ts
+var import_react5 = require("react");
+
+// src/components/MenuOption.tsx
+var import_jsx_runtime4 = 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
+}) => {
+  const uniqueId = (0, import_react6.useId)();
+  const internalRef = (0, import_react6.useRef)(null);
+  const actualRef = ref || internalRef;
+  const menuId = (0, import_react6.useRef)(`menu-${uniqueId}`);
+  const isMobile = useMatchesMobile();
+  const handleMouseEnter = () => {
+    if (subMenu && onSubMenuHover && !disabled) {
+      onSubMenuHover(menuId.current, subMenuLevel);
     }
   };
-  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_runtime3.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_runtime3.jsx)(Icon, { name: "search" });
-      case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
-      case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
-      default:
-        return null;
+  const handleMouseLeave = () => {
+    if (subMenu && onSubMenuLeave && !disabled) {
+      onSubMenuLeave(subMenuLevel);
     }
   };
-  const handleSearchReset = () => {
-    setInternalValue("");
-    setDisplayValue("");
-    if (onChange) {
-      const syntheticEvent = {
-        target: { value: "" }
-      };
-      if (typeof onChange === "function") {
-        onChange(syntheticEvent);
-      }
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
     }
-    onClear == null ? void 0 : onClear();
   };
-  const handleChange = (e) => {
-    const rawValue = e.target.value;
-    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 handleSubMenuEnter = () => {
+    if (onSubMenuEnter) {
+      onSubMenuEnter();
     }
   };
-  const handleBlur = (e) => {
-    if (!internalValue) {
-      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" || variant === "percentage") {
-      const formattedValue = formatDecimalValue(e.target.value, decimals);
-      e.target.value = formattedValue;
-    }
-    onBlur == null ? void 0 : onBlur(e);
+  const additionalAttributes = {
+    "data-selected": selected || null
   };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onChange: handleChange,
-      onBlur: handleBlur,
-      testid
-    })
+  const svgStyles = (0, import_clsx5.default)(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
   );
-};
-Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
-var Currency = (props) => {
-  var _a;
-  const handleCurrencyChange = (e) => {
-    var _a2;
-    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
+  const textLabelStyles = (0, import_clsx5.default)("w-full whitespace-nowrap !leading-6");
+  const normalStyles = variant === "normal" && !disabled && (0, import_clsx5.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"
   );
-};
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
-Finder.displayName = "Finder";
-UOM.displayName = "UOM";
-Currency.displayName = "Currency";
-Percentage.displayName = "Percentage";
-
-// src/components/Search.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Search = (_a) => {
-  var _b = _a, {
-    id,
-    testid,
-    label,
-    error,
-    children,
-    readOnly,
-    renderMenu,
-    onClick,
-    wrapperClassName,
-    removeRoundness
-  } = _b, props = __objRest(_b, [
-    "id",
-    "testid",
-    "label",
-    "error",
-    "children",
-    "readOnly",
-    "renderMenu",
-    "onClick",
-    "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]);
+  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx5.default)("text-text-primary-disabled");
+  const actionStyles = variant === "action" && !disabled && (0, import_clsx5.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_clsx5.default)("text-text-action-disabled");
+  const disabledStyles = disabled && (0, import_clsx5.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_runtime4.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Input,
-      __spreadValues({
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
         id,
-        testid,
-        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();
-            }
+        "data-testid": testid,
+        ref: actualRef,
+        className: (0, import_clsx5.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);
           }
         },
-        error,
-        readOnly,
-        removeRoundness,
-        focus: renderMenu && show
-      }, props)
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseMove: handleMouseMove
+      }, additionalAttributes), {
+        tabIndex: -1,
+        role: "menuitem",
+        "aria-haspopup": subMenu ? "menu" : void 0,
+        children: [
+          before && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
+          renderChildren,
+          renderAfterProp()
+        ]
+      })
     ),
-    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
+    subMenu && /* @__PURE__ */ (0, import_jsx_runtime4.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
+        })
+      }
+    )
   ] });
-};
-Search.displayName = "Search";
-
-// src/components/Menu.tsx
-var import_clsx5 = __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");
-
-// src/hooks/useKeydown.ts
-var import_react4 = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react5 = require("react");
-
-// src/hooks/useMatchesMedia.ts
-var import_react6 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_react6.useState)();
-  (0, import_react6.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/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;
+  function renderAfterProp() {
+    if (after) {
+      return after;
+    }
+    if (subMenu && after !== null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
+    }
   }
-  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;
+  function mobileBackMenuOption() {
+    if (!isMobile) {
+      return;
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Icon, { name: "chevron_left" }),
+        children: "Back"
+      }
+    );
   }
-  return window.document.body;
+};
+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_runtime4.jsx)("span", { className: "font-bold", children: part }, index) : part
+  );
 }
 
-// src/hooks/useTableLayout.ts
-var import_react7 = require("react");
+// src/components/Menu.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_react8 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/components/useMenuSystem.tsx
+var import_react7 = require("react");
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react8.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react8.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react8.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.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 menuRootRef = (0, import_react7.useRef)(null);
+  const subMenuRefs = (0, import_react7.useRef)({});
+  const hoverTimeoutRef = (0, import_react7.useRef)(null);
+  const closeTimeoutRef = (0, import_react7.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react7.useRef)(null);
+  const isMouseMovingRef = (0, import_react7.useRef)(false);
+  const pendingOpenActionRef = (0, import_react7.useRef)(null);
+  const pendingCloseActionRef = (0, import_react7.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -976,7 +704,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react8.useCallback)(() => {
+  const executePendingActions = (0, import_react7.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -1065,7 +793,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -1084,7 +812,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -1162,13 +890,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react8.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react8.useCallback)(() => {
+  const updatePosition = (0, import_react7.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -1216,7 +944,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
       minWidth: triggerRect.width
     });
   }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -1242,7 +970,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {
@@ -1301,9 +1029,9 @@ var Menu = (_a) => {
     "menuName",
     "calculateMinMaxHeight"
   ]);
-  const internalRef = (0, import_react9.useRef)(null);
+  const internalRef = (0, import_react8.useRef)(null);
   const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react9.useState)("180px");
+  const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
   const isMobile = useMatchesMobile();
   const { menuPosition, updatePosition } = useMenuPosition(
     isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
@@ -1316,7 +1044,7 @@ var Menu = (_a) => {
       isMobile: !!(isMobile && mobilePositionTo)
     }
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (calculateMinMaxHeight) {
       return;
     }
@@ -1340,7 +1068,7 @@ var Menu = (_a) => {
       cancelAnimationFrame(raf);
     };
   }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!calculateMinMaxHeight) {
       return;
     }
@@ -1351,14 +1079,14 @@ var Menu = (_a) => {
       setMaxHeight(`${calculatedMaxHeight}px`);
     }
   }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!show) {
       return;
     }
     initializeMenuFocus();
     updatePosition();
   }, [show, updatePosition]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!show || !setShow) {
       return;
     }
@@ -1382,7 +1110,7 @@ var Menu = (_a) => {
         id,
         "data-testid": testid,
         ref: setRefs,
-        className: (0, import_clsx5.default)(
+        className: (0, import_clsx6.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
           "fixed",
           "z-50",
@@ -1504,249 +1232,517 @@ var Menu = (_a) => {
         ref.current = node;
       }
     }
-  }
-  function stopPropagation(e) {
-    e.stopPropagation();
-  }
+  }
+  function stopPropagation(e) {
+    e.stopPropagation();
+  }
+};
+Menu.displayName = "Menu";
+
+// src/components/Search.tsx
+var import_react10 = require("react");
+
+// src/components/Input.tsx
+var import_react9 = require("react");
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var InputBase = (_a) => {
+  var _b = _a, {
+    id,
+    testid,
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    selectOnFocus,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName,
+    focus,
+    fullWidth = true
+  } = _b, props = __objRest(_b, [
+    "id",
+    "testid",
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName",
+    "focus",
+    "fullWidth"
+  ]);
+  const attributes = {
+    "data-error": error && !focus || null,
+    "data-focus": focus || null
+  };
+  const inputRef = (0, import_react9.useRef)(null);
+  const inputId = id ? `${id}-input` : void 0;
+  (0, import_react9.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)(
+    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",
+    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",
+    {
+      id,
+      "data-testid": testid,
+      htmlFor: inputId,
+      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,
+            {
+              id: id ? `${id}-label` : void 0,
+              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: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
+                  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 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
+      ]
+    }
+  );
 };
-Menu.displayName = "Menu";
-
-// src/components/MenuOption.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react10 = require("react");
-
-// src/components/Paragraph.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Paragraph = (_a) => {
+var Input = (_a) => {
   var _b = _a, {
-    className,
-    color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
+    variant = "default",
+    decimals,
+    uom,
+    removeSearchIcon,
+    value: propValue,
+    onChange,
+    onBlur,
+    onClear,
     id,
     testid
   } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur",
+    "onClear",
     "id",
     "testid"
   ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx6.default)(
-        typography.paragraph,
-        className,
-        padded && componentPaddingXUsingComponentGap,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6",
-        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      }),
-      children
-    })
-  );
-};
-Paragraph.displayName = "Paragraph";
-
-// src/components/MenuOption.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MenuOption = ({
-  id,
-  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
-}) => {
-  const uniqueId = (0, import_react10.useId)();
-  const internalRef = (0, import_react10.useRef)(null);
-  const actualRef = ref || internalRef;
-  const menuId = (0, import_react10.useRef)(`menu-${uniqueId}`);
-  const isMobile = useMatchesMobile();
-  const handleMouseEnter = () => {
-    if (subMenu && onSubMenuHover && !disabled) {
-      onSubMenuHover(menuId.current, subMenuLevel);
+  const [internalValue, setInternalValue] = (0, import_react9.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
+    var _a2;
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
+  (0, import_react9.useEffect)(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
+    }
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
+    }
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
+  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: "number",
+          align: "right"
+        });
+      default:
+        return baseProps;
     }
   };
-  const handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
+  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 handleMouseMove = () => {
-    if (subMenu && onMouseMove && !disabled) {
-      onMouseMove();
+  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,
+          {
+            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_runtime6.jsx)(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+      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 handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
+  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 === "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 (!internalValue) {
+      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" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
     }
+    onBlur == null ? void 0 : onBlur(e);
   };
-  const additionalAttributes = {
-    "data-selected": selected || null
-  };
-  const svgStyles = (0, import_clsx7.default)(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = (0, import_clsx7.default)("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && (0, import_clsx7.default)(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur,
+      testid
+    })
   );
-  const normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx7.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx7.default)(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
+};
+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
+    })
   );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_clsx7.default)("text-text-action-disabled");
-  const disabledStyles = disabled && (0, import_clsx7.default)("bg-transparent cursor-default pointer-events-none");
-  const processChildren = typeof children === "string" && highlightMatchingText ? highlightMatch(children, menuValue) : children;
-  const renderChildren = typeof children === "object" ? children : variant === "action" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { padded: true, className: textLabelStyles, children: processChildren }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { padded: true, className: textLabelStyles, children: processChildren });
+};
+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, {
+    id,
+    testid,
+    label,
+    error,
+    children,
+    readOnly,
+    renderMenu,
+    onClick,
+    wrapperClassName,
+    removeRoundness
+  } = _b, props = __objRest(_b, [
+    "id",
+    "testid",
+    "label",
+    "error",
+    "children",
+    "readOnly",
+    "renderMenu",
+    "onClick",
+    "wrapperClassName",
+    "removeRoundness"
+  ]);
+  const inputRef = (0, import_react10.useRef)(null);
+  const inputContainerRef = (0, import_react10.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react10.useRef)(true);
+  const [show, setShow] = (0, import_react10.useState)(false);
+  const [clearing, setClearing] = (0, import_react10.useState)(false);
+  const uniqueId = (0, import_react10.useId)();
+  const searchMenuName = `search-menu-${uniqueId}`;
+  (0, import_react10.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.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Input,
+      __spreadValues({
         id,
-        "data-testid": testid,
-        ref: actualRef,
-        className: (0, import_clsx7.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);
+        testid,
+        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);
         },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onMouseMove: handleMouseMove
-      }, additionalAttributes), {
-        tabIndex: -1,
-        role: "menuitem",
-        "aria-haspopup": subMenu ? "menu" : void 0,
-        children: [
-          before && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "shrink-0 flex items-center", children: before }),
-          renderChildren,
-          renderAfterProp()
-        ]
-      })
+        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)
     ),
-    subMenu && /* @__PURE__ */ (0, import_jsx_runtime7.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
-        })
-      }
-    )
+    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
   ] });
-  function renderAfterProp() {
-    if (after) {
-      return after;
-    }
-    if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_right" });
-    }
-  }
-  function mobileBackMenuOption() {
-    if (!isMobile) {
-      return;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.jsx)("span", { className: "font-bold", children: part }, index) : part
-  );
-}
+Search.displayName = "Search";
 
 // src/components/DataGridCell.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1768,6 +1764,7 @@ var DataGridCell = (0, import_react11.memo)(
       warning,
       center,
       width,
+      minWidth,
       testid
     } = _b, props = __objRest(_b, [
       "id",
@@ -1785,6 +1782,7 @@ var DataGridCell = (0, import_react11.memo)(
       "warning",
       "center",
       "width",
+      "minWidth",
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
@@ -1858,7 +1856,7 @@ var DataGridCell = (0, import_react11.memo)(
         id,
         "data-testid": testid,
         className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
-        style: { width }
+        style: { width, minWidth }
       }, props), {
         "data-theme": type === "header" && !locked ? "brand" : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1899,7 +1897,7 @@ function DataCellHeader(_a) {
     "testid",
     "useMenuDefaultMinWidth"
   ]);
-  var _a2, _b2, _c;
+  var _a2;
   const [showMenu, setShowMenu] = (0, import_react11.useState)(false);
   const [filter, setFilter] = (0, import_react11.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
@@ -1933,7 +1931,7 @@ function DataCellHeader(_a) {
   const style = __spreadValues({
     position: "relative",
     whiteSpace: "nowrap",
-    width: (_c = (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.headerWidth) != null ? _c : header.column.getSize(),
+    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)"
@@ -1947,6 +1945,7 @@ function DataCellHeader(_a) {
       type: "header",
       component: "header",
       style,
+      minWidth: `${header.column.getSize()}px`,
       onClick: header.column.getToggleSortingHandler(),
       onRightClick: () => setShowMenu(!showMenu)
     }, props), {
@@ -1970,8 +1969,8 @@ function DataCellHeader(_a) {
                   id: id ? `${id}-filter-option` : void 0,
                   testid: testid ? `${testid}-filter-option` : void 0
                 }, subMenuListeners), {
-                  subMenu: (_d) => {
-                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
+                  subMenu: (_b2) => {
+                    var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({
@@ -2044,8 +2043,8 @@ function DataCellHeader(_a) {
                     setShowMenu(!showMenu);
                   }
                 }, subMenuListeners), {
-                  subMenu: (_f) => {
-                    var _g = _f, { menuId, subMenuLevel } = _g, props2 = __objRest(_g, ["menuId", "subMenuLevel"]);
+                  subMenu: (_d) => {
+                    var _e = _d, { menuId, subMenuLevel } = _e, props2 = __objRest(_e, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({}, props2), {
@@ -2133,7 +2132,6 @@ function DraggableCellHeader(_a) {
     "header",
     "children"
   ]);
-  var _a2, _b2;
   const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
     id: header.column.id
   });
@@ -2144,7 +2142,6 @@ function DraggableCellHeader(_a) {
     transition: "width transform 0.2s ease-in-out",
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
-    width: (_b2 = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth) != null ? _b2 : header.column.getSize(),
     "--color-text-primary-normal": "var(--color-action-000)",
     "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none"
@@ -2170,7 +2167,6 @@ function DragAlongCell(_a) {
     "cell",
     "children"
   ]);
-  var _a2, _b2, _c, _d;
   const { isDragging, setNodeRef, transform } = (0, import_sortable.useSortable)({
     id: cell.column.id
   });
@@ -2179,19 +2175,10 @@ function DragAlongCell(_a) {
     position: "relative",
     transform: CSS.Translate.toString(transform),
     transition: "width transform 0.2s ease-in-out",
-    width: (_b2 = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.headerWidth) != null ? _b2 : cell.column.getSize(),
+    minWidth: cell.column.getSize(),
     zIndex: isDragging ? 1 : 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    DataGridCell,
-    __spreadProps(__spreadValues({
-      style,
-      ref: setNodeRef,
-      width: (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.headerWidth) != null ? _d : `${cell.column.getSize()}px`
-    }, props), {
-      children
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataGridCell, __spreadProps(__spreadValues({ style, ref: setNodeRef }, props), { children }));
 }
 DragAlongCell.displayName = "DragAlongCell";
 // Annotate the CommonJS export names for ESM import in node: