contentoh-components-library 8.0.0 → 10.0.1

package/dist/components/organisms/GlobalModal/styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = exports.MessageContainer = exports.Message = exports.MainContainer = exports.Icon = exports.Header = exports.FirstButton = exports.Detail = exports.ContainerButtons = exports.Close = exports.Button = exports.BoldText = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+var MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #281f3366;\n  z-index: 15;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+
+exports.MainContainer = MainContainer;
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  justify-content: center;\n"])));
+
+exports.Header = Header;
+
+var MessageContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  padding: 40px 20px;\n  box-sizing: border-box;\n  width: 600px;\n  min-height: ", ";\n  background: #281f33;\n  border-radius: 39px;\n"])), function (props) {
+  return props.height ? "300px" : "190px";
+});
+
+exports.MessageContainer = MessageContainer;
+
+var TextArea = _styledComponents.default.textarea(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  width: 479px;\n  height: 84px;\n  background: #f0eef2;\n  border-radius: 4px;\n  color: #817393;\n  margin-bottom: 10px;\n"])));
+
+exports.TextArea = TextArea;
+
+var Close = _styledComponents.default.figure(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  cursor: pointer;\n  right: 45px;\n  > img {\n    width: 14px;\n    height: 14px;\n  }\n"])));
+
+exports.Close = Close;
+
+var Icon = _styledComponents.default.figure(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 10px;\n  height: ", ";\n  > img {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+  return props.heightImg && props.heightImg;
+}, function (props) {
+  return props.widthImg ? props.widthImg : "85px";
+}, function (props) {
+  return props.heightImg ? props.heightImg : "85px";
+});
+
+exports.Icon = Icon;
+
+var BoldText = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n"])));
+
+exports.BoldText = BoldText;
+
+var Message = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-family: Raleway;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 24px;\n  text-align: center;\n  color: #f7f7f7;\n  margin: 20px 0px;\n"])));
+
+exports.Message = Message;
+
+var ContainerButtons = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-around;\n"])));
+
+exports.ContainerButtons = ContainerButtons;
+
+var FirstButton = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  padding: 0 40px;\n  border: 1px solid #f0eef2;\n  box-sizing: border-box;\n  border-radius: 30px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  color: #f0eef2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n"])));
+
+exports.FirstButton = FirstButton;
+var Button = (0, _styledComponents.default)(FirstButton)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border: 0;\n  background: #e33aa9;\n  cursor: pointer;\n"])));
+exports.Button = Button;
+var Detail = (0, _styledComponents.default)(Message)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: bold;\n  font-size: 18px;\n  white-space: normal;\n"])));
+exports.Detail = Detail;

package/dist/components/organisms/ImageDataTable/ImageDataTable.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.ImageDataTableDefault = 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/organisms/ImageDataTable",
   component: _index.ImageDataTable
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ImageDataTable, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImageDataTable, (0, _objectSpread2.default)({}, args));
 };
 
 var ImageDataTableDefault = Template.bind({});

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

@@ -17,6 +17,8 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _LabelToInput = _interopRequireDefault(require("../../atoms/LabelToInput"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ImageDataTable = function ImageDataTable(_ref) {
   var _lists$inputs, _lists$inputs$find, _lists$imagePackaging, _lists$imagePackaging2, _lists$imageType, _lists$imageType$find, _lists$attrForImgs$re;
 
@@ -26,68 +28,89 @@ var ImageDataTable = function ImageDataTable(_ref) {
       retailerSelected = _ref.retailerSelected,
       setImages = _ref.setImages,
       assignationsImages = _ref.assignationsImages,
-      imagesStatus = _ref.imagesStatus;
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    darkMode: darkMode
-  }, /*#__PURE__*/React.createElement(_TableHeader.TableHeader, {
-    imagesStatus: imagesStatus,
-    activeImage: activeImage,
-    assignationsImages: assignationsImages
-  }), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "Tipo de toma"
-  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text gray-table-row",
-    text: 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
-  })), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "Tipo de empaque"
-  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text gray-table-row",
-    text: lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
-      return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
-    })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name
-  })), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "Tipo de imagen"
-  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text gray-table-row",
-    text: lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
-      return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_type);
-    })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name
-  })), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "Formato"
-  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext
-  })), /*#__PURE__*/React.createElement(_styles2.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "Tama\xF1o de imagen"
-  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "table-row-text",
-    text: "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px")
-  })), retailerSelected && (lists === null || lists === void 0 ? void 0 : lists.attrForImgs) && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs$re = lists.attrForImgs[retailerSelected]) === null || _lists$attrForImgs$re === void 0 ? void 0 : _lists$attrForImgs$re.map(function (attr, index) {
-    return /*#__PURE__*/React.createElement(_styles2.Container, {
-      key: "row-" + index
-    }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-      headerType: "table-row-text",
-      text: attr === null || attr === void 0 ? void 0 : attr.name
-    }), /*#__PURE__*/React.createElement(_LabelToInput.default, {
-      width: "100px",
-      defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
-      onChange: function onChange(e) {
-        setImages({
-          action: "changeAttrValue",
-          retailer: retailerSelected,
-          index: index,
-          value: e.target.value
-        });
-      }
-    }));
-  })));
+      imagesStatus = _ref.imagesStatus,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      onClickSave = _ref.onClickSave,
+      showSaveButton = _ref.showSaveButton;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    darkMode: darkMode,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader.TableHeader, {
+      imagesStatus: imagesStatus,
+      activeImage: activeImage,
+      assignationsImages: assignationsImages,
+      setAssignation: setAssignation,
+      isRetailer: isRetailer,
+      showSaveButton: showSaveButton,
+      onClickSave: onClickSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de toma"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (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) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de empaque"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imagePackaging = lists.imagePackagingType) === null || _lists$imagePackaging === void 0 ? void 0 : (_lists$imagePackaging2 = _lists$imagePackaging.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.packing_type);
+        })) === null || _lists$imagePackaging2 === void 0 ? void 0 : _lists$imagePackaging2.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tipo de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text gray-table-row",
+        text: (lists === null || lists === void 0 ? void 0 : (_lists$imageType = lists.imageType) === null || _lists$imageType === void 0 ? void 0 : (_lists$imageType$find = _lists$imageType.find(function (f) {
+          return f.id === +(activeImage === null || activeImage === void 0 ? void 0 : activeImage.image_type);
+        })) === null || _lists$imageType$find === void 0 ? void 0 : _lists$imageType$find.name) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Formato"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: (activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext) || "-"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: "Tama\xF1o de imagen"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        headerType: "table-row-text",
+        text: activeImage !== null && activeImage !== void 0 && activeImage.width && activeImage.height ? "".concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.width, "x").concat(activeImage === null || activeImage === void 0 ? void 0 : activeImage.height, "px") : "-"
+      })]
+    }), retailerSelected && (lists === null || lists === void 0 ? void 0 : lists.attrForImgs) && (lists === null || lists === void 0 ? void 0 : (_lists$attrForImgs$re = lists.attrForImgs[retailerSelected]) === null || _lists$attrForImgs$re === void 0 ? void 0 : _lists$attrForImgs$re.map(function (attr, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.Container, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "table-row-text",
+          text: (attr === null || attr === void 0 ? void 0 : attr.name) || "-"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelToInput.default, {
+          width: "100px",
+          defaultValue: attr === null || attr === void 0 ? void 0 : attr.value,
+          onChange: function onChange(e) {
+            setImages({
+              action: "changeAttrValue",
+              retailer: retailerSelected,
+              index: index,
+              value: e.target.value || "-",
+              name: attr.name,
+              retailersId: Object.keys(lists.attrForImgs).slice(0, -1)
+            });
+          }
+        })]
+      }, "row-" + index + "-" + (attr === null || attr === void 0 ? void 0 : attr.name));
+    }))]
+  });
 };
 
 exports.ImageDataTable = ImageDataTable;

package/dist/components/organisms/ImagePreviewer/ImagePreviewer.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.ImagePreviewerDefault = 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/organisms/ImagePreviewer",
   component: _index.ImagePreviewer
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ImagePreviewer, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ImagePreviewer, (0, _objectSpread2.default)({}, args));
 };
 
 var ImagePreviewerDefault = Template.bind({});

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

@@ -11,20 +11,24 @@ var _EditionActiveImage = require("../../molecules/EditionActiveImage");
 
 var _ImageSelector = require("../../molecules/ImageSelector");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ImagePreviewer = function ImagePreviewer(_ref) {
   var _ref$imagesArray = _ref.imagesArray,
       imagesArray = _ref$imagesArray === void 0 ? [] : _ref$imagesArray,
       activeImage = _ref.activeImage,
       setActiveImage = _ref.setActiveImage,
       setShowModal = _ref.setShowModal;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_EditionActiveImage.EditionActiveImage, {
-    img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
-    altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
-    setShowModal: setShowModal
-  }), /*#__PURE__*/React.createElement(_ImageSelector.ImageSelector, {
-    images: imagesArray,
-    setActiveImage: setActiveImage
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    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,
+      setShowModal: setShowModal
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
+      images: imagesArray,
+      setActiveImage: setActiveImage
+    })]
+  });
 };
 
 exports.ImagePreviewer = ImagePreviewer;

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

@@ -13,9 +13,13 @@ var _styles = require("./styles");
 
 var _GalleryElement = require("../../molecules/GalleryElement");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ImagesGroup = function ImagesGroup(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_GalleryElement.GalleryElement, null));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {})
+  });
 };
 
 exports.ImagesGroup = ImagesGroup;

package/dist/components/organisms/InputGroup/InputGroup.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.InputGroupDefault = 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/organisms/InputGroup",
   component: _index.InputGroup,
@@ -22,7 +28,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.InputGroup, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputGroup, (0, _objectSpread2.default)({}, args));
 };
 
 var InputGroupDefault = Template.bind({});

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

@@ -11,6 +11,8 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _TagAndInput = require("../../molecules/TagAndInput");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var InputGroup = function InputGroup(_ref) {
   var _inputGroup$inputs;
 
@@ -40,44 +42,49 @@ var InputGroup = function InputGroup(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout"
-  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-    headerType: "retailer-name-header",
-    text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "inputs-container"
-  }, inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-    var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
+    children: [(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      headerType: "retailer-name-header",
+      text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "inputs-container",
+      children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
+        var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12;
 
-    return activeSection === "Ficha técnica" ? /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
-      key: index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value),
-      inputId: (_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id,
-      version: version,
-      inputType: inputTypeValue((_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.type),
-      label: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.name,
-      value: (_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.value,
-      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
-      articleId: articleId,
-      isRequired: (_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.required,
-      updatedDatasheets: updatedDatasheets,
-      setUpdatedDatasheets: setUpdatedDatasheets
-    }) : /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
-      key: index + "-" + (input === null || input === void 0 ? void 0 : input.value),
-      inputId: input === null || input === void 0 ? void 0 : input.id,
-      index: index,
-      inputType: "textarea",
-      label: input === null || input === void 0 ? void 0 : input.name,
-      value: input === null || input === void 0 ? void 0 : input.value,
-      isRequired: input.required,
-      inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
-      updatedDescriptions: updatedDescriptions,
-      setUpdatedDescriptions: setUpdatedDescriptions,
-      articleId: articleId,
-      version: version,
-      dinamicHeight: dinamicHeight
-    });
-  })));
+        return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputId: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.id,
+          version: version,
+          inputType: inputTypeValue((_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.type),
+          label: ((_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.name) + ((_dataInputs$input6 = dataInputs[input]) !== null && _dataInputs$input6 !== void 0 && _dataInputs$input6.required ? "*" : ""),
+          value: (_dataInputs$input7 = dataInputs[input]) === null || _dataInputs$input7 === void 0 ? void 0 : _dataInputs$input7.value,
+          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+          articleId: articleId,
+          isRequired: (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.required,
+          updatedDatasheets: updatedDatasheets,
+          setUpdatedDatasheets: setUpdatedDatasheets,
+          maxChar: (_dataInputs$input9 = dataInputs[input]) !== null && _dataInputs$input9 !== void 0 && _dataInputs$input9.max_chars ? (_dataInputs$input10 = dataInputs[input]) === null || _dataInputs$input10 === void 0 ? void 0 : _dataInputs$input10.max_chars : 999,
+          optionList: (_dataInputs$input11 = dataInputs[input]) === null || _dataInputs$input11 === void 0 ? void 0 : _dataInputs$input11.option_list,
+          description: (_dataInputs$input12 = dataInputs[input]) === null || _dataInputs$input12 === void 0 ? void 0 : _dataInputs$input12.description
+        }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+          inputId: input.id,
+          index: index,
+          inputType: "textarea",
+          label: (input === null || input === void 0 ? void 0 : input.name) + (input.required ? "*" : ""),
+          value: input === null || input === void 0 ? void 0 : input.value,
+          isRequired: input.required,
+          maxChar: input.max_chars,
+          inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+          updatedDescriptions: updatedDescriptions,
+          setUpdatedDescriptions: setUpdatedDescriptions,
+          articleId: articleId,
+          version: version,
+          dinamicHeight: dinamicHeight,
+          description: input === null || input === void 0 ? void 0 : input.description
+        }, index + "-" + (input === null || input === void 0 ? void 0 : input.value));
+      })
+    })]
+  });
 };
 
 exports.InputGroup = InputGroup;

package/dist/components/organisms/InputGroup/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n\n      .input-container {\n        flex: 1 1 20%;\n        margin-right: 10px;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: 6px;\n  padding: 10px;\n  width: 100%;\n\n  .retailer-name-header {\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  &.datasheets-layout {\n    padding-right: 0;\n\n    .inputs-container {\n      display: flex;\n      flex-wrap: wrap;\n      width: 100%;\n      gap: 5px;\n\n      .input-container {\n        flex: 1 1 20%;\n        min-width: 227px;\n        display: flex;\n        flex-direction: column;\n      }\n    }\n  }\n\n  & + * {\n    margin-top: 15px;\n  }\n"])), _variables.GlobalColors.s2);
 
 exports.Container = Container;

package/dist/components/organisms/ProductImageModal/ProductImageModal.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.ProductImageModalDefault = 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/organisms/ProductImageModal",
   component: _index.ProductImageModal
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ProductImageModal, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModal, (0, _objectSpread2.default)({}, args));
 };
 
 var ProductImageModalDefault = Template.bind({});