code7-leia 0.1.120 → 0.1.123

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

@@ -720,11 +720,6 @@ Table$1.propTypes = {
   isLoading: PropTypes.bool
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$2;
-var InputContainer = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 300px;\n"])));
-var Input = /*#__PURE__*/styled__default.input(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
-var IconContainer = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  pointer-events: none;\n"])));
-
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
     setFiles = _ref.setFiles,
@@ -738,17 +733,36 @@ var SearchInput = function SearchInput(_ref) {
     });
     setFiles(searchTerm !== '' ? newFiles : initialFiles);
   };
-  return React__default.createElement(InputContainer, null, React__default.createElement(Input, {
+  return React__default.createElement("div", {
+    style: {
+      position: 'relative',
+      width: '300px'
+    }
+  }, React__default.createElement("input", {
     type: "text",
     onChange: function onChange(e) {
       return searchName(e);
     },
-    placeholder: placeholder
-  }), React__default.createElement(IconContainer, null, React__default.createElement(fa.FaSearch, null)));
+    placeholder: placeholder,
+    style: {
+      paddingLeft: '40px',
+      borderRadius: '5px',
+      border: '1px solid #ccc',
+      height: '40px',
+      width: '100%'
+    }
+  }), React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '10px',
+      left: '10px',
+      pointerEvents: 'none'
+    }
+  }, React__default.createElement(fa.FaSearch, null)));
 };
 
-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 _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__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';
 }, function (_ref2) {
@@ -758,11 +772,11 @@ var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templat
   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 Modal = /*#__PURE__*/styled__default.div(_templateObject2$3 || (_templateObject2$3 = /*#__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 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 ModalContainer = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
   var maxHeight = _ref5.maxHeight;
   return maxHeight;
 });
@@ -897,8 +911,8 @@ Modal$1.defaultProps = {
   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 _templateObject$5;
+var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__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%)";
 }, function (_ref2) {
@@ -958,59 +972,85 @@ EmptyState.defaultProps = {
   hasBorder: true
 };
 
-var _templateObject$7;
-var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
+var _templateObject$6, _templateObject2$4, _templateObject3$3, _templateObject4$1, _templateObject5$1;
+var MultiSelectWrapper = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 200px;\n"])));
+var SelectBox = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  select {\n    width: 100%;\n    font-weight: bold;\n  }\n"])));
+var OverSelect = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n"])));
+var Checkboxes = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  border: 1px #dadada solid;\n"])));
+var CheckboxLabel = /*#__PURE__*/styled__default.label(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  &:hover {\n    background-color: #1e90ff;\n  }\n"])));
 
-var Select = function Select(_ref) {
+var MultiSelect = function MultiSelect(_ref) {
   var options = _ref.options,
-    onSelect = _ref.onSelect,
-    onMultiSelect = _ref.onMultiSelect,
-    placeholder = _ref.placeholder,
-    multiValue = _ref.multiValue;
-  var initialSelectedValue = multiValue ? [] : '';
-  var _useState = React.useState(initialSelectedValue),
-    selectedValues = _useState[0],
-    setSelectedValues = _useState[1];
-  var handleSelectChange = function handleSelectChange(event) {
-    var selectedOption = event.target.value;
-    if (multiValue && onMultiSelect) {
-      // Verifica se onMultiSelect está definido antes de chamá-lo
-      var selectedOptions = Array.from(event.target.selectedOptions).map(function (option) {
-        return option.value;
-      });
-      setSelectedValues(selectedOptions);
-      onMultiSelect(selectedOptions);
-    } else if (onSelect) {
-      // Verifica se onSelect está definido antes de chamá-lo
-      setSelectedValues(selectedOption);
-      onSelect(selectedOption);
+    presset = _ref.presset,
+    setPresset = _ref.setPresset;
+  var _useState = React.useState(false),
+    expanded = _useState[0],
+    setExpanded = _useState[1];
+  var _useState2 = React.useState(''),
+    newOption = _useState2[0],
+    setNewOption = _useState2[1];
+  var handleCheckboxChange = function handleCheckboxChange(value) {
+    setPresset(function (prevPresset) {
+      if (prevPresset.includes(value)) {
+        return prevPresset.filter(function (val) {
+          return val !== value;
+        });
+      } else {
+        return [].concat(prevPresset, [value]);
+      }
+    });
+  };
+  var showCheckboxes = function showCheckboxes() {
+    setExpanded(!expanded);
+  };
+  var handleInputChange = function handleInputChange(event) {
+    setNewOption(event.target.value);
+  };
+  var handleInputKeyPress = function handleInputKeyPress(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (newOption.trim() !== '' && !options.some(function (option) {
+        return option.value === newOption;
+      })) {
+        setPresset(function (prevPresset) {
+          return [].concat(prevPresset, [newOption]);
+        });
+      }
+      setNewOption('');
     }
   };
-  return React__default.createElement(Container$2, null, multiValue ? React__default.createElement("select", {
-    multiple: true,
-    value: selectedValues,
-    onChange: handleSelectChange
-  }, options.map(function (option) {
-    return React__default.createElement("option", {
-      key: option.value,
-      value: String(option.value)
-    }, option.label);
-  })) : React__default.createElement("select", {
-    value: selectedValues,
-    onChange: handleSelectChange
-  }, React__default.createElement("option", {
-    value: "",
-    disabled: true,
-    hidden: true
-  }, placeholder), options.map(function (option) {
-    return React__default.createElement("option", {
-      key: option.value,
-      value: String(option.value)
-    }, option.label);
+  return React__default.createElement("form", null, React__default.createElement(MultiSelectWrapper, null, React__default.createElement(SelectBox, {
+    onClick: showCheckboxes
+  }, React__default.createElement("select", null, React__default.createElement("option", null, "Select an option")), React__default.createElement(OverSelect, null)), React__default.createElement(Checkboxes, {
+    style: {
+      display: expanded ? 'block' : 'none'
+    }
+  }, options.map(function (option, index) {
+    return React__default.createElement(CheckboxLabel, {
+      key: index,
+      htmlFor: option.value
+    }, React__default.createElement("input", {
+      type: "checkbox",
+      id: option.value,
+      checked: presset.includes(option.value),
+      onChange: function onChange() {
+        return handleCheckboxChange(option.value);
+      }
+    }), option.label);
+  }), React__default.createElement("input", {
+    type: "text",
+    placeholder: "Add new option",
+    value: newOption,
+    onChange: handleInputChange,
+    onKeyPress: handleInputKeyPress
+  }))), React__default.createElement("div", null, "Selected Options:", presset.map(function (selectedOption, index) {
+    return React__default.createElement("span", {
+      key: index
+    }, selectedOption, ", ");
   })));
 };
 
-var _templateObject$8;
+var _templateObject$7;
 var getColor = function getColor(props) {
   if (props.isDragAccept) {
     return '#6690ff';
@@ -1023,7 +1063,7 @@ var getColor = function getColor(props) {
   }
   return '#979aa5';
 };
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #f3f5f9;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 20px;\n  border-width: 2px;\n  border-radius: 4px;\n  border-color: var(", ");\n  border-style: dashed;\n  color: #5a5d68;\n  outline: none;\n  transition: border 0.24s ease-in-out;\n\n  & > span {\n    margin: 8px 10px 0 0;\n    display: flex;\n  }\n\n  button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    border: 2px #102693 solid;\n    margin-top: 10px;\n  }\n"])), function (props) {
+var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #f3f5f9;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 20px;\n  border-width: 2px;\n  border-radius: 4px;\n  border-color: var(", ");\n  border-style: dashed;\n  color: #5a5d68;\n  outline: none;\n  transition: border 0.24s ease-in-out;\n\n  & > span {\n    margin: 8px 10px 0 0;\n    display: flex;\n  }\n\n  button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    border: 2px #102693 solid;\n    margin-top: 10px;\n  }\n"])), function (props) {
   return getColor(props);
 });
 
@@ -1088,14 +1128,14 @@ var AreaUpload = function AreaUpload(_ref) {
     isDragActive = _useDropzone.isDragActive,
     isDragAccept = _useDropzone.isDragAccept,
     isDragReject = _useDropzone.isDragReject;
-  return React__default.createElement(React__default.Fragment, null, multipleFile || (myFiles == null ? void 0 : myFiles.length) === 0 ? React__default.createElement(Container$3, Object.assign({}, getRootProps({
+  return React__default.createElement(React__default.Fragment, null, console.log('!!file: ', !!file), console.log('file: ', file), multipleFile || (myFiles == null ? void 0 : myFiles.length) === 0 || !!file ? React__default.createElement(Container$2, Object.assign({}, getRootProps({
     isDragActive: isDragActive,
     isDragAccept: isDragAccept,
     isDragReject: isDragReject
   })), React__default.createElement("input", Object.assign({}, getInputProps())), React__default.createElement("span", null, React__default.createElement("p", null, t.fileArea.modal.descriptionUpload)), React__default.createElement("button", {
     type: "button",
     onClick: open
-  }, t.fileArea.modal.chooseFile)) : React__default.createElement(Container$3, Object.assign({}, getRootProps({
+  }, t.fileArea.modal.chooseFile)) : React__default.createElement(Container$2, Object.assign({}, getRootProps({
     isDragActive: isDragActive,
     isDragAccept: isDragAccept,
     isDragReject: isDragReject
@@ -1364,9 +1404,6 @@ var FileArea = function FileArea() {
     return state.isLoading;
   });
   var tags = propTags ? propTags.tags : [];
-  var handleSelectPresset = function handleSelectPresset(value) {
-    setPresset(value);
-  };
   React.useEffect(function () {
     dispatch(getFilesAction(id));
   }, [id]);
@@ -1473,11 +1510,10 @@ var FileArea = function FileArea() {
       file: uploadFile == null ? void 0 : uploadFile.properties.name
     })), React__default.createElement("div", {
       className: 'presset'
-    }, React__default.createElement("p", null, "Presset"), React__default.createElement(Select, {
-      placeholder: t.testArea.selectPresset,
+    }, React__default.createElement("p", null, "Presset"), React__default.createElement(MultiSelect, {
       options: optionsPresset,
-      multiValue: true,
-      onMultiSelect: handleSelectPresset
+      presset: presset,
+      setPresset: setPresset
     }))), React__default.createElement(ModalFooter, null, React__default.createElement("button", {
       className: 'button cancel',
       onClick: handleOpenModal
@@ -1520,19 +1556,49 @@ var FileArea = function FileArea() {
   }, React__default.createElement(Container, null, renderFiles()));
 };
 
-var _templateObject$9, _templateObject2$5, _templateObject3$4, _templateObject4$1, _templateObject5$1;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n"])), function (props) {
+var _templateObject$8, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$2;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n"])), function (props) {
   return props.isLoading && styled.css(_templateObject2$5 || (_templateObject2$5 = _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$4 || (_templateObject3$4 = /*#__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$1 || (_templateObject4$1 = /*#__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"])));
-var Result = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\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"])));
+var Result = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
+
+var _templateObject$9;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
+
+var Select = function Select(_ref) {
+  var options = _ref.options,
+    onSelect = _ref.onSelect,
+    placeholder = _ref.placeholder;
+  var _useState = React.useState(''),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleSelectChange = function handleSelectChange(event) {
+    var selectedOption = event.target.value;
+    setSelectedValue(selectedOption);
+    onSelect(selectedOption);
+  };
+  return React__default.createElement(Container$4, null, React__default.createElement("select", {
+    value: selectedValue,
+    onChange: handleSelectChange
+  }, React__default.createElement("option", {
+    value: "",
+    disabled: true,
+    hidden: true
+  }, placeholder), options.map(function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  })));
+};
 
-var _templateObject$a, _templateObject2$6, _templateObject3$5, _templateObject4$2;
+var _templateObject$a, _templateObject2$6, _templateObject3$5, _templateObject4$3;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
 var StyledInput = /*#__PURE__*/styled__default.input(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
 var RecordAudioButton = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
-var StyledMicrophoneIcon = /*#__PURE__*/styled__default(fa.FaMicrophone)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
+var StyledMicrophoneIcon = /*#__PURE__*/styled__default(fa.FaMicrophone)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 
 var InputTest = function InputTest(_ref) {
   var placeholder = _ref.placeholder,
@@ -1601,7 +1667,7 @@ var TestArea = function TestArea() {
     dispatch(testAction(search, profile, presset, id));
   };
   var returnTest = function returnTest() {
-    return React__default.createElement(Container$4, {
+    return React__default.createElement(Container$3, {
       isLoading: isLoading
     }, React__default.createElement(Header$1, null, React__default.createElement("div", {
       className: 'infos'
@@ -1637,7 +1703,7 @@ var TestArea = function TestArea() {
       tags: []
     },
     personas: personas
-  }, React__default.createElement(Container$4, null, returnTest()));
+  }, React__default.createElement(Container$3, null, returnTest()));
 };
 
 var Leia = function Leia(props) {