code7-leia 0.1.147 → 0.1.149

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

@@ -725,8 +725,8 @@ Table$1.propTypes = {
 
 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 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: 45px;\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: 14px;\n  left: 10px;\n  pointer-events: none;\n"])));
 
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
@@ -962,10 +962,10 @@ EmptyState.defaultProps = {
 };
 
 var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$1, _templateObject5$1;
-var MultiSelectWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
-var SelectBox = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  select {\n    width: 100%;\n    font-weight: bold;\n    height: 40px;\n    border-radius: 4px;\n  }\n"])));
+var MultiSelectWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 45px;\n"])));
+var SelectBox = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  select {\n    width: 100%;\n    font-weight: bold;\n    height: 45px;\n    border-radius: 4px;\n  }\n"])));
 var OverSelect = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n\n  input {\n    height: 38px;\n    width: 95%;\n    border: none;\n    margin: 1px;\n\n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n  }\n"])));
-var Checkboxes = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  background: white;\n  position: absolute;\n  width: 95%;\n  z-index: 10;\n\n  label {\n    padding: 10px 0;\n  }\n"])));
+var Checkboxes = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  background: white;\n  position: absolute;\n  width: 95%;\n  z-index: 10;\n\n  label {\n    padding: 10px 5px;\n  }\n"])));
 var CheckboxLabel = /*#__PURE__*/styled__default.label(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n\n  &:hover {\n    background-color: #6690ff;\n  }\n"])));
 
 var MultiSelect = function MultiSelect(_ref) {
@@ -1593,43 +1593,52 @@ var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templa
   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 #5a5d68; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 13px;\n        height: 13px;\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"])));
+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: 45px;\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$a;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateObject$a = /*#__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 Container$4 = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n\n  .custom-select {\n    position: relative;\n    width: 100%;\n    cursor: pointer;\n\n    .selected-option {\n      padding: 12px;\n      border-radius: 4px;\n      border: 1px solid #979AA5;\n      height: 45px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .options {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      width: 100%;\n      border: 1px solid #979AA5;\n      border-top: none;\n      border-radius: 0 0 4px 4px;\n      background-color: #fff;\n\n      .option {\n        padding: 12px;\n        cursor: pointer;\n        transition: background-color 0.3s;\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])));
 
-var Select = function Select(_ref) {
+var CustomSelect = function CustomSelect(_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);
+  var _useState = React.useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = React.useState(''),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
+  var handleSelectOption = function handleSelectOption(value) {
+    var selected = String(value); // Convertendo para string
+    setSelectedValue(selected);
+    onSelect(selected);
+    setIsOpen(false);
   };
-  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", {
+  return React__default.createElement(Container$4, null, React__default.createElement("div", {
+    className: "custom-select",
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, React__default.createElement("div", {
+    className: "selected-option"
+  }, selectedValue || placeholder), isOpen && React__default.createElement("div", {
+    className: "options"
+  }, options.map(function (option) {
+    return React__default.createElement("div", {
       key: option.value,
-      value: option.value
+      className: "option",
+      onClick: function onClick() {
+        return handleSelectOption(option.value);
+      }
     }, option.label);
-  })));
+  }))));
 };
 
 var _templateObject$b, _templateObject2$7, _templateObject3$6, _templateObject4$3;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
-var StyledInput = /*#__PURE__*/styled__default.input(_templateObject2$7 || (_templateObject2$7 = /*#__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$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
+var StyledInput = /*#__PURE__*/styled__default.input(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 45px;\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$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 14px;\n  right: 10px;\n  cursor: pointer;\n"])));
 var StyledMicrophoneIcon = /*#__PURE__*/styled__default(fa.FaMicrophone)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 
 var InputTest = function InputTest(_ref) {
@@ -1709,11 +1718,11 @@ var TestArea = function TestArea() {
       placeholder: t.testArea.typeSentence,
       onChange: handleSearch,
       onRecordAudio: handleRecordAudio
-    }), React__default.createElement(Select, {
+    }), React__default.createElement(CustomSelect, {
       placeholder: t.testArea.selectPersona,
       options: optionsPersona,
       onSelect: handleSelectPersona
-    }), React__default.createElement(Select, {
+    }), React__default.createElement(CustomSelect, {
       placeholder: t.testArea.selectPresset,
       options: optionsPresset,
       onSelect: handleSelectPresset