componenteshospitais 1.7.2 → 1.7.4

package/dist/cjs/index.js

@@ -117,7 +117,7 @@ var CardImage = function (_a) {
         React$2.createElement("span", { className: styles$6.cardText }, fileName ? fileName : 'Selecione um arquivo'))) : (href ? (React$2.createElement("a", { href: href, target: externo ? "_blank" : "_self", rel: externo ? "noopener noreferrer" : undefined, className: "".concat(styles$6.botaoCert), title: href, style: { width: '100%', height: '100%' } }, content)) : (React$2.createElement("div", { className: "".concat(styles$6.botaoCert), onClick: handleActionClick, style: { width: '100%', height: '100%' } }, content)))));
 };
 
-var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:10px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
+var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:17px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
 var styles$5 = {"inputSubmit":"input-module_inputSubmit__21-Pj","inputPadrao":"input-module_inputPadrao__jypjY","searchIcon":"input-module_searchIcon__miuBI","empresa1":"input-module_empresa1__bxBov","empresa3":"input-module_empresa3__RU89A","empresa4":"input-module_empresa4__rWmWH","empresa5":"input-module_empresa5__rJ8DJ"};
 styleInject(css_248z$5);
 
@@ -1493,7 +1493,7 @@ function FaDownload (props) {
 }
 
 var InputField = function (_a) {
-    var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress;
+    var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress, corFundo = _a.corFundo, corLabel = _a.corLabel;
     var _b = React$2.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
     var togglePasswordVisibility = function () {
         setIsPasswordVisible(!isPasswordVisible);
@@ -1511,9 +1511,9 @@ var InputField = function (_a) {
                 maskType === 'date' ? '99/99/9999' :
                     maskType === 'cep' ? '99999-999' : '';
     return (React$2.createElement(React$2.Fragment, null,
-        label && React$2.createElement("label", { htmlFor: id }, label),
+        label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
         React$2.createElement("div", { className: styles$5.inputWrapper, style: { position: 'relative', display: 'flex', alignItems: 'center' } },
-            maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
+            maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
             type === 'password' && (React$2.createElement("div", { onClick: togglePasswordVisibility, style: { cursor: 'pointer', position: 'absolute', right: '10px', fontSize: '25px', marginTop: '5px', color: "#f0f0f0" } }, isPasswordVisible ? React$2.createElement(FaEyeSlash, null) : React$2.createElement(FaEye, null))))));
 };
 
@@ -1554,7 +1554,7 @@ var styles$2 = {"selectPadrao":"select-module_selectPadrao__poGiL"};
 styleInject(css_248z$2);
 
 var SelectField = function (_a) {
-    var id = _a.id, name = _a.name, options = _a.options, value = _a.value, onChange = _a.onChange, label = _a.label, optionDefault = _a.optionDefault, largura = _a.largura, disabled = _a.disabled, multiple = _a.multiple, required = _a.required;
+    var id = _a.id, name = _a.name, options = _a.options, value = _a.value, onChange = _a.onChange, label = _a.label, optionDefault = _a.optionDefault, largura = _a.largura, disabled = _a.disabled, multiple = _a.multiple, required = _a.required, corFundo = _a.corFundo, corLabel = _a.corLabel;
     var handleSelectChange = function (e) {
         if (multiple) {
             var selectedOptions = Array.from(e.target.selectedOptions, function (option) { return option.value; });
@@ -1565,8 +1565,8 @@ var SelectField = function (_a) {
         }
     };
     return (React$2.createElement(React$2.Fragment, null,
-        label && React$2.createElement("label", { htmlFor: id }, label),
-        React$2.createElement("select", { id: id, name: name, className: styles$2.selectPadrao, value: value, onChange: handleSelectChange, style: { width: largura ? "".concat(largura) : '' }, disabled: disabled, multiple: multiple, required: required },
+        label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
+        React$2.createElement("select", { id: id, name: name, className: styles$2.selectPadrao, value: value, onChange: handleSelectChange, style: { width: largura ? "".concat(largura) : '', backgroundColor: corFundo ? corFundo : '' }, disabled: disabled, multiple: multiple, required: required },
             optionDefault && !multiple && (React$2.createElement("option", { value: "" }, "Selecione...")),
             options.map(function (option) { return (React$2.createElement("option", { key: option.value, value: option.value }, option.description)); }))));
 };
@@ -1610,7 +1610,7 @@ var Busca = function (_a) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    return (React$2.createElement("div", { style: { position: 'relative' }, ref: inputRef },
+    return (React$2.createElement("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }, ref: inputRef },
         React$2.createElement("label", { htmlFor: "codigoCbhpm" }, label),
         showIcon && React$2.createElement(FaSearch, { className: styles$5.searchIcon }),
         React$2.createElement("input", { type: "text", id: "codigoCbhpm", value: value, onChange: handleInputChange, onFocus: handleFocus, placeholder: "Digite para buscar...", autoComplete: "off", className: styles$5.inputPadrao, style: { width: '100%', paddingLeft: showIcon ? '30px' : '0' } }),

package/dist/esm/index.js

@@ -115,7 +115,7 @@ var CardImage = function (_a) {
         React$2.createElement("span", { className: styles$6.cardText }, fileName ? fileName : 'Selecione um arquivo'))) : (href ? (React$2.createElement("a", { href: href, target: externo ? "_blank" : "_self", rel: externo ? "noopener noreferrer" : undefined, className: "".concat(styles$6.botaoCert), title: href, style: { width: '100%', height: '100%' } }, content)) : (React$2.createElement("div", { className: "".concat(styles$6.botaoCert), onClick: handleActionClick, style: { width: '100%', height: '100%' } }, content)))));
 };
 
-var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:10px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
+var css_248z$5 = ".input-module_inputSubmit__21-Pj{align-self:center;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:15px;padding:10px;width:10rem}.input-module_inputPadrao__jypjY{border:1px solid #ccc;border-radius:.5rem;font-style:italic;padding:.8rem 0 .8rem 1rem;width:100%}.input-module_inputPadrao__jypjY:focus{outline:none}.input-module_searchIcon__miuBI{color:#888;font-size:1.2rem;left:17px;position:absolute}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj{background-color:var(--blue)}.input-module_empresa1__bxBov .input-module_inputSubmit__21-Pj:hover{background-color:var(--red)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj{background-color:var(--green)}.input-module_empresa3__RU89A .input-module_inputSubmit__21-Pj:hover{background-color:var(--lightblue)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj{background-color:var(--red)}.input-module_empresa4__rWmWH .input-module_inputSubmit__21-Pj:hover{background-color:var(--blue)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj{background-color:var(--cartaoGreen)}.input-module_empresa5__rJ8DJ .input-module_inputSubmit__21-Pj:hover{background-color:var(--cartaoBlue)}";
 var styles$5 = {"inputSubmit":"input-module_inputSubmit__21-Pj","inputPadrao":"input-module_inputPadrao__jypjY","searchIcon":"input-module_searchIcon__miuBI","empresa1":"input-module_empresa1__bxBov","empresa3":"input-module_empresa3__RU89A","empresa4":"input-module_empresa4__rWmWH","empresa5":"input-module_empresa5__rJ8DJ"};
 styleInject(css_248z$5);
 
@@ -1491,7 +1491,7 @@ function FaDownload (props) {
 }
 
 var InputField = function (_a) {
-    var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress;
+    var type = _a.type, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, value = _a.value, label = _a.label, largura = _a.largura, readonly = _a.readonly, disabled = _a.disabled, required = _a.required, maxLength = _a.maxLength, maskType = _a.maskType, onKeyPress = _a.onKeyPress, corFundo = _a.corFundo, corLabel = _a.corLabel;
     var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
     var togglePasswordVisibility = function () {
         setIsPasswordVisible(!isPasswordVisible);
@@ -1509,9 +1509,9 @@ var InputField = function (_a) {
                 maskType === 'date' ? '99/99/9999' :
                     maskType === 'cep' ? '99999-999' : '';
     return (React$2.createElement(React$2.Fragment, null,
-        label && React$2.createElement("label", { htmlFor: id }, label),
+        label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
         React$2.createElement("div", { className: styles$5.inputWrapper, style: { position: 'relative', display: 'flex', alignItems: 'center' } },
-            maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
+            maskType ? (React$2.createElement(reactInputMask, { mask: mask, value: value, onChange: handleChange, disabled: disabled }, function (inputProps) { return (React$2.createElement("input", __assign({}, inputProps, { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, placeholder: placeholder, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }, readOnly: readonly, required: required, onKeyPress: onKeyPress }))); })) : (React$2.createElement("input", { type: type === 'password' && isPasswordVisible ? 'text' : type, id: id, name: id, value: value, placeholder: placeholder, onChange: handleChange, className: styles$5.inputPadrao, style: { width: largura ? "".concat(largura) : '', backgroundColor: disabled ? '#e5e5e5' : '' }, readOnly: readonly, disabled: disabled, required: required, maxLength: type === 'text' ? appliedMaxLength : undefined, onKeyPress: onKeyPress })),
             type === 'password' && (React$2.createElement("div", { onClick: togglePasswordVisibility, style: { cursor: 'pointer', position: 'absolute', right: '10px', fontSize: '25px', marginTop: '5px', color: "#f0f0f0" } }, isPasswordVisible ? React$2.createElement(FaEyeSlash, null) : React$2.createElement(FaEye, null))))));
 };
 
@@ -1552,7 +1552,7 @@ var styles$2 = {"selectPadrao":"select-module_selectPadrao__poGiL"};
 styleInject(css_248z$2);
 
 var SelectField = function (_a) {
-    var id = _a.id, name = _a.name, options = _a.options, value = _a.value, onChange = _a.onChange, label = _a.label, optionDefault = _a.optionDefault, largura = _a.largura, disabled = _a.disabled, multiple = _a.multiple, required = _a.required;
+    var id = _a.id, name = _a.name, options = _a.options, value = _a.value, onChange = _a.onChange, label = _a.label, optionDefault = _a.optionDefault, largura = _a.largura, disabled = _a.disabled, multiple = _a.multiple, required = _a.required, corFundo = _a.corFundo, corLabel = _a.corLabel;
     var handleSelectChange = function (e) {
         if (multiple) {
             var selectedOptions = Array.from(e.target.selectedOptions, function (option) { return option.value; });
@@ -1563,8 +1563,8 @@ var SelectField = function (_a) {
         }
     };
     return (React$2.createElement(React$2.Fragment, null,
-        label && React$2.createElement("label", { htmlFor: id }, label),
-        React$2.createElement("select", { id: id, name: name, className: styles$2.selectPadrao, value: value, onChange: handleSelectChange, style: { width: largura ? "".concat(largura) : '' }, disabled: disabled, multiple: multiple, required: required },
+        label && React$2.createElement("label", { htmlFor: id, style: { color: corLabel ? corLabel : '' } }, label),
+        React$2.createElement("select", { id: id, name: name, className: styles$2.selectPadrao, value: value, onChange: handleSelectChange, style: { width: largura ? "".concat(largura) : '', backgroundColor: corFundo ? corFundo : '' }, disabled: disabled, multiple: multiple, required: required },
             optionDefault && !multiple && (React$2.createElement("option", { value: "" }, "Selecione...")),
             options.map(function (option) { return (React$2.createElement("option", { key: option.value, value: option.value }, option.description)); }))));
 };
@@ -1608,7 +1608,7 @@ var Busca = function (_a) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    return (React$2.createElement("div", { style: { position: 'relative' }, ref: inputRef },
+    return (React$2.createElement("div", { style: { position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }, ref: inputRef },
         React$2.createElement("label", { htmlFor: "codigoCbhpm" }, label),
         showIcon && React$2.createElement(FaSearch, { className: styles$5.searchIcon }),
         React$2.createElement("input", { type: "text", id: "codigoCbhpm", value: value, onChange: handleInputChange, onFocus: handleFocus, placeholder: "Digite para buscar...", autoComplete: "off", className: styles$5.inputPadrao, style: { width: '100%', paddingLeft: showIcon ? '30px' : '0' } }),

package/dist/types/components/InputField.d.ts

@@ -13,6 +13,8 @@ interface InputFieldProps {
     maxLength?: number;
     maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep';
     onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    corFundo?: string;
+    corLabel?: string;
 }
 declare const InputField: React.FC<InputFieldProps>;
 export default InputField;

package/dist/types/components/SelectField.d.ts

@@ -15,6 +15,8 @@ interface SelectComponentProps {
     disabled?: boolean;
     multiple?: boolean;
     required?: boolean;
+    corFundo?: string;
+    corLabel?: string;
 }
 declare const SelectField: React.FC<SelectComponentProps>;
 export default SelectField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "componenteshospitais",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/Busca.tsx

@@ -62,7 +62,7 @@ const Busca: React.FC<FilterableInputProps> = ({ options, value, onChange, label
     }, []);
 
     return (
-        <div style={{ position: 'relative' }} ref={inputRef}>
+        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '10px', width: '100%' }} ref={inputRef}>
             <label htmlFor="codigoCbhpm">{label}</label>
             {showIcon && <FaSearch className={styles.searchIcon} />} 
             <input

package/src/components/InputField.tsx

@@ -17,6 +17,8 @@ interface InputFieldProps {
   maxLength?: number;
   maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep';
   onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  corFundo?: string;
+  corLabel?: string;
 }
 
 const InputField: React.FC<InputFieldProps> = ({
@@ -33,6 +35,8 @@ const InputField: React.FC<InputFieldProps> = ({
   maxLength,
   maskType,
   onKeyPress,
+  corFundo,
+  corLabel
 }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
@@ -57,7 +61,7 @@ const InputField: React.FC<InputFieldProps> = ({
 
   return (
     <>
-      {label && <label htmlFor={id}>{label}</label>}
+      {label && <label htmlFor={id} style={{color: corLabel ? corLabel: ''}}>{label}</label>}
       <div className={styles.inputWrapper} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
         {maskType ? (
           <InputMask
@@ -74,7 +78,7 @@ const InputField: React.FC<InputFieldProps> = ({
                 name={id}
                 placeholder={placeholder}
                 className={styles.inputPadrao}
-                style={{ width: largura ? `${largura}` : '', backgroundColor: disabled ? '#e5e5e5' : '' }}
+                style={{ width: largura ? `${largura}` : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')) }}
                 readOnly={readonly}
                 required={required}
                 onKeyPress={onKeyPress} 

package/src/components/SelectField.tsx

@@ -18,9 +18,11 @@ interface SelectComponentProps {
   disabled?: boolean;
   multiple?: boolean; 
   required?: boolean;
+  corFundo?: string;
+  corLabel?: string;
 }
 
-const SelectField: React.FC<SelectComponentProps> = ({ id, name, options, value, onChange, label, optionDefault, largura, disabled, multiple, required }) => {
+const SelectField: React.FC<SelectComponentProps> = ({ id, name, options, value, onChange, label, optionDefault, largura, disabled, multiple, required, corFundo, corLabel }) => {
 
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     if (multiple) {
@@ -33,14 +35,14 @@ const SelectField: React.FC<SelectComponentProps> = ({ id, name, options, value,
 
   return (
     <>
-      {label && <label htmlFor={id}>{label}</label>}
+      {label && <label htmlFor={id} style={{color: corLabel ? corLabel: ''}}>{label}</label>}
       <select
         id={id}
         name={name}
         className={styles.selectPadrao}
         value={value}
         onChange={handleSelectChange}
-        style={{ width: largura ? `${largura}` : '' }}
+        style={{ width: largura ? `${largura}` : '', backgroundColor: corFundo ? corFundo : ''}}
         disabled={disabled}
         multiple={multiple}
         required={required}

package/src/styles/input.module.css

@@ -24,7 +24,7 @@
 
 .searchIcon {
     position: absolute;
-    left: 10px; 
+    left: 17px;
     color: #888;
     font-size: 1.2rem;
 }