contentoh-components-library 21.0.19 → 21.0.22

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

@@ -13,24 +13,30 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _bags = _interopRequireDefault(require("../../../assets/images/generalImage/bags.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var AddProvidersAndProducts = function AddProvidersAndProducts(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       onClick = _ref.onClick,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: className,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "add-bags"
-  }, image && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: altText
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "header-and-paragraph",
-    text: "Comienza agregando Proveedores",
-    Paragraph: "O tambien puedes comenzar agregando tu productos"
-  })));
+    onClick: onClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "add-bags",
+      children: image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: image,
+        alt: altText
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "header-and-paragraph",
+        text: "Comienza agregando Proveedores",
+        Paragraph: "O tambien puedes comenzar agregando tu productos"
+      })
+    })]
+  });
 };
 
 exports.AddProvidersAndProducts = AddProvidersAndProducts;

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

@@ -7,12 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.AssignedWorkDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _assignedImage = _interopRequireDefault(require("../../../assets/images/componentAssigned/assignedImage1.svg"));
 
 var _assignedImage2 = _interopRequireDefault(require("../../../assets/images/componentAssigned/assignedImage2.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var status = ["-", "Pr", "Rc", "As", "P", "QF", "AF", "AA", "AP", "AC", "RA", "RF", "RP", "RC", "Ex"];
 var _default = {
   title: "Components/molecules/AssignedWork",
@@ -29,7 +33,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.AssignedWork, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AssignedWork, (0, _objectSpread2.default)({}, args));
 };
 
 var AssignedWorkDefault = Template.bind({});

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

@@ -17,39 +17,45 @@ var _flag = _interopRequireDefault(require("../../../assets/images/componentAssi
 
 var _index2 = require("../../atoms/Avatar/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var AssignedWork = function AssignedWork(_ref) {
   var statusType = _ref.statusType,
       assignedImage = _ref.assignedImage;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: "status-".concat(statusType)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "header-flag"
-  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "header-and-paragraph",
-    text: "Producto recibido",
-    Paragraph: "Actualizar producto 23441, descripci\xF3n e im\xE1genes"
-  }), /*#__PURE__*/React.createElement("img", {
-    className: "flag",
-    src: _flag.default
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "clock-assigned"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "clock-header"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "clock",
-    src: _clock.default
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "date-header",
-    text: "12/04/2021"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "assigned"
-  }, assignedImage.reverse().map(function (assigned, index) {
-    return index < 2 && /*#__PURE__*/React.createElement(_index2.Avatar, {
-      key: index,
-      image: assigned.image,
-      imageType: "big-image"
-    });
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "status-".concat(statusType),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "header-flag",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+        headerType: "header-and-paragraph",
+        text: "Producto recibido",
+        Paragraph: "Actualizar producto 23441, descripci\xF3n e im\xE1genes"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: "flag",
+        src: _flag.default
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "clock-assigned",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "clock-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: "clock",
+          src: _clock.default
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+          headerType: "date-header",
+          text: "12/04/2021"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "assigned",
+        children: assignedImage.reverse().map(function (assigned, index) {
+          return index < 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Avatar, {
+            image: assigned.image,
+            imageType: "big-image"
+          }, index);
+        })
+      })]
+    })]
+  });
 };
 
 exports.AssignedWork = AssignedWork;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.AvatarAndValidationDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/AvatarAndValidation",
   component: _index.AvatarAndValidation
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.AvatarAndValidation, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AvatarAndValidation, (0, _objectSpread2.default)({}, args));
 };
 
 var AvatarAndValidationDefault = Template.bind({});

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

@@ -21,6 +21,8 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _ValidationPanel = require("../../atoms/ValidationPanel");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 //Components
 var AvatarAndValidation = function AvatarAndValidation(_ref) {
   var avatarData = _ref.avatarData,
@@ -48,21 +50,24 @@ var AvatarAndValidation = function AvatarAndValidation(_ref) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
-    className: "buttons-container"
-  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-    image: avatarData === null || avatarData === void 0 ? void 0 : avatarData.image,
-    altText: avatarData === null || avatarData === void 0 ? void 0 : avatarData.altText
-  }), /*#__PURE__*/React.createElement(_DropDownButton.DropDownButton, null), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "circular-button ".concat(buttonType),
-    onClick: function onClick() {
-      return setShowValidationPanel(true);
-    }
-  })), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
-    id: "validation-panel",
-    setOptionClicked: setButtonType,
-    setShowValidationPanel: setShowValidationPanel
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "buttons-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+        image: avatarData === null || avatarData === void 0 ? void 0 : avatarData.image,
+        altText: avatarData === null || avatarData === void 0 ? void 0 : avatarData.altText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropDownButton.DropDownButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "circular-button ".concat(buttonType),
+        onClick: function onClick() {
+          return setShowValidationPanel(true);
+        }
+      })]
+    }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
+      id: "validation-panel",
+      setOptionClicked: setButtonType,
+      setShowValidationPanel: setShowValidationPanel
+    })]
+  });
 };
 
 exports.AvatarAndValidation = AvatarAndValidation;

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.CarouselImagesLoginDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
@@ -15,6 +17,8 @@ var _login = _interopRequireDefault(require("../../../assets/images/carouselImag
 
 var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/CarouselImagesLogin",
   component: _index.CarouselImagesLogin
@@ -22,7 +26,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.CarouselImagesLogin, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CarouselImagesLogin, (0, _objectSpread2.default)({}, args));
 };
 
 var CarouselImagesLoginDefault = Template.bind({});

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

@@ -13,6 +13,8 @@ var _variables = require("../../../global-files/variables");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
   var _ref$panelImg = _ref.panelImg,
       panelImg = _ref$panelImg === void 0 ? [] : _ref$panelImg,
@@ -20,71 +22,71 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
       panelColor = _ref.panelColor;
 
   var carouselStart = function carouselStart() {
-    addEventListener("DOMContentLoaded", function () {
-      var images = panelImg;
-      var i = 1;
-      var img1 = document.querySelector("#img1");
-      var img2 = document.querySelector("#img2");
-      var divIndicadores = document.querySelector("#indicadores");
-
-      for (var index = 0; index < images.length; index++) {
-        var div = document.createElement("div");
-        div.classList.add("circles");
-        div.id = index;
-        divIndicadores.appendChild(div);
+    var images = panelImg;
+    var i = 1;
+    var img1 = document.querySelector("#img1");
+    var img2 = document.querySelector("#img2");
+    var divIndicadores = document.querySelector("#indicadores");
+
+    for (var index = 0; index < images.length; index++) {
+      var div = document.createElement("div");
+      div.classList.add("circles");
+      div.id = index;
+      divIndicadores.appendChild(div);
+    }
+
+    img1.src = images[0];
+    var circulos = document.querySelectorAll(".circles");
+    circulos[0].classList.add("resaltado");
+
+    var slideshow = function slideshow() {
+      img2.src = images[i];
+      var circulo_actual = Array.from(circulos).find(function (el) {
+        return el.id == i;
+      });
+      Array.from(circulos).forEach(function (cir) {
+        return cir.classList.remove("resaltado");
+      });
+      circulo_actual.classList.add("resaltado");
+      img1.classList.add("right");
+      img2.classList.add("active");
+      i++;
+
+      if (i == images.length) {
+        i = 0;
       }
 
-      img1.src = images[0];
-      var circulos = document.querySelectorAll(".circles");
-      circulos[0].classList.add("resaltado");
-
-      var slideshow = function slideshow() {
-        img2.src = images[i];
-        var circulo_actual = Array.from(circulos).find(function (el) {
-          return el.id == i;
-        });
-        Array.from(circulos).forEach(function (cir) {
-          return cir.classList.remove("resaltado");
-        });
-        circulo_actual.classList.add("resaltado");
-        img1.classList.add("right");
-        img2.classList.add("active");
-        i++;
-
-        if (i == images.length) {
-          i = 0;
-        }
-
-        setTimeout(function () {
-          img1.src = img2.src;
-          img2.classList.remove("active");
-          img1.classList.remove("right");
-        }, 1000);
-      };
-
-      setInterval(slideshow, 4000);
-    });
+      setTimeout(function () {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+
+    setInterval(slideshow, 4000);
   };
 
   (0, _react.useEffect)(function () {
     carouselStart();
   }, []);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    panelColor: panelColor
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "slideshow"
-  }, /*#__PURE__*/React.createElement("img", {
-    id: "img1"
-  }), /*#__PURE__*/React.createElement("img", {
-    id: "img2"
-  })), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    fontFamily: _variables.FontFamily.Raleway,
-    color: _variables.GlobalColors.white,
-    headerType: "product-name-header",
-    text: panelText
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "indicadores"
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    panelColor: panelColor,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: "slideshow",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        id: "img1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        id: "img2"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.Raleway,
+      color: _variables.GlobalColors.white,
+      headerType: "product-name-header",
+      text: panelText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "indicadores"
+    })]
+  });
 };
 
 exports.CarouselImagesLogin = CarouselImagesLogin;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.EditionActiveImageDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/EditionActiveImage",
   component: _.EditionActiveImage
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.EditionActiveImage, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EditionActiveImage, (0, _objectSpread2.default)({}, args));
 };
 
 var EditionActiveImageDefault = Template.bind({});

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

@@ -11,20 +11,24 @@ var _index = require("../../atoms/ProductImage/index");
 
 var _index2 = require("../../atoms/GeneralButton/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var EditionActiveImage = function EditionActiveImage(_ref) {
   var img = _ref.img,
       altText = _ref.altText,
       setShowModal = _ref.setShowModal;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ProductImage, {
-    img: img,
-    imageType: "main-image",
-    altText: altText
-  }), /*#__PURE__*/React.createElement(_index2.Button, {
-    buttonType: "open-modal-button",
-    onClick: function onClick() {
-      return setShowModal(true);
-    }
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
+      img: img,
+      imageType: "main-image",
+      altText: altText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
+      buttonType: "open-modal-button",
+      onClick: function onClick() {
+        return setShowModal(true);
+      }
+    })]
+  });
 };
 
 exports.EditionActiveImage = EditionActiveImage;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FeaturesBarDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/FeaturesBar",
   component: _.FeaturesBar
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_.FeaturesBar, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FeaturesBar, (0, _objectSpread2.default)({}, args));
 };
 
 var FeaturesBarDefault = Template.bind({});

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

@@ -15,6 +15,8 @@ var _index = require("../../atoms/FeatureTag/index");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var FeaturesBar = function FeaturesBar(_ref) {
   var features = _ref.features;
 
@@ -28,15 +30,15 @@ var FeaturesBar = function FeaturesBar(_ref) {
 
     setIsIE(((_window$navigator$use = window.navigator.userAgentString) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.indexOf("MSIE")) > -1 || ((_window$navigator$use2 = window.navigator.userAgentString) === null || _window$navigator$use2 === void 0 ? void 0 : _window$navigator$use2.indexOf("rv:")) > -1);
   }, []);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: isIE ? "IEClass" : "gapClass"
-  }, features !== undefined && features.map(function (feature, index) {
-    return /*#__PURE__*/React.createElement(_index.FeatureTag, {
-      key: index,
-      feature: feature.feature,
-      value: feature.value
-    });
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: isIE ? "IEClass" : "gapClass",
+    children: features !== undefined && features.map(function (feature, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.FeatureTag, {
+        feature: feature.feature,
+        value: feature.value
+      }, index);
+    })
+  });
 };
 
 exports.FeaturesBar = FeaturesBar;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GalleryElementDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/GalleryElement",
   component: _index.GalleryElement,
@@ -20,7 +26,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.GalleryElement, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryElement, (0, _objectSpread2.default)({}, args));
 };
 
 var GalleryElementDefault = Template.bind({});

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

@@ -23,6 +23,8 @@ var _ValidationPanel = require("../../atoms/ValidationPanel");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var GalleryElement = function GalleryElement(_ref) {
   var _ref$validation = _ref.validation,
       validation = _ref$validation === void 0 ? "null-button" : _ref$validation,
@@ -55,35 +57,41 @@ var GalleryElement = function GalleryElement(_ref) {
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: gridLayout ? "grid-gallery" : "row-gallery"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "buttons-container"
-  }, /*#__PURE__*/React.createElement(_CheckBox.CheckBox, (0, _defineProperty2.default)({
-    id: id,
-    label: id
-  }, "label", label)), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "circular-button ".concat(statusValidation),
-    onClick: function onClick() {
-      return setShowValidationPanel(true);
-    }
-  }), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
-    id: "validation-panel",
-    setOptionClicked: setStatusValidation,
-    setShowValidationPanel: setShowValidationPanel
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "image-container"
-  }, /*#__PURE__*/React.createElement(_ProductImage.ProductImage, {
-    img: image === null || image === void 0 ? void 0 : image.src,
-    altText: image === null || image === void 0 ? void 0 : image.altText,
-    imageType: gridLayout ? "catalogue-image-big-size" : "catalogue-image-small-size"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "information-container"
-  }, /*#__PURE__*/React.createElement("p", null, image === null || image === void 0 ? void 0 : image.name), !gridLayout && (image === null || image === void 0 ? void 0 : image.data.map(function (element, index) {
-    return index > 0 && /*#__PURE__*/React.createElement("p", {
-      key: index
-    }, element.value);
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: gridLayout ? "grid-gallery" : "row-gallery",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "buttons-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, (0, _defineProperty2.default)({
+        id: id,
+        label: id
+      }, "label", label)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "circular-button ".concat(statusValidation),
+        onClick: function onClick() {
+          return setShowValidationPanel(true);
+        }
+      }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
+        id: "validation-panel",
+        setOptionClicked: setStatusValidation,
+        setShowValidationPanel: setShowValidationPanel
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "image-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
+        img: image === null || image === void 0 ? void 0 : image.src,
+        altText: image === null || image === void 0 ? void 0 : image.altText,
+        imageType: gridLayout ? "catalogue-image-big-size" : "catalogue-image-small-size"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "information-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: image === null || image === void 0 ? void 0 : image.name
+        }), !gridLayout && (image === null || image === void 0 ? void 0 : image.data.map(function (element, index) {
+          return index > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: element.value
+          }, index);
+        }))]
+      })]
+    })]
+  });
 };
 
 exports.GalleryElement = GalleryElement;