@pedidopago/ui 1.3.1 → 1.3.4

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

@@ -11,14 +11,14 @@ declare type responsivePattern<T = any> = {
     xxl?: T;
 };
 declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface IButtonProps {
+export interface ButtonProps {
     /**
      * The button's properties change making it not clickable and changing it's color.
      *
      * @default 'solid'
      * @example 'solid' | 'outline' | 'ghost' | 'link'
      * @type buttonVariant
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     disabled?: boolean;
     /**
@@ -27,7 +27,7 @@ export interface IButtonProps {
      *
      * @default ''
      * @type IconName
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     leftIcon?: IconName;
     /**
@@ -37,7 +37,7 @@ export interface IButtonProps {
      *
      * @default ''
      * @type IconName
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     rightIcon?: IconName;
     /**
@@ -45,7 +45,7 @@ export interface IButtonProps {
      *
      * @default false
      * @type boolean
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      * @example true
      */
     isLoading?: boolean;
@@ -54,7 +54,7 @@ export interface IButtonProps {
      *
      * @default 'md'
      * @type sizeOptions
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      * @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
      */
     size?: sizeOptions;
@@ -64,7 +64,7 @@ export interface IButtonProps {
      * @default 'solid'
      * @example 'solid' | 'outline' | 'ghost' | 'link'
      * @type buttonVariant
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     variant?: buttonVariant;
     /**
@@ -73,9 +73,10 @@ export interface IButtonProps {
      * @default 'primary'
      * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
      * @type buttonColor
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     bgColor?: buttonColor;
+    iconColor?: GlobalColorsProps | string;
     /**
      * Property that makes the button take 100% of the width of the parent component.
      *
@@ -84,7 +85,7 @@ export interface IButtonProps {
      * @example { base: true, sm: false', md: false }
      * @example { base: 'md', md: 'xl' }
      * @type boolean | responsivePattern<boolean>
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     fullWidth?: boolean | responsivePattern<boolean>;
     /**
@@ -93,12 +94,9 @@ export interface IButtonProps {
      * @default 'white'
      * @example 'white' | 'black'
      * @type string
-     * @memberof IButtonProps
+     * @memberof ButtonProps
      */
     textColor?: buttonColor;
 }
-export declare type StyledMapping = {
-    button: IButtonProps;
-};
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,YAAY;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,oBAAY,aAAa,GAAG;IAC1B,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC;IAEvC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB"}

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" | "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;;;yGAQ9B,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  width: 100%;\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"}