@dmsi/wedgekit-react 0.0.207 → 0.0.209

package/dist/components/index.cjs

@@ -134,7 +134,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
 
 // src/components/DataGridCell.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -262,66 +262,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"
   ]);
@@ -330,23 +342,108 @@ 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");
+function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true
+  // ✅ Add this
+}) {
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) return;
+    const handleScroll = () => {
+      const el2 = containerRef.current;
+      if (!el2 || isLoading) return;
+      const { scrollTop, scrollHeight, clientHeight } = el2;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
+}
+
+// src/hooks/useMatchesMedia.ts
+var import_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) {
@@ -381,562 +478,264 @@ 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);
-      };
-    }
-  }, [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"
+// src/utils/mergeObjectArrays.ts
+function mergeObjectArrays(arr1, arr2) {
+  const maxLength = Math.max(arr1.length, arr2.length);
+  return Array.from(
+    { length: maxLength },
+    (_, i) => __spreadValues(__spreadValues({}, arr1[i] || {}), arr2[i] || {})
   );
-  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;
+}
+
+// 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;
     }
-    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (!stringValue) {
-      return;
+  }
+  return window.document.body;
+}
+
+// src/hooks/useTableLayout.ts
+var import_react5 = require("react");
+function useTableLayout(initialColumns, key) {
+  const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
+  const [isReady, setIsReady] = (0, import_react5.useState)(false);
+  const [layoutSignal, setLayoutSignal] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    if (!key) return setIsReady(true);
+    const savedLayout = localStorage.getItem(`${key}-tableLayout`);
+    if (savedLayout) {
+      setColumns(
+        mergeObjectArrays(
+          initialColumns,
+          JSON.parse(savedLayout)
+        )
+      );
     }
-    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
-    setInternalValue(formatted);
-    setDisplayValue(formatCurrencyDisplay(formatted));
+    if (!savedLayout) handleSaveLayout(initialColumns, true);
+    setLayoutSignal((prev) => prev + 1);
+    setIsReady(true);
   }, []);
-  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:
+  const handleSaveLayout = (0, import_react5.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal) return null;
+      const newColumns = typeof setter === "function" ? setter(columns) : setter;
+      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
         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_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 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;
+      if (key) {
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
       }
-      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;
+      setColumns(newColumns);
+      setLayoutSignal((prev) => prev + 1);
+      return newColumns;
+    },
+    [columns, isReady, key]
+  );
+  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+}
+
+// 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);
     }
-    setInternalValue(rawValue);
-    setDisplayValue(rawValue);
-    if (typeof onChange === "function") {
-      onChange(e);
+  };
+  const handleMouseLeave = () => {
+    if (subMenu && onSubMenuLeave && !disabled) {
+      onSubMenuLeave(subMenuLevel);
     }
   };
-  const handleBlur = (e) => {
-    if (!internalValue) {
-      return;
+  const handleMouseMove = () => {
+    if (subMenu && onMouseMove && !disabled) {
+      onMouseMove();
     }
-    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;
+  };
+  const handleSubMenuEnter = () => {
+    if (onSubMenuEnter) {
+      onSubMenuEnter();
     }
-    onBlur == null ? void 0 : onBlur(e);
   };
-  const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    InputBase,
-    __spreadProps(__spreadValues({}, inputProps), {
-      before: getBeforeElement(),
-      after: getAfterElement(),
-      onChange: handleChange,
-      onBlur: handleBlur,
-      testid
-    })
-  );
-};
-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);
+  const additionalAttributes = {
+    "data-selected": selected || null
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Input,
-    __spreadProps(__spreadValues({}, props), {
-      variant: "currency",
-      decimals: (_a = props.decimals) != null ? _a : 2,
-      onChange: handleCurrencyChange
-    })
+  const svgStyles = (0, import_clsx5.default)(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
   );
-};
-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 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"
+  );
+  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
+        })
+      }
+    )
   ] });
+  function renderAfterProp() {
+    if (after) {
+      return after;
+    }
+    if (subMenu && after !== null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "chevron_right" });
+    }
+  }
+  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"
+      }
+    );
+  }
 };
-Search.displayName = "Search";
+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/components/Menu.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
+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");
-
-// src/hooks/useKeydown.ts
-var import_react4 = require("react");
-
-// src/hooks/useInfiniteScroll.tsx
-var import_react5 = require("react");
-function useInfiniteScroll({
-  containerRef,
-  onLoadMore,
-  isLoading,
-  offset = 50,
-  enabled = true
-  // ✅ Add this
-}) {
-  (0, import_react5.useEffect)(() => {
-    if (!enabled) return;
-    const handleScroll = () => {
-      const el2 = containerRef.current;
-      if (!el2 || isLoading) return;
-      const { scrollTop, scrollHeight, clientHeight } = el2;
-      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
-      if (isNearBottom) {
-        onLoadMore();
-      }
-    };
-    const el = containerRef.current;
-    if (el) el.addEventListener("scroll", handleScroll);
-    return () => {
-      if (el) el.removeEventListener("scroll", handleScroll);
-    };
-  }, [containerRef, onLoadMore, isLoading, offset, enabled]);
-}
-
-// src/hooks/useMatchesMedia.ts
-var import_react6 = require("react");
-var useMatchesMedia = (query) => {
-  const [matches, setMatches] = (0, import_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/components/useMenuSystem.tsx
 function useSubMenuSystem(mobilePositionTo) {
   const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
     {}
@@ -1275,29 +1074,6 @@ function useMenuPosition(elementRef, position = "bottom", options) {
   return { menuPosition, updatePosition };
 }
 
-// src/utils.ts
-function findDocumentRoot(element) {
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    throw new Error(
-      "findDocumentRoot can only be used in a browser environment."
-    );
-  }
-  if (!element || !(element instanceof Node)) {
-    return window.document.body;
-  }
-  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/components/Menu.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Menu = (_a) => {
@@ -1421,7 +1197,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",
@@ -1550,246 +1326,514 @@ var Menu = (_a) => {
 };
 Menu.displayName = "Menu";
 
-// src/components/MenuOption.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react9 = require("react");
+// src/components/Search.tsx
+var import_react10 = require("react");
 
-// src/components/Paragraph.tsx
-var import_clsx6 = __toESM(require("clsx"), 1);
+// 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 Paragraph = (_a) => {
+var InputBase = (_a) => {
   var _b = _a, {
+    id,
+    testid,
+    before,
+    after,
+    type,
+    label,
+    error,
     className,
-    color,
-    padded,
     align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
+    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 })
+      ]
+    }
+  );
+};
+var Input = (_a) => {
+  var _b = _a, {
+    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_react9.useId)();
-  const internalRef = (0, import_react9.useRef)(null);
-  const actualRef = ref || internalRef;
-  const menuId = (0, import_react9.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 handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
+    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 handleMouseMove = () => {
-    if (subMenu && onMouseMove && !disabled) {
-      onMouseMove();
+  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 handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
+  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 additionalAttributes = {
-    "data-selected": selected || null
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+    onClear == null ? void 0 : onClear();
   };
-  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 normalDisabledStyles = variant === "normal" && disabled && (0, import_clsx7.default)("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && (0, import_clsx7.default)(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && (0, import_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 });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
-      __spreadProps(__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);
-          }
-        },
-        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()
-        ]
-      })
-    ),
-    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
-        })
+  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;
       }
-    )
-  ] });
-  function renderAfterProp() {
-    if (after) {
-      return after;
+      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;
     }
-    if (subMenu && after !== null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_right" });
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
     }
-  }
-  function mobileBackMenuOption() {
-    if (!isMobile) {
+  };
+  const handleBlur = (e) => {
+    if (!internalValue) {
       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"
+    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);
       }
-    );
-  }
-};
-MenuOption.displayName = "MenuOption";
-function highlightMatch(text, searchValue) {
-  if (!searchValue || !searchValue.trim()) {
-    return text;
-  }
-  const regex = new RegExp(
-    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
-    "gi"
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur,
+      testid
+    })
   );
-  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
+};
+Input.displayName = "Input";
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Currency = (props) => {
+  var _a;
+  const handleCurrencyChange = (e) => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
   );
-}
+};
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+Finder.displayName = "Finder";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";
+
+// src/components/Search.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Search = (_a) => {
+  var _b = _a, {
+    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.jsx)(
+      Input,
+      __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();
+            }
+          }
+        },
+        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_runtime8 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react10.memo)(
+var DataGridCell = (0, import_react11.memo)(
   (_a) => {
     var _b = _a, {
       id,
@@ -1807,6 +1851,7 @@ var DataGridCell = (0, import_react10.memo)(
       warning,
       center,
       width,
+      minWidth,
       testid
     } = _b, props = __objRest(_b, [
       "id",
@@ -1824,13 +1869,14 @@ var DataGridCell = (0, import_react10.memo)(
       "warning",
       "center",
       "width",
+      "minWidth",
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
-    const timerRef = (0, import_react10.useRef)(null);
-    const [isGrabbing, setIsGrabbing] = (0, import_react10.useState)(false);
-    const [isPointerPressed, setIsPointerPressed] = (0, import_react10.useState)(false);
-    (0, import_react10.useEffect)(() => {
+    const timerRef = (0, import_react11.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react11.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react11.useState)(false);
+    (0, import_react11.useEffect)(() => {
       return () => {
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -1897,7 +1943,7 @@ var DataGridCell = (0, import_react10.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)(
@@ -1938,13 +1984,13 @@ function DataCellHeader(_a) {
     "testid",
     "useMenuDefaultMinWidth"
   ]);
-  var _a2, _b2, _c;
-  const [showMenu, setShowMenu] = (0, import_react10.useState)(false);
-  const [filter, setFilter] = (0, import_react10.useState)(
+  var _a2;
+  const [showMenu, setShowMenu] = (0, import_react11.useState)(false);
+  const [filter, setFilter] = (0, import_react11.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
-  const ref = (0, import_react10.useRef)(null);
-  const predeterminedPinned = (0, import_react10.useRef)(false);
+  const ref = (0, import_react11.useRef)(null);
+  const predeterminedPinned = (0, import_react11.useRef)(false);
   const {
     menuRootRef,
     isMenuActive,
@@ -1952,7 +1998,7 @@ function DataCellHeader(_a) {
     listeners: subMenuListeners,
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a3;
     const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
     const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
@@ -1961,7 +2007,7 @@ function DataCellHeader(_a) {
       header.column.id
     );
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handler = setTimeout(() => {
       header.column.setFilterValue(filter);
     }, 500);
@@ -1972,7 +2018,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)"
@@ -1986,6 +2032,7 @@ function DataCellHeader(_a) {
       type: "header",
       component: "header",
       style,
+      minWidth: `${header.column.getSize()}px`,
       onClick: header.column.getToggleSortingHandler(),
       onRightClick: () => setShowMenu(!showMenu)
     }, props), {
@@ -2009,8 +2056,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({
@@ -2083,8 +2130,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), {
@@ -2172,7 +2219,6 @@ function DraggableCellHeader(_a) {
     "header",
     "children"
   ]);
-  var _a2, _b2;
   const { attributes, isDragging, listeners, setNodeRef, transform, node } = (0, import_sortable.useSortable)({
     id: header.column.id
   });
@@ -2183,7 +2229,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"
@@ -2209,7 +2254,6 @@ function DragAlongCell(_a) {
     "cell",
     "children"
   ]);
-  var _a2, _b2, _c, _d;
   const { isDragging, setNodeRef, transform } = (0, import_sortable.useSortable)({
     id: cell.column.id
   });
@@ -2218,24 +2262,15 @@ 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";
 
 // src/components/DataGrid/index.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_react_table3 = require("@tanstack/react-table");
 var import_core = require("@dnd-kit/core");
 var import_sortable2 = require("@dnd-kit/sortable");
@@ -2263,7 +2298,7 @@ function getSortIcon(sort, nextSort = false) {
 }
 
 // src/components/DataGrid/PinnedColumns.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 
 // src/components/DataGrid/TableBody/index.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -2272,7 +2307,7 @@ var import_clsx11 = __toESM(require("clsx"), 1);
 // src/components/DataGrid/TableBody/TableBodyRow.tsx
 var import_clsx10 = __toESM(require("clsx"), 1);
 var import_react_table = require("@tanstack/react-table");
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableBodyRow({
   id,
@@ -2322,13 +2357,13 @@ function TableBodyRow({
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { style: { display: "flex", width: virtualPaddingLeft } })
         ) : null,
         columns.map((column) => {
-          var _a2, _b, _c;
+          var _a2;
           const cell = locked ? column : visibleCells[column.index];
           if (!cell) {
             return;
           }
           const cellValue = cell.getValue();
-          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             CellElement,
             {
               id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
@@ -2337,7 +2372,6 @@ function TableBodyRow({
               className: (0, import_clsx10.default)({
                 "justify-end": typeof cellValue === "number"
               }),
-              width: (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.headerWidth) != null ? _c : `${cell.column.getSize()}px`,
               children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 Tooltip,
                 {
@@ -2523,7 +2557,15 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingCell, { id, testid, column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              LoadingCell,
+              {
+                id,
+                testid,
+                column: column.columnDef
+              },
+              column.id
+            ))
           }
         )
       ]
@@ -2532,10 +2574,10 @@ function TableBody({
 }
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function ColumnSelectorMenuOption({
   id,
@@ -2543,7 +2585,7 @@ function ColumnSelectorMenuOption({
   column,
   toggleColumnVisibility
 }) {
-  const [isVisible, setIsVisible] = (0, import_react12.useState)(column.getIsVisible());
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Checkbox,
@@ -2569,8 +2611,8 @@ function ColumnSelectorHeaderCell({
   toggleColumnVisibility,
   resetColumnVisibility
 }) {
-  const ref = (0, import_react13.useRef)(null);
-  const [show, setShow] = (0, import_react13.useState)(false);
+  const ref = (0, import_react14.useRef)(null);
+  const [show, setShow] = (0, import_react14.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     DataGridCell,
     {
@@ -2733,7 +2775,7 @@ function PinnedColumns(_a) {
                       header.id
                     );
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react14.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react15.default.Fragment, { children: ((_c = header.column.columnDef.meta) == null ? void 0 : _c.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Checkbox,
                     {
                       checked: allSelectedAcrossPages,
@@ -2811,12 +2853,29 @@ function DataGrid({
   useMenuDefaultMinWidth
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const [columnOrder, setColumnOrder] = (0, import_react15.useState)(
-    () => columns.map((c) => c.id)
+  const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
+  const {
+    columns: tableColumns,
+    setColumns: setTableColumns,
+    layoutSignal
+  } = useTableLayout(columns, id != null ? id : testid);
+  const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
+    tableColumns.map((c) => c.id)
   );
-  const [localSorting, setLocalSorting] = (0, import_react15.useState)([]);
-  const [localColumnFilters, setLocalColumnFilters] = (0, import_react15.useState)([]);
-  const [localRowSelection, setLocalRowSelection] = (0, import_react15.useState)({});
+  const [columnVisibility, setColumnVisibility] = (0, import_react16.useState)(
+    Object.fromEntries(
+      tableColumns.filter((column) => !!column.id).map((column) => {
+        var _a2, _b2;
+        return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+      })
+    )
+  );
+  (0, import_react16.useEffect)(() => {
+    setColumnOrder(tableColumns.map((c) => c.id));
+    resetColumnVisibility();
+  }, [layoutSignal]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -2834,38 +2893,34 @@ function DataGrid({
     const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
     (onRowSelectionChange != null ? onRowSelectionChange : setLocalRowSelection)(value);
   } : setLocalRowSelection;
-  const dndId = (0, import_react15.useId)();
-  const containerRef = import_react15.default.useRef(null);
-  const [columnVisibility, setColumnVisibility] = (0, import_react15.useState)(() => {
-    const initialVisibility = {};
-    columns.forEach((column) => {
-      var _a2, _b2;
-      if (column.id) {
-        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-      }
-    });
-    return initialVisibility;
-  });
-  const toggleColumnVisibility = (0, import_react15.useCallback)(
+  const dndId = (0, import_react16.useId)();
+  const containerRef = import_react16.default.useRef(null);
+  const toggleColumnVisibility = (0, import_react16.useCallback)(
     (columnId, isVisible) => {
-      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [columnId]: isVisible }));
+      setTableColumns((prev) => {
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+        return [...prev];
+      }, true);
     },
-    [setColumnVisibility]
+    [setTableColumns]
   );
-  const resetColumnVisibility = (0, import_react15.useCallback)(() => {
-    setColumnVisibility(() => {
-      const initialVisibility = {};
-      columns.forEach((column) => {
-        var _a2, _b2;
-        if (column.id) {
-          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-        }
-      });
-      return initialVisibility;
-    });
-  }, [columns]);
+  const resetColumnVisibility = (0, import_react16.useCallback)(() => {
+    setColumnVisibility(
+      Object.fromEntries(
+        tableColumns.filter((column) => !!column.id).map((column) => {
+          var _a2, _b2;
+          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+        })
+      )
+    );
+  }, [tableColumns]);
   const table = (0, import_react_table3.useReactTable)({
-    columns,
+    columns: tableColumns,
     data,
     getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
@@ -2949,7 +3004,12 @@ function DataGrid({
       setColumnOrder((prev) => {
         const oldIndex = prev.indexOf(active.id);
         const newIndex = prev.indexOf(over.id);
-        return (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
+        const newOrder = (0, import_sortable2.arrayMove)(prev, oldIndex, newIndex);
+        setTableColumns((prev2) => {
+          const res = newOrder.map((id2) => prev2.find((col) => col.id === id2)).filter(Boolean);
+          return res;
+        });
+        return newOrder;
       });
     }
   };
@@ -3035,23 +3095,21 @@ function DataGrid({
                                 )
                               ) : null,
                               virtualColumns.map((virtualColumn) => {
-                                var _a2, _b2, _c2, _d2;
+                                var _a2, _b2, _c2;
                                 const header = headerGroup.headers[virtualColumn.index];
                                 if (!header) {
                                   return;
                                 }
                                 if (typeof header.column.columnDef.header === "string") {
-                                  const customHeaderWidth = (_a2 = header.column.columnDef.meta) == null ? void 0 : _a2.headerWidth;
-                                  const cellValue = (_b2 = table.getRowModel().rows[0]) == null ? void 0 : _b2.getValue(header.column.id);
+                                  const cellValue = (_a2 = table.getRowModel().rows[0]) == null ? void 0 : _a2.getValue(header.column.id);
                                   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                                     DraggableCellHeader,
                                     {
                                       id: id ? `${id}-header-${header.id}` : void 0,
                                       testid: testid ? `${testid}-header-${header.id}` : void 0,
                                       header,
-                                      locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
+                                      locked: (_b2 = header.column.columnDef.meta) == null ? void 0 : _b2.locked,
                                       center: centerHeader,
-                                      width: customHeaderWidth,
                                       className: (0, import_clsx13.default)(
                                         header.column.getCanSort() ? "cursor-pointer" : "cursor-grab",
                                         "group",
@@ -3092,7 +3150,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_d2 = header.column.columnDef.meta) == null ? void 0 : _d2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,
@@ -3296,7 +3354,7 @@ function adaptTableStateSetter(setter) {
 }
 
 // src/components/Select.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_clsx14 = __toESM(require("clsx"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Select = (_a) => {
@@ -3329,11 +3387,11 @@ var Select = (_a) => {
     "displayValue",
     "value"
   ]);
-  const inputRef = (0, import_react16.useRef)(null);
-  const inputContainerRef = (0, import_react16.useRef)(null);
-  const preventFocusOnInitialRender = (0, import_react16.useRef)(true);
-  const [show, setShow] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const inputRef = (0, import_react17.useRef)(null);
+  const inputContainerRef = (0, import_react17.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react17.useRef)(true);
+  const [show, setShow] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     var _a2;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
@@ -3712,7 +3770,7 @@ Button.displayName = "Button";
 
 // src/components/Tooltip.tsx
 var import_clsx18 = __toESM(require("clsx"), 1);
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Tooltip = ({
@@ -3725,11 +3783,11 @@ var Tooltip = ({
   offset = 8,
   keepHidden = false
 }) => {
-  const ref = (0, import_react17.useRef)(null);
-  const tooltipRef = (0, import_react17.useRef)(null);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react17.useState)({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = (0, import_react17.useState)(false);
-  const [removeOpacity, setRemoveOpacity] = (0, import_react17.useState)(false);
+  const ref = (0, import_react18.useRef)(null);
+  const tooltipRef = (0, import_react18.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react18.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react18.useState)(false);
   const updatePosition = () => {
     if (!ref.current || !tooltipRef.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -3768,14 +3826,14 @@ var Tooltip = ({
     setIsVisible(false);
     setRemoveOpacity(false);
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isVisible && tooltipRef.current) {
       requestAnimationFrame(() => {
         updatePosition();
       });
     }
   }, [isVisible]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isVisible) {
       window.addEventListener("resize", updatePosition);
       return () => window.removeEventListener("resize", updatePosition);