contentoh-components-library 21.4.77 → 21.4.78

package/dist/assets/images/Icons/close.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
+<rect width="10" height="10" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2487)">
+<path d="M0.769231 10L0 9.23077L4.23077 5L0 0.769231L0.769231 0L5 4.23077L9.23077 0L10 0.769231L5.76923 5L10 9.23077L9.23077 10L5 5.76923L0.769231 10Z" fill="#B64545"/>
+</g>
+</svg>

package/dist/assets/images/Icons/edit.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2312" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2312)">
+<path d="M1.40041 10.5996H2.06071L8.70873 3.95157L8.04843 3.29127L1.40041 9.93929V10.5996ZM10.6146 3.30628L8.69372 1.3854L9.32401 0.755116C9.49409 0.585039 9.70418 0.5 9.9543 0.5C10.2044 0.5 10.4145 0.585039 10.5846 0.755116L11.2449 1.41542C11.415 1.58549 11.5 1.79559 11.5 2.0457C11.5 2.29582 11.415 2.50591 11.2449 2.67599L10.6146 3.30628ZM9.98431 3.93656L2.42087 11.5H0.5V9.57913L8.06344 2.01569L9.98431 3.93656Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/assets/images/Icons/save.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_748_1469" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_748_1469)">
+<path d="M14 3.05278V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H10.9472L14 3.05278ZM12.8333 3.57778L10.4222 1.16667H1.16667V12.8333H12.8333V3.57778ZM6.99543 11.5694C7.55588 11.5694 8.0338 11.3733 8.42917 10.981C8.82454 10.5886 9.02222 10.1123 9.02222 9.55179C9.02222 8.99134 8.82606 8.51343 8.43374 8.11806C8.04143 7.72269 7.56504 7.525 7.00457 7.525C6.44412 7.525 5.9662 7.72116 5.57083 8.11349C5.17546 8.5058 4.97778 8.98219 4.97778 9.54265C4.97778 10.1031 5.17394 10.581 5.56626 10.9764C5.95858 11.3718 6.43496 11.5694 6.99543 11.5694ZM2.19722 4.97778H9.15833V2.19722H2.19722V4.97778Z" fill="#E33AA9"/>
+</g>
+</svg>

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

@@ -23,7 +23,7 @@ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
 var _material = require("@mui/material");
 
-var _Select = _interopRequireDefault(require("../../atoms/Select"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
 
 var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
 
@@ -45,7 +45,8 @@ var Phase = function Phase(_ref) {
       phaseName = _ref.phaseName,
       nextPhase = _ref.nextPhase,
       groups = _ref.groups,
-      onDeletePhase = _ref.onDeletePhase;
+      onDeletePhase = _ref.onDeletePhase,
+      draggable = _ref.draggable;
 
   var _useState = (0, _react.useState)(""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -79,6 +80,16 @@ var Phase = function Phase(_ref) {
 
   var idPhase = id + 1;
 
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      draggedItem = _useState12[0],
+      setDraggedItem = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      tempItems = _useState14[0],
+      setTempItems = _useState14[1];
+
   var onAdd = function onAdd() {
     if (selectedValue && !groupsSelected.includes(selectedValue)) {
       setGroupsSelected(function (prevGroups) {
@@ -113,8 +124,7 @@ var Phase = function Phase(_ref) {
         return chip !== chipToRemove;
       });
     });
-  }; // const combinedGroups = [...grupos, ...chips];
-
+  };
 
   var _React$useState = _react.default.useState(null),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -135,10 +145,10 @@ var Phase = function Phase(_ref) {
     var label = _ref2.label,
         onDelete = _ref2.onDelete;
 
-    var _useState11 = (0, _react.useState)(false),
-        _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-        isHovered = _useState12[0],
-        setIsHovered = _useState12[1];
+    var _useState15 = (0, _react.useState)(false),
+        _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+        isHovered = _useState16[0],
+        setIsHovered = _useState16[1];
 
     var handleMouseEnter = function handleMouseEnter() {
       setIsHovered(true);
@@ -163,9 +173,33 @@ var Phase = function Phase(_ref) {
     });
   };
 
-  console.log(id, phases, nextPhase, groups); // useEffect(() => initialPhase(),[]);
+  var onDragStartHandler = function onDragStartHandler(e) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+    onDragStart(e, id);
+  };
+
+  var onDragOverHandler = function onDragOverHandler(index) {
+    if (!draggedItem || draggedItem === id) {
+      return;
+    }
+
+    onDragOver(id);
+    setDraggedItem(null);
+  };
+
+  var onDragEndHandler = function onDragEndHandler() {
+    onDragEnd();
+    setDraggedItem(null);
+  };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    onDragStart: onDragStartHandler,
+    onDragOver: onDragOverHandler,
+    onDragEnd: onDragEndHandler,
+    draggable: draggable,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-phase",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
@@ -179,21 +213,41 @@ var Phase = function Phase(_ref) {
           className: "phase-sel",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             className: "text-phase",
-            children: "Al rechazar en esta fase enviar a "
+            children: "Siguiente Fase "
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
             width: "100px",
-            valueSelected: nextPhase ? Object.values(nextPhase) : [],
+            value: selectedValue !== "" ? selectedValue : nextPhase,
             placeholder: "Fase",
-            options: phases.map(function (phase) {
-              return phase.phaseName;
-            }),
             onChange: function onChange(e) {
               var selectedPhase = phases.find(function (phase) {
                 return phase.phaseName === e.target.value;
               });
-              console.log("fase seleccionada", selectedPhase);
               setSelectedValue(selectedPhase.nextPhaseIfApproved);
-            }
+            },
+            sx: {
+              width: "auto",
+              minWidth: "100px",
+              height: "24px",
+              background: "#F7F7FC",
+              borderRadius: "5px"
+            },
+            MenuProps: {
+              PaperProps: {
+                style: {
+                  background: "#F7F7FC"
+                }
+              }
+            },
+            children: phases.map(function (phase) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: phase.phaseName,
+                sx: {
+                  fontSize: "10px",
+                  color: "#262626"
+                },
+                children: phase.phaseName
+              }, phase.phaseId);
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             id: "basic-button",
             "aria-controls": open ? "basic-menu" : undefined,

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

@@ -11,11 +11,9 @@ exports.DragAndDropPhases = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
@@ -31,10 +29,10 @@ var _Modal = require("../Modal");
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _GeneralInputv = require("../../atoms/GeneralInputv2");
-
 var _checkv = _interopRequireDefault(require("../../../assets/images/Icons/checkv2.svg"));
 
+var _material = require("@mui/material");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var DragAndDropPhases = function DragAndDropPhases(_ref) {
@@ -67,7 +65,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
       listPhases = _useState10[0],
       setListPhases = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(),
+  var _useState11 = (0, _react.useState)(""),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
       newPhaseName = _useState12[0],
       setNewPhaseName = _useState12[1];
@@ -80,135 +78,185 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
   }),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       modalData = _useState14[0],
-      setModalData = _useState14[1];
-
-  var onDragStart = function onDragStart(e, idx) {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", e.target.parentNode);
-    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
-    setDraggedItem(items[idx]);
+      setModalData = _useState14[1]; // useEffect(() => {console.log("nuevo",newPhaseName)},[newPhaseName]);
+
+
+  {
+    /*const updatePhases = async () => {
+     try {
+       console.log("listPhases:", listPhases);
+       const updateData = {
+         body: {
+           updateReferencesOfNodes: listPhases.map((phase) => ({
+             name:phase.phaseName,
+             isInitialPhase: phase.isInitialPhase,
+             phaseId: phase.phaseId,
+             nextPhaseIfApproved: phase.nextPhaseIfApproved,
+           })),
+         },
+         path: {
+           action: "update",
+         },
+         headers: {
+           Authorization: token,
+         },
+       };
+       console.log("updateData:", updateData);
+        const response = await axios.post(
+         `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
+         updateData
+       );
+        // Handle response if needed
+       console.log("Update response:", response.data);
+     } catch (error) {
+       console.error("Error al actualizar fases", error);
+     }
+    };*/
+  }
+
+  var handleInputChange = function handleInputChange(e) {
+    console.log("nuevo nombre", e.target.value);
+    setNewPhaseName(e.target.value);
   };
 
-  var onDragOver = function onDragOver(index) {
-    if (!draggedItem) {
-      return;
-    }
-
-    if (draggedItem === tempItems[index]) {
-      return;
-    }
-
-    var draggedIndex = tempItems.findIndex(function (item) {
-      return item === draggedItem;
-    });
-    var updatedItems = (0, _toConsumableArray2.default)(tempItems);
-
-    if (draggedIndex > index) {
-      updatedItems[draggedIndex] = tempItems[index];
-      updatedItems[index] = draggedItem;
-    } else {
-      updatedItems.splice(draggedIndex, 1);
-      updatedItems.splice(index, 0, draggedItem);
-    }
-
-    setTempItems(updatedItems);
-  };
+  var AddPhase = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              try {
+                console.log("fase nueva", newPhaseName);
+                {
+                  /*const body = {
+                   name: phaseName,
+                   retailerGroupsIds: [],
+                   nextPhaseId: null
+                  }
+                  const response = await axios.post(
+                   `${process.env.REACT_APP_PHASES_ENDPOINT}/create`,
+                   body,
+                   {
+                     headers: {
+                       Authorization: token,
+                     },
+                   }
+                  );
+                  const createdPhase = response.data.body;
+                  console.log(createdPhase)*/
+                }
+              } catch (error) {
+                console.error("Error al agregar fase:", error);
+              }
 
-  var onDragEnd = function onDragEnd() {
-    setItems(tempItems);
-    setDraggedItem(null);
-  };
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
-  (0, _react.useEffect)(function () {
-    console.log("nuevo", newPhaseName);
-  }, [newPhaseName]);
+    return function AddPhase() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
-  var handleAddPhase = function handleAddPhase() {
+  var handleAddPhaseButton = function handleAddPhaseButton() {
     setModalData({
       show: true,
+      className: "modal-add-phase",
       title: "Agregar fase de revisión",
       buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         type: "white",
         label: "Cancelar",
         size: 12,
         onClick: function onClick() {
-          handleAcceptModal();
+          setModalData(function (prev) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+              show: false
+            });
+          });
         }
       }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         type: "pink",
         label: "Guardar",
         size: 12,
-        onClick: function onClick() {
-          handleAcceptModal();
-        }
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  setModalData(function (prev) {
+                    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                      show: false
+                    });
+                  });
+                  _context2.next = 3;
+                  return new Promise(function (resolve) {
+                    return setTimeout(resolve, 0);
+                  });
+
+                case 3:
+                  AddPhase();
+
+                case 4:
+                case "end":
+                  return _context2.stop();
+              }
+            }
+          }, _callee2);
+        }))
       }, "btn-Guardar")],
       customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "container-input-name",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
           children: ["Las fases nuevas siempre se agregan al final.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Puedes ordenar las fases arrastr\xE1ndolas."]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInputv.GeneralInputv2, {
-          inputType: "text",
-          inputName: "input-phase-name",
-          inputId: 0,
-          inputValue: newPhaseName,
-          inputOnChange: function inputOnChange(e) {
-            return setNewPhaseName(e.target.value);
-          },
-          inputPlaceholder: "Nombre de fase"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          className: "input-phases",
+          placeholder: "Nombre de fase",
+          value: newPhaseName,
+          onChange: handleInputChange
         })]
       })
     });
   };
 
-  var handleAcceptModal = function handleAcceptModal() {
-    var newPhaseData = {
-      id: listPhases.length + 1,
-      phaseName: newPhaseName,
-      // Utiliza el nuevo nombre de la fase
-      groupsAssigned: []
-    };
-    setListPhases(function (prevListPhases) {
-      var updatedListPhases = [].concat((0, _toConsumableArray2.default)(prevListPhases), [newPhaseData]);
-      console.log("actualizada", updatedListPhases);
-      return updatedListPhases;
-    });
-    setModalData(function (prev) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-        show: false
-      });
-    });
+  var handleAcceptModal = function handleAcceptModal(PhaseName) {
+    console.log("nombre", PhaseName);
+    AddPhase(PhaseName);
   };
 
-  var getPhases = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+  var loadData = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
       var response, phasesData, phasesDataArray;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context.prev = 0;
-              _context.next = 3;
+              _context3.prev = 0;
+              _context3.next = 3;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/get"), {}, {
                 headers: {
-                  Authorization: token
+                  Authorization: token // Authorization: sessionStorage.getItem("jwt"),
+
                 }
               });
 
             case 3:
-              response = _context.sent;
-              // console.log("response", response);
+              response = _context3.sent;
               phasesData = JSON.parse(response.data.body).data;
               phasesDataArray = [];
-              phasesData.forEach(function (_ref3) {
-                var phaseId = _ref3.phaseId,
-                    phaseName = _ref3.phaseName,
-                    isInitialPhase = _ref3.isInitialPhase,
-                    nextPhaseIfApproved = _ref3.nextPhaseIfApproved,
-                    groups = _ref3.groups;
-                var groupsAssigned = groups.map(function (_ref4) {
-                  var id = _ref4.id,
-                      name = _ref4.name,
-                      active = _ref4.active;
+              phasesData.forEach(function (_ref5) {
+                var phaseId = _ref5.phaseId,
+                    phaseName = _ref5.phaseName,
+                    isInitialPhase = _ref5.isInitialPhase,
+                    nextPhaseIfApproved = _ref5.nextPhaseIfApproved,
+                    groups = _ref5.groups;
+                var groupsAssigned = groups.map(function (_ref6) {
+                  var id = _ref6.id,
+                      name = _ref6.name,
+                      active = _ref6.active;
                   return {
                     groupId: id,
                     groupName: name,
@@ -222,27 +270,27 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
                   nextPhaseIfApproved: nextPhaseIfApproved,
                   groupsAssigned: groupsAssigned
                 });
-              }); // console.table("fases Array", phasesDataArray);
-
+              });
+              console.table("fases Array", phasesDataArray);
               setListPhases(phasesDataArray);
-              _context.next = 13;
+              _context3.next = 14;
               break;
 
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](0);
-              console.error("Error fetching fases:", _context.t0);
+            case 11:
+              _context3.prev = 11;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al obtener fases:", _context3.t0);
 
-            case 13:
+            case 14:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee3, null, [[0, 11]]);
     }));
 
-    return function getPhases() {
-      return _ref2.apply(this, arguments);
+    return function loadData() {
+      return _ref4.apply(this, arguments);
     };
   }();
 
@@ -273,19 +321,23 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    return getPhases();
-  }, []);
-  (0, _react.useEffect)(function () {// console.log("fases lista", listPhases);
-  }, [listPhases]);
+    return loadData();
+  }, []); // useEffect(() => {
+  //   updatePhases(); 
+  //   setModalData((prev) => ({ ...prev, show: false }));
+  // }, [listPhases]); 
 
-  var renderPhase = function renderPhase(idx, phase) {
+  var renderPhase = function renderPhase(phase, idx) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
       id: idx,
       phases: listPhases,
       phaseName: phase.phaseName,
       nextPhase: phase.nextPhaseIfApproved,
       groups: phase.groupsAssigned,
-      onDeletePhase: handleDeletePhase
+      onDeletePhase: function onDeletePhase() {
+        return handleDeletePhase(phase.id);
+      },
+      draggable: true
     }, idx);
   };
 
@@ -293,7 +345,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         className: "button-phase",
-        onClick: handleAddPhase,
+        onClick: handleAddPhaseButton,
         children: "Agregar fase de revisi\xF3n"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         className: "button-save",
@@ -323,7 +375,7 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
       }, "btn-Guardar")]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
       children: listPhases.map(function (phase, idx) {
-        return renderPhase(idx, phase, handleDeletePhase);
+        return renderPhase(phase, idx);
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
       onClickBtnDefault: function onClickBtnDefault() {

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\nflex-direction: column;\ngap:20px;\nwidth:100%;\nul{\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  gap:10px;\n}\n  .item{\n    display:flex;\n    width:100%;\n  }\n  .drag{\n    width:100%;\n  }\n  .container-input-name{\n    p{\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 14px;\n      letter-spacing: 0em;\n      text-align: left;\n      color: ", ";\n      margin-bottom:15px;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\nflex-direction: column;\ngap:20px;\nwidth:100%;\nul{\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  gap:10px;\n}\n  .item{\n    display:flex;\n    width:100%;\n  }\n  .drag{\n    width:100%;\n  }\n  .container-input-name{\n    p{\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      font-weight: 400;\n      line-height: 14px;\n      letter-spacing: 0em;\n      text-align: left;\n      color: ", ";\n      margin-bottom:15px;\n    }\n    .input-phases{\n      width:100%;\n      height: 30px;\n      padding: 8px 10px;\n      border-radius: 5px;\n      border: 1px solid ", ";\n      ::placeholder {\n        font-family: ", ", sans-serif;\n        font-size: 12px;\n        font-weight: 400;\n        line-height: 14px;\n        letter-spacing: 0em;\n        text-align: left;\n        color: #CBCBCB;\n      }\n    }\n  }\n  .modal-add-phase {\n    .contentModal{\n      min-width:310px;\n    }\n    header .label-title{\n      text-align: left;\n    }\n    .container-buttons{\n      justify-content: flex-end;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.GlobalColors.gray, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoRegular);
 
 exports.Container = Container;
 

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

@@ -27,13 +27,14 @@ var EditGroupDefault = Template.bind({});
 exports.EditGroupDefault = EditGroupDefault;
 EditGroupDefault.args = {
   groups: [{
-    text: 'Impuestos',
+    groupName: 'Impuestos',
     editing: false
   }, {
-    text: 'Legal',
+    groupName: 'Legal',
     editing: false
   }, {
-    text: 'Datos Maestros',
+    groupName: 'Datos Maestros',
     editing: false
-  }]
+  }],
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4ZGIyZjdhZS01ZGFlLTQ3NDAtOGRiYS04YWYzYzQyNmIyOTkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMzc4Mzk0NywibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzAzNzg3NTQ3LCJpYXQiOjE3MDM3ODM5NDcsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.kE0DTZhG3QNJCcVACjWQd4nm-QQKRU9n2jHwC9XtNC9H3Xz7T2F80qxcOUkaOU1IwuJLhxThzpJ9rMKS5XgyjSz_SO7nUQZFY4_vLXgmVowaV798kXRpP5uuUVPJ0b07BMjw12_k0QLeOiAfs4gP4micwedD8ItmsxfjJvv6OPir5NX0KgBjgd5OSlCafgH72yZX8SNmiCyzZkQIEO0MNLwEiIm2COgu4MwvFd73CnlJYYQa-WjCnhB35jgoc8gLpFUfBjgpMUSNRZU2Ndzt9CNuQ6he6RwsVmteMgm0e2Fyn_viRhOsMMxbP8wDXnA9pXwZHB2P-DqXYKhC4blsVA"
 };