contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,37 +1,62 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AsignationInfo = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _index = require("../../atoms/ScreenHeader/index");
+
 var _Avatar = require("../../atoms/Avatar");
+
 var _index2 = require("../../atoms/Status/index");
+
 var _react = require("react");
+
 var _index3 = require("../../atoms/AsignationOption/index");
+
 var _data = require("../../../global-files/data");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const AsignationInfo = _ref => {
+
+var AsignationInfo = function AsignationInfo(_ref) {
   var _assignationsImages$a, _assignationsImages$c;
-  let {
-    status = "-",
-    percent = 0,
-    assignationsImages,
-    setAssignation,
-    isRetailer,
-    id = "default-id",
-    canAssign
-  } = _ref;
-  const [showAsignationPanel, setShowAsignationPanel] = (0, _react.useState)(false);
-  const [assignationType, setAssignationType] = (0, _react.useState)("facilitator");
-  const closeAsignations = e => {
+
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "-" : _ref$status,
+      _ref$percent = _ref.percent,
+      percent = _ref$percent === void 0 ? 0 : _ref$percent,
+      assignationsImages = _ref.assignationsImages,
+      setAssignation = _ref.setAssignation,
+      isRetailer = _ref.isRetailer,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "default-id" : _ref$id,
+      canAssign = _ref.canAssign;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showAsignationPanel = _useState2[0],
+      setShowAsignationPanel = _useState2[1];
+
+  var _useState3 = (0, _react.useState)("facilitator"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      assignationType = _useState4[0],
+      setAssignationType = _useState4[1];
+
+  var closeAsignations = function closeAsignations(e) {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
       setShowAsignationPanel(false);
     }
   };
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)(function () {
     if (showAsignationPanel) {
       document.addEventListener("click", closeAsignations, false);
     }
@@ -40,17 +65,19 @@ const AsignationInfo = _ref => {
     id: id,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "assignations-container",
-      children: assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$a = assignationsImages.assignations) === null || _assignationsImages$a === void 0 ? void 0 : _assignationsImages$a.map((assignation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-        imageType: "small-image",
-        image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
-        altText: "user profile image",
-        onClick: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          setShowAsignationPanel(true);
-          setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
-        }
-      }, index + "-" + assignation.id))
+      children: assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$a = assignationsImages.assignations) === null || _assignationsImages$a === void 0 ? void 0 : _assignationsImages$a.map(function (assignation, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+          imageType: "small-image",
+          image: (0, _data.getProfilePicture)(assignation.id, 20, 20),
+          altText: "user profile image",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowAsignationPanel(true);
+            setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
+          }
+        }, index + "-" + assignation.id);
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Asig.",
       color: "#969696",
@@ -79,13 +106,15 @@ const AsignationInfo = _ref => {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "asignations-list",
-        children: (assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.collaborators) !== undefined ? assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$c = assignationsImages.collaborators[assignationType]) === null || _assignationsImages$c === void 0 ? void 0 : _assignationsImages$c.map((asignation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
-          profileImage: (0, _data.getProfilePicture)(asignation === null || asignation === void 0 ? void 0 : asignation.id_user, 40, 40),
-          onClick: () => {
-            setAssignation(assignationType, asignation === null || asignation === void 0 ? void 0 : asignation.id_user);
-          },
-          name: asignation.name
-        }, index + "-" + asignation.name)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: (assignationsImages === null || assignationsImages === void 0 ? void 0 : assignationsImages.collaborators) !== undefined ? assignationsImages === null || assignationsImages === void 0 ? void 0 : (_assignationsImages$c = assignationsImages.collaborators[assignationType]) === null || _assignationsImages$c === void 0 ? void 0 : _assignationsImages$c.map(function (asignation, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
+            profileImage: (0, _data.getProfilePicture)(asignation === null || asignation === void 0 ? void 0 : asignation.id_user, 40, 40),
+            onClick: function onClick() {
+              setAssignation(assignationType, asignation === null || asignation === void 0 ? void 0 : asignation.id_user);
+            },
+            name: asignation.name
+          }, index + "-" + asignation.name);
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: "no-asignations",
           children: "Sin personas para asignar"
         })
@@ -104,4 +133,5 @@ const AsignationInfo = _ref => {
     })]
   });
 };
+
 exports.AsignationInfo = AsignationInfo;

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

@@ -1,12 +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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: 117px;\n  padding: 4px 5px;\n  display: flex;\n  border: 1px solid #F0F0F0;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: 117px;\n  padding: 4px 5px;\n  display: flex;\n  border: 1px solid #F0F0F0;\n\n  > * + * {\n    margin-left: 8px;\n  }\n\n  .images-buttons {\n    button + * {\n      margin-left: 8px;\n    }\n  }\n\n  .assignations-container {\n    display: flex;\n    cursor: pointer;\n  }\n\n  .asignation-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px 8px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n\n    .asignation-header {\n      display: flex;\n      justify-content: space-between;\n\n      .asignation-status,\n      .asignation-percent {\n        & > p {\n          font-family: ", ";\n          font-weight: 500;\n          font-size: 14px;\n          line-height: 16px;\n          color: ", ";\n        }\n      }\n\n      .asignation-percent {\n        text-align: right;\n      }\n\n      & + * {\n        margin-top: 10px;\n      }\n    }\n\n    .asignations-list {\n      min-height: 40px;\n\n      .no-asignations {\n        padding: 5px;\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 14px;\n        line-height: 16px;\n        color: ", ";\n      }\n\n      & + * {\n        margin-top: 10px;\n        border-top: 1px solid ", ";\n      }\n    }\n\n    .default-asignations-list {\n      padding-top: 10px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+exports.Container = Container;

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

@@ -1,16 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
-const status = ["-", "Pr", "R", "AS", "CA", "IE", "AC", "AA", "AP", "ACA", "RA", "RC", "RP", "RCA", "Ex"];
-var _default = exports.default = {
+
+var status = ["-", "Pr", "R", "AS", "CA", "IE", "AC", "AA", "AP", "ACA", "RA", "RC", "RP", "RCA", "Ex"];
+var _default = {
   title: "Components/molecules/AssignedWork",
   component: _index.AssignedWork,
   argTypes: {
@@ -22,10 +30,14 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AssignedWork, {
-  ...args
-});
-const AssignedWorkDefault = exports.AssignedWorkDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AssignedWork, (0, _objectSpread2.default)({}, args));
+};
+
+var AssignedWorkDefault = Template.bind({});
+exports.AssignedWorkDefault = AssignedWorkDefault;
 AssignedWorkDefault.args = {
   statusType: "-",
   assignedImage: [{

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

@@ -1,21 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AssignedWork = void 0;
+
 var _styles = require("./styles");
+
 var _index = require("../../atoms/ScreenHeader/index");
+
 var _clock = _interopRequireDefault(require("../../../assets/images/componentAssigned/clock.svg"));
+
 var _flag = _interopRequireDefault(require("../../../assets/images/componentAssigned/flag.svg"));
+
 var _index2 = require("../../atoms/Avatar/index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const AssignedWork = _ref => {
-  let {
-    statusType,
-    assignedImage
-  } = _ref;
+
+var AssignedWork = function AssignedWork(_ref) {
+  var statusType = _ref.statusType,
+      assignedImage = _ref.assignedImage;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: "status-".concat(statusType),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -41,12 +47,15 @@ const AssignedWork = _ref => {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "assigned",
-        children: assignedImage.reverse().map((assigned, index) => index < 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Avatar, {
-          image: assigned.image,
-          imageType: "big-image"
-        }, index))
+        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/AssignedWork/styles.js

@@ -1,12 +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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 4px;\n  background-color: transparent;\n  padding: 8px;\n  width: 250px;\n  padding-bottom: 5px;\n  position: relative;\n\n  &.status-PA,\n  &.status-R {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-AA,\n  &.status-CA,\n  &.status-IE {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-AC,\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\n    border: 1px solid #d74ded;\n    .header-and-paragraph {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  .header-flag {\n    display: flex;\n    justify-content: space-between;\n    .flag {\n      position: absolute;\n      right: 1px;\n      top: 0px;\n    }\n  }\n  .header-and-paragraph {\n    font-size: 12px;\n    line-height: 13px;\n    p {\n      line-height: 11px;\n      font-size: 10px;\n      color: ", ";\n    }\n  }\n\n  .clock-assigned {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .assigned {\n      display: flex;\n      flex-direction: row-reverse;\n      .big-image {\n        & + .big-image {\n          margin-right: -5px;\n        }\n      }\n    }\n  }\n  .clock-header {\n    display: flex;\n    border-radius: 4px;\n    background: ", ";\n    padding: 3px 10px;\n    .clock {\n      & + * {\n        margin-left: 10px;\n      }\n    }\n    .date-header {\n      font-size: 11px;\n      line-height: 13px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.GlobalColors.s2);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 4px;\n  background-color: transparent;\n  padding: 8px;\n  width: 250px;\n  padding-bottom: 5px;\n  position: relative;\n\n  &.status-PA,\n  &.status-R {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-AA,\n  &.status-CA,\n  &.status-IE {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-AC,\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\n    border: 1px solid #d74ded;\n    .header-and-paragraph {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .header-and-paragraph {\n      color: ", ";\n    }\n  }\n\n  .header-flag {\n    display: flex;\n    justify-content: space-between;\n    .flag {\n      position: absolute;\n      right: 1px;\n      top: 0px;\n    }\n  }\n  .header-and-paragraph {\n    font-size: 12px;\n    line-height: 13px;\n    p {\n      line-height: 11px;\n      font-size: 10px;\n      color: ", ";\n    }\n  }\n\n  .clock-assigned {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .assigned {\n      display: flex;\n      flex-direction: row-reverse;\n      .big-image {\n        & + .big-image {\n          margin-right: -5px;\n        }\n      }\n    }\n  }\n  .clock-header {\n    display: flex;\n    border-radius: 4px;\n    background: ", ";\n    padding: 3px 10px;\n    .clock {\n      & + * {\n        margin-left: 10px;\n      }\n    }\n    .date-header {\n      font-size: 11px;\n      line-height: 13px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.GlobalColors.s2);
+
+exports.Container = Container;

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

@@ -1,17 +1,28 @@
 "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 = exports.default = {
+
+var _default = {
   title: "Components/molecules/AvatarAndValidation",
   component: _index.AvatarAndValidation
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AvatarAndValidation, {
-  ...args
-});
-const AvatarAndValidationDefault = exports.AvatarAndValidationDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AvatarAndValidation, (0, _objectSpread2.default)({}, args));
+};
+
+var AvatarAndValidationDefault = Template.bind({});
+exports.AvatarAndValidationDefault = AvatarAndValidationDefault;
 AvatarAndValidationDefault.args = {};

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

@@ -1,39 +1,57 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarAndValidation = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _react = require("react");
+
 var _styles = require("./styles");
+
 var _GeneralButton = require("../../atoms/GeneralButton");
+
 var _ValidationPanel = require("../../atoms/ValidationPanel");
+
 var _RetailerSelector = require("../RetailerSelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
+
 //Components
+var AvatarAndValidation = function AvatarAndValidation(_ref) {
+  var retailers = _ref.retailers,
+      validation = _ref.validation,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer,
+      showValidationButtons = _ref.showValidationButtons,
+      approve = _ref.approve,
+      reject = _ref.reject,
+      approveAll = _ref.approveAll,
+      rejectAll = _ref.rejectAll,
+      showApproveRejectAll = _ref.showApproveRejectAll;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showValidationPanel = _useState2[0],
+      setShowValidationPanel = _useState2[1];
 
-const AvatarAndValidation = _ref => {
-  let {
-    retailers,
-    validation,
-    activeRetailer,
-    setActiveRetailer,
-    showValidationButtons,
-    approve,
-    reject,
-    approveAll,
-    rejectAll,
-    showApproveRejectAll
-  } = _ref;
-  const [showValidationPanel, setShowValidationPanel] = (0, _react.useState)(false);
-  const [buttonType, setButtonType] = (0, _react.useState)(validation ? validation : "null-button");
-  const closeValidationPanel = e => {
+  var _useState3 = (0, _react.useState)(validation ? validation : "null-button"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      buttonType = _useState4[0],
+      setButtonType = _useState4[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)(() => {
+
+  (0, _react.useEffect)(function () {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
     }
@@ -47,7 +65,7 @@ const AvatarAndValidation = _ref => {
         setActiveRetailer: setActiveRetailer
       }), showValidationButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: "circular-button ".concat(buttonType),
-        onClick: e => {
+        onClick: function onClick(e) {
           e.stopPropagation();
           setShowValidationPanel(true);
         }
@@ -64,4 +82,5 @@ const AvatarAndValidation = _ref => {
     })]
   });
 };
+
 exports.AvatarAndValidation = AvatarAndValidation;

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

@@ -1,11 +1,18 @@
 "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 _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: fit-content;\n\n  .buttons-container {\n    display: flex;\n    align-items: center;\n\n    > * + * {\n      margin-left: 3px;\n    }\n  }\n"])));
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: fit-content;\n\n  .buttons-container {\n    display: flex;\n    align-items: center;\n\n    > * + * {\n      margin-left: 3px;\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -1,19 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BoxAttributeDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/molecules/BoxAttribute",
   component: _index.BoxAttribute
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxAttribute, {
-  ...args
-});
-const BoxAttributeDefault = exports.BoxAttributeDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxAttribute, (0, _objectSpread2.default)({}, args));
+};
+
+var BoxAttributeDefault = Template.bind({});
+exports.BoxAttributeDefault = BoxAttributeDefault;
 BoxAttributeDefault.args = {
   text: "texto prueba",
   titletool: "Porcentaje de requeridos",

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

@@ -1,64 +1,73 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BoxAttribute = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _styles = require("./styles");
+
 var _info = _interopRequireDefault(require("../../../assets/images/Icons/info.svg"));
+
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
 var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
+
 var _styles2 = require("@mui/material/styles");
+
 var _variables = require("../../../global-files/variables");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const BoxAttribute = props => {
-  const {
-    id,
-    key,
-    className,
-    text,
-    borderType,
-    atributos,
-    setAtributos,
-    required,
-    description
-  } = props;
-  const handleInputChange = event => {
-    const {
-      name,
-      value
-    } = event.target;
-    setAtributos(prevAtributos => ({
-      ...prevAtributos,
-      [name]: value
-    }));
+
+var _excluded = ["className"];
+
+var BoxAttribute = function BoxAttribute(props) {
+  var id = props.id,
+      key = props.key,
+      className = props.className,
+      text = props.text,
+      borderType = props.borderType,
+      atributos = props.atributos,
+      setAtributos = props.setAtributos,
+      required = props.required,
+      description = props.description;
+
+  var handleInputChange = function handleInputChange(event) {
+    var _event$target = event.target,
+        name = _event$target.name,
+        value = _event$target.value;
+    setAtributos(function (prevAtributos) {
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prevAtributos), {}, (0, _defineProperty2.default)({}, name, value));
+    });
   };
-  const LightTooltip = (0, _styles2.styled)(_ref => {
-    let {
-      className,
-      ...props
-    } = _ref;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-      ...props,
+
+  var LightTooltip = (0, _styles2.styled)(function (_ref) {
+    var className = _ref.className,
+        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
       classes: {
         popper: className
       }
+    }));
+  })(function (_ref2) {
+    var theme = _ref2.theme;
+    return (0, _defineProperty2.default)({}, "& .".concat(_Tooltip.tooltipClasses.tooltip), {
+      backgroundColor: _variables.GlobalColors.white,
+      color: "rgba(0, 0, 0, 0.87)",
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif")
     });
-  })(_ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return {
-      ["& .".concat(_Tooltip.tooltipClasses.tooltip)]: {
-        backgroundColor: _variables.GlobalColors.white,
-        color: "rgba(0, 0, 0, 0.87)",
-        boxShadow: theme.shadows[1],
-        fontSize: 11,
-        fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif")
-      }
-    };
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
@@ -100,4 +109,5 @@ const BoxAttribute = props => {
     }, key)
   });
 };
+
 exports.BoxAttribute = BoxAttribute;

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

@@ -1,17 +1,23 @@
 "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;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n  .required-text {\n    color: red;\n  }\n"])), _variables.FontFamily.RobotoMedium, _ref => {
-  let {
-    borderType
-  } = _ref;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n  .required-text {\n    color: red;\n  }\n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
+  var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "5px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "none";
-}, _variables.FontFamily.RobotoMedium);
+}, _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;