pge-front-common 4.0.6 → 4.0.8

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>
   );
 };
@@ -71,6 +77,6 @@ O Storybook estará disponível em http://localhost:6006.
 
 # O que é esperado após esta implementaçã
 
-# Existem alterações na UI/UX? (screenshots, gravações de tela
+# Existem alterações na UI/UX? (screenshots, gravações de tela)
 
 # Como reproduzir esta feature/correção?

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

@@ -0,0 +1,7 @@
+import React from "react";
+import "./styles.css";
+export interface UserButtonProps {
+    name: string;
+    userName: string;
+}
+export default function UserButton({ name, userName }: UserButtonProps): React.JSX.Element;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import "./styles.css";
+export interface IFuncionalidade {
+    id: number;
+    nome: string;
+    chave: string;
+    checked: boolean;
+}
+export interface ISubMenuMenuHorizontal {
+    id: number;
+    nome: string;
+    chave: string;
+    funcionalidades: IFuncionalidade[];
+    checked: boolean;
+}
+export interface IFuncoesMenuHorizontal {
+    id: number;
+    nome: string;
+    submenu: ISubMenuMenuHorizontal[];
+    checked: boolean;
+    chave: string;
+}
+type DropDownProps = React.HTMLProps<HTMLDivElement> & {
+    options: IFuncoesMenuHorizontal[];
+    showDropDown: boolean;
+    toggleDropDown: Function;
+    optionSelection: (name: string, id: number) => void;
+};
+declare const DropDown: React.FC<DropDownProps>;
+export default DropDown;

package/lib/components/Footer/Footer.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Footer from "./index";
+declare const _default: {
+    title: string;
+    component: typeof Footer;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import "./styles.css";
+export default function FooterComponent(): React.JSX.Element;

package/lib/components/Header/Header.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Header from "./index";
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPGERGLogo: Story;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.css";
+import { IFuncoesMenuHorizontal } from "../DropDown";
+export interface HeaderProps {
+    isLogoRhDigital: boolean;
+    options: IFuncoesMenuHorizontal[];
+    optionSelection: (name: string, id: number) => void;
+    name: string;
+    userName: string;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

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/Menu/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { IFuncoesMenuHorizontal } from "../DropDown";
+export interface MenuProps {
+    options: IFuncoesMenuHorizontal[];
+    optionSelection: (name: string, id: number) => void;
+}
+declare const Menu: React.FC<MenuProps>;
+export default Menu;

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/footer.d.ts

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

package/lib/icons/footerLight.d.ts

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

package/lib/icons/index.d.ts

@@ -21,4 +21,7 @@ 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";
+import { LogoPGERG } from "./logo-pge-rj";
+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, LogoPGERG, };

package/lib/icons/logo-pge-rj.d.ts

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

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

@@ -955,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      ";
-    }
-    if (textAlign === "center") {
-        return "\n      text-align: center;\n      margin:auto;\n      padding-right: 10px;\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        ");
     }
-    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;
@@ -974,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)));
 };
@@ -3171,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;
@@ -3186,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
@@ -3215,8 +3216,11 @@ var IconDelete = function (props) { return (React__default.createElement("svg",
 var IconCalendar = function (props) { return (React__default.createElement("svg", __assign({ width: "19", height: "21", viewBox: "0 0 19 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M2.6665 20.5C2.1165 20.5 1.64567 20.3042 1.254 19.9125C0.862337 19.5208 0.666504 19.05 0.666504 18.5V4.5C0.666504 3.95 0.862337 3.47917 1.254 3.0875C1.64567 2.69583 2.1165 2.5 2.6665 2.5H3.6665V0.5H5.6665V2.5H13.6665V0.5H15.6665V2.5H16.6665C17.2165 2.5 17.6873 2.69583 18.079 3.0875C18.4707 3.47917 18.6665 3.95 18.6665 4.5V18.5C18.6665 19.05 18.4707 19.5208 18.079 19.9125C17.6873 20.3042 17.2165 20.5 16.6665 20.5H2.6665ZM2.6665 18.5H16.6665V8.5H2.6665V18.5ZM2.6665 6.5H16.6665V4.5H2.6665V6.5ZM9.6665 12.5C9.38317 12.5 9.14567 12.4042 8.954 12.2125C8.76234 12.0208 8.6665 11.7833 8.6665 11.5C8.6665 11.2167 8.76234 10.9792 8.954 10.7875C9.14567 10.5958 9.38317 10.5 9.6665 10.5C9.94984 10.5 10.1873 10.5958 10.379 10.7875C10.5707 10.9792 10.6665 11.2167 10.6665 11.5C10.6665 11.7833 10.5707 12.0208 10.379 12.2125C10.1873 12.4042 9.94984 12.5 9.6665 12.5ZM5.6665 12.5C5.38317 12.5 5.14567 12.4042 4.954 12.2125C4.76234 12.0208 4.6665 11.7833 4.6665 11.5C4.6665 11.2167 4.76234 10.9792 4.954 10.7875C5.14567 10.5958 5.38317 10.5 5.6665 10.5C5.94984 10.5 6.18734 10.5958 6.379 10.7875C6.57067 10.9792 6.6665 11.2167 6.6665 11.5C6.6665 11.7833 6.57067 12.0208 6.379 12.2125C6.18734 12.4042 5.94984 12.5 5.6665 12.5ZM13.6665 12.5C13.3832 12.5 13.1457 12.4042 12.954 12.2125C12.7623 12.0208 12.6665 11.7833 12.6665 11.5C12.6665 11.2167 12.7623 10.9792 12.954 10.7875C13.1457 10.5958 13.3832 10.5 13.6665 10.5C13.9498 10.5 14.1873 10.5958 14.379 10.7875C14.5707 10.9792 14.6665 11.2167 14.6665 11.5C14.6665 11.7833 14.5707 12.0208 14.379 12.2125C14.1873 12.4042 13.9498 12.5 13.6665 12.5ZM9.6665 16.5C9.38317 16.5 9.14567 16.4042 8.954 16.2125C8.76234 16.0208 8.6665 15.7833 8.6665 15.5C8.6665 15.2167 8.76234 14.9792 8.954 14.7875C9.14567 14.5958 9.38317 14.5 9.6665 14.5C9.94984 14.5 10.1873 14.5958 10.379 14.7875C10.5707 14.9792 10.6665 15.2167 10.6665 15.5C10.6665 15.7833 10.5707 16.0208 10.379 16.2125C10.1873 16.4042 9.94984 16.5 9.6665 16.5ZM5.6665 16.5C5.38317 16.5 5.14567 16.4042 4.954 16.2125C4.76234 16.0208 4.6665 15.7833 4.6665 15.5C4.6665 15.2167 4.76234 14.9792 4.954 14.7875C5.14567 14.5958 5.38317 14.5 5.6665 14.5C5.94984 14.5 6.18734 14.5958 6.379 14.7875C6.57067 14.9792 6.6665 15.2167 6.6665 15.5C6.6665 15.7833 6.57067 16.0208 6.379 16.2125C6.18734 16.4042 5.94984 16.5 5.6665 16.5ZM13.6665 16.5C13.3832 16.5 13.1457 16.4042 12.954 16.2125C12.7623 16.0208 12.6665 15.7833 12.6665 15.5C12.6665 15.2167 12.7623 14.9792 12.954 14.7875C13.1457 14.5958 13.3832 14.5 13.6665 14.5C13.9498 14.5 14.1873 14.5958 14.379 14.7875C14.5707 14.9792 14.6665 15.2167 14.6665 15.5C14.6665 15.7833 14.5707 16.0208 14.379 16.2125C14.1873 16.4042 13.9498 16.5 13.6665 16.5Z", fill: "#4A4A4B" }))); };
 
-var IconProfile = function (props) { return (React__default.createElement("svg", __assign({ width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    React__default.createElement("path", { d: "M8.6665 8.5C7.5665 8.5 6.62484 8.10833 5.8415 7.325C5.05817 6.54167 4.6665 5.6 4.6665 4.5C4.6665 3.4 5.05817 2.45833 5.8415 1.675C6.62484 0.891667 7.5665 0.5 8.6665 0.5C9.7665 0.5 10.7082 0.891667 11.4915 1.675C12.2748 2.45833 12.6665 3.4 12.6665 4.5C12.6665 5.6 12.2748 6.54167 11.4915 7.325C10.7082 8.10833 9.7665 8.5 8.6665 8.5ZM0.666504 16.5V13.7C0.666504 13.1333 0.812337 12.6125 1.104 12.1375C1.39567 11.6625 1.78317 11.3 2.2665 11.05C3.29984 10.5333 4.34984 10.1458 5.4165 9.8875C6.48317 9.62917 7.5665 9.5 8.6665 9.5C9.7665 9.5 10.8498 9.62917 11.9165 9.8875C12.9832 10.1458 14.0332 10.5333 15.0665 11.05C15.5498 11.3 15.9373 11.6625 16.229 12.1375C16.5207 12.6125 16.6665 13.1333 16.6665 13.7V16.5H0.666504ZM2.6665 14.5H14.6665V13.7C14.6665 13.5167 14.6207 13.35 14.529 13.2C14.4373 13.05 14.3165 12.9333 14.1665 12.85C13.2665 12.4 12.3582 12.0625 11.4415 11.8375C10.5248 11.6125 9.59984 11.5 8.6665 11.5C7.73317 11.5 6.80817 11.6125 5.8915 11.8375C4.97484 12.0625 4.0665 12.4 3.1665 12.85C3.0165 12.9333 2.89567 13.05 2.804 13.2C2.71234 13.35 2.6665 13.5167 2.6665 13.7V14.5ZM8.6665 6.5C9.2165 6.5 9.68734 6.30417 10.079 5.9125C10.4707 5.52083 10.6665 5.05 10.6665 4.5C10.6665 3.95 10.4707 3.47917 10.079 3.0875C9.68734 2.69583 9.2165 2.5 8.6665 2.5C8.1165 2.5 7.64567 2.69583 7.254 3.0875C6.86234 3.47917 6.6665 3.95 6.6665 4.5C6.6665 5.05 6.86234 5.52083 7.254 5.9125C7.64567 6.30417 8.1165 6.5 8.6665 6.5Z", fill: "#4A4A4B" }))); };
+var IconProfile = 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 : "17", height: (_b = props === null || props === void 0 ? void 0 : props.height) !== null && _b !== void 0 ? _b : "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M8.6665 8.5C7.5665 8.5 6.62484 8.10833 5.8415 7.325C5.05817 6.54167 4.6665 5.6 4.6665 4.5C4.6665 3.4 5.05817 2.45833 5.8415 1.675C6.62484 0.891667 7.5665 0.5 8.6665 0.5C9.7665 0.5 10.7082 0.891667 11.4915 1.675C12.2748 2.45833 12.6665 3.4 12.6665 4.5C12.6665 5.6 12.2748 6.54167 11.4915 7.325C10.7082 8.10833 9.7665 8.5 8.6665 8.5ZM0.666504 16.5V13.7C0.666504 13.1333 0.812337 12.6125 1.104 12.1375C1.39567 11.6625 1.78317 11.3 2.2665 11.05C3.29984 10.5333 4.34984 10.1458 5.4165 9.8875C6.48317 9.62917 7.5665 9.5 8.6665 9.5C9.7665 9.5 10.8498 9.62917 11.9165 9.8875C12.9832 10.1458 14.0332 10.5333 15.0665 11.05C15.5498 11.3 15.9373 11.6625 16.229 12.1375C16.5207 12.6125 16.6665 13.1333 16.6665 13.7V16.5H0.666504ZM2.6665 14.5H14.6665V13.7C14.6665 13.5167 14.6207 13.35 14.529 13.2C14.4373 13.05 14.3165 12.9333 14.1665 12.85C13.2665 12.4 12.3582 12.0625 11.4415 11.8375C10.5248 11.6125 9.59984 11.5 8.6665 11.5C7.73317 11.5 6.80817 11.6125 5.8915 11.8375C4.97484 12.0625 4.0665 12.4 3.1665 12.85C3.0165 12.9333 2.89567 13.05 2.804 13.2C2.71234 13.35 2.6665 13.5167 2.6665 13.7V14.5ZM8.6665 6.5C9.2165 6.5 9.68734 6.30417 10.079 5.9125C10.4707 5.52083 10.6665 5.05 10.6665 4.5C10.6665 3.95 10.4707 3.47917 10.079 3.0875C9.68734 2.69583 9.2165 2.5 8.6665 2.5C8.1165 2.5 7.64567 2.69583 7.254 3.0875C6.86234 3.47917 6.6665 3.95 6.6665 4.5C6.6665 5.05 6.86234 5.52083 7.254 5.9125C7.64567 6.30417 8.1165 6.5 8.6665 6.5Z", fill: (_c = props === null || props === void 0 ? void 0 : props.fill) !== null && _c !== void 0 ? _c : "#4A4A4B" })));
+};
 
 var IconUpload = function (props) { return (React__default.createElement("svg", __assign({ width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M7.6665 16.5V8.35L5.0665 10.95L3.6665 9.5L8.6665 4.5L13.6665 9.5L12.2665 10.95L9.6665 8.35V16.5H7.6665ZM0.666504 5.5V2.5C0.666504 1.95 0.862337 1.47917 1.254 1.0875C1.64567 0.695833 2.1165 0.5 2.6665 0.5H14.6665C15.2165 0.5 15.6873 0.695833 16.079 1.0875C16.4707 1.47917 16.6665 1.95 16.6665 2.5V5.5H14.6665V2.5H2.6665V5.5H0.666504Z", fill: "#4A4A4B" }))); };
@@ -3233,8 +3237,11 @@ var IconCheckCircle = function (props) { return (React__default.createElement("s
 var IconEventAvaliable = 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: "M7.74775 16.85L4.6415 13.3L5.91025 11.85L7.74775 13.95L11.4228 9.75L12.6915 11.2L7.74775 16.85ZM2.5415 20.5C2.06025 20.5 1.64827 20.3042 1.30557 19.9125C0.962858 19.5208 0.791504 19.05 0.791504 18.5V4.5C0.791504 3.95 0.962858 3.47917 1.30557 3.0875C1.64827 2.69583 2.06025 2.5 2.5415 2.5H3.4165V0.5H5.1665V2.5H12.1665V0.5H13.9165V2.5H14.7915C15.2728 2.5 15.6847 2.69583 16.0274 3.0875C16.3701 3.47917 16.5415 3.95 16.5415 4.5V18.5C16.5415 19.05 16.3701 19.5208 16.0274 19.9125C15.6847 20.3042 15.2728 20.5 14.7915 20.5H2.5415ZM2.5415 18.5H14.7915V8.5H2.5415V18.5ZM2.5415 6.5H14.7915V4.5H2.5415V6.5Z", fill: "black" }))); };
 
-var IconLogout = function (props) { return (React__default.createElement("svg", __assign({ width: "19", height: "19", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    React__default.createElement("path", { d: "M2.6665 18.5C2.1165 18.5 1.64567 18.3042 1.254 17.9125C0.862337 17.5208 0.666504 17.05 0.666504 16.5V2.5C0.666504 1.95 0.862337 1.47917 1.254 1.0875C1.64567 0.695833 2.1165 0.5 2.6665 0.5H9.6665V2.5H2.6665V16.5H9.6665V18.5H2.6665ZM13.6665 14.5L12.2915 13.05L14.8415 10.5H6.6665V8.5H14.8415L12.2915 5.95L13.6665 4.5L18.6665 9.5L13.6665 14.5Z", fill: "#4A4A4B" }))); };
+var IconLogout = 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 : "19", height: (_b = props === null || props === void 0 ? void 0 : props.height) !== null && _b !== void 0 ? _b : "19", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M2.6665 18.5C2.1165 18.5 1.64567 18.3042 1.254 17.9125C0.862337 17.5208 0.666504 17.05 0.666504 16.5V2.5C0.666504 1.95 0.862337 1.47917 1.254 1.0875C1.64567 0.695833 2.1165 0.5 2.6665 0.5H9.6665V2.5H2.6665V16.5H9.6665V18.5H2.6665ZM13.6665 14.5L12.2915 13.05L14.8415 10.5H6.6665V8.5H14.8415L12.2915 5.95L13.6665 4.5L18.6665 9.5L13.6665 14.5Z", fill: (_c = props === null || props === void 0 ? void 0 : props.fill) !== null && _c !== void 0 ? _c : "#4A4A4B" })));
+};
 
 var IconAdd = function (props) { return (React__default.createElement("svg", __assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default.createElement("path", { d: "M6.6665 8.5H0.666504V6.5H6.6665V0.5H8.6665V6.5H14.6665V8.5H8.6665V14.5H6.6665V8.5Z", fill: "black" }))); };
@@ -3257,8 +3264,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" }))); };
@@ -3268,17 +3278,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 :