contentoh-components-library 21.6.50 → 21.6.52

package/.env.test

@@ -75,4 +75,3 @@ REACT_APP_ENVIRONMENT=test
 REACT_APP_REGION=us-east-1
 REACT_APP_VARIANTS_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/variants
 REACT_APP_NEW_ARTICLES_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/new-articles
-REACT_APP_ASSETS_PRESIGN_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/articles-assets/presign

package/dist/components/atoms/IconFile/index.js

@@ -69,85 +69,14 @@ var IconFile = function IconFile(props) {
       type: "csv"
     },
     // file image
-    gif: {
-      icon: _freeSolidSvgIcons.faFileImage,
-      type: "image"
-    },
-    jpg: {
-      icon: _freeSolidSvgIcons.faFileImage,
-      type: "image"
-    },
-    jpeg: {
-      icon: _freeSolidSvgIcons.faFileImage,
-      type: "image"
-    },
-    png: {
+    svg: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
-    webp: {
+    gif: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
-    // archivos de diseño editables: no se pueden previsualizar en el navegador,
-    // así que el icono es lo único que distingue uno de otro en la bandeja.
-    psd: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    psb: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    ai: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    eps: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    indd: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    idml: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    sketch: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    fig: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    xd: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    afphoto: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    afdesign: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    svg: {
-      icon: _freeSolidSvgIcons.faSwatchbook,
-      type: "design"
-    },
-    // proyectos de animación y edición de video
-    aep: {
-      icon: _freeSolidSvgIcons.faFilm,
-      type: "motion"
-    },
-    prproj: {
-      icon: _freeSolidSvgIcons.faFilm,
-      type: "motion"
-    },
     // file pdf
     pdf: {
       icon: _freeSolidSvgIcons.faFilePdf,
@@ -203,10 +132,6 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileZipper,
       type: "zip"
     },
-    "7z": {
-      icon: _freeSolidSvgIcons.faFileZipper,
-      type: "zip"
-    },
     // file code
     xml: {
       icon: _freeSolidSvgIcons.faFileCode,
@@ -273,14 +198,6 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"
     },
-    mov: {
-      icon: _freeSolidSvgIcons.faFileVideo,
-      type: "video"
-    },
-    webm: {
-      icon: _freeSolidSvgIcons.faFileVideo,
-      type: "video"
-    },
     mpeg: {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"

package/dist/components/atoms/IconFile/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-design .icon {\n    color: #2a5cb8;\n    border-color: #2a5cb8;\n  }\n  &.icon-motion .icon {\n    color: #6d3fc0;\n    border-color: #6d3fc0;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
   var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "0px";
 });

package/dist/components/atoms/ProductImage/ProductImage.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VideoReproductor = exports.VideoMiniaturas = exports.Template = void 0;
+exports.default = exports.Template = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -36,72 +36,4 @@ var ProductImageDefault = Template.bind({});
 ProductImageDefault.args = {
   imageType: "main-image",
   altText: "default image"
-};
-/*
-  Las escalas de video, lado a lado. Las cuatro primeras son miniaturas: sin
-  controles, con su duración y un botón de play, y todo el recuadro clicable.
-  Las dos últimas son reproductores de verdad.
-*/
-
-var VIDEO = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
-
-var Escala = function Escala(_ref) {
-  var imageType = _ref.imageType;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
-    style: {
-      margin: 0
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImage, {
-      img: VIDEO,
-      ext: "mp4",
-      imageType: imageType,
-      altText: "video de producto",
-      onClick: function onClick() {
-        return console.log("clic en", imageType);
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
-      style: {
-        fontFamily: "Lato",
-        fontSize: 11,
-        marginTop: 4
-      },
-      children: imageType
-    })]
-  });
-};
-
-var VideoMiniaturas = function VideoMiniaturas() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      display: "flex",
-      gap: 24,
-      alignItems: "flex-start"
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
-      imageType: "carousel-image"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
-      imageType: "catalogue-image-small-size"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
-      imageType: "catalogue-modal-image"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
-      imageType: "catalogue-image-big-size"
-    })]
-  });
-};
-
-exports.VideoMiniaturas = VideoMiniaturas;
-
-var VideoReproductor = function VideoReproductor() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      display: "flex",
-      gap: 24,
-      alignItems: "flex-start"
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
-      imageType: "main-image"
-    })
-  });
-};
-
-exports.VideoReproductor = VideoReproductor;
+};

package/dist/components/atoms/ProductImage/index.js

@@ -7,119 +7,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProductImage = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _react = require("react");
-
-var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
-
 var _styles = require("./styles");
 
-var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
 
 var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-/*
-  Tamaños en los que un video se muestra como miniatura y no como reproductor.
-
-  Los controles nativos del navegador necesitan alrededor de 150px de ancho
-  para ser usables; en un recuadro de 60 o de 85 se pintan encimados y no se
-  puede ni dar play. Peor aún, un <video> con controles se traga el clic, así
-  que un video en el carrusel no se podía ni seleccionar: `onClick` nunca
-  llegaba a correr.
-
-  En estos tamaños se muestra el primer fotograma con su duración y un botón de
-  play, y el recuadro completo lleva al visor grande, que es donde el video sí
-  se ve y se controla.
-*/
-var THUMBNAIL_TYPES = ["carousel-image", "catalogue-image-small-size", "catalogue-image-big-size", "catalogue-modal-image"];
-
-var PlayBadge = function PlayBadge() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: "play-badge",
-    "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-      viewBox: "0 0 24 24",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-        cx: "12",
-        cy: "12",
-        r: "11"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-        points: "9.5,7.5 17,12 9.5,16.5"
-      })]
-    })
-  });
-};
-/**
- * Imagen —o video— de producto.
- *
- * El tipo de archivo se decide por `ext`/`mime` cuando quien llama los conoce.
- * Antes se comprobaba con `/\.mp4$/` sobre la URL, y nunca acertaba: la URL
- * guardada apunta al redimensionador de CloudFront y no conserva la extensión.
- * El regex queda solo como respaldo para los llamadores que aún mandan `img`
- * a secas.
- */
-
-
 var ProductImage = function ProductImage(_ref) {
   var img = _ref.img,
       imageType = _ref.imageType,
       altText = _ref.altText,
-      onClick = _ref.onClick,
-      ext = _ref.ext,
-      mime = _ref.mime,
-      poster = _ref.poster;
-
-  // La duración no está en la base: se toma de los metadatos, que el navegador
-  // ya descarga por el `preload="metadata"`. No cuesta una petición extra.
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      duration = _useState2[0],
-      setDuration = _useState2[1];
-
-  var kind = ext || mime ? (0, _assetTypes.resolvePreviewKind)({
-    ext: ext,
-    mime: mime
-  }) : /\.mp4($|[?#])/i.test(img || "") ? _assetTypes.ASSET_PREVIEW.VIDEO : _assetTypes.ASSET_PREVIEW.IMAGE;
-
-  if (kind === _assetTypes.ASSET_PREVIEW.VIDEO) {
-    var isThumbnail = THUMBNAIL_TYPES.includes(imageType);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-      className: "".concat(imageType, " ").concat(isThumbnail ? "video-thumbnail" : "video-player"),
-      onClick: isThumbnail ? onClick : undefined,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
-        // `#t=0.5` hace que el navegador muestre el fotograma del medio
-        // segundo en lugar de un cuadro negro, sin descargar el archivo
-        // completo.
-        src: poster ? img : "".concat(img, "#t=0.5"),
-        poster: poster || undefined,
-        controls: !isThumbnail,
-        muted: isThumbnail,
-        playsInline: true,
-        preload: "metadata",
-        onLoadedMetadata: function onLoadedMetadata(e) {
-          return setDuration(e.target.duration);
-        }
-      }), isThumbnail && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayBadge, {}), duration ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "video-duration",
-          children: (0, _assetTypes.formatDuration)(duration)
-        }) : null]
-      })]
+      onClick = _ref.onClick;
+  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
+  var regex = /\.mp4$/;
+
+  if (regex.test(img)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: imageType,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+        controls: true,
+        width: "100%",
+        height: "auto",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+          src: img,
+          type: "video/mp4"
+        })
+      })
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: imageType,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+        src: img,
+        fallbackImage: _defaultProductImage.default,
+        alt: altText,
+        onClick: onClick
+      })
     });
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: imageType,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-      src: img,
-      fallbackImage: _defaultProductImage.default,
-      alt: altText,
-      onClick: onClick
-    })
-  });
 };
 
 exports.ProductImage = ProductImage;

package/dist/components/atoms/ProductImage/styles.js

@@ -11,10 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _variables = require("../../../global-files/variables");
-
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img,\n  video {\n    object-fit: contain;\n  }\n\n  /*\n    Miniatura de video: fotograma quieto, con su duraci\xF3n y un bot\xF3n de play.\n    El clic lo recibe el contenedor, no el <video>, para que lleve al visor\n    grande en vez de quedarse peleando con los controles.\n  */\n  &.video-thumbnail {\n    position: relative;\n    cursor: pointer;\n\n    video {\n      pointer-events: none;\n      background: #000;\n    }\n\n    .play-badge {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 32px;\n      height: 32px;\n      pointer-events: none;\n\n      svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      circle {\n        fill: rgba(0, 0, 0, 0.55);\n      }\n\n      polygon {\n        fill: #ffffff;\n      }\n    }\n\n    &:hover .play-badge circle {\n      fill: rgba(0, 0, 0, 0.75);\n    }\n\n    .video-duration {\n      position: absolute;\n      right: 4px;\n      bottom: 4px;\n      padding: 0 4px;\n      border-radius: 3px;\n      background: rgba(0, 0, 0, 0.75);\n      color: #ffffff;\n      font-family: ", ";\n      font-size: 10px;\n      line-height: 15px;\n      pointer-events: none;\n    }\n  }\n\n  /* En 60px un badge de 32 tapa el fotograma completo. */\n  &.catalogue-image-small-size.video-thumbnail .play-badge {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.carousel-image.video-thumbnail {\n    .play-badge {\n      width: 22px;\n      height: 22px;\n    }\n\n    .video-duration {\n      font-size: 9px;\n      line-height: 13px;\n    }\n  }\n\n  &.carousel-image {\n    img,\n    video {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img,\n    video {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    display: flex; \n    justify-content: center; \n    align-items: center; \n    img,\n    video {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img,\n    video {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img,\n\n    video {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n    display: flex; \n    justify-content: center; \n    align-items: center; \n\n    img,\n\n    video {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])), _variables.FontFamily.Lato);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img {\n    object-fit: contain;\n  }\n\n  &.carousel-image {\n    img {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    display: flex; \n    justify-content: center; \n    align-items: center; \n    img {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n    display: flex; \n    justify-content: center; \n    align-items: center; \n\n    img {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/EditionActiveImage/index.js

@@ -16,14 +16,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var EditionActiveImage = function EditionActiveImage(_ref) {
   var img = _ref.img,
       altText = _ref.altText,
-      setShowModal = _ref.setShowModal,
-      ext = _ref.ext;
+      setShowModal = _ref.setShowModal;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
       img: img,
       imageType: "main-image",
-      altText: altText,
-      ext: ext
+      altText: altText
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
       buttonType: "open-modal-button",
       onClick: function onClick() {

package/dist/components/molecules/GalleryElement/index.js

@@ -36,7 +36,7 @@ var _Tooltip = require("../../atoms/Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GalleryElement = function GalleryElement(_ref) {
-  var _auditImages$values$n, _auditImages$values$n2, _auditImages$values$n3;
+  var _auditImages$values$n, _auditImages$values$n2;
 
   var image = _ref.image,
       _ref$gridLayout = _ref.gridLayout,
@@ -54,8 +54,7 @@ var GalleryElement = function GalleryElement(_ref) {
       setCheckAll = _ref.setCheckAll,
       auditImages = _ref.auditImages,
       compare = _ref.compare,
-      updateApprovedInputsImages = _ref.updateApprovedInputsImages,
-      onSelect = _ref.onSelect;
+      updateApprovedInputsImages = _ref.updateApprovedInputsImages;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -134,16 +133,8 @@ var GalleryElement = function GalleryElement(_ref) {
       className: "image-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
         img: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n2 = auditImages.values[number]) === null || _auditImages$values$n2 === void 0 ? void 0 : _auditImages$values$n2.src : image === null || image === void 0 ? void 0 : image.src,
-        altText: image === null || image === void 0 ? void 0 : image.altText // Sin `ext`, un video se pinta como <img> rota: la URL guardada no
-        // conserva la extensión del archivo.
-        ,
-        ext: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n3 = auditImages.values[number]) === null || _auditImages$values$n3 === void 0 ? void 0 : _auditImages$values$n3.ext : image === null || image === void 0 ? void 0 : image.ext,
-        imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size") // La miniatura de un video ya no lleva controles, así que el clic es
-        // la única forma de llegar al visor grande. Se aplica también a las
-        // imágenes: dos recuadros idénticos donde solo uno responde al clic
-        // sería peor que no responder ninguno.
-        ,
-        onClick: onSelect
+        altText: image === null || image === void 0 ? void 0 : image.altText,
+        imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "information-container",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/molecules/GalleryHeader/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GalleryHeader = exports.GALLERY_COLUMNS = void 0;
+exports.GalleryHeader = void 0;
 
 var _styles = require("./styles");
 
@@ -11,97 +11,13 @@ var _CheckBox = require("../../atoms/CheckBox");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-/*
-  Las columnas de la bandeja dependen de qué se está listando: un PDF no tiene
-  "tipo de toma" ni alto por ancho, y una foto no tiene "tipo de activo".
-  Estaban escritas a mano en el marcado, así que la única forma de cambiarlas
-  era duplicar el componente.
-
-  El preset `image` reproduce exactamente las columnas y clases de antes, para
-  que la bandeja de imágenes se vea idéntica sin que nadie tenga que pasar nada.
-*/
-var GALLERY_COLUMNS = {
-  image: {
-    template: "0.1fr 1fr 1fr 1fr 1fr 1fr",
-    columns: [{
-      key: "preview",
-      label: "Imagen",
-      className: "image-header"
-    }, {
-      key: "name",
-      label: "Nombre",
-      className: "image-name"
-    }, {
-      key: "size",
-      label: "Tamaño",
-      className: "image-size"
-    }, {
-      key: "format",
-      label: "Formato",
-      className: "image-format"
-    }, {
-      key: "legend",
-      label: "¿Tiene leyenda?",
-      className: "image-description"
-    }, {
-      key: "shotType",
-      label: "Tipo de toma",
-      className: "shoot-type"
-    }]
-  },
-  asset: {
-    template: "0.1fr 1fr 1fr 1fr 1fr",
-    columns: [{
-      key: "preview",
-      label: "Activo",
-      className: "asset-header"
-    }, {
-      key: "name",
-      label: "Nombre",
-      className: "asset-name"
-    }, {
-      key: "weight",
-      label: "Peso",
-      className: "asset-weight"
-    }, {
-      key: "format",
-      label: "Formato",
-      className: "asset-format"
-    }, {
-      key: "assetType",
-      label: "Tipo de activo",
-      className: "asset-type"
-    }]
-  }
-};
-/**
- * Encabezado de la bandeja, con su casilla de "seleccionar todo".
- *
- * `checkAllId` e `itemSelector` se pueden cambiar porque imágenes y activos
- * conviven en la misma pestaña: si las dos listas compartieran el id de la
- * casilla global, marcar todas las imágenes marcaría también los activos.
- */
-
-exports.GALLERY_COLUMNS = GALLERY_COLUMNS;
-
 var GalleryHeader = function GalleryHeader(_ref) {
-  var _GALLERY_COLUMNS$vari;
-
   var setCheckAll = _ref.setCheckAll,
       setSelectedImages = _ref.setSelectedImages,
-      shotThd = _ref.shotThd,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "image" : _ref$variant,
-      columns = _ref.columns,
-      _ref$checkAllId = _ref.checkAllId,
-      checkAllId = _ref$checkAllId === void 0 ? "check-all-images" : _ref$checkAllId,
-      _ref$itemSelector = _ref.itemSelector,
-      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-element-']" : _ref$itemSelector;
-  var preset = (_GALLERY_COLUMNS$vari = GALLERY_COLUMNS[variant]) !== null && _GALLERY_COLUMNS$vari !== void 0 ? _GALLERY_COLUMNS$vari : GALLERY_COLUMNS.image;
-  var visibleColumns = columns !== null && columns !== void 0 ? columns : preset.columns;
+      shotThd = _ref.shotThd;
 
   var checkAll = function checkAll(e) {
-    var checkboxList = document.querySelectorAll(itemSelector);
+    var checkboxList = document.querySelectorAll("[id^='gallery-element-']");
     checkboxList.forEach(function (chk) {
       return chk.checked = e.target.checked;
     });
@@ -110,23 +26,35 @@ var GalleryHeader = function GalleryHeader(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    template: preset.template,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "checkbox",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
-        id: checkAllId,
+        id: "check-all-images",
         onChange: function onChange(e) {
           return checkAll(e);
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "information",
-      children: visibleColumns.map(function (column) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: column.className,
-          children: column.label
-        }, column.key);
-      })
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "image-header",
+        children: "Imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "image-name",
+        children: "Nombre"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "image-size",
+        children: "Tama\xF1o"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "image-format",
+        children: "Formato"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "image-description",
+        children: "\xBFTiene leyenda?"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "shoot-type",
+        children: "Tipo de toma"
+      })]
     })]
   });
 };

package/dist/components/molecules/GalleryHeader/styles.js

@@ -15,9 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    /* Lo define el preset de columnas; el valor por defecto es el de im\xE1genes. */\n    grid-template-columns: ", ";\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), function (_ref) {
-  var template = _ref.template;
-  return template || "0.1fr 1fr 1fr 1fr 1fr 1fr";
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr;\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
 
 exports.Container = Container;

package/dist/components/molecules/ImageSelector/index.js

@@ -24,7 +24,6 @@ var ImageSelector = function ImageSelector(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
         img: image.src,
         altText: image.altText,
-        ext: image.ext,
         imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
         onClick: function onClick() {
           return setActiveImage(index);

package/dist/components/organisms/ImagePreviewer/index.js

@@ -23,7 +23,6 @@ var ImagePreviewer = function ImagePreviewer(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionActiveImage.EditionActiveImage, {
       img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
       altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
-      ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
       setShowModal: setShowModal
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
       images: imagesArray,

package/dist/components/organisms/ProductImageModal/index.js

@@ -26,7 +26,7 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _images$values$active, _images$values$active2, _images$values$active3, _images$values$active4;
+  var _images$values$active, _images$values$active2, _images$values$active3;
 
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
@@ -72,7 +72,6 @@ var ProductImageModal = function ProductImageModal(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
           img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
           altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
-          ext: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.ext,
           imageType: "expanded-modal-image"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -103,7 +102,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
               }
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: images === null || images === void 0 ? void 0 : (_images$values$active4 = images.values[activeImage]) === null || _images$values$active4 === void 0 ? void 0 : _images$values$active4.data,
+            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
             headerInfo: headerInfo,
             activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
             darkMode: true,