contentoh-components-library 21.4.124 → 21.4.125

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

@@ -0,0 +1,675 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Phase = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _material = require("@mui/material");
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _Modal = require("../../organisms/Modal");
+
+var _CustomChip = require("../../atoms/CustomChip");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _options = _interopRequireDefault(require("../../../assets/images/Icons/options.svg"));
+
+var _AddGroup = require("../AddGroup");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+//Componentes
+//svg
+var Phase = function Phase(_ref) {
+  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,
+      token = _ref.token,
+      _ref$showMenu = _ref.showMenu,
+      showMenu = _ref$showMenu === void 0 ? true : _ref$showMenu,
+      _ref$showButtonChip = _ref.showButtonChip,
+      showButtonChip = _ref$showButtonChip === void 0 ? true : _ref$showButtonChip;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chips = _useState4[0],
+      setChips = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      groupsSelected = _useState6[0],
+      setGroupsSelected = _useState6[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 _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      nextPhaseState = _useState8[0],
+      setNextPhaseState = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      tempChips = _useState10[0],
+      setTempChips = _useState10[1];
+
+  var open = Boolean(anchorEl);
+
+  var _useState11 = (0, _react.useState)({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success"
+  }),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      modalData = _useState12[0],
+      setModalData = _useState12[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);
+              }
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function loadData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    loadData();
+  }, [groups]);
+  (0, _react.useEffect)(function () {
+    loadData();
+  }, [nextPhase, phases]);
+  (0, _react.useEffect)(function () {
+    handleGroupSelect();
+  }, [groupsSelected]);
+  (0, _react.useEffect)(function () {
+    handleNextPhaseSelect();
+  }, [selectedValue]); //agregar fase
+
+  var onAdd = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phaseId) {
+      var updatedGroups;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (selectedValue && !groupsSelected.includes(selectedValue)) {
+                updatedGroups = groups.map(function (group) {
+                  return group.groupName === selectedValue ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+                    groupActive: 1
+                  }) : group;
+                });
+                setTempChips(function (prevChips) {
+                  return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+                    id: phaseId,
+                    label: selectedValue
+                  }]);
+                });
+                setGroupsSelected(function (prevGroups) {
+                  return [].concat((0, _toConsumableArray2.default)(prevGroups), [selectedValue]);
+                });
+                setSelectedValue("");
+                loadData();
+              }
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    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
+                }
+              });
+
+            case 3:
+              response = _context3.sent;
+              console.log(response.data.body);
+              loadData();
+              _context3.next = 11;
+              break;
+
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](0);
+              console.error("Error al agregar grupo a fase:", _context3.t0);
+
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 8]]);
+    }));
+
+    return function addGroup(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }(); //actualiza siguiente fase
+
+
+  var updateNextPhase = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(phaseId, newNextPhase) {
+      var response;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.prev = 0;
+              console.log("fase y grupos", {
+                phaseId: phaseId,
+                newNextPhase: newNextPhase
+              });
+              _context4.next = 4;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/update"), {
+                nextPhaseId: newNextPhase,
+                phaseId: phaseId
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              response = _context4.sent;
+              console.log(response.data.body);
+              _context4.next = 11;
+              break;
+
+            case 8:
+              _context4.prev = 8;
+              _context4.t0 = _context4["catch"](0);
+              console.error("Error al actualizar grupo de fase:", _context4.t0);
+
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[0, 8]]);
+    }));
+
+    return function updateNextPhase(_x4, _x5) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var handleGroupSelect = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var _iterator, _step, _loop;
+
+      return _regenerator.default.wrap(function _callee5$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _iterator = (0, _createForOfIteratorHelper2.default)(groupsSelected);
+              _context6.prev = 1;
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                var groupId, matchingGroup;
+                return _regenerator.default.wrap(function _loop$(_context5) {
+                  while (1) {
+                    switch (_context5.prev = _context5.next) {
+                      case 0:
+                        groupId = _step.value;
+                        matchingGroup = groups.find(function (group) {
+                          return group.groupId === groupId;
+                        });
+
+                        if (!matchingGroup) {
+                          _context5.next = 6;
+                          break;
+                        }
+
+                        if (!tempChips.find(function (chip) {
+                          return chip.key === matchingGroup.groupId;
+                        })) {
+                          setTempChips(function (prevChips) {
+                            return [].concat((0, _toConsumableArray2.default)(prevChips), [{
+                              id: matchingGroup.groupId,
+                              label: matchingGroup.groupName
+                            }]);
+                          });
+                        }
+
+                        _context5.next = 6;
+                        return addGroup(phaseId, [groupId]);
+
+                      case 6:
+                      case "end":
+                        return _context5.stop();
+                    }
+                  }
+                }, _loop);
+              });
+
+              _iterator.s();
+
+            case 4:
+              if ((_step = _iterator.n()).done) {
+                _context6.next = 8;
+                break;
+              }
+
+              return _context6.delegateYield(_loop(), "t0", 6);
+
+            case 6:
+              _context6.next = 4;
+              break;
+
+            case 8:
+              _context6.next = 13;
+              break;
+
+            case 10:
+              _context6.prev = 10;
+              _context6.t1 = _context6["catch"](1);
+
+              _iterator.e(_context6.t1);
+
+            case 13:
+              _context6.prev = 13;
+
+              _iterator.f();
+
+              return _context6.finish(13);
+
+            case 16:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee5, null, [[1, 10, 13, 16]]);
+    }));
+
+    return function handleGroupSelect() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  var handleNextPhaseSelect = function handleNextPhaseSelect() {
+    if (selectedValue.length > 0) {
+      var Id = selectedValue[0];
+      var matchingPhase = phases.find(function (phase) {
+        return phase.phaseId === Id;
+      });
+
+      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 = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(phaseId, chipToRemove) {
+      return _regenerator.default.wrap(function _callee6$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              setGroupsSelected(function (prevGroups) {
+                return prevGroups.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              setChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              setTempChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== chipToRemove.id;
+                });
+              });
+              _context7.next = 5;
+              return deleteGroup(phaseId, chipToRemove.id);
+
+            case 5:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee6);
+    }));
+
+    return function handleChipDelete(_x6, _x7) {
+      return _ref7.apply(this, arguments);
+    };
+  }(); //eliminar grupo de fase
+
+
+  var deleteGroup = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(phaseId, groupId) {
+      var response;
+      return _regenerator.default.wrap(function _callee7$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.prev = 0;
+              _context8.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/delete"), {
+                deleteGroupOfPhase: {
+                  phaseId: phaseId,
+                  groupId: groupId
+                }
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              response = _context8.sent;
+              console.log("grupo eliminado correctamente");
+              loadData();
+              setTempChips(function (prevChips) {
+                return prevChips.filter(function (chip) {
+                  return chip.id !== groupId;
+                });
+              });
+              _context8.next = 12;
+              break;
+
+            case 9:
+              _context8.prev = 9;
+              _context8.t0 = _context8["catch"](0);
+              console.error("Error al eliminar grupo de fase:", _context8.t0);
+
+            case 12:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee7, null, [[0, 9]]);
+    }));
+
+    return function deleteGroup(_x8, _x9) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "header-phase",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+        children: ["Fase ", id, " - ", phaseName]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "text-button-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "phase-sel",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "text-phase",
+            children: "Siguiente Fase "
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            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 ? [selectedPhase.phaseId] : []);
+            },
+            sx: {
+              minWidth: "100px",
+              height: "24px",
+              background: "#F7F7FC",
+              borderRadius: "5px",
+              fontSize: "12px"
+            },
+            MenuProps: {
+              PaperProps: {
+                style: {
+                  background: "#F7F7FC"
+                }
+              }
+            },
+            children: phases.map(function (phase) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: phase.phaseName,
+                sx: {
+                  fontSize: "12px",
+                  color: "#262626",
+                  minHeight: "auto"
+                },
+                children: phase.phaseName
+              }, phase.phaseId);
+            })
+          }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              id: "basic-button",
+              "aria-controls": open ? "basic-menu" : undefined,
+              "aria-haspopup": "true",
+              "aria-expanded": open ? "true" : undefined,
+              onClick: function onClick(e) {
+                return handleClick(e);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _options.default,
+                alt: ""
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+              id: "basic-menu",
+              anchorEl: anchorEl,
+              open: open,
+              onClose: handleClose,
+              MenuListProps: {
+                "aria-labelledby": "basic-button"
+              },
+              sx: {
+                ul: {
+                  paddingTop: "0px",
+                  paddingBottom: "0px"
+                }
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                onClick: function onClick() {
+                  return onDeletePhase(id);
+                },
+                sx: {
+                  fontSize: "12px",
+                  color: "#262626",
+                  minHeight: "auto"
+                },
+                children: "Eliminar Fase"
+              })
+            })]
+          })]
+        })
+      })]
+    }, key), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attributes-container",
+      children: [chips.map(function (chip) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomChip.CustomChip, {
+          label: chip.label,
+          onDelete: function onDelete() {
+            return handleChipDelete(phaseId, chip);
+          },
+          showDelete: showButtonChip
+        }, chip.id);
+      }), showButtonChip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddGroup.AddGroup, {
+        id: "add-group-select-".concat(phaseId),
+        items: groups.filter(function (group) {
+          return group.groupActive === 0;
+        }).map(function (group) {
+          return {
+            value: group.groupId,
+            label: group.groupName
+          };
+        }),
+        defaultOption: "Todos los grupos",
+        placeholder: "Buscar grupo",
+        onChange: function onChange(selectedItems) {
+          setGroupsSelected(selectedItems);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, modalData), {}, {
+      onClickBtnDefault: function onClickBtnDefault() {
+        return setModalData(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
+    }))]
+  });
+};
+
+exports.Phase = Phase;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = 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, _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.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;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\ncursor: pointer;\n@font-face {\n  font-family: \"Material Symbols Outlined\";\n  font-style: normal;\n  font-weight: 100 700;\n  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n    format(\"woff2\");\n}\n.iconos-out {\n  font-family: \"Material Symbols Outlined\";\n  font-size: 20px;\n  //line-height: 1;\n  margin-top: 10px;\n}\n.iconos-out {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  #B64545;\n}\n.iconos-grises {\n  font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n  color:  ", ";\n}"])), _variables.GlobalColors.magenta_s2);
+
+exports.ContainerIcon = ContainerIcon;