pge-front-common 4.0.5 → 4.0.7

package/README.md

@@ -24,19 +24,25 @@ npm i pge-front-common
 
 Instale a biblioteca usando npm:
 
+Importar o stykes global para em seu App or layout
+
+```typescript
+import "pge-front-common/lib/variables.css";
+```
+
 ```typescript
-import React from 'react';
-import { Button } from 'pge-front-common';
+import React from "react";
+import { Button } from "pge-front-common";
 
 const App: React.FC = () => {
   const handleClick = () => {
-    alert('Button clicked!');
+    alert("Button clicked!");
   };
 
   return (
     <div>
       <h1>Hello, World!</h1>
-        <Button variant="secondary" text="Text" />
+      <Button variant="secondary" text="Text" />
     </div>
   );
 };

package/lib/components/Input/index.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import * as S from "./styles";
 import { InputBaseProps } from "./index.types";
-declare const InputBase: React.FC<Partial<InputBaseProps>>;
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "capture"> & S.StyledInputProps;
+declare const InputBase: React.FC<InputBaseProps>;
 export default InputBase;

package/lib/components/Input/index.types.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
+export type TextAlignType = "start" | "end" | "center";
 export interface InputBaseProps extends Partial<HTMLInputElement> {
     label: string;
     hasError?: boolean;
+    hasIcon?: boolean;
     textError?: string;
     message?: string;
     Icon?: React.ReactNode;
-    textAling?: "start" | "end" | "center";
+    textAlign: TextAlignType;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
 }

package/lib/components/Input/styles.d.ts

@@ -1,3 +1,4 @@
+import { TextAlignType } from "./index.types";
 export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     width?: number;
 }>> & string;
@@ -5,9 +6,11 @@ export declare const InputWrapper: import("styled-components/dist/types").IStyle
     icon?: boolean;
     hasError?: boolean;
 }>> & string;
-export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    textAlign?: "start" | "end" | "center";
-} & Partial<HTMLInputElement>>> & string;
+export interface StyledInputProps {
+    textAlign: TextAlignType;
+    hasIcon?: boolean;
+}
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;
 export declare const Message: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
     hasError?: boolean;
 }>> & string;

package/lib/components/Select/index.types.d.ts

@@ -7,6 +7,7 @@ export interface DropdownProps {
     textError?: string;
     message?: string;
     placeholder?: string;
+    hasIcon?: boolean;
     Icon?: string | React.ReactNode;
     textAling?: "start" | "end" | "center";
     width?: number;

package/lib/components/Select/styles.d.ts

@@ -7,6 +7,7 @@ export declare const InputWrapper: import("styled-components/dist/types").IStyle
 }>> & string;
 export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     textAlign?: "start" | "end" | "center";
+    hasIcon?: boolean;
 }>> & string;
 export declare const Message: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
     hasError?: boolean;

package/lib/icons/index.d.ts

@@ -21,4 +21,6 @@ import { IconTriangleExpand } from "./triangle-expand-icon";
 import { IconTriangleRecall } from "./triangle-to-recall-icon";
 import { IconSwap } from "./swap-icon";
 import { IconAddCell } from "./add-cell-icon";
-export { IconDownload, IconVisibillity, IconEdit, IconDelete, IconCalendar, IconProfile, IconUpload, IconNewTab, IconWarning, IconCheckCircle, IconEventAvaliable, IconLogout, IconCLose, IconAdd, IconRemove, IconCircleExpland, IconCircleRecall, IconArrowExpland, IconArrowRecall, IconTriangleExpand, IconTriangleRecall, IconSwap, IconAddCell, };
+import { MenuIcon } from "./menu-icon";
+import { LogoRhDigital } from "./logo-rh-digital";
+export { IconDownload, IconVisibillity, IconEdit, IconDelete, IconCalendar, IconProfile, IconUpload, IconNewTab, IconWarning, IconCheckCircle, IconEventAvaliable, IconLogout, IconCLose, IconAdd, IconRemove, IconCircleExpland, IconCircleRecall, IconArrowExpland, IconArrowRecall, IconTriangleExpand, IconTriangleRecall, IconSwap, IconAddCell, MenuIcon, LogoRhDigital, };

package/lib/icons/logo-rh-digital.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SVGProps } from "react";
+export declare const LogoRhDigital: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/lib/icons/menu-icon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SVGProps } from "react";
+export declare const MenuIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/lib/index.d.ts

@@ -7,18 +7,20 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare function Button({ variant, text, leftIcon, ...props }: ButtonProps): React$1.JSX.Element;
 
+type TextAlignType = "start" | "end" | "center";
 interface InputBaseProps extends Partial<HTMLInputElement> {
     label: string;
     hasError?: boolean;
+    hasIcon?: boolean;
     textError?: string;
     message?: string;
     Icon?: React$1.ReactNode;
-    textAling?: "start" | "end" | "center";
+    textAlign: TextAlignType;
     onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
     onClick?: (e: React$1.MouseEvent<HTMLInputElement>) => void;
 }
 
-declare const InputBase: React$1.FC<Partial<InputBaseProps>>;
+declare const InputBase: React$1.FC<InputBaseProps>;
 
 interface ModalProps {
     isModalOpen: boolean;
@@ -44,6 +46,7 @@ interface DropdownProps {
     textError?: string;
     message?: string;
     placeholder?: string;
+    hasIcon?: boolean;
     Icon?: string | React.ReactNode;
     textAling?: "start" | "end" | "center";
     width?: number;

package/lib/index.esm.js

@@ -4,36 +4,6 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = ":root {\r\n  --color-primary: #005a92;\r\n  --color-hover: #005a92;\r\n  --color-icon: #4a4a4b;\r\n  --color-success: #198754;\r\n  --color-warning: #cb8700;\r\n  --color-alert: #cb0a0a;\r\n  --color-information: #1a95b0;\r\n  --color-border: #d9d9d9;\r\n  --color-light-grey: #c3c3c3;\r\n  --color-grey: #a0a0a0;\r\n  --color-base-white: #ffffff;\r\n  --color-base-black: #303030;\r\n}\r\n";
-styleInject(css_248z$1);
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -89,9 +59,6 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-var css_248z = "/* src/styles/button.css */\r\n.button {\r\n  all: unset;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  cursor: pointer;\r\n  padding: 12px 16px;\r\n  border-radius: 8px;\r\n}\r\n\r\n.button.primary {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  border: 1px solid var(--color-primary);\r\n  background: var(--color-primary);\r\n  color: var(--color-base-white);\r\n  font-weight: 700;\r\n}\r\n\r\n.button.secondary {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  border: 1px solid var(--color-primary);\r\n  background: transparent;\r\n  color: var(--color-primary);\r\n  font-weight: 700;\r\n}\r\n\r\n.button:disabled {\r\n  cursor: not-allowed;\r\n}\r\n";
-styleInject(css_248z);
-
 function Button(_a) {
     var variant = _a.variant, _b = _a.text, text = _b === void 0 ? "" : _b, leftIcon = _a.leftIcon, props = __rest(_a, ["variant", "text", "leftIcon"]);
     return (React__default.createElement("button", __assign({ className: "button ".concat(variant) }, props),
@@ -988,15 +955,16 @@ var InputWrapper$1 = pt.div(templateObject_2$2 || (templateObject_2$2 = __makeTe
     var hasError = _a.hasError;
     return (hasError ? "#cb0a0a80" : "#0091ea80");
 });
-var StyledInput$1 = pt.input(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  color: #30303090;\n  cursor: pointer;\n  padding: 14px 0 14px 10px;\n  width: 90%;\n\n  border: none;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"], ["\n  color: #30303090;\n  cursor: pointer;\n  padding: 14px 0 14px 10px;\n  width: 90%;\n\n  border: none;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"])), function (_a) {
-    var textAlign = _a.textAlign;
-    if (textAlign === "end") {
-        return "\n      text-align: right;\n      margin-left: 25px;\n      margin-right: 20px;\n      ";
+var StyledInput$1 = pt.input(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  color: #30303090;\n  cursor: pointer;\n  width: 90%;\n  border: none;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"], ["\n  color: #30303090;\n  cursor: pointer;\n  width: 90%;\n  border: none;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"])), function (_a) {
+    var _b = _a.textAlign, textAlign = _b === void 0 ? "start" : _b, _c = _a.hasIcon, hasIcon = _c === void 0 ? false : _c;
+    switch (textAlign) {
+        case "end":
+            return "\n          text-align: right;\n          margin-left: 25px;\n          margin-right: 20px;\n        ";
+        case "center":
+            return "\n          text-align: center;\n          margin: auto;\n          padding-right: 10px;\n        ";
+        default:
+            return "\n          text-align: left;\n          margin-left: ".concat(hasIcon ? "35px" : "8px", ";\n        ");
     }
-    if (textAlign === "center") {
-        return "\n      text-align: center;\n      margin:auto;\n      padding-right: 10px;\n      ";
-    }
-    return "\n      text-align: left;\n      margin-left: 25px;\n      margin-right: 20px;\n      ";
 });
 var Message$1 = pt.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 10px;\n  margin-top: 4px;\n\n  font-family: Open Sans;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 15px;\n  text-align: left;\n"], ["\n  color: ", ";\n  margin-left: 10px;\n  margin-top: 4px;\n\n  font-family: Open Sans;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 15px;\n  text-align: left;\n"])), function (_a) {
     var hasError = _a.hasError;
@@ -1007,13 +975,13 @@ var InputContent$1 = pt.div(templateObject_6$2 || (templateObject_6$2 = __makeTe
 var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2;
 
 var InputBase = function (_a) {
-    var name = _a.name, label = _a.label, value = _a.value, type = _a.type, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAling = _a.textAling, textError = _a.textError, hasError = _a.hasError, width = _a.width, props = __rest(_a, ["name", "label", "value", "type", "Icon", "placeholder", "message", "textAling", "textError", "hasError", "width"]);
+    var name = _a.name, label = _a.label, value = _a.value, type = _a.type, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAlign = _a.textAlign, textError = _a.textError, hasError = _a.hasError, width = _a.width, hasIcon = _a.hasIcon, props = __rest(_a, ["name", "label", "value", "type", "Icon", "placeholder", "message", "textAlign", "textError", "hasError", "width", "hasIcon"]);
     return (React__default.createElement(InputContainer$1, { width: width },
         React__default.createElement(Label$1, { htmlFor: name }, label),
         React__default.createElement(InputWrapper$1, { icon: !!Icon, hasError: hasError },
             React__default.createElement(InputContent$1, null,
                 Icon && Icon,
-                React__default.createElement(StyledInput$1, __assign({}, props, { id: name, type: type, placeholder: placeholder, value: value, textAlign: textAling })))),
+                React__default.createElement(StyledInput$1, __assign({}, props, { id: name, type: type, placeholder: placeholder, value: value, textAlign: textAlign, hasIcon: hasIcon })))),
         textError && hasError && (React__default.createElement(Message$1, { hasError: !!textError }, textError)),
         !hasError && message && React__default.createElement(Message$1, null, message)));
 };
@@ -3204,14 +3172,14 @@ var InputWrapper = pt.div(templateObject_2 || (templateObject_2 = __makeTemplate
     return (hasError ? "#cb0a0a80" : "#0091ea80");
 });
 var StyledInput = pt.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #30303090;\n  cursor: pointer;\n  padding: 14px 0 14px 10px;\n  width: 90%;\n\n  border: none;\n\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"], ["\n  color: #30303090;\n  cursor: pointer;\n  padding: 14px 0 14px 10px;\n  width: 90%;\n\n  border: none;\n\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  &::placeholder {\n    color: #30303020;\n    line-height: 20px;\n  }\n\n  &:focus,\n  &:focus-visible,\n  &:focus-within {\n    outline: none;\n  }\n"])), function (_a) {
-    var textAlign = _a.textAlign;
+    var textAlign = _a.textAlign, hasIcon = _a.hasIcon;
     if (textAlign === "end") {
         return "\n      text-align: right;\n      margin-left: 25px;\n      margin-right: 20px;\n      ";
     }
     if (textAlign === "center") {
         return "\n      text-align: center;\n      margin:auto;\n      padding-right: 10px;\n      ";
     }
-    return "\n      text-align: left;\n      margin-left: 25px;\n      margin-right: 20px;\n      ";
+    return "\n      text-align: left;\n      margin-left: ".concat(hasIcon ? "35px" : "8px", ";\n  \n      ");
 });
 var Message = pt.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 10px;\n  margin-top: 4px;\n\n  font-family: Open Sans;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 15px;\n  text-align: left;\n"], ["\n  color: ", ";\n  margin-left: 10px;\n  margin-top: 4px;\n\n  font-family: Open Sans;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 15px;\n  text-align: left;\n"])), function (_a) {
     var hasError = _a.hasError;
@@ -3219,7 +3187,7 @@ var Message = pt.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(
 });
 var Label = pt.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: #303030;\n  width: 100%;\n  font-family: Open Sans;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 21px;\n  text-align: left;\n  cursor: pointer;\n"], ["\n  color: #303030;\n  width: 100%;\n  font-family: Open Sans;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 21px;\n  text-align: left;\n  cursor: pointer;\n"])));
 var InputContent = pt.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 46px;\n  & > svg {\n    width: 20px;\n    height: 20px;\n    margin: 14px 8px;\n    position: absolute;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 46px;\n  & > svg {\n    width: 20px;\n    height: 20px;\n    margin: 14px 8px;\n    position: absolute;\n  }\n"])));
-var ArrowIcon = pt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n\n  margin: auto;\n  right: 6px;\n  rotate: ", ";\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n"], ["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n\n  margin: auto;\n  right: 6px;\n  rotate: ", ";\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) { return (props.open ? "180deg" : "0deg"); });
+var ArrowIcon = pt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  margin: auto;\n  margin-right: 8px;\n  right: 6px;\n  rotate: ", ";\n"], ["\n  position: absolute;\n  margin: auto;\n  margin-right: 8px;\n  right: 6px;\n  rotate: ", ";\n"])), function (props) { return (props.open ? "180deg" : "0deg"); });
 var DropDownContainer = pt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: auto;\n\n  background-color: #fff;\n  margin-top: 5px;\n\n  outline: solid #cfcfcffc 1.5px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  border-radius: 8px;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: auto;\n\n  background-color: #fff;\n  margin-top: 5px;\n\n  outline: solid #cfcfcffc 1.5px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  border-radius: 8px;\n\n  ", "\n"])), function (_a) {
     var open = _a.open;
     return open
@@ -3290,8 +3258,11 @@ var IconArrowRecall = function (props) { return (React__default.createElement("s
 var IconTriangleExpand = function (props) { return (React__default.createElement("svg", __assign({ width: "11", height: "6", viewBox: "0 0 11 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M0.666504 5.5L5.6665 0.5L10.6665 5.5H0.666504Z", fill: "black" }))); };
 
-var IconTriangleRecall = function (props) { return (React__default.createElement("svg", __assign({ width: "11", height: "6", viewBox: "0 0 11 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    React__default.createElement("path", { d: "M5.6665 5.5L0.666504 0.5H10.6665L5.6665 5.5Z", fill: "#4A4A4B" }))); };
+var IconTriangleRecall = function (props) {
+    var _a, _b, _c;
+    return (React__default.createElement("svg", __assign({ width: (_a = props === null || props === void 0 ? void 0 : props.width) !== null && _a !== void 0 ? _a : "11", height: (_b = props === null || props === void 0 ? void 0 : props.width) !== null && _b !== void 0 ? _b : "6", viewBox: "0 0 11 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M5.6665 5.5L0.666504 0.5H10.6665L5.6665 5.5Z", fill: (_c = props === null || props === void 0 ? void 0 : props.fill) !== null && _c !== void 0 ? _c : "#4A4A4B" })));
+};
 
 var IconSwap = function (props) { return (React__default.createElement("svg", __assign({ width: "17", height: "21", viewBox: "0 0 17 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M4.6665 11.5V4.325L2.0915 6.9L0.666504 5.5L5.6665 0.5L10.6665 5.5L9.2415 6.9L6.6665 4.325V11.5H4.6665ZM11.6665 20.5L6.6665 15.5L8.0915 14.1L10.6665 16.675V9.5H12.6665V16.675L15.2415 14.1L16.6665 15.5L11.6665 20.5Z", fill: "black" }))); };
@@ -3301,17 +3272,17 @@ var IconAddCell = function (props) { return (React__default.createElement("svg",
 
 var Dropdown = function (_a) {
     var _b;
-    var name = _a.name; _a.type; var label = _a.label, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAling = _a.textAling, textError = _a.textError, hasError = _a.hasError, width = _a.width, defaultValue = _a.defaultValue; _a.disabled; var options = _a.options, onChange = _a.onChange, optionState = _a.value;
-    var _c = React__default.useState(false), open = _c[0], setOpen = _c[1];
+    var name = _a.name; _a.type; var label = _a.label, Icon = _a.Icon, placeholder = _a.placeholder, message = _a.message, textAling = _a.textAling, textError = _a.textError, hasError = _a.hasError, width = _a.width, defaultValue = _a.defaultValue, options = _a.options, onChange = _a.onChange, _c = _a.hasIcon, hasIcon = _c === void 0 ? false : _c, optionState = _a.value;
+    var _d = React__default.useState(false), open = _d[0], setOpen = _d[1];
     return (React__default.createElement(InputContainer, { width: width },
         React__default.createElement(Label, { htmlFor: name }, label),
         React__default.createElement(InputWrapper, { icon: !!Icon, hasError: hasError },
             React__default.createElement(InputContent, { onClick: function () { return setOpen(!open); } },
                 typeof Icon === "string" && React__default.createElement("img", { src: Icon, alt: "Icone" }),
                 typeof Icon === "object" && Icon,
-                React__default.createElement(StyledInput, { id: name, textAlign: textAling }, (_b = defaultValue !== null && defaultValue !== void 0 ? defaultValue : optionState === null || optionState === void 0 ? void 0 : optionState.label) !== null && _b !== void 0 ? _b : placeholder),
+                React__default.createElement(StyledInput, { hasIcon: hasIcon, id: name, textAlign: textAling }, (_b = defaultValue !== null && defaultValue !== void 0 ? defaultValue : optionState === null || optionState === void 0 ? void 0 : optionState.label) !== null && _b !== void 0 ? _b : placeholder),
                 React__default.createElement(ArrowIcon, { open: open },
-                    React__default.createElement(IconTriangleExpand, null)))),
+                    React__default.createElement(IconTriangleRecall, null)))),
         React__default.createElement(DropDownContainer, { open: open }, defaultValue ||
             (options && (React__default.createElement(DropDownContent, null,
                 defaultValue && (React__default.createElement(DropDownItem, { key: "default", onClick: function (e) { return onChange && onChange(e); } }, defaultValue)), options === null || options === void 0 ? void 0 :