linear-react-components-ui 2.1.0-beta.0 → 2.1.0-beta.2

package/lib/inputs2/date/dateperiodfield/base.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as compilerRuntimeExports } from "../../../_virtual/compiler-runtime.js";
 import React from "react";
 import _ from "../../../_virtual/lodash.js";
-import { useIMask } from "react-imask";
 import { createPortal } from "react-dom";
 import hooks from "../../../node_modules/moment/dist/moment.js";
 import Hint from "../../../hint/index.js";
@@ -12,12 +11,15 @@ import { mergeRefs } from "../../../form2/helpers.js";
 import { Keys } from "../types.js";
 import * as inputs2_date_base_index from "../base/index.js";
 import { Label, Root, Container, Input } from "../base/index.js";
-import { TOKEN_ISO_FORMAT, TOKEN_PTBR_FORMAT, TOKEN_MASK, NAVIGATION_KEYS } from "../helpers.js";
+import { useDateMask } from "../hooks/useDateMask.js";
+import { useDateCalendarState } from "../hooks/useDateCalendarState.js";
+import { TimeSelector } from "../timeselector.js";
+import { getDateFormats, parseBoundary, TOKEN_ISO_FORMAT, getPredefinedPeriodRange, clampDateToBounds, isDayOutOfBounds, parseDateValue } from "../helpers.js";
+import { CalendarBox } from "../calendarbox.js";
 import { Triggers } from "./triggers.js";
-import { CalendarBox } from "./calendarbox.js";
 import { DatePeriodFieldContext } from "./context.js";
 const InputBase = React.forwardRef((props, __) => {
-  const $ = compilerRuntimeExports.c(193);
+  const $ = compilerRuntimeExports.c(207);
   const {
     label,
     errors,
@@ -36,11 +38,14 @@ const InputBase = React.forwardRef((props, __) => {
     showCalendarButton: t12,
     textAlign: t13,
     openCalendarOnFocus: t14,
-    shouldCloseOnSelect: t15,
-    showPredefinedPeriodsButton: t16,
-    showClearDateButton: t17,
-    placeholder: t18,
-    returnValueType: t19,
+    showPredefinedPeriodsButton: t15,
+    showClearDateButton: t16,
+    returnValueType: t17,
+    variant: t18,
+    placeholder,
+    shouldCloseOnSelect,
+    min,
+    max,
     tooltip,
     tooltipPosition,
     tooltipWidth,
@@ -63,252 +68,140 @@ const InputBase = React.forwardRef((props, __) => {
   const showCalendarButton = t12 === void 0 ? true : t12;
   const textAlign = t13 === void 0 ? "left" : t13;
   const openCalendarOnFocus = t14 === void 0 ? true : t14;
-  const shouldCloseOnSelect = t15 === void 0 ? true : t15;
-  const showPredefinedPeriodsButton = t16 === void 0 ? true : t16;
-  const showClearDateButton = t17 === void 0 ? true : t17;
-  const placeholder = t18 === void 0 ? TOKEN_PTBR_FORMAT : t18;
-  const returnValueType = t19 === void 0 ? "default" : t19;
-  let t20;
+  const showPredefinedPeriodsButton = t15 === void 0 ? true : t15;
+  const showClearDateButton = t16 === void 0 ? true : t16;
+  const returnValueType = t17 === void 0 ? "default" : t17;
+  const variant = t18 === void 0 ? "date" : t18;
+  const isDateTime = variant === "datetime";
+  const {
+    isoFormat,
+    ptbrFormat,
+    digits
+  } = getDateFormats(variant);
+  const shouldCloseCalendarOnSelect = shouldCloseOnSelect ?? !isDateTime;
+  const inputPlaceholder = placeholder ?? ptbrFormat;
+  const minDate = parseBoundary(min);
+  const maxDate = parseBoundary(max);
+  const hasBounds = Boolean(minDate || maxDate);
+  let t19;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t20 = {
+    t19 = {
       inicial: null,
       final: null
     };
-    $[0] = t20;
-  } else {
-    t20 = $[0];
-  }
-  const [selectedDate, setSelectedDate] = React.useState(t20);
-  const [calendarBoxOpen, setCalendarBoxOpen] = React.useState(false);
-  let t21;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t21 = hooks().format(TOKEN_ISO_FORMAT);
-    $[1] = t21;
+    $[0] = t19;
   } else {
-    t21 = $[1];
+    t19 = $[0];
   }
-  const [activeDescendant, setActiveDescendant] = React.useState(t21);
-  let t22;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t22 = hooks();
-    $[2] = t22;
-  } else {
-    t22 = $[2];
-  }
-  const [calendarDisplayDate, setCalendarDisplayDate] = React.useState(t22);
-  const calendarRef = React.useRef(null);
+  const [selectedDate, setSelectedDate] = React.useState(t19);
+  const [activeInputType, setActiveInputType] = React.useState("initial");
   const inputRootRef = React.useRef(null);
   const finalInputRef = React.useRef(null);
   const initialInputRef = React.useRef(null);
-  const dateContainerRef = React.useRef(null);
-  let t23;
-  if ($[3] !== initialName || $[4] !== props.name) {
-    t23 = String(props.name).concat(".").concat(initialName);
-    $[3] = initialName;
-    $[4] = props.name;
-    $[5] = t23;
-  } else {
-    t23 = $[5];
-  }
-  const initialInputName = t23;
-  let t24;
-  if ($[6] !== finalName || $[7] !== props.name) {
-    t24 = String(props.name).concat(".").concat(finalName);
-    $[6] = finalName;
-    $[7] = props.name;
-    $[8] = t24;
-  } else {
-    t24 = $[8];
-  }
-  const finalInputName = t24;
-  let t25;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = {
-      mask: TOKEN_MASK,
-      lazy: false,
-      placeholderChar: "_"
-    };
-    $[9] = t25;
+  const calendarState = useDateCalendarState({
+    inputRef: initialInputRef,
+    min: minDate,
+    max: maxDate
+  });
+  const {
+    calendarBoxOpen,
+    activeDescendant,
+    calendarDisplayDate,
+    calendarRef,
+    dateContainerRef,
+    handleNextMonth,
+    handlePreviousMonth,
+    handleSetCalendarBoxOpen,
+    handleChangeActiveDescendant,
+    handleChangeCalendarDisplayDate,
+    handleKeyDownNavigation
+  } = calendarState;
+  let t20;
+  if ($[1] !== initialName || $[2] !== props.name) {
+    t20 = String(props.name).concat(".").concat(initialName);
+    $[1] = initialName;
+    $[2] = props.name;
+    $[3] = t20;
   } else {
-    t25 = $[9];
+    t20 = $[3];
   }
-  let t26;
-  if ($[10] !== selectedDate.inicial) {
-    t26 = selectedDate.inicial?.format(TOKEN_PTBR_FORMAT);
-    $[10] = selectedDate.inicial;
-    $[11] = t26;
+  const initialInputName = t20;
+  let t21;
+  if ($[4] !== finalName || $[5] !== props.name) {
+    t21 = String(props.name).concat(".").concat(finalName);
+    $[4] = finalName;
+    $[5] = props.name;
+    $[6] = t21;
   } else {
-    t26 = $[11];
+    t21 = $[6];
   }
+  const finalInputName = t21;
   const {
-    value: initialMaskedValue,
-    setValue: setInitialMaskValue,
-    unmaskedValue: initialUnmaskedValue
-  } = useIMask(t25, {
-    ref: initialInputRef,
-    defaultValue: t26,
-    onComplete: (value) => {
-      const date = hooks(value, TOKEN_PTBR_FORMAT);
-      if (date.isValid()) {
-        handleChangeUpdateDateState({
-          date,
-          inputType: "initial",
-          typing: true
-        });
-      }
-    }
+    maskedValue: initialMaskedValue,
+    setMaskValue: setInitialMaskValue,
+    unmaskedValue: initialUnmaskedValue,
+    handleOnPaste,
+    handleOnBeforeInput
+  } = useDateMask({
+    inputRef: initialInputRef,
+    variant,
+    defaultValue: selectedDate.inicial?.format(ptbrFormat),
+    undigitable,
+    onCommit: (date) => handleChangeUpdateDateState({
+      date,
+      inputType: "initial",
+      typing: true
+    }),
+    onPaste: props.onPaste,
+    onBeforeInput: props.onBeforeInput
   });
-  let t27;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t27 = {
-      mask: TOKEN_MASK,
-      lazy: false,
-      placeholderChar: "_"
-    };
-    $[12] = t27;
-  } else {
-    t27 = $[12];
-  }
-  let t28;
-  if ($[13] !== selectedDate.final) {
-    t28 = selectedDate.final?.format(TOKEN_PTBR_FORMAT);
-    $[13] = selectedDate.final;
-    $[14] = t28;
-  } else {
-    t28 = $[14];
-  }
   const {
-    value: finalMaskedValue,
-    setValue: setFinalMaskValue,
+    maskedValue: finalMaskedValue,
+    setMaskValue: setFinalMaskValue,
     unmaskedValue: finalUnmaskedValue
-  } = useIMask(t27, {
-    ref: finalInputRef,
-    defaultValue: t28,
-    onComplete: (value_0) => {
-      const date_0 = hooks(value_0, TOKEN_PTBR_FORMAT);
-      if (date_0.isValid()) {
-        handleChangeUpdateDateState({
-          date: date_0,
-          inputType: "final",
-          typing: true
-        });
-      }
-    }
+  } = useDateMask({
+    inputRef: finalInputRef,
+    variant,
+    defaultValue: selectedDate.final?.format(ptbrFormat),
+    undigitable,
+    onCommit: (date_0) => handleChangeUpdateDateState({
+      date: date_0,
+      inputType: "final",
+      typing: true
+    }),
+    onPaste: props.onPaste,
+    onBeforeInput: props.onBeforeInput
   });
-  let t29;
-  if ($[15] !== props.label) {
-    t29 = _.isEmpty(props?.label);
-    $[15] = props.label;
-    $[16] = t29;
+  let t22;
+  if ($[7] !== props.label) {
+    t22 = _.isEmpty(props?.label);
+    $[7] = props.label;
+    $[8] = t22;
   } else {
-    t29 = $[16];
+    t22 = $[8];
   }
-  const hasLabel = !t29;
+  const hasLabel = !t22;
   const hasHintMessages = Boolean(props.hint?.length);
   const hasValidationErrors = Boolean(errors?.length);
-  let t30;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t30 = (object) => setSelectedDate(object);
-    $[17] = t30;
-  } else {
-    t30 = $[17];
-  }
-  const handleChangeSelectedDate = t30;
-  let t31;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-    t31 = (value_1) => setCalendarBoxOpen(value_1);
-    $[18] = t31;
-  } else {
-    t31 = $[18];
-  }
-  const handleChangeCalendarBoxState = t31;
-  let t32;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-    t32 = (value_2) => setActiveDescendant(value_2);
-    $[19] = t32;
-  } else {
-    t32 = $[19];
-  }
-  const handleChangeActiveDescendant = t32;
-  let t33;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t33 = (value_3) => setCalendarDisplayDate(value_3);
-    $[20] = t33;
-  } else {
-    t33 = $[20];
-  }
-  const handleChangeCalendarDisplayDate = t33;
-  let t34;
-  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-    t34 = () => setCalendarDisplayDate(_temp);
-    $[21] = t34;
-  } else {
-    t34 = $[21];
-  }
-  const handleChangePreviousMonth = t34;
-  let t35;
-  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-    t35 = () => setCalendarDisplayDate(_temp2);
-    $[22] = t35;
-  } else {
-    t35 = $[22];
-  }
-  const handleChangeNextMonth = t35;
-  let t36;
-  if ($[23] !== handleChangeActiveDescendant) {
-    t36 = (offset) => {
-      setCalendarDisplayDate((prevDisplayDate_1) => {
-        const daySelected = prevDisplayDate_1.clone().add(offset, "day");
-        handleChangeActiveDescendant(daySelected.format(TOKEN_ISO_FORMAT));
-        return daySelected;
-      });
-    };
-    $[23] = handleChangeActiveDescendant;
-    $[24] = t36;
-  } else {
-    t36 = $[24];
-  }
-  const handleNavigateWithDays = t36;
-  let t37;
-  if ($[25] !== handleChangeActiveDescendant) {
-    t37 = (when) => {
-      setCalendarDisplayDate((prevDisplayDate_2) => {
-        let daySelected_0 = prevDisplayDate_2;
-        if (when === "end") {
-          daySelected_0 = prevDisplayDate_2.clone().endOf("week");
-        }
-        if (when === "start") {
-          daySelected_0 = prevDisplayDate_2.clone().startOf("week");
-        }
-        handleChangeActiveDescendant(daySelected_0.format(TOKEN_ISO_FORMAT));
-        return daySelected_0;
-      });
-    };
-    $[25] = handleChangeActiveDescendant;
-    $[26] = t37;
-  } else {
-    t37 = $[26];
-  }
-  const handleNavigateWithWeeks = t37;
-  let t38;
-  if ($[27] !== finalName || $[28] !== initialName || $[29] !== props.value) {
-    t38 = () => {
+  let t23;
+  if ($[9] !== finalName || $[10] !== initialName || $[11] !== props.value) {
+    t23 = () => {
       const objectValue = props?.value;
       const isValidInitialValue = !_.isEmpty(objectValue[initialName]);
       const isValidFinalValue = !_.isEmpty(objectValue[finalName]);
       return isValidInitialValue && isValidFinalValue;
     };
-    $[27] = finalName;
-    $[28] = initialName;
-    $[29] = props.value;
-    $[30] = t38;
+    $[9] = finalName;
+    $[10] = initialName;
+    $[11] = props.value;
+    $[12] = t23;
   } else {
-    t38 = $[30];
+    t23 = $[12];
   }
-  const verifyPeriodSelectedIsValid = t38;
-  let t39;
-  if ($[31] !== finalName || $[32] !== handleChangeCalendarBoxState || $[33] !== initialName || $[34] !== props || $[35] !== setFinalMaskValue || $[36] !== setInitialMaskValue) {
-    t39 = () => {
+  const verifyPeriodSelectedIsValid = t23;
+  let t24;
+  if ($[13] !== finalName || $[14] !== handleSetCalendarBoxOpen || $[15] !== initialName || $[16] !== props || $[17] !== setFinalMaskValue || $[18] !== setInitialMaskValue || $[19] !== setSelectedDate) {
+    t24 = () => {
       props.onChange?.({
         target: {
           name: props.name,
@@ -318,22 +211,23 @@ const InputBase = React.forwardRef((props, __) => {
           }
         }
       });
-      setSelectedDate(_temp3);
+      setSelectedDate(_temp);
       setInitialMaskValue("");
       setFinalMaskValue("");
-      handleChangeCalendarBoxState(false);
+      handleSetCalendarBoxOpen(false);
     };
-    $[31] = finalName;
-    $[32] = handleChangeCalendarBoxState;
-    $[33] = initialName;
-    $[34] = props;
-    $[35] = setFinalMaskValue;
-    $[36] = setInitialMaskValue;
-    $[37] = t39;
-  } else {
-    t39 = $[37];
-  }
-  const handleOnClickClearSelectedPeriod = t39;
+    $[13] = finalName;
+    $[14] = handleSetCalendarBoxOpen;
+    $[15] = initialName;
+    $[16] = props;
+    $[17] = setFinalMaskValue;
+    $[18] = setInitialMaskValue;
+    $[19] = setSelectedDate;
+    $[20] = t24;
+  } else {
+    t24 = $[20];
+  }
+  const handleOnClickClearSelectedPeriod = t24;
   const handleChangeUpdateDateState = (params) => {
     const {
       date: date_1,
@@ -341,8 +235,8 @@ const InputBase = React.forwardRef((props, __) => {
       typing
     } = params;
     const rawDate = date_1.clone();
-    const verifyDateRangeOrder = _temp4;
-    bb185: switch (inputType) {
+    const verifyDateRangeOrder = _temp2;
+    bb165: switch (inputType) {
       case "initial": {
         setSelectedDate((prevSelectedDate_0) => {
           const {
@@ -363,8 +257,8 @@ const InputBase = React.forwardRef((props, __) => {
           target: {
             name: props.name,
             value: {
-              [initialName]: returnValueType === "default" ? inicial_3?.format(TOKEN_ISO_FORMAT) : inicial_3?.toISOString(),
-              [finalName]: returnValueType === "default" ? final_3?.format(TOKEN_ISO_FORMAT) : final_3?.toISOString()
+              [initialName]: returnValueType === "default" ? inicial_3?.format(isoFormat) : inicial_3?.toISOString(),
+              [finalName]: returnValueType === "default" ? final_3?.format(isoFormat) : final_3?.toISOString()
             }
           }
         });
@@ -373,7 +267,7 @@ const InputBase = React.forwardRef((props, __) => {
             finalInputRef.current?.focus?.();
           }
         });
-        break bb185;
+        break bb165;
       }
       case "final": {
         setSelectedDate((prevSelectedDate) => {
@@ -395,26 +289,27 @@ const InputBase = React.forwardRef((props, __) => {
           target: {
             name: props.name,
             value: {
-              [initialName]: returnValueType === "default" ? inicial_1?.format(TOKEN_ISO_FORMAT) : inicial_1?.toISOString(),
-              [finalName]: returnValueType === "default" ? final_1?.format(TOKEN_ISO_FORMAT) : final_1?.toISOString()
+              [initialName]: returnValueType === "default" ? inicial_1?.format(isoFormat) : inicial_1?.toISOString(),
+              [finalName]: returnValueType === "default" ? final_1?.format(isoFormat) : final_1?.toISOString()
             }
           }
         });
-        if (shouldCloseOnSelect) {
-          handleChangeCalendarBoxState(false);
+        if (shouldCloseCalendarOnSelect) {
+          handleSetCalendarBoxOpen(false);
         }
-        break bb185;
+        break bb165;
       }
     }
-    setCalendarDisplayDate(rawDate.clone());
+    handleChangeActiveDescendant(rawDate.format(TOKEN_ISO_FORMAT));
+    handleChangeCalendarDisplayDate(rawDate.clone());
   };
-  let t40;
-  if ($[38] !== finalName || $[39] !== handleChangeCalendarBoxState || $[40] !== initialName || $[41] !== props || $[42] !== returnValueType || $[43] !== shouldCloseOnSelect) {
-    t40 = (period) => {
+  let t25;
+  if ($[21] !== finalName || $[22] !== handleSetCalendarBoxOpen || $[23] !== initialName || $[24] !== isoFormat || $[25] !== maxDate || $[26] !== minDate || $[27] !== props || $[28] !== returnValueType || $[29] !== setSelectedDate || $[30] !== shouldCloseCalendarOnSelect) {
+    t25 = (period) => {
       const localOnChange = (initialDate_0, finalDate_0) => {
         const valueToUpdate = {
-          [initialName]: returnValueType === "default" ? initialDate_0.format(TOKEN_ISO_FORMAT) : initialDate_0.toISOString(),
-          [finalName]: returnValueType === "default" ? finalDate_0.format(TOKEN_ISO_FORMAT) : finalDate_0.toISOString()
+          [initialName]: returnValueType === "default" ? initialDate_0.format(isoFormat) : initialDate_0.toISOString(),
+          [finalName]: returnValueType === "default" ? finalDate_0.format(isoFormat) : finalDate_0.toISOString()
         };
         setSelectedDate(() => {
           const updatedState_1 = {
@@ -430,458 +325,424 @@ const InputBase = React.forwardRef((props, __) => {
           }
         });
       };
-      bb304: switch (period) {
-        case "today": {
-          const date_2 = hooks();
-          localOnChange(date_2, date_2);
-          break bb304;
-        }
-        case "week": {
-          const startOfWeek = hooks().startOf("week");
-          const endOfWeek = hooks().endOf("week");
-          localOnChange(startOfWeek, endOfWeek);
-          break bb304;
-        }
-        case "lastweek": {
-          const startOfLastWeek = hooks().add(-1, "week").startOf("week");
-          const endOfLastWeek = hooks().add(-1, "week").endOf("week");
-          localOnChange(startOfLastWeek, endOfLastWeek);
-          break bb304;
-        }
-        case "last15": {
-          const startOfLastFifteenDays = hooks().add(-14, "d");
-          const endOfLastFifteenDays = hooks();
-          localOnChange(startOfLastFifteenDays, endOfLastFifteenDays);
-          break bb304;
-        }
-        case "month": {
-          const startOfMonth_0 = hooks().startOf("month");
-          const endOfMonth_0 = hooks().endOf("month");
-          localOnChange(startOfMonth_0, endOfMonth_0);
-          break bb304;
-        }
-        case "lastmonth": {
-          const startOfMonth = hooks().add(-1, "month").startOf("month");
-          const endOfMonth = hooks().add(-1, "month").endOf("month");
-          localOnChange(startOfMonth, endOfMonth);
-          break bb304;
-        }
-      }
+      const {
+        initialDate: initialDate_1,
+        finalDate: finalDate_1
+      } = getPredefinedPeriodRange(period);
+      localOnChange(clampDateToBounds(initialDate_1, minDate, maxDate), clampDateToBounds(finalDate_1, minDate, maxDate));
       finalInputRef?.current?.focus?.();
-      if (shouldCloseOnSelect) {
-        handleChangeCalendarBoxState(false);
+      if (shouldCloseCalendarOnSelect) {
+        handleSetCalendarBoxOpen(false);
       }
     };
-    $[38] = finalName;
-    $[39] = handleChangeCalendarBoxState;
-    $[40] = initialName;
-    $[41] = props;
-    $[42] = returnValueType;
-    $[43] = shouldCloseOnSelect;
-    $[44] = t40;
-  } else {
-    t40 = $[44];
-  }
-  const handleChangeUpdateDateStateWithPredefinedPeriod = t40;
-  let t41;
-  if ($[45] !== calendarBoxOpen || $[46] !== finalInputName || $[47] !== finalUnmaskedValue || $[48] !== handleChangeActiveDescendant || $[49] !== handleChangeCalendarBoxState || $[50] !== initialInputName || $[51] !== initialUnmaskedValue || $[52] !== props || $[53] !== selectedDate.final || $[54] !== selectedDate.inicial || $[55] !== setFinalMaskValue || $[56] !== setInitialMaskValue) {
-    t41 = (event, inputType_0) => {
+    $[21] = finalName;
+    $[22] = handleSetCalendarBoxOpen;
+    $[23] = initialName;
+    $[24] = isoFormat;
+    $[25] = maxDate;
+    $[26] = minDate;
+    $[27] = props;
+    $[28] = returnValueType;
+    $[29] = setSelectedDate;
+    $[30] = shouldCloseCalendarOnSelect;
+    $[31] = t25;
+  } else {
+    t25 = $[31];
+  }
+  const handleChangeUpdateDateStateWithPredefinedPeriod = t25;
+  let t26;
+  if ($[32] !== calendarBoxOpen || $[33] !== digits || $[34] !== finalInputName || $[35] !== finalUnmaskedValue || $[36] !== handleChangeActiveDescendant || $[37] !== handleChangeCalendarDisplayDate || $[38] !== handleSetCalendarBoxOpen || $[39] !== initialInputName || $[40] !== initialUnmaskedValue || $[41] !== props || $[42] !== ptbrFormat || $[43] !== selectedDate.final || $[44] !== selectedDate.inicial || $[45] !== setFinalMaskValue || $[46] !== setInitialMaskValue) {
+    t26 = (event, inputType_0) => {
       props?.onBlur?.(event);
       if (inputType_0 === "initial") {
         if (event.relatedTarget?.id !== finalInputName) {
-          handleChangeCalendarBoxState(false);
+          handleSetCalendarBoxOpen(false);
         }
         if (calendarBoxOpen) {
           handleChangeActiveDescendant((selectedDate.inicial ?? hooks()).format(TOKEN_ISO_FORMAT));
-          setCalendarDisplayDate(selectedDate.inicial ?? hooks());
+          handleChangeCalendarDisplayDate(selectedDate.inicial ?? hooks());
         }
-        if (_.size(initialUnmaskedValue) !== 8) {
-          const date_3 = hooks(selectedDate.inicial, TOKEN_ISO_FORMAT);
-          if (date_3.isValid()) {
-            setInitialMaskValue(date_3.format(TOKEN_PTBR_FORMAT));
+        if (_.size(initialUnmaskedValue) !== digits) {
+          const date_2 = hooks(selectedDate.inicial, TOKEN_ISO_FORMAT);
+          if (date_2.isValid()) {
+            setInitialMaskValue(date_2.format(ptbrFormat));
           }
         }
       }
       if (inputType_0 === "final") {
         if (event.relatedTarget?.id !== initialInputName) {
-          handleChangeCalendarBoxState(false);
+          handleSetCalendarBoxOpen(false);
         }
         if (calendarBoxOpen) {
           handleChangeActiveDescendant((selectedDate.final ?? hooks()).format(TOKEN_ISO_FORMAT));
-          setCalendarDisplayDate(selectedDate.final ?? hooks());
+          handleChangeCalendarDisplayDate(selectedDate.final ?? hooks());
         }
-        if (_.size(finalUnmaskedValue) !== 8) {
-          const date_4 = hooks(selectedDate.final, TOKEN_ISO_FORMAT);
-          if (date_4.isValid()) {
-            setFinalMaskValue(date_4.format(TOKEN_PTBR_FORMAT));
+        if (_.size(finalUnmaskedValue) !== digits) {
+          const date_3 = hooks(selectedDate.final, TOKEN_ISO_FORMAT);
+          if (date_3.isValid()) {
+            setFinalMaskValue(date_3.format(ptbrFormat));
           }
         }
       }
     };
-    $[45] = calendarBoxOpen;
-    $[46] = finalInputName;
-    $[47] = finalUnmaskedValue;
-    $[48] = handleChangeActiveDescendant;
-    $[49] = handleChangeCalendarBoxState;
-    $[50] = initialInputName;
-    $[51] = initialUnmaskedValue;
-    $[52] = props;
-    $[53] = selectedDate.final;
-    $[54] = selectedDate.inicial;
-    $[55] = setFinalMaskValue;
-    $[56] = setInitialMaskValue;
-    $[57] = t41;
+    $[32] = calendarBoxOpen;
+    $[33] = digits;
+    $[34] = finalInputName;
+    $[35] = finalUnmaskedValue;
+    $[36] = handleChangeActiveDescendant;
+    $[37] = handleChangeCalendarDisplayDate;
+    $[38] = handleSetCalendarBoxOpen;
+    $[39] = initialInputName;
+    $[40] = initialUnmaskedValue;
+    $[41] = props;
+    $[42] = ptbrFormat;
+    $[43] = selectedDate.final;
+    $[44] = selectedDate.inicial;
+    $[45] = setFinalMaskValue;
+    $[46] = setInitialMaskValue;
+    $[47] = t26;
   } else {
-    t41 = $[57];
+    t26 = $[47];
   }
-  const handleOnBlurMaskInput = t41;
-  let t42;
-  if ($[58] !== calendarBoxOpen || $[59] !== handleChangeActiveDescendant || $[60] !== openCalendarOnFocus || $[61] !== props || $[62] !== readOnly || $[63] !== selectedDate.final || $[64] !== selectedDate.inicial) {
-    t42 = (event_0, inputType_1) => {
+  const handleOnBlurMaskInput = t26;
+  let t27;
+  if ($[48] !== calendarBoxOpen || $[49] !== handleChangeActiveDescendant || $[50] !== handleChangeCalendarDisplayDate || $[51] !== handleSetCalendarBoxOpen || $[52] !== openCalendarOnFocus || $[53] !== props || $[54] !== readOnly || $[55] !== selectedDate.final || $[56] !== selectedDate.inicial || $[57] !== setActiveInputType) {
+    t27 = (event_0, inputType_1) => {
       props?.onFocus?.(event_0);
       if (!readOnly && !calendarBoxOpen && openCalendarOnFocus) {
-        setCalendarBoxOpen(true);
+        handleSetCalendarBoxOpen(true);
       }
+      setActiveInputType(inputType_1);
       if (inputType_1 === "initial") {
         handleChangeActiveDescendant((selectedDate.inicial ?? hooks()).format(TOKEN_ISO_FORMAT));
-        setCalendarDisplayDate(selectedDate.inicial ?? hooks());
+        handleChangeCalendarDisplayDate(selectedDate.inicial ?? hooks());
       }
       if (inputType_1 === "final") {
         handleChangeActiveDescendant((selectedDate.final ?? hooks()).format(TOKEN_ISO_FORMAT));
-        setCalendarDisplayDate(selectedDate.final ?? hooks());
+        handleChangeCalendarDisplayDate(selectedDate.final ?? hooks());
       }
     };
-    $[58] = calendarBoxOpen;
-    $[59] = handleChangeActiveDescendant;
-    $[60] = openCalendarOnFocus;
-    $[61] = props;
-    $[62] = readOnly;
-    $[63] = selectedDate.final;
-    $[64] = selectedDate.inicial;
-    $[65] = t42;
-  } else {
-    t42 = $[65];
-  }
-  const handleOnFocusMaskInput = t42;
-  let t43;
-  if ($[66] !== activeDescendant || $[67] !== calendarBoxOpen || $[68] !== handleChangeUpdateDateState || $[69] !== props) {
-    t43 = (event_1, inputType_2) => {
+    $[48] = calendarBoxOpen;
+    $[49] = handleChangeActiveDescendant;
+    $[50] = handleChangeCalendarDisplayDate;
+    $[51] = handleSetCalendarBoxOpen;
+    $[52] = openCalendarOnFocus;
+    $[53] = props;
+    $[54] = readOnly;
+    $[55] = selectedDate.final;
+    $[56] = selectedDate.inicial;
+    $[57] = setActiveInputType;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  const handleOnFocusMaskInput = t27;
+  let getDayState;
+  let handleOnKeyDownMaskInput;
+  let handleSelectDay;
+  if ($[59] !== activeDescendant || $[60] !== calendarBoxOpen || $[61] !== finalInputName || $[62] !== handleChangeUpdateDateState || $[63] !== hasBounds || $[64] !== initialInputName || $[65] !== isDateTime || $[66] !== maxDate || $[67] !== minDate || $[68] !== props || $[69] !== selectedDate) {
+    handleOnKeyDownMaskInput = (event_1, inputType_2) => {
       props?.onKeyDown?.(event_1);
       if (calendarBoxOpen && event_1.key && !event_1.shiftKey && !event_1.altKey && event_1.key === Keys.enter) {
         event_1.preventDefault();
-        const rawDate_0 = hooks(_.toString(activeDescendant), TOKEN_ISO_FORMAT);
-        handleChangeUpdateDateState({
-          date: rawDate_0,
-          inputType: inputType_2
-        });
-      }
-    };
-    $[66] = activeDescendant;
-    $[67] = calendarBoxOpen;
-    $[68] = handleChangeUpdateDateState;
-    $[69] = props;
-    $[70] = t43;
-  } else {
-    t43 = $[70];
-  }
-  const handleOnKeyDownMaskInput = t43;
-  let t44;
-  if ($[71] !== props || $[72] !== undigitable) {
-    t44 = (event_2) => {
-      if (undigitable) {
-        event_2.preventDefault();
-      } else {
-        props.onPaste?.(event_2);
-      }
-    };
-    $[71] = props;
-    $[72] = undigitable;
-    $[73] = t44;
-  } else {
-    t44 = $[73];
-  }
-  const handleOnPaste = t44;
-  let t45;
-  if ($[74] !== props || $[75] !== undigitable) {
-    t45 = (event_3) => {
-      if (undigitable) {
-        event_3.preventDefault();
-      } else {
-        props.onBeforeInput?.(event_3);
+        handleSelectDay(hooks(_.toString(activeDescendant), TOKEN_ISO_FORMAT), inputType_2);
       }
     };
-    $[74] = props;
-    $[75] = undigitable;
-    $[76] = t45;
-  } else {
-    t45 = $[76];
-  }
-  const handleOnBeforeInput = t45;
-  let t46;
-  if ($[77] !== calendarBoxOpen || $[78] !== handleChangeCalendarBoxState || $[79] !== handleChangeNextMonth || $[80] !== handleChangePreviousMonth || $[81] !== handleNavigateWithDays || $[82] !== handleNavigateWithWeeks) {
-    t46 = (event_4) => {
-      if (calendarBoxOpen && event_4.key && !event_4.shiftKey && !event_4.altKey && NAVIGATION_KEYS.includes(event_4.key)) {
-        event_4.preventDefault();
-        bb466: switch (event_4.key) {
-          case Keys.arrowLeft: {
-            handleNavigateWithDays(-1);
-            break bb466;
-          }
-          case Keys.arrowRight: {
-            handleNavigateWithDays(1);
-            break bb466;
-          }
-          case Keys.arrowUp: {
-            handleNavigateWithDays(-7);
-            break bb466;
-          }
-          case Keys.arrowDown: {
-            handleNavigateWithDays(7);
-            break bb466;
-          }
-          case Keys.pageUp: {
-            handleChangeNextMonth();
-            break bb466;
-          }
-          case Keys.pageDown: {
-            handleChangePreviousMonth();
-            break bb466;
-          }
-          case Keys.home: {
-            handleNavigateWithWeeks("start");
-            break bb466;
-          }
-          case Keys.end: {
-            handleNavigateWithWeeks("end");
-            break bb466;
-          }
-          case Keys.escape: {
-            handleChangeCalendarBoxState(false);
-            break bb466;
+    let t282;
+    if ($[73] !== hasBounds || $[74] !== maxDate || $[75] !== minDate || $[76] !== selectedDate) {
+      t282 = (day) => {
+        const {
+          inicial: inicial_4,
+          final: final_4
+        } = selectedDate;
+        return {
+          isSelected: Boolean(inicial_4 && day.isSame(inicial_4, "day") || final_4 && day.isSame(final_4, "day")),
+          isInRange: Boolean(inicial_4 && final_4 && day.isAfter(inicial_4, "day") && day.isBefore(final_4, "day")),
+          ...hasBounds && {
+            isDisabled: isDayOutOfBounds(day, minDate, maxDate)
           }
+        };
+      };
+      $[73] = hasBounds;
+      $[74] = maxDate;
+      $[75] = minDate;
+      $[76] = selectedDate;
+      $[77] = t282;
+    } else {
+      t282 = $[77];
+    }
+    getDayState = t282;
+    let t292;
+    if ($[78] !== finalInputName || $[79] !== initialInputName) {
+      t292 = () => {
+        const focusedInputId = document.activeElement?.id;
+        if (focusedInputId === initialInputName) {
+          return "initial";
         }
+        if (focusedInputId === finalInputName) {
+          return "final";
+        }
+      };
+      $[78] = finalInputName;
+      $[79] = initialInputName;
+      $[80] = t292;
+    } else {
+      t292 = $[80];
+    }
+    const resolveInputTypeFromFocus = t292;
+    handleSelectDay = (daySelected, targetInputType) => {
+      const inputType_3 = targetInputType ?? resolveInputTypeFromFocus();
+      if (_.isUndefined(inputType_3)) {
+        return;
+      }
+      const current = inputType_3 === "initial" ? selectedDate.inicial : selectedDate.final;
+      const dayWithTime = isDateTime && current ? daySelected.clone().hour(current.hour()).minute(current.minute()) : daySelected;
+      handleChangeUpdateDateState({
+        date: clampDateToBounds(dayWithTime, minDate, maxDate),
+        inputType: inputType_3
+      });
+    };
+    $[59] = activeDescendant;
+    $[60] = calendarBoxOpen;
+    $[61] = finalInputName;
+    $[62] = handleChangeUpdateDateState;
+    $[63] = hasBounds;
+    $[64] = initialInputName;
+    $[65] = isDateTime;
+    $[66] = maxDate;
+    $[67] = minDate;
+    $[68] = props;
+    $[69] = selectedDate;
+    $[70] = getDayState;
+    $[71] = handleOnKeyDownMaskInput;
+    $[72] = handleSelectDay;
+  } else {
+    getDayState = $[70];
+    handleOnKeyDownMaskInput = $[71];
+    handleSelectDay = $[72];
+  }
+  const activeSelectedDate = activeInputType === "initial" ? selectedDate.inicial : selectedDate.final;
+  let t28;
+  if ($[81] !== activeInputType || $[82] !== activeSelectedDate || $[83] !== handleChangeUpdateDateState) {
+    t28 = (hour, minute) => {
+      if (!activeSelectedDate) {
+        return;
       }
+      handleChangeUpdateDateState({
+        date: activeSelectedDate.clone().hour(hour).minute(minute).second(0),
+        inputType: activeInputType,
+        typing: true
+      });
     };
-    $[77] = calendarBoxOpen;
-    $[78] = handleChangeCalendarBoxState;
-    $[79] = handleChangeNextMonth;
-    $[80] = handleChangePreviousMonth;
-    $[81] = handleNavigateWithDays;
-    $[82] = handleNavigateWithWeeks;
-    $[83] = t46;
+    $[81] = activeInputType;
+    $[82] = activeSelectedDate;
+    $[83] = handleChangeUpdateDateState;
+    $[84] = t28;
   } else {
-    t46 = $[83];
+    t28 = $[84];
   }
-  const handleOnKeyDown = t46;
-  let t47;
-  if ($[84] !== finalName || $[85] !== initialName || $[86] !== props.value || $[87] !== setFinalMaskValue || $[88] !== setInitialMaskValue) {
-    t47 = () => {
+  const handleSelectTime = t28;
+  let t29;
+  if ($[85] !== finalName || $[86] !== initialName || $[87] !== props.value || $[88] !== ptbrFormat || $[89] !== setFinalMaskValue || $[90] !== setInitialMaskValue || $[91] !== setSelectedDate || $[92] !== variant) {
+    t29 = () => {
       if (props?.value) {
         const objectValue_0 = props.value;
-        const initialDate_1 = hooks(_.toString(objectValue_0[initialName]), TOKEN_ISO_FORMAT);
-        const finalDate_1 = hooks(_.toString(objectValue_0[finalName]), TOKEN_ISO_FORMAT);
+        const initialDate_2 = parseDateValue(objectValue_0[initialName], variant);
+        const finalDate_2 = parseDateValue(objectValue_0[finalName], variant);
         setSelectedDate(() => ({
-          inicial: initialDate_1.isValid() ? initialDate_1 : null,
-          final: finalDate_1.isValid() ? finalDate_1 : null
+          inicial: initialDate_2.isValid() ? initialDate_2 : null,
+          final: finalDate_2.isValid() ? finalDate_2 : null
         }));
-        setInitialMaskValue(initialDate_1.format(TOKEN_PTBR_FORMAT));
-        setFinalMaskValue(finalDate_1.format(TOKEN_PTBR_FORMAT));
+        setInitialMaskValue(initialDate_2.format(ptbrFormat));
+        setFinalMaskValue(finalDate_2.format(ptbrFormat));
       }
     };
-    $[84] = finalName;
-    $[85] = initialName;
-    $[86] = props.value;
-    $[87] = setFinalMaskValue;
-    $[88] = setInitialMaskValue;
-    $[89] = t47;
-  } else {
-    t47 = $[89];
-  }
-  const t48 = props?.value;
-  let t49;
-  if ($[90] !== t48) {
-    t49 = [t48];
-    $[90] = t48;
-    $[91] = t49;
+    $[85] = finalName;
+    $[86] = initialName;
+    $[87] = props.value;
+    $[88] = ptbrFormat;
+    $[89] = setFinalMaskValue;
+    $[90] = setInitialMaskValue;
+    $[91] = setSelectedDate;
+    $[92] = variant;
+    $[93] = t29;
+  } else {
+    t29 = $[93];
+  }
+  const t30 = props?.value;
+  let t31;
+  if ($[94] !== t30) {
+    t31 = [t30];
+    $[94] = t30;
+    $[95] = t31;
   } else {
-    t49 = $[91];
+    t31 = $[95];
   }
-  React.useEffect(t47, t49);
-  const t50 = Boolean(readOnly);
-  const t51 = Boolean(readOnly);
-  const t52 = verifyPeriodSelectedIsValid();
-  let t53;
-  if ($[92] !== activeDescendant || $[93] !== calendarBoxOpen || $[94] !== calendarDisplayDate || $[95] !== finalInputName || $[96] !== handleChangeActiveDescendant || $[97] !== handleChangeCalendarBoxState || $[98] !== handleChangeCalendarDisplayDate || $[99] !== handleChangeNextMonth || $[100] !== handleChangePreviousMonth || $[101] !== handleChangeSelectedDate || $[102] !== handleChangeUpdateDateState || $[103] !== handleChangeUpdateDateStateWithPredefinedPeriod || $[104] !== handleOnClickClearSelectedPeriod || $[105] !== hasValidationErrors || $[106] !== initialInputName || $[107] !== openCalendarOnFocus || $[108] !== selectedDate || $[109] !== showCalendarButton || $[110] !== showClearDateButton || $[111] !== showPredefinedPeriodsButton || $[112] !== skeletonize || $[113] !== t50 || $[114] !== t51 || $[115] !== t52 || $[116] !== undigitable) {
-    t53 = {
-      isReadOnly: t50,
-      isDisabled: t51,
+  React.useEffect(t29, t31);
+  const t32 = Boolean(readOnly);
+  const t33 = Boolean(disabled);
+  const t34 = verifyPeriodSelectedIsValid();
+  let t35;
+  if ($[96] !== calendarState || $[97] !== finalInputName || $[98] !== handleChangeUpdateDateState || $[99] !== handleChangeUpdateDateStateWithPredefinedPeriod || $[100] !== handleOnClickClearSelectedPeriod || $[101] !== hasValidationErrors || $[102] !== initialInputName || $[103] !== initialInputRef || $[104] !== maxDate || $[105] !== minDate || $[106] !== openCalendarOnFocus || $[107] !== selectedDate || $[108] !== showCalendarButton || $[109] !== showClearDateButton || $[110] !== showPredefinedPeriodsButton || $[111] !== skeletonize || $[112] !== t32 || $[113] !== t33 || $[114] !== t34 || $[115] !== undigitable) {
+    t35 = {
+      ...calendarState,
+      isReadOnly: t32,
+      isDisabled: t33,
       undigitable,
       skeletonize,
-      dateContainerRef,
-      calendarBoxOpen,
-      activeDescendant,
       selectedDate,
+      minDate,
+      maxDate,
       initialInputId: initialInputName,
       finalInputId: finalInputName,
       initialInputRef,
       finalInputRef,
       showCalendarButton,
-      calendarDisplayDate,
       hasValidationErrors,
       openCalendarOnFocus,
       showPredefinedPeriodsButton,
       showClearDateButton,
-      handleChangeSelectedDate,
-      handleChangePreviousMonth,
-      handleChangeNextMonth,
-      handleChangeCalendarBoxState,
-      handleChangeActiveDescendant,
-      handleChangeCalendarDisplayDate,
       handleChangeUpdateDateState,
       handleOnClickClearSelectedPeriod,
       handleChangeUpdateDateStateWithPredefinedPeriod,
-      hasValidPeriodSelected: t52
+      hasValidPeriodSelected: t34
     };
-    $[92] = activeDescendant;
-    $[93] = calendarBoxOpen;
-    $[94] = calendarDisplayDate;
-    $[95] = finalInputName;
-    $[96] = handleChangeActiveDescendant;
-    $[97] = handleChangeCalendarBoxState;
-    $[98] = handleChangeCalendarDisplayDate;
-    $[99] = handleChangeNextMonth;
-    $[100] = handleChangePreviousMonth;
-    $[101] = handleChangeSelectedDate;
-    $[102] = handleChangeUpdateDateState;
-    $[103] = handleChangeUpdateDateStateWithPredefinedPeriod;
-    $[104] = handleOnClickClearSelectedPeriod;
-    $[105] = hasValidationErrors;
-    $[106] = initialInputName;
-    $[107] = openCalendarOnFocus;
-    $[108] = selectedDate;
-    $[109] = showCalendarButton;
-    $[110] = showClearDateButton;
-    $[111] = showPredefinedPeriodsButton;
-    $[112] = skeletonize;
-    $[113] = t50;
-    $[114] = t51;
-    $[115] = t52;
-    $[116] = undigitable;
-    $[117] = t53;
-  } else {
-    t53 = $[117];
-  }
-  const contextValues = t53;
-  let t54;
-  if ($[118] !== customClassLabel || $[119] !== disabled || $[120] !== hasHintMessages || $[121] !== hasLabel || $[122] !== hintPosition || $[123] !== initialInputName || $[124] !== label || $[125] !== labelUppercase || $[126] !== popoverAlign || $[127] !== props.hint || $[128] !== props.required || $[129] !== readOnly || $[130] !== skeletonize || $[131] !== themePopover) {
-    t54 = hasLabel && /* @__PURE__ */ jsx(Label, { "data-testid": "test-date-period-field-label", label, inputId: initialInputName, hint: props?.hint, isDisabled: disabled, isReadOnly: readOnly, skeletonize, required: props?.required, hintPosition, themePopover, popoverAlign, labelUppercase, hasHintMessages, customClassLabel });
-    $[118] = customClassLabel;
-    $[119] = disabled;
-    $[120] = hasHintMessages;
-    $[121] = hasLabel;
-    $[122] = hintPosition;
-    $[123] = initialInputName;
-    $[124] = label;
-    $[125] = labelUppercase;
-    $[126] = popoverAlign;
-    $[127] = props.hint;
-    $[128] = props.required;
-    $[129] = readOnly;
-    $[130] = skeletonize;
-    $[131] = themePopover;
-    $[132] = t54;
-  } else {
-    t54 = $[132];
-  }
-  const t55 = _.omit(rest, ["initialRef", "finalRef"]);
-  const t56 = props?.initialRef;
-  let t57;
-  if ($[133] !== t56) {
-    t57 = mergeRefs(initialInputRef, t56);
-    $[133] = t56;
-    $[134] = t57;
+    $[96] = calendarState;
+    $[97] = finalInputName;
+    $[98] = handleChangeUpdateDateState;
+    $[99] = handleChangeUpdateDateStateWithPredefinedPeriod;
+    $[100] = handleOnClickClearSelectedPeriod;
+    $[101] = hasValidationErrors;
+    $[102] = initialInputName;
+    $[103] = initialInputRef;
+    $[104] = maxDate;
+    $[105] = minDate;
+    $[106] = openCalendarOnFocus;
+    $[107] = selectedDate;
+    $[108] = showCalendarButton;
+    $[109] = showClearDateButton;
+    $[110] = showPredefinedPeriodsButton;
+    $[111] = skeletonize;
+    $[112] = t32;
+    $[113] = t33;
+    $[114] = t34;
+    $[115] = undigitable;
+    $[116] = t35;
+  } else {
+    t35 = $[116];
+  }
+  const contextValues = t35;
+  let t36;
+  if ($[117] !== customClassLabel || $[118] !== disabled || $[119] !== hasHintMessages || $[120] !== hasLabel || $[121] !== hintPosition || $[122] !== initialInputName || $[123] !== label || $[124] !== labelUppercase || $[125] !== popoverAlign || $[126] !== props.hint || $[127] !== props.required || $[128] !== readOnly || $[129] !== skeletonize || $[130] !== themePopover) {
+    t36 = hasLabel && /* @__PURE__ */ jsx(Label, { "data-testid": "test-date-period-field-label", label, inputId: initialInputName, hint: props?.hint, isDisabled: disabled, isReadOnly: readOnly, skeletonize, required: props?.required, hintPosition, themePopover, popoverAlign, labelUppercase, hasHintMessages, customClassLabel });
+    $[117] = customClassLabel;
+    $[118] = disabled;
+    $[119] = hasHintMessages;
+    $[120] = hasLabel;
+    $[121] = hintPosition;
+    $[122] = initialInputName;
+    $[123] = label;
+    $[124] = labelUppercase;
+    $[125] = popoverAlign;
+    $[126] = props.hint;
+    $[127] = props.required;
+    $[128] = readOnly;
+    $[129] = skeletonize;
+    $[130] = themePopover;
+    $[131] = t36;
+  } else {
+    t36 = $[131];
+  }
+  const t37 = _.omit(rest, ["initialRef", "finalRef"]);
+  const t38 = props?.initialRef;
+  let t39;
+  if ($[132] !== initialInputRef || $[133] !== t38) {
+    t39 = mergeRefs(initialInputRef, t38);
+    $[132] = initialInputRef;
+    $[133] = t38;
+    $[134] = t39;
   } else {
-    t57 = $[134];
+    t39 = $[134];
   }
-  let t58;
+  let t40;
   if ($[135] !== handleOnBlurMaskInput) {
-    t58 = (event_5) => handleOnBlurMaskInput(event_5, "initial");
+    t40 = (event_2) => handleOnBlurMaskInput(event_2, "initial");
     $[135] = handleOnBlurMaskInput;
-    $[136] = t58;
+    $[136] = t40;
   } else {
-    t58 = $[136];
+    t40 = $[136];
   }
-  let t59;
+  let t41;
   if ($[137] !== handleOnFocusMaskInput) {
-    t59 = (event_6) => handleOnFocusMaskInput(event_6, "initial");
+    t41 = (event_3) => handleOnFocusMaskInput(event_3, "initial");
     $[137] = handleOnFocusMaskInput;
-    $[138] = t59;
+    $[138] = t41;
   } else {
-    t59 = $[138];
+    t41 = $[138];
   }
-  let t60;
+  let t42;
   if ($[139] !== handleOnKeyDownMaskInput) {
-    t60 = (event_7) => handleOnKeyDownMaskInput(event_7, "initial");
+    t42 = (event_4) => handleOnKeyDownMaskInput(event_4, "initial");
     $[139] = handleOnKeyDownMaskInput;
-    $[140] = t60;
+    $[140] = t42;
   } else {
-    t60 = $[140];
+    t42 = $[140];
   }
-  let t61;
+  let t43;
   if ($[141] === Symbol.for("react.memo_cache_sentinel")) {
-    t61 = /* @__PURE__ */ jsx(Icon, { name: "arrow_right", size: 10 });
-    $[141] = t61;
+    t43 = /* @__PURE__ */ jsx(Icon, { name: "arrow_right", size: 10 });
+    $[141] = t43;
   } else {
-    t61 = $[141];
+    t43 = $[141];
   }
-  let t62;
+  let t44;
   if ($[142] !== disabled || $[143] !== readOnly) {
-    t62 = /* @__PURE__ */ jsx("span", { className: "separator", "data-state-disabled": disabled, "data-state-read-only": readOnly, onMouseDown: _temp5, children: t61 });
+    t44 = /* @__PURE__ */ jsx("span", { className: "separator", "data-state-disabled": disabled, "data-state-read-only": readOnly, onMouseDown: _temp3, children: t43 });
     $[142] = disabled;
     $[143] = readOnly;
-    $[144] = t62;
+    $[144] = t44;
   } else {
-    t62 = $[144];
+    t44 = $[144];
   }
-  const t63 = inputs2_date_base_index;
-  const t64 = _.omit(rest, ["initialRef", "finalRef"]);
-  const t65 = props?.finalRef;
-  let t66;
-  if ($[145] !== t65) {
-    t66 = mergeRefs(finalInputRef, t65);
-    $[145] = t65;
-    $[146] = t66;
+  const t45 = inputs2_date_base_index;
+  const t46 = _.omit(rest, ["initialRef", "finalRef"]);
+  const t47 = props?.finalRef;
+  let t48;
+  if ($[145] !== t47) {
+    t48 = mergeRefs(finalInputRef, t47);
+    $[145] = t47;
+    $[146] = t48;
   } else {
-    t66 = $[146];
+    t48 = $[146];
   }
-  const t67 = !readOnly && !skeletonize ? 0 : -1;
-  let t68;
+  const t49 = !readOnly && !skeletonize ? 0 : -1;
+  let t50;
   if ($[147] !== handleOnBlurMaskInput) {
-    t68 = (event_9) => handleOnBlurMaskInput(event_9, "final");
+    t50 = (event_6) => handleOnBlurMaskInput(event_6, "final");
     $[147] = handleOnBlurMaskInput;
-    $[148] = t68;
+    $[148] = t50;
   } else {
-    t68 = $[148];
+    t50 = $[148];
   }
-  let t69;
+  let t51;
   if ($[149] !== handleOnFocusMaskInput) {
-    t69 = (event_10) => handleOnFocusMaskInput(event_10, "final");
+    t51 = (event_7) => handleOnFocusMaskInput(event_7, "final");
     $[149] = handleOnFocusMaskInput;
-    $[150] = t69;
+    $[150] = t51;
   } else {
-    t69 = $[150];
+    t51 = $[150];
   }
-  let t70;
+  let t52;
   if ($[151] !== handleOnKeyDownMaskInput) {
-    t70 = (event_11) => handleOnKeyDownMaskInput(event_11, "final");
+    t52 = (event_8) => handleOnKeyDownMaskInput(event_8, "final");
     $[151] = handleOnKeyDownMaskInput;
-    $[152] = t70;
+    $[152] = t52;
   } else {
-    t70 = $[152];
+    t52 = $[152];
   }
-  let t71;
-  if ($[153] !== activeDescendant || $[154] !== calendarBoxOpen || $[155] !== customClass || $[156] !== disabled || $[157] !== finalInputName || $[158] !== finalMaskedValue || $[159] !== handleOnBeforeInput || $[160] !== handleOnPaste || $[161] !== hasValidationErrors || $[162] !== placeholder || $[163] !== readOnly || $[164] !== skeletonize || $[165] !== t63.Input || $[166] !== t64 || $[167] !== t66 || $[168] !== t67 || $[169] !== t68 || $[170] !== t69 || $[171] !== t70 || $[172] !== textAlign || $[173] !== undigitable) {
-    t71 = /* @__PURE__ */ jsx(t63.Input, { ...t64, ref: t66, id: finalInputName, name: finalInputName, value: finalMaskedValue, readOnly, disabled, customClass, tabIndex: t67, placeholder, "aria-autocomplete": "list", "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": finalInputName, "aria-labelledby": finalInputName, "data-testid": "test-date-period-field-final-input", "data-state-is-period-input": true, "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onPaste: handleOnPaste, onBeforeInput: handleOnBeforeInput, onBlur: t68, onFocus: t69, onKeyDown: t70 });
+  let t53;
+  if ($[153] !== activeDescendant || $[154] !== calendarBoxOpen || $[155] !== customClass || $[156] !== disabled || $[157] !== finalInputName || $[158] !== finalMaskedValue || $[159] !== handleOnBeforeInput || $[160] !== handleOnPaste || $[161] !== hasValidationErrors || $[162] !== inputPlaceholder || $[163] !== readOnly || $[164] !== skeletonize || $[165] !== t45.Input || $[166] !== t46 || $[167] !== t48 || $[168] !== t49 || $[169] !== t50 || $[170] !== t51 || $[171] !== t52 || $[172] !== textAlign || $[173] !== undigitable) {
+    t53 = /* @__PURE__ */ jsx(t45.Input, { ...t46, ref: t48, id: finalInputName, name: finalInputName, value: finalMaskedValue, readOnly, disabled, customClass, tabIndex: t49, placeholder: inputPlaceholder, "aria-autocomplete": "list", "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": finalInputName, "aria-labelledby": finalInputName, "data-testid": "test-date-period-field-final-input", "data-state-is-period-input": true, "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onPaste: handleOnPaste, onBeforeInput: handleOnBeforeInput, onBlur: t50, onFocus: t51, onKeyDown: t52 });
     $[153] = activeDescendant;
     $[154] = calendarBoxOpen;
     $[155] = customClass;
@@ -891,100 +752,108 @@ const InputBase = React.forwardRef((props, __) => {
     $[159] = handleOnBeforeInput;
     $[160] = handleOnPaste;
     $[161] = hasValidationErrors;
-    $[162] = placeholder;
+    $[162] = inputPlaceholder;
     $[163] = readOnly;
     $[164] = skeletonize;
-    $[165] = t63.Input;
-    $[166] = t64;
-    $[167] = t66;
-    $[168] = t67;
-    $[169] = t68;
-    $[170] = t69;
-    $[171] = t70;
+    $[165] = t45.Input;
+    $[166] = t46;
+    $[167] = t48;
+    $[168] = t49;
+    $[169] = t50;
+    $[170] = t51;
+    $[171] = t52;
     $[172] = textAlign;
     $[173] = undigitable;
-    $[174] = t71;
+    $[174] = t53;
   } else {
-    t71 = $[174];
+    t53 = $[174];
   }
-  let t72;
+  let t54;
   if ($[175] === Symbol.for("react.memo_cache_sentinel")) {
-    t72 = /* @__PURE__ */ jsx(Triggers, {});
-    $[175] = t72;
-  } else {
-    t72 = $[175];
-  }
-  let t73;
-  if ($[176] !== calendarBoxOpen) {
-    t73 = calendarBoxOpen && createPortal(/* @__PURE__ */ jsx(CalendarBox, { ref: calendarRef }), document.body);
-    $[176] = calendarBoxOpen;
-    $[177] = t73;
-  } else {
-    t73 = $[177];
-  }
-  let t74;
-  if ($[178] !== disabled || $[179] !== hasHintMessages || $[180] !== hintPosition || $[181] !== props.hint || $[182] !== skeletonize) {
-    t74 = hintPosition === "below" && /* @__PURE__ */ jsx(Hint, { customClass: "hint", description: props.hint, disabled, skeletonize, visible: hasHintMessages });
-    $[178] = disabled;
-    $[179] = hasHintMessages;
-    $[180] = hintPosition;
-    $[181] = props.hint;
-    $[182] = skeletonize;
-    $[183] = t74;
-  } else {
-    t74 = $[183];
+    t54 = /* @__PURE__ */ jsx(Triggers, {});
+    $[175] = t54;
+  } else {
+    t54 = $[175];
+  }
+  let t55;
+  if ($[176] !== activeDescendant || $[177] !== activeSelectedDate || $[178] !== calendarBoxOpen || $[179] !== calendarDisplayDate || $[180] !== calendarRef || $[181] !== dateContainerRef || $[182] !== getDayState || $[183] !== handleNextMonth || $[184] !== handlePreviousMonth || $[185] !== handleSelectDay || $[186] !== handleSelectTime || $[187] !== initialInputName || $[188] !== isDateTime || $[189] !== maxDate || $[190] !== minDate) {
+    t55 = calendarBoxOpen && createPortal(/* @__PURE__ */ jsx(CalendarBox, { ref: calendarRef, testIdPrefix: "test-date-period-field", headerId: initialInputName, calendarBoxOpen, activeDescendant, calendarDisplayDate, containerRef: dateContainerRef, onNextMonth: handleNextMonth, onPreviousMonth: handlePreviousMonth, getDayState, onSelectDay: handleSelectDay, children: isDateTime && /* @__PURE__ */ jsx(TimeSelector, { value: activeSelectedDate, onSelectTime: handleSelectTime, min: minDate, max: maxDate, testIdPrefix: "test-date-period-field" }) }), document.body);
+    $[176] = activeDescendant;
+    $[177] = activeSelectedDate;
+    $[178] = calendarBoxOpen;
+    $[179] = calendarDisplayDate;
+    $[180] = calendarRef;
+    $[181] = dateContainerRef;
+    $[182] = getDayState;
+    $[183] = handleNextMonth;
+    $[184] = handlePreviousMonth;
+    $[185] = handleSelectDay;
+    $[186] = handleSelectTime;
+    $[187] = initialInputName;
+    $[188] = isDateTime;
+    $[189] = maxDate;
+    $[190] = minDate;
+    $[191] = t55;
+  } else {
+    t55 = $[191];
+  }
+  let t56;
+  if ($[192] !== disabled || $[193] !== hasHintMessages || $[194] !== hintPosition || $[195] !== props.hint || $[196] !== skeletonize) {
+    t56 = hintPosition === "below" && /* @__PURE__ */ jsx(Hint, { customClass: "hint", description: props.hint, disabled, skeletonize, visible: hasHintMessages });
+    $[192] = disabled;
+    $[193] = hasHintMessages;
+    $[194] = hintPosition;
+    $[195] = props.hint;
+    $[196] = skeletonize;
+    $[197] = t56;
+  } else {
+    t56 = $[197];
   }
-  let t75;
-  if ($[184] !== errors || $[185] !== hasValidationErrors || $[186] !== label || $[187] !== skeletonize) {
-    t75 = hasValidationErrors && /* @__PURE__ */ jsx("span", { "data-testid": "test-date-period-field-list-errors", className: "error", "data-state-skeletonize": skeletonize, "aria-describedby": String(label).concat("-errors"), children: errors?.map(_temp6) });
-    $[184] = errors;
-    $[185] = hasValidationErrors;
-    $[186] = label;
-    $[187] = skeletonize;
-    $[188] = t75;
+  let t57;
+  if ($[198] !== errors || $[199] !== hasValidationErrors || $[200] !== label || $[201] !== skeletonize) {
+    t57 = hasValidationErrors && /* @__PURE__ */ jsx("span", { "data-testid": "test-date-period-field-list-errors", className: "error", "data-state-skeletonize": skeletonize, "aria-describedby": String(label).concat("-errors"), children: errors?.map(_temp4) });
+    $[198] = errors;
+    $[199] = hasValidationErrors;
+    $[200] = label;
+    $[201] = skeletonize;
+    $[202] = t57;
   } else {
-    t75 = $[188];
+    t57 = $[202];
   }
-  let t76;
-  if ($[189] !== tooltip || $[190] !== tooltipPosition || $[191] !== tooltipWidth) {
-    t76 = /* @__PURE__ */ jsx(Tooltip, { targetRef: inputRootRef, text: tooltip, width: tooltipWidth, position: tooltipPosition });
-    $[189] = tooltip;
-    $[190] = tooltipPosition;
-    $[191] = tooltipWidth;
-    $[192] = t76;
+  let t58;
+  if ($[203] !== tooltip || $[204] !== tooltipPosition || $[205] !== tooltipWidth) {
+    t58 = /* @__PURE__ */ jsx(Tooltip, { targetRef: inputRootRef, text: tooltip, width: tooltipWidth, position: tooltipPosition });
+    $[203] = tooltip;
+    $[204] = tooltipPosition;
+    $[205] = tooltipWidth;
+    $[206] = t58;
   } else {
-    t76 = $[192];
+    t58 = $[206];
   }
   return /* @__PURE__ */ jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsx(DatePeriodFieldContext.Provider, { value: contextValues, children: /* @__PURE__ */ jsxs(Root, { ref: inputRootRef, "data-testid": "test-date-period-field-root", "data-state-error": hasValidationErrors, customClassWrapper, children: [
-      t54,
-      /* @__PURE__ */ jsxs(Container, { ref: dateContainerRef, "data-testid": "test-date-period-field-container", onKeyDown: handleOnKeyDown, skeletonize, customClassInputContainer, children: [
-        /* @__PURE__ */ jsx(Input, { ...t55, ref: t57, id: initialInputName, name: initialInputName, value: initialMaskedValue, disabled, readOnly, customClass, tabIndex: !readOnly && !skeletonize ? 0 : -1, placeholder, "aria-autocomplete": "list", "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": initialInputName, "aria-labelledby": initialInputName, "data-testid": "test-date-period-field-initial-input", "data-state-is-period-input": true, "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onPaste: handleOnPaste, onBeforeInput: handleOnBeforeInput, onBlur: t58, onFocus: t59, onKeyDown: t60 }),
-        t62,
-        t71,
-        t72
+      t36,
+      /* @__PURE__ */ jsxs(Container, { ref: dateContainerRef, "data-testid": "test-date-period-field-container", onKeyDown: handleKeyDownNavigation, skeletonize, customClassInputContainer, children: [
+        /* @__PURE__ */ jsx(Input, { ...t37, ref: t39, id: initialInputName, name: initialInputName, value: initialMaskedValue, disabled, readOnly, customClass, tabIndex: !readOnly && !skeletonize ? 0 : -1, placeholder: inputPlaceholder, "aria-autocomplete": "list", "aria-activedescendant": activeDescendant, "aria-expanded": calendarBoxOpen, "aria-controls": initialInputName, "aria-labelledby": initialInputName, "data-testid": "test-date-period-field-initial-input", "data-state-is-period-input": true, "data-state-error": hasValidationErrors, "data-state-read-only": readOnly, "data-state-text-align": textAlign, "data-state-undigitable": undigitable, "data-state-skeletonize": skeletonize, onPaste: handleOnPaste, onBeforeInput: handleOnBeforeInput, onBlur: t40, onFocus: t41, onKeyDown: t42 }),
+        t44,
+        t53,
+        t54
       ] }),
-      t73,
-      t74,
-      t75
+      t55,
+      t56,
+      t57
     ] }) }),
-    t76
+    t58
   ] });
 });
 InputBase.displayName = "DatePeriodFieldInputBase";
-function _temp(prevDisplayDate) {
-  return prevDisplayDate.clone().subtract(1, "month");
-}
-function _temp2(prevDisplayDate_0) {
-  return prevDisplayDate_0.clone().add(1, "month");
-}
-function _temp3() {
+function _temp() {
   return {
     inicial: null,
     final: null
   };
 }
-function _temp4(initialDate, finalDate) {
+function _temp2(initialDate, finalDate) {
   const inicial = initialDate?.isAfter(finalDate) ? finalDate : initialDate;
   const final = initialDate?.isAfter(finalDate) ? initialDate : finalDate;
   return {
@@ -992,10 +861,10 @@ function _temp4(initialDate, finalDate) {
     final
   };
 }
-function _temp5(event_8) {
-  event_8.preventDefault();
+function _temp3(event_5) {
+  event_5.preventDefault();
 }
-function _temp6(error, index) {
+function _temp4(error, index) {
   return /* @__PURE__ */ jsxs(React.Fragment, { children: [
     error,
     " "