contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,73 @@
+"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,
+  argTypes: {
+    activeSection: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputGroup, (0, _objectSpread2.default)({}, args));
+};
+
+var InputGroupDefault = Template.bind({});
+exports.InputGroupDefault = InputGroupDefault;
+InputGroupDefault.args = {
+  inputGroup: {
+    name: "Información básica del producto",
+    inputs: [{
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }]
+  }
+};

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

@@ -0,0 +1,329 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputGroup = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _BoxOnboarding = require("../BoxOnboarding");
+
+var _Box = require("../Box");
+
+var _react = require("react");
+
+var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _Tooltip = require("../../atoms/Tooltip");
+
+var _system = require("@mui/system");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var InputGroup = function InputGroup(_ref) {
+  var _activeRetailer$retai3, _inputGroup$inputs, _activeRetailer$retai4, _inputGroup$inputs2;
+
+  var _ref$inputGroup = _ref.inputGroup,
+      inputGroup = _ref$inputGroup === void 0 ? {} : _ref$inputGroup,
+      auditInputGroup = _ref.auditInputGroup,
+      activeSection = _ref.activeSection,
+      _ref$dataInputs = _ref.dataInputs,
+      dataInputs = _ref$dataInputs === void 0 ? {} : _ref$dataInputs,
+      _ref$auditInputs = _ref.auditInputs,
+      auditInputs = _ref$auditInputs === void 0 ? {} : _ref$auditInputs,
+      updatedDescriptions = _ref.updatedDescriptions,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      updatedDatasheets = _ref.updatedDatasheets,
+      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
+      articleId = _ref.articleId,
+      version = _ref.version,
+      dinamicHeight = _ref.dinamicHeight,
+      compare = _ref.compare,
+      _ref$groupData = _ref.groupData,
+      groupData = _ref$groupData === void 0 ? [] : _ref$groupData,
+      setUpdatedBoxData = _ref.setUpdatedBoxData,
+      activeRetailer = _ref.activeRetailer,
+      updateApprovedInputs = _ref.updateApprovedInputs;
+
+  var InputReviewSection = function InputReviewSection(_ref2) {
+    var inputId = _ref2.inputId,
+        isApproved = _ref2.isApproved,
+        comment = _ref2.comment,
+        handleImgClick = _ref2.handleImgClick,
+        changeImageBtn = _ref2.changeImageBtn,
+        showDivState = _ref2.showDivState,
+        imageStates = _ref2.imageStates;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        "margin-top": "10px"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+              children: "Comentarios:"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: comment
+          })]
+        }),
+        children: !isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: imageStates[inputId] ? _acceptIcon.default : _rejectIcon.default,
+          alt: "botón rechazar",
+          style: {
+            cursor: "pointer"
+          },
+          onClick: function onClick() {
+            return handleImgClick(inputId);
+          }
+        }),
+        classNameTooltip: "container-tooltip"
+      }), showDivState[inputId] && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "btnReviewState",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+            id: "aceptbtn",
+            onClick: function onClick() {
+              return changeImageBtn(inputId, "validate");
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _acceptIcon.default,
+              alt: "acept button",
+              style: {
+                cursor: "pointer"
+              }
+            }), "Validar"]
+          })
+        })
+      })]
+    });
+  };
+
+  var inputTypeValue = function inputTypeValue(type) {
+    switch (type) {
+      case "Booleano":
+        return "checkbox";
+
+      case "Numérico":
+        return "number";
+
+      default:
+        return "text";
+    }
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showBox = _useState2[0],
+      setShowBox = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showDivStates = _useState4[0],
+      setShowDivStates = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      imageStates = _useState6[0],
+      setImageStates = _useState6[1];
+
+  var handleImgClick = function handleImgClick(inputId) {
+    setShowDivStates(function (prevStates) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevStates), {}, (0, _defineProperty2.default)({}, inputId, !prevStates[inputId]));
+    });
+  };
+
+  var changeImageBtn = function changeImageBtn(inputId, action) {
+    setImageStates(function (prevStates) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevStates), {}, (0, _defineProperty2.default)({}, inputId, action === "validate"));
+    });
+    updateApprovedInputs(inputId);
+  };
+
+  var isEquals = function isEquals(dataInputsVal, auditInputsVal) {
+    var result = dataInputsVal === auditInputsVal;
+    return result;
+  };
+
+  (0, _react.useEffect)(function () {
+    var _activeRetailer$retai;
+
+    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer !== null && activeRetailer !== void 0 && (_activeRetailer$retai = activeRetailer.retailer) !== null && _activeRetailer$retai !== void 0 && _activeRetailer$retai.id) {
+      var _activeRetailer$retai2;
+
+      if ((activeRetailer === null || activeRetailer === void 0 ? void 0 : (_activeRetailer$retai2 = activeRetailer.retailer) === null || _activeRetailer$retai2 === void 0 ? void 0 : _activeRetailer$retai2.id) === 68) {
+        setShowBox(true);
+      } else {
+        setShowBox(false);
+      }
+    }
+  }, [activeRetailer, inputGroup.groupId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [inputGroup.groupId === "16" && (activeRetailer === null || activeRetailer === void 0 ? void 0 : (_activeRetailer$retai3 = activeRetailer.retailer) === null || _activeRetailer$retai3 === void 0 ? void 0 : _activeRetailer$retai3.id) === 68 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
+        inputGroup: inputGroup,
+        dataInputs: dataInputs,
+        onChange: setUpdatedBoxData
+      })
+    }), inputGroup.groupId !== "16" && /*#__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: "".concat(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, _auditInputs$input, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12, _dataInputs$input13, _dataInputs$input14, _dataInputs$input15, _dataInputs$input16, _dataInputs$input17, _auditInputGroup$inpu, _auditInputGroup$inpu2;
+
+          return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+              //disabled={input === 40001}
+              disabled: (_dataInputs$input3 = dataInputs[input]) === null || _dataInputs$input3 === void 0 ? void 0 : _dataInputs$input3.isApproved,
+              inputId: (_dataInputs$input4 = dataInputs[input]) === null || _dataInputs$input4 === void 0 ? void 0 : _dataInputs$input4.id,
+              version: version,
+              inputType: inputTypeValue((_dataInputs$input5 = dataInputs[input]) === null || _dataInputs$input5 === void 0 ? void 0 : _dataInputs$input5.type),
+              label: ((_dataInputs$input6 = dataInputs[input]) === null || _dataInputs$input6 === void 0 ? void 0 : _dataInputs$input6.name) + ((_dataInputs$input7 = dataInputs[input]) !== null && _dataInputs$input7 !== void 0 && _dataInputs$input7.required ? "*" : ""),
+              value: compare ? (_auditInputs$input = auditInputs[input]) === null || _auditInputs$input === void 0 ? void 0 : _auditInputs$input.value : (_dataInputs$input8 = dataInputs[input]) === null || _dataInputs$input8 === void 0 ? void 0 : _dataInputs$input8.value,
+              inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+              articleId: articleId,
+              isRequired: (_dataInputs$input9 = dataInputs[input]) === null || _dataInputs$input9 === void 0 ? void 0 : _dataInputs$input9.required,
+              updatedDatasheets: updatedDatasheets,
+              setUpdatedDatasheets: setUpdatedDatasheets,
+              maxChar: (_dataInputs$input10 = dataInputs[input]) !== null && _dataInputs$input10 !== void 0 && _dataInputs$input10.max_chars ? (_dataInputs$input11 = dataInputs[input]) === null || _dataInputs$input11 === void 0 ? void 0 : _dataInputs$input11.max_chars : 999,
+              optionList: (_dataInputs$input12 = dataInputs[input]) === null || _dataInputs$input12 === void 0 ? void 0 : _dataInputs$input12.option_list,
+              description: (_dataInputs$input13 = dataInputs[input]) === null || _dataInputs$input13 === void 0 ? void 0 : _dataInputs$input13.description,
+              showTooltip: true,
+              auditClass: compare && !isEquals(dataInputs[input].value, auditInputs[input].value) ? "audit-class" : ""
+            }, 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) + "-" + compare), ((_dataInputs$input14 = dataInputs[input]) === null || _dataInputs$input14 === void 0 ? void 0 : _dataInputs$input14.isApproved) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputReviewSection, {
+              inputId: (_dataInputs$input15 = dataInputs[input]) === null || _dataInputs$input15 === void 0 ? void 0 : _dataInputs$input15.id,
+              isApproved: (_dataInputs$input16 = dataInputs[input]) === null || _dataInputs$input16 === void 0 ? void 0 : _dataInputs$input16.isApproved,
+              comment: (_dataInputs$input17 = dataInputs[input]) === null || _dataInputs$input17 === void 0 ? void 0 : _dataInputs$input17.comment,
+              handleImgClick: handleImgClick,
+              changeImageBtn: changeImageBtn,
+              showDivState: showDivStates,
+              imageStates: imageStates
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [(input === null || input === void 0 ? void 0 : input.isApproved) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputReviewSection, {
+              inputId: input === null || input === void 0 ? void 0 : input.id,
+              isApproved: input === null || input === void 0 ? void 0 : input.isApproved,
+              comment: input === null || input === void 0 ? void 0 : input.comment,
+              handleImgClick: handleImgClick,
+              changeImageBtn: changeImageBtn,
+              showDivState: showDivStates,
+              imageStates: imageStates
+            }), /*#__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: compare ? auditInputGroup === null || auditInputGroup === void 0 ? void 0 : (_auditInputGroup$inpu = auditInputGroup.inputs[index]) === null || _auditInputGroup$inpu === void 0 ? void 0 : _auditInputGroup$inpu.value : input === null || input === void 0 ? void 0 : input.value,
+              isRequired: input.required,
+              disabled: input === null || input === void 0 ? void 0 : input.isApproved,
+              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,
+              showTooltip: true,
+              auditClass: compare && !isEquals(input === null || input === void 0 ? void 0 : input.value, auditInputGroup === null || auditInputGroup === void 0 ? void 0 : (_auditInputGroup$inpu2 = auditInputGroup.inputs[index]) === null || _auditInputGroup$inpu2 === void 0 ? void 0 : _auditInputGroup$inpu2.value) ? "audit-class" : ""
+            }, index + "-" + (input === null || input === void 0 ? void 0 : input.value) + "-" + compare)]
+          });
+        })
+      })]
+    }), inputGroup.groupId === "16" && (activeRetailer === null || activeRetailer === void 0 ? void 0 : (_activeRetailer$retai4 = activeRetailer.retailer) === null || _activeRetailer$retai4 === void 0 ? void 0 : _activeRetailer$retai4.id) === 74 && /*#__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: "".concat(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$inputs2 = inputGroup.inputs) === null || _inputGroup$inputs2 === void 0 ? void 0 : _inputGroup$inputs2.map(function (input, index) {
+          var _dataInputs$input18, _dataInputs$input19, _dataInputs$input20, _dataInputs$input21, _dataInputs$input22, _dataInputs$input23, _dataInputs$input24, _auditInputs$input2, _dataInputs$input25, _dataInputs$input26, _dataInputs$input27, _dataInputs$input28, _dataInputs$input29, _dataInputs$input30, _dataInputs$input31, _dataInputs$input32, _dataInputs$input33, _dataInputs$input34, _auditInputGroup$inpu3, _auditInputGroup$inpu4;
+
+          return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+              //disabled={input === 40001}
+              disabled: (_dataInputs$input20 = dataInputs[input]) === null || _dataInputs$input20 === void 0 ? void 0 : _dataInputs$input20.isApproved,
+              inputId: (_dataInputs$input21 = dataInputs[input]) === null || _dataInputs$input21 === void 0 ? void 0 : _dataInputs$input21.id,
+              version: version,
+              inputType: inputTypeValue((_dataInputs$input22 = dataInputs[input]) === null || _dataInputs$input22 === void 0 ? void 0 : _dataInputs$input22.type),
+              label: ((_dataInputs$input23 = dataInputs[input]) === null || _dataInputs$input23 === void 0 ? void 0 : _dataInputs$input23.name) + ((_dataInputs$input24 = dataInputs[input]) !== null && _dataInputs$input24 !== void 0 && _dataInputs$input24.required ? "*" : ""),
+              value: compare ? (_auditInputs$input2 = auditInputs[input]) === null || _auditInputs$input2 === void 0 ? void 0 : _auditInputs$input2.value : (_dataInputs$input25 = dataInputs[input]) === null || _dataInputs$input25 === void 0 ? void 0 : _dataInputs$input25.value,
+              inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
+              articleId: articleId,
+              isRequired: (_dataInputs$input26 = dataInputs[input]) === null || _dataInputs$input26 === void 0 ? void 0 : _dataInputs$input26.required,
+              updatedDatasheets: updatedDatasheets,
+              setUpdatedDatasheets: setUpdatedDatasheets,
+              maxChar: (_dataInputs$input27 = dataInputs[input]) !== null && _dataInputs$input27 !== void 0 && _dataInputs$input27.max_chars ? (_dataInputs$input28 = dataInputs[input]) === null || _dataInputs$input28 === void 0 ? void 0 : _dataInputs$input28.max_chars : 999,
+              optionList: (_dataInputs$input29 = dataInputs[input]) === null || _dataInputs$input29 === void 0 ? void 0 : _dataInputs$input29.option_list,
+              description: (_dataInputs$input30 = dataInputs[input]) === null || _dataInputs$input30 === void 0 ? void 0 : _dataInputs$input30.description,
+              showTooltip: true,
+              inputGroup: inputGroup,
+              dataInputs: dataInputs,
+              onChange: setUpdatedBoxData,
+              auditClass: compare && !isEquals(dataInputs[input].value, auditInputs[input].value) ? "audit-class" : ""
+            }, index + "-" + ((_dataInputs$input18 = dataInputs[input]) === null || _dataInputs$input18 === void 0 ? void 0 : _dataInputs$input18.value) + "-" + ((_dataInputs$input19 = dataInputs[input]) === null || _dataInputs$input19 === void 0 ? void 0 : _dataInputs$input19.id) + "-" + compare), ((_dataInputs$input31 = dataInputs[input]) === null || _dataInputs$input31 === void 0 ? void 0 : _dataInputs$input31.isApproved) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputReviewSection, {
+              inputId: (_dataInputs$input32 = dataInputs[input]) === null || _dataInputs$input32 === void 0 ? void 0 : _dataInputs$input32.id,
+              isApproved: (_dataInputs$input33 = dataInputs[input]) === null || _dataInputs$input33 === void 0 ? void 0 : _dataInputs$input33.isApproved,
+              comment: (_dataInputs$input34 = dataInputs[input]) === null || _dataInputs$input34 === void 0 ? void 0 : _dataInputs$input34.comment,
+              handleImgClick: handleImgClick,
+              changeImageBtn: changeImageBtn,
+              showDivState: showDivStates,
+              imageStates: imageStates
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [(input === null || input === void 0 ? void 0 : input.isApproved) === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputReviewSection, {
+              inputId: input === null || input === void 0 ? void 0 : input.id,
+              isApproved: input === null || input === void 0 ? void 0 : input.isApproved,
+              comment: input === null || input === void 0 ? void 0 : input.comment,
+              handleImgClick: handleImgClick,
+              changeImageBtn: changeImageBtn,
+              showDivState: showDivStates,
+              imageStates: imageStates
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+              inputId: input.id,
+              index: index,
+              disabled: input === null || input === void 0 ? void 0 : input.isApproved,
+              inputType: "textarea",
+              label: (input === null || input === void 0 ? void 0 : input.name) + (input.required ? "*" : ""),
+              value: compare ? auditInputGroup === null || auditInputGroup === void 0 ? void 0 : (_auditInputGroup$inpu3 = auditInputGroup.inputs[index]) === null || _auditInputGroup$inpu3 === void 0 ? void 0 : _auditInputGroup$inpu3.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,
+              showTooltip: true,
+              auditClass: compare && !isEquals(input === null || input === void 0 ? void 0 : input.value, auditInputGroup === null || auditInputGroup === void 0 ? void 0 : (_auditInputGroup$inpu4 = auditInputGroup.inputs[index]) === null || _auditInputGroup$inpu4 === void 0 ? void 0 : _auditInputGroup$inpu4.value) ? "audit-class" : ""
+            }, index + "-" + (input === null || input === void 0 ? void 0 : input.value) + "-" + compare)]
+          });
+        })
+      })]
+    })]
+  });
+};
+
+exports.InputGroup = InputGroup;

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

@@ -0,0 +1,20 @@
+"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  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\n  .btnReviewState {\n    display: \"flex\";\n    flex-direction: \"column\";\n    border: 1px solid lightgray;\n    border-radius: 3px;\n    z-index: 1000;\n    /* position: absolute; */\n  }\n\n  .btnReviewState button {\n    border: none;\n    background: white;\n    border-radius: 3px;\n  }\n  .btnReviewState button:hover {\n    background: lightgray;\n  }\n  /* #divBtnsReviewdown {\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: 1px solid black;\n  }\n  #aceptbtn {\n    background: white;\n    border: none;\n  }\n  #rejectbtn {\n    background: white;\n    border: none;\n  } */\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/organisms/InputGroupv2/InputGroupv2.stories.js

@@ -0,0 +1,73 @@
+"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/InputGroupv2",
+  component: _index.InputGroupv2,
+  argTypes: {
+    activeSection: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputGroupv2, (0, _objectSpread2.default)({}, args));
+};
+
+var InputGroupDefault = Template.bind({});
+exports.InputGroupDefault = InputGroupDefault;
+InputGroupDefault.args = {
+  InputGroupv2: {
+    name: "Información básica del producto",
+    inputs: [{
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }, {
+      label: "Item",
+      value: "1234567890",
+      placeholder: "Ingresar valor"
+    }]
+  }
+};