@pedidopago/ui 1.1.2 → 1.1.5

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, FC } from 'react';
-import { IInputGroupProps } from './types';
-declare const Input: FC<InputHTMLAttributes<HTMLInputElement> & IInputGroupProps>;
-export default Input;
+import { InputHTMLAttributes, FC } from 'react';
+import { IInputGroupProps } from './types';
+declare const Input: FC<InputHTMLAttributes<HTMLInputElement> & IInputGroupProps>;
+export default Input;
 //# sourceMappingURL=index.d.ts.map

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,74 +1,74 @@
-/// <reference types="react" />
-import { IInputProps } 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;
-} & IInputProps & {
-    hasValueOnInput: boolean;
-    labelBackground?: {
-        dark: string;
-        light: string;
-    } | undefined;
-} & {
-    hasDisabled?: 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;
-} & IInputProps, 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;
-} & IInputProps & {
-    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;
-} & IInputProps, 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;
-} & IInputProps & {
-    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 { IInputProps } 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;
+} & IInputProps & {
+    hasValueOnInput: boolean;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    } | undefined;
+} & {
+    hasDisabled?: 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;
+} & IInputProps, 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;
+} & IInputProps & {
+    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;
+} & IInputProps, 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;
+} & IInputProps & {
+    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,EAAyB,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;yGA+F7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGASvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;gIA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HA6CpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAkBxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAGxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAyB,WAAW,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,iBAAiB;;;;;;;;;;;yGAmH7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGASvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;gIA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HA+CpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}

package/dist/components/Input/styles.js

@@ -9,20 +9,44 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 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 InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: ", ";\n  font-weight: ", ";\n\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  }\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\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    background-color: ", ";\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    ", "\n  }\n"])), function (props) {
+var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  border-radius: ", ";\n  font-weight: ", ";\n\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  }\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\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    background-color: ", ";\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) {
   return props.theme.borderRadius.default;
 }, function (props) {
   return props.theme.fontWeight[400];
-}, function (props) {
-  return !props.alert && props.theme.colors.primary.hover;
-}, function (props) {
-  return props.hasDisabled || props.alert ? 'auto' : props.theme.colors.primary.hover;
+}, function (_ref) {
+  var theme = _ref.theme,
+      alert = _ref.alert,
+      hasDisabled = _ref.hasDisabled;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default + '66';
+  }
+
+  if (hasDisabled) {
+    return 'none';
+  }
+
+  return theme.colors.primary.hover;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      alert = _ref2.alert,
+      hasDisabled = _ref2.hasDisabled;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default + '66';
+  }
+
+  if (hasDisabled) {
+    return 'none';
+  }
+
+  return theme.colors.primary.hover;
 }, function (props) {
   return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
 }, function (props) {
@@ -36,7 +60,11 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light;
 }, function (props) {
-  return props.labelBackground && props.labelBackground[props.theme.colorMode] || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light);
+  if (props.labelBackground) return props.labelBackground[props.theme.colorMode];
+  return {
+    dark: props.theme.colors.neutral.black,
+    light: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
 }, function (props) {
   return !props.alert && props.theme.colors.primary.hover;
 }, function (props) {
@@ -44,29 +72,37 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : 'translate(20px, calc(100% - 10px))';
 }, function (props) {
-  return props.hasValueOnInput && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background-color: ", ";\n\n        background-color: ", ";\n        height: 16px;\n      "])), props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light, props.labelBackground && props.labelBackground[props.theme.colorMode] || (props.theme.colorMode === 'dark' ? props.theme.colors.neutral.black : props.theme.colors.body.light));
+  if (!props.hasValueOnInput) return 'unset';
+  if (props.labelBackground) return props.labelBackground[props.theme.colorMode];
+  return {
+    dark: props.theme.colors.neutral.black,
+    light: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
+}, function (_ref3) {
+  var hasValueOnInput = _ref3.hasValueOnInput;
+  return hasValueOnInput ? '16px' : 'unset';
 });
 
 exports.InputGroupElement = InputGroupElement;
 
-var InputColumn = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ", ";\n\n  width: 100%;\n  min-height: 50px;\n"])), function (props) {
+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\n  width: 100%;\n  min-height: 50px;\n"])), function (props) {
   return props.theme.borderRadius.default;
 });
 
 exports.InputColumn = InputColumn;
 
-var InputContent = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ", ";\n  height: 100%;\n"])), function (props) {
+var InputContent = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ", ";\n  height: 100%;\n"])), function (props) {
   return props.withAddon ? '2 / end' : '1 / end';
 });
 
 exports.InputContent = InputContent;
 
-var InputContentRow = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));
+var InputContentRow = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));
 
 exports.InputContentRow = InputContentRow;
 
-var InputIcon = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  color: ", ";\n"])), function (props) {
-  return props.theme.zIndex.level2;
+var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  color: ", ";\n"])), function (props) {
+  return props.theme.zIndex.level1;
 }, function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, function (props) {
@@ -75,7 +111,7 @@ var InputIcon = _styled.default.div(_templateObject7 || (_templateObject7 = _tag
 
 exports.InputIcon = InputIcon;
 
-var Input = _styled.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ", ";\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  z-index: ", ";\n"])), function (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\n  &::placeholder {\n    color: ", ";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ", ";\n  background-color: transparent;\n  position: relative;\n  z-index: ", ";\n"])), function (props) {
   return props.withIcon ? props.hiddenContent ? '0 0' : '0 20px 0 0' : props.hiddenContent ? '0 0 0 20px' : '0 20px';
 }, function (props) {
   return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
@@ -89,7 +125,7 @@ var Input = _styled.default.input(_templateObject8 || (_templateObject8 = _tagge
 
 exports.Input = Input;
 
-var InputLabel = _styled.default.label(_templateObject9 || (_templateObject9 = _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  transition: transform 0.2s ease, background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\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  transition: transform 0.2s ease, background-color 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n"])), function (props) {
   return props.theme.zIndex.level1;
 }, function (props) {
   return props.hasDisabled ? props.theme.colors.neutral.neutral3 : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
@@ -97,39 +133,56 @@ var InputLabel = _styled.default.label(_templateObject9 || (_templateObject9 = _
 
 exports.InputLabel = InputLabel;
 
-var Fieldset = _styled.default.fieldset(_templateObject10 || (_templateObject10 = _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  ", "\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref) {
-  var alert = _ref.alert,
-      theme = _ref.theme,
-      hasDisabled = _ref.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 (_ref4) {
+  var alert = _ref4.alert,
+      theme = _ref4.theme,
+      hasDisabled = _ref4.hasDisabled;
 
   if (alert && !hasDisabled) {
-    return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), theme.colorMode === 'dark' ? theme.colors[alert].dark : theme.colors[alert].blurred);
+    return {
+      light: theme.colors[alert].blurred,
+      dark: theme.colors[alert].dark
+    }[theme.colorMode];
   }
 
   if (hasDisabled) {
-    return (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1);
+    return {
+      light: theme.colors.neutral.neutral1,
+      dark: theme.colors.neutral.neutral4
+    }[theme.colorMode];
   }
 
-  return (0, _react.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background-color: 'transparent';\n    "])));
+  return 'transparent';
 }, function (props) {
   return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (props) {
-  return props.hasDisabled ? "".concat(props.theme.colors.neutral.neutral2, " !important") : props.alert ? "".concat(props.theme.colors[props.alert].default) : props.theme.colors.neutral.neutral2;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      hasDisabled = _ref5.hasDisabled,
+      alert = _ref5.alert;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default;
+  }
+
+  return {
+    light: theme.colors.neutral.neutral2,
+    dark: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, function (props) {
   return props.withAddon ? 'none !important' : 'auto';
 });
 
 exports.Fieldset = Fieldset;
 
-var Legend = _styled.default.legend(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));
+var Legend = _styled.default.legend(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));
 
 exports.Legend = Legend;
 
-var LegendText = _styled.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));
+var LegendText = _styled.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));
 
 exports.LegendText = LegendText;
 
-var HelperText = _styled.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
+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;
@@ -137,8 +190,35 @@ var HelperText = _styled.default.span(_templateObject16 || (_templateObject16 =
 
 exports.HelperText = HelperText;
 
-var AddonElement = _styled.default.div(_templateObject17 || (_templateObject17 = _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 transparent;\n  border-right: none;\n\n  border-radius: ", " 0 0\n    ", ";\n"])), function (props) {
-  return props.alert && !props.hasDisabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral3;
+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) {
+  if (props.alert && !props.hasDisabled) {
+    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 {
+    light: props.theme.colors.neutral.neutral1,
+    dark: props.theme.colors.neutral.neutral6
+  }[props.theme.colorMode];
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      hasDisabled = _ref6.hasDisabled,
+      alert = _ref6.alert;
+
+  if (alert && !hasDisabled) {
+    return theme.colors[alert].default;
+  }
+
+  return {
+    light: theme.colors.neutral.neutral2,
+    dark: theme.colors.neutral.neutral5
+  }[theme.colorMode];
 }, function (props) {
   return props.theme.borderRadius.default;
 }, function (props) {
@@ -147,10 +227,13 @@ var AddonElement = _styled.default.div(_templateObject17 || (_templateObject17 =
 
 exports.AddonElement = AddonElement;
 
-var AddonContent = _styled.default.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+var AddonContent = _styled.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.fontSizes.xs;
 }, function (props) {
-  return props.theme.colors.neutral.white;
+  return {
+    light: props.theme.colors.neutral.black,
+    dark: props.theme.colors.neutral.white
+  }[props.theme.colorMode];
 });
 
 exports.AddonContent = AddonContent;

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

@@ -1,27 +1,27 @@
-import { ReactNode } from 'react';
-export declare type IInputProps = {
-    disabled?: boolean;
-    isLoading?: boolean;
-    withIcon?: ReactNode;
-    hiddenContent?: boolean;
-    helperText?: string;
-    withAddon?: boolean;
-    addonContent?: string;
-    alert?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-};
-export declare type IIInputComponentProps = IInputProps & {
-    hasValueOnInput: boolean;
-    labelBackground?: {
-        dark: string;
-        light: string;
-    };
-};
-export declare type IInputGroupProps = IInputProps & {
-    label?: string;
-    labelBackground?: {
-        dark: string;
-        light: string;
-    };
-    placeholder?: string;
-};
+import { ReactNode } from 'react';
+export declare type IInputProps = {
+    disabled?: boolean;
+    isLoading?: boolean;
+    withIcon?: ReactNode;
+    hiddenContent?: boolean;
+    helperText?: string;
+    withAddon?: boolean;
+    addonContent?: string;
+    alert?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+};
+export declare type IIInputComponentProps = IInputProps & {
+    hasValueOnInput: boolean;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    };
+};
+export declare type IInputGroupProps = IInputProps & {
+    label?: string;
+    labelBackground?: {
+        dark: string;
+        light: string;
+    };
+    placeholder?: string;
+};
 //# sourceMappingURL=types.d.ts.map

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

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

package/dist/components/Label/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/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