contentoh-components-library 21.4.91 → 21.4.93

package/dist/components/atoms/CustomChip/index.js

@@ -22,7 +22,8 @@ var _DeleteForeverOutlined = _interopRequireDefault(require("@mui/icons-material
 var _jsxRuntime = require("react/jsx-runtime");
 
 var CustomChip = function CustomChip(_ref) {
-  var label = _ref.label,
+  var key = _ref.key,
+      label = _ref.label,
       onDelete = _ref.onDelete;
 
   var _useState = (0, _react.useState)(false),
@@ -57,7 +58,7 @@ var CustomChip = function CustomChip(_ref) {
       border: "1px solid ".concat(isHovered ? "#B64545" : "#F0F0F0"),
       color: "".concat(isHovered ? "#B64545" : "#707070")
     }
-  });
+  }, key);
 };
 
 exports.CustomChip = CustomChip;

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

@@ -39,6 +39,8 @@ var _CustomChip = require("../../atoms/CustomChip");
 
 var _CustomSelect = require("../../molecules/CustomSelect");
 
+var _ButtonV = require("../../atoms/ButtonV2");
+
 var _options = _interopRequireDefault(require("../../../assets/images/Icons/options.svg"));
 
 var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
@@ -48,18 +50,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 //Componentes
 //svg
 var Phase = function Phase(_ref) {
-  var id = _ref.id,
+  var key = _ref.key,
+      id = _ref.id,
+      phaseId = _ref.phaseId,
       phases = _ref.phases,
       phaseName = _ref.phaseName,
       nextPhase = _ref.nextPhase,
       groups = _ref.groups,
       onDeletePhase = _ref.onDeletePhase,
-      onDragStart = _ref.onDragStart,
-      onDragOver = _ref.onDragOver,
-      onDragEnd = _ref.onDragEnd,
       token = _ref.token;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedValue = _useState2[0],
       setSelectedValue = _useState2[1];
@@ -74,127 +75,192 @@ var Phase = function Phase(_ref) {
       groupsSelected = _useState6[0],
       setGroupsSelected = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      showCustomSelect = _useState8[0],
-      setShowCustomSelect = _useState8[1];
-
   var _React$useState = _react.default.useState(null),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       anchorEl = _React$useState2[0],
       setAnchorEl = _React$useState2[1];
 
-  var _useState9 = (0, _react.useState)(""),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      nextPhaseState = _useState10[0],
-      setNextPhaseState = _useState10[1];
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      nextPhaseState = _useState8[0],
+      setNextPhaseState = _useState8[1];
 
   var open = Boolean(anchorEl);
 
-  var _useState11 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)({
     show: false,
     title: "Actualización completa",
     message: "",
     icon: "success"
   }),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      modalData = _useState12[0],
-      setModalData = _useState12[1];
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      modalData = _useState10[0],
+      setModalData = _useState10[1];
+
+  var ITEM_HEIGHT = 48;
+  var ITEM_PADDING_TOP = 8;
+  var MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250
+      }
+    }
+  };
+
+  var loadData = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var activeGroups, initialChips, nextPhaseObject;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              activeGroups = groups.filter(function (group) {
+                return group.groupActive === 1;
+              });
+              initialChips = activeGroups.map(function (group) {
+                return {
+                  id: group.groupId,
+                  label: group.groupName
+                };
+              });
+              setChips(initialChips);
+              nextPhaseObject = phases.find(function (phase) {
+                return phase.phaseId === nextPhase;
+              });
+
+              if (nextPhaseObject) {
+                setNextPhaseState(nextPhaseObject.phaseName);
+              }
 
-  var idPhase = id + 1;
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      tempItems = _useState14[0],
-      setTempItems = _useState14[1];
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   (0, _react.useEffect)(function () {
-    var activeGroups = groups.filter(function (group) {
-      return group.groupActive === 1;
-    });
-    var initialChips = activeGroups.map(function (group) {
-      return {
-        id: group.groupId,
-        label: group.groupName
-      };
-    });
-    setChips(initialChips);
+    loadData();
   }, [groups]);
   (0, _react.useEffect)(function () {
-    var nextPhaseObject = phases.find(function (phase) {
-      return phase.phaseId === nextPhase;
-    });
-
-    if (nextPhaseObject) {
-      setNextPhaseState(nextPhaseObject.phaseName);
-    } else {
-      console.log("Aún no se asigna siguiente fase");
-    }
+    loadData();
   }, [nextPhase, phases]);
+  (0, _react.useEffect)(function () {
+    handleGroupSelect();
+  }, [groupsSelected]);
+  (0, _react.useEffect)(function () {
+    handleNextPhaseSelect();
+  }, [selectedValue]); //agregar fase
 
   var onAdd = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(idPhase) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseId) {
       var updatedGroups;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(selectedValue && !groupsSelected.includes(selectedValue))) {
-                _context.next = 9;
-                break;
+              if (selectedValue && !groupsSelected.includes(selectedValue)) {
+                updatedGroups = groups.map(function (group) {
+                  return group.groupName === selectedValue ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+                    groupActive: 1
+                  }) : group;
+                }); // Actualizar el estado de chips y groupsSelected
+
+                setChips(function (prevChips) {
+                  return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+                    id: phaseId,
+                    label: selectedValue
+                  }]);
+                });
+                setGroupsSelected(function (prevGroups) {
+                  return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
+                });
+                setSelectedValue("");
+                console.log("update", updatedGroups);
+                loadData();
               }
 
-              updatedGroups = groups.map(function (group) {
-                return group.groupName === selectedValue ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
-                  groupActive: 1
-                }) : group;
-              });
-              setGroups(updatedGroups); // Actualizar el estado de chips y groupsSelected
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
 
-              setChips(function (prevChips) {
-                return [].concat((0, _toConsumableArray2.default)(prevChips), [{
-                  id: idPhase,
-                  label: selectedValue
-                }]);
-              });
-              setGroupsSelected(function (prevGroups) {
-                return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
+    return function onAdd(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(); //agregar grupo a fase
+
+
+  var addGroup = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(phaseId, groups) {
+      var response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), {
+                retailerGroupsIds: groups,
+                phaseId: phaseId
+              }, {
+                headers: {
+                  Authorization: token
+                }
               });
-              setSelectedValue("");
-              console.log("update", updatedGroups);
-              _context.next = 9;
-              return addGroup(idPhase, updatedGroups);
+
+            case 3:
+              response = _context3.sent;
+              console.log("response", response.data.body);
+              console.log("grupo agregado correctamente");
+              loadData();
+              _context3.next = 12;
+              break;
 
             case 9:
+              _context3.prev = 9;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al agregar grupo a fase:", _context3.t0);
+
+            case 12:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
         }
-      }, _callee);
+      }, _callee3, null, [[0, 9]]);
     }));
 
-    return function onAdd(_x) {
-      return _ref2.apply(this, arguments);
+    return function addGroup(_x2, _x3) {
+      return _ref4.apply(this, arguments);
     };
-  }();
+  }(); //actualiza siguiente fase
 
-  var addGroup = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseId, groups) {
+
+  var updateNextPhase = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(phaseId, newNextPhase) {
       var response;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
+      return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context2.prev = 0;
+              _context4.prev = 0;
               console.log("fase y grupos", {
                 phaseId: phaseId,
-                groups: groups
+                newNextPhase: newNextPhase
               });
-              _context2.next = 4;
+              _context4.next = 4;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), {
-                retailerGroupsIds: {
-                  groups: groups
-                },
+                nextPhaseId: newNextPhase,
                 phaseId: phaseId
               }, {
                 headers: {
@@ -203,45 +269,119 @@ var Phase = function Phase(_ref) {
               });
 
             case 4:
-              response = _context2.sent;
-              console.log("grupo eliminado correctamente");
-              _context2.next = 11;
+              response = _context4.sent;
+              console.log("response", response.data.body);
+              console.log("grupo agregado correctamente");
+              _context4.next = 12;
               break;
 
-            case 8:
-              _context2.prev = 8;
-              _context2.t0 = _context2["catch"](0);
-              console.error("Error al eliminar grupo de fase:", _context2.t0);
+            case 9:
+              _context4.prev = 9;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al actualizar grupo de fase:", _context4.t0);
 
-            case 11:
+            case 12:
             case "end":
-              return _context2.stop();
+              return _context4.stop();
           }
         }
-      }, _callee2, null, [[0, 8]]);
+      }, _callee4, null, [[0, 9]]);
     }));
 
-    return function addGroup(_x2, _x3) {
-      return _ref3.apply(this, arguments);
+    return function updateNextPhase(_x4, _x5) {
+      return _ref5.apply(this, arguments);
     };
   }();
 
-  var handleGroupSelect = function handleGroupSelect(selectedGroup) {
-    if (!chips.find(function (chip) {
-      return chip.label === selectedGroup;
-    })) {
-      setChips(function (prevChips) {
-        return [].concat((0, _toConsumableArray2.default)(prevChips), [{
-          id: prevChips.length,
-          label: selectedGroup
-        }]);
+  var handleGroupSelect = function handleGroupSelect() {
+    groupsSelected.forEach(function (groupId) {
+      var matchingGroup = groups.find(function (group) {
+        return group.groupId === groupId;
       });
-    }
 
-    console.log("Se agrego el grupo", selectedGroup);
-    setSelectedValue(selectedGroup);
+      if (matchingGroup) {
+        if (!chips.find(function (chip) {
+          return chip.key === matchingGroup.groupId;
+        })) {
+          setChips(function (prevChips) {
+            return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+              id: matchingGroup.groupId,
+              label: matchingGroup.groupName
+            }]);
+          });
+        }
+
+        addGroup(phaseId, groupsSelected);
+      }
+    });
   };
 
+  var handleNextPhaseSelect = function handleNextPhaseSelect() {
+    if (selectedValue.length > 0) {
+      var Id = selectedValue[0];
+      console.log("phaseId", Id);
+      var matchingPhase = phases.find(function (phase) {
+        return phase.phaseId === Id;
+      });
+      console.log("matchingPhase", matchingPhase);
+
+      if (matchingPhase) {
+        checkAvailablePhase(phaseId, matchingPhase.phaseId);
+      }
+    }
+  }; //checa si llega una fase que se tiene en otro lado 
+
+
+  var checkAvailablePhase = function checkAvailablePhase(phaseId, newNextPhase) {
+    var isNextPhaseUsed = phases.some(function (phase) {
+      return phase.nextPhaseIfApproved === newNextPhase;
+    });
+
+    if (isNextPhaseUsed) {
+      setModalData({
+        show: true,
+        className: "modal-next-phase",
+        message: "La fase ".concat(newNextPhase, " ya est\xE1 siendo utilizada como siguiente fase en otra fase."),
+        icon: "info",
+        customComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "container-input-name",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "La fase anterior se borrar\xE1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "\xBFEst\xE1s seguro?"
+          })]
+        }),
+        buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          type: "white",
+          label: "Cancelar",
+          size: 12,
+          onClick: function onClick() {
+            setModalData(function (prev) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                show: false
+              });
+            });
+          }
+        }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+          type: "pink",
+          label: "Aceptar",
+          size: 12,
+          onClick: function onClick() {
+            setModalData(function (prev) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                show: false
+              });
+            });
+          }
+        }, "btn-Aceptar")]
+      });
+    } else {
+      // Si la fase no está siendo utilizada, se actualizar la siguiente fase
+      updateNextPhase(phaseId, newNextPhase);
+    }
+  }; //eliminar chip
+
+
   var handleChipDelete = function handleChipDelete(phaseId, chipToRemove) {
     setGroupsSelected(function (prevGroups) {
       return prevGroups.filter(function (chip) {
@@ -255,21 +395,22 @@ var Phase = function Phase(_ref) {
       });
     });
     deleteGroup(phaseId, chipToRemove.id);
-  };
+  }; //eliminar grupo de fase
+
 
   var deleteGroup = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(phaseId, groupId) {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(phaseId, groupId) {
       var response;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              _context3.prev = 0;
+              _context5.prev = 0;
               console.log("grupo de fase", {
                 phaseId: phaseId,
                 groupId: groupId
               });
-              _context3.next = 4;
+              _context5.next = 4;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
                 deleteGroupOfPhase: {
                   phaseId: phaseId,
@@ -283,26 +424,26 @@ var Phase = function Phase(_ref) {
               });
 
             case 4:
-              response = _context3.sent;
+              response = _context5.sent;
               console.log("grupo eliminado correctamente");
-              _context3.next = 11;
+              _context5.next = 11;
               break;
 
             case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](0);
-              console.error("Error al eliminar grupo de fase:", _context3.t0);
+              _context5.prev = 8;
+              _context5.t0 = _context5["catch"](0);
+              console.error("Error al eliminar grupo de fase:", _context5.t0);
 
             case 11:
             case "end":
-              return _context3.stop();
+              return _context5.stop();
           }
         }
-      }, _callee3, null, [[0, 8]]);
+      }, _callee5, null, [[0, 8]]);
     }));
 
-    return function deleteGroup(_x4, _x5) {
-      return _ref4.apply(this, arguments);
+    return function deleteGroup(_x6, _x7) {
+      return _ref6.apply(this, arguments);
     };
   }();
 
@@ -315,14 +456,10 @@ var Phase = function Phase(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    onDragStart: onDragStart,
-    onDragOver: onDragOver,
-    onDragEnd: onDragEnd,
-    draggable: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-phase",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-        children: ["Fase ", idPhase, " - ", phaseName]
+        children: ["Fase ", phaseId, " - ", phaseName]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "text-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -331,13 +468,13 @@ var Phase = function Phase(_ref) {
             className: "text-phase",
             children: "Siguiente Fase "
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-            value: selectedValue !== "" ? selectedValue : nextPhaseState,
+            value: selectedValue.length > 0 ? selectedValue[0] : nextPhaseState ? nextPhaseState : "",
             placeholder: "Fase",
             onChange: function onChange(e) {
               var selectedPhase = phases.find(function (phase) {
                 return phase.phaseName === e.target.value;
               });
-              setSelectedValue(selectedPhase.nextPhaseIfApproved);
+              setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
             },
             sx: {
               minWidth: "100px",
@@ -404,16 +541,36 @@ var Phase = function Phase(_ref) {
           })]
         })
       })]
-    }, idPhase), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }, key), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "attributes-container",
-      children: chips.map(function (chip) {
+      children: [chips.map(function (chip) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomChip.CustomChip, {
           label: chip.label,
           onDelete: function onDelete() {
-            return handleChipDelete(idPhase, chip);
+            return handleChipDelete(phaseId, chip);
           }
         }, chip.id);
-      })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupSelect.GroupSelect, {
+        options: groups.filter(function (group) {
+          return group.groupActive === 0;
+        }).map(function (group) {
+          return {
+            id: group.groupId,
+            name: group.groupName
+          };
+        }),
+        showSearchBar: true,
+        isSingleSelect: false,
+        icon: _addv.default,
+        placeHolder: "Buscar grupo",
+        customSelectId: "category-select-" + groups.groupId,
+        defaultOption: "Todos los grupos",
+        parameterArray: groupsSelected,
+        setParameterArray: setGroupsSelected,
+        onClickItem: function onClickItem() {
+          handleGroupSelect();
+        }
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
       onClickBtnDefault: function onClickBtnDefault() {
         return setModalData(function (prev) {

package/dist/components/molecules/Phase/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)(["\n  display: flex;\n  flex-direction:column;\n  gap:10px;\n  align-items: center;\n  border-radius:10px;\n  border:1px solid ", ";\n  padding:10px 15px;\n  font-family:", ", sans-serif;\n  font-size:17px;\n\n .header-phase{\n  display:flex;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  h2{\n    font-family:", ", sans-serif;\n    font-size:17px;\n  }\n  p{\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n }\n .attributes-container{\n  display: flex;\n  align-self: flex-start;\n  flex-wrap: wrap;\n  gap: 10px;\n }\n .phase-sel{\n  display: flex;\n  align-items: center;\n  gap: 10px;\n }\n .button-circle{\n  width:30px;\n  height:30px;\n  padding:2px;\n  border-radius:100%;\n  min-width:30px;\n  border: 1px solid ", ";\n}\n.button-circle:hover {\n  border: 1px solid ", ";\n}\n.text-phase{\n  font-family:", ", sans-serif;\n  font-size:12px;\n  color:", ";\n}\n.text-button-container {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  button{\n    min-width: 5px;\n    cursor: pointer;\n  }\n}\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.FontFamily.Roboto, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Roboto, _variables.GlobalColors.gray);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction:column;\n  gap:10px;\n  align-items: center;\n  border-radius:10px;\n  border:1px solid ", ";\n  padding:10px 15px;\n  font-family:", ", sans-serif;\n  font-size:17px;\n\n .header-phase{\n  display:flex;\n  justify-content: space-between;\n  width: 100%;\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n\n  h2{\n    font-family:", ", sans-serif;\n    font-size:17px;\n  }\n  p{\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n }\n .attributes-container{\n  display: flex;\n  align-self: flex-start;\n  flex-wrap: wrap;\n  gap: 10px;\n }\n .phase-sel{\n  display: flex;\n  align-items: center;\n  gap: 10px;\n }\n .button-circle{\n  width:30px;\n  height:30px;\n  padding:2px;\n  border-radius:100%;\n  min-width:30px;\n  border: 1px solid ", ";\n}\n.button-circle:hover {\n  border: 1px solid ", ";\n}\n.text-phase{\n  font-family:", ", sans-serif;\n  font-size:12px;\n  color:", ";\n}\n.text-button-container {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  button{\n    min-width: 5px;\n    cursor: pointer;\n  }\n}\n.modal-next-phase .contentModal {\n  max-width: 250px;\n  .container-input-name p{\n    text-align:center;\n  }\n}\n"])), _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.GlobalColors.gray_light, _variables.FontFamily.Roboto, _variables.FontFamily.Roboto, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Roboto, _variables.GlobalColors.gray);
 
 exports.Container = Container;