code7-leia 0.1.140 → 0.1.143

package/dist/code7-leia.cjs.development.js

@@ -670,7 +670,7 @@ var getLanguage = function getLanguage(language) {
 
 var _templateObject$1, _templateObject2$1, _templateObject3;
 var Container = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n\n  .tag {\n    padding: 4px 8px 4px 8px;\n    background: #C7F9ED;\n    border-radius: 4px;\n  }\n\n  .tags {\n    display: flex;\n    justify-content: left;\n    gap: 4px;\n  }\n\n  .divDelete {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .buttonDelete {\n    color: #5b0a1f;\n    background: #fae0d2;\n    padding: 12px 20px;\n    border-radius: 4px;\n  }\n\n  .buttonDelete:hover {\n      background: #f5bba7;\n  }\n\n  .button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    gap: 10px;\n  }\n\n  .cancel {\n    background: #F3F5F9;\n    color: #5A5D68;\n  }\n\n  .send {\n    background: #102693;\n    color: white;\n  }\n\n  .delete {\n    background: #871821;\n    color: white;\n  }\n\n  .presset {\n    padding-top: 10px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  #warning {\n    padding: 10px;\n    background: #FAE0D2;\n    color: #871821;\n  }\n"])), function (props) {
-  return props.isLoading && styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n      #loading {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgb(151,154,165, 0.7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 9999;\n      }\n\n      #loading::after {\n        content: \"\";\n        border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n        border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    "])));
+  return props.isloading && styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n      #loading {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgb(151,154,165, 0.7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 9999;\n      }\n\n      #loading::after {\n        content: \"\";\n        border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n        border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    "])));
 });
 var Header = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n\n  .actions {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 14px;\n\n    button {\n      background: #102693;\n      padding: 10px 20px;\n      color: white;\n      border-radius: 4px;\n    }\n  }\n\n"])));
 
@@ -696,19 +696,19 @@ var Spinner = function Spinner(_ref) {
   }, React__default.createElement("span", null), React__default.createElement("span", null), React__default.createElement("span", null), React__default.createElement("span", null));
 };
 
-var _excluded$1 = ["size", "children", "isLoading", "className"];
+var _excluded$1 = ["size", "children", "isloading", "className"];
 var Table$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     children = _ref.children,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isloading = _ref.isloading,
+    isloading = _ref$isloading === void 0 ? false : _ref$isloading,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React__default.createElement(TableWrapper, {
     className: className
-  }, isLoading ? React__default.createElement(TableLoadingWrapper, null, React__default.createElement(Spinner, null)) : null, React__default.createElement(Table, Object.assign({
+  }, isloading ? React__default.createElement(TableLoadingWrapper, null, React__default.createElement(Spinner, null)) : null, React__default.createElement(Table, Object.assign({
     className: cc([size]),
     ref: ref
   }, props), children));
@@ -717,7 +717,7 @@ Table$1.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   size: /*#__PURE__*/PropTypes.oneOf(['small', 'medium', 'large']),
-  isLoading: PropTypes.bool
+  isloading: PropTypes.bool
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$2;
@@ -749,32 +749,32 @@ var SearchInput = function SearchInput(_ref) {
 
 var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  cursor: ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ", ";\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n"])), function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen === 1 ? 'flex' : 'none';
+  var isopen = _ref.isopen;
+  return isopen === 1 ? 'flex' : 'none';
 }, function (_ref2) {
-  var isFixed = _ref2.isFixed;
-  return isFixed === 0 ? 'pointer' : 'default';
+  var isfixed = _ref2.isfixed;
+  return isfixed === 0 ? 'pointer' : 'default';
 }, function (_ref3) {
-  var zIndex = _ref3.zIndex;
-  return zIndex;
+  var zindex = _ref3.zindex;
+  return zindex;
 });
 var Modal = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ", ";\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n"])), function (_ref4) {
-  var maxWidth = _ref4.maxWidth;
-  return maxWidth;
+  var maxwidth = _ref4.maxwidth;
+  return maxwidth;
 });
 var ModalContainer = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
-  var maxHeight = _ref5.maxHeight;
-  return maxHeight;
+  var maxheight = _ref5.maxheight;
+  return maxheight;
 });
 var ModalHeader = /*#__PURE__*/styled__default.header(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n"])));
 var ModalTitle = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n"])));
 var ModalButtonClose = /*#__PURE__*/styled__default.button(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n"])));
 var ModalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: ", ";\n  max-height: ", ";\n  padding: var(--spacement-medium);\n"])), function (_ref6) {
-  var overflowY = _ref6.overflowY;
-  return overflowY;
+  var overflowy = _ref6.overflowy;
+  return overflowy;
 }, function (_ref7) {
-  var maxHeight = _ref7.maxHeight;
-  return maxHeight;
+  var maxheight = _ref7.maxheight;
+  return maxheight;
 });
 var ModalFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: var(--spacement-medium);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacement-medium);\n"])));
 
@@ -788,61 +788,61 @@ ModalFooter.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-var _excluded$3 = ["children", "maxHeight", "overflowY"];
+var _excluded$3 = ["children", "maxheight", "overflowy"];
 var ModalContent = function ModalContent(_ref) {
   var children = _ref.children,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? 'max-content' : _ref$maxHeight,
-    _ref$overflowY = _ref.overflowY,
-    overflowY = _ref$overflowY === void 0 ? 'initial' : _ref$overflowY,
+    _ref$maxheight = _ref.maxheight,
+    maxheight = _ref$maxheight === void 0 ? 'max-content' : _ref$maxheight,
+    _ref$overflowy = _ref.overflowy,
+    overflowy = _ref$overflowy === void 0 ? 'initial' : _ref$overflowy,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return React__default.createElement(ModalContentWrapper, Object.assign({
-    maxHeight: maxHeight,
-    overflowY: overflowY
+    maxheight: maxheight,
+    overflowy: overflowy
   }, rest), children);
 };
 ModalContent.propTypes = {
   children: PropTypes.node.isRequired,
-  maxHeight: PropTypes.string,
-  overflowY: PropTypes.string
+  maxheight: PropTypes.string,
+  overflowy: PropTypes.string
 };
 
 var Modal$1 = function Modal$1(_ref) {
-  var isOpen = _ref.isOpen,
+  var isopen = _ref.isopen,
     style = _ref.style,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
+    maxwidth = _ref.maxwidth,
+    maxheight = _ref.maxheight,
     className = _ref.className,
     title = _ref.title,
     children = _ref.children,
     onClose = _ref.onClose,
     contentStyle = _ref.contentStyle,
-    isFixed = _ref.isFixed,
-    zIndex = _ref.zIndex;
+    isfixed = _ref.isfixed,
+    zindex = _ref.zindex;
   var modalRef = React.useRef(null);
   var handleKeyUp = React.useCallback(function (e) {
     var keys = {
       // ESC Key
       27: function _() {
         e.preventDefault();
-        if (!isFixed && onClose) {
+        if (!isfixed && onClose) {
           onClose();
         }
         window.removeEventListener('keyup', handleKeyUp, false);
       }
     };
-    if (keys[e.keyCode] && isOpen) {
+    if (keys[e.keyCode] && isopen) {
       keys[e.keyCode]();
     }
-  }, [onClose, isOpen, isFixed]);
+  }, [onClose, isopen, isfixed]);
   var handleOutsideClick = React.useCallback(function (e) {
     if (modalRef.current && modalRef.current.parentNode === e.target) {
-      if (!isFixed && onClose) {
+      if (!isfixed && onClose) {
         onClose();
       }
       document.removeEventListener('click', handleOutsideClick, false);
     }
-  }, [onClose, isFixed]);
+  }, [onClose, isfixed]);
   React.useEffect(function () {
     window.addEventListener('keyup', handleKeyUp, false);
     document.addEventListener('click', handleOutsideClick, false);
@@ -852,17 +852,17 @@ var Modal$1 = function Modal$1(_ref) {
     };
   }, [handleKeyUp, handleOutsideClick]);
   return React__default.createElement(FullScreen, {
-    isFixed: isFixed ? 1 : 0,
-    isOpen: isOpen ? 1 : 0,
-    zIndex: zIndex != null ? zIndex : 0
+    isfixed: isfixed ? 1 : 0,
+    isopen: isopen ? 1 : 0,
+    zindex: zindex != null ? zindex : 0
   }, React__default.createElement(Modal, {
     ref: modalRef,
     style: style,
-    maxWidth: maxWidth,
+    maxwidth: maxwidth,
     className: className
   }, React__default.createElement(ModalContainer, {
     className: "styleOverlay",
-    maxHeight: maxHeight,
+    maxheight: maxheight,
     style: contentStyle
   }, React__default.createElement(ModalHeader, null, React__default.createElement(ModalTitle, null, String(title)), React__default.createElement(ModalButtonClose, {
     type: "button",
@@ -873,43 +873,43 @@ var Modal$1 = function Modal$1(_ref) {
   }))), children)));
 };
 Modal$1.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
+  isopen: PropTypes.bool.isRequired,
   title: /*#__PURE__*/PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.func]),
   children: PropTypes.node.isRequired,
   onClose: PropTypes.func,
   style: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
   contentStyle: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
   className: PropTypes.string,
-  maxWidth: PropTypes.string,
-  maxHeight: PropTypes.string,
-  isFixed: PropTypes.bool,
-  zIndex: PropTypes.number
+  maxwidth: PropTypes.string,
+  maxheight: PropTypes.string,
+  isfixed: PropTypes.bool,
+  zindex: PropTypes.number
 };
 Modal$1.defaultProps = {
   title: '',
   style: {},
   contentStyle: {},
   className: '',
-  maxWidth: '360px',
-  maxHeight: 'max-content',
-  isFixed: false,
+  maxwidth: '360px',
+  maxheight: 'max-content',
+  isfixed: false,
   onClose: function onClose() {},
-  zIndex: 9999
+  zindex: 9999
 };
 
 var _templateObject$6;
 var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
-  var hasBorder = _ref.hasBorder;
-  return hasBorder && "linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
+  var hasborder = _ref.hasborder;
+  return hasborder && "linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
 }, function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  var backgroundcolor = _ref2.backgroundcolor;
+  return backgroundcolor;
 }, function (_ref3) {
-  var backgroundIcon = _ref3.backgroundIcon;
-  return backgroundIcon;
+  var backgroundicon = _ref3.backgroundicon;
+  return backgroundicon;
 });
 
-var _excluded$4 = ["icon", "title", "description", "activeButton", "iconButton", "descriptionButton", "widthButton", "button", "backgroundIcon", "backgroundColor", "hasBorder"];
+var _excluded$4 = ["icon", "title", "description", "activeButton", "iconButton", "descriptionButton", "widthButton", "button", "backgroundIcon", "backgroundColor", "hasborder"];
 var EmptyState = function EmptyState(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
@@ -919,12 +919,12 @@ var EmptyState = function EmptyState(_ref) {
     button = _ref.button,
     backgroundIcon = _ref.backgroundIcon,
     backgroundColor = _ref.backgroundColor,
-    hasBorder = _ref.hasBorder,
+    hasborder = _ref.hasborder,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React__default.createElement(Container$1, Object.assign({
-    backgroundIcon: backgroundIcon,
-    backgroundColor: backgroundColor,
-    hasBorder: hasBorder
+    backgroundicon: backgroundIcon,
+    backgroundcolor: backgroundColor,
+    hasborder: hasborder
   }, rest), React__default.createElement("div", {
     className: "content"
   }, React__default.createElement("div", {
@@ -944,7 +944,7 @@ EmptyState.propTypes = {
   button: PropTypes.element,
   backgroundIcon: PropTypes.string,
   backgroundColor: PropTypes.string,
-  hasBorder: PropTypes.bool
+  hasborder: PropTypes.bool
 };
 EmptyState.defaultProps = {
   icon: '',
@@ -955,7 +955,7 @@ EmptyState.defaultProps = {
   widthButton: '140px',
   backgroundIcon: 'var(--neutral-0)',
   backgroundColor: 'var(--absolute-white)',
-  hasBorder: true
+  hasborder: true
 };
 
 var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$1, _templateObject5$1;
@@ -1401,8 +1401,8 @@ var FileArea = function FileArea() {
   var initFiles = reactRedux.useSelector(function (state) {
     return state.files;
   });
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.isLoading;
+  var isloading = reactRedux.useSelector(function (state) {
+    return state.isloading;
   });
   var tags = propTags ? propTags.tags : [];
   React.useEffect(function () {
@@ -1469,7 +1469,7 @@ var FileArea = function FileArea() {
   };
   var renderFiles = function renderFiles() {
     return React__default.createElement(Container, {
-      isLoading: isLoading
+      isloading: isloading
     }, React__default.createElement("div", {
       id: 'loading'
     }), React__default.createElement(Header, null, React__default.createElement("div", {
@@ -1496,10 +1496,13 @@ var FileArea = function FileArea() {
       descriptionButton: t.fileArea.modal.chooseFile,
       widthButton: "230px"
     }) : React__default.createElement(Table$1, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+      key: "th_file_name",
       className: "th_file_name"
     }, t.fileArea.fileName), React__default.createElement("th", {
+      key: "th_pressets",
       className: "th_pressets"
     }, t.fileArea.presset), React__default.createElement("th", {
+      key: "th_actions",
       className: "th_actions"
     }, t.fileArea.actions))), React__default.createElement("tbody", null, files.map(function (object) {
       return React__default.createElement("tr", null, React__default.createElement("td", null, object.name), React__default.createElement("td", {
@@ -1516,9 +1519,9 @@ var FileArea = function FileArea() {
         }
       }, t.buttons["delete"]))));
     }))), React__default.createElement(Modal$1, {
-      isOpen: modal,
-      maxWidth: "600px",
-      maxHeight: "max-content",
+      isopen: modal,
+      maxwidth: "600px",
+      maxheight: "max-content",
       onClose: handleOpenModal,
       title: t.fileArea.modal.uploadFile
     }, React__default.createElement(ModalContent, null, React__default.createElement("div", {
@@ -1545,9 +1548,9 @@ var FileArea = function FileArea() {
       type: "submit",
       form: "form-tts"
     }, t.buttons.send))), React__default.createElement(Modal$1, {
-      isOpen: modalDelete,
-      maxWidth: "600px",
-      maxHeight: "max-content",
+      isopen: modalDelete,
+      maxwidth: "600px",
+      maxheight: "max-content",
       onClose: function onClose() {
         return handleOpenModalDelete('');
       },
@@ -1581,7 +1584,7 @@ var FileArea = function FileArea() {
 
 var _templateObject$9, _templateObject2$6, _templateObject3$5, _templateObject4$2, _templateObject5$2;
 var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n"])), function (props) {
-  return props.isLoading && styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n      #loading {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgb(151,154,165, 0.7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 9999;\n      }\n\n      #loading::after {\n        content: \"\";\n        border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n        border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    "])));
+  return props.isloading && styled.css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n      #loading {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: rgb(151,154,165, 0.7);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 9999;\n      }\n\n      #loading::after {\n        content: \"\";\n        border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n        border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    "])));
 });
 var Header$1 = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
 var Inputs = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
@@ -1648,8 +1651,8 @@ var TestArea = function TestArea() {
   var results = reactRedux.useSelector(function (state) {
     return state.message;
   });
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.isLoading;
+  var isloading = reactRedux.useSelector(function (state) {
+    return state.isloading;
   });
   var _useState = React.useState(''),
     search = _useState[0],
@@ -1662,9 +1665,6 @@ var TestArea = function TestArea() {
     setPresset = _useState3[1];
   var dispatch = reactRedux.useDispatch();
   var tags = propTags ? propTags.tags : [];
-  React.useEffect(function () {
-    console.log('isLoading: ', isLoading);
-  }, [isLoading]);
   var optionsPersona = personas && personas.map(function (persona) {
     return {
       label: persona.name,
@@ -1694,8 +1694,10 @@ var TestArea = function TestArea() {
   };
   var returnTest = function returnTest() {
     return React__default.createElement(Container$3, {
-      isLoading: isLoading
-    }, React__default.createElement(Header$1, null, React__default.createElement("div", {
+      isloading: isloading
+    }, React__default.createElement("div", {
+      id: 'loading'
+    }), React__default.createElement(Header$1, null, React__default.createElement("div", {
       className: 'infos'
     }, React__default.createElement("h2", null, t.test), React__default.createElement("p", null, t.testArea.description))), React__default.createElement(Inputs, null, React__default.createElement(InputTest, {
       placeholder: t.testArea.typeSentence,
@@ -1779,7 +1781,7 @@ var Leia = function Leia(props) {
 var INITIAL_STATE = {
   files: [],
   message: '',
-  isLoading: false,
+  isloading: false,
   isChanging: false,
   isOffline: true
 };
@@ -1799,10 +1801,10 @@ function filesReducer(state, action) {
         draft.message = action.payload.message;
         break;
       case Types.LOADING_START:
-        draft.isLoading = true;
+        draft.isloading = true;
         break;
       case Types.LOADING_FINISH:
-        draft.isLoading = false;
+        draft.isloading = false;
         break;
       case Types.CHANGING_START:
         draft.isChanging = true;