@dmsi/wedgekit-react 0.0.643 → 0.0.645

package/dist/components/index.cjs

@@ -149,7 +149,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
 
 // src/components/DataGridCell.tsx
 var import_clsx9 = __toESM(require("clsx"), 1);
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -293,7 +293,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 
 // src/components/MenuOption.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/Label.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
@@ -627,11 +627,24 @@ function formatDate(date) {
 
 // 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 arr2Map = /* @__PURE__ */ new Map();
+  for (const item of arr2) {
+    const id = item.id;
+    if (id !== void 0) {
+      arr2Map.set(id, item);
+    }
+  }
+  return arr1.map((item1) => {
+    const id = item1.id;
+    if (id !== void 0 && arr2Map.has(id)) {
+      const item2 = arr2Map.get(id);
+      const meta1 = item1.meta;
+      const meta2 = item2.meta;
+      const mergedMeta = meta1 && meta2 && typeof meta1 === "object" && typeof meta2 === "object" ? __spreadValues(__spreadValues({}, meta1), meta2) : meta2 != null ? meta2 : meta1;
+      return __spreadProps(__spreadValues(__spreadValues({}, item1), item2), { meta: mergedMeta });
+    }
+    return item1;
+  });
 }
 
 // src/utils/index.ts
@@ -667,52 +680,58 @@ var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
 function useTableLayout(initialColumns, key, autosync = true) {
   const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
   const [isReady, setIsReady] = (0, import_react5.useState)(false);
-  const renderCountRef = (0, import_react5.useRef)(0);
+  const isReadyRef = (0, import_react5.useRef)(false);
+  const keyRef = (0, import_react5.useRef)(key);
+  (0, import_react5.useEffect)(() => {
+    isReadyRef.current = isReady;
+    keyRef.current = key;
+  }, [isReady, key]);
   const handleSaveLayout = (0, import_react5.useCallback)(
     (setter, _internal) => {
-      if (!isReady && !_internal || !key) return;
+      if (!isReadyRef.current && !_internal || !keyRef.current) return;
       setColumns((prevColumns) => {
         const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
-        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
+        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal) {
           return prevColumns;
+        }
         localStorage.setItem(
-          getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
+          getLocalStorageKeyWithPrefix(`${keyRef.current}-tableLayout`),
           JSON.stringify(newColumns)
         );
         return newColumns;
       });
     },
-    [isReady, key]
+    []
   );
   (0, import_react5.useEffect)(() => {
     if (!autosync) return;
-    if (!key) return setIsReady(true);
-    if (renderCountRef.current > 1) {
-      throw new Error(
-        `useTableLayout should only be called once per component render cycle.
-        ${renderCountRef.current} Renders detected.
-        Check dependency stability`
-      );
+    if (!key) {
+      setIsReady(true);
+      return;
     }
-    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(
       getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
     );
     if (savedLayout) {
-      handleSaveLayout(
+      setColumns(
         mergeObjectArrays(
           initialColumns,
           JSON.parse(savedLayout)
-        ),
-        true
+        )
       );
+    } else {
+      localStorage.setItem(
+        getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
+        JSON.stringify(initialColumns)
+      );
+      setColumns((prev) => {
+        if (JSON.stringify(initialColumns) === JSON.stringify(prev))
+          return prev;
+        return initialColumns;
+      });
     }
-    if (!savedLayout) handleSaveLayout(initialColumns, true);
     setIsReady(true);
-    return () => {
-      renderCountRef.current = 0;
-    };
-  }, [handleSaveLayout, initialColumns, key, autosync]);
+  }, [initialColumns, key, autosync]);
   const getSavedLayout = (0, import_react5.useCallback)(() => {
     const savedLayout = localStorage.getItem(
       getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
@@ -724,6 +743,9 @@ function useTableLayout(initialColumns, key, autosync = true) {
   return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
 }
 
+// src/hooks/useEditCell.tsx
+var import_react6 = require("react");
+
 // src/components/Caption.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -875,12 +897,12 @@ var MenuOption = ({
   onMouseMove,
   small = false
 }) => {
-  const uniqueId = (0, import_react6.useId)();
-  const internalRef = (0, import_react6.useRef)(null);
+  const uniqueId = (0, import_react7.useId)();
+  const internalRef = (0, import_react7.useRef)(null);
   const actualRef = ref || internalRef;
-  const menuId = (0, import_react6.useRef)(`menu-${uniqueId}`);
+  const menuId = (0, import_react7.useRef)(`menu-${uniqueId}`);
   const isMobile = useMatchesMobile();
-  const [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react6.useState)(false);
+  const [isSubMenuHovered, setIsSubMenuHovered] = (0, import_react7.useState)(false);
   const handleMouseEnter = () => {
     if (subMenu && onSubMenuHover && !disabled) {
       onSubMenuHover(menuId.current, subMenuLevel);
@@ -1040,27 +1062,27 @@ function highlightMatch(text, searchValue) {
 
 // src/components/Menu.tsx
 var import_clsx7 = __toESM(require("clsx"), 1);
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/useMenuSystem.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useSubMenuSystem(mobilePositionTo) {
-  const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
+  const [activeMenus, setActiveMenus] = (0, import_react8.useState)(
     {}
   );
-  const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
-  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.useState)(
+  const [activeMenu, setActiveMenu] = (0, import_react8.useState)("");
+  const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react8.useState)(
     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 menuRootRef = (0, import_react8.useRef)(null);
+  const subMenuRefs = (0, import_react8.useRef)({});
+  const hoverTimeoutRef = (0, import_react8.useRef)(null);
+  const closeTimeoutRef = (0, import_react8.useRef)(null);
+  const mouseStopTimeoutRef = (0, import_react8.useRef)(null);
+  const isMouseMovingRef = (0, import_react8.useRef)(false);
+  const pendingOpenActionRef = (0, import_react8.useRef)(null);
+  const pendingCloseActionRef = (0, import_react8.useRef)(null);
   const isMobile = useMatchesMobile();
   const toggleMenu = (menuId, level) => {
     if (closeTimeoutRef.current) {
@@ -1100,7 +1122,7 @@ function useSubMenuSystem(mobilePositionTo) {
       return newActiveMenus;
     });
   };
-  const executePendingActions = (0, import_react7.useCallback)(() => {
+  const executePendingActions = (0, import_react8.useCallback)(() => {
     if (pendingCloseActionRef.current) {
       pendingCloseActionRef.current();
       pendingCloseActionRef.current = null;
@@ -1189,7 +1211,7 @@ function useSubMenuSystem(mobilePositionTo) {
   const isMenuActive = (menuId, level) => {
     return activeMenus[level] === menuId;
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a;
       if (Object.keys(activeMenus).length === 0) return;
@@ -1208,7 +1230,7 @@ function useSubMenuSystem(mobilePositionTo) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [activeMenus]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
@@ -1286,13 +1308,13 @@ function useSubMenuSystem(mobilePositionTo) {
   };
 }
 function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
+  const [menuPosition, setMenuPosition] = (0, import_react8.useState)({
     top: 0,
     left: 0,
     minWidth: 0
   });
   const isMobile = options == null ? void 0 : options.isMobile;
-  const updatePosition = (0, import_react7.useCallback)(() => {
+  const updatePosition = (0, import_react8.useCallback)(() => {
     var _a, _b, _c;
     if (!(elementRef == null ? void 0 : elementRef.current)) return;
     const triggerRect = elementRef.current.getBoundingClientRect();
@@ -1340,7 +1362,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_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
     const handleClickOutside = (event) => {
       var _a, _b, _c, _d, _e;
@@ -1366,7 +1388,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
     options == null ? void 0 : options.menuRef,
     options == null ? void 0 : options.additionalRefs
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (elementRef == null ? void 0 : elementRef.current) {
@@ -1447,9 +1469,9 @@ var Menu = (_a) => {
     "menuName",
     "calculateMinMaxHeight"
   ]);
-  const internalRef = (0, import_react8.useRef)(null);
+  const internalRef = (0, import_react9.useRef)(null);
   const actualRef = ref || internalRef;
-  const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
+  const [maxHeight, setMaxHeight] = (0, import_react9.useState)("180px");
   const isMobile = useMatchesMobile();
   const { menuPosition, updatePosition } = useMenuPosition(
     isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
@@ -1462,7 +1484,7 @@ var Menu = (_a) => {
       isMobile: !!(isMobile && mobilePositionTo)
     }
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (calculateMinMaxHeight) {
       return;
     }
@@ -1486,7 +1508,7 @@ var Menu = (_a) => {
       cancelAnimationFrame(raf);
     };
   }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!calculateMinMaxHeight) {
       return;
     }
@@ -1497,14 +1519,14 @@ var Menu = (_a) => {
       setMaxHeight(`${calculatedMaxHeight}px`);
     }
   }, [actualRef.current, positionTo == null ? void 0 : positionTo.current, calculateMinMaxHeight]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!show) {
       return;
     }
     initializeMenuFocus();
     updatePosition();
   }, [show, updatePosition]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!show || !setShow) {
       return;
     }
@@ -1658,10 +1680,10 @@ var Menu = (_a) => {
 Menu.displayName = "Menu";
 
 // src/components/Search.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/Input.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_clsx8 = __toESM(require("clsx"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var InputBase = (_a) => {
@@ -1718,9 +1740,9 @@ var InputBase = (_a) => {
     "data-error": error && !focus || null,
     "data-focus": focus || null
   };
-  const inputRef = (0, import_react9.useRef)(null);
+  const inputRef = (0, import_react10.useRef)(null);
   const inputId = id ? `${id}-input` : void 0;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a2;
     const input = inputRef.current;
     const focusHandler = () => {
@@ -1879,15 +1901,15 @@ var Input = (_a) => {
     "testid",
     "rightAdornment"
   ]);
-  const [internalValue, setInternalValue] = (0, import_react9.useState)("");
-  const [displayValue, setDisplayValue] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
+  const [internalValue, setInternalValue] = (0, import_react10.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
     var _a2;
     const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
     setInternalValue(stringValue);
     setDisplayValue(stringValue);
   }, [propValue]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a2;
     if (variant !== "currency") {
       return;
@@ -2148,14 +2170,14 @@ var Search = (_a) => {
     "removeRoundness",
     "autocompletePadding"
   ]);
-  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 inputRef = (0, import_react11.useRef)(null);
+  const inputContainerRef = (0, import_react11.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react11.useRef)(true);
+  const [show, setShow] = (0, import_react11.useState)(false);
+  const [clearing, setClearing] = (0, import_react11.useState)(false);
+  const uniqueId = (0, import_react11.useId)();
   const searchMenuName = `search-menu-${uniqueId}`;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a2;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
@@ -2239,7 +2261,7 @@ Search.displayName = "Search";
 
 // src/components/DataGridCell.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var DataGridCell = (0, import_react11.memo)(
+var DataGridCell = (0, import_react12.memo)(
   (_a) => {
     var _b = _a, {
       id,
@@ -2281,10 +2303,10 @@ var DataGridCell = (0, import_react11.memo)(
       "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
-    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)(() => {
+    const timerRef = (0, import_react12.useRef)(null);
+    const [isGrabbing, setIsGrabbing] = (0, import_react12.useState)(false);
+    const [isPointerPressed, setIsPointerPressed] = (0, import_react12.useState)(false);
+    (0, import_react12.useEffect)(() => {
       return () => {
         if (timerRef.current) {
           clearTimeout(timerRef.current);
@@ -2394,12 +2416,12 @@ function DataCellHeader(_a) {
     "useMenuDefaultMinWidth"
   ]);
   var _a2;
-  const [showMenu, setShowMenu] = (0, import_react11.useState)(false);
-  const [filter, setFilter] = (0, import_react11.useState)(
+  const [showMenu, setShowMenu] = (0, import_react12.useState)(false);
+  const [filter, setFilter] = (0, import_react12.useState)(
     (_a2 = header.column.getFilterValue()) != null ? _a2 : ""
   );
-  const ref = (0, import_react11.useRef)(null);
-  const predeterminedPinned = (0, import_react11.useRef)(false);
+  const ref = (0, import_react12.useRef)(null);
+  const predeterminedPinned = (0, import_react12.useRef)(false);
   const { column, getContext } = header;
   const { id: columnId, setFilterValue } = column;
   const {
@@ -2409,14 +2431,14 @@ function DataCellHeader(_a) {
     listeners: subMenuListeners,
     mobileHide
   } = useSubMenuSystem(node ? node : ref);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a3, _b2, _c;
     const columnPinning = (_a3 = getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
     const left = (_b2 = columnPinning == null ? void 0 : columnPinning.left) != null ? _b2 : [];
     const right = (_c = columnPinning == null ? void 0 : columnPinning.right) != null ? _c : [];
     predeterminedPinned.current = [...left, ...right].includes(columnId);
   }, [columnId, getContext]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handler = setTimeout(() => {
       setFilterValue(filter);
     }, 500);
@@ -2679,7 +2701,7 @@ function DragAlongCell(_a) {
 DragAlongCell.displayName = "DragAlongCell";
 
 // src/components/DataGrid/index.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __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");
@@ -2707,7 +2729,7 @@ function getSortIcon(sort, nextSort = false) {
 }
 
 // src/components/DataGrid/PinnedColumns.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/DataGrid/TableBody/index.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -2716,7 +2738,7 @@ var import_clsx12 = __toESM(require("clsx"), 1);
 // src/components/DataGrid/TableBody/TableBodyRow.tsx
 var import_clsx11 = __toESM(require("clsx"), 1);
 var import_react_table = require("@tanstack/react-table");
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var valueFormatters = {
   date: (value) => typeof value === "string" ? formatDate(value) : "",
@@ -2784,7 +2806,7 @@ function TableBodyRow({
           const cellFormat = (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.format;
           const cellValue = cellFormat && isValueFormatterKey(cellFormat) ? valueFormatters[cellFormat](cell.getValue()) : cell.getValue();
           const cellAlignment = (_c = (_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) != null ? _c : typeof cellValue === "number" ? "right" : "left";
-          return ((_d = cell.column.columnDef.meta) == null ? void 0 : _d.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react12.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          return ((_d = cell.column.columnDef.meta) == null ? void 0 : _d.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             CellElement,
             {
               id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
@@ -2998,10 +3020,10 @@ function TableBody({
 }
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function ColumnSelectorMenuOption({
   id,
@@ -3009,7 +3031,7 @@ function ColumnSelectorMenuOption({
   column,
   toggleColumnVisibility
 }) {
-  const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
+  const [isVisible, setIsVisible] = (0, import_react14.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, testid, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Checkbox,
@@ -3035,8 +3057,8 @@ function ColumnSelectorHeaderCell({
   toggleColumnVisibility,
   resetColumnVisibility
 }) {
-  const ref = (0, import_react14.useRef)(null);
-  const [show, setShow] = (0, import_react14.useState)(false);
+  const ref = (0, import_react15.useRef)(null);
+  const [show, setShow] = (0, import_react15.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DataGridCell,
     {
@@ -3205,7 +3227,7 @@ function PinnedColumns(_a) {
                       header.id
                     );
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react15.default.Fragment, { children: ((_f = header.column.columnDef.meta) == null ? void 0 : _f.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react16.default.Fragment, { children: ((_f = header.column.columnDef.meta) == null ? void 0 : _f.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DataGridCell, { type: "header", component: "checkbox", locked: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     Checkbox,
                     {
                       checked: allSelectedAcrossPages,
@@ -3287,23 +3309,23 @@ function DataGrid({
   ref
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  (0, import_react16.useImperativeHandle)(ref, () => ({
+  (0, import_react17.useImperativeHandle)(ref, () => ({
     getSavedLayout: () => {
       return getSavedLayout();
     }
   }));
-  const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
-  const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
-  const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
+  const [localSorting, setLocalSorting] = (0, import_react17.useState)([]);
+  const [localColumnFilters, setLocalColumnFilters] = (0, import_react17.useState)([]);
+  const [localRowSelection, setLocalRowSelection] = (0, import_react17.useState)({});
   const {
     columns: tableColumns,
     setColumns: setTableColumns,
     getSavedLayout
   } = useTableLayout(columns, id != null ? id : testid);
-  const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
+  const [columnOrder, setColumnOrder] = (0, import_react17.useState)(
     tableColumns.map((c) => c.id)
   );
-  const [columnVisibility, setColumnVisibility] = (0, import_react16.useState)(
+  const [columnVisibility, setColumnVisibility] = (0, import_react17.useState)(
     Object.fromEntries(
       tableColumns.filter((column) => !!column.id).map((column) => {
         var _a2, _b2;
@@ -3311,7 +3333,7 @@ function DataGrid({
       })
     )
   );
-  const updateColumnVisibility = (0, import_react16.useCallback)(
+  const updateColumnVisibility = (0, import_react17.useCallback)(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -3325,7 +3347,7 @@ function DataGrid({
     },
     [tableColumns]
   );
-  const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
+  const resetDefaultColumnVisibility = (0, import_react17.useCallback)(() => {
     setTableColumns((prev) => {
       columns.forEach((column) => {
         var _a2, _b2;
@@ -3341,7 +3363,7 @@ function DataGrid({
       return [...prev];
     }, true);
   }, [columns, setTableColumns]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     updateColumnVisibility(true);
   }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
@@ -3357,7 +3379,7 @@ function DataGrid({
     (onColumnFiltersChange != null ? onColumnFiltersChange : setLocalColumnFilters)(value);
   } : setLocalColumnFilters;
   const rowSelection = externalRowSelection != null ? externalRowSelection : localRowSelection;
-  const setRowSelection = (0, import_react16.useCallback)(
+  const setRowSelection = (0, import_react17.useCallback)(
     (updaterOrValue) => {
       if (pagination) {
         const value = typeof updaterOrValue === "function" ? updaterOrValue(externalRowSelection != null ? externalRowSelection : {}) : updaterOrValue;
@@ -3371,9 +3393,9 @@ function DataGrid({
     },
     [externalRowSelection, onRowSelectionChange, pagination]
   );
-  const dndId = (0, import_react16.useId)();
-  const containerRef = import_react16.default.useRef(null);
-  const toggleColumnVisibility = (0, import_react16.useCallback)(
+  const dndId = (0, import_react17.useId)();
+  const containerRef = import_react17.default.useRef(null);
+  const toggleColumnVisibility = (0, import_react17.useCallback)(
     (columnId, isVisible) => {
       setTableColumns((prev) => {
         const persistedIndex = prev.findIndex((col) => col.id === columnId);
@@ -3621,7 +3643,7 @@ function DataGrid({
                                     header.id
                                   );
                                 }
-                                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react16.default.Fragment, { children: ((_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.default.Fragment, { children: ((_e2 = header.column.columnDef.meta) == null ? void 0 : _e2.checkbox) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                                   DataGridCell,
                                   {
                                     id: id ? `${id}-header-${header.id}` : void 0,
@@ -3827,7 +3849,7 @@ function adaptTableStateSetter(setter) {
 }
 
 // src/components/Select.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_clsx15 = __toESM(require("clsx"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Select = (_a) => {
@@ -3861,11 +3883,11 @@ var Select = (_a) => {
     "value"
   ]);
   var _a2;
-  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)(() => {
+  const inputRef = (0, import_react18.useRef)(null);
+  const inputContainerRef = (0, import_react18.useRef)(null);
+  const preventFocusOnInitialRender = (0, import_react18.useRef)(true);
+  const [show, setShow] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     var _a3;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
@@ -4287,7 +4309,7 @@ Button.displayName = "Button";
 
 // src/components/Tooltip.tsx
 var import_clsx19 = __toESM(require("clsx"), 1);
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Tooltip = ({
@@ -4300,11 +4322,11 @@ var Tooltip = ({
   offset = 8,
   keepHidden = 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 ref = (0, import_react19.useRef)(null);
+  const tooltipRef = (0, import_react19.useRef)(null);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react19.useState)({ top: 0, left: 0 });
+  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
+  const [removeOpacity, setRemoveOpacity] = (0, import_react19.useState)(false);
   const updatePosition = () => {
     if (!ref.current || !tooltipRef.current) return;
     const rect = ref.current.getBoundingClientRect();
@@ -4343,14 +4365,14 @@ var Tooltip = ({
     setIsVisible(false);
     setRemoveOpacity(false);
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isVisible && tooltipRef.current) {
       requestAnimationFrame(() => {
         updatePosition();
       });
     }
   }, [isVisible]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isVisible) {
       window.addEventListener("resize", updatePosition);
       return () => window.removeEventListener("resize", updatePosition);
@@ -4408,12 +4430,12 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/DateInput.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/components/CalendarRange.tsx
 var import_clsx20 = __toESM(require("clsx"), 1);
-var import_react19 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_polyfill = require("@js-temporal/polyfill");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function DateCell(_a) {
@@ -4526,20 +4548,20 @@ function CalendarRange({
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
   const today = import_polyfill.Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = (0, import_react19.useState)(
+  const [baseMonth, setBaseMonth] = (0, import_react20.useState)(
     fromDate != null ? fromDate : today.with({ day: 1 })
   );
-  const [selecting, setSelecting] = (0, import_react19.useState)("from");
-  const [pendingFrom, setPendingFrom] = (0, import_react19.useState)(void 0);
-  const [hoveredDate, setHoveredDate] = (0, import_react19.useState)(void 0);
-  (0, import_react19.useEffect)(() => {
+  const [selecting, setSelecting] = (0, import_react20.useState)("from");
+  const [pendingFrom, setPendingFrom] = (0, import_react20.useState)(void 0);
+  const [hoveredDate, setHoveredDate] = (0, import_react20.useState)(void 0);
+  (0, import_react20.useEffect)(() => {
     if (fromDate) {
       setBaseMonth(fromDate.with({ day: 1 }));
     } else if (toDate) {
       setBaseMonth(toDate.with({ day: 1 }));
     }
   }, [from, to]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (fromDate && toDate) {
       setSelecting("from");
       setPendingFrom(void 0);
@@ -4685,14 +4707,14 @@ function CalendarPane({
   const years = Array.from({ length: 100 }).map(
     (_, i) => baseMonth.year - 50 + i
   );
-  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react19.useState)(false);
-  const [yearMenuOpen, setYearMenuOpen] = (0, import_react19.useState)(false);
-  const monthMenuRef = (0, import_react19.useRef)(null);
-  const yearMenuRef = (0, import_react19.useRef)(null);
+  const [monthMenuOpen, setMonthMenuOpen] = (0, import_react20.useState)(false);
+  const [yearMenuOpen, setYearMenuOpen] = (0, import_react20.useState)(false);
+  const monthMenuRef = (0, import_react20.useRef)(null);
+  const yearMenuRef = (0, import_react20.useRef)(null);
   const month = getMonthData(offset);
   const totalCells = 42;
   const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react19.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react20.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
@@ -4900,24 +4922,24 @@ var DateInput = (_a) => {
     "label",
     "isDateAvailable"
   ]);
-  const [visible, setVisible] = (0, import_react20.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react20.useState)("");
-  const [isTyping, setIsTyping] = (0, import_react20.useState)(false);
-  const popoverRef = (0, import_react20.useRef)(null);
-  const triggerRef = (0, import_react20.useRef)(null);
-  const rootRef = (0, import_react20.useRef)(null);
-  const [calendarPosition, setCalendarPosition] = (0, import_react20.useState)({
+  const [visible, setVisible] = (0, import_react21.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react21.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react21.useState)(false);
+  const popoverRef = (0, import_react21.useRef)(null);
+  const triggerRef = (0, import_react21.useRef)(null);
+  const rootRef = (0, import_react21.useRef)(null);
+  const [calendarPosition, setCalendarPosition] = (0, import_react21.useState)({
     top: 0,
     left: 0,
     width: 0
   });
   const [from, to] = [value, ""];
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isTyping) {
       setInputValue(formatDisplayValue(from));
     }
   }, [from, isTyping]);
-  (0, import_react20.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     if (visible) {
       updatePosition();
     }
@@ -4932,7 +4954,7 @@ var DateInput = (_a) => {
       });
     }
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     updatePosition();
     const resizeObserver = new ResizeObserver(updatePosition);
     if (triggerRef.current) {
@@ -4944,7 +4966,7 @@ var DateInput = (_a) => {
       window.removeEventListener("scroll", updatePosition);
     };
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
@@ -4957,7 +4979,7 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
         setVisible(false);
@@ -5564,18 +5586,18 @@ function Theme({
 }
 
 // src/components/MobileDataGrid/ColumnSelector/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
-var import_react21 = require("react");
-var GridContext = (0, import_react21.createContext)(null);
+var import_react22 = require("react");
+var GridContext = (0, import_react22.createContext)(null);
 
 // src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
 function useGridContext() {
-  const ctx = (0, import_react22.useContext)(GridContext);
+  const ctx = (0, import_react23.useContext)(GridContext);
   if (!ctx) {
     throw new Error("useGridContext must be used within GridContextProvider");
   }
@@ -5586,8 +5608,8 @@ function useGridContext() {
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function ColumnSelector() {
   const context = useGridContext();
-  const ref = (0, import_react23.useRef)(null);
-  const [show, setShow] = (0, import_react23.useState)(false);
+  const ref = (0, import_react24.useRef)(null);
+  const [show, setShow] = (0, import_react24.useState)(false);
   const {
     columns,
     id,
@@ -5598,7 +5620,7 @@ function ColumnSelector() {
     resetColumnVisibility,
     dispatch
   } = context;
-  const toggleColumnVisibility = (0, import_react23.useCallback)(
+  const toggleColumnVisibility = (0, import_react24.useCallback)(
     (index, visible) => {
       dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
     },
@@ -5753,7 +5775,7 @@ function MobileDataGridHeader({
 }
 
 // src/components/MobileDataGrid/GridContextProvider/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/MobileDataGrid/dataGridReducer.ts
 function dataGridReducer(state, action) {
@@ -5796,10 +5818,10 @@ function GridContextProvider(props) {
     getId,
     onRowSelect
   } = props;
-  const [columns, dispatch] = (0, import_react24.useReducer)(dataGridReducer, initialColumns);
-  const [selectedRowIds, setSelectedRowIds] = (0, import_react24.useState)([]);
-  const [currentRow, setCurrentRow] = (0, import_react24.useState)(null);
-  const resetColumnVisibility = (0, import_react24.useCallback)(() => {
+  const [columns, dispatch] = (0, import_react25.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react25.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react25.useState)(null);
+  const resetColumnVisibility = (0, import_react25.useCallback)(() => {
     const newColumns = columns.map((column) => {
       var _a;
       const initialColumn = initialColumns.find((c) => c.id === column.id);
@@ -5811,7 +5833,7 @@ function GridContextProvider(props) {
     });
     dispatch({ type: "SET", payload: newColumns });
   }, [columns, initialColumns]);
-  const handleRowSelect = (0, import_react24.useCallback)(
+  const handleRowSelect = (0, import_react25.useCallback)(
     (item) => {
       var _a;
       const rowId = (_a = getId(item)) != null ? _a : "";
@@ -5822,7 +5844,7 @@ function GridContextProvider(props) {
     },
     [getId, onRowSelect, selectedRowIds]
   );
-  const handleRowSelectAll = (0, import_react24.useCallback)(() => {
+  const handleRowSelectAll = (0, import_react25.useCallback)(() => {
     setSelectedRowIds((prev) => {
       if (prev.length === data.length) {
         return [];
@@ -5830,13 +5852,13 @@ function GridContextProvider(props) {
       return data.map(getId).filter((id2) => id2 !== void 0);
     });
   }, [data, getId]);
-  const openRowDetail = (0, import_react24.useCallback)((row) => {
+  const openRowDetail = (0, import_react25.useCallback)((row) => {
     setCurrentRow(row);
   }, []);
-  const closeRowDetail = (0, import_react24.useCallback)(() => {
+  const closeRowDetail = (0, import_react25.useCallback)(() => {
     setCurrentRow(null);
   }, []);
-  const visibleColumns = (0, import_react24.useMemo)(() => {
+  const visibleColumns = (0, import_react25.useMemo)(() => {
     const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
     if (primaryKey) {
       const pkColumn = columns.find((col) => col.id === String(primaryKey));
@@ -5883,7 +5905,7 @@ function GridContextProvider(props) {
 
 // src/components/Modal.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/ModalHeader.tsx
 var import_clsx25 = __toESM(require("clsx"), 1);
@@ -6059,10 +6081,10 @@ var import_react_dom4 = require("react-dom");
 var import_react_use = require("react-use");
 
 // src/components/useMounted.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var useMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react25.useState)(false);
-  (0, import_react25.useEffect)(() => {
+  const [isMounted, setIsMounted] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -6156,12 +6178,12 @@ var Modal = ({
 }) => {
   var _a;
   const mounted = useMounted();
-  const modalRef = (0, import_react26.useRef)(null);
-  const bgRef = (0, import_react26.useRef)(null);
+  const modalRef = (0, import_react27.useRef)(null);
+  const bgRef = (0, import_react27.useRef)(null);
   const wasOpen = (0, import_react_use.usePrevious)(open);
   const isMobile = useMatchesMobile();
   const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!mounted) return;
     if (!modalRef.current || !bgRef.current) {
       console.error("Modal or background reference is not set.");
@@ -6181,7 +6203,7 @@ var Modal = ({
       bgFadeIn(bgRef.current);
     }
   }, [mounted, onClose, open, wasOpen]);
-  const handleKeyDown = (0, import_react26.useCallback)(
+  const handleKeyDown = (0, import_react27.useCallback)(
     (e) => {
       if (e.key === "Escape") {
         if (onClose) {
@@ -6192,12 +6214,12 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleClose = (0, import_react26.useCallback)(() => {
+  const handleClose = (0, import_react27.useCallback)(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (open) {
       document.addEventListener("keyup", handleKeyDown);
     }
@@ -6205,7 +6227,7 @@ var Modal = ({
       document.removeEventListener("keyup", handleKeyDown);
     };
   }, [open, handleKeyDown]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     const scrollY = window.scrollY;
     const body = document.body;
@@ -6226,7 +6248,7 @@ var Modal = ({
     };
   }, [open]);
   const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
-  const backgroundClickHandler = (0, import_react26.useCallback)(
+  const backgroundClickHandler = (0, import_react27.useCallback)(
     (e) => {
       const target = e.target;
       const currentTarget = e.currentTarget;
@@ -6712,13 +6734,13 @@ function MobileDataGrid(props) {
 }
 
 // src/components/ProductImagePreview/Thumbnail.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/ImagePlaceholder.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function ImagePlaceholder(props) {
-  const clipId = (0, import_react27.useId)();
+  const clipId = (0, import_react28.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
@@ -6746,7 +6768,7 @@ function Thumbnail({
   onClick,
   isPlaceholder = false
 }) {
-  const [imageError, setImageError] = (0, import_react28.useState)(false);
+  const [imageError, setImageError] = (0, import_react29.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "button",
     {
@@ -6847,7 +6869,7 @@ var Grid = (_a) => {
 };
 
 // src/components/ProductImagePreview/ProductPrimaryImage.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var placeholderImageUri = "/placeholder.svg";
 function ProductPrimaryImage({
@@ -6862,12 +6884,12 @@ function ProductPrimaryImage({
   onZoomPositionChange,
   onScrollZoom
 }) {
-  const containerRef = (0, import_react29.useRef)(null);
-  const lastPointRef = (0, import_react29.useRef)(null);
-  const rafRef = (0, import_react29.useRef)(null);
-  const [active, setActive] = (0, import_react29.useState)(false);
-  const [, forceRerender] = (0, import_react29.useState)(0);
-  const imageSrc = (0, import_react29.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const containerRef = (0, import_react30.useRef)(null);
+  const lastPointRef = (0, import_react30.useRef)(null);
+  const rafRef = (0, import_react30.useRef)(null);
+  const [active, setActive] = (0, import_react30.useState)(false);
+  const [, forceRerender] = (0, import_react30.useState)(0);
+  const imageSrc = (0, import_react30.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   const schedule = () => {
     if (rafRef.current != null) return;
     rafRef.current = requestAnimationFrame(() => {
@@ -6875,7 +6897,7 @@ function ProductPrimaryImage({
       forceRerender((n) => n + 1);
     });
   };
-  const handlePointerEnter = (0, import_react29.useCallback)(() => {
+  const handlePointerEnter = (0, import_react30.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(true);
     const el = containerRef.current;
@@ -6888,13 +6910,13 @@ function ProductPrimaryImage({
       );
     }
   }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-  const handlePointerLeave = (0, import_react29.useCallback)(() => {
+  const handlePointerLeave = (0, import_react30.useCallback)(() => {
     if (!zoomEnabled) return;
     setActive(false);
     lastPointRef.current = null;
     onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
   }, [zoomEnabled, onZoomPositionChange]);
-  const handlePointerMove = (0, import_react29.useCallback)(
+  const handlePointerMove = (0, import_react30.useCallback)(
     (e) => {
       if (isPlaceholder) return;
       if (!zoomEnabled || !active) return;
@@ -6931,7 +6953,7 @@ function ProductPrimaryImage({
     },
     [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !scrollToZoomEnabled) return;
     const handleNativeWheel = (e) => {
@@ -6946,7 +6968,7 @@ function ProductPrimaryImage({
       container.removeEventListener("wheel", handleNativeWheel);
     };
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-  const handleImgError = (0, import_react29.useCallback)(
+  const handleImgError = (0, import_react30.useCallback)(
     (e) => {
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
@@ -7014,7 +7036,7 @@ function ProductPrimaryImage({
 }
 
 // src/components/ProductImagePreview/ZoomWindow.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Surface.tsx
 var import_clsx33 = __toESM(require("clsx"), 1);
@@ -7065,7 +7087,7 @@ function ZoomWindow({
   offset = 10,
   className = ""
 }) {
-  const imageSrc = (0, import_react30.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const imageSrc = (0, import_react31.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
   if (!image || !active || !pointer) return null;
   const zoomWindowSize = pointer.lensSize * scaleFactor;
   const baseW = pointer.w || width;
@@ -7194,7 +7216,7 @@ function CarouselPagination({
 }
 
 // src/components/ProductImagePreview/MobileImageCarousel.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function MobileImageCarousel({
   images,
@@ -7204,15 +7226,15 @@ function MobileImageCarousel({
   onChangeIndex,
   className = ""
 }) {
-  const containerRef = (0, import_react31.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react31.useState)(false);
-  const [startX, setStartX] = (0, import_react31.useState)(0);
-  const [currentTranslate, setCurrentTranslate] = (0, import_react31.useState)(0);
-  const [prevTranslate, setPrevTranslate] = (0, import_react31.useState)(0);
-  const [containerWidth, setContainerWidth] = (0, import_react31.useState)(width);
+  const containerRef = (0, import_react32.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react32.useState)(false);
+  const [startX, setStartX] = (0, import_react32.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react32.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react32.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react32.useState)(width);
   const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
   const gap = 16;
-  const getTranslateX = (0, import_react31.useCallback)(
+  const getTranslateX = (0, import_react32.useCallback)(
     (index) => {
       const containerCenter = containerWidth / 2;
       const imageCenter = imageSize / 2;
@@ -7221,12 +7243,12 @@ function MobileImageCarousel({
     },
     [containerWidth, imageSize, gap]
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const translateX = getTranslateX(currentIndex);
     setCurrentTranslate(translateX);
     setPrevTranslate(translateX);
   }, [currentIndex, getTranslateX]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const updateContainerWidth = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -7240,11 +7262,11 @@ function MobileImageCarousel({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const handleStart = (0, import_react31.useCallback)((clientX) => {
+  const handleStart = (0, import_react32.useCallback)((clientX) => {
     setIsDragging(true);
     setStartX(clientX);
   }, []);
-  const handleMove = (0, import_react31.useCallback)(
+  const handleMove = (0, import_react32.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const currentPosition = clientX;
@@ -7253,7 +7275,7 @@ function MobileImageCarousel({
     },
     [isDragging, startX, prevTranslate]
   );
-  const handleEnd = (0, import_react31.useCallback)(() => {
+  const handleEnd = (0, import_react32.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const moved = currentTranslate - prevTranslate;
@@ -7301,7 +7323,7 @@ function MobileImageCarousel({
   const handleTouchEnd = () => {
     handleEnd();
   };
-  const handleImageClick = (0, import_react31.useCallback)(
+  const handleImageClick = (0, import_react32.useCallback)(
     (index) => {
       if (!isDragging && index !== currentIndex) {
         onChangeIndex(index);
@@ -7381,7 +7403,7 @@ function MobileImageCarousel({
 }
 
 // src/components/ProductImagePreview/useProductImagePreview.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 function useProductImagePreview(props) {
   const {
     images,
@@ -7394,18 +7416,18 @@ function useProductImagePreview(props) {
   } = props;
   const hasImages = !!(images == null ? void 0 : images.length);
   const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
-  const active = (0, import_react32.useMemo)(() => {
+  const active = (0, import_react33.useMemo)(() => {
     return hasImages ? images[safeIndex] : void 0;
   }, [hasImages, images, safeIndex]);
-  const [zoomPoint, setZoomPoint] = (0, import_react32.useState)(null);
-  const [zoomActive, setZoomActive] = (0, import_react32.useState)(false);
-  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react32.useState)(zoomFactor);
-  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react32.useState)(null);
-  const primaryImageRef = (0, import_react32.useRef)(null);
-  const cleanupRef = (0, import_react32.useRef)(null);
+  const [zoomPoint, setZoomPoint] = (0, import_react33.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react33.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react33.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react33.useState)(null);
+  const primaryImageRef = (0, import_react33.useRef)(null);
+  const cleanupRef = (0, import_react33.useRef)(null);
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
   const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!effectiveZoomEnabled) return;
     const setupTracking = () => {
       const element = primaryImageRef.current;
@@ -7439,24 +7461,24 @@ function useProductImagePreview(props) {
       }
     };
   }, [effectiveZoomEnabled]);
-  const handleSelect = (0, import_react32.useCallback)(
+  const handleSelect = (0, import_react33.useCallback)(
     (idx) => {
       if (idx === safeIndex) return;
       onChangeIndex(idx);
     },
     [safeIndex, onChangeIndex]
   );
-  const handleNext = (0, import_react32.useCallback)(() => {
+  const handleNext = (0, import_react33.useCallback)(() => {
     if (!hasImages) return;
     const nextIndex = (safeIndex + 1) % images.length;
     onChangeIndex(nextIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handlePrevious = (0, import_react32.useCallback)(() => {
+  const handlePrevious = (0, import_react33.useCallback)(() => {
     if (!hasImages) return;
     const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
     onChangeIndex(previousIndex);
   }, [hasImages, safeIndex, images.length, onChangeIndex]);
-  const handleZoomPositionChange = (0, import_react32.useCallback)(
+  const handleZoomPositionChange = (0, import_react33.useCallback)(
     (p, active2) => {
       if (isMobile) return;
       setZoomPoint(p);
@@ -7464,7 +7486,7 @@ function useProductImagePreview(props) {
     },
     [isMobile]
   );
-  const handleScrollZoom = (0, import_react32.useCallback)(
+  const handleScrollZoom = (0, import_react33.useCallback)(
     (delta) => {
       if (!effectiveScrollToZoomEnabled) return;
       const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
@@ -7472,7 +7494,7 @@ function useProductImagePreview(props) {
     },
     [effectiveScrollToZoomEnabled, currentZoomFactor]
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     setCurrentZoomFactor(zoomFactor);
   }, [zoomFactor]);
   return {
@@ -7636,7 +7658,7 @@ function ProductImagePreview(props) {
 }
 
 // src/components/CompactImagesPreview.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_clsx35 = __toESM(require("clsx"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function CompactImagesPreview(props) {
@@ -7656,7 +7678,7 @@ function CompactImagesPreview(props) {
   } = props;
   const isMobile = useMatchesMobile();
   const imagesCount = sources.length;
-  const handleImgError = (0, import_react33.useCallback)(
+  const handleImgError = (0, import_react34.useCallback)(
     (e) => {
       if (!placeholderImageUri2) return;
       const img = e.currentTarget;
@@ -7666,7 +7688,7 @@ function CompactImagesPreview(props) {
     },
     [placeholderImageUri2, placeholderAlt]
   );
-  const handleThumbnailClick = (0, import_react33.useCallback)(
+  const handleThumbnailClick = (0, import_react34.useCallback)(
     (newIndex) => {
       if (newIndex === currentSourceIndex) return;
       if (newIndex < 0 || newIndex >= imagesCount) return;
@@ -7795,7 +7817,7 @@ function SimpleTable({
 }
 
 // src/components/ListGroup.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_clsx37 = __toESM(require("clsx"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function ListGroup({
@@ -7808,7 +7830,7 @@ function ListGroup({
   className,
   children
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react34.useState)(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react35.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
   const toggle = () => {
@@ -7848,7 +7870,7 @@ function ListGroup({
 }
 
 // src/components/Pagination.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_clsx38 = __toESM(require("clsx"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Pagination = ({
@@ -7860,7 +7882,7 @@ var Pagination = ({
   className,
   disabled
 }) => {
-  const goTo = (0, import_react35.useCallback)(
+  const goTo = (0, import_react36.useCallback)(
     (page) => {
       if (disabled) return;
       onPageChange(page);
@@ -7877,7 +7899,7 @@ var Pagination = ({
       goTo(currentPage + 1);
     }
   };
-  const pageTokens = (0, import_react35.useMemo)(() => {
+  const pageTokens = (0, import_react36.useMemo)(() => {
     if (totalPages <= 5) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -8040,7 +8062,7 @@ function EmptyCartIcon() {
 }
 
 // src/components/SearchResultImage/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function SearchResultImage({
   width = 20,
@@ -8048,7 +8070,7 @@ function SearchResultImage({
   src,
   alt
 }) {
-  const [imageError, setImageError] = (0, import_react36.useState)(false);
+  const [imageError, setImageError] = (0, import_react37.useState)(false);
   const showPlaceholder = imageError || !src;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: showPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "img",
@@ -8066,7 +8088,7 @@ function SearchResultImage({
 
 // src/components/Alert.tsx
 var import_clsx39 = __toESM(require("clsx"), 1);
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function Alert(_a) {
   var _b = _a, {
@@ -8087,7 +8109,7 @@ function Alert(_a) {
     "onClose"
   ]);
   const isError = variant === "error";
-  const handleClose = (0, import_react37.useCallback)(() => {
+  const handleClose = (0, import_react38.useCallback)(() => {
     if (onClose) onClose();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
@@ -8168,11 +8190,11 @@ function OrderCheckIcon(props) {
 }
 
 // src/components/EditingContext.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var EditingContext = (0, import_react38.createContext)(null);
+var EditingContext = (0, import_react39.createContext)(null);
 var useTableEditingContext = () => {
-  const context = (0, import_react38.useContext)(EditingContext);
+  const context = (0, import_react39.useContext)(EditingContext);
   if (!context) {
     throw new Error("useTableEditingContext must be used within EditingProvider");
   }
@@ -8373,7 +8395,7 @@ function AccessCard(props) {
 
 // src/components/AccessCardGroup.tsx
 var import_clsx42 = __toESM(require("clsx"), 1);
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function AccessCardGroup(props) {
   const {
@@ -8387,7 +8409,7 @@ function AccessCardGroup(props) {
     testid,
     unavailable
   } = props;
-  const [expand, setExpand] = (0, import_react39.useState)(expanded);
+  const [expand, setExpand] = (0, import_react40.useState)(expanded);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { "data-testid": testid, className: "mb-mobile-layout-group-gap desktop:mb-desktop-layout-group-gap compact:mb-desktop-compact-layout-group-gap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "div",