@pedidopago/ui 1.7.20 → 1.7.22

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

@@ -1,12 +1,12 @@
-import { GlobalColorsProps } from '../../shared/theme';
-import { IconName } from '../Icon/types';
-export interface IllustrationProps {
-    iconName?: IconName;
-    name?: 'illust-order' | IconName;
-    color?: GlobalColorsProps | (string & {});
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative' | undefined;
-    bubblePosition?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'center' | undefined;
-    bubbleColor?: GlobalColorsProps | (string & {});
-    size?: number;
-}
+import { GlobalColorsProps } from '../../shared/theme';
+import { IconName } from '../Icon/types';
+export interface IllustrationProps {
+    iconName?: IconName;
+    name?: 'illust-order' | IconName;
+    color?: GlobalColorsProps | (string & {});
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative' | undefined;
+    bubblePosition?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'center' | undefined;
+    bubbleColor?: GlobalColorsProps | (string & {});
+    size?: number;
+}
 //# 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/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ImageItem/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,gBAAgB;;;uHAO5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;uHAaxB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;uHAK9B,CAAC;AAEF,eAAO,MAAM,KAAK;;;uHAIjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;uHAA4B,CAAC;AAElD,eAAO,MAAM,WAAW;;;uHAA4B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ImageItem/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,gBAAgB;;;uHAO5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;uHAaxB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;uHAK9B,CAAC;AAEF,eAAO,MAAM,KAAK;;;uHAGjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;uHAA4B,CAAC;AAElD,eAAO,MAAM,WAAW;;;uHAA4B,CAAC"}

package/dist/components/ImageItem/styles.js

@@ -33,7 +33,7 @@ var DescriptionWrapper = _styled.default.div(_templateObject3 || (_templateObjec
 exports.DescriptionWrapper = DescriptionWrapper;
 var Title = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-weight: ", ";\n"])), function (_ref6) {
   var theme = _ref6.theme;
-  return theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.white;
+  return theme.colors.neutral.black;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.fontWeight['500'];
@@ -51,12 +51,11 @@ function effectsControl(_ref8) {
   var neutral5 = theme.colors.neutral.neutral5;
   var neutral3 = theme.colors.neutral.neutral3;
   var neutral2 = theme.colors.neutral.neutral2;
-  var neutral1 = theme.colors.neutral.neutral1;
   var hover = color || theme.colors.primary.hover;
   var focus = color ? (0, _brightnessColorChange.brightnessColorChange)(color, -0.2) : theme.colors.primary.focus;
   if (disabled) {
-    return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      #ImageItem-Title {\n        color: ", ";\n      }\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n\n      #ImageItem-ImageWrapper {\n        filter: grayscale(80%);\n      }\n    "])), theme.colorMode === 'light' ? neutral3 : neutral2, theme.colorMode === 'light' ? neutral2 : neutral1, neutral2);
+    return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      #ImageItem-Title {\n        color: ", ";\n      }\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n\n      #ImageItem-ImageWrapper {\n        filter: grayscale(80%);\n      }\n    "])), neutral3, neutral2, neutral2);
   } else {
-    return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      &:hover {\n        #ImageItem-Title {\n          color: ", ";\n        }\n      }\n\n      &:focus {\n        #ImageItem-Title {\n          color: ", ";\n        }\n        #ImageItem-ImageWrapper {\n          border: 1px solid;\n          border-color: ", ";\n          border-radius: ", ";\n        }\n      }\n\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n    "])), hover, focus, focus, theme.borderRadius.default, theme.colorMode === 'light' ? neutral5 : theme.colors.neutral.neutral1, neutral5);
+    return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      &:hover {\n        #ImageItem-Title {\n          color: ", ";\n        }\n      }\n\n      &:focus {\n        #ImageItem-Title {\n          color: ", ";\n        }\n        #ImageItem-ImageWrapper {\n          border: 1px solid;\n          border-color: ", ";\n          border-radius: ", ";\n        }\n      }\n\n      #ImageItem-Subtitle {\n        color: ", ";\n      }\n\n      #ImageItem-Description {\n        color: ", ";\n      }\n    "])), hover, focus, focus, theme.borderRadius.default, neutral5, neutral5);
   }
 }

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

@@ -1,26 +1,26 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Theme } from '@emotion/react';
-export type IStyleProps = {
-    theme?: Theme;
-    imageSide?: 'left' | 'right';
-    disabled?: boolean;
-    color?: string;
-    size?: 'normal' | 'large';
-};
-export 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 type IStyleProps = {
+    theme?: Theme;
+    imageSide?: 'left' | 'right';
+    disabled?: boolean;
+    color?: string;
+    size?: 'normal' | 'large';
+};
+export 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.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../Typography"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "hiddenContent", "helperText", "alert", "withAddon", "addonContent", "withIcon", "onLeftIconClick", "onRightIconClick", "leftIcon", "rightIcon"];
@@ -77,7 +78,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       children: [withAddon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonElement, {
         alert: alert,
         hasDisabled: disabled,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonContent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          fontSize: "xs",
           children: addonContent
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContent, {

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,70 +1,66 @@
-/// <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>, {}>;
+/// <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>, {}>;
 //# 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;;;;;;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;AAQF,eAAO,MAAM,KAAK;;;+HAqBjB,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"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;yGAsG7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAQvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAUrB,CAAC;AAQF,eAAO,MAAM,KAAK;;;+HAqBjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;kHAkBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAsCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAQtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAgCxB,CAAC"}

package/dist/components/Input/styles.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LegendText = exports.Legend = exports.InputLabel = exports.InputIcon = exports.InputGroupElement = exports.InputContentRow = exports.InputContent = exports.InputColumn = exports.Input = exports.HelperText = exports.Fieldset = exports.AddonElement = exports.AddonContent = void 0;
+exports.LegendText = exports.Legend = exports.InputLabel = exports.InputIcon = exports.InputGroupElement = exports.InputContentRow = exports.InputContent = exports.InputColumn = exports.Input = exports.HelperText = exports.Fieldset = exports.AddonElement = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("@emotion/react");
-var _getColorValue = require("../../utils/getColorValue");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _invertColor = require("../../utils//invertColor");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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: 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) {
+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  > 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\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    height: ", ";\n    background: ", ";\n  }\n"])), function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
   return props.theme.fontWeight[400];
@@ -46,48 +45,32 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 }, function (props) {
   return !props.alert && props.withAddon && props.theme.colors.primary.hover;
 }, function (props) {
-  return !props.alert && props.theme.colors.primary.focus;
+  return props.alert ? (0, _invertColor.invertColor)(props.theme.colors[props.alert].default, true) : props.theme.colors.neutral.black;
 }, function (props) {
   return props.theme.colors.primary.disabled;
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.neutral.neutral5;
 }, function (props) {
-  return props.alert ? props.theme.colorMode === 'dark' ? props.theme.colors[props.alert].dark : "".concat(props.theme.colors[props.alert].blurred, "33") : props.theme.colors.primary.disabled;
-}, function (props) {
-  if (props.labelBackground) {
-    if (_typeof(props.labelBackground) === 'object') {
-      return (0, _getColorValue.getColorValue)(props.labelBackground[props.theme.colorMode] || '', props.theme, '#fff');
-    }
-    return (0, _getColorValue.getColorValue)(props.labelBackground || '', props.theme, '#fff');
-  }
-  return {
-    dark: props.theme.colors.neutral.black,
-    light: props.theme.colors.neutral.white
-  }[props.theme.colorMode];
+  return props.alert ? "".concat(props.theme.colors[props.alert].blurred, "33") : props.theme.colors.primary.disabled;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.neutral.white;
 }, function (props) {
   return !props.alert && props.theme.colors.primary.hover;
 }, function (props) {
   return props.addonContent && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:focus-within > div > div:first-of-type {\n        border-color: ", ";\n        background-color: ", ";\n      }\n    "])), props.alert ? 'transparent' : props.theme.colors.primary.focus, props.alert && props.alert === 'success' ? props.theme.colors.primary.focus : '');
-}, function (_ref5) {
-  var hasValueOnInput = _ref5.hasValueOnInput,
-    withIcon = _ref5.withIcon;
-  return hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : withIcon ? 'translate(60px, calc(100% - 10px))' : 'translate(20px, calc(100% - 10px))';
-}, function (props) {
-  if (!props.hasValueOnInput) return 'unset';
-  if (props.labelBackground) {
-    if (_typeof(props.labelBackground) === 'object') {
-      return (0, _getColorValue.getColorValue)(props.labelBackground[props.theme.colorMode] || '', props.theme, '#fff');
-    }
-    return (0, _getColorValue.getColorValue)(props.labelBackground || '', props.theme, '#fff');
-  }
-  return {
-    dark: props.theme.colors.neutral.black,
-    light: props.theme.colors.neutral.white
-  }[props.theme.colorMode];
 }, function (_ref6) {
-  var hasValueOnInput = _ref6.hasValueOnInput;
+  var hasValueOnInput = _ref6.hasValueOnInput,
+    withIcon = _ref6.withIcon;
+  return hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : withIcon ? 'translate(60px, calc(100% - 10px))' : 'translate(20px, calc(100% - 10px))';
+}, function (_ref7) {
+  var hasValueOnInput = _ref7.hasValueOnInput;
   return hasValueOnInput ? '20px' : 'unset';
+}, function (_ref8) {
+  var hasValueOnInput = _ref8.hasValueOnInput,
+    theme = _ref8.theme;
+  return hasValueOnInput ? theme.colors.neutral.white : 'transparent';
 });
 exports.InputGroupElement = InputGroupElement;
 var InputColumn = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ", ";\n  width: 100%;\n  min-height: 56px;\n"])), function (props) {
@@ -105,7 +88,7 @@ var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _tag
 }, function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral5;
+  return props.theme.colors.neutral.neutral5;
 });
 exports.InputIcon = InputIcon;
 function inputPadding(props) {
@@ -116,11 +99,11 @@ function inputPadding(props) {
 }
 var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ", ";\n  &:disabled {\n    color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ", ";\n  background-color: transparent;\n  position: relative;\n  font-weight: 500;\n"])), inputPadding, function (props) {
   return props.theme.colors.neutral.black;
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, function (_ref9) {
+  var theme = _ref9.theme;
   return theme.colors.neutral.neutral5;
-}, function (_ref8) {
-  var theme = _ref8.theme;
+}, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.colors.neutral.neutral5;
 }, function (props) {
   return props.theme.fontSizes.xs;
@@ -129,16 +112,16 @@ 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\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 props.theme.colors.neutral.neutral3;
+}, function (_ref11) {
+  var withIcon = _ref11.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 (_ref10) {
-  var alert = _ref10.alert,
-    theme = _ref10.theme,
-    hasDisabled = _ref10.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 (_ref12) {
+  var alert = _ref12.alert,
+    theme = _ref12.theme,
+    hasDisabled = _ref12.hasDisabled;
   if (alert && !hasDisabled) {
     return "".concat(theme.colors[alert].blurred, "33");
   }
@@ -148,17 +131,14 @@ 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 (_ref11) {
-  var theme = _ref11.theme,
-    hasDisabled = _ref11.hasDisabled,
-    alert = _ref11.alert;
+}, function (_ref13) {
+  var theme = _ref13.theme,
+    hasDisabled = _ref13.hasDisabled,
+    alert = _ref13.alert;
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;
   }
-  return {
-    light: theme.colors.neutral.neutral2,
-    dark: theme.colors.neutral.neutral5
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral2;
 }, function (props) {
   return props.withAddon ? 'none !important' : 'auto';
 });
@@ -170,7 +150,7 @@ exports.LegendText = LegendText;
 var HelperText = _styled.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
   return props.theme.fontSizes.xxs;
 }, function (props) {
-  return props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral4;
+  return props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral4;
 });
 exports.HelperText = HelperText;
 var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 0 20px;\n  height: 100%;\n\n  background-color: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  border: 2px solid\n    ", ";\n  border-right: none;\n\n  border-radius: ", " 0 0\n    ", ";\n"])), function (props) {
@@ -178,38 +158,20 @@ var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 =
     return props.theme.colors[props.alert].default;
   }
   if (props.hasDisabled) {
-    return {
-      light: props.theme.colors.neutral.neutral2,
-      dark: props.theme.colors.neutral.neutral5
-    }[props.theme.colorMode];
+    return props.theme.colors.neutral.neutral2;
   }
-  return {
-    light: props.theme.colors.neutral.neutral1,
-    dark: props.theme.colors.neutral.neutral6
-  }[props.theme.colorMode];
-}, function (_ref12) {
-  var theme = _ref12.theme,
-    hasDisabled = _ref12.hasDisabled,
-    alert = _ref12.alert;
+  return props.theme.colors.neutral.neutral1;
+}, function (_ref14) {
+  var theme = _ref14.theme,
+    hasDisabled = _ref14.hasDisabled,
+    alert = _ref14.alert;
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;
   }
-  return {
-    light: theme.colors.neutral.neutral2,
-    dark: theme.colors.neutral.neutral5
-  }[theme.colorMode];
+  return theme.colors.neutral.neutral2;
 }, function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
   return props.theme.borderRadius.default;
 });
-exports.AddonElement = AddonElement;
-var AddonContent = _styled.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
-  return props.theme.fontSizes.xs;
-}, function (props) {
-  return {
-    light: props.theme.colors.neutral.black,
-    dark: props.theme.colors.neutral.white
-  }[props.theme.colorMode];
-});
-exports.AddonContent = AddonContent;
+exports.AddonElement = AddonElement;