@pedidopago/ui 1.7.1 → 1.7.3

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

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-export declare const ButtonsArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    disabled: boolean;
-}, 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;
-} & {
-    show: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+/// <reference types="react" />
+export declare const ButtonsArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled: boolean;
+}, 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;
+} & {
+    show: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=ButtonsArea.d.ts.map

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

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

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

@@ -1,22 +1,22 @@
-/// <reference types="react" />
-export declare const SelectedOptionsArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    multiple?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SelectedSingleOption: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    disabled?: boolean | undefined;
-}, 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;
-}, 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;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+export declare const SelectedOptionsArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    multiple?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectedSingleOption: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    disabled?: boolean | undefined;
+}, 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;
+}, 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=SelectedOptionsArea.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ISelectAreaProps } from './types';
-export declare const SelectArea: import("react").ForwardRefExoticComponent<ISelectAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+import { ISelectAreaProps } from './types';
+export declare const SelectArea: import("react").ForwardRefExoticComponent<ISelectAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MultipleSelect/components/SelectArea/styles.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { SelectType } from '../../types';
-export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    animate: boolean;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const HelperText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    selectType: SelectType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { SelectType } from '../../types';
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    animate: boolean;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    selectType: SelectType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/MultipleSelect/components/SelectArea/types.d.ts

@@ -1,23 +1,23 @@
-import { ReactElement } from 'react';
-import { ExtendThemeProps } from '../../../../shared/theme';
-import { SelectType, SelectData } from '../../types';
-export interface ISelectAreaProps {
-    disabled: boolean;
-    label?: string;
-    inputAlert?: SelectType;
-    dropDownIcon?: ReactElement;
-    multiple?: boolean;
-    placeholder?: string;
-    isLoadingData?: boolean;
-    selectedOptions: SelectData[];
-    removeSelectedOption: (e: React.MouseEvent<HTMLElement>, option?: SelectData) => void;
-    setShowOptionsArea: (show: boolean) => void;
-    setSelectedOptions: (array: SelectData[]) => void;
-    toggleOptionsAreaView: (e: React.MouseEvent<HTMLElement>) => void;
-}
-export type InputWrapperType = {
-    disabled: boolean;
-    selectType: SelectType;
-    theme?: ExtendThemeProps;
-};
+import { ReactElement } from 'react';
+import { ExtendThemeProps } from '../../../../shared/theme';
+import { SelectType, SelectData } from '../../types';
+export interface ISelectAreaProps {
+    disabled: boolean;
+    label?: string;
+    inputAlert?: SelectType;
+    dropDownIcon?: ReactElement;
+    multiple?: boolean;
+    placeholder?: string;
+    isLoadingData?: boolean;
+    selectedOptions: SelectData[];
+    removeSelectedOption: (e: React.MouseEvent<HTMLElement>, option?: SelectData) => void;
+    setShowOptionsArea: (show: boolean) => void;
+    setSelectedOptions: (array: SelectData[]) => void;
+    toggleOptionsAreaView: (e: React.MouseEvent<HTMLElement>) => void;
+}
+export type InputWrapperType = {
+    disabled: boolean;
+    selectType: SelectType;
+    theme?: ExtendThemeProps;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/MultipleSelect/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/MultipleSelect/index.d.ts

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

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

@@ -1,45 +1,45 @@
-import { ReactElement } from 'react';
-import { ExtendThemeProps } from 'src';
-export type SelectData = {
-    label: string;
-    value: string;
-};
-export type SelectType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary' | undefined;
-export interface IStyleProps {
-    isLoadingData?: boolean;
-    width?: number;
-    fullWidth?: boolean;
-    animate?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    itensLength?: number;
-    selectType?: SelectType;
-    theme?: ExtendThemeProps;
-    active?: boolean;
-    top: string;
-    left: string;
-}
-export interface ISelectInputProps {
-    data?: Array<SelectData>;
-    isLoadingData?: boolean;
-    maxSelects?: number;
-    label?: string;
-    multiple?: boolean;
-    width?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    selectType?: SelectType;
-    dropDownIcon?: ReactElement;
-    AutoComplete?: boolean;
-    value?: Array<SelectData>;
-    helperText?: string;
-    defaultSelectedOptions?: Array<SelectData>;
-    onChangeValue?: (data: Array<SelectData>) => void;
-    onChangeSearch?: (data: string) => void;
-    onFinished?: (bool: boolean) => void;
-    autoCompleteHelperText?: string;
-    loadMoreData?: () => void;
-    hasMoreData?: boolean;
-    infiniteScroll?: boolean;
-}
+import { ReactElement } from 'react';
+import { ExtendThemeProps } from 'src';
+export type SelectData = {
+    label: string;
+    value: string;
+};
+export type SelectType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary' | undefined;
+export interface IStyleProps {
+    isLoadingData?: boolean;
+    width?: number;
+    fullWidth?: boolean;
+    animate?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    itensLength?: number;
+    selectType?: SelectType;
+    theme?: ExtendThemeProps;
+    active?: boolean;
+    top: string;
+    left: string;
+}
+export interface ISelectInputProps {
+    data?: Array<SelectData>;
+    isLoadingData?: boolean;
+    maxSelects?: number;
+    label?: string;
+    multiple?: boolean;
+    width?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    selectType?: SelectType;
+    dropDownIcon?: ReactElement;
+    AutoComplete?: boolean;
+    value?: Array<SelectData>;
+    helperText?: string;
+    defaultSelectedOptions?: Array<SelectData>;
+    onChangeValue?: (data: Array<SelectData>) => void;
+    onChangeSearch?: (data: string) => void;
+    onFinished?: (bool: boolean) => void;
+    autoCompleteHelperText?: string;
+    loadMoreData?: () => void;
+    hasMoreData?: boolean;
+    infiniteScroll?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/NewSelect/Examples/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const optionsSelectExample: {
+    label: string;
+    value: string;
+}[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/NewSelect/Examples/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/Examples/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;GAiBhC,CAAC"}

package/dist/components/NewSelect/Examples/constants.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optionsSelectExample = void 0;
+var optionsSelectExample = [{
+  label: 'Opção 1',
+  value: 'option1'
+}, {
+  label: 'Opção 2',
+  value: 'option2'
+}, {
+  label: 'Opção 3',
+  value: 'option3'
+}, {
+  label: 'Opção 4',
+  value: 'option4'
+}, {
+  label: 'Opção 5',
+  value: 'option5'
+}, {
+  label: 'Opção 6',
+  value: 'option6'
+}, {
+  label: 'Opção 7',
+  value: 'option7'
+}, {
+  label: 'Opção 8',
+  value: 'option8'
+}, {
+  label: 'Opção 9',
+  value: 'option9'
+}, {
+  label: 'Opção 10',
+  value: 'option10'
+}, {
+  label: 'Opção 11',
+  value: 'option11'
+}, {
+  label: 'Opção 12',
+  value: 'option12'
+}, {
+  label: 'Opção 13',
+  value: 'option13'
+}, {
+  label: 'Opção 14',
+  value: 'option14'
+}, {
+  label: 'Opção 15',
+  value: 'option15'
+}, {
+  label: 'Opção 16',
+  value: 'option16'
+}];
+exports.optionsSelectExample = optionsSelectExample;

package/dist/components/NewSelect/Examples/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function MultipleSelectExampleWithDefaultValue(): JSX.Element;
+export declare function MultipleSelectExampleWithInputSearch(): JSX.Element;
+export declare function MultipleSelectExampleWithChip(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NewSelect/Examples/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/Examples/index.tsx"],"names":[],"mappings":";AAUA,wBAAgB,qCAAqC,gBAqCpD;AAED,wBAAgB,oCAAoC,gBAwBnD;AACD,wBAAgB,6BAA6B,gBAyB5C"}

package/dist/components/NewSelect/Examples/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleSelectExampleWithChip = MultipleSelectExampleWithChip;
+exports.MultipleSelectExampleWithDefaultValue = MultipleSelectExampleWithDefaultValue;
+exports.MultipleSelectExampleWithInputSearch = MultipleSelectExampleWithInputSearch;
+var _react = require("react");
+var _Flex = _interopRequireDefault(require("../../../components/Flex"));
+var _ = require("..");
+var _SelectInputSearch = require("../components/SelectInputSearch");
+var _SelectItem = require("../components/SelectItem");
+var _Chip = require("../components/Chip");
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable no-console */
+function MultipleSelectExampleWithDefaultValue() {
+  var _useState = (0, _react.useState)(['option1', 'option2']),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedMultipleOptions = _useState2[0],
+    setSelectedMultipleOption = _useState2[1];
+  var _useState3 = (0, _react.useState)('option1'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOption = _useState4[0],
+    setSelectedOption = _useState4[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+    direction: "column",
+    spacing: "1rem",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+      label: "Multiplo",
+      multiple: true,
+      value: selectedMultipleOptions,
+      onChange: function onChange(value) {
+        setSelectedMultipleOption(value);
+      },
+      children: _constants.optionsSelectExample.map(function (option, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+          optionValue: option.value,
+          children: option.label
+        }, index);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+      label: "Single",
+      value: selectedOption,
+      onChange: function onChange(value) {
+        return setSelectedOption(value);
+      },
+      children: _constants.optionsSelectExample.map(function (option, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+          optionValue: option.value,
+          children: option.label
+        }, index);
+      })
+    })]
+  });
+}
+function MultipleSelectExampleWithInputSearch() {
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchInput = _useState6[0],
+    setSearchInput = _useState6[1];
+  var filteredOptions = _constants.optionsSelectExample.filter(function (option) {
+    return option.label.includes(searchInput);
+  });
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedOption = _useState8[0],
+    setSelectedOption = _useState8[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.NewSelect, {
+    label: "Com input search",
+    multiple: true,
+    value: selectedOption,
+    onChange: function onChange(value) {
+      return setSelectedOption(value);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectInputSearch.SelectInputSearch, {
+      onChange: function onChange(event) {
+        return setSearchInput(event.currentTarget.value);
+      }
+    }), filteredOptions.map(function (option, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+        optionValue: option.value,
+        children: option.label
+      }, index);
+    })]
+  });
+}
+function MultipleSelectExampleWithChip() {
+  var _useState9 = (0, _react.useState)(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchInput = _useState10[0],
+    setSearchInput = _useState10[1];
+  var filteredOptions = _constants.optionsSelectExample.filter(function (option) {
+    return option.label.includes(searchInput);
+  });
+  var _useState11 = (0, _react.useState)([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedOption = _useState12[0],
+    setSelectedOption = _useState12[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.NewSelect, {
+    label: "Com input search",
+    multiple: true,
+    value: selectedOption,
+    onChange: function onChange(value) {
+      return setSelectedOption(value);
+    },
+    renderOptions: function renderOptions(option, remove) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.Chip, {
+        onClick: function onClick() {
+          return remove(option);
+        },
+        children: option.label
+      });
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectInputSearch.SelectInputSearch, {
+      onChange: function onChange(event) {
+        return setSearchInput(event.currentTarget.value);
+      }
+    }), filteredOptions.map(function (option, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+        optionValue: option.value,
+        children: option.label
+      }, index);
+    })]
+  });
+}

package/dist/components/NewSelect/components/Chip/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ChipProps } from './types';
+export declare function Chip({ children, ...props }: ChipProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NewSelect/components/Chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/NewSelect/components/Chip/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAiBrD"}

package/dist/components/NewSelect/components/Chip/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = Chip;
+var _Icon = _interopRequireDefault(require("../../../../components/Icon"));
+var _Button = _interopRequireDefault(require("../../../../components/Button"));
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Chip(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ChipContainer, {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      variant: "ghost",
+      style: {
+        padding: '0'
+      },
+      onClick: function onClick(event) {
+        var _props$onClick;
+        event.stopPropagation();
+        (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "x-circle",
+        size: 16,
+        color: "neutral.neutral4"
+      })
+    })]
+  });
+}

package/dist/components/NewSelect/components/Chip/styles.d.ts

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

package/dist/components/NewSelect/components/Chip/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/NewSelect/components/Chip/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa;;;yGAsBzB,CAAC"}

package/dist/components/NewSelect/components/Chip/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipContainer = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var ChipContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 1rem;\n  font-size: ", ";\n  transition: all ease-in-out 0.2s;\n  background-color: ", ";\n  border: 0;\n  color: ", ";\n  font-weight: 500;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:not(&:disabled) {\n    cursor: pointer;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.fontSizes.xxs;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.neutral.neutral1;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.neutral.neutral5;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.neutral.neutral2;
+});
+exports.ChipContainer = ChipContainer;

package/dist/components/NewSelect/components/Chip/types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ChipProps = HTMLAttributes<HTMLElement> & {
+    children: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/NewSelect/components/Chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/NewSelect/components/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/dist/components/NewSelect/components/Chip/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/NewSelect/components/OptionsSelect/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { OptionsSelectProps } from './types';
+export declare const OptionsSelect: import("react").ForwardRefExoticComponent<OptionsSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NewSelect/components/OptionsSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/NewSelect/components/OptionsSelect/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,aAAa,+GAkDzB,CAAC"}