contentoh-components-library 21.6.59 → 21.6.61

package/dist/components/pages/ProductEdition/sections/EditionTopBar.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditionTopBar = void 0;
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Chat = require("../../../organisms/Chat");
+
+var _IconoAB = _interopRequireDefault(require("../../../../assets/images/generalButton/Icono AB.svg"));
+
+var _tokens = require("../../CreatorsProductEdition/sections/tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Barra superior de la edición. Reemplaza a `molecules/HeaderTop` con lo mismo
+  (título, chat, comparar versión auditable y cerrar), pero:
+    - el título es más chico y la barra tiene aire y una línea abajo, para que
+      no quede encimado sobre la imagen y el nombre del producto;
+    - el botón de cerrar queda dentro del margen y con borde, para que siempre
+      se vea (antes iba pegado al borde derecho).
+
+  Reporta su alto con `setHeaderTop`, como HeaderTop: la pantalla lo resta para
+  calcular el alto de las columnas. Incluye el margen de abajo.
+*/
+var GAP_BELOW = 12;
+var buttonSx = {
+  width: 32,
+  height: 32,
+  border: "1px solid ".concat(_tokens.COLORS.s3),
+  bgcolor: _tokens.COLORS.white,
+  "&:hover": {
+    bgcolor: _tokens.COLORS.s2,
+    borderColor: _tokens.COLORS.s4
+  }
+};
+
+var EditionTopBar = function EditionTopBar(_ref) {
+  var setHeaderTop = _ref.setHeaderTop,
+      withChat = _ref.withChat,
+      chatType = _ref.chatType,
+      productSelected = _ref.productSelected,
+      token = _ref.token,
+      auditableVersion = _ref.auditableVersion,
+      setCompare = _ref.setCompare,
+      isAuditor = _ref.isAuditor,
+      activeRetailer = _ref.activeRetailer,
+      _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {
+    window.location.href = "/products";
+  } : _ref$onClose;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (ref.current && setHeaderTop) setHeaderTop(ref.current.offsetHeight + GAP_BELOW); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Mismo chat que HeaderTop, según `chatType`.
+
+  var chat = (0, _react.useMemo)(function () {
+    if (!withChat || !chatType || !productSelected || !token) return null;
+
+    if (chatType === "product_status") {
+      var _productSelected$arti;
+
+      if (!(activeRetailer !== null && activeRetailer !== void 0 && activeRetailer.id)) return null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
+        chatType: "product_status",
+        chatContainerType: "popUp",
+        chatData: {
+          id: (productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article) || (productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article),
+          version: productSelected === null || productSelected === void 0 ? void 0 : productSelected.version,
+          retailerId: activeRetailer.id,
+          status: productSelected === null || productSelected === void 0 ? void 0 : productSelected.status,
+          userToken: token
+        },
+        size: 18,
+        activeRetailer: activeRetailer
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
+      chatType: "merchant_product",
+      chatContainerType: "popUp",
+      chatData: {
+        userToken: token,
+        id: productSelected.id_article,
+        version: productSelected.version
+      },
+      size: 18,
+      activeRetailer: activeRetailer
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [withChat, chatType, productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article, productSelected === null || productSelected === void 0 ? void 0 : productSelected.version, token, activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref: ref,
+    component: "header",
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1.5,
+      px: {
+        xs: 1.5,
+        sm: 2
+      },
+      py: 1,
+      mb: "".concat(GAP_BELOW, "px"),
+      borderBottom: "1px solid ".concat(_tokens.COLORS.s2),
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "h1",
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        fontFamily: _tokens.FONTS.Raleway_600,
+        fontSize: 16,
+        lineHeight: "24px",
+        color: _tokens.COLORS.s5,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      children: "Edici\xF3n de producto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      spacing: 1,
+      sx: {
+        flexShrink: 0
+      },
+      children: [chat, isAuditor && auditableVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Comparar con la versi\xF3n auditable",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Comparar con la versi\xF3n auditable",
+          onClick: function onClick() {
+            return setCompare(function (value) {
+              return !value;
+            });
+          },
+          sx: buttonSx,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _IconoAB.default,
+            alt: "",
+            width: 16,
+            height: 16
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Cerrar",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Cerrar la edici\xF3n",
+          onClick: onClose,
+          sx: buttonSx,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+            sx: {
+              fontSize: 18,
+              color: _tokens.COLORS.s5
+            }
+          })
+        })
+      })]
+    })]
+  });
+};
+
+exports.EditionTopBar = EditionTopBar;

package/dist/components/pages/ProductEdition/sections/ImagePanel.js

@@ -0,0 +1,440 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagePanel = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _react2 = require("swiper/react");
+
+var _swiper = require("swiper");
+
+require("swiper/swiper.min.css");
+
+var _openModal = _interopRequireDefault(require("../../../../assets/images/generalButton/openModal.svg"));
+
+var _ProductMedia = require("../../CreatorsProductEdition/sections/ProductMedia");
+
+var _StatusChip = require("../../CreatorsProductEdition/sections/StatusChip");
+
+var _tokens = require("../../CreatorsProductEdition/sections/tokens");
+
+var _ServiceTools = require("./ServiceTools");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["imagesArray", "activeImage", "currentIndex", "setActiveImage", "setShowModal"];
+
+/*
+  Panel de imagen de ProductEdition: la imagen activa, las miniaturas y los
+  datos de la imagen.
+
+  Copia del de CreatorsProductEdition con el diseño de la propuesta de
+  navegación por servicios: la imagen en una tarjeta con fondo claro y bordes
+  redondeados, miniaturas cuadradas con borde rosa en la activa, y la cabecera
+  de los datos sin el botón de ayuda (estatus + versión + guardar).
+
+  Reemplaza a `organisms/ImagePreviewer` (EditionActiveImage + ImageSelector) y a
+  `organisms/ImageDataTable` (TableHeader + filas), con los mismos props, hecho
+  con MUI y Swiper. Se estira al ancho de su columna en vez de medir 340px fijos:
+  en desktop ocupa el panel izquierdo y en tablet/celular va arriba del contenido.
+*/
+// --- Vista previa ----------------------------------------------------------
+var Preview = function Preview(_ref) {
+  var _imagesArray$values;
+
+  var imagesArray = _ref.imagesArray,
+      activeImage = _ref.activeImage,
+      setActiveImage = _ref.setActiveImage,
+      setShowModal = _ref.setShowModal,
+      currentIndex = _ref.currentIndex;
+  var images = (_imagesArray$values = imagesArray === null || imagesArray === void 0 ? void 0 : imagesArray.values) !== null && _imagesArray$values !== void 0 ? _imagesArray$values : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        position: "relative",
+        width: "100%",
+        // Misma proporción que el visor original (340 x 295).
+        aspectRatio: "340 / 295",
+        p: 1.5,
+        boxSizing: "border-box",
+        borderRadius: "10px",
+        border: "1px solid ".concat(_tokens.COLORS.s2),
+        background: "linear-gradient(135deg, ".concat(_tokens.COLORS.white, ", ").concat(_tokens.COLORS.s1, ")"),
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+        src: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
+        ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
+        alt: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Ver en grande",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Ver en grande",
+          onClick: function onClick() {
+            return setShowModal(true);
+          },
+          sx: {
+            position: "absolute",
+            right: 8,
+            bottom: 8,
+            width: 32,
+            height: 32,
+            p: 0,
+            bgcolor: _tokens.COLORS.white,
+            border: "1px solid ".concat(_tokens.COLORS.s2),
+            backgroundImage: "url(".concat(_openModal.default, ")"),
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            backgroundSize: 16,
+            "&:hover": {
+              bgcolor: _tokens.COLORS.s2
+            }
+          }
+        })
+      })]
+    }), images.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        mt: 1.25
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+        modules: [_swiper.FreeMode, _swiper.Mousewheel, _swiper.Keyboard],
+        slidesPerView: "auto",
+        spaceBetween: 8,
+        freeMode: true,
+        mousewheel: {
+          forceToAxis: true
+        },
+        keyboard: {
+          enabled: true
+        },
+        style: {
+          width: "100%"
+        },
+        children: images.map(function (image, index) {
+          var selected = index === currentIndex;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.SwiperSlide, {
+            style: {
+              width: 64
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+              "aria-label": "Ver imagen ".concat(index + 1),
+              "aria-pressed": selected,
+              onClick: function onClick() {
+                return setActiveImage(index);
+              },
+              sx: {
+                width: 64,
+                height: 64,
+                p: "4px",
+                boxSizing: "border-box",
+                borderRadius: "8px",
+                overflow: "hidden",
+                border: "".concat(selected ? 2 : 1, "px solid ").concat(selected ? _tokens.COLORS.magenta_s2 : _tokens.COLORS.s2),
+                bgcolor: _tokens.COLORS.white,
+                "&:hover": {
+                  borderColor: selected ? _tokens.COLORS.magenta_s2 : _tokens.COLORS.s3
+                }
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductMedia.ProductMedia, {
+                src: image.src,
+                ext: image.ext,
+                alt: image.altText,
+                thumbnail: true
+              })
+            })
+          }, "".concat(index, "-").concat(image === null || image === void 0 ? void 0 : image.name));
+        })
+      })
+    })]
+  });
+}; // --- Datos de la imagen ----------------------------------------------------
+
+
+var labelSx = {
+  fontFamily: _tokens.FONTS.AvenirNext,
+  fontSize: 11,
+  lineHeight: "18px",
+  color: _tokens.COLORS.s4
+};
+
+var DataRow = function DataRow(_ref2) {
+  var label = _ref2.label,
+      children = _ref2.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+    sx: {
+      "& td, & th": {
+        border: 0,
+        py: "2px",
+        px: 0
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      component: "th",
+      scope: "row",
+      sx: labelSx,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, labelSx), {}, {
+        pl: 1
+      }),
+      children: children
+    })]
+  });
+};
+
+var GrayValue = function GrayValue(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "span",
+    sx: {
+      display: "inline-block",
+      maxWidth: "100%",
+      px: "3px",
+      py: "1px",
+      borderRadius: "3px",
+      bgcolor: _tokens.COLORS.s2,
+      color: _tokens.COLORS.s5,
+      fontFamily: _tokens.FONTS.AvenirNext,
+      fontSize: 11,
+      lineHeight: "19px",
+      overflowWrap: "anywhere"
+    },
+    children: children
+  });
+};
+/**
+ * Valor que se edita con un clic, como `atoms/LabelToInput`: se muestra como
+ * etiqueta y al hacer clic se vuelve campo de texto; al salir, vuelve a ser
+ * etiqueta. Cada cambio se avisa con el mismo payload que el original.
+ */
+
+
+var EditableValue = function EditableValue(_ref4) {
+  var defaultValue = _ref4.defaultValue,
+      _onChange = _ref4.onChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editing = _useState2[0],
+      setEditing = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultValue === "" ? "-" : defaultValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    return setValue(defaultValue === "" ? "-" : defaultValue);
+  }, [defaultValue]);
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+
+    if (editing) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }, [editing]);
+
+  if (!editing) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+      onClick: function onClick() {
+        return setEditing(true);
+      },
+      "aria-label": "Editar valor",
+      sx: {
+        borderRadius: "3px",
+        justifyContent: "flex-end",
+        maxWidth: "100%"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+        children: value !== null && value !== void 0 ? value : "-"
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputBase, {
+    inputRef: inputRef,
+    value: value !== null && value !== void 0 ? value : "",
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+
+      _onChange(e);
+    },
+    onBlur: function onBlur() {
+      return setEditing(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && setEditing(false);
+    },
+    sx: {
+      width: 120,
+      maxWidth: "100%",
+      fontFamily: _tokens.FONTS.AvenirNext,
+      fontSize: 12,
+      border: "1px solid ".concat(_tokens.COLORS.s3),
+      borderRadius: "3px",
+      px: 0.5
+    }
+  });
+};
+
+var ImageData = function ImageData(_ref5) {
+  var _lists$inputs, _lists$inputs$find, _lists$imageShotType, _lists$imageShotType$, _lists$attrForImgs, _lists$attrForImgs$ge;
+
+  var activeImage = _ref5.activeImage,
+      lists = _ref5.lists,
+      retailerSelected = _ref5.retailerSelected,
+      setImages = _ref5.setImages,
+      imagesStatus = _ref5.imagesStatus,
+      onClickSave = _ref5.onClickSave,
+      showSaveButton = _ref5.showSaveButton,
+      version = _ref5.version,
+      setShowVersionSelector = _ref5.setShowVersionSelector,
+      shotThd = _ref5.shotThd;
+  var shotName = (lists === null || lists === void 0 ? void 0 : (_lists$inputs = lists.inputs) === null || _lists$inputs === void 0 ? void 0 : (_lists$inputs$find = _lists$inputs.find(function (f) {
+    return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_id);
+  })) === null || _lists$inputs$find === void 0 ? void 0 : _lists$inputs$find.name) || "-";
+  var thdShot = (lists === null || lists === void 0 ? void 0 : (_lists$imageShotType = lists.imageShotType) === null || _lists$imageShotType === void 0 ? void 0 : (_lists$imageShotType$ = _lists$imageShotType.find(function (f) {
+    return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_shot_type);
+  })) === null || _lists$imageShotType$ === void 0 ? void 0 : _lists$imageShotType$.type_shot) || "-";
+  var size = activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage.width, "x").concat(activeImage.height, "px") : "-";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+    variant: "outlined",
+    sx: {
+      mt: {
+        xs: 2,
+        sm: 0,
+        md: 2
+      },
+      p: 1.5,
+      borderColor: _tokens.COLORS.s2,
+      borderRadius: "10px",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 1,
+      sx: {
+        pb: "5px",
+        borderBottom: "1px solid ".concat(_tokens.COLORS.s2)
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        title: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-",
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway,
+          fontSize: 14,
+          lineHeight: "23px",
+          color: _tokens.COLORS.s5,
+          flex: "1 1 90px",
+          minWidth: 0,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.name) || "-"
+      }), imagesStatus && imagesStatus !== "-" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusChip.StatusChip, {
+        status: imagesStatus,
+        oval: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceTools.ServiceTools, {
+        onClickSave: onClickSave,
+        showSaveButton: showSaveButton,
+        version: version,
+        setShowVersionSelector: setShowVersionSelector
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Table, {
+      size: "small",
+      sx: {
+        mt: "4px",
+        tableLayout: "fixed"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableBody, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tipo de toma",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+            children: shotName
+          })
+        }), shotThd && /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tipo de imagen THD",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GrayValue, {
+            children: thdShot
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Formato",
+          children: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+          label: "Tama\xF1o de imagen",
+          children: size
+        }), retailerSelected && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs = lists.attrForImgs) === null || _lists$attrForImgs === void 0 ? void 0 : (_lists$attrForImgs$ge = _lists$attrForImgs.general) === null || _lists$attrForImgs$ge === void 0 ? void 0 : _lists$attrForImgs$ge.map(function (attr, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataRow, {
+            label: (attr === null || attr === void 0 ? void 0 : attr.name) || "-",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableValue, {
+              defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
+              onChange: function onChange(e) {
+                return setImages({
+                  action: "changeAttrValue",
+                  value: e.target.value || "-",
+                  id: attr.id
+                });
+              }
+            })
+          }, "row-".concat(index, "-").concat(attr === null || attr === void 0 ? void 0 : attr.name));
+        }))]
+      })
+    })]
+  });
+}; // --- Panel completo --------------------------------------------------------
+
+
+var ImagePanel = function ImagePanel(_ref6) {
+  var imagesArray = _ref6.imagesArray,
+      activeImage = _ref6.activeImage,
+      currentIndex = _ref6.currentIndex,
+      setActiveImage = _ref6.setActiveImage,
+      setShowModal = _ref6.setShowModal,
+      dataProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+  return (
+    /*#__PURE__*/
+    // En tablet la imagen y sus datos van lado a lado: apilados, la imagen
+    // ocuparía todo el ancho y empujaría el contenido muy abajo.
+    (0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        width: "100%",
+        minWidth: 0,
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "minmax(0, 1fr)",
+          sm: "repeat(2, minmax(0, 1fr))",
+          md: "minmax(0, 1fr)"
+        },
+        columnGap: 2,
+        alignItems: "start"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Preview, {
+        imagesArray: imagesArray,
+        activeImage: activeImage,
+        currentIndex: currentIndex,
+        setActiveImage: setActiveImage,
+        setShowModal: setShowModal
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageData, (0, _objectSpread2.default)({
+        activeImage: activeImage
+      }, dataProps))]
+    })
+  );
+};
+
+exports.ImagePanel = ImagePanel;