@pedidopago/ui 1.5.7 → 1.5.9

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

@@ -1,36 +1,36 @@
-import { HTMLAttributes } from 'react';
-export declare type AnchorX = 'left' | 'center' | 'right' | number;
-export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
-export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
-    /** If the modal is open or not. */
-    open: boolean;
-    /** Optional. Sets the left position where the modal will be shown. */
-    left?: string;
-    /** Optional. Sets the top position where the modal will be shown. */
-    top?: string;
-    /** Optional. The Modal horizontal anchor.
-     * 0 is the left most side.
-     * 100 is the right most size. */
-    anchorX?: AnchorX;
-    /** Optional. The Modal vertical anchor.
-     * 0 is the left most side.
-     * 100 is the right most size. */
-    anchorY?: AnchorY;
-    /** Optional. Offsets the Modal horizontally. */
-    offsetX?: string;
-    /** Optional. Offsets the Modal vertically. */
-    offsetY?: string;
-    /** The max width of the Modal. */
-    maxWidth?: string | number;
-    /** The max height of the Modal. */
-    maxHeight?: string | number;
-    /** Handler called once the Modal is triggered to close. */
-    onClose: () => void;
-    /** Optional. Will hide the scroll bar if the content inside a container is too big. */
-    hideScrollBar?: boolean;
-    /** Indicates if the overlay will be visible or not.  */
-    hideOverlay?: boolean;
-    /** Optional. Will disable the scroll body scroll. */
-    disableScrollOnOpen?: boolean;
-}
+import { HTMLAttributes } from 'react';
+export declare type AnchorX = 'left' | 'center' | 'right' | number;
+export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+    /** If the modal is open or not. */
+    open: boolean;
+    /** Optional. Sets the left position where the modal will be shown. */
+    left?: string;
+    /** Optional. Sets the top position where the modal will be shown. */
+    top?: string;
+    /** Optional. The Modal horizontal anchor.
+     * 0 is the left most side.
+     * 100 is the right most size. */
+    anchorX?: AnchorX;
+    /** Optional. The Modal vertical anchor.
+     * 0 is the left most side.
+     * 100 is the right most size. */
+    anchorY?: AnchorY;
+    /** Optional. Offsets the Modal horizontally. */
+    offsetX?: string;
+    /** Optional. Offsets the Modal vertically. */
+    offsetY?: string;
+    /** The max width of the Modal. */
+    maxWidth?: string | number;
+    /** The max height of the Modal. */
+    maxHeight?: string | number;
+    /** Handler called once the Modal is triggered to close. */
+    onClose: () => void;
+    /** Optional. Will hide the scroll bar if the content inside a container is too big. */
+    hideScrollBar?: boolean;
+    /** Indicates if the overlay will be visible or not.  */
+    hideOverlay?: boolean;
+    /** Optional. Will disable the scroll body scroll. */
+    disableScrollOnOpen?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

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

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

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

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

package/dist/components/MultipleSelect/components/OptionsArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,OAAO,EAA4C,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGrD,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,cAAc,GACf,EAAE,iBAAiB,eAkHnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,OAAO,EAAsD,MAAM,OAAO,CAAC;AASnG,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIrD,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,EAAE,OAAO,CAAC;CACzB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,sBAAsD,GACvD,EAAE,iBAAiB,eA8KnB"}

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

@@ -7,10 +7,24 @@ exports.OptionsArea = OptionsArea;
 
 var _react = require("react");
 
+var _Flex = _interopRequireDefault(require("../../../Flex"));
+
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+
+var _Spinner = _interopRequireDefault(require("../../../Spinner"));
+
+var _Typography = _interopRequireDefault(require("../../../Typography"));
+
+var _Button = _interopRequireDefault(require("../../../Button"));
+
+var _useObserver = require("../../../../shared/hooks/useObserver");
+
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
@@ -39,7 +53,14 @@ function OptionsArea(_ref) {
       setShowOptionsArea = _ref.setShowOptionsArea,
       AutoComplete = _ref.AutoComplete,
       selectedOptions = _ref.selectedOptions,
-      onChangeSearch = _ref.onChangeSearch;
+      onChangeSearch = _ref.onChangeSearch,
+      _ref$isLoadingData = _ref.isLoadingData,
+      isLoadingData = _ref$isLoadingData === void 0 ? false : _ref$isLoadingData,
+      loadMoreData = _ref.loadMoreData,
+      hasMoreData = _ref.hasMoreData,
+      infiniteScroll = _ref.infiniteScroll,
+      _ref$autoCompleteHelp = _ref.autoCompleteHelperText,
+      autoCompleteHelperText = _ref$autoCompleteHelp === void 0 ? 'Nenhum resultado encontrado' : _ref$autoCompleteHelp;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -53,11 +74,20 @@ function OptionsArea(_ref) {
 
   var _useState5 = (0, _react.useState)(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      AutoCompleteState = _useState6[0],
+      autoCompleteState = _useState6[0],
       setAutoCompleteState = _useState6[1];
 
   var OptionRef = (0, _react.useRef)(null);
   var AutoCompleteRef = (0, _react.useRef)(null);
+  var loadMoreRef = (0, _react.useRef)(null);
+  var optionsAreaRef = (0, _react.useRef)(null);
+  (0, _useObserver.useObserver)(loadMoreRef, function () {
+    return loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData();
+  }, {
+    root: optionsAreaRef === null || optionsAreaRef === void 0 ? void 0 : optionsAreaRef.current,
+    rootMargin: '20px',
+    threshold: 1.0
+  });
 
   function normalizeStringWithSpaces(string) {
     return string.replaceAll(' ', '_').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
@@ -74,19 +104,19 @@ function OptionsArea(_ref) {
         }) : [];
       });
       var newDataToShow = AutoComplete ? newDataWithoutChosen.flatMap(function (option) {
-        return option.search.includes(normalizeStringWithSpaces(AutoCompleteState)) ? option : [];
+        return option.search.includes(normalizeStringWithSpaces(autoCompleteState)) ? option : [];
       }) : newDataWithoutChosen;
 
-      if (AutoCompleteState.length > 0 && onChangeSearch) {
+      if (autoCompleteState.length > 0 && onChangeSearch) {
         clearTimeout(onChangeSearchDebounce);
         onChangeSearchDebounce = setTimeout(function () {
-          onChangeSearch(AutoCompleteState);
-        }, 200);
+          onChangeSearch(autoCompleteState);
+        }, 500);
       }
 
       setDataToShow(newDataToShow);
     }
-  }, [selectedOptions, data, AutoComplete, AutoCompleteState, onChangeSearch]);
+  }, [selectedOptions, data, AutoComplete, autoCompleteState, onChangeSearch, loadMoreData]);
   (0, _react.useEffect)(function () {
     setTimeout(function () {
       var _OptionRef$current;
@@ -117,21 +147,39 @@ function OptionsArea(_ref) {
         break;
     }
   }, [setShowOptionsArea]);
+  var noResultsFound = dataToShow.length === 0 && autoCompleteState.length > 0 && !isLoadingData;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsAreaWrapper, {
+    ref: optionsAreaRef,
     "data-testid": "options-area",
     selectType: inputAlert,
     itensLength: dataToShow.length,
     onKeyDown: keyDownHandler,
     onScroll: scrollHandler,
-    children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AutoCompleteInput, {
-      type: "text",
-      autoFocus: true,
-      ref: AutoCompleteRef,
-      value: AutoCompleteState,
-      selectType: inputAlert,
-      onChange: function onChange(e) {
-        return setAutoCompleteState(e.target.value);
-      }
+    children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+      style: {
+        position: 'relative',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AutoCompleteInput, {
+        type: "text",
+        autoFocus: true,
+        fullWidth: true,
+        ref: AutoCompleteRef,
+        value: autoCompleteState,
+        selectType: inputAlert,
+        onChange: function onChange(e) {
+          setAutoCompleteState(e.target.value);
+        }
+      }), isLoadingData && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+        style: {
+          padding: '.6em',
+          position: 'absolute',
+          top: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: "sm"
+        }, "load-more-data-spinner")
+      })]
     }), dataToShow.map(function (option, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
         ref: !AutoComplete && index === chosenItem ? OptionRef : null,
@@ -145,7 +193,7 @@ function OptionsArea(_ref) {
         active: index === chosenItem,
         tabIndex: 0,
         selectType: inputAlert,
-        onClick: function onClick(e) {
+        onClick: function onClick() {
           return chooseOption(option);
         },
         onKeyDown: function onKeyDown(e) {
@@ -153,8 +201,54 @@ function OptionsArea(_ref) {
         },
         children: option.label
       }, "".concat(option.label).concat(index));
-    }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Span, {
-      children: "Sem Resultados"
+    }), infiniteScroll && hasMoreData && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: loadMoreRef,
+        style: {
+          width: '100%',
+          height: '1px'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+        alignItems: "center",
+        justifyContent: "center",
+        style: {
+          width: '100%',
+          padding: '.5em'
+        },
+        children: isLoadingData && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: "sm"
+        }, "load-more-data-spinner")
+      })]
+    }), !infiniteScroll && hasMoreData && dataToShow.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+      style: {
+        width: '100%',
+        padding: '.5em'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        fullWidth: true,
+        size: "sm",
+        variant: "outline",
+        bgColor: "primary.disabled",
+        textColor: "primary.default",
+        onClick: function onClick() {
+          return loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData();
+        },
+        children: isLoadingData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: "sm"
+        }, "load-more-data-spinner") : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "refresh-ccw",
+            size: 18
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            fontSize: "xxs",
+            fontWeight: "600",
+            color: "neutral.black",
+            children: "Carregar mais"
+          })]
+        })
+      })
+    }), noResultsFound && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Span, {
+      children: autoCompleteHelperText
     })]
   });
 }

package/dist/components/MultipleSelect/components/OptionsArea/styles.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=styles.d.ts.map

package/dist/components/MultipleSelect/components/OptionsArea/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,kBAAkB;;;uHAwC9B,CAAC;AA6BF,eAAO,MAAM,iBAAiB;;;gIAe7B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yHAGhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mHAErB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,kBAAkB;;;uHAwC9B,CAAC;AA6BF,eAAO,MAAM,iBAAiB;;;gIAiB7B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yHAIhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mHAErB,CAAC"}

package/dist/components/MultipleSelect/components/OptionsArea/styles.js

@@ -66,7 +66,7 @@ var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2
   return theme.borderRadius.default;
 });
 
-var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  outline: 0;\n  color: ", ";\n\n  background: ", ";\n\n  margin-bottom: 8px;\n\n  border: 2px solid\n    ", ";\n\n  border-radius: ", "; ;\n"])), function (_ref11) {
+var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  padding-left: 2em;\n  outline: 0;\n  color: ", ";\n\n  background: ", ";\n\n  margin-bottom: 8px;\n  width: 100%;\n\n  border: 2px solid\n    ", ";\n\n  border-radius: ", "; ;\n"])), function (_ref11) {
   var theme = _ref11.theme;
   return {
     dark: theme.colors.neutral.white,
@@ -89,9 +89,12 @@ var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObje
 
 exports.AutoCompleteInput = AutoCompleteInput;
 
-var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-align: center;\n"])), function (_ref15) {
+var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-align: center;\n  color: ", ";\n"])), function (_ref15) {
   var theme = _ref15.theme;
-  return theme.fontSizes.xxxs;
+  return theme.fontSizes.xxs;
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.colors.error.default;
 });
 
 exports.Span = Span;

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

@@ -1,21 +1,21 @@
-/// <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;
-} & {
-    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;
-} & 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;
+} & {
+    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;
+} & 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/MultipleSelect/components/SelectArea/index.d.ts

@@ -1,18 +1,18 @@
-import { SelectType, SelectData } from '../../types';
-import { MouseEvent, ReactElement } from 'react';
-interface ISelectAreaProps {
-    disabled: boolean;
-    label?: string;
-    inputAlert?: SelectType;
-    dropDownIcon?: ReactElement;
-    multiple?: boolean;
-    placeholder?: string;
-    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, multiple, removeSelectedOption, selectedOptions, setSelectedOptions, dropDownIcon, placeholder, }: ISelectAreaProps): JSX.Element;
-export {};
+import { MouseEvent, ReactElement } from 'react';
+import { SelectType, SelectData } from '../../types';
+interface ISelectAreaProps {
+    disabled: boolean;
+    label?: string;
+    inputAlert?: SelectType;
+    dropDownIcon?: ReactElement;
+    multiple?: boolean;
+    placeholder?: string;
+    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, multiple, removeSelectedOption, selectedOptions, setSelectedOptions, dropDownIcon, placeholder, }: ISelectAreaProps): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGjD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,oBAAoB,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClD,qBAAqB,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,WAAW,GACZ,EAAE,gBAAgB,eAuDlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAcjD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAErD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,oBAAoB,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClD,qBAAqB,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,WAAW,GACZ,EAAE,gBAAgB,eAuDlB"}

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

@@ -7,13 +7,13 @@ exports.SelectArea = SelectArea;
 
 var _SelectAreaWrapper = require("./SelectAreaWrapper");
 
-var _styles = require("./styles");
+var _Icon = _interopRequireDefault(require("../../../Icon"));
 
 var _SelectedOptionsArea = require("./SelectedOptionsArea");
 
 var _ButtonsArea = require("./ButtonsArea");
 
-var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -82,6 +82,7 @@ function SelectArea(_ref) {
           size: "20px"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonsArea.Button, {
+        type: "button",
         show: true,
         tabIndex: 0,
         disabled: disabled,

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

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { IStyleProps, SelectType } 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>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, 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 { IStyleProps, SelectType } 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>, {}>;
+export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, 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/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';
-declare type Props = ComponentPropsWithoutRef<'p'>;
-declare const MultipleSelect: FC<ISelectInputProps & Props>;
-export default MultipleSelect;
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ISelectInputProps } from './types';
+declare type Props = ComponentPropsWithoutRef<'p'>;
+declare const MultipleSelect: FC<ISelectInputProps & Props>;
+export default MultipleSelect;
 //# sourceMappingURL=index.d.ts.map