contentoh-components-library 21.4.124 → 21.4.126

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MandatoryBarDefault = 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/MandatoryBar",
+  component: _index.MandatoryBar,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MandatoryBar, (0, _objectSpread2.default)({}, args));
+};
+
+var MandatoryBarDefault = Template.bind({});
+exports.MandatoryBarDefault = MandatoryBarDefault;
+MandatoryBarDefault.args = {
+  MandatoryBar: {}
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MandatoryBar = void 0;
+
+var _NumberMandatory = require("../../atoms/NumberMandatory");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var MandatoryBar = function MandatoryBar(_ref) {
+  var obligatorias = _ref.obligatorias,
+      minimas = _ref.minimas,
+      maximas = _ref.maximas;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberMandatory.NumberMandatory, {
+      number: obligatorias,
+      required: true,
+      typeImage: "obligatorias",
+      typeSingle: "obligatoria"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberMandatory.NumberMandatory, {
+      number: minimas,
+      required: false,
+      typeImage: "mínimas",
+      typeSingle: "mínimas"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberMandatory.NumberMandatory, {
+      number: maximas,
+      required: false,
+      typeImage: "máximas",
+      typeSingle: "máximas"
+    })]
+  });
+};
+
+exports.MandatoryBar = MandatoryBar;

package/dist/components/organisms/MandatoryBar/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  width: fit-content;\n  height:60px;\n  display: flex;\n  gap: 10px;\n  padding:22px 15px;\n  border:1px solid ", ";\n  border-radius:10px;\n"])), _variables.GlobalColors.gray_light);
+
+exports.Container = Container;

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

@@ -20,7 +20,7 @@ var _default = {
   component: _index.Modal,
   argTypes: {
     icon: {
-      options: [undefined, "error", "warning", "success", "info"],
+      options: [undefined, "error", "warning", "success", "successv2", "info"],
       control: {
         type: "select"
       }
@@ -39,6 +39,7 @@ modalDefault.args = {
   show: false,
   title: "Titulo del modal",
   icon: undefined,
+  image: undefined,
   message: "descripcion amplia sobre el componente \n\tmodal white para saber como se ven varias lineas\n\tde codigo"
 };
 var modalWithButtons = Template.bind({});

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

@@ -29,6 +29,7 @@ var Modal = function Modal(props) {
       title = props.title,
       message = props.message,
       icon = props.icon,
+      image = props.image,
       customComponent = props.customComponent,
       buttons = props.buttons,
       onClickModal = props.onClickModal,
@@ -37,7 +38,8 @@ var Modal = function Modal(props) {
     error: _freeSolidSvgIcons.faClose,
     warning: _freeSolidSvgIcons.faExclamationTriangle,
     info: _freeSolidSvgIcons.faExclamation,
-    success: _freeSolidSvgIcons.faCheck
+    success: _freeSolidSvgIcons.faCheck,
+    successv2: _freeSolidSvgIcons.faCheck
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Backdrop, {
     open: show,
@@ -45,7 +47,7 @@ var Modal = function Modal(props) {
     timeout: 400,
     style: {
       backgroundColor: "transparent",
-      zIndex: 10
+      zIndex: 10100
     },
     onClick: function onClick(event) {
       return onClickModal && onClickModal(event);
@@ -62,6 +64,9 @@ var Modal = function Modal(props) {
               className: "label-title",
               children: title.trim()
             })
+          }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: image,
+            alt: "img modal"
           }), icons[icon === null || icon === void 0 ? void 0 : icon.toLowerCase()] && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
             type: "white",
             className: "iconModal " + "iconModal-" + icon.toLowerCase(),

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n      margin-bottom: 20px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n\n      & + * {\n        margin-top: 20px;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n      &.iconModal-successv2{\n        border-color: #85BC5B;\n        color: #85BC5B;\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
 
 exports.ContainerModal = ContainerModal;

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

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductImageModalv2Default = 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/ProductImageModalv2",
+  component: _index.ProductImageModalv2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModalv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductImageModalv2Default = Template.bind({});
+exports.ProductImageModalv2Default = ProductImageModalv2Default;
+ProductImageModalv2Default.args = {
+  headerInfo: {},
+  images: {
+    values: [{
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+      name: "Hero",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+      name: "Hero2",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+      name: "Hero3",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+      name: "Hero4",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+      name: "Hero5",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }, {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+      name: "Hero6",
+      data: [{
+        feature: "Tamaño de imagen",
+        value: "1000x10000"
+      }, {
+        feature: "Formato",
+        value: "jpg"
+      }, {
+        feature: "Resolución",
+        value: "300dpi"
+      }, {
+        feature: "Tipo de imagen",
+        value: "Tipo de imagen"
+      }, {
+        feature: "Identificador",
+        value: "F261"
+      }]
+    }]
+  }
+};

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductImageModalv2 = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _ValidationPanel = require("../../atoms/ValidationPanel");
+
+var _index = require("../../atoms/GeneralButton/index");
+
+var _ProductImagev = require("../../atoms/ProductImagev2");
+
+var _ImageSelectorv = require("../../molecules/ImageSelectorv2");
+
+var _ImageDataTablev = require("../ImageDataTablev2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductImageModalv2 = function ProductImageModalv2(_ref) {
+  var _images$values$active, _images$values$active2, _images$values$active3;
+
+  var _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images,
+      headerInfo = _ref.headerInfo,
+      validation = _ref.validation,
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator,
+      _ref$approveRejectBut = _ref.approveRejectButtons,
+      approveRejectButtons = _ref$approveRejectBut === void 0 ? false : _ref$approveRejectBut;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeImage = _useState2[0],
+      setActiveImage = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(validation ? validation : "null-button"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      buttonType = _useState4[0],
+      setButtonType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showValidationPanel = _useState6[0],
+      setShowValidationPanel = _useState6[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
+    if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "modal-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "modal-image-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImagev.ProductImagev2, {
+          img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
+          altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
+          imageType: "expanded-modal-image"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "modal-data-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "validation-and-table-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "validation-panel",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
+              buttonType: "general-white-button close-button-white",
+              onClick: function onClick() {
+                setShowModal(false);
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTablev.ImageDataTablev2, {
+            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
+            headerInfo: headerInfo,
+            activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
+            darkMode: true,
+            lists: images
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelectorv.ImageSelectorv2, {
+          images: images,
+          setActiveImage: setActiveImage,
+          modalSelector: true
+        })]
+      })]
+    })
+  });
+};
+
+exports.ProductImageModalv2 = ProductImageModalv2;

package/dist/components/organisms/ProductImageModalv2/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  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      gap: 25px;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      \n      h2 {\n        color: ", ";\n      }\n\n      .validation-and-table-container {\n        .validation-panel {\n          width: 100%;\n          height: 44px;\n          background-color: rgba(38,38,38,0.3);\n          padding: 0 10px;\n          position: absolute;\n          top:0;\n          right:0;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          button{\n            width: 24px;\n            height: 24px;\n            border: 1px solid #f0f0f0;\n            background-size: 12px;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          }\n\n          // & + * {\n          //   margin-top: 25px;\n          // }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.gray);
+
+exports.Container = Container;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RenameImagesBarDefault = 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/RenameImagesBar",
+  component: _index.RenameImagesBar,
+  argTypes: {}
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RenameImagesBar, (0, _objectSpread2.default)({}, args));
+};
+
+var RenameImagesBarDefault = Template.bind({});
+exports.RenameImagesBarDefault = RenameImagesBarDefault;
+RenameImagesBarDefault.args = {
+  RenameImagesBar: {}
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenameImagesBar = void 0;
+
+var _InputImages = require("../../atoms/InputImages");
+
+var _NumberMandatory = require("../../atoms/NumberMandatory");
+
+var _InputGroupv = require("../InputGroupv2");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RenameImagesBar = function RenameImagesBar(_ref) {
+  var description = _ref.description,
+      number = _ref.number;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputImages.InputImages, {
+      required: true,
+      description_small: "Descripción del campo.",
+      placeHolder: "UPC"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputImages.InputImages, {
+      required: false,
+      description_small: "Descripción del campo.",
+      placeHolder: "Modelo"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputImages.InputImages, {
+      required: true,
+      description_small: "Descripción del campo.",
+      placeHolder: "Item"
+    })]
+  });
+};
+
+exports.RenameImagesBar = RenameImagesBar;

package/dist/components/organisms/RenameImagesBar/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  width: fit-content;\n  height:60px;\n  display: flex;\n  gap: 10px;\n  padding:22px 15px;\n  border:1px solid ", ";\n  border-radius:10px;\n"])), _variables.GlobalColors.gray_light);
+
+exports.Container = Container;