@pedidopago/ui 1.2.5 → 1.3.2

package/dist/components/Card/styles.js

@@ -3,93 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SupporingText = exports.SupText = exports.SubtitleText = exports.Media = exports.IconArea = exports.HeaderCard = exports.Content = exports.ChildrenBody = exports.CardContent = exports.CardBody = exports.ButtonArea = void 0;
+exports.CardBody = void 0;
+
+var _react = require("@emotion/react");
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject;
 
 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 CardBody = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  width: 100%;\n  :hover {\n    ", "\n  }\n  :active {\n    ", "\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.white;
-}, function (_ref) {
-  var theme = _ref.theme;
-  return theme.colorMode === 'dark' ? "0px 16px 32px ".concat(theme.colors.neutral.black) : theme.shadow.level2;
-}, function (_ref2) {
-  var hover = _ref2.hover;
-  return hover;
-}, function (_ref3) {
-  var active = _ref3.active;
-  return active;
-});
-
-exports.CardBody = CardBody;
-
-var CardContent = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (_ref4) {
-  var padding = _ref4.padding;
-  return padding || 0;
-});
-
-exports.CardContent = CardContent;
-
-var HeaderCard = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
-});
-
-exports.HeaderCard = HeaderCard;
-
-var ChildrenBody = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: ", ";\n"])), function (_ref6) {
-  var expand = _ref6.expand;
-  return !expand || 'none';
-});
-
-exports.ChildrenBody = ChildrenBody;
-
-var Title = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 1.5rem;\n  font-weight: bold;\n"])), function (_ref7) {
-  var color = _ref7.color,
-      theme = _ref7.theme;
-  return color || theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
-});
-
-exports.Title = Title;
-
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
-});
-
-exports.Content = Content;
-
-var SubtitleText = _styled.default.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
+var CardBody = _styled.default.div(function (props) {
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n    border-radius: ", ";\n    box-shadow: ", ";\n    width: 100%;\n    background-color: ", ";\n    border: ", ";\n    color: ", ";\n  "])), props.cardPadding, props.borderRadius, props.variant === 'outlined' ? '' : props.boxShadow, props.variant === 'outlined' ? 'transparent' : props.bgColor, props.variant === 'outlined' ? "2px solid ".concat(props.theme.colors.neutral.neutral1) : '', props.theme.colors.neutral.black);
 });
 
-exports.SubtitleText = SubtitleText;
-
-var SupporingText = _styled.default.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  color: ", ";\n"])), function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
-});
-
-exports.SupporingText = SupporingText;
-
-var Media = _styled.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n"])));
-
-exports.Media = Media;
-
-var SupText = _styled.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0 32px;\n"])));
-
-exports.SupText = SupText;
-
-var IconArea = _styled.default.img(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 100px;\n  height: 100px;\n  object-fit: cover;\n  border-radius: 50%;\n"])));
-
-exports.IconArea = IconArea;
-
-var ButtonArea = _styled.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  margin-top: 32px;\n"])));
-
-exports.ButtonArea = ButtonArea;
+exports.CardBody = CardBody;

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

@@ -1,42 +1,17 @@
 import React from 'react';
-import { ThemeProps } from 'src';
-import { IButtonProps } from '../Button/types';
-import { IconName } from '../Icon/types';
-import { IInputProps, positionType } from '../Tooltip/types';
-import { CSSObject } from '@emotion/react';
-export declare type toolTipCard = {
-    label: string;
-    position: positionType;
-    backgroundColor: string;
-};
-export interface BodyCard {
-    outlined?: boolean;
-    theme?: ThemeProps;
-    hover?: CSSObject;
-    active?: CSSObject;
+export interface IBodyCard {
+    cardPadding?: string;
+    borderRadius?: string;
+    variant?: string;
+    boxShadow?: string;
+    bgColor?: string;
 }
-export interface Buttons {
-    btPrimary?: IButtonProps;
-    btSecondary?: IButtonProps;
-    btColumn?: boolean;
-}
-export interface cardI {
-    title?: string;
-    subtitle?: string;
-    media?: string;
-    supporingText?: string;
-    tooltip?: IInputProps;
-    icon?: IconName;
-    outlined?: boolean;
-    expand?: boolean;
-    expandedHeight?: string;
-    titleColor?: string;
-    hover?: CSSObject;
-    active?: CSSObject;
-    padding?: string;
+export interface ICard {
+    cardPadding?: string;
     children?: React.ReactChild;
-    btPrimary?: IButtonProps;
-    btSecondary?: IButtonProps;
-    btColumn?: boolean;
+    borderRadius?: string;
+    variant?: string;
+    boxShadow?: 'shadow.level1' | 'shadow.level2' | 'shadow.level3' | (string & {});
+    bgColor?: string;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,YAAY,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AACD,MAAM,WAAW,OAAO;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IAC5B,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/components/DateInput/DateInput-example.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IDateInputProps } from './types';
+import { DateInputProps } from './types';
 export default function DateInputExample({ ...rest }: {
     [x: string]: any;
-}, props: IDateInputProps): JSX.Element;
+}, props: DateInputProps): JSX.Element;
 //# sourceMappingURL=DateInput-example.d.ts.map

package/dist/components/DateInput/DateInput-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput-example.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput-example.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,GAAG,IAAI,EAAE;;CAAA,EAAE,KAAK,EAAE,eAAe,eAuB3E"}
+{"version":3,"file":"DateInput-example.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput-example.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,GAAG,IAAI,EAAE;;CAAA,EAAE,KAAK,EAAE,cAAc,eAgB1E"}

package/dist/components/DateInput/DateInput-example.js

@@ -34,26 +34,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 function DateInputExample(_ref, props) {
   var rest = _extends({}, _ref);
 
-  var _useState = (0, _react.useState)(props.selectedPeriod),
+  // const [selectedPeriod, setSelectedPeriod] = useState<
+  //   Date | [Date, Date]
+  // >(props.selectedPeriod);
+  var _useState = (0, _react.useState)(props.type),
       _useState2 = _slicedToArray(_useState, 2),
-      selectedPeriod = _useState2[0],
-      setSelectedPeriod = _useState2[1];
+      type = _useState2[0],
+      setType = _useState2[1]; // useEffect(() => {
+  //   setSelectedPeriod(props.selectedPeriod);
+  // }, [props.selectedPeriod]);
 
-  var _useState3 = (0, _react.useState)(props.type),
-      _useState4 = _slicedToArray(_useState3, 2),
-      type = _useState4[0],
-      setType = _useState4[1];
 
-  (0, _react.useEffect)(function () {
-    setSelectedPeriod(props.selectedPeriod);
-  }, [props.selectedPeriod]);
   (0, _react.useEffect)(function () {
     setType(props.type);
   }, [props.type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, _objectSpread({
     type: type
-  }, rest), {}, {
-    selectedPeriod: selectedPeriod,
-    setSelectedPeriod: setSelectedPeriod
-  }));
+  }, rest));
 }

package/dist/components/DateInput/dateInput.test.js

@@ -29,10 +29,10 @@ describe('DateInput', function () {
   });
   it('should set a value in DateInput', function () {
     var _setup2 = setup({
-      valueDate: ['01/01/2022'],
-      onChangeDate: jest.fn(),
-      selectedPeriod: ['01/01/2022'],
-      setSelectedPeriod: jest.fn()
+      type: 'date',
+      label: 'label',
+      // value:
+      onChange: jest.fn()
     }),
         container = _setup2.container;
 

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IDateInputProps } from './types';
-export declare const DateInput: import("react").MemoExoticComponent<({ label, type, selectedPeriod, setSelectedPeriod, isLoading, fullWidth, position, onChangeDate, valueDate: valueDateProp, ...rest }: IDateInputProps) => JSX.Element>;
+import { DateInputProps } from './types';
+export declare function DateInput({ label, placeholder, alert, helperText, value, locales, localeOptions, onChange, ...rest }: DateInputProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAqHpD,eAAO,MAAM,SAAS,4KAxGnB,eAAe,iBAwG4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,aAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,eA0DhB"}

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" | "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