contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,174 +0,0 @@
-"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

@@ -1,440 +0,0 @@
-"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;