@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/dist/components/index.cjs

@@ -63,6 +63,7 @@ __export(components_exports, {
   Button: () => Button,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  CompactImagesPreview: () => CompactImagesPreview,
   DataCellHeader: () => DataCellHeader,
   DataGrid: () => DataGrid,
   DataGridCell: () => DataGridCell,
@@ -73,7 +74,10 @@ __export(components_exports, {
   Label: () => Label,
   Menu: () => Menu,
   MenuOption: () => MenuOption,
+  MobileDataGrid: () => MobileDataGrid,
+  PDFViewer: () => PDFViewer,
   Paragraph: () => Paragraph,
+  ProductImagePreview: () => ProductImagePreview,
   Search: () => Search,
   Select: () => Select,
   Subheader: () => Subheader,
@@ -4119,7 +4123,9 @@ var Stack = (_a) => {
     noGap,
     marginTop,
     marginBottom,
-    testid
+    testid,
+    bottom,
+    zIndex
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -4156,8 +4162,11 @@ var Stack = (_a) => {
     "noGap",
     "marginTop",
     "marginBottom",
-    "testid"
+    "testid",
+    "bottom",
+    "zIndex"
   ]);
+  var _a2, _b2, _c, _d, _e;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4168,9 +4177,9 @@ var Stack = (_a) => {
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
-        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
-        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
-        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? isNaN(+maxHeight) ? maxHeight : `${maxHeight}px` : (_a2 = props.style) == null ? void 0 : _a2.maxHeight,
+        maxWidth: maxWidth !== void 0 ? isNaN(+maxWidth) ? maxWidth : `${maxWidth}px` : (_b2 = props.style) == null ? void 0 : _b2.maxWidth,
+        minHeight: minHeight !== void 0 ? isNaN(+minHeight) ? minHeight : `${minHeight}px` : (_c = props.style) == null ? void 0 : _c.minHeight,
         width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
         minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
         border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
@@ -4179,7 +4188,11 @@ var Stack = (_a) => {
         flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
         position: position !== void 0 ? position : void 0,
         top: top !== void 0 ? `${top}px` : void 0,
-        left: left !== void 0 ? `${left}px` : void 0
+        bottom: bottom !== void 0 ? `${bottom}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0,
+        borderBlock: (_d = props.style) == null ? void 0 : _d.borderBlock,
+        marginInline: (_e = props.style) == null ? void 0 : _e.marginInline,
+        zIndex: zIndex !== void 0 ? zIndex : void 0
       },
       className: (0, import_clsx20.default)(
         "scrollbar-thin",
@@ -4229,7 +4242,14 @@ var Stack = (_a) => {
 // src/components/Accordion.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled, testid } = props;
+  const {
+    isOpen,
+    onClick,
+    className,
+    disabled,
+    testid,
+    titleAlign = "center"
+  } = props;
   const {
     title,
     before,
@@ -4262,13 +4282,30 @@ function Accordion(props) {
       onClick: handleClick,
       testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-            before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
-          ] }),
-          after
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          Stack,
+          {
+            sizing: "component",
+            horizontal: true,
+            horizontalMobile: true,
+            justify: "between",
+            items: "center",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: titleAlign, children: [
+                before,
+                typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  Paragraph,
+                  {
+                    testid: testid ? `${testid}-title` : void 0,
+                    className: "text-text-primary-normal",
+                    children: title
+                  }
+                ) : title
+              ] }),
+              after
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
@@ -4295,12 +4332,2517 @@ function Accordion(props) {
     }
   );
 }
+
+// src/components/Heading.tsx
+var import_clsx22 = __toESM(require("clsx"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Heading = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "heading1",
+    id,
+    testid
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant",
+    "id",
+    "testid"
+  ]);
+  const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
+  const Element = as != null ? as : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx22.default)(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Heading.displayName = "Heading";
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+Heading1.displayName = "Heading1";
+Heading2.displayName = "Heading2";
+Heading3.displayName = "Heading3";
+
+// src/components/Theme.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Theme({
+  theme,
+  children,
+  id,
+  testid,
+  ref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: "contents",
+      "data-theme": theme,
+      ref: (e) => {
+        if (ref) ref.current = e;
+      },
+      children
+    }
+  );
+}
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+var import_react21 = require("react");
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+var import_react20 = require("react");
+
+// src/components/MobileDataGrid/GridContextProvider/GridContext.tsx
+var import_react19 = require("react");
+var GridContext = (0, import_react19.createContext)(null);
+
+// src/components/MobileDataGrid/GridContextProvider/useGridContext.ts
+function useGridContext() {
+  const ctx = (0, import_react20.useContext)(GridContext);
+  if (!ctx) {
+    throw new Error("useGridContext must be used within GridContextProvider");
+  }
+  return ctx;
+}
+
+// src/components/MobileDataGrid/ColumnSelector/index.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ColumnSelector() {
+  const context = useGridContext();
+  const ref = (0, import_react21.useRef)(null);
+  const [show, setShow] = (0, import_react21.useState)(false);
+  const {
+    columns,
+    id,
+    testid,
+    visibleColumns,
+    numberOfColumnsToShow,
+    primaryKey,
+    resetColumnVisibility,
+    dispatch
+  } = context;
+  const toggleColumnVisibility = (0, import_react21.useCallback)(
+    (index, visible) => {
+      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
+    },
+    [dispatch]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      id: id ? `${id}-column-selector` : void 0,
+      "data-testid": testid,
+      className: "text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding",
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Button,
+          {
+            id: id ? `${id}-button` : void 0,
+            testid: testid ? `${testid}-button` : void 0,
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            size: 24,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          Menu,
+          {
+            id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            calculateMinMaxHeight: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                Button,
+                {
+                  id: id ? `${id}-reset-button` : void 0,
+                  testid: testid ? `${testid}-reset-button` : void 0,
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              columns.filter((x) => {
+                var _a;
+                return (_a = x.meta) == null ? void 0 : _a.inVisibilityMenu;
+              }).map((column) => {
+                var _a, _b, _c;
+                return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  MenuOption,
+                  {
+                    testid: testid ? `${testid}-option-${column.id}` : void 0,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      Checkbox,
+                      {
+                        id: id ? `${id}-checkbox-${column.id}` : void 0,
+                        testid: testid ? `${testid}-checkbox-${column.id}` : void 0,
+                        label: (_a = column.header) == null ? void 0 : _a.toString(),
+                        checked: !!((_b = column.meta) == null ? void 0 : _b.visible) || column.id === String(primaryKey),
+                        disabled: typeof numberOfColumnsToShow !== "undefined" && // account for header+link occupying one slot
+                        visibleColumns.length >= numberOfColumnsToShow - 1 && ((_c = column.meta) == null ? void 0 : _c.visible) !== true || column.id === String(primaryKey),
+                        onChange: (e) => {
+                          toggleColumnVisibility(
+                            columns.findIndex(({ id: id2 }) => id2 === column.id),
+                            e.target.checked
+                          );
+                        }
+                      }
+                    )
+                  },
+                  id ? `${id}-option-${column.id}` : void 0
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MobileDataGrid/MobileDataGridHeader.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function MobileDataGridHeader({
+  header: Header,
+  enableColumnSelector,
+  enableRowSelection
+}) {
+  var _a, _b;
+  const ctx = useGridContext();
+  const {
+    id,
+    testid,
+    selectedRowIds,
+    data,
+    primaryKey,
+    columns,
+    handleRowSelectAll
+  } = ctx;
+  if (typeof Header === "undefined" && !primaryKey) return null;
+  if (typeof Header === "function") return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Header, __spreadValues({}, ctx));
+  if (typeof Header === "string" || primaryKey)
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        id: id ? `${id}-header` : void 0,
+        "data-testid": testid ? `${testid}-header` : void 0,
+        className: "sticky top-0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Theme, { theme: "brand", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          Stack,
+          {
+            horizontal: true,
+            horizontalMobile: true,
+            items: "center",
+            justify: "between",
+            backgroundColor: "background-primary-normal",
+            children: [
+              enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-mobile-component-padding border-r border-brand-200 max-w-fit h-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Checkbox,
+                {
+                  id: id ? `${id}-select-all-checkbox` : void 0,
+                  testid: testid ? `${testid}-select-all-checkbox` : void 0,
+                  checked: selectedRowIds.length === data.length,
+                  indeterminate: !!selectedRowIds.length && selectedRowIds.length !== data.length,
+                  onChange: handleRowSelectAll
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Stack,
+                {
+                  horizontal: true,
+                  horizontalMobile: true,
+                  items: "center",
+                  sizing: "component",
+                  padding: true,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Heading3, { as: "span", color: "text-primary-normal", children: typeof Header === "string" ? Header : (_b = (_a = columns.find((col) => col.id === primaryKey)) == null ? void 0 : _a.header) == null ? void 0 : _b.toString() })
+                }
+              ),
+              enableColumnSelector && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColumnSelector, {})
+            ]
+          }
+        ) })
+      }
+    );
+}
+
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+var import_react22 = require("react");
+
+// src/components/MobileDataGrid/dataGridReducer.ts
+function dataGridReducer(state, action) {
+  var _a, _b, _c;
+  const { type, payload } = action;
+  let itemIndex = null;
+  if (action.type === "INSERT" && action.pos === "INDEX")
+    itemIndex = action.index;
+  if (action.type === "UPDATE")
+    itemIndex = (_a = action.index) != null ? _a : state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
+  switch (type) {
+    case "SET":
+      return [...payload];
+    case "UPDATE":
+      if (typeof itemIndex !== "number" || itemIndex < 0)
+        throw new Error("action.(id | index) must be provided.");
+      return [
+        ...state.slice(0, itemIndex),
+        __spreadProps(__spreadValues(__spreadValues({}, state[itemIndex]), payload), {
+          meta: __spreadValues(__spreadValues({}, (_b = state[itemIndex].meta) != null ? _b : {}), (_c = payload.meta) != null ? _c : {})
+        }),
+        ...state.slice(itemIndex + 1)
+      ];
+    default:
+      throw new Error("Action type not implemented.");
+  }
+}
+
+// src/components/MobileDataGrid/GridContextProvider/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function GridContextProvider(props) {
+  const {
+    initialColumns,
+    id,
+    testid,
+    children,
+    data,
+    numberOfColumnsToShow,
+    primaryKey,
+    getId,
+    onRowSelect
+  } = props;
+  const [columns, dispatch] = (0, import_react22.useReducer)(dataGridReducer, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = (0, import_react22.useState)([]);
+  const [currentRow, setCurrentRow] = (0, import_react22.useState)(null);
+  const resetColumnVisibility = (0, import_react22.useCallback)(() => {
+    const newColumns = columns.map((column) => {
+      var _a;
+      const initialColumn = initialColumns.find((c) => c.id === column.id);
+      return __spreadProps(__spreadValues({}, column), {
+        meta: __spreadProps(__spreadValues({}, column.meta), {
+          visible: (_a = initialColumn == null ? void 0 : initialColumn.meta) == null ? void 0 : _a.visible
+        })
+      });
+    });
+    dispatch({ type: "SET", payload: newColumns });
+  }, [columns, initialColumns]);
+  const handleRowSelect = (0, import_react22.useCallback)(
+    (item) => {
+      var _a;
+      const rowId = (_a = getId(item)) != null ? _a : "";
+      if (!rowId) return;
+      const nextSelected = selectedRowIds.includes(rowId) ? selectedRowIds.filter((id2) => id2 !== rowId) : [...selectedRowIds, rowId];
+      setSelectedRowIds(nextSelected);
+      if (onRowSelect) onRowSelect(item, nextSelected);
+    },
+    [getId, onRowSelect, selectedRowIds]
+  );
+  const handleRowSelectAll = (0, import_react22.useCallback)(() => {
+    setSelectedRowIds((prev) => {
+      if (prev.length === data.length) {
+        return [];
+      }
+      return data.map(getId).filter((id2) => id2 !== void 0);
+    });
+  }, [data, getId]);
+  const openRowDetail = (0, import_react22.useCallback)((row) => {
+    setCurrentRow(row);
+  }, []);
+  const closeRowDetail = (0, import_react22.useCallback)(() => {
+    setCurrentRow(null);
+  }, []);
+  const visibleColumns = (0, import_react22.useMemo)(() => {
+    const effectiveLimit = typeof numberOfColumnsToShow === "number" ? Math.max(numberOfColumnsToShow - 1, 0) : void 0;
+    if (primaryKey) {
+      const pkColumn = columns.find((col) => col.id === String(primaryKey));
+      const otherColumns = columns.filter(
+        (col) => col.id !== String(primaryKey)
+      );
+      const orderedColumns = pkColumn ? [pkColumn, ...otherColumns] : [...otherColumns];
+      return orderedColumns.filter((x) => {
+        var _a;
+        return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+      }).slice(0, effectiveLimit);
+    }
+    return columns.filter((x) => {
+      var _a;
+      return ((_a = x.meta) == null ? void 0 : _a.visible) !== false;
+    }).slice(0, effectiveLimit);
+  }, [columns, numberOfColumnsToShow, primaryKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    GridContext.Provider,
+    {
+      value: {
+        columns,
+        testid,
+        id,
+        data,
+        selectedRowIds,
+        visibleColumns,
+        numberOfColumnsToShow,
+        primaryKey,
+        dispatch,
+        getId,
+        resetColumnVisibility,
+        handleRowSelect,
+        handleRowSelectAll,
+        isRowDetailOpen: !!currentRow,
+        currentRow,
+        openRowDetail,
+        closeRowDetail
+      },
+      children
+    }
+  );
+}
+
+// src/components/Modal.tsx
+var import_clsx27 = __toESM(require("clsx"), 1);
+var import_react24 = require("react");
+
+// src/components/ModalHeader.tsx
+var import_clsx23 = __toESM(require("clsx"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  headerIconAlign,
+  onClose,
+  id,
+  testid,
+  headerClassname
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx23.default)(
+        "flex justify-between items-center",
+        headerIconAlign === "center" && "justify-center",
+        headerIconAlign === "right" && "justify-end",
+        headerIconAlign === "left" && "justify-start",
+        layoutPaddding,
+        layoutGroupGap,
+        headerClassname
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_clsx23.default)("flex items-center flex-1", layoutGroupGap), children: [
+          headerIcon,
+          title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Heading2,
+            {
+              id: id ? `${id}-title` : void 0,
+              testid: testid ? `${testid}-title` : void 0,
+              as: "p",
+              children: title
+            }
+          )
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "close", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
+};
+ModalHeader.displayName = "ModalHeader";
+
+// src/components/ModalContent.tsx
+var import_clsx24 = __toESM(require("clsx"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ModalContent({
+  fixedHeightScrolling,
+  children,
+  id,
+  testid
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx24.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
+}
+ModalContent.displayName = "ModalContent";
+
+// src/components/ModalButtons.tsx
+var import_clsx25 = __toESM(require("clsx"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+  id,
+  testid
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx25.default)(
+        "border-t border-neutral-300 flex justify-end",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          Button,
+          {
+            id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+};
+ModalButtons.displayName = "ModalButtons";
+
+// src/components/ModalScrim.tsx
+var import_clsx26 = __toESM(require("clsx"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ModalScrim = ({
+  show = false,
+  size = "small",
+  children,
+  onClick,
+  ref,
+  id,
+  testid
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx26.default)(
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+        size === "small" && "p-4",
+        size === "screen" ? "desktop:p-0" : "desktop:p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+// src/components/Modal.tsx
+var import_react_dom3 = require("react-dom");
+var import_react_use = require("react-use");
+
+// src/components/useMounted.tsx
+var import_react23 = require("react");
+var useMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  return isMounted;
+};
+
+// src/components/Modal.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var fadeInScale = (element, duration = 300) => element.animate(
+  [
+    { opacity: 0, transform: "scale(0.95)" },
+    { opacity: 1, transform: "scale(1)" }
+  ],
+  {
+    duration,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fill: "both"
+  }
+);
+var fadeOutScale = (element, duration = 200) => element.animate(
+  [
+    { opacity: 1, transform: "scale(1)" },
+    { opacity: 0, transform: "scale(0.95)" }
+  ],
+  {
+    duration,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+);
+var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
+  duration,
+  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  fill: "both"
+});
+var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
+  duration,
+  easing: "ease-in-out",
+  fill: "both"
+});
+var whenAllAnimationsFinish = (animations, callback) => {
+  let finishedCount = 0;
+  animations.forEach((animation) => {
+    animation.onfinish = () => {
+      finishedCount += 1;
+      if (finishedCount === animations.length) {
+        callback();
+      }
+    };
+  });
+};
+var sizes = {
+  small: {
+    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
+  },
+  medium: {
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  large: {
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  "x-large": {
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  screen: {
+    sizeClass: "w-screen h-screen max-w-screen !rounded-none"
+  }
+};
+var Modal = ({
+  id,
+  testid,
+  title,
+  open = false,
+  size = "small",
+  className,
+  children,
+  onClose,
+  onContinue,
+  closeOnBackdropClick = true,
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  headerIconAlign,
+  fixedHeightScrolling = false,
+  customActions,
+  headerClassname,
+  customFooter,
+  noWrapper
+}) => {
+  var _a;
+  const mounted = useMounted();
+  const modalRef = (0, import_react24.useRef)(null);
+  const bgRef = (0, import_react24.useRef)(null);
+  const wasOpen = (0, import_react_use.usePrevious)(open);
+  const isMobile = useMatchesMobile();
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+  (0, import_react24.useEffect)(() => {
+    if (!mounted) return;
+    if (!modalRef.current || !bgRef.current) {
+      console.error("Modal or background reference is not set.");
+      return;
+    }
+    if (wasOpen === void 0) return;
+    if (wasOpen && !open) {
+      const modalAnimation = fadeOutScale(modalRef.current);
+      const bgAnimation = bgFadeOut(bgRef.current);
+      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
+        if (onClose) {
+          onClose();
+        }
+      });
+    } else if (!wasOpen && open) {
+      fadeInScale(modalRef.current);
+      bgFadeIn(bgRef.current);
+    }
+  }, [mounted, onClose, open, wasOpen]);
+  const handleKeyDown = (0, import_react24.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        if (onClose) {
+          e.preventDefault();
+          onClose();
+        }
+      }
+    },
+    [onClose]
+  );
+  const handleClose = (0, import_react24.useCallback)(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  (0, import_react24.useEffect)(() => {
+    if (open) {
+      document.addEventListener("keyup", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, [open, handleKeyDown]);
+  (0, import_react24.useEffect)(() => {
+    if (!open) return;
+    const scrollY = window.scrollY;
+    const body = document.body;
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.overflow = "hidden";
+    body.style.width = "100%";
+    return () => {
+      body.style.position = "";
+      body.style.top = "";
+      body.style.left = "";
+      body.style.right = "";
+      body.style.overflow = "";
+      body.style.width = "";
+      window.scrollTo(0, scrollY);
+    };
+  }, [open]);
+  const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
+  const backgroundClickHandler = (0, import_react24.useCallback)(
+    (e) => {
+      const target = e.target;
+      const currentTarget = e.currentTarget;
+      if (currentTarget.contains(target) && currentTarget !== target) {
+        e.stopPropagation();
+        return;
+      }
+      if (open && closeOnBackdropClick) {
+        handleClose();
+      }
+    },
+    [open, closeOnBackdropClick, handleClose]
+  );
+  if (!mounted) {
+    return null;
+  }
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ModalScrim,
+      {
+        id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
+        size,
+        ref: bgRef,
+        show: open,
+        onClick: backgroundClickHandler,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "div",
+          {
+            id,
+            "data-testid": testid,
+            ref: modalRef,
+            className: (0, import_clsx27.default)(
+              "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+              computedFixedHeightScrolling && size !== "screen" && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              className,
+              !(className == null ? void 0 : className.includes("bg-")) && "bg-white",
+              sizeClass
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                ModalHeader,
+                {
+                  id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
+                  title,
+                  onClose: handleClose,
+                  hideCloseIcon,
+                  headerIcon,
+                  headerIconAlign,
+                  headerClassname
+                }
+              ),
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                ModalContent,
+                {
+                  id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
+                  fixedHeightScrolling: computedFixedHeightScrolling,
+                  children
+                }
+              ) : children,
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                ModalButtons,
+                {
+                  id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
+                  onClose: handleClose,
+                  onContinue,
+                  customActions
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ),
+    findDocumentRoot(bgRef.current)
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function MobileDataGridColumn(props) {
+  var _a;
+  const { column, data } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-2 grid grid-cols-2 gap-2 px-3 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+      (_a = column.header) == null ? void 0 : _a.toString(),
+      ":"
+    ] }),
+    " ",
+    column.id && data[column.id] ? data[column.id] : null
+  ] });
+}
+
+// src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function ModalContent2() {
+  const context = useGridContext();
+  const { columns, currentRow } = context;
+  if (!currentRow) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Stack, { sizing: "layout-group", children: columns.filter((x) => {
+    var _a;
+    return !((_a = x.id) == null ? void 0 : _a.startsWith("__"));
+  }).map(
+    (column, index) => {
+      var _a, _b;
+      return ((_a = column.meta) == null ? void 0 : _a.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "div",
+        {
+          className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
+              (_b = column.header) == null ? void 0 : _b.toString(),
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              column.meta.mobileCell,
+              {
+                column,
+                row: currentRow,
+                cellValue: currentRow == null ? void 0 : currentRow[column.id]
+              }
+            )
+          ]
+        },
+        `${column.id}-${index}`
+      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        MobileDataGridColumn,
+        {
+          column,
+          data: currentRow
+        },
+        `${column.id}-${index}`
+      );
+    }
+  ) });
+}
+
+// src/components/MobileDataGrid/RowDetailModalProvider/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function RowDetailModalProvider() {
+  var _a;
+  const context = useGridContext();
+  const {
+    id,
+    testid,
+    isRowDetailOpen,
+    currentRow,
+    primaryKey,
+    closeRowDetail
+  } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    Modal,
+    {
+      fixedHeightScrolling: true,
+      open: isRowDetailOpen,
+      onClose: closeRowDetail,
+      hideCloseIcon: true,
+      size: "medium",
+      className: "!p-0",
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        Stack,
+        {
+          horizontal: true,
+          horizontalMobile: true,
+          items: "center",
+          justify: "between",
+          width: "full",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Heading2, { children: (_a = currentRow == null ? void 0 : currentRow[primaryKey != null ? primaryKey : "id"]) != null ? _a : "Grid Detail" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              Button,
+              {
+                id: id ? `${id}-open-in-new-button` : void 0,
+                testid: testid ? `${testid}-open-in-new-button` : void 0,
+                iconOnly: true,
+                variant: "tertiary",
+                onClick: closeRowDetail,
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "open_in_new", size: 24 }) })
+              }
+            )
+          ]
+        }
+      ),
+      customActions: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { onClick: closeRowDetail, className: "w-full", children: "Close" }),
+      showButtons: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-white max-h-full flex flex-col flex-grow-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ModalContent2, {}) })
+    }
+  );
+}
+
+// src/components/MobileDataGrid/ColumnList.tsx
+var import_clsx29 = __toESM(require("clsx"), 1);
+
+// src/components/MobileDataGrid/MobileDataGridCard/index.tsx
+var import_clsx28 = __toESM(require("clsx"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function MobileDataGridCard({
+  renderLink,
+  renderChevron = true,
+  data,
+  enableRowSelection,
+  selected,
+  rowActions
+}) {
+  var _a;
+  const context = useGridContext();
+  const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "li",
+    {
+      id: id ? `${id}-card-${getId(data)}` : void 0,
+      "data-testid": testid ? `${testid}-card-${getId(data)}` : void 0,
+      className: (0, import_clsx28.default)(
+        "hover:bg-action-100 cursor-pointer list-none",
+        selected ? "bg-action-100" : "bg-background-grouped-primary-normal"
+      ),
+      onClick: () => openRowDetail(data),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack, { sizing: "component", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
+            enableRowSelection && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              Stack,
+              {
+                sizing: "component",
+                padding: true,
+                width: "fit",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  Checkbox,
+                  {
+                    id: id ? `${id}-${getId(data)}-select-checkbox` : void 0,
+                    testid: testid ? `${testid}-${getId(data)}-select-checkbox` : void 0,
+                    checked: selected,
+                    onChange: () => handleRowSelect(data)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              Stack,
+              {
+                sizing: "component",
+                padding: true,
+                onClick: (e) => e.stopPropagation(),
+                children: renderLink ? renderLink(data) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Subheader, { children: String((_a = data[context.primaryKey]) != null ? _a : "") })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              Stack,
+              {
+                horizontal: true,
+                horizontalMobile: true,
+                items: "center",
+                justify: "end",
+                sizing: "component",
+                onClick: (e) => e.stopPropagation(),
+                children: rowActions && (typeof rowActions === "function" ? rowActions(data) : rowActions)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack, { sizing: "layout-group", children: visibleColumns.filter((x) => {
+            var _a2, _b;
+            return ((_a2 = x.meta) == null ? void 0 : _a2.visible) !== false && !((_b = x.id) == null ? void 0 : _b.startsWith("__"));
+          }).map(
+            (column, index) => {
+              var _a2, _b;
+              return ((_a2 = column.meta) == null ? void 0 : _a2.useCustomRenderer) && column.meta.mobileCell && column.id ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                "div",
+                {
+                  className: "mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      Paragraph,
+                      {
+                        color: "text-secondary-normal",
+                        className: "text-left",
+                        children: [
+                          (_b = column.header) == null ? void 0 : _b.toString(),
+                          ":"
+                        ]
+                      }
+                    ),
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                      column.meta.mobileCell,
+                      {
+                        column,
+                        row: data,
+                        cellValue: data[column.id]
+                      }
+                    )
+                  ]
+                },
+                `${column.id}-${index}`
+              ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                MobileDataGridColumn,
+                {
+                  column,
+                  data
+                },
+                `${column.id}-${index}`
+              );
+            }
+          ) })
+        ] }),
+        renderChevron && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "keyboard_arrow_down" }) })
+      ]
+    }
+  );
+}
+
+// src/components/MobileDataGrid/ColumnList.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function ColumnList(props) {
+  const {
+    withBorder,
+    renderLink,
+    renderChevron,
+    footer: Footer,
+    enableRowSelection,
+    rowActions
+  } = props;
+  const ctx = useGridContext();
+  const { id, testid, data, getId, selectedRowIds } = ctx;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      className: (0, import_clsx29.default)(
+        "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
+        !!Footer && "mb-20"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "ul",
+        {
+          id,
+          "data-testid": testid,
+          className: (0, import_clsx29.default)(
+            "rounded absolute top-0 left-0 w-full flex-1",
+            "divide-y divide-border-primary-normal",
+            withBorder && "border border-border-primary-normal"
+          ),
+          children: [
+            data.map((item) => {
+              const id2 = getId(item);
+              return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                MobileDataGridCard,
+                {
+                  data: item,
+                  renderLink,
+                  enableRowSelection,
+                  selected: !!id2 && selectedRowIds.includes(id2),
+                  renderChevron,
+                  rowActions
+                },
+                id2
+              );
+            }),
+            !!Footer && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Footer, __spreadValues({}, ctx)) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/MobileDataGrid/index.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function MobileDataGrid(props) {
+  const {
+    columns,
+    data,
+    renderLink,
+    renderChevron,
+    getId,
+    id,
+    testid,
+    enableColumnSelector,
+    enableRowSelection,
+    header,
+    withBorder = true,
+    footer,
+    onRowSelect,
+    numberOfColumnsToShow,
+    primaryKey,
+    hideHeader,
+    rowActions,
+    rounded
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    GridContextProvider,
+    {
+      initialColumns: columns,
+      id,
+      testid,
+      data,
+      getId,
+      onRowSelect,
+      numberOfColumnsToShow,
+      primaryKey,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          Stack,
+          {
+            height: "full",
+            rounded,
+            overflowX: "hidden",
+            overflowY: "hidden",
+            children: [
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                MobileDataGridHeader,
+                {
+                  header,
+                  enableColumnSelector,
+                  enableRowSelection
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                ColumnList,
+                {
+                  withBorder,
+                  renderLink,
+                  renderChevron,
+                  enableRowSelection,
+                  footer,
+                  rowActions
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RowDetailModalProvider, {})
+      ]
+    }
+  );
+}
+
+// src/components/ImagePlaceholder.tsx
+var import_react25 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ImagePlaceholder(props) {
+  const clipId = (0, import_react25.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none"
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { width: props.width, height: props.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { width: props.width, height: props.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    })
+  );
+}
+
+// src/components/ProductImagePreview/Thumbnail.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function Thumbnail({
+  width,
+  height,
+  src,
+  alt,
+  isActive,
+  onClick,
+  isPlaceholder = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: [
+        "cursor-pointer relative overflow-hidden rounded aspect-square w-full",
+        // base radius, square when no explicit size
+        "focus:outline-none",
+        isActive && !isPlaceholder && "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70"
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      "aria-pressed": isActive && !isPlaceholder ? "true" : "false",
+      children: isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ImagePlaceholder, { width: 115, height: 115 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "img",
+        {
+          src,
+          alt,
+          className: "object-cover w-full h-full select-none",
+          draggable: false,
+          loading: "lazy"
+        }
+      )
+    }
+  );
+}
+
+// src/components/Grid.tsx
+var import_react26 = require("react");
+var import_clsx30 = __toESM(require("clsx"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var COLUMNS_WITH_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  6: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  7: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  8: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  9: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  10: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6",
+  11: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8",
+  12: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8"
+};
+var COLUMNS_WITHOUT_SIDE_MENU_MAP = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",
+  5: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+  6: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+  7: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7",
+  8: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8",
+  9: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-9",
+  10: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10",
+  11: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-11",
+  12: "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12"
+};
+var getChildCountBasedClasses = (childCount, hasSideMenu) => {
+  if (hasSideMenu) {
+    if (childCount <= 1) return "grid-cols-1";
+    if (childCount <= 2) return "sm:grid-cols-2";
+    if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+    if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3";
+    return "sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6";
+  }
+  if (childCount <= 1) return "grid-cols-1";
+  if (childCount <= 2) return "sm:grid-cols-2";
+  if (childCount === 3) return "sm:grid-cols-2 md:grid-cols-3";
+  if (childCount <= 5) return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4";
+  if (childCount <= 6)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount === 7)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6";
+  if (childCount <= 11)
+    return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8";
+  return "sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12";
+};
+var getGridClasses = (childCount, hasSideMenu, columns) => {
+  var _a;
+  if (columns) {
+    const map = hasSideMenu ? COLUMNS_WITH_SIDE_MENU_MAP : COLUMNS_WITHOUT_SIDE_MENU_MAP;
+    return (_a = map[columns]) != null ? _a : map[12];
+  }
+  return getChildCountBasedClasses(childCount, hasSideMenu != null ? hasSideMenu : false);
+};
+var Grid = ({
+  children,
+  sizing = "container",
+  padding,
+  hasSideMenu = false,
+  columns,
+  id,
+  testid,
+  style
+}) => {
+  const childCount = import_react26.Children.count(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      id,
+      "data-testid": testid,
+      className: (0, import_clsx30.default)(
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        "w-full grid",
+        getGridClasses(childCount, hasSideMenu, columns)
+      ),
+      style,
+      children
+    }
+  );
+};
+
+// src/components/ProductImagePreview/ProductPrimaryImage.tsx
+var import_react27 = require("react");
+
+// src/components/Spinner.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/ProductImagePreview/ProductPrimaryImage.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function ProductPrimaryImage({
+  image,
+  width,
+  height,
+  zoomEnabled = false,
+  zoomLensSize = 140,
+  scrollToZoomEnabled = false,
+  className = "",
+  isPlaceholder = false,
+  onZoomPositionChange,
+  onScrollZoom
+}) {
+  const containerRef = (0, import_react27.useRef)(null);
+  const lastPointRef = (0, import_react27.useRef)(null);
+  const rafRef = (0, import_react27.useRef)(null);
+  const [active, setActive] = (0, import_react27.useState)(false);
+  const [, forceRerender] = (0, import_react27.useState)(0);
+  const [imageLoading, setImageLoading] = (0, import_react27.useState)(true);
+  const [imageError, setImageError] = (0, import_react27.useState)(false);
+  const imageSrc = (0, import_react27.useMemo)(() => image == null ? void 0 : image.src, [image == null ? void 0 : image.src]);
+  const schedule = () => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      forceRerender((n) => n + 1);
+    });
+  };
+  const handlePointerEnter = (0, import_react27.useCallback)(() => {
+    if (!zoomEnabled) return;
+    setActive(true);
+    const el = containerRef.current;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      const pt2 = lastPointRef.current;
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        pt2 ? __spreadProps(__spreadValues({}, pt2), { w: r.width, h: r.height, lensSize: zoomLensSize }) : null,
+        true
+      );
+    }
+  }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
+  const handlePointerLeave = (0, import_react27.useCallback)(() => {
+    if (!zoomEnabled) return;
+    setActive(false);
+    lastPointRef.current = null;
+    onZoomPositionChange == null ? void 0 : onZoomPositionChange(null, false);
+  }, [zoomEnabled, onZoomPositionChange]);
+  const handlePointerMove = (0, import_react27.useCallback)(
+    (e) => {
+      if (!zoomEnabled || !active) return;
+      if (e.pointerType === "touch") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const rawX = (e.clientX - rect.left) / rect.width;
+      const rawY = (e.clientY - rect.top) / rect.height;
+      const size = zoomLensSize != null ? zoomLensSize : 140;
+      const left = Math.max(
+        0,
+        Math.min(rect.width - size, rawX * rect.width - size / 2)
+      );
+      const top = Math.max(
+        0,
+        Math.min(rect.height - size, rawY * rect.height - size / 2)
+      );
+      const centerXNorm = (left + size / 2) / rect.width;
+      const centerYNorm = (top + size / 2) / rect.height;
+      lastPointRef.current = {
+        x: centerXNorm,
+        y: centerYNorm
+      };
+      schedule();
+      onZoomPositionChange == null ? void 0 : onZoomPositionChange(
+        lastPointRef.current ? __spreadProps(__spreadValues({}, lastPointRef.current), {
+          w: rect.width,
+          h: rect.height,
+          lensSize: zoomLensSize
+        }) : null,
+        true
+      );
+    },
+    [zoomEnabled, active, onZoomPositionChange, zoomLensSize]
+  );
+  (0, import_react27.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container || !scrollToZoomEnabled) return;
+    const handleNativeWheel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!zoomEnabled || !active) return;
+      const delta = e.deltaY > 0 ? -0.2 : 0.2;
+      onScrollZoom == null ? void 0 : onScrollZoom(delta);
+    };
+    container.addEventListener("wheel", handleNativeWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleNativeWheel);
+    };
+  }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
+  if (!image && !isPlaceholder) return null;
+  const pt = lastPointRef.current;
+  let lensStyle;
+  if (pt && active && zoomEnabled) {
+    const size = zoomLensSize;
+    const leftRaw = pt.x * width - size / 2;
+    const topRaw = pt.y * height - size / 2;
+    lensStyle = {
+      width: size,
+      height: size,
+      left: Math.max(0, Math.min(width - size, leftRaw)),
+      top: Math.max(0, Math.min(height - size, topRaw))
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: [
+        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
+        zoomEnabled ? "cursor-crosshair" : "",
+        className
+      ].join(" "),
+      style: { maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" },
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      children: [
+        imageLoading && !imageError && !isPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Spinner, { size: "small" }) }),
+        isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ImagePlaceholder, { width, height }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "img",
+          {
+            src: imageSrc,
+            alt: (image == null ? void 0 : image.alt) || "Product image",
+            className: "object-cover w-full h-full select-none",
+            draggable: false,
+            loading: "lazy",
+            onLoad: () => setImageLoading(false),
+            onError: () => {
+              setImageLoading(false);
+              setImageError(true);
+            }
+          },
+          imageSrc
+        ),
+        zoomEnabled && active && lensStyle && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]",
+            style: lensStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var import_react28 = require("react");
+
+// src/components/Surface.tsx
+var import_clsx31 = __toESM(require("clsx"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Surface = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    elevation = 0,
+    id
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "elevation",
+    "id"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx31.default)(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
+
+// src/components/ProductImagePreview/ZoomWindow.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function ZoomWindow({
+  image,
+  width,
+  height,
+  pointer,
+  active,
+  zoomFactor = 2,
+  scaleFactor = 2,
+  primaryImagePosition,
+  offset = 10,
+  className = ""
+}) {
+  const imageSrc = (0, import_react28.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;
+  const baseH = pointer.h || height;
+  const scaledW = baseW * zoomFactor;
+  const scaledH = baseH * zoomFactor;
+  const centerX = pointer.x * baseW * zoomFactor;
+  const centerY = pointer.y * baseH * zoomFactor;
+  const imageOffsetX = zoomWindowSize / 2 - centerX;
+  const imageOffsetY = zoomWindowSize / 2 - centerY;
+  const calculatePosition = () => {
+    if (!primaryImagePosition) {
+      return {
+        position: "fixed",
+        zIndex: 999,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    }
+    const lensLeft = primaryImagePosition.left + pointer.x * primaryImagePosition.width - pointer.lensSize / 2;
+    const lensTop = primaryImagePosition.top + pointer.y * primaryImagePosition.height - pointer.lensSize / 2;
+    let left = lensLeft + pointer.lensSize + offset;
+    let top = lensTop;
+    const { innerWidth, innerHeight } = window;
+    if (left + zoomWindowSize > innerWidth) {
+      left = lensLeft - zoomWindowSize - offset;
+    }
+    if (top + zoomWindowSize > innerHeight) {
+      top = lensTop + pointer.lensSize - zoomWindowSize;
+    }
+    if (top < 0) {
+      top = lensTop;
+    }
+    if (left < 0) {
+      left = lensLeft + pointer.lensSize + offset;
+    }
+    return {
+      position: "fixed",
+      zIndex: 999,
+      left,
+      top
+    };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    Surface,
+    {
+      elevation: 16,
+      className,
+      style: __spreadValues({
+        width: zoomWindowSize,
+        height: zoomWindowSize,
+        position: "fixed",
+        zIndex: 999,
+        overflow: "hidden",
+        pointerEvents: "none",
+        userSelect: "none"
+      }, calculatePosition()),
+      "aria-hidden": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "img",
+        {
+          src: imageSrc,
+          alt: "",
+          className: "pointer-events-none select-none max-w-none object-cover",
+          style: {
+            width: scaledW,
+            height: scaledH,
+            transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`
+          },
+          draggable: false,
+          loading: "lazy"
+        },
+        imageSrc
+      )
+    }
+  );
+}
+
+// src/components/ProductImagePreview/CarouselPagination.tsx
+var import_clsx32 = require("clsx");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function CarouselPagination({
+  images,
+  currentIndex,
+  onSelect,
+  className
+}) {
+  if (!(images == null ? void 0 : images.length)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      className: (0, import_clsx32.clsx)(
+        "flex items-center justify-center w-full px-4 md:hidden",
+        className
+      ),
+      "aria-label": "Image navigation",
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        "div",
+        {
+          className: "grid gap-2 place-items-center",
+          style: {
+            gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`
+          },
+          role: "tablist",
+          children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect(index),
+              className: (0, import_clsx32.clsx)(
+                "w-4 h-4 transition-all duration-200 focus:outline-none",
+                index === currentIndex ? "ring-2 ring-brand-400" : "ring ring-neutral-300"
+              ),
+              "aria-label": `Go to image ${index + 1}`,
+              role: "tab",
+              "aria-selected": index === currentIndex,
+              tabIndex: index === currentIndex ? 0 : -1
+            },
+            index
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/components/ProductImagePreview/MobileImageCarousel.tsx
+var import_react29 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function MobileImageCarousel({
+  images,
+  currentIndex,
+  width = 483,
+  height = 483,
+  onChangeIndex,
+  className = ""
+}) {
+  const containerRef = (0, import_react29.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
+  const [startX, setStartX] = (0, import_react29.useState)(0);
+  const [currentTranslate, setCurrentTranslate] = (0, import_react29.useState)(0);
+  const [prevTranslate, setPrevTranslate] = (0, import_react29.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react29.useState)(width);
+  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
+  const gap = 16;
+  const getTranslateX = (0, import_react29.useCallback)(
+    (index) => {
+      const containerCenter = containerWidth / 2;
+      const imageCenter = imageSize / 2;
+      const totalOffset = index * (imageSize + gap);
+      return containerCenter - imageCenter - totalOffset;
+    },
+    [containerWidth, imageSize, gap]
+  );
+  (0, import_react29.useEffect)(() => {
+    const translateX = getTranslateX(currentIndex);
+    setCurrentTranslate(translateX);
+    setPrevTranslate(translateX);
+  }, [currentIndex, getTranslateX]);
+  (0, import_react29.useEffect)(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerWidth(rect.width);
+      }
+    };
+    updateContainerWidth();
+    const resizeObserver = new ResizeObserver(updateContainerWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  const handleStart = (0, import_react29.useCallback)((clientX) => {
+    setIsDragging(true);
+    setStartX(clientX);
+  }, []);
+  const handleMove = (0, import_react29.useCallback)(
+    (clientX) => {
+      if (!isDragging) return;
+      const currentPosition = clientX;
+      const diff = currentPosition - startX;
+      setCurrentTranslate(prevTranslate + diff);
+    },
+    [isDragging, startX, prevTranslate]
+  );
+  const handleEnd = (0, import_react29.useCallback)(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    const moved = currentTranslate - prevTranslate;
+    const threshold = imageSize / 3;
+    let newIndex = currentIndex;
+    if (moved > threshold && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    } else if (moved < -threshold && currentIndex < images.length - 1) {
+      newIndex = currentIndex + 1;
+    }
+    if (newIndex !== currentIndex) {
+      onChangeIndex(newIndex);
+    } else {
+      setCurrentTranslate(prevTranslate);
+    }
+  }, [
+    isDragging,
+    currentTranslate,
+    prevTranslate,
+    currentIndex,
+    imageSize,
+    images.length,
+    onChangeIndex
+  ]);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    handleStart(e.clientX);
+  };
+  const handleMouseMove = (e) => {
+    e.preventDefault();
+    handleMove(e.clientX);
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+  const handleMouseLeave = () => {
+    handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].clientX);
+  };
+  const handleTouchMove = (e) => {
+    handleMove(e.touches[0].clientX);
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
+  };
+  const handleImageClick = (0, import_react29.useCallback)(
+    (index) => {
+      if (!isDragging && index !== currentIndex) {
+        onChangeIndex(index);
+      }
+    },
+    [isDragging, currentIndex, onChangeIndex]
+  );
+  if (!images.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: `md:hidden w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full",
+      style: {
+        height: imageSize
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "div",
+        {
+          className: "flex items-center",
+          style: {
+            transform: `translateX(${currentTranslate}px)`,
+            transition: isDragging ? "none" : "transform 0.3s ease-out",
+            gap: `${gap}px`
+          },
+          children: images.map((image, index) => {
+            const isActive = index === currentIndex;
+            const distance = Math.abs(index - currentIndex);
+            const shouldRender = distance <= 2;
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              "div",
+              {
+                className: "flex-shrink-0 transition-opacity duration-300",
+                style: {
+                  width: imageSize,
+                  height: imageSize,
+                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3)
+                },
+                onClick: () => handleImageClick(index),
+                children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "img",
+                  {
+                    src: image.src,
+                    alt: image.alt || `Product image ${index + 1}`,
+                    className: "w-full h-full object-cover",
+                    draggable: false,
+                    loading: distance <= 1 ? "eager" : "lazy",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  "div",
+                  {
+                    className: "w-full h-full bg-neutral-100 rounded-md border border-gray-200",
+                    style: {
+                      aspectRatio: "1 / 1"
+                    },
+                    "aria-hidden": "true"
+                  }
+                )
+              },
+              image.src + index
+            );
+          })
+        }
+      )
+    }
+  ) });
+}
+
+// src/components/ProductImagePreview/useProductImagePreview.ts
+var import_react30 = require("react");
+function useProductImagePreview(props) {
+  const {
+    images,
+    currentIndex,
+    zoomEnabled = false,
+    zoomFactor = 2,
+    scrollToZoomEnabled = false,
+    onChangeIndex,
+    isMobile = false
+  } = props;
+  const hasImages = !!(images == null ? void 0 : images.length);
+  const safeIndex = hasImages && currentIndex >= 0 && currentIndex < images.length ? currentIndex : 0;
+  const active = (0, import_react30.useMemo)(() => {
+    return hasImages ? images[safeIndex] : void 0;
+  }, [hasImages, images, safeIndex]);
+  const [zoomPoint, setZoomPoint] = (0, import_react30.useState)(null);
+  const [zoomActive, setZoomActive] = (0, import_react30.useState)(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = (0, import_react30.useState)(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] = (0, import_react30.useState)(null);
+  const primaryImageRef = (0, import_react30.useRef)(null);
+  const cleanupRef = (0, import_react30.useRef)(null);
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
+  (0, import_react30.useEffect)(() => {
+    if (!effectiveZoomEnabled) return;
+    const setupTracking = () => {
+      const element = primaryImageRef.current;
+      if (!element) return;
+      const updatePosition = () => {
+        if (element) {
+          setPrimaryImagePosition(element.getBoundingClientRect());
+        }
+      };
+      updatePosition();
+      const resizeObserver = new ResizeObserver(updatePosition);
+      resizeObserver.observe(element);
+      window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+      cleanupRef.current = () => {
+        resizeObserver.disconnect();
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+      };
+    };
+    if (primaryImageRef.current) {
+      setupTracking();
+    } else {
+      const frameId = requestAnimationFrame(setupTracking);
+      return () => cancelAnimationFrame(frameId);
+    }
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [effectiveZoomEnabled]);
+  const handleSelect = (0, import_react30.useCallback)(
+    (idx) => {
+      if (idx === safeIndex) return;
+      onChangeIndex(idx);
+    },
+    [safeIndex, onChangeIndex]
+  );
+  const handleNext = (0, import_react30.useCallback)(() => {
+    if (!hasImages) return;
+    const nextIndex = (safeIndex + 1) % images.length;
+    onChangeIndex(nextIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handlePrevious = (0, import_react30.useCallback)(() => {
+    if (!hasImages) return;
+    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
+    onChangeIndex(previousIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+  const handleZoomPositionChange = (0, import_react30.useCallback)(
+    (p, active2) => {
+      if (isMobile) return;
+      setZoomPoint(p);
+      setZoomActive(active2);
+    },
+    [isMobile]
+  );
+  const handleScrollZoom = (0, import_react30.useCallback)(
+    (delta) => {
+      if (!effectiveScrollToZoomEnabled) return;
+      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
+      setCurrentZoomFactor(newZoomFactor);
+    },
+    [effectiveScrollToZoomEnabled, currentZoomFactor]
+  );
+  (0, import_react30.useEffect)(() => {
+    setCurrentZoomFactor(zoomFactor);
+  }, [zoomFactor]);
+  return {
+    // State
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    hasImages,
+    safeIndex,
+    active,
+    // Refs
+    primaryImageRef,
+    // Handlers
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom,
+    handleNext,
+    handlePrevious
+  };
+}
+
+// src/components/ProductImagePreview/index.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var PLACEHOLDER_IMAGES = [
+  { src: "", alt: "placeholder" },
+  { src: "", alt: "placeholder" }
+];
+function ProductImagePreview(props) {
+  const {
+    width = 483,
+    height = 483,
+    thumbsPerRow = 4,
+    zoomEnabled = false,
+    scrollToZoomEnabled = false,
+    images,
+    currentIndex,
+    onChangeIndex,
+    zoomLensSize,
+    zoomFactor = 2,
+    zoomWindowScaleFactor = 2.5,
+    zoomWindowOffset = 10
+  } = props;
+  const isMobile = useMatchesMobile();
+  const {
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    safeIndex,
+    active,
+    primaryImageRef,
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom
+  } = useProductImagePreview({
+    images,
+    currentIndex,
+    zoomEnabled,
+    zoomFactor,
+    scrollToZoomEnabled,
+    onChangeIndex,
+    isMobile
+  });
+  if (typeof isMobile === "undefined") return null;
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Stack, { sizing: "layout", style: { width, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex gap-4 items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: primaryImageRef, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        ProductPrimaryImage,
+        {
+          image: active,
+          width,
+          height,
+          zoomEnabled: effectiveZoomEnabled,
+          zoomLensSize,
+          scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
+          onZoomPositionChange: handleZoomPositionChange,
+          onScrollZoom: handleScrollZoom,
+          isPlaceholder: images.length === 0
+        }
+      ) }),
+      effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        ZoomWindow,
+        {
+          image: active,
+          width,
+          height,
+          pointer: zoomPoint,
+          active: zoomActive,
+          zoomFactor: currentZoomFactor,
+          scaleFactor: zoomWindowScaleFactor,
+          primaryImagePosition,
+          offset: zoomWindowOffset
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      MobileImageCarousel,
+      {
+        images,
+        currentIndex: safeIndex,
+        width,
+        height,
+        onChangeIndex: handleSelect
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "div",
+      {
+        className: "flex justify-center gap-4",
+        style: { width: "100%", maxWidth: width },
+        "aria-label": "Product image thumbnails",
+        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            Thumbnail,
+            {
+              src: img.src,
+              alt: img.alt || `Thumbnail ${i + 1}`,
+              isActive: i === safeIndex,
+              onClick: () => handleSelect(i),
+              isPlaceholder: images.length === 0
+            }
+          ) }, img.src + i)
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Grid,
+      {
+        sizing: "layout-group",
+        "aria-label": "Product image thumbnails",
+        style: {
+          width: "100%",
+          maxWidth: width
+        },
+        columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
+        children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+          (img, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            Thumbnail,
+            {
+              src: img.src,
+              alt: img.alt || `Thumbnail ${i + 1}`,
+              isActive: i === safeIndex,
+              onClick: () => handleSelect(i),
+              isPlaceholder: images.length === 0
+            },
+            img.src + i
+          )
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      CarouselPagination,
+      {
+        images,
+        currentIndex: safeIndex,
+        onSelect: handleSelect
+      }
+    )
+  ] });
+}
+
+// src/components/CompactImagesPreview.tsx
+var import_react31 = require("react");
+var import_clsx33 = __toESM(require("clsx"), 1);
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function CompactImagesPreview(props) {
+  const {
+    sources,
+    currentSourceIndex = 0,
+    activeImageHeight = 243,
+    activeImageWidth = 242,
+    thumbnailWidth = 30.5,
+    thumbnailHeight = 30,
+    enableThumbnailBorder = false,
+    placeholderImageUri,
+    onChangeSource
+  } = props;
+  const isMobile = useMatchesMobile();
+  const imagesCount = sources.length;
+  const handleThumbnailClick = (0, import_react31.useCallback)(
+    (newIndex) => {
+      if (newIndex === currentSourceIndex) return;
+      if (newIndex < 0 || newIndex >= imagesCount) return;
+      onChangeSource(newIndex);
+    },
+    [currentSourceIndex, onChangeSource, imagesCount]
+  );
+  if (!sources.length || currentSourceIndex >= sources.length || typeof isMobile === "undefined")
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "img",
+      {
+        className: "object-center",
+        style: { width: activeImageWidth, height: activeImageHeight },
+        src: placeholderImageUri,
+        alt: "placeholder image"
+      }
+    );
+  const currentSource = sources[currentSourceIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Stack, { sizing: "layout", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "img",
+      {
+        style: {
+          width: isMobile ? "100%" : activeImageWidth,
+          height: activeImageHeight,
+          objectPosition: "center"
+        },
+        src: currentSource.uri,
+        alt: currentSource.name
+      }
+    ),
+    sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-row flex-wrap items-center gap-3", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "button",
+      {
+        onClick: (e) => {
+          e.preventDefault();
+          handleThumbnailClick(index);
+        },
+        className: (0, import_clsx33.default)(
+          "cursor-pointer",
+          currentSourceIndex === index && enableThumbnailBorder ? "ring-2 ring-offset-2 ring-brand-400 transition-discrete duration-300" : "ring-brand-400/0"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "img",
+          {
+            src: source.uri,
+            alt: source.name,
+            style: {
+              width: thumbnailWidth,
+              height: thumbnailHeight,
+              objectPosition: "center"
+            }
+          }
+        )
+      },
+      `compact-image-${source.uri}-${index}`
+    )) })
+  ] });
+}
+
+// src/components/PDFViewer/index.tsx
+var import_react34 = require("react");
+
+// src/components/PDFViewer/PDFElement.tsx
+var import_react_pdf2 = require("@mikecousins/react-pdf");
+var import_react33 = require("react");
+
+// src/components/PDFViewer/PDFPage.tsx
+var import_react_pdf = require("@mikecousins/react-pdf");
+var import_react32 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function PdfPage({
+  file,
+  pageNumber,
+  testid,
+  isMobile
+}) {
+  const canvasRef = (0, import_react32.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf.usePdf)({
+    file,
+    page: pageNumber,
+    canvasRef,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3
+  });
+  if (!pdfDocument) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      "data-testid": testid,
+      style: { width: "100%", height: "auto" }
+    }
+  );
+}
+
+// src/components/PDFViewer/PDFElement.tsx
+var import_clsx34 = __toESM(require("clsx"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function PDFElement({
+  b64,
+  testid,
+  isMobile,
+  error
+}) {
+  var _a;
+  const canvasRef = (0, import_react33.useRef)(null);
+  const { pdfDocument } = (0, import_react_pdf2.usePdf)({
+    file: `data:application/pdf;base64,${b64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+    canvasRef
+  });
+  const pagesArr = new Array((_a = pdfDocument == null ? void 0 : pdfDocument.numPages) != null ? _a : 1).fill(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    "div",
+    {
+      className: "flex flex-col space-y-4",
+      style: !isMobile ? {
+        minHeight: 871,
+        minWidth: 654
+      } : void 0,
+      children: !!pdfDocument && !!b64 && !error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Stack, { sizing: "layout-group", children: pagesArr.length > 1 ? pagesArr.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "div",
+        {
+          className: (0, import_clsx34.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            PdfPage,
+            {
+              testid: testid ? `${testid}-pdf_page_${i + 1}` : void 0,
+              file: `data:application/pdf;base64,${b64}`,
+              pageNumber: i + 1
+            }
+          )
+        },
+        `${testid}-pdf-page-${i + 1}`
+      )) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "div",
+        {
+          className: (0, import_clsx34.default)(
+            "flex justify-center border-border-primary-normal",
+            isMobile ? "border-0" : "border"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            "canvas",
+            {
+              "data-testid": testid ? `${testid}-pdf-content` : void 0,
+              ref: canvasRef,
+              style: { width: "100%", height: "auto" }
+            }
+          )
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        Stack,
+        {
+          justify: "center",
+          items: "center",
+          height: "full",
+          flexGrow: 1,
+          "data-testid": testid ? `${testid}-pdf-${error ? "error" : "loading"}` : void 0,
+          children: error ? error : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Spinner, { size: "large" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/PDFViewer/DownloadIcon.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function DownloadIcon({
+  onClick,
+  isDownloading,
+  testid
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    Button,
+    {
+      testid,
+      iconOnly: true,
+      variant: "tertiary",
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      onClick
+    }
+  );
+}
+
+// src/components/PDFViewer/PDFNavigation.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    Stack,
+    {
+      horizontal: true,
+      items: "center",
+      justify: "between",
+      sizing: "layout-group",
+      testid: testid ? `${testid}-pdf-navigation` : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { horizontal: true, items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onPrev,
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "chevron_backward" }),
+              disabled: disablePrev,
+              testid: testid ? `${testid}-pdf-file-previous-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Heading3, { className: "text-text-primary-normal whitespace-nowrap", children: [
+            currentIndex + 1,
+            " / ",
+            total
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            Button,
+            {
+              iconOnly: true,
+              variant: "tertiary",
+              onClick: onNext,
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "chevron_forward" }),
+              disabled: disableNext,
+              testid: testid ? `${testid}-pdf-file-next-button` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Paragraph, { children: (fileName == null ? void 0 : fileName.endsWith(".pdf")) ? fileName : `${fileName}.pdf` })
+        ] }),
+        extraActions && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex items-center gap-2", children: extraActions })
+      ]
+    }
+  ) });
+}
+
+// src/components/PDFViewer/index.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function PDFViewer(props) {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    withPagination = true,
+    error
+  } = props;
+  const [currentIndex, setCurrentIndex] = (0, import_react34.useState)(0);
+  const [isDownloading, setIsDownloading] = (0, import_react34.useState)(false);
+  const handleDownload = (0, import_react34.useCallback)(() => {
+    setIsDownloading(true);
+    const link = document.createElement("a");
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf") ? currentPdf.fileName : `${currentPdf.fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+  if (!encodedPdfs.length) return null;
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    Modal,
+    {
+      testid,
+      open: isOpen,
+      customFooter,
+      onClose: handleClose,
+      noWrapper: true,
+      showButtons: isMobile && customFooter ? !!customActions : !!encodedPdfs.length,
+      customActions: !!encodedPdfs.length && !isMobile && withPagination ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        PdfNavigation,
+        {
+          testid,
+          currentIndex,
+          total: encodedPdfs.length,
+          onPrev: handlePreviousFile,
+          onNext: handleNextFile,
+          disablePrev: currentIndex === 0,
+          disableNext: currentIndex === encodedPdfs.length - 1,
+          extraActions: customActions,
+          fileName: encodedPdfs[currentIndex].fileName
+        }
+      ) : customActions,
+      fixedHeightScrolling: true,
+      headerIconAlign: "right",
+      headerIcon: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        DownloadIcon,
+        {
+          testid: testid ? `${testid}-download-icon` : void 0,
+          onClick: handleDownload,
+          isDownloading
+        }
+      ) : void 0,
+      title: isMobile ? title != null ? title : encodedPdfs[currentIndex].fileName : void 0,
+      size: isMobile ? "screen" : "large",
+      headerClassname: "bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        PDFElement,
+        {
+          testid,
+          b64: encodedPdfs[currentIndex].base64,
+          isMobile,
+          error
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Button,
   Card,
   Checkbox,
+  CompactImagesPreview,
   DataCellHeader,
   DataGrid,
   DataGridCell,
@@ -4311,7 +6853,10 @@ function Accordion(props) {
   Label,
   Menu,
   MenuOption,
+  MobileDataGrid,
+  PDFViewer,
   Paragraph,
+  ProductImagePreview,
   Search,
   Select,
   Subheader,