@pedidopago/ui 1.3.1 → 1.3.4

package/dist/components/DatePicker/datepicker.test.js

@@ -23,7 +23,7 @@ var setup = function setup(props) {
 describe('DatePicker', function () {
   it('should it render the datepicker component', function () {
     var _setup = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: jest.fn()
     }),
         container = _setup.container;
@@ -32,7 +32,7 @@ describe('DatePicker', function () {
   });
   it('should it render the datepicker as range type', function () {
     var _setup2 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: jest.fn(),
       type: 'range'
     }),
@@ -42,7 +42,7 @@ describe('DatePicker', function () {
   });
   it('should it render the datepicker as extended variant', function () {
     var _setup3 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: jest.fn(),
       variant: 'extended'
     }),
@@ -52,7 +52,7 @@ describe('DatePicker', function () {
   });
   it('should it render the datepicker with minimum and maximum dates', function () {
     var _setup4 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: jest.fn(),
       minDate: new Date(),
       maxDate: new Date()
@@ -65,7 +65,7 @@ describe('DatePicker', function () {
     var onChange = jest.fn();
 
     var _setup5 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: onChange
     }),
         container = _setup5.container;
@@ -82,7 +82,7 @@ describe('DatePicker', function () {
     var onChange = jest.fn();
 
     var _setup6 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: onChange,
       type: 'range'
     }),
@@ -102,7 +102,7 @@ describe('DatePicker', function () {
     var onChange = jest.fn();
 
     var _setup7 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: onChange,
       variant: 'extended'
     }),
@@ -120,7 +120,7 @@ describe('DatePicker', function () {
     var onChange = jest.fn();
 
     var _setup8 = setup({
-      value: [new Date()],
+      value: new Date(),
       onChange: onChange,
       type: 'range',
       variant: 'extended'

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBAqJjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBAuJjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker/index.js

@@ -48,14 +48,12 @@ var DatePicker = function DatePicker(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'date' : _ref$type;
 
-  var _useState = (0, _react.useState)(value ? new Date(value[0]) : new Date()),
+  var _useState = (0, _react.useState)(value ? Array.isArray(value) ? value[0] : value : new Date()),
       _useState2 = _slicedToArray(_useState, 2),
       startDate = _useState2[0],
       setStartDate = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(function () {
-    return value ? new Date(value[1]) : startDate;
-  }),
+  var _useState3 = (0, _react.useState)(value ? Array.isArray(value) ? value[1] : value : startDate),
       _useState4 = _slicedToArray(_useState3, 2),
       endDate = _useState4[0],
       setEndDate = _useState4[1];
@@ -113,21 +111,19 @@ var DatePicker = function DatePicker(_ref) {
   var handleChange = function handleChange(newDate) {
     if (type === 'date') {
       setStartDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
     } else {
       var startDateTime = startDate.getTime();
       var currentDateTime = newDate.getTime();
 
       if (currentDateTime > startDateTime && !isInTheRange(newDate)) {
         setEndDate(newDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange([startDate.toLocaleDateString(), newDate.toLocaleDateString()]);
-        return;
+        onChange === null || onChange === void 0 ? void 0 : onChange([startDate, newDate]);
       } else {
         setEndDate(newDate);
         setStartDate(newDate);
       }
     }
-
-    onChange === null || onChange === void 0 ? void 0 : onChange(newDate.toLocaleDateString());
   };
 
   var DatePickerContentProps = {

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

@@ -1,6 +1,5 @@
-import { HTMLAttributes } from 'react';
 import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
-export declare type DatePickerProps = HTMLAttributes<HTMLInputElement> & {
+export declare type DatePickerProps = {
     /**
      * Sets the date picker's type.
      * @default 'date'
@@ -14,7 +13,7 @@ export declare type DatePickerProps = HTMLAttributes<HTMLInputElement> & {
     /**
      * Sets the date picker's current/initial value.
      */
-    value?: string | string[] | Date[];
+    value?: Date | [Date, Date];
     /**
      * Sets the date picker's minimum month and year.
      * @summary To set the minimum date, the date needs to be the first day of the month.
@@ -29,7 +28,7 @@ export declare type DatePickerProps = HTMLAttributes<HTMLInputElement> & {
      * Callback function that is called when the date picker's value changes.
      * @param {Date} date - The new date.
      */
-    onChange?: (date: string | string[]) => void;
+    onChange?: (date: Date | [Date, Date]) => void;
     color?: GlobalColorsProps | (string & {});
 };
 export declare type GenericStyledProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,eAAe,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,gBAAgB,GAAG;QACzB,aAAa,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;KAClD,CAAC;CACH,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,eAAe,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC9C,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAErF,oBAAY,eAAe,GAAG;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,gBAAgB,GAAG;QACzB,aAAa,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;KAClD,CAAC;CACH,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,eAAe,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAC9C,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,gBAAgB,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC"}

package/dist/components/Input/index.js

@@ -40,8 +40,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _inputRef$current2;
-
   var placeholder = _ref.placeholder,
       type = _ref.type,
       disabled = _ref.disabled,
@@ -80,10 +78,11 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     var _inputRef$current;
 
-    ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) && setHasValueOnInput(true);
-  }, [(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value]);
+    setHasValueOnInput(!!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value));
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputGroupElement, {
-    hasValueOnInput: withIcon || placeholder || rest.value ? true : hasValueOnInput,
+    withIcon: !!withIcon,
+    hasValueOnInput: placeholder || rest.value ? true : hasValueOnInput,
     alert: alert,
     withAddon: withAddon,
     hasDisabled: disabled,
@@ -102,6 +101,16 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputLabel, {
           hasDisabled: disabled,
           children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
+          "aria-hidden": true,
+          hasDisabled: disabled,
+          withAddon: withAddon,
+          alert: alert,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Legend, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LegendText, {
+              children: label
+            })
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
           children: [withIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
             children: withIcon
@@ -130,16 +139,6 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "eye-off"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
-            "aria-hidden": true,
-            hasDisabled: disabled,
-            withAddon: withAddon,
-            alert: alert,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Legend, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LegendText, {
-                children: label
-              })
-            })
           })]
         })]
       })]

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

@@ -6,6 +6,7 @@ export declare const InputGroupElement: import("@emotion/styled").StyledComponen
     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;

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;;;;;yGAkI7B,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;;;+HA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAiBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HA+CpB,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;;;;;;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"}

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  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\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: 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];
@@ -51,6 +51,10 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
   }
 
   return theme.colors.primary.hover;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      hasDisabled = _ref3.hasDisabled;
+  return !hasDisabled && theme.colors.neutral.neutral5;
 }, function (props) {
   return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
 }, function (props) {
@@ -59,8 +63,11 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
   return !props.alert && props.theme.colors.primary.focus;
 }, 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 : props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled;
+  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') {
@@ -78,8 +85,10 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
   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 (props) {
-  return props.hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : 'translate(20px, calc(100% - 10px))';
+}, 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';
 
@@ -95,14 +104,14 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
     dark: props.theme.colors.neutral.black,
     light: props.theme.colors.neutral.white
   }[props.theme.colorMode];
-}, function (_ref3) {
-  var hasValueOnInput = _ref3.hasValueOnInput;
+}, function (_ref6) {
+  var hasValueOnInput = _ref6.hasValueOnInput;
   return hasValueOnInput ? '16px' : 'unset';
 });
 
 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\n  width: 100%;\n  min-height: 56px;\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  width: 100%;\n  min-height: 56px;\n"])), function (props) {
   return props.theme.borderRadius.default;
 });
 
@@ -123,59 +132,55 @@ 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.black;
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral5;
 });
 
 exports.InputIcon = InputIcon;
 
-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) {
+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"])), 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;
-}, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral4 : props.theme.colors.neutral.neutral3;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.colors.neutral.neutral5;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors.neutral.neutral5;
 }, function (props) {
   return props.theme.fontSizes.xs;
-}, function (props) {
-  return props.theme.zIndex.level2;
 });
 
 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: 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  transform-origin: left;\n  transition: all ease 0.2s;\n  font-weight: 500;\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;
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.neutral3;
 });
 
 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 (_ref4) {
-  var alert = _ref4.alert,
-      theme = _ref4.theme,
-      hasDisabled = _ref4.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 (_ref9) {
+  var alert = _ref9.alert,
+      theme = _ref9.theme,
+      hasDisabled = _ref9.hasDisabled;
 
   if (alert && !hasDisabled) {
-    return {
-      light: theme.colors[alert].blurred,
-      dark: theme.colors[alert].dark
-    }[theme.colorMode];
+    return "".concat(theme.colors[alert].blurred, "33");
   }
 
   if (hasDisabled) {
-    return {
-      light: theme.colors.neutral.neutral1,
-      dark: theme.colors.neutral.neutral4
-    }[theme.colorMode];
+    return theme.colors.neutral.neutral1;
   }
 
   return 'transparent';
 }, function (props) {
   return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      hasDisabled = _ref5.hasDisabled,
-      alert = _ref5.alert;
+}, function (_ref10) {
+  var theme = _ref10.theme,
+      hasDisabled = _ref10.hasDisabled,
+      alert = _ref10.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;
@@ -223,10 +228,10 @@ var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 =
     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;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      hasDisabled = _ref11.hasDisabled,
+      alert = _ref11.alert;
 
   if (alert && !hasDisabled) {
     return theme.colors[alert].default;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAU3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,WAAW,CAkB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,UAAU,CAkB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Label/index.js

@@ -7,43 +7,32 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
-var _styles = require("./styles");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _allIcons = require("../Icon/utils/allIcons");
-
-var _invertColor = require("../../utils/invertColor");
+var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var LabelInput = function LabelInput(_ref) {
-  var Label = _ref.Label,
-      LabelType = _ref.LabelType,
-      Icon = _ref.Icon,
-      _ref$IconSide = _ref.IconSide,
-      IconSide = _ref$IconSide === void 0 ? 'left' : _ref$IconSide,
-      Color = _ref.Color;
+  var label = _ref.label,
+      _ref$labelType = _ref.labelType,
+      labelType = _ref$labelType === void 0 ? 'success' : _ref$labelType,
+      Icon = _ref.icon,
+      _ref$iconSide = _ref.iconSide,
+      iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide;
   var theme = (0, _react.useTheme)();
-
-  var iconExists = function iconExists() {
-    return _allIcons.allIcons.some(function (svg) {
-      return svg.name === Icon;
-    });
-  };
-
-  var backgroundColor = LabelType ? theme.colors[LabelType].blurred : Color || (theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1);
-  var color = (0, _invertColor.invertColor)(backgroundColor || '#fff', true);
+  var backgroundColor = theme.colors[labelType].blurred;
+  var textColor = theme.colors[labelType].default;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.LabelWrapper, {
     backgroundColor: backgroundColor,
-    color: color,
+    color: textColor,
     "data-testid": "label-wrapper",
-    children: [Icon && IconSide === 'left' && iconExists() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    children: [Icon && iconSide === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: Icon,
       size: "16px"
-    }), Label || 'default', Icon && IconSide === 'right' && iconExists() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), label || 'default', Icon && iconSide === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: Icon,
       size: "16px"
     })]

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

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

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

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

package/dist/components/Label/label.test.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
+  var LabelWrapper = utils.getByTestId('label-wrapper');
+  return _objectSpread({
+    LabelWrapper: LabelWrapper
+  }, utils);
+};
+
+describe('Label', function () {
+  it('Should be Rendered', function () {
+    var _setup = setup(),
+        LabelWrapper = _setup.LabelWrapper;
+
+    expect(LabelWrapper).toBeInTheDocument();
+  });
+  it('Render other labels', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var LabelTest, _setup2, findByText, label;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            LabelTest = 'Teste';
+            _setup2 = setup({
+              label: LabelTest
+            }), findByText = _setup2.findByText;
+            _context.next = 4;
+            return findByText(LabelTest);
+
+          case 4:
+            label = _context.sent;
+            expect(label.innerHTML).toEqual(LabelTest);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('Render Icons', function () {
+    var _LabelWrapper$querySe;
+
+    var icon = 'mail';
+
+    var _setup3 = setup({
+      icon: icon
+    }),
+        LabelWrapper = _setup3.LabelWrapper;
+
+    var SvgName = (_LabelWrapper$querySe = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe === void 0 ? void 0 : _LabelWrapper$querySe.getAttribute('name');
+    expect(SvgName).toEqual(icon);
+  });
+  it('Render Icons in Left', function () {
+    var _LabelWrapper$querySe2;
+
+    var label = 'Testing';
+
+    var _setup4 = setup({
+      icon: 'mail',
+      label: label
+    }),
+        LabelWrapper = _setup4.LabelWrapper;
+
+    var Icon = (_LabelWrapper$querySe2 = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe2 === void 0 ? void 0 : _LabelWrapper$querySe2.outerHTML;
+    expect(LabelWrapper.innerHTML).toEqual(Icon + label);
+  });
+  it('Render Icons in Right', function () {
+    var _LabelWrapper$querySe3;
+
+    var label = 'Testing';
+
+    var _setup5 = setup({
+      icon: 'mail',
+      iconSide: 'right',
+      label: label
+    }),
+        LabelWrapper = _setup5.LabelWrapper;
+
+    var Icon = (_LabelWrapper$querySe3 = LabelWrapper.querySelector('svg')) === null || _LabelWrapper$querySe3 === void 0 ? void 0 : _LabelWrapper$querySe3.outerHTML;
+    expect(LabelWrapper.innerHTML).toEqual(label + Icon);
+  });
+});

package/dist/components/Label/styles.js

@@ -21,7 +21,7 @@ var LabelWrapper = _styled.default.div(_templateObject || (_templateObject = _ta
   return color;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.fontSizes.xs;
+  return theme.fontSizes.xxs;
 });
 
 exports.LabelWrapper = LabelWrapper;

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

@@ -7,11 +7,10 @@ export declare type IStyleProps = {
     backgroundColor?: string;
     color?: string;
 };
-export declare type IInputProps = {
-    LabelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
-    Icon?: IconName;
-    Label?: string;
-    IconSide?: 'left' | 'right';
-    Color?: string;
+export declare type LabelProps = {
+    labelType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+    icon?: IconName;
+    label?: string;
+    iconSide?: 'left' | 'right';
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,SAAS,CAAC,EACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,SAAS,CAAC,EACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalExample.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,eAoB7C"}