@pedidopago/ui 1.3.10 → 1.3.13

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

@@ -1,17 +1,17 @@
-import { DatePickerProps } from '../DatePicker/types';
-import { InputAlertTypes } from '../Input/types';
-export declare type StylePropsPositionPicker = {
-    position?: 'bottom' | 'top';
-};
-export interface DateInputProps extends DatePickerProps {
-    label?: string;
-    placeholder?: string;
-    helperText?: string;
-    alert?: InputAlertTypes;
-    disabled?: boolean;
-    locales?: string | string[];
-    localeOptions?: Intl.DateTimeFormatOptions;
-    minDate?: Date;
-    maxDate?: Date;
-}
+import { DatePickerProps } from '../DatePicker/types';
+import { InputAlertTypes } from '../Input/types';
+export declare type StylePropsPositionPicker = {
+    position?: 'bottom' | 'top';
+};
+export interface DateInputProps extends DatePickerProps {
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    alert?: InputAlertTypes;
+    disabled?: boolean;
+    locales?: string | string[];
+    localeOptions?: Intl.DateTimeFormatOptions;
+    minDate?: Date;
+    maxDate?: Date;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { DatePickerContentProps } from '../types';
-export declare const DatePickerContent: ({ type, date, startDate, endDate, isInTheRange, maxDate, minDate, handleChange, handleMouseOver, handleChangeDate, variant, enableYearPicker, handleToggleYearPicker, }: DatePickerContentProps) => JSX.Element;
+/// <reference types="react" />
+import { DatePickerContentProps } from '../types';
+export declare const DatePickerContent: ({ type, date, startDate, endDate, isInTheRange, maxDate, minDate, handleChange, handleMouseOver, handleChangeDate, variant, enableYearPicker, handleToggleYearPicker, }: DatePickerContentProps) => JSX.Element;
 //# sourceMappingURL=DatePickerContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,gBAmOxB,CAAC"}
+{"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,gBAwNxB,CAAC"}

package/dist/components/DatePicker/components/DatePickerContent.js

@@ -45,10 +45,7 @@ var DatePickerContent = function DatePickerContent(_ref) {
       handleToggleYearPicker = _ref.handleToggleYearPicker;
 
   var handleChangeSelectDate = function handleChangeSelectDate(newDate) {
-    if (date.getMonth() !== newDate.getMonth() || date.getFullYear() !== newDate.getFullYear()) {
-      handleChangeDate(newDate);
-    }
-
+    handleChangeDate(newDate);
     handleChange(newDate);
   };
 
@@ -104,20 +101,6 @@ var DatePickerContent = function DatePickerContent(_ref) {
     return groupedDaysWithWeekDays;
   };
 
-  var checkIfSelectedDateIsInvalid = function checkIfSelectedDateIsInvalid(cellDate) {
-    var isDateInvalid = false;
-
-    if (minDate && cellDate < minDate) {
-      isDateInvalid = true;
-    }
-
-    if (maxDate && cellDate > maxDate) {
-      isDateInvalid = true;
-    }
-
-    return isDateInvalid;
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
     initial: {
       opacity: 0
@@ -139,13 +122,13 @@ var DatePickerContent = function DatePickerContent(_ref) {
           onClick: function onClick() {
             return handleChangeMonth(date.getMonth(), 'down');
           },
-          isHidden: minDate && minDate.toLocaleString() === date.toLocaleString(),
+          isHidden: minDate && minDate.getMonth() === date.getMonth(),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "arrow-left"
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DatePickerHeaderTitle, {
           onClick: function onClick() {
-            return handleToggleYearPicker === null || handleToggleYearPicker === void 0 ? void 0 : handleToggleYearPicker();
+            return enableYearPicker && (handleToggleYearPicker === null || handleToggleYearPicker === void 0 ? void 0 : handleToggleYearPicker());
           },
           enableYearPicker: enableYearPicker,
           children: [(0, _getMonthName.getMonthName)(date.getMonth()), " ", date.getFullYear(), enableYearPicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -157,7 +140,7 @@ var DatePickerContent = function DatePickerContent(_ref) {
           onClick: function onClick() {
             return handleChangeMonth(date.getMonth(), 'up');
           },
-          isHidden: maxDate && maxDate.toLocaleString() === date.toLocaleString(),
+          isHidden: maxDate && maxDate.getMonth() === date.getMonth(),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "arrow-right"
           })
@@ -203,13 +186,12 @@ var DatePickerContent = function DatePickerContent(_ref) {
                   var removeZeros = days.filter(function (day) {
                     return day !== 0;
                   });
-                  var isDateBeyondMinAndMaxLimits = checkIfSelectedDateIsInvalid(cellDate);
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCell, {
                     role: "gridcell",
                     title: cellTitle,
                     "data-date": cellDate,
                     tabIndex: -1,
-                    disabled: isDisabled || isDateBeyondMinAndMaxLimits,
+                    disabled: isDisabled,
                     "aria-label": cellDate.toLocaleDateString('pt-BR', {
                       weekday: 'short',
                       year: '2-digit',
@@ -223,17 +205,19 @@ var DatePickerContent = function DatePickerContent(_ref) {
                     isEndDateOfRange: type === 'range' && isEndDateOfRange,
                     isToday: isToday,
                     isSelected: isStartDateOfRange,
-                    isPrevNextMonth: isPreviousMonth || isNextMonth || isDateBeyondMinAndMaxLimits,
+                    isPrevNextMonth: isPreviousMonth || isNextMonth,
                     isFirstDayOfMonth: isExtended && rowIndex === 0 && day === 1,
                     isLastDayOfMonth: isExtended && rowIndex === monthDaysLength - 1 && day === removeZeros[removeZeros.length - 1],
-                    onMouseOver: function onMouseOver() {
-                      type === 'range' && handleMouseOver(cellDate);
+                    onMouseEnter: function onMouseEnter() {
+                      if (type === 'range') {
+                        handleMouseOver(cellDate);
+                      }
                     },
                     onClick: function onClick() {
-                      return handleChangeSelectDate(cellDate);
+                      handleChangeSelectDate(cellDate);
                     },
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCellSpan, {
-                      children: isDisabled ? '' : day
+                      children: !isDisabled && day
                     })
                   }, dayIndex);
                 })

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { DateYearPickerProps } from '../types';
-export declare const DateYearPicker: ({ date, handleChangeDate }: DateYearPickerProps) => JSX.Element;
+/// <reference types="react" />
+import { DateYearPickerProps } from '../types';
+export declare const DateYearPicker: ({ date, handleChangeDate }: DateYearPickerProps) => JSX.Element;
 //# sourceMappingURL=DateYearPicker.d.ts.map

package/dist/components/DatePicker/datepicker.test.d.ts

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

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

@@ -76,7 +76,6 @@ describe('DatePicker', function () {
     }));
     expect(container).toBeInTheDocument();
     expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(dateCells[20].getAttribute('title'));
   });
   it('should it call the onChange function with two date values in range type', function () {
     var onChange = jest.fn();
@@ -114,7 +113,6 @@ describe('DatePicker', function () {
     }));
     expect(container).toBeInTheDocument();
     expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith(dateCells[20].getAttribute('title'));
   });
   it('should it call the onChange function with two date values in the extended variant', function () {
     var onChange = jest.fn();

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { DatePickerProps } from './types';
-declare const DatePicker: ({ value, onChange, minDate, maxDate, variant, color, type, }: DatePickerProps) => JSX.Element;
-export default DatePicker;
+/// <reference types="react" />
+import { DatePickerProps } from './types';
+declare const DatePicker: ({ value, onChange, minDate, maxDate, variant, color, type, }: DatePickerProps) => JSX.Element;
+export default DatePicker;
 //# sourceMappingURL=index.d.ts.map

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,gBAoJjB,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,gBA2JjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/DatePicker/index.js

@@ -66,7 +66,7 @@ var DatePicker = function DatePicker(_ref) {
       setFirstCalendarDate = _useState6[1];
 
   var _useState7 = (0, _react.useState)(function () {
-    return new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1);
+    return new Date(endDate.getFullYear(), endDate.getMonth() + (endDate.getMonth() !== startDate.getMonth() ? 0 : 1), 1);
   }),
       _useState8 = _slicedToArray(_useState7, 2),
       secondCalendarDate = _useState8[0],
@@ -156,22 +156,24 @@ var DatePicker = function DatePicker(_ref) {
             enableYearPicker: !maxDate && !minDate
           }), {}, {
             date: firstCalendarDate,
-            maxDate: variant === 'extended' ? new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth(), 1) : maxDate,
+            maxDate: variant === 'extended' ? new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1) : maxDate,
             handleChangeDate: function handleChangeDate(newDate) {
               return setFirstCalendarDate(newDate);
             }
           })), variant === 'extended' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread({}, DatePickerContentProps), {}, {
             date: secondCalendarDate,
             minDate: new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1),
+            maxDate: maxDate,
             handleChangeDate: function handleChangeDate(newDate) {
-              return setSecondCalendarDate(newDate);
-            },
-            maxDate: maxDate
+              setSecondCalendarDate(newDate);
+            }
           }))]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateYearPicker.DateYearPicker, {
           date: firstCalendarDate,
           handleChangeDate: function handleChangeDate(newDate) {
-            setFirstCalendarDate(newDate);
+            setFirstCalendarDate(function () {
+              return new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+            });
             setOpenYearPicker(false);
           }
         })

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

@@ -1,75 +1,75 @@
-/// <reference types="react" />
-import { GenericStyledProps } from './types';
-export declare const DatePickerContentContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isExtended: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerContainer: 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 DatePickerHeader: 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 DatePickerHeaderTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    enableYearPicker?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DatePickerHeaderButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isHidden?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const DatePickerBody: 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 DatePickerBodyTable: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
-export declare const DatePickerTableRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isRange?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
-export declare const DatePickerTableCell: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isPrevNextMonth?: boolean | undefined;
-    isSelected?: boolean | undefined;
-    isToday?: boolean | undefined;
-    isInTheRange?: boolean | undefined;
-    isEndDateOfRange?: boolean | undefined;
-    isStartDateOfRange?: boolean | undefined;
-    isFirstDayOfMonth?: boolean | undefined;
-    isLastDayOfMonth?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
-export declare const DatePickerTableCellSpan: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const DateYearPickerContainer: 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 DateYearPickerBody: 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 DateYearPickerCell: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & {
-    isSelected?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from './types';
+export declare const DatePickerContentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isExtended: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerContainer: 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 DatePickerHeader: 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 DatePickerHeaderTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    enableYearPicker?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickerHeaderButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isHidden?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DatePickerBody: 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 DatePickerBodyTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const DatePickerTableRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isRange?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const DatePickerTableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isPrevNextMonth?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isToday?: boolean | undefined;
+    isInTheRange?: boolean | undefined;
+    isEndDateOfRange?: boolean | undefined;
+    isStartDateOfRange?: boolean | undefined;
+    isFirstDayOfMonth?: boolean | undefined;
+    isLastDayOfMonth?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const DatePickerTableCellSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const DateYearPickerContainer: 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 DateYearPickerBody: 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 DateYearPickerCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isSelected?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAsBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAwBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAwBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAiB/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+HAyJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGAoC9B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+HAkJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGA+B9B,CAAC"}

package/dist/components/DatePicker/styles.js

@@ -20,11 +20,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var DatePickerContentContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  max-width: fit-content;\n  gap: 20px;\n  padding: 24px 18px;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: ", ";\n\n  @media (max-width: 750px) {\n    flex-wrap: wrap;\n  }\n\n  & > div {\n    width: 290px;\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : '#fff';
+  var colors = _ref.theme.colors;
+  return colors.neutral.white;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.colorMode === 'dark' ? "0px 16px 32px ".concat(theme.colors.neutral.black) : theme.shadow.level3;
+  return "0px 16px 32px ".concat(theme.shadow.level3);
 });
 
 exports.DatePickerContentContainer = DatePickerContentContainer;
@@ -37,18 +37,21 @@ var DatePickerHeader = _styled.default.div(_templateObject3 || (_templateObject3
 
 exports.DatePickerHeader = DatePickerHeader;
 
-var DatePickerHeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.875rem;\n  line-height: 1rem;\n  color: ", ";\n\n  ", "\n\n  user-select: none;\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+var DatePickerHeaderTitle = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.875rem;\n  line-height: 1rem;\n  color: ", ";\n\n  ", "\n\n  user-select: none;\n"])), function (_ref3) {
+  var colors = _ref3.theme.colors;
+  return colors.neutral.black;
 }, function (props) {
   return props.enableYearPicker && "\n    cursor: pointer;\n  ";
 });
 
 exports.DatePickerHeaderTitle = DatePickerHeaderTitle;
 
-var DatePickerHeaderButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  border: none;\n  outline: 0;\n  background-color: transparent;\n\n  ", "\n\n  & svg {\n    stroke-width: 10px;\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral5;
-}, function (props) {
-  return props.isHidden && "\n    visibility: hidden;\n    pointer-events: none;\n  ";
+var DatePickerHeaderButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  border: none;\n  outline: 0;\n  background-color: transparent;\n\n  ", "\n\n  & svg {\n    stroke-width: 10px;\n  }\n"])), function (_ref4) {
+  var colors = _ref4.theme.colors;
+  return colors.neutral.neutral5;
+}, function (_ref5) {
+  var isHidden = _ref5.isHidden;
+  return isHidden && "\n    visibility: hidden;\n    pointer-events: none;\n  ";
 });
 
 exports.DatePickerHeaderButton = DatePickerHeaderButton;
@@ -57,8 +60,9 @@ var DatePickerBody = _styled.default.div(_templateObject6 || (_templateObject6 =
 
 exports.DatePickerBody = DatePickerBody;
 
-var DatePickerBodyTable = _styled.default.table(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 10px;\n  table-layout: fixed;\n\n  & thead tr th {\n    padding: 0.75rem;\n    font-family: inherit;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: ", ";\n    user-select: none;\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+var DatePickerBodyTable = _styled.default.table(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 10px;\n  table-layout: fixed;\n\n  & thead tr th {\n    padding: 0.75rem;\n    font-family: inherit;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: ", ";\n    user-select: none;\n  }\n"])), function (_ref6) {
+  var colors = _ref6.theme.colors;
+  return colors.neutral.black;
 });
 
 exports.DatePickerBodyTable = DatePickerBodyTable;
@@ -69,20 +73,22 @@ var DatePickerTableRow = _styled.default.tr(_templateObject8 || (_templateObject
 
 exports.DatePickerTableRow = DatePickerTableRow;
 
-var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 0;\n  padding: 12px;\n  text-align: center;\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 50%;\n  cursor: pointer;\n  background-color: ", ";\n  color: ", ";\n\n  user-select: none;\n\n  transition: background 150ms ease;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &.is-current {\n    &:before {\n      border-radius: 0 50% 50% 0 !important;\n    }\n  }\n"])), function (props) {
-  return props.isSelected || props.isEndDateOfRange ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
+var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  height: 0;\n  padding: 12px;\n  text-align: center;\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 600;\n  border-radius: 50%;\n  cursor: pointer;\n  background-color: ", ";\n\n  color: ", ";\n  pointer-events: ", ";\n\n  user-select: none;\n\n  transition: background 150ms ease;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n\n  &.is-current {\n    &:before {\n      border-radius: 0 50% 50% 0 !important;\n    }\n  }\n"])), function (props) {
+  return !props.isPrevNextMonth && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
+}, function (props) {
+  return props.isPrevNextMonth ? 'transparent' : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
 }, function (props) {
-  return props.isPrevNextMonth && !props.isSelected && !props.isEndDateOfRange && !props['aria-selected'] ? (0, _colorCheck.parseHslColorToString)(props.theme.colorMode === 'dark' ? (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral3 : (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1) : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+  return props.isPrevNextMonth ? 'none' : 'auto';
 }, function (props) {
-  return props.disabled && "\n    cursor: default; \n    pointer-events: none;\n  ";
+  return props.disabled && "\n    background:none;\n    cursor: default; \n    pointer-events: none;\n  ";
 }, function (props) {
-  return props.isToday && !props.isSelected && !props.isEndDateOfRange && "\n    &:after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: solid 1px ".concat(props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral3 : props.theme.colors.neutral.neutral2, ";\n      transform: translate(-50%, -50%);\n    }\n  ");
+  return props.isToday && !props.isSelected && !props.isEndDateOfRange && "\n    &:after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: solid 1px ".concat(props.theme.colors.neutral.neutral2, ";\n      transform: translate(-50%, -50%);\n    }\n  ");
 }, function (props) {
-  return (props.isInTheRange || props.isEndDateOfRange || props.isStartDateOfRange) && "\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 96%;\n      border-radius: ".concat(props.isStartDateOfRange && props.isEndDateOfRange ? '50% !important' : props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '0 50% 50% 0 !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n      background-color: ").concat((0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.3), ";\n      transform: translate(-50%, -50%);\n    }\n  ");
+  return (props.isInTheRange || props.isEndDateOfRange || props.isStartDateOfRange) && "\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 100%;\n      height: 96%;\n      border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isEndDateOfRange ? '0 50% 50% 0 !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n      \n      background-color: ").concat(!props.isPrevNextMonth && !props.disabled ? (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1) : 'transparent', "; \n      transform: translate(-50%, -50%);\n    }\n  ");
 }, function (props) {
-  return !props.isSelected && !props.isEndDateOfRange && (0, _colorCheck.parseHslColorToString)(props.theme.colorMode === 'dark' ? (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral4 : (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
+  return !props.isSelected && !props.isEndDateOfRange && (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
 }, function (props) {
-  return (props['aria-selected'] !== 'true' || props.isStartDateOfRange || props.isFirstDayOfMonth || props.isLastDayOfMonth) && "\n      &.is-hover {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            border-radius: ".concat(props.isStartDateOfRange ? '50% 0 0 50% !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n            height: 96%;\n            background-color: ").concat((0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1), ";\n            transform: translate(-50%, -50%);\n          }\n        }\n      }");
+  return (props['aria-selected'] !== 'true' || props.isStartDateOfRange || props.isFirstDayOfMonth || props.isSelected || props.isLastDayOfMonth) && "\n      &.is-hover {\n          &:before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            border-radius: ".concat(props.isStartDateOfRange && props.isSelected ? '50% 0 0 50% !important' : props.isFirstDayOfMonth ? '4px 0 0 4px' : props.isLastDayOfMonth ? '0 4px 4px 0' : '0', ";\n            height: 96%;\n            background-color: ").concat(!props.isPrevNextMonth && !props.disabled && (0, _colorCheck.parseHexColorToRgba)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), 0.1), "; \n            transform: translate(-50%, -50%);\n          }\n        }\n      }");
 });
 
 exports.DatePickerTableCell = DatePickerTableCell;
@@ -102,11 +108,11 @@ var DateYearPickerBody = _styled.default.div(_templateObject12 || (_templateObje
 exports.DateYearPickerBody = DateYearPickerBody;
 
 var DateYearPickerCell = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0.75rem 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n\n  transition: background 150ms ease;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+  return props.theme.colors.neutral.black;
 }, function (props) {
   return props.isSelected && "\n    background-color: ".concat((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme), ";\n    color: white;\n  ");
 }, function (props) {
-  return (0, _colorCheck.parseHslColorToString)(props.theme.colorMode === 'dark' ? (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral4 : (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
+  return (0, _colorCheck.parseHslColorToString)((0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme)).neutral1);
 });
 
 exports.DateYearPickerCell = DateYearPickerCell;

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

@@ -1,59 +1,59 @@
-import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
-export declare type DatePickerProps = {
-    /**
-     * Sets the date picker's type.
-     * @default 'date'
-     */
-    type?: 'date' | 'range';
-    /**
-     * Sets the date container type.
-     * @default 'compact'
-     */
-    variant?: 'compact' | 'extended';
-    /**
-     * Sets the date picker's current/initial value.
-     */
-    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.
-     */
-    minDate?: Date;
-    /**
-     * Sets the date picker's maximum month and year.
-     * @summary To set the maximum date, the date needs to be the first day of the month.
-     */
-    maxDate?: Date;
-    /**
-     * Callback function that is called when the date picker's value changes.
-     * @param {Date} date - The new date.
-     */
-    onChange?: (date: Date | [Date, Date]) => void;
-    color?: GlobalColorsProps | (string & {});
-};
-export declare type GenericStyledProps = {
-    theme?: ExtendThemeProps & {
-        colorSelected: GlobalColorsProps | (string & {});
-    };
-};
-export declare type DatePickerContentProps = {
-    variant?: 'compact' | 'extended';
-    startDate: Date;
-    date: Date;
-    endDate: Date;
-    isInTheRange: (currentDate: Date) => boolean;
-    handleMouseOver: (currentDate: Date) => void;
-    handleChange: (newDate: Date) => void;
-    handleChangeDate: (newDate: Date) => void;
-    handleToggleYearPicker?: () => void;
-    enableYearPicker?: boolean;
-    minDate?: Date;
-    maxDate?: Date;
-    type?: 'date' | 'range';
-    color?: 'primary' | 'secondary' | 'tertiary';
-};
-export declare type DateYearPickerProps = {
-    date: Date;
-    handleChangeDate: (newDate: Date) => void;
-};
+import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
+export declare type DatePickerProps = {
+    /**
+     * Sets the date picker's type.
+     * @default 'date'
+     */
+    type?: 'date' | 'range';
+    /**
+     * Sets the date container type.
+     * @default 'compact'
+     */
+    variant?: 'compact' | 'extended';
+    /**
+     * Sets the date picker's current/initial value.
+     */
+    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.
+     */
+    minDate?: Date;
+    /**
+     * Sets the date picker's maximum month and year.
+     * @summary To set the maximum date, the date needs to be the first day of the month.
+     */
+    maxDate?: Date;
+    /**
+     * Callback function that is called when the date picker's value changes.
+     * @param {Date} date - The new date.
+     */
+    onChange?: (date: Date | [Date, Date]) => void;
+    color?: GlobalColorsProps | (string & {});
+};
+export declare type GenericStyledProps = {
+    theme?: ExtendThemeProps & {
+        colorSelected: GlobalColorsProps | (string & {});
+    };
+};
+export declare type DatePickerContentProps = {
+    variant?: 'compact' | 'extended';
+    startDate: Date;
+    date: Date;
+    endDate: Date;
+    isInTheRange: (currentDate: Date) => boolean;
+    handleMouseOver: (currentDate: Date) => void;
+    handleChange: (newDate: Date) => void;
+    handleChangeDate: (newDate: Date) => void;
+    handleToggleYearPicker?: () => void;
+    enableYearPicker?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    type?: 'date' | 'range';
+    color?: 'primary' | 'secondary' | 'tertiary';
+};
+export declare type DateYearPickerProps = {
+    date: Date;
+    handleChangeDate: (newDate: Date) => void;
+};
 //# sourceMappingURL=types.d.ts.map