@pedidopago/ui 1.3.1 → 1.3.2

package/dist/components/DateInput/index.js

@@ -3,27 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateInput = void 0;
+exports.DateInput = DateInput;
 
-var _react = require("react");
-
-var _useOnClickOutside = require("../../shared/hooks/useOnClickOutside");
+var _styles = require("./styles");
 
-var _theme = require("../../shared/theme");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _getColorValue = require("../../utils/getColorValue");
+var _Input = _interopRequireDefault(require("../Input"));
 
 var _DatePicker = _interopRequireDefault(require("../DatePicker"));
 
-var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
-var _SelectButton = require("./components/SelectButton");
+var _react = require("react");
 
-var _styles = require("./styles");
+var _useOnClickOutside = require("../../shared/hooks/useOnClickOutside");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["label", "type", "selectedPeriod", "setSelectedPeriod", "isLoading", "fullWidth", "position", "onChangeDate", "valueDate"];
+var _excluded = ["label", "placeholder", "alert", "helperText", "value", "locales", "localeOptions", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,141 +45,74 @@ 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 DateInputLayout = function DateInputLayout(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Definir Período' : _ref$label,
-      type = _ref.type,
-      selectedPeriod = _ref.selectedPeriod,
-      setSelectedPeriod = _ref.setSelectedPeriod,
-      isLoading = _ref.isLoading,
-      fullWidth = _ref.fullWidth,
-      position = _ref.position,
-      onChangeDate = _ref.onChangeDate,
-      valueDateProp = _ref.valueDate,
+// TODO: Mudar a posição do datepicker dependendo da posição dele aberto.
+function DateInput(_ref) {
+  var label = _ref.label,
+      placeholder = _ref.placeholder,
+      alert = _ref.alert,
+      helperText = _ref.helperText,
+      value = _ref.value,
+      locales = _ref.locales,
+      localeOptions = _ref.localeOptions,
+      onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
-      isDatePickerOpen = _useState2[0],
-      setIsDatePickerOpen = _useState2[1];
-
-  var datePickerRef = (0, _react.useRef)(null);
-
-  var _useTheme = (0, _theme.useTheme)(),
-      theme = _useTheme.theme;
-
-  var _useColorMode = (0, _theme.useColorMode)(),
-      colorMode = _useColorMode.colorMode;
-
-  var removeYearFromDate = (0, _react.useCallback)(function (date) {
-    var dateArray = date.split('/');
-    return "".concat(dateArray[0], "/").concat(dateArray[1]);
-  }, []);
-  var placeholder = type === 'range' ? 'DD/MM - DD/MM' : 'DD/MM/AAAA';
-  var hasRangePeriodSelected = Array.isArray(selectedPeriod);
-  var formattedDate = (0, _react.useCallback)(function () {
-    if (type === 'range') {
-      if (Array.isArray(selectedPeriod)) {
-        var startDate = removeYearFromDate(selectedPeriod[0]);
-        var endDate = removeYearFromDate(selectedPeriod[1]);
-        var rangeDate = [startDate, endDate];
-        return rangeDate.join(' - ');
-      }
-    }
-
-    return selectedPeriod || valueDateProp && valueDateProp[0];
-  }, [type, selectedPeriod]);
-  var datePickerContainerAnimationVariant = {
-    fadeIn: {
-      opacity: 1,
-      y: 0
-    },
-    fadeOut: {
-      opacity: 0,
-      y: -20
-    }
-  };
-  (0, _useOnClickOutside.useOnClickOutside)(datePickerRef, function () {
-    setIsDatePickerOpen(false);
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      datePickerOpen = _useState4[0],
+      setDatePickerOpen = _useState4[1];
+
+  var containerRef = (0, _react.useRef)(null);
+  (0, _useOnClickOutside.useOnClickOutside)(containerRef, function () {
+    setDatePickerOpen(false);
   });
 
-  var handleValueDate = function handleValueDate(value) {
-    type === 'date' ? setIsDatePickerOpen(false) : Array.isArray(value) && setIsDatePickerOpen(false);
-    setSelectedPeriod(value);
-    onChangeDate && onChangeDate(value);
-  };
-
-  var textColor = (0, _getColorValue.getColorValue)(colorMode === 'dark' ? 'neutral.neutral2' : 'neutral.neutral5', theme);
-
-  var valueDate = function valueDate() {
-    if (selectedPeriod) {
-      switch (type) {
-        case 'date':
-          {
-            var _selectedPeriod$toStr = selectedPeriod.toString().split('/'),
-                _selectedPeriod$toStr2 = _slicedToArray(_selectedPeriod$toStr, 3),
-                day = _selectedPeriod$toStr2[0],
-                month = _selectedPeriod$toStr2[1],
-                year = _selectedPeriod$toStr2[2];
-
-            return [new Date("".concat(month, "/").concat(day, "/").concat(year))];
-          }
-
-        case 'range':
-          {
-            if (hasRangePeriodSelected) {
-              var _selectedPeriod$0$toS = selectedPeriod[0].toString().split('/'),
-                  _selectedPeriod$0$toS2 = _slicedToArray(_selectedPeriod$0$toS, 3),
-                  startDay = _selectedPeriod$0$toS2[0],
-                  startMonth = _selectedPeriod$0$toS2[1],
-                  startYear = _selectedPeriod$0$toS2[2];
-
-              var _selectedPeriod$1$toS = selectedPeriod[1].toString().split('/'),
-                  _selectedPeriod$1$toS2 = _slicedToArray(_selectedPeriod$1$toS, 3),
-                  endDay = _selectedPeriod$1$toS2[0],
-                  endMonth = _selectedPeriod$1$toS2[1],
-                  endYear = _selectedPeriod$1$toS2[2];
-
-              var startDate = "".concat(startMonth, "/").concat(startDay, "/").concat(startYear);
-              var endDate = "".concat(endMonth, "/").concat(endDay, "/").concat(endYear);
-              return [startDate, endDate];
-            } else {
-              return [new Date(), new Date()];
-            }
-          }
-      }
-    }
-  };
+  function selectDate(value) {
+    setCurrentValue(value);
+    setDatePickerOpen(false);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  }
 
+  (0, _react.useEffect)(function () {
+    setCurrentValue(value);
+  }, [value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DateInputContainer, {
-    fullWidth: fullWidth,
-    children: [isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-      height: 50
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectButton.SelectButton, {
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      alert: alert,
+      withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "calendar"
+      }),
+      value: currentValue ? Array.isArray(currentValue) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : currentValue.toLocaleDateString(locales) : '',
       onClick: function onClick() {
-        return setIsDatePickerOpen(true);
+        return setDatePickerOpen(!datePickerOpen);
+      }
+    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerContainer, {
+      position: 'bottom',
+      variants: {
+        fadeIn: {
+          opacity: 1,
+          y: 0
+        },
+        fadeOut: {
+          opacity: 0,
+          y: -20
+        }
       },
-      label: label,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CalendarText, {
-        textColor: textColor,
-        children: formattedDate() || placeholder
-      })
-    }), isDatePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerContainer, {
-      position: position,
-      variants: datePickerContainerAnimationVariant,
       initial: "fadeOut",
       animate: "fadeIn",
-      ref: datePickerRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread(_objectSpread({}, rest), {}, {
-        value: valueDateProp || valueDate(),
-        onChange: function onChange(value) {
-          return handleValueDate(value);
-        },
-        type: type
-      }))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.default, _objectSpread({
+        value: currentValue,
+        onChange: selectDate
+      }, rest))
     })]
   });
-};
-
-var DateInput = /*#__PURE__*/(0, _react.memo)(DateInputLayout);
-exports.DateInput = DateInput;
+}

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

@@ -1,19 +1,23 @@
 /// <reference types="react" />
-import { StylePropsDateInput, StylePropsPositionPicker } from './types';
+import { StylePropsPositionPicker } from './types';
+export declare const DateInputContainer: 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 DatePickerContainer: import("@emotion/styled").StyledComponent<{
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    id?: string | undefined;
     hidden?: boolean | undefined;
     className?: string | undefined;
-    id?: string | undefined;
     lang?: string | undefined;
     role?: import("react").AriaRole | undefined;
     tabIndex?: number | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
     "aria-busy"?: (boolean | "false" | "true") | undefined;
     "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
     "aria-colcount"?: number | undefined;
@@ -255,30 +259,4 @@ export declare const DatePickerContainer: import("@emotion/styled").StyledCompon
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StylePropsPositionPicker, {}, {}>;
-export declare const DateInputContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & StylePropsDateInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CalendarText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("../../@types").GenericStyledProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
-    color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-    fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
-    fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
-    fontStyle?: "inherit" | "initial" | "normal" | "italic" | "oblique" | undefined;
-    lineHeight?: string | number | undefined;
-    textAlign?: "center" | "end" | "start" | undefined;
-    textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
-    textDecoration?: "none" | "line-through" | "underline" | undefined;
-    letterSpacing?: string | number | undefined;
-    children?: import("react").ReactNode;
-} & {
-    textColor: string;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExE,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAY/B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;+HAI9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;UAExB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,kBAAkB;;;yGAO9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAS/B,CAAC"}

package/dist/components/DateInput/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatePickerContainer = exports.DateInputContainer = exports.CalendarText = void 0;
+exports.DatePickerContainer = exports.DateInputContainer = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -11,29 +11,25 @@ var _react = require("@emotion/react");
 
 var _framerMotion = require("framer-motion");
 
-var _styles = require("../Typography/styles");
+var _excluded = ["theme"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-var DatePickerContainer = (0, _styled.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  z-index: ", ";\n  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.zIndex.level24;
-}, function (_ref2) {
-  var _ref2$position = _ref2.position,
-      position = _ref2$position === void 0 ? 'bottom' : _ref2$position;
-  return position === 'bottom' ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          top: 60px;\n        "]))) : (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          bottom: 60px;\n        "])));
-});
-exports.DatePickerContainer = DatePickerContainer;
+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 DateInputContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 1.5em 0;\n  width: ", ";\n"])), function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
-  return fullWidth ? '100%' : 'fit-content';
-});
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DateInputContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  input {\n    cursor: pointer;\n    caret-color: transparent;\n  }\n"])));
 
 exports.DateInputContainer = DateInputContainer;
-var CalendarText = (0, _styled.default)(_styles.StyledText)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 1em;\n"])));
-exports.CalendarText = CalendarText;
+var DatePickerContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
+  var theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      left: 0;\n      z-index: ", ";\n      ", ";\n    "])), theme.zIndex.level24, props.position === 'bottom' ? 'top: 66px;' : 'bottom: 66px;');
+});
+exports.DatePickerContainer = DatePickerContainer;

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

@@ -1,21 +1,14 @@
-import { FormEvent } from 'react';
 import { DatePickerProps } from '../DatePicker/types';
-export declare type DateType = {
-    default: string | FormEvent<HTMLInputElement> | string[];
-};
-export declare type StylePropsDateInput = {
-    fullWidth?: boolean;
-};
+import { InputAlertTypes } from '../Input/types';
 export declare type StylePropsPositionPicker = {
     position?: 'bottom' | 'top';
 };
-export interface IDateInputProps extends DatePickerProps, StylePropsDateInput {
-    selectedPeriod: DateType['default'];
-    setSelectedPeriod: (newState: DateType['default']) => void;
+export interface DateInputProps extends DatePickerProps {
     label?: string;
-    isLoading?: boolean;
-    position?: 'bottom' | 'top';
-    valueDate?: string[] | Date[];
-    onChangeDate?: (date: DateType['default']) => void;
+    placeholder?: string;
+    helperText?: string;
+    alert?: InputAlertTypes;
+    locales?: string | string[];
+    localeOptions?: Intl.DateTimeFormatOptions;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,oBAAY,QAAQ,GAAG;IACrB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG,MAAM,EAAE,CAAC;CAC1D,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,mBAAmB;IAC3E,cAAc,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CACpD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,oBAAY,wBAAwB,GAAG;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;CAC5C"}

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.d.ts.map

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

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;;;;;;yGA4I7B,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;;;+HA2BjB,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"}