@pedidopago/ui 1.3.10 → 1.3.13

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { LabelProps } from './types';
-declare const LabelInput: FC<LabelProps>;
-export default LabelInput;
+import { FC } from 'react';
+import { LabelProps } from './types';
+declare const LabelInput: FC<LabelProps>;
+export default LabelInput;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Label/label.test.d.ts

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

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IStyleProps } from './types';
-export declare const LabelWrapper: 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 LabelWrapper: 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=styles.d.ts.map

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

@@ -1,16 +1,16 @@
-import { ExtendThemeProps } from '../../shared/theme';
-import { IconName } from '../Icon/types';
-export declare type IStyleProps = {
-    theme?: ExtendThemeProps;
-    disabled?: boolean;
-    isActive?: boolean;
-    backgroundColor?: string;
-    color?: string;
-};
-export declare type LabelProps = {
-    labelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-    icon?: IconName;
-    label?: string;
-    iconSide?: 'left' | 'right';
-};
+import { ExtendThemeProps } from '../../shared/theme';
+import { IconName } from '../Icon/types';
+export declare type IStyleProps = {
+    theme?: ExtendThemeProps;
+    disabled?: boolean;
+    isActive?: boolean;
+    backgroundColor?: string;
+    color?: string;
+};
+export declare type LabelProps = {
+    labelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+    icon?: IconName;
+    label?: string;
+    iconSide?: 'left' | 'right';
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ListProps } from './types';
-declare const List: FC<ListProps>;
-export default List;
+import { FC } from 'react';
+import { ListProps } from './types';
+declare const List: FC<ListProps>;
+export default List;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/List/list.test.d.ts

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

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

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { GenericStyledProps } from '../../@types';
-import { ListProps } from './types';
-export declare const StyledList: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ListProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const StyledListTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+import { ListProps } from './types';
+export declare const StyledList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ListProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const StyledListTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,8 +1,8 @@
-import { MouseEventHandler } from 'react';
-export interface ListProps {
-    title?: string;
-    maxHeight?: string;
-    item?: boolean;
-    onClick?: MouseEventHandler;
-}
+import { MouseEventHandler } from 'react';
+export interface ListProps {
+    title?: string;
+    maxHeight?: string;
+    item?: boolean;
+    onClick?: MouseEventHandler;
+}
 //# sourceMappingURL=types.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ModalProps } from './types';
-export declare const Modal: ({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps) => JSX.Element;
+/// <reference types="react" />
+import { ModalProps } from './types';
+export declare const Modal: ({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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/styles.d.ts

@@ -1,28 +1,28 @@
-/// <reference types="react" />
-import { Theme } from '@emotion/react';
-interface ModalContainerProps {
-    open: boolean;
-    maxWidth?: string;
-    maxHeight?: string;
-    anchorTranslate: string;
-    left: string;
-    top: string;
-}
-export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & ModalContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ModalElement: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    open: boolean;
-    maxHeight?: 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>, {}>;
-export {};
+/// <reference types="react" />
+import { Theme } from '@emotion/react';
+interface ModalContainerProps {
+    open: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    anchorTranslate: string;
+    left: string;
+    top: string;
+}
+export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ModalContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalElement: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    open: boolean;
+    maxHeight?: 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>, {}>;
+export {};
 //# sourceMappingURL=styles.d.ts.map

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/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/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/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/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.js

@@ -1,36 +1,36 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = void 0;
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _react = require("@emotion/react");
-
-var _templateObject, _templateObject2;
-
-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 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 {
-    dark: theme.colors.neutral.white,
-    light: theme.colors.neutral.neutral5
-  }[theme.colorMode];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fontWeight['500'];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.fontSizes.xxs;
-}, 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) : '';
-});
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2;
+
+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 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 {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.neutral5
+  }[theme.colorMode];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.fontWeight['500'];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.fontSizes.xxs;
+}, 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/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,19 +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 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;
+} & 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

@@ -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;;;uHAI/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;uHAuBhC,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":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,mBAAmB;;;uHAK/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

@@ -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 SelectedOptionsArea = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n"])));
+var SelectedOptionsArea = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n  position: relative;\n"])));
 
 exports.SelectedOptionsArea = SelectedOptionsArea;
 

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

@@ -1,17 +1,18 @@
-import { AlertType, SelectData } from '../../types';
-import { MouseEvent, ReactElement } from 'react';
-interface ISelectAreaProps {
-    disabled: boolean;
-    label?: string;
-    inputAlert?: AlertType;
-    dropDownIcon?: ReactElement;
-    multiple?: boolean;
-    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, }: ISelectAreaProps): JSX.Element;
-export {};
+import { AlertType, SelectData } from '../../types';
+import { MouseEvent, ReactElement } from 'react';
+interface ISelectAreaProps {
+    disabled: boolean;
+    label?: string;
+    inputAlert?: AlertType;
+    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,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,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,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,oBAAoB,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/E,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,GACb,EAAE,gBAAgB,eA8ClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,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,SAAS,CAAC;IACvB,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,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/E,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,eAoDlB"}