@pedidopago/ui 1.0.9 → 1.1.3

package/dist/components/Rating/utils/svgDataTratamentFunction.d.ts

@@ -1,10 +1,10 @@
-import { MouseEvent } from 'react';
-import { fillStateType } from '../components/GradientIcon/types';
-interface svgDataTratamentFunctionReturn {
-    fillState: fillStateType;
-    isMouseLeave: boolean;
-    isMouseMove: boolean;
-}
-export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
-export {};
+import { MouseEvent } from 'react';
+import { fillStateType } from '../components/GradientIcon/types';
+interface svgDataTratamentFunctionReturn {
+    fillState: fillStateType;
+    isMouseLeave: boolean;
+    isMouseMove: boolean;
+}
+export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
+export {};
 //# sourceMappingURL=svgDataTratamentFunction.d.ts.map

package/dist/components/SelectInput/components/InputWrapper/index.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputControl: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputControl: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/InputWrapper/index.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var InputWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: ", ";\n  user-select: none;\n"])), InputWrapperWidthTratamentFunction);
+var InputWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  max-width: ", ";\n  user-select: none;\n"])), InputWrapperWidthTratamentFunction);
 
 exports.InputWrapper = InputWrapper;
 

package/dist/components/SelectInput/components/OptionsArea/OptionsArea.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const OptionsAreaWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AutoCompleteInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const Span: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const OptionItem: import("react").NamedExoticComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const OptionsAreaWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AutoCompleteInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Span: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const OptionItem: import("react").NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 //# sourceMappingURL=OptionsArea.d.ts.map

package/dist/components/SelectInput/components/OptionsArea/index.d.ts

@@ -1,16 +1,16 @@
-import { UIEvent } from 'react';
-import { AlertType, SelectData } from '../../types';
-interface IOptionsAreaProps {
-    inputAlert: AlertType;
-    showOptionsArea: boolean;
-    data: SelectData[];
-    selectedOptions: SelectData[];
-    AutoComplete: Boolean;
-    chooseOption: (option: SelectData) => void;
-    scrollHandler: (e: UIEvent<HTMLDivElement>) => void;
-    setShowOptionsArea: (state: boolean) => void;
-    onChangeSearch?: (data: string) => void;
-}
-export declare function OptionsArea({ data, scrollHandler, chooseOption, inputAlert, setShowOptionsArea, AutoComplete, selectedOptions, onChangeSearch, }: IOptionsAreaProps): JSX.Element;
-export {};
+import { UIEvent } from 'react';
+import { AlertType, SelectData } from '../../types';
+interface IOptionsAreaProps {
+    inputAlert: AlertType;
+    showOptionsArea: boolean;
+    data: SelectData[];
+    selectedOptions: SelectData[];
+    AutoComplete: Boolean;
+    chooseOption: (option: SelectData) => void;
+    scrollHandler: (e: UIEvent<HTMLDivElement>) => void;
+    setShowOptionsArea: (state: boolean) => void;
+    onChangeSearch?: (data: string) => void;
+}
+export declare function OptionsArea({ data, scrollHandler, chooseOption, inputAlert, setShowOptionsArea, AutoComplete, selectedOptions, onChangeSearch, }: IOptionsAreaProps): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/OptionsArea/index.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _OptionsArea = require("./OptionsArea");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -102,41 +104,44 @@ function OptionsArea(_ref) {
         break;
     }
   }, [setShowOptionsArea]);
-  return /*#__PURE__*/React.createElement(_OptionsArea.OptionsAreaWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsArea.OptionsAreaWrapper, {
     "data-testid": "options-area",
     selectType: inputAlert,
     itensLength: dataToShow.length,
     onKeyDown: keyDownHandler,
-    onScroll: scrollHandler
-  }, AutoComplete && /*#__PURE__*/React.createElement(_OptionsArea.AutoCompleteInput, {
-    type: "text",
-    autoFocus: true,
-    ref: AutoCompleteRef,
-    value: AutoCompleteState,
-    selectType: inputAlert,
-    onChange: function onChange(e) {
-      return setAutoCompleteState(e.target.value);
-    }
-  }), dataToShow.map(function (option, index) {
-    return /*#__PURE__*/React.createElement(_OptionsArea.OptionItem, {
-      ref: !AutoComplete && index === chosenItem ? OptionRef : null,
-      onFocus: function onFocus() {
-        return setChosenItem(index);
-      },
-      onMouseEnter: function onMouseEnter() {
-        return setChosenItem(index);
-      },
-      "data-testid": "options-area--option-item",
-      active: index === chosenItem,
-      tabIndex: 0,
+    onScroll: scrollHandler,
+    children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.AutoCompleteInput, {
+      type: "text",
+      autoFocus: true,
+      ref: AutoCompleteRef,
+      value: AutoCompleteState,
       selectType: inputAlert,
-      onClick: function onClick(e) {
-        return chooseOption(option);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && chooseOption(option);
-      },
-      key: "".concat(option.name).concat(index)
-    }, option.value);
-  }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/React.createElement(_OptionsArea.Span, null, "Sem Resultados"));
+      onChange: function onChange(e) {
+        return setAutoCompleteState(e.target.value);
+      }
+    }), dataToShow.map(function (option, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.OptionItem, {
+        ref: !AutoComplete && index === chosenItem ? OptionRef : null,
+        onFocus: function onFocus() {
+          return setChosenItem(index);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setChosenItem(index);
+        },
+        "data-testid": "options-area--option-item",
+        active: index === chosenItem,
+        tabIndex: 0,
+        selectType: inputAlert,
+        onClick: function onClick(e) {
+          return chooseOption(option);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return e.key === 'Enter' && chooseOption(option);
+        },
+        children: option.value
+      }, "".concat(option.name).concat(index));
+    }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.Span, {
+      children: "Sem Resultados"
+    })]
+  });
 }

package/dist/components/SelectInput/components/SelectArea/ButtonsArea.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const ButtonsArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Button: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const ButtonsArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=ButtonsArea.d.ts.map

package/dist/components/SelectInput/components/SelectArea/Label.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 //# sourceMappingURL=Label.d.ts.map

package/dist/components/SelectInput/components/SelectArea/SelectAreaWrapper.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const SelectAreaWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const SelectAreaWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=SelectAreaWrapper.d.ts.map

package/dist/components/SelectInput/components/SelectArea/SelectAreaWrapper.js

@@ -36,7 +36,7 @@ function alertControl(selectType, theme) {
 }
 
 function hexToRgba(hex, alpha) {
-  hex = hex.substr(1);
+  hex = hex.substring(1);
   var aRgbHex = hex.match(/.{1,2}/g);
   if (!aRgbHex) return;
   var aRgb = [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)];

package/dist/components/SelectInput/components/SelectArea/SelectedOptionsArea.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IStyleProps } from '../../types';
-export declare const SelectedOptionsArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SelectedOption: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SelectedOptionText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const SelectedOptionsArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectedOption: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const SelectedOptionText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=SelectedOptionsArea.d.ts.map

package/dist/components/SelectInput/components/SelectArea/index.d.ts

@@ -1,16 +1,16 @@
-import { AlertType, SelectData } from '../../types';
-import { MouseEvent, ReactElement } from 'react';
-interface ISelectAreaProps {
-    disabled: boolean;
-    label?: string;
-    inputAlert?: AlertType;
-    dropDownIcon?: ReactElement;
-    selectedOptions: SelectData[];
-    removeSelectedOption: (e: MouseEvent<HTMLElement>, option: SelectData) => void;
-    setShowOptionsArea: (show: boolean) => void;
-    setSelectedOptions: (array: SelectData[]) => void;
-    toggleOptionsAreaView: (e: MouseEvent<HTMLElement>) => void;
-}
-export declare function SelectArea({ disabled, label, setShowOptionsArea, toggleOptionsAreaView, inputAlert, removeSelectedOption, selectedOptions, setSelectedOptions, dropDownIcon, }: ISelectAreaProps): JSX.Element;
-export {};
+import { AlertType, SelectData } from '../../types';
+import { MouseEvent, ReactElement } from 'react';
+interface ISelectAreaProps {
+    disabled: boolean;
+    label?: string;
+    inputAlert?: AlertType;
+    dropDownIcon?: ReactElement;
+    selectedOptions: SelectData[];
+    removeSelectedOption: (e: MouseEvent<HTMLElement>, option: SelectData) => void;
+    setShowOptionsArea: (show: boolean) => void;
+    setSelectedOptions: (array: SelectData[]) => void;
+    toggleOptionsAreaView: (e: MouseEvent<HTMLElement>) => void;
+}
+export declare function SelectArea({ disabled, label, setShowOptionsArea, toggleOptionsAreaView, inputAlert, removeSelectedOption, selectedOptions, setSelectedOptions, dropDownIcon, }: ISelectAreaProps): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/SelectArea/index.js

@@ -15,6 +15,8 @@ var _ButtonsArea = require("./ButtonsArea");
 
 var _Icon = _interopRequireDefault(require("../../../Icon"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function SelectArea(_ref) {
@@ -28,44 +30,54 @@ function SelectArea(_ref) {
       selectedOptions = _ref.selectedOptions,
       setSelectedOptions = _ref.setSelectedOptions,
       dropDownIcon = _ref.dropDownIcon;
-  return /*#__PURE__*/React.createElement(_SelectAreaWrapper.SelectAreaWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectAreaWrapper.SelectAreaWrapper, {
     "data-testid": "select-area",
     onKeyDown: function onKeyDown(e) {
       return e.key === 'ArrowDown' && setShowOptionsArea(true);
     },
     disabled: disabled,
     onClick: toggleOptionsAreaView,
-    selectType: inputAlert
-  }, /*#__PURE__*/React.createElement(_Label.Label, {
-    animate: selectedOptions.length > 0
-  }, label), /*#__PURE__*/React.createElement(_SelectedOptionsArea.SelectedOptionsArea, null, selectedOptions.map(function (option) {
-    return /*#__PURE__*/React.createElement(_SelectedOptionsArea.SelectedOption, {
-      "data-testid": "select-area--selected-option",
-      key: option.name,
-      disabled: disabled,
-      onClick: function onClick(e) {
-        return removeSelectedOption(e, option);
-      }
-    }, /*#__PURE__*/React.createElement(_SelectedOptionsArea.SelectedOptionText, null, option.value), /*#__PURE__*/React.createElement(_Icon.default, {
-      name: "x-circle",
-      size: "12px"
-    }));
-  })), /*#__PURE__*/React.createElement(_ButtonsArea.ButtonsArea, null, /*#__PURE__*/React.createElement(_ButtonsArea.Button, {
-    tabIndex: 0,
-    disabled: disabled,
-    show: selectedOptions.length > 0,
-    onClick: function onClick() {
-      return setSelectedOptions([]);
-    }
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "x",
-    size: "20px"
-  })), /*#__PURE__*/React.createElement(_ButtonsArea.Button, {
-    show: true,
-    tabIndex: 0,
-    disabled: disabled,
-    onClick: toggleOptionsAreaView
-  }, dropDownIcon || /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "chevron-down"
-  }))));
+    selectType: inputAlert,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      animate: selectedOptions.length > 0,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedOptionsArea.SelectedOptionsArea, {
+      children: selectedOptions.map(function (option) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedOptionsArea.SelectedOption, {
+          "data-testid": "select-area--selected-option",
+          disabled: disabled,
+          onClick: function onClick(e) {
+            return removeSelectedOption(e, option);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedOptionsArea.SelectedOptionText, {
+            children: option.value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "x-circle",
+            size: "12px"
+          })]
+        }, option.name);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonsArea.ButtonsArea, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonsArea.Button, {
+        tabIndex: 0,
+        disabled: disabled,
+        show: selectedOptions.length > 0,
+        onClick: function onClick() {
+          return setSelectedOptions([]);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "x",
+          size: "20px"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonsArea.Button, {
+        show: true,
+        tabIndex: 0,
+        disabled: disabled,
+        onClick: toggleOptionsAreaView,
+        children: dropDownIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: "chevron-down"
+        })
+      })]
+    })]
+  });
 }

package/dist/components/SelectInput/components/index.d.ts

@@ -1,4 +1,4 @@
-export * from './InputWrapper';
-export * from './SelectArea';
-export * from './OptionsArea';
+export * from './InputWrapper';
+export * from './SelectArea';
+export * from './OptionsArea';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/index.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-import { ISelectInputProps } from './types';
-declare type Props = ComponentPropsWithoutRef<'p'>;
-declare const SelectInput: FC<ISelectInputProps & Props>;
-export default SelectInput;
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ISelectInputProps } from './types';
+declare type Props = ComponentPropsWithoutRef<'p'>;
+declare const SelectInput: FC<ISelectInputProps & Props>;
+export default SelectInput;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/index.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _components = require("./components");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["width", "fullWidth", "disabled", "multiple", "AutoComplete", "maxSelects", "onChangeValue", "onChangeSearch", "onFinished", "label", "selectType", "data", "children", "formRegister", "dropDownIcon", "defaultSelectedOptions"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -145,31 +147,32 @@ var SelectInput = function SelectInput(_ref) {
       setShowOptionsArea(false);
     }
   }, [selectedOptions, multiple, setSelectedOptions, maxSelects]);
-  return /*#__PURE__*/React.createElement(_components.InputWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.InputWrapper, {
     ref: InputWrapperRef,
     width: width,
-    fullWidth: fullWidth
-  }, /*#__PURE__*/React.createElement(_components.SelectArea, {
-    disabled: disabled,
-    label: label,
-    setShowOptionsArea: setShowOptionsArea,
-    removeSelectedOption: removeSelectedOption,
-    selectedOptions: selectedOptions,
-    setSelectedOptions: setSelectedOptions,
-    toggleOptionsAreaView: toggleOptionsAreaView,
-    inputAlert: inputAlert,
-    dropDownIcon: dropDownIcon
-  }), showOptionsArea && /*#__PURE__*/React.createElement(_components.OptionsArea, {
-    AutoComplete: AutoComplete,
-    setShowOptionsArea: setShowOptionsArea,
-    inputAlert: inputAlert,
-    chooseOption: chooseOption,
-    selectedOptions: selectedOptions,
-    data: data,
-    scrollHandler: scrollHandler,
-    showOptionsArea: showOptionsArea,
-    onChangeSearch: onChangeSearch
-  }));
+    fullWidth: fullWidth,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectArea, {
+      disabled: disabled,
+      label: label,
+      setShowOptionsArea: setShowOptionsArea,
+      removeSelectedOption: removeSelectedOption,
+      selectedOptions: selectedOptions,
+      setSelectedOptions: setSelectedOptions,
+      toggleOptionsAreaView: toggleOptionsAreaView,
+      inputAlert: inputAlert,
+      dropDownIcon: dropDownIcon
+    }), showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.OptionsArea, {
+      AutoComplete: AutoComplete,
+      setShowOptionsArea: setShowOptionsArea,
+      inputAlert: inputAlert,
+      chooseOption: chooseOption,
+      selectedOptions: selectedOptions,
+      data: data,
+      scrollHandler: scrollHandler,
+      showOptionsArea: showOptionsArea,
+      onChangeSearch: onChangeSearch
+    })]
+  });
 };
 
 var _default = SelectInput;

package/dist/components/SelectInput/selectInput.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=selectInput.test.d.ts.map

package/dist/components/SelectInput/selectInput.test.js

@@ -10,13 +10,19 @@ var _ = _interopRequireDefault(require("."));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var doIt = function doIt(func, times) {
   for (var i = 0; i < times; i++) {
@@ -50,7 +56,7 @@ var setup = function setup(props) {
     name: 'batata08',
     value: 'Batata08'
   }];
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, _extends({
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({
     "data-testid": "select-input-component",
     data: mockData
   }, props)));
@@ -291,13 +297,13 @@ describe('SelectInput', function () {
     var _IconRender$baseEleme, _selectArea$parentEle;
 
     var _setup11 = setup({
-      dropDownIcon: /*#__PURE__*/React.createElement(_Icon.default, {
+      dropDownIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "search"
       })
     }),
         selectArea = _setup11.selectArea;
 
-    var IconRender = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_Icon.default, {
+    var IconRender = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "search"
     }));
     var IconInner = (_IconRender$baseEleme = IconRender.baseElement.querySelectorAll('svg')[1]) === null || _IconRender$baseEleme === void 0 ? void 0 : _IconRender$baseEleme.innerHTML;