@pedidopago/ui 1.5.1 → 1.5.3

package/dist/components/Illustration/BoxClosedSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function BoxClosedSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function BoxClosedSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/BoxDeliverySvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function BoxDeliverySvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function BoxDeliverySvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/BoxOpenSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function BoxOpenSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function BoxOpenSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/CalendarSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function CalendarSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function CalendarSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/CardSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function CardSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function CardSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/CollaboratorSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function CollaboratorSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function CollaboratorSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/InquirySvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function InquirySvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function InquirySvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/OrderSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function OrderSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function OrderSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/PixSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function PixSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function PixSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/PrescriptionSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function PrescriptionSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function PrescriptionSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/TransportSvg/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function TransportSvg({ color }: {
-    color: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare function TransportSvg({ color }: {
+    color: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Illustration/illustration.test.d.ts

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { IconName } from '../Icon/types';
-export interface IllustrationProps {
-    iconName?: IconName;
-    name?: 'illust-inquiry' | 'illust-order' | 'illust-alternative-order' | 'illust-prescription' | 'illust-calendar' | 'illust-card' | 'illust-pix' | 'illust-boleto' | 'illust-box-closed' | 'illust-box-open' | 'illust-box-delivery' | 'illust-transport' | 'illust-collaborator';
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
-}
+import { IconName } from '../Icon/types';
+export interface IllustrationProps {
+    iconName?: IconName;
+    name?: 'illust-inquiry' | 'illust-order' | 'illust-alternative-order' | 'illust-prescription' | 'illust-calendar' | 'illust-card' | 'illust-pix' | 'illust-boleto' | 'illust-box-closed' | 'illust-box-open' | 'illust-box-delivery' | 'illust-transport' | 'illust-collaborator';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ImageItem/imageFake.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const ImageFake: JSX.Element;
+/// <reference types="react" />
+export declare const ImageFake: JSX.Element;
 //# sourceMappingURL=imageFake.d.ts.map

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

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

package/dist/components/ImageItem/input.test.d.ts

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

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

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import { IStyleProps } from './types';
-export declare const ImageItemWrapper: 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 ImageWrapper: 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 DescriptionWrapper: 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 Title: 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 Subtitle: 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 Description: 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 ImageItemWrapper: 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 ImageWrapper: 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 DescriptionWrapper: 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 Title: 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 Subtitle: 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 Description: 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/ImageItem/types.d.ts

@@ -1,26 +1,26 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Theme } from '@emotion/react';
-export declare type IStyleProps = {
-    theme?: Theme;
-    imageSide?: 'left' | 'right';
-    disabled?: boolean;
-    color?: string;
-    size?: 'normal' | 'large';
-};
-export declare type ImageItemStyles = {
-    imageItemStyle?: CSSProperties;
-    imageStyle?: CSSProperties;
-    titleStyle?: CSSProperties;
-    subtitleStyle?: CSSProperties;
-};
-export interface IInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
-    title?: string;
-    subtitle?: string;
-    size?: 'normal' | 'large';
-    imageSide?: 'left' | 'right';
-    styles?: ImageItemStyles;
-    color?: string;
-    disabled?: boolean;
-    children?: ReactNode;
-}
+import React, { CSSProperties, ReactNode } from 'react';
+import { Theme } from '@emotion/react';
+export declare type IStyleProps = {
+    theme?: Theme;
+    imageSide?: 'left' | 'right';
+    disabled?: boolean;
+    color?: string;
+    size?: 'normal' | 'large';
+};
+export declare type ImageItemStyles = {
+    imageItemStyle?: CSSProperties;
+    imageStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    subtitleStyle?: CSSProperties;
+};
+export interface IInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    title?: string;
+    subtitle?: string;
+    size?: 'normal' | 'large';
+    imageSide?: 'left' | 'right';
+    styles?: ImageItemStyles;
+    color?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,5 +1,5 @@
-import { InputHTMLAttributes } from 'react';
-import { InputGroupProps } from './types';
-declare const Input: import("react").ForwardRefExoticComponent<InputGroupProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
-export default Input;
+import { InputHTMLAttributes } from 'react';
+import { InputGroupProps } from './types';
+declare const Input: import("react").ForwardRefExoticComponent<InputGroupProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJA6FV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJAoGV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/dist/components/Input/index.js

@@ -13,7 +13,7 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "withIcon", "hiddenContent", "helperText", "alert", "withAddon", "addonContent"];
+var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "withIcon", "hiddenContent", "helperText", "alert", "withAddon", "addonContent", "leftIcon", "rightIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,6 +51,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       alert = _ref.alert,
       withAddon = _ref.withAddon,
       addonContent = _ref.addonContent,
+      leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -99,6 +101,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContent, {
         withAddon: withAddon,
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputLabel, {
+          withIcon: !!withIcon,
           hasDisabled: disabled,
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
@@ -112,13 +115,13 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
-          children: [withIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
-            children: withIcon
+          children: [(withIcon || leftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
+            children: withIcon || leftIcon
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread(_objectSpread({
             "data-input": "input",
             type: hiddenInfo ? 'password' : type,
             "aria-label": label,
-            withIcon: withIcon,
+            withIcon: withIcon || leftIcon || rightIcon,
             hiddenContent: hiddenContent,
             disabled: disabled,
             alert: alert,
@@ -139,6 +142,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "eye-off"
             })
+          }), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
+            children: rightIcon
           })]
         })]
       })]

package/dist/components/Input/input.test.d.ts

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

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

@@ -1,69 +1,70 @@
-/// <reference types="react" />
-import { InputComponentProps, InputProps } from './types';
-import { GenericStyledProps } from '../../@types';
-export declare const InputGroupElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputComponentProps & {
-    hasDisabled?: boolean | undefined;
-    withIcon?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputColumn: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    withAddon?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputContentRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    clickable?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Input: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const InputLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    hasDisabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const Fieldset: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputProps & {
-    hasDisabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
-export declare const Legend: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
-export declare const LegendText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const HelperText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const AddonElement: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & InputProps & {
-    hasDisabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AddonContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { InputComponentProps, InputProps } from './types';
+import { GenericStyledProps } from '../../@types';
+export declare const InputGroupElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputComponentProps & {
+    hasDisabled?: boolean | undefined;
+    withIcon?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    withAddon?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContentRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    clickable?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const InputLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    hasDisabled?: boolean | undefined;
+    withIcon?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Fieldset: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
+export declare const Legend: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
+export declare const LegendText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const AddonElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & InputProps & {
+    hasDisabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddonContent: 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=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGAuI7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAQvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGAsI7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAQvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;kHAqBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}

package/dist/components/Input/styles.js

@@ -19,7 +19,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ", ";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ", ";\n    &:hover label {\n      color: ", ";\n    }\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type span {\n    color: ", ";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ", ";\n  }\n  &:focus-within label {\n    color: ", ";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n\n    background-color: ", ";\n    height: 16px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ", ";\n  }\n\n  ", "\n\n  & label {\n    transform: ", ";\n\n    background-color: ", ";\n\n    height: ", ";\n  }\n"])), function (props) {
+var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ", ";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ", ";\n    &:hover label {\n      color: ", ";\n    }\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  &:focus-within > div > div:first-of-type span {\n    color: ", ";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ", ";\n  }\n  &:focus-within label {\n    color: ", ";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n\n    background-color: ", ";\n    height: 20px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ", ";\n  }\n\n  ", "\n\n  & label {\n    transform: ", ";\n\n    background-color: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
   return props.theme.fontWeight[400];
@@ -106,7 +106,7 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
   }[props.theme.colorMode];
 }, function (_ref6) {
   var hasValueOnInput = _ref6.hasValueOnInput;
-  return hasValueOnInput ? '16px' : 'unset';
+  return hasValueOnInput ? '20px' : 'unset';
 });
 
 exports.InputGroupElement = InputGroupElement;
@@ -153,18 +153,21 @@ var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _tagge
 
 exports.Input = Input;
 
-var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ", ";\n  pointer-events: none;\n  color: ", ";\n  background-color: transparent;\n  transform-origin: left;\n  transition: all ease 0.2s;\n  font-weight: 500;\n"])), function (props) {
+var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ", ";\n  pointer-events: none;\n  color: ", ";\n  background-color: transparent;\n  transform-origin: left;\n  transition: all ease 0.2s;\n  font-weight: 500;\n\n  white-space: nowrap;\n  max-width: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.theme.zIndex.level1;
 }, function (props) {
   return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral3;
+}, function (_ref9) {
+  var withIcon = _ref9.withIcon;
+  return withIcon ? '65%' : '85%';
 });
 
 exports.InputLabel = InputLabel;
 
-var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref9) {
-  var alert = _ref9.alert,
-      theme = _ref9.theme,
-      hasDisabled = _ref9.hasDisabled;
+var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref10) {
+  var alert = _ref10.alert,
+      theme = _ref10.theme,
+      hasDisabled = _ref10.hasDisabled;
 
   if (alert && !hasDisabled) {
     return "".concat(theme.colors[alert].blurred, "33");
@@ -177,10 +180,10 @@ var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 =
   return 'transparent';
 }, function (props) {
   return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      hasDisabled = _ref10.hasDisabled,
-      alert = _ref10.alert;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      hasDisabled = _ref11.hasDisabled,
+      alert = _ref11.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;
@@ -228,10 +231,10 @@ var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 =
     light: props.theme.colors.neutral.neutral1,
     dark: props.theme.colors.neutral.neutral6
   }[props.theme.colorMode];
-}, function (_ref11) {
-  var theme = _ref11.theme,
-      hasDisabled = _ref11.hasDisabled,
-      alert = _ref11.alert;
+}, function (_ref12) {
+  var theme = _ref12.theme,
+      hasDisabled = _ref12.hasDisabled,
+      alert = _ref12.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;