@pedidopago/ui 1.1.3 → 1.2.0

package/dist/components/Modal/modal.test.d.ts

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

package/dist/components/Modal/modal.test.js

@@ -179,4 +179,17 @@ describe('Modal', function () {
       maxWidth: '200px'
     });
   });
+  it('should display modal with maxHeight', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      maxHeight: '200px',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Hello world!"
+      })
+    });
+    expect(modal.modal).toHaveStyle({
+      maxHeight: '200px'
+    });
+  });
 });

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

@@ -1,13 +1,15 @@
-/// <reference types="react" />
-import { Theme } from '@emotion/react';
-export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    maxWidth?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Overlay: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { Theme } from '@emotion/react';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    maxHeight?: string | undefined;
+    maxWidth?: string | undefined;
+    hideScrollBar?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Overlay: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Modal/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;yGA6BpB,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;;;yGAwDpB,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}

package/dist/components/Modal/styles.js

@@ -17,7 +17,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var Container = _styled.default.div(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", ";\n\n    width: calc(100% - 32px);\n\n    max-width: ", ";\n\n    position: fixed;\n\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: transform ease ", ", opacity linear ", ";\n\n    z-index: ", ";\n\n    &:focus {\n      outline: 3px solid black;\n    }\n  "])), theme.borderRadius.default, props.maxWidth, theme.colorMode === 'light' ? theme.colors.background.light : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.shadow.level1 : "0 4px 8px ".concat(theme.colors.neutral.black), theme.transition.speed, theme.transition.speed, theme.zIndex.level24);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", ";\n\n    width: calc(100% - 32px);\n\n    max-width: ", ";\n    max-height: ", ";\n    position: fixed;\n\n    overflow-y: auto;\n    overflow-x: hidden;\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n\n    ", "\n\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: transform ease ", ", opacity linear ", ";\n\n    z-index: ", ";\n\n    &:focus {\n      outline: 3px solid black;\n    }\n  "])), theme.borderRadius.default, props.maxWidth, props.maxHeight, props.theme.borderRadius.default, props.theme.colors.primary.default, props.hideScrollBar && "::-webkit-scrollbar {\n      display: none;\n      }\n      \n      scrollbar-width: none;\n      \n      -ms-overflow-style: none;", theme.colorMode === 'light' ? theme.colors.background.light : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.shadow.level1 : "0 4px 8px ".concat(theme.colors.neutral.black), theme.transition.speed, theme.transition.speed, theme.zIndex.level24);
 });
 
 exports.Container = Container;

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

@@ -1,29 +1,35 @@
-import { ReactNode } from 'react';
-export declare type AnchorX = 'left' | 'center' | 'right' | number;
-export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
-export interface IModalProps {
-    /** 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;
-    /** Handler called once the Modal is triggered to close. */
-    onClose: () => void;
-    children: ReactNode;
-}
+import { ReactNode } from 'react';
+export declare type AnchorX = 'left' | 'center' | 'right' | number;
+export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
+export interface IModalProps {
+    /** 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;
+    /** The max height of the Modal. */
+    maxHeight?: string;
+    /** 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;
+    children: ReactNode;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/components/{SelectInput/selectInput.test.d.ts → MultipleSelect/MultipleSelect.test.d.ts}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleSelect.test.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/MultipleSelect.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yCAAyC,CAAC"}

package/dist/components/{SelectInput → 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/InputWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/InputWrapper/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,YAAY;;;uHAMxB,CAAC;AAeF,eAAO,MAAM,YAAY;;;kHAExB,CAAC"}

package/dist/components/{SelectInput → MultipleSelect}/components/OptionsArea/OptionsArea.d.ts

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

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

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

package/dist/components/{SelectInput → MultipleSelect}/components/OptionsArea/OptionsArea.js

@@ -15,18 +15,29 @@ 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  display: flex;\n  scroll-behavior: smooth;\n\n  flex-direction: column;\n  box-sizing: border-box;\n  background-color: ", ";\n  color: ", ";\n\n  width: 100%;\n  max-height: 248px;\n  border-radius: ", ";\n\n  border: 2px solid ", ";\n\n  overflow-y: auto;\n\n  padding: 8px;\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: ", ";\n  }\n"])), function (_ref) {
+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 theme.colorMode === 'dark' ? theme.colors.neutral : theme.colors.body.light;
+  return {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.body.light
+  }[theme.colorMode];
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.black
+  }[theme.colorMode];
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.borderRadius.default;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.neutral.neutral1;
+  return {
+    dark: "0px 16px 32px ".concat(theme.colors.neutral.black),
+    light: theme.shadow.level3
+  }[theme.colorMode];
 }, function (_ref5) {
   var theme = _ref5.theme,
       selectType = _ref5.selectType;
@@ -38,7 +49,7 @@ var OptionsAreaWrapper = _styled.default.div(_templateObject || (_templateObject
 
 exports.OptionsAreaWrapper = OptionsAreaWrapper;
 
-var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  height: 58px;\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    border-radius: ", ";\n  }\n"])), function (_ref7) {
+var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  height: 58px;\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;
 }, function (_ref8) {
@@ -46,18 +57,27 @@ var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2
   return theme.fontWeight['500'];
 }, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1;
+  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  outline: 0;\n  color: ", ";\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  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 theme = _ref11.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : '';
+  return {
+    dark: theme.colors.neutral.white,
+    light: ''
+  }[theme.colorMode];
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral3 : '';
+  return {
+    dark: theme.colors.neutral.neutral3,
+    light: ''
+  }[theme.colorMode];
 }, function (_ref13) {
   var theme = _ref13.theme,
       selectType = _ref13.selectType;

package/dist/components/{SelectInput → MultipleSelect}/components/OptionsArea/index.d.ts

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

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

@@ -0,0 +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,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGpD,UAAU,iBAAiB;IACzB,UAAU,EAAE,SAAS,CAAC;IACtB,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,eAqGnB"}

package/dist/components/{SelectInput → MultipleSelect}/components/OptionsArea/index.js

@@ -138,7 +138,7 @@ function OptionsArea(_ref) {
         onKeyDown: function onKeyDown(e) {
           return e.key === 'Enter' && chooseOption(option);
         },
-        children: option.value
+        children: option.name
       }, "".concat(option.name).concat(index));
     }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.Span, {
       children: "Sem Resultados"

package/dist/components/{SelectInput → 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/ButtonsArea.d.ts.map

@@ -0,0 +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"}

package/dist/components/{SelectInput → MultipleSelect}/components/SelectArea/ButtonsArea.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var 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: none;\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  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 disabled = _ref.disabled;
   return !disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        cursor: pointer;\n      "])));
 }, function (_ref2) {
@@ -25,7 +25,7 @@ var ButtonsArea = _styled.default.div(_templateObject || (_templateObject = _tag
 
 exports.ButtonsArea = ButtonsArea;
 
-var Button = _styled.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: ", ";\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref3) {
+var Button = _styled.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: ", ";\n  justify-content: center;\n\n  svg {\n    color: ", ";\n  }\n"])), function (_ref3) {
   var show = _ref3.show;
   return show ? 'flex' : 'none';
 }, function (_ref4) {

package/dist/components/{SelectInput → MultipleSelect}/components/SelectArea/Label.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/Label.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,KAAK;;;gIAyBjB,CAAC"}

package/dist/components/{SelectInput → MultipleSelect}/components/SelectArea/Label.js

@@ -15,22 +15,22 @@ 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  z-index: ", ";\n  color: ", ";\n  transition: all ease-in-out 0.2s;\n\n  font-weight: ", ";\n  font-size: ", ";\n\n  padding: 0 8px;\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: 0 8px;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.zIndex.level1;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5;
+  return theme.fontWeight['500'];
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.fontWeight['500'];
-}, function (_ref4) {
-  var theme = _ref4.theme;
   return theme.fontSizes.xs;
-}, function (_ref5) {
-  var animate = _ref5.animate,
-      theme = _ref5.theme;
-  return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          z-index: ", ";\n          position: absolute;\n          top: 0;\n          transform: translate(-12px, -11px) scale(0.8);\n          background-color: ", ";\n          height: 20px;\n        "])), theme.zIndex.level2, theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
+}, 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) scale(0.8);\n          background-color: ", ";\n          height: 20px;\n        "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
 });
 
 exports.Label = Label;

package/dist/components/{SelectInput → 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/SelectAreaWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAreaWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/SelectAreaWrapper.ts"],"names":[],"mappings":";AAGA,OAAO,EAAa,WAAW,EAAE,MAAM,aAAa,CAAC;AAGrD,eAAO,MAAM,iBAAiB;;;uHAoB7B,CAAC"}

package/dist/components/{SelectInput → MultipleSelect}/components/SelectArea/SelectAreaWrapper.js

@@ -15,9 +15,12 @@ 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  box-sizing: border-box;\n  position: relative;\n\n  min-height: 56px;\n  padding: 8px 20px;\n\n  border: 2px solid ", ";\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: flex;\n  align-items: center;\n  box-sizing: border-box;\n  position: relative;\n\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 theme = _ref.theme;
-  return theme.colors.neutral.neutral2;
+  return {
+    light: theme.colors.neutral.neutral2,
+    dark: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, InputWrapperDisabledTratamentFunction);
 
 exports.SelectAreaWrapper = SelectAreaWrapper;

package/dist/components/{SelectInput → MultipleSelect}/components/SelectArea/SelectedOptionsArea.d.ts

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

@@ -0,0 +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;;;uHAI/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;uHAuBhC,CAAC;AAEF,eAAO,MAAM,cAAc;;;mIA4B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yHAI9B,CAAC"}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedSingleOption = exports.SelectedOptionsArea = exports.SelectedOptionText = exports.SelectedOption = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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 SelectedOptionsArea = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n"])));
+
+exports.SelectedOptionsArea = SelectedOptionsArea;
+
+var SelectedSingleOption = _styled.default.div(_templateObject2 || (_templateObject2 = _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  transition: all ease-in-out 0.2s;\n\n  font-weight: ", ";\n  font-size: ", ";\n\n  color: ", ";\n\n  ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.fontWeight['400'];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.fontSizes.xs;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.neutral5
+  }[theme.colorMode];
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return !disabled && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+});
+
+exports.SelectedSingleOption = SelectedSingleOption;
+
+var SelectedOption = _styled.default.button(_templateObject4 || (_templateObject4 = _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 (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode];
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.neutral6
+  }[theme.colorMode];
+}, function (_ref7) {
+  var disabled = _ref7.disabled;
+  return !disabled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+});
+
+exports.SelectedOption = SelectedOption;
+
+var SelectedOptionText = _styled.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: 8px;\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.fontWeight['400'];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.fontSizes.xxs;
+});
+
+exports.SelectedOptionText = SelectedOptionText;