@pedidopago/ui 1.5.15 → 1.5.18

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

@@ -7,7 +7,9 @@ exports.Span = exports.OptionsAreaWrapper = exports.OptionItem = exports.AutoCom
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _react = require("react");
+var _framerMotion = require("framer-motion");
+
+var _react = require("@emotion/react");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -15,90 +17,54 @@ 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 OptionsAreaWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 54px;\n  left: 0;\n  z-index: ", ";\n\n  display: flex;\n  scroll-behavior: smooth;\n\n  flex-direction: column;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  color: ", ";\n\n  width: 100%;\n  max-height: 248px;\n  border-radius: ", ";\n\n  overflow-y: auto;\n\n  padding: 8px;\n\n  box-shadow: ", ";\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
-  return props.theme.zIndex.level2;
-}, function (_ref) {
-  var theme = _ref.theme;
-  return {
-    dark: theme.colors.neutral.neutral6,
-    light: theme.colors.body.light
-  }[theme.colorMode];
-}, function (_ref2) {
+var OptionsAreaWrapper = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
+  var theme = _ref.theme,
+      top = _ref.top,
+      selectType = _ref.selectType,
+      width = _ref.width;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: fixed;\n      top: ", ";\n      display: flex;\n      scroll-behavior: smooth;\n      flex-direction: column;\n      box-sizing: border-box;\n      background-color: ", ";\n\n      color: ", ";\n\n      width: ", ";\n      max-height: 248px;\n      border-radius: ", ";\n\n      overflow-y: auto;\n\n      padding: 8px;\n\n      box-shadow: ", ";\n\n      &::-webkit-scrollbar {\n        width: 6px;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: ", ";\n        border-radius: ", ";\n      }\n    "])), top, theme.colors.body.light, theme.colors.neutral.black, width + 'px', theme.borderRadius.default, theme.shadow.level3, selectType ? theme.colors[selectType].default : theme.colors.primary.default, theme.borderRadius.default);
+});
+exports.OptionsAreaWrapper = OptionsAreaWrapper;
+
+var OptionItem = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  padding: 16px 24px;\n\n  outline: 0;\n  background: none;\n  border: 0;\n\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  cursor: pointer;\n\n  :focus,\n  :hover {\n    background-color: ", ";\n\n    border-radius: ", ";\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.black
-  }[theme.colorMode];
+  return theme.fontSizes.xs;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.borderRadius.default;
+  return theme.fontWeight['500'];
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return {
-    dark: "0px 16px 32px ".concat(theme.colors.neutral.black),
-    light: theme.shadow.level3
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral5;
 }, function (_ref5) {
-  var theme = _ref5.theme,
-      selectType = _ref5.selectType;
-  return selectType ? theme.colors[selectType].default : theme.colors.primary.default;
+  var theme = _ref5.theme;
+  return theme.colors.neutral.neutral1;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.borderRadius.default;
 });
 
-exports.OptionsAreaWrapper = OptionsAreaWrapper;
+exports.OptionItem = OptionItem;
 
-var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  padding: 16px 24px;\n\n  outline: 0;\n  background: none;\n  border: 0;\n\n  font-size: ", ";\n  font-weight: ", ";\n\n  cursor: pointer;\n\n  :focus,\n  :hover {\n    background-color: ", ";\n\n    border-radius: ", ";\n  }\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.fontSizes.xs;
+var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  padding-left: ", ";\n  outline: 0;\n\n  font: inherit;\n\n  margin-bottom: 8px;\n  width: 100%;\n\n  border: 2px solid\n    ", ";\n\n  border-radius: ", "; ;\n"])), function (_ref7) {
+  var isLoadingData = _ref7.isLoadingData;
+  return isLoadingData ? '2em' : '1em';
 }, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.fontWeight['500'];
+  var theme = _ref8.theme,
+      selectType = _ref8.selectType;
+  return selectType ? theme.colors[selectType].blurred : theme.colors.primary.disabled;
 }, function (_ref9) {
   var theme = _ref9.theme;
-  return {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode];
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.borderRadius.default;
-});
-
-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,
-    light: ''
-  }[theme.colorMode];
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return {
-    dark: theme.colors.neutral.neutral3,
-    light: ''
-  }[theme.colorMode];
-}, function (_ref13) {
-  var theme = _ref13.theme,
-      selectType = _ref13.selectType;
-  return selectType ? theme.colors[selectType].blurred : theme.colors.primary.disabled;
-}, function (_ref14) {
-  var theme = _ref14.theme;
   return theme.borderRadius.default;
 });
 
 exports.AutoCompleteInput = AutoCompleteInput;
 
-var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-align: center;\n  color: ", ";\n"])), function (_ref15) {
-  var theme = _ref15.theme;
+var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-align: center;\n  color: ", ";\n"])), function (_ref10) {
+  var theme = _ref10.theme;
   return theme.fontSizes.xxs;
-}, function (_ref16) {
-  var theme = _ref16.theme;
+}, function (_ref11) {
+  var theme = _ref11.theme;
   return theme.colors.error.default;
 });
 
-exports.Span = Span;
-var OptionItem = /*#__PURE__*/(0, _react.memo)(OptionItemStyle, function (prevProps, nextProps) {
-  return prevProps.active === nextProps.active;
-});
-exports.OptionItem = OptionItem;
+exports.Span = Span;

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

@@ -0,0 +1,21 @@
+import { MutableRefObject } from 'react';
+import { SelectData, SelectType } from '../../types';
+export interface IOptionsAreaProps {
+    inputAlert: SelectType;
+    showOptionsArea: boolean;
+    data: SelectData[];
+    isLoadingData?: boolean;
+    selectedOptions: SelectData[];
+    AutoComplete: boolean;
+    chooseOption: (option: SelectData) => void;
+    scrollHandler: (e: React.UIEvent<HTMLDivElement>) => void;
+    setShowOptionsArea: (state: boolean) => void;
+    onChangeSearch?: (data: string) => void;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    autoCompleteHelperText?: string;
+    infiniteScroll: boolean;
+    parentRef: MutableRefObject<HTMLDivElement | null>;
+    positionOptions: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,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,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,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;IACxB,SAAS,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;CACzB"}

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

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

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

@@ -1,11 +1,14 @@
-/// <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" />
+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/ButtonsArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/ButtonsArea.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,WAAW;;;uHA+BvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;mIAOlB,CAAC"}
+{"version":3,"file":"ButtonsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/ButtonsArea.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,WAAW;;;;cAA0B,OAAO;yGAgCxD,CAAC;AAEF,eAAO,MAAM,MAAM;;;;UAAyB,OAAO;qHAOlD,CAAC"}

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

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonsArea = exports.Button = void 0;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = require("@emotion/react");
 
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
 var _templateObject, _templateObject2, _templateObject3;
 
 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 ButtonsArea = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  min-width: 64px;\n\n  button {\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    margin-left: 8px;\n    padding: 0;\n\n    background: none;\n    border: 0;\n    border-radius: 12px;\n    outline: 0;\n\n    cursor: default;\n\n    ", "\n\n    :focus {\n      box-shadow: 0 0 0 2px ", ";\n    }\n  }\n"])), function (_ref) {
+var ButtonsArea = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  flex-wrap: wrap;\n\n  button {\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    margin-left: 8px;\n    padding: 0;\n\n    background: none;\n    border: 0;\n    border-radius: 12px;\n    outline: 0;\n\n    cursor: default;\n\n    ", "\n\n    :focus {\n      box-shadow: 0 0 0 2px ", ";\n    }\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return !disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        cursor: pointer;\n      "])));
 }, function (_ref2) {

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 { 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/SelectAreaWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectAreaWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/SelectAreaWrapper.ts"],"names":[],"mappings":";AAGA,OAAO,EAAc,WAAW,EAAE,MAAM,aAAa,CAAC;AAGtD,eAAO,MAAM,iBAAiB;;;uHAsB7B,CAAC"}
+{"version":3,"file":"SelectAreaWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/SelectAreaWrapper.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,iBAAiB;;;4HAqB7B,CAAC"}

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

@@ -15,20 +15,20 @@ 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 SelectAreaWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  position: relative;\n\n  width: 100%;\n  min-height: 52px;\n  padding: 4px 20px;\n\n  border: 2px solid\n    ", ";\n  border-radius: 8px;\n\n  transition: all ease-in-out 0.2s;\n\n  ", "\n"])), function (_ref) {
+var SelectAreaWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 80% 20%;\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  min-height: 52px;\n  padding: 4px 20px;\n\n  border: 2px solid ", ";\n  border-radius: 8px;\n\n  transition: all ease-in-out 0.2s;\n\n  &:hover {\n    label {\n      color: ", ";\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return {
-    light: theme.colors.neutral.neutral2,
-    dark: theme.colors.neutral.neutral5
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.neutral.neutral5;
 }, InputWrapperDisabledTratamentFunction);
 
 exports.SelectAreaWrapper = SelectAreaWrapper;
 
-function InputWrapperDisabledTratamentFunction(_ref2) {
-  var disabled = _ref2.disabled,
-      selectType = _ref2.selectType,
-      theme = _ref2.theme;
+function InputWrapperDisabledTratamentFunction(_ref3) {
+  var disabled = _ref3.disabled,
+      selectType = _ref3.selectType,
+      theme = _ref3.theme;
   var disableStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n\n    label {\n      color: ", ";\n    }\n\n    div:nth-of-type(1) {\n      button {\n        background-color: ", ";\n        color: ", ";\n      }\n    }\n  "])), theme ? theme.colors.neutral.neutral1 : '', theme ? theme.colors.neutral.neutral3 : '', theme ? theme.colors.neutral.white : '', theme ? theme.colors.neutral.neutral3 : '');
   var enableStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    &:hover {\n      border-color: ", ";\n    }\n\n    &:focus-within {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n\n    ", "\n  "])), selectType && theme ? theme.colors[selectType].blurred : theme && theme.colors.primary.hover, theme ? theme.colors.primary.focus : '', theme ? theme.colors.primary.disabled : '', alertControl(selectType, theme));
   return disabled ? disableStyle : enableStyle;

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

@@ -1,21 +1,22 @@
-/// <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" />
+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/SelectedOptionsArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedOptionsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/SelectedOptionsArea.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,mBAAmB;;;;;yGAe/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;uHA0BhC,CAAC;AAEF,eAAO,MAAM,cAAc;;;mIA4B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yHAI9B,CAAC"}
+{"version":3,"file":"SelectedOptionsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/SelectedOptionsArea.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,mBAAmB;;;;;yGAiB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;yGAyBhC,CAAC;AAEF,eAAO,MAAM,cAAc;;;qHAsB1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;2GAO9B,CAAC"}

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

@@ -9,7 +9,7 @@ var _react = require("@emotion/react");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,26 +19,23 @@ var SelectedOptionsArea = _styled.default.div(_templateObject || (_templateObjec
   var multiple = _ref.multiple;
 
   if (multiple) {
-    return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: flex;\n        flex-wrap: wrap;\n        flex: 1;\n        position: relative;\n      "])));
+    return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        display: flex;\n        flex-wrap: wrap;\n        flex: 1;\n        align-items: center;\n        position: relative;\n      "])));
   }
 
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: grid;\n    "])));
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "])));
 });
 
 exports.SelectedOptionsArea = SelectedOptionsArea;
 
 var SelectedSingleOption = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline;\n\n  min-width: 73px;\n  height: 29px;\n  padding: 4px 8px;\n  border-radius: 6px;\n\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  transition: all ease-in-out 0.2s;\n\n  font-weight: ", ";\n  font-size: ", ";\n\n  color: ", ";\n\n  ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return theme.fontWeight['400'];
+  return theme.fontWeight['500'];
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.fontSizes.xs;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.neutral5
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral5;
 }, function (_ref5) {
   var disabled = _ref5.disabled;
   return !disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
@@ -46,30 +43,24 @@ var SelectedSingleOption = _styled.default.div(_templateObject4 || (_templateObj
 
 exports.SelectedSingleOption = SelectedSingleOption;
 
-var SelectedOption = _styled.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  min-width: 73px;\n  height: 29px;\n  padding: 4px 8px;\n  border-radius: 6px;\n\n  margin: 2px;\n\n  transition: all ease-in-out 0.2s;\n\n  background-color: ", ";\n\n  border: 0;\n  color: ", ";\n\n  ", ";\n"])), function (_ref6) {
+var SelectedOption = _styled.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  min-width: 73px;\n  height: 29px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  margin: 2px;\n\n  transition: all ease-in-out 0.2s;\n\n  background-color: ", ";\n\n  border: 0;\n  color: ", ";\n\n  &:not(&:disabled) {\n    cursor: pointer;\n  }\n"])), function (_ref6) {
   var theme = _ref6.theme;
-  return {
-    dark: theme.colors.neutral.neutral4,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral1;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return {
     dark: theme.colors.neutral.white,
     light: theme.colors.neutral.neutral6
   }[theme.colorMode];
-}, function (_ref8) {
-  var disabled = _ref8.disabled;
-  return !disabled && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
 
 exports.SelectedOption = SelectedOption;
 
-var SelectedOptionText = _styled.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_ref9) {
-  var theme = _ref9.theme;
+var SelectedOptionText = _styled.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-right: 8px;\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_ref8) {
+  var theme = _ref8.theme;
   return theme.fontWeight['400'];
-}, function (_ref10) {
-  var theme = _ref10.theme;
+}, function (_ref9) {
+  var theme = _ref9.theme;
   return theme.fontSizes.xxs;
 });
 

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

@@ -1,18 +1,4 @@
-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 {};
+/// <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/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,UAAU,6GAqFtB,CAAC"}

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

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectArea = SelectArea;
+exports.SelectArea = void 0;
 
-var _SelectAreaWrapper = require("./SelectAreaWrapper");
+var _react = require("react");
 
-var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _ButtonsArea = require("./ButtonsArea");
+
+var _SelectAreaWrapper = require("./SelectAreaWrapper");
 
 var _SelectedOptionsArea = require("./SelectedOptionsArea");
 
-var _ButtonsArea = require("./ButtonsArea");
+var _Icon = _interopRequireDefault(require("src/components/Icon"));
+
+var _Flex = _interopRequireDefault(require("src/components/Flex"));
 
 var _styles = require("./styles");
 
@@ -19,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function SelectArea(_ref) {
+var SelectArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var disabled = _ref.disabled,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'SelectInput' : _ref$label,
@@ -29,10 +33,14 @@ function SelectArea(_ref) {
       multiple = _ref.multiple,
       removeSelectedOption = _ref.removeSelectedOption,
       selectedOptions = _ref.selectedOptions,
-      setSelectedOptions = _ref.setSelectedOptions,
       dropDownIcon = _ref.dropDownIcon,
       placeholder = _ref.placeholder;
+  var selectAreaRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return selectAreaRef.current;
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectAreaWrapper.SelectAreaWrapper, {
+    ref: selectAreaRef,
     "data-testid": "select-area",
     onKeyDown: function onKeyDown(e) {
       return e.key === 'ArrowDown' && setShowOptionsArea(true);
@@ -47,6 +55,7 @@ function SelectArea(_ref) {
       multiple: multiple,
       children: selectedOptions.length ? multiple ? selectedOptions.map(function (option) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedOptionsArea.SelectedOption, {
+          title: option.label,
           "data-testid": "select-area--selected-option",
           disabled: disabled,
           onClick: function onClick(e) {
@@ -54,9 +63,11 @@ function SelectArea(_ref) {
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedOptionsArea.SelectedOptionText, {
             children: option.label
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-            name: "x-circle",
-            size: "12px"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              name: "x-circle",
+              size: "12px"
+            })
           })]
         }, option.label);
       }) : selectedOptions.map(function (option) {
@@ -88,9 +99,12 @@ function SelectArea(_ref) {
         disabled: disabled,
         onClick: toggleOptionsAreaView,
         children: dropDownIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: "chevron-down"
+          name: "chevron-down",
+          color: "neutral.neutral5"
         })
       })]
     })]
   });
-}
+});
+exports.SelectArea = SelectArea;
+SelectArea.displayName = 'SelectArea';

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

@@ -1,17 +1,19 @@
-/// <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 { 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/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,KAAK;;;gIA8BjB,CAAC;AAEF,eAAO,MAAM,WAAW;;;mIAWvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;gBAA6B,UAAU;2GAU7D,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,eAAO,MAAM,KAAK;;;;aAA2B,OAAO;kHA+BnD,CAAC;AAEF,eAAO,MAAM,WAAW;;;qHAUvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;gBAA6B,UAAU;2GAU7D,CAAC"}

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

@@ -15,12 +15,9 @@ 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 Label = _styled.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  box-sizing: border-box;\n\n  color: ", ";\n  transition: all ease-in-out 0.2s;\n\n  font-weight: ", ";\n  font-size: ", ";\n\n  padding: 0 8px;\n\n  white-space: nowrap;\n  max-width: 80%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", ";\n"])), function (_ref) {
+var Label = _styled.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  box-sizing: border-box;\n\n  color: ", ";\n  transition: all ease-in-out 0.2s;\n\n  font-weight: ", ";\n  font-size: ", ";\n\n  padding-inline: 6px;\n\n  white-space: nowrap;\n  max-width: 80%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.neutral5
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral3;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.fontWeight['500'];
@@ -30,12 +27,12 @@ var Label = _styled.default.label(_templateObject || (_templateObject = _taggedT
 }, function (_ref4) {
   var animate = _ref4.animate,
       theme = _ref4.theme;
-  return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          top: 0;\n          transform: translate(-12px, -11px);\n          background-color: ", ";\n          height: 20px;\n        "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
+  return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          top: 0;\n          left: 2em;\n\n          transform: translate(-12px, -11px);\n          background-color: ", ";\n          height: 20px;\n        "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
 });
 
 exports.Label = Label;
 
-var Placeholder = _styled.default.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  font-weight: 500;\n  padding: 0 8px;\n  max-width: 70%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  transform: translateY(-50%);\n  color: ", ";\n"])), function (props) {
+var Placeholder = _styled.default.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  font-weight: 500;\n  max-width: 70%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  transform: translateY(-50%);\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.neutral.neutral3;
 });
 

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

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import { ExtendThemeProps } from 'src/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 declare type InputWrapperType = {
+    disabled: boolean;
+    selectType: SelectType;
+    theme?: ExtendThemeProps;
+};
+//# sourceMappingURL=types.d.ts.map