contentoh-components-library 21.6.54 → 21.6.55

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

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-/*
-  Los tamaños replican los de `ProductImage` con los mismos nombres de clase,
-  para que el componente entre donde ya había una imagen sin tocar el layout
-  de la bandeja.
-*/
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  cursor: ", ";\n\n  img,\n  video {\n    object-fit: contain;\n    background: ", ";\n  }\n\n  .asset-fallback {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n    background: ", ";\n    border-radius: 6px;\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 10px;\n      color: ", ";\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      word-break: break-all;\n    }\n  }\n\n  /* Solo aparece cuando el video se muestra sin controles. */\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: ", ";\n    }\n  }\n\n  &:hover .play-badge circle {\n    fill: rgba(0, 0, 0, 0.75);\n  }\n\n  .asset-badge {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    padding: 1px 6px;\n    border-radius: 10px;\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 9px;\n    line-height: 14px;\n    letter-spacing: 0.02em;\n    pointer-events: none;\n  }\n\n  .asset-duration {\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n    padding: 1px 5px;\n    border-radius: 4px;\n    background: rgba(38, 38, 38, 0.75);\n    color: ", ";\n    font-family: ", ";\n    font-size: 9px;\n    line-height: 14px;\n    pointer-events: none;\n  }\n\n  &.carousel-image {\n    .play-badge {\n      width: 22px;\n      height: 22px;\n    }\n\n    img,\n    video,\n    .asset-fallback {\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    .asset-fallback {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    img,\n    video,\n    .asset-fallback {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img,\n    video,\n    .asset-fallback {\n      width: 60px;\n      height: 60px;\n    }\n\n    .asset-badge {\n      font-size: 8px;\n      padding: 0 4px;\n    }\n\n    /* En 60px un badge de 32 tapa el fotograma completo. */\n    .play-badge {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img,\n    video,\n    .asset-fallback {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n\n    img,\n    video,\n    .asset-fallback {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])), function (_ref) {
-  var $clickable = _ref.$clickable;
-  return $clickable ? "pointer" : "default";
-}, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light, _variables.FontFamily.Raleway, _variables.GlobalColors.gray, _variables.GlobalColors.white, _variables.GlobalColors.color_purple, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.white, _variables.FontFamily.Raleway);
-
-exports.Container = Container;

package/dist/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js

@@ -1,147 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Subiendo = exports.Fila = exports.EncabezadosComparados = exports.Cuadricula = exports.ConError = exports.BandejaCompleta = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = require("react");
-
-var _index = require("./index");
-
-var _GalleryHeader = require("../GalleryHeader");
-
-var _assets = require("../../../global-files/digital-assets/assets.adapter");
-
-var _assets2 = require("../../../global-files/digital-assets/assets.mock");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var SAMPLES = {
-  mp4: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
-  gif: "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"
-};
-/* Las claves del mock apuntan a S3, que todavía no tiene nada: se sustituyen
-   por archivos públicos para poder ver el componente. */
-
-var assets = (0, _assets.fromBackendList)(_assets2.backendAssetsMock).map(function (asset) {
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, asset), {}, {
-    url: asset.ext === "mp4" ? SAMPLES.mp4 : asset.ext === "gif" ? SAMPLES.gif : "",
-    poster: ""
-  });
-});
-var _default = {
-  title: "Components/molecules/GalleryAssetElement",
-  component: _index.GalleryAssetElement
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryAssetElement, (0, _objectSpread2.default)({}, args));
-};
-
-var Fila = Template.bind({});
-exports.Fila = Fila;
-Fila.args = {
-  asset: assets[0],
-  index: 0
-};
-var Cuadricula = Template.bind({});
-exports.Cuadricula = Cuadricula;
-Cuadricula.args = {
-  asset: assets[0],
-  index: 0,
-  gridLayout: true
-};
-var Subiendo = Template.bind({});
-exports.Subiendo = Subiendo;
-Subiendo.args = {
-  asset: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, assets[2]), {}, {
-    status: _assets.ASSET_STATUS.UPLOADING,
-    progress: 42
-  }),
-  index: 0
-};
-var ConError = Template.bind({});
-exports.ConError = ConError;
-ConError.args = {
-  asset: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, assets[3]), {}, {
-    status: _assets.ASSET_STATUS.ERROR,
-    error: "No se pudo subir el archivo. Intenta de nuevo."
-  }),
-  index: 0
-};
-/** La bandeja completa con su encabezado: es el uso real del componente. */
-
-var BandejaCompleta = function BandejaCompleta() {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      width: 900
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-      variant: "asset",
-      checkAllId: "check-all-assets",
-      itemSelector: "[id^='gallery-asset-']",
-      setCheckAll: function setCheckAll() {},
-      setSelectedImages: setSelected
-    }), assets.map(function (asset, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryAssetElement, {
-        asset: asset,
-        index: index,
-        selectedAssets: selected,
-        setSelectedAssets: setSelected,
-        setCheckAll: function setCheckAll() {},
-        changeAsset: function changeAsset(_ref) {
-          var value = _ref.value;
-          return console.log("nuevo tipo:", value);
-        },
-        onRemove: function onRemove(item) {
-          return console.log("quitar:", item.name);
-        }
-      }, asset.id);
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      style: {
-        fontFamily: "Lato",
-        fontSize: 12,
-        marginTop: 12
-      },
-      children: ["Seleccionados: ", selected.length]
-    })]
-  });
-};
-/** Comparación de los dos encabezados, para verificar que no se movió el de imágenes. */
-
-
-exports.BandejaCompleta = BandejaCompleta;
-
-var EncabezadosComparados = function EncabezadosComparados() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      width: 900
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-      variant: "image",
-      setCheckAll: function setCheckAll() {},
-      setSelectedImages: function setSelectedImages() {}
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-      variant: "asset",
-      checkAllId: "check-all-assets-demo",
-      itemSelector: "[id^='gallery-asset-demo-']",
-      setCheckAll: function setCheckAll() {},
-      setSelectedImages: function setSelectedImages() {}
-    })]
-  });
-};
-
-exports.EncabezadosComparados = EncabezadosComparados;

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

@@ -1,178 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GalleryAssetElement = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
-var _styles = require("./styles");
-
-var _AssetPreview = require("../../atoms/AssetPreview");
-
-var _CheckBox = require("../../atoms/CheckBox");
-
-var _Select = _interopRequireDefault(require("../../atoms/Select"));
-
-var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
-
-var _assets = require("../../../global-files/digital-assets/assets.adapter");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-/*
-  Fila de un activo digital en la bandeja.
-
-  Es un componente aparte de `GalleryElement` a propósito, no una bifurcación
-  dentro de él. Un activo no comparte casi nada con una imagen de producto: no
-  tiene tipo de toma, ni leyenda, ni panel de validación, ni comparación contra
-  la versión auditable. Meterlo en el mismo archivo habría partido su render en
-  dos mitades y puesto en riesgo la bandeja de imágenes, que ya funciona.
-
-  Lo que sí comparte —rejilla, tamaños, colores— vive en los estilos, calcados
-  de `GalleryElement` para que las dos listas se vean como una sola tabla.
-*/
-var GalleryAssetElement = function GalleryAssetElement(_ref) {
-  var _asset$progress;
-
-  var _ref$asset = _ref.asset,
-      asset = _ref$asset === void 0 ? {} : _ref$asset,
-      _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index,
-      _ref$gridLayout = _ref.gridLayout,
-      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
-      id = _ref.id,
-      label = _ref.label,
-      _ref$selectedAssets = _ref.selectedAssets,
-      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
-      setSelectedAssets = _ref.setSelectedAssets,
-      setCheckAll = _ref.setCheckAll,
-      changeAsset = _ref.changeAsset,
-      onRemove = _ref.onRemove,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$checkAllId = _ref.checkAllId,
-      checkAllId = _ref$checkAllId === void 0 ? "check-all-assets" : _ref$checkAllId,
-      _ref$itemSelector = _ref.itemSelector,
-      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-asset-']" : _ref$itemSelector;
-  var elementId = id || "gallery-asset-".concat(index);
-  var key = (0, _assets.assetKey)(asset);
-  var isUploading = asset.status === _assets.ASSET_STATUS.UPLOADING;
-  var hasError = asset.status === _assets.ASSET_STATUS.ERROR;
-
-  var checkOnChange = function checkOnChange(e) {
-    var chkGlobal = document.getElementById(checkAllId);
-    var checkboxList = document.querySelectorAll(itemSelector);
-    var temp = selectedAssets.slice(); // Se compara por `assetKey` y no por `id`: un activo recién soltado todavía
-    // no tiene id del backend, y comparando por id todos los pendientes serían
-    // "el mismo" y se quitarían juntos de la selección.
-
-    temp = e.target.checked ? [].concat((0, _toConsumableArray2.default)(temp), [asset]) : temp.filter(function (item) {
-      return (0, _assets.assetKey)(item) !== key;
-    });
-    var counter = 0;
-    checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.forEach(function (chk) {
-      return chk.checked && counter++;
-    });
-    if (chkGlobal) chkGlobal.checked = checkboxList.length === counter;
-    setCheckAll === null || setCheckAll === void 0 ? void 0 : setCheckAll(checkboxList.length === counter);
-    setSelectedAssets === null || setSelectedAssets === void 0 ? void 0 : setSelectedAssets(temp);
-  };
-  /*
-    Abrir el activo en otra pestaña.
-     Sirve para TODOS los tipos y por eso se prefiere a un visor propio: un video
-    se reproduce con el reproductor del navegador, un PDF se abre, y un .psd se
-    descarga. Sin esto, la bandeja mostraba el archivo pero no había forma de
-    verlo — un video quedaba como un fotograma fijo sin botón de reproducir.
-     Solo cuando ya está en S3: un activo recién soltado apunta al archivo del
-    disco del usuario y abrirlo no le diría nada nuevo.
-  */
-
-
-  var abrir = function abrir() {
-    if (!asset.id || !asset.url) return;
-    window.open(asset.url, "_blank", "noopener,noreferrer");
-  };
-
-  var onChangeType = function onChangeType(e) {
-    changeAsset === null || changeAsset === void 0 ? void 0 : changeAsset({
-      action: "changeAssetInfo",
-      attribute: "assetType",
-      value: e.target.value,
-      index: index
-    });
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(hasError ? "asset-error" : "").trim(),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "buttons-container",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
-        id: elementId,
-        label: label,
-        onChange: checkOnChange
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "asset-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AssetPreview.AssetPreview, {
-        asset: asset,
-        size: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
-        /*
-          En cuadrícula hay sitio para el reproductor; en la fila, de 60px,
-          los controles no caben y estorban al clic.
-        */
-        ,
-        controls: gridLayout && (0, _assetTypes.resolvePreviewKind)(asset) === _assetTypes.ASSET_PREVIEW.VIDEO,
-        onClick: abrir
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "information-container",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: asset.id ? "asset-name asset-link" : "asset-name",
-          title: asset.id ? "Abrir ".concat(asset.name) : asset.name,
-          onClick: abrir,
-          children: asset.name
-        }), !gridLayout && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            className: "asset-weight",
-            children: (0, _assetTypes.formatBytes)(asset.sizeBytes)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            className: "asset-format",
-            children: (asset.ext || "").toUpperCase()
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-            width: "100%",
-            placeholder: "Tipo de activo",
-            options: (0, _assetTypes.assetTypeOptions)(),
-            valueSelected: asset.assetType,
-            onChange: onChangeType,
-            className: readOnly ? "disabled" : ""
-          })]
-        })]
-      })]
-    }), isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "asset-progress",
-      "aria-label": "Subiendo activo",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "asset-progress-fill",
-        style: {
-          width: "".concat(Math.min(100, Math.max(0, (_asset$progress = asset.progress) !== null && _asset$progress !== void 0 ? _asset$progress : 0)), "%")
-        }
-      })
-    }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "asset-error-message",
-      children: asset.error
-    }), onRemove && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      className: "asset-remove",
-      onClick: function onClick() {
-        return onRemove(asset);
-      },
-      title: "Quitar activo",
-      children: "\xD7"
-    })]
-  });
-};
-
-exports.GalleryAssetElement = GalleryAssetElement;

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

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-/*
-  Calcado de `GalleryElement/styles.js` para que imágenes y activos se lean como
-  una sola tabla. Cambia solo la rejilla de la fila —cuatro columnas en vez de
-  cinco, porque un activo no tiene leyenda— y lo propio de un archivo que se
-  está subiendo: barra de progreso, mensaje de error y botón de quitar.
-*/
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.grid-gallery {\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 5px;\n      left: 5px;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 0.05fr 1fr;\n    align-items: center;\n    padding-right: 10px;\n\n    .buttons-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      flex: 1;\n\n      .information-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        align-items: center;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        & > * {\n          flex: 1;\n          padding: 5px;\n        }\n      }\n    }\n  }\n\n  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */\n  .asset-link {\n    cursor: pointer;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  &.asset-error {\n    border: 1px solid ", ";\n    border-radius: 3px;\n  }\n\n  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el\n     resto del contenido mientras aparece y desaparece. */\n  .asset-progress {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 3px;\n    background: ", ";\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .asset-progress-fill {\n    height: 100%;\n    background: ", ";\n    transition: width 0.2s ease-out;\n  }\n\n  .asset-error-message {\n    margin: 2px 0 0;\n    padding: 0 8px;\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 15px;\n    color: ", ";\n  }\n\n  .asset-remove {\n    position: absolute;\n    top: 4px;\n    right: 6px;\n    width: 18px;\n    height: 18px;\n    display: grid;\n    place-items: center;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 1;\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.color_purple, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Lato, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
-
-exports.Container = Container;

package/dist/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SinActivos = exports.Interactivo = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _react = require("react");
-
-var _index = require("./index");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var _default = {
-  title: "Components/molecules/GalleryTrayTabs",
-  component: _index.GalleryTrayTabs
-};
-exports.default = _default;
-
-var Interactivo = function Interactivo() {
-  var _useState = (0, _react.useState)(_index.TRAYS.IMAGES),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      tray = _useState2[0],
-      setTray = _useState2[1];
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
-    activeTray: tray,
-    setActiveTray: setTray,
-    imagesCount: 8,
-    assetsCount: 3
-  });
-};
-/** Estado real hasta que exista el backend: la bandeja de activos en cero. */
-
-
-exports.Interactivo = Interactivo;
-
-var SinActivos = function SinActivos() {
-  var _useState3 = (0, _react.useState)(_index.TRAYS.IMAGES),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      tray = _useState4[0],
-      setTray = _useState4[1];
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
-    activeTray: tray,
-    setActiveTray: setTray,
-    imagesCount: 8,
-    assetsCount: 0
-  });
-};
-
-exports.SinActivos = SinActivos;

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

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TRAYS = exports.GalleryTrayTabs = void 0;
-
-var _styles = require("./styles");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var TRAYS = {
-  IMAGES: "images",
-  ASSETS: "assets"
-};
-/**
- * Selector entre las dos bandejas de la pestaña Imágenes.
- *
- * Los activos viven aquí y no en una pestaña propia porque es lo que pide la
- * tarea —"dentro de las bandejas de imágenes"— y porque así comparten
- * selección, descarga y permisos con las fotos en vez de duplicarlos.
- */
-
-exports.TRAYS = TRAYS;
-
-var GalleryTrayTabs = function GalleryTrayTabs(_ref) {
-  var _ref$activeTray = _ref.activeTray,
-      activeTray = _ref$activeTray === void 0 ? TRAYS.IMAGES : _ref$activeTray,
-      setActiveTray = _ref.setActiveTray,
-      _ref$imagesCount = _ref.imagesCount,
-      imagesCount = _ref$imagesCount === void 0 ? 0 : _ref$imagesCount,
-      _ref$assetsCount = _ref.assetsCount,
-      assetsCount = _ref$assetsCount === void 0 ? 0 : _ref$assetsCount;
-  var trays = [{
-    id: TRAYS.IMAGES,
-    label: "Imágenes",
-    count: imagesCount
-  }, {
-    id: TRAYS.ASSETS,
-    label: "Activos digitales",
-    count: assetsCount
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: trays.map(function (tray) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        type: "button",
-        className: tray.id === activeTray ? "tray-tab active" : "tray-tab",
-        onClick: function onClick() {
-          return setActiveTray === null || setActiveTray === void 0 ? void 0 : setActiveTray(tray.id);
-        },
-        children: [tray.label, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "tray-count",
-          children: tray.count
-        })]
-      }, tray.id);
-    })
-  });
-};
-
-exports.GalleryTrayTabs = GalleryTrayTabs;

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

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-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  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 0 0;\n\n  .tray-tab {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: none;\n    border-bottom: 2px solid transparent;\n    background: none;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.active {\n      color: ", ";\n      font-weight: 600;\n      border-bottom-color: ", ";\n    }\n  }\n\n  .tray-count {\n    min-width: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 18px;\n    text-align: center;\n  }\n\n  .active .tray-count {\n    background: ", ";\n    color: ", ";\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.s5, _variables.GlobalColors.s5, _variables.GlobalColors.color_purple, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.FontFamily.Lato, _variables.GlobalColors.color_purple, _variables.GlobalColors.white);
-
-exports.Container = Container;