@spscommerce/ds-react 5.4.0 → 5.4.1

package/lib/index.es.js

@@ -37,7 +37,7 @@ import * as ReactDOM from "react-dom";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
 import { useCollection } from "@react-stately/collections";
 import { PositioningService, Position as Position$1 } from "@spscommerce/positioning";
-import * as moment$7 from "moment-timezone";
+import * as moment$6 from "moment-timezone";
 import moment__default from "moment-timezone";
 import { colors } from "@spscommerce/ds-colors";
 function toVal(mix) {
@@ -15132,7 +15132,7 @@ const SpsContentRowExamples = {
     }
   }
 };
-const moment$6 = moment$7.default || moment$7;
+const moment$5 = moment$6.default || moment$6;
 function newWeekArray$1() {
   return new Array(7);
 }
@@ -15157,7 +15157,7 @@ function generateWeeks$1(date2) {
   return newWeeks;
 }
 function parse2(value) {
-  return moment$6(`${value} 00:00:00`);
+  return moment$5(`${value} 00:00:00`);
 }
 function weekOfMonth$1(date2) {
   return Math.floor((date2.clone().date(1).day() + date2.date() - 1) / 7);
@@ -15186,7 +15186,7 @@ function SpsDatepicker(props2) {
   const _a = props2, {
     className,
     disabled,
-    format = moment$6.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
+    format = moment$5.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
     maxDate,
     minDate,
     onChange,
@@ -15221,20 +15221,20 @@ function SpsDatepicker(props2) {
     isInitialValue: true,
     keyboardFocusDay: null,
     text: "",
-    minDateMoment: minDate ? moment$6(minDate) : {},
-    maxDateMoment: maxDate ? moment$6(maxDate) : {}
+    minDateMoment: minDate ? moment$5(minDate) : {},
+    maxDateMoment: maxDate ? moment$5(maxDate) : {}
   });
   function setCalendarView(displayMoment) {
     let theMoment = displayMoment;
     if (!displayMoment || !displayMoment.isValid()) {
-      if (moment$6.isMoment(state.currentValue) && state.currentValue.isValid()) {
+      if (moment$5.isMoment(state.currentValue) && state.currentValue.isValid()) {
         theMoment = state.currentValue.clone();
       } else if (minDate) {
         theMoment = state.minDateMoment.clone();
       } else if (maxDate) {
         theMoment = state.maxDateMoment.clone();
       } else {
-        theMoment = moment$6();
+        theMoment = moment$5();
       }
     }
     const newView = theMoment.set({
@@ -15262,7 +15262,7 @@ function SpsDatepicker(props2) {
   }
   React.useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
-    patchState({ weekdayNames: Object.freeze(moment$6.weekdaysShort()) });
+    patchState({ weekdayNames: Object.freeze(moment$5.weekdaysShort()) });
     setCalendarView(null);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -15280,7 +15280,7 @@ function SpsDatepicker(props2) {
     }
   }, [value]);
   React.useEffect(() => {
-    if (moment$6.isMoment(state.view)) {
+    if (moment$5.isMoment(state.view)) {
       patchState({ weeks: generateWeeks$1(state.view) });
     }
   }, [state.view]);
@@ -15291,7 +15291,7 @@ function SpsDatepicker(props2) {
     setCalendarView(state.view.add(1, "month"));
   }
   React.useEffect(() => {
-    if (moment$6.isMoment(state.keyboardFocusDay)) {
+    if (moment$5.isMoment(state.keyboardFocusDay)) {
       if (state.keyboardFocusDay.isBefore(state.view, "month")) {
         viewPreviousMonth();
       } else if (state.keyboardFocusDay.isAfter(state.view, "month")) {
@@ -15305,7 +15305,7 @@ function SpsDatepicker(props2) {
     }
   }, [state.isOpen]);
   React.useEffect(() => {
-    if (moment$6.isMoment(state.currentValue)) {
+    if (moment$5.isMoment(state.currentValue)) {
       setCalendarView(null);
     }
     if (onChange && typeof onChange === "function" && !state.isInitialValue) {
@@ -15341,7 +15341,7 @@ function SpsDatepicker(props2) {
       currentValue: null,
       isInitialValue: false
     });
-    setCalendarView(moment$6());
+    setCalendarView(moment$5());
     inputRef.current.value = "";
     show();
     inputRef.current.focus();
@@ -15350,17 +15350,17 @@ function SpsDatepicker(props2) {
     return date2 && (minDate && state.minDateMoment.isAfter(date2, "day")) || maxDate && state.maxDateMoment.isBefore(date2, "day");
   }
   function updateText(newValue) {
-    inputRef.current.value = moment$6.isMoment(newValue) ? newValue.format(format) : "";
+    inputRef.current.value = moment$5.isMoment(newValue) ? newValue.format(format) : "";
   }
   function selectDate(date2) {
     if (date2 && !dateIsDisabled(date2)) {
       let val;
-      if (state.currentValue && moment$6.isMoment(date2)) {
+      if (state.currentValue && moment$5.isMoment(date2)) {
         val = date2.clone();
-      } else if (state.currentValue && moment$6.isMoment(state.currentValue)) {
+      } else if (state.currentValue && moment$5.isMoment(state.currentValue)) {
         val = state.currentValue.clone().set(date2);
       } else {
-        val = moment$6(date2);
+        val = moment$5(date2);
       }
       updateText(val);
       patchState({
@@ -15373,10 +15373,10 @@ function SpsDatepicker(props2) {
     }
   }
   function dateIsSelected(date2) {
-    return date2 && moment$6.isMoment(state.currentValue) && state.currentValue.isValid() && state.currentValue.isSame(date2, "day");
+    return date2 && moment$5.isMoment(state.currentValue) && state.currentValue.isValid() && state.currentValue.isSame(date2, "day");
   }
   function dateIsFocused(date2) {
-    return date2 && moment$6.isMoment(state.keyboardFocusDay) && state.keyboardFocusDay.isSame(date2, "day");
+    return date2 && moment$5.isMoment(state.keyboardFocusDay) && state.keyboardFocusDay.isSame(date2, "day");
   }
   function onKeyDown(event) {
     switch (event.key) {
@@ -15384,7 +15384,7 @@ function SpsDatepicker(props2) {
       case "ArrowUp":
         if (state.keyboardFocusDay) {
           event.preventDefault();
-          const newFocusDay = weekOfMonth$1(state.keyboardFocusDay) === 0 ? null : moment$6.max(state.keyboardFocusDay.clone().subtract(1, "week"), state.keyboardFocusDay.date(1));
+          const newFocusDay = weekOfMonth$1(state.keyboardFocusDay) === 0 ? null : moment$5.max(state.keyboardFocusDay.clone().subtract(1, "week"), state.keyboardFocusDay.date(1));
           patchState({ keyboardFocusDay: newFocusDay });
           if (!newFocusDay) {
             inputRef.current.focus();
@@ -15397,10 +15397,10 @@ function SpsDatepicker(props2) {
         if (!state.isOpen) {
           show();
         }
-        if (moment$6.isMoment(state.keyboardFocusDay)) {
-          const newFocusDay = moment$6.min(state.keyboardFocusDay.clone().add(1, "week"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()));
+        if (moment$5.isMoment(state.keyboardFocusDay)) {
+          const newFocusDay = moment$5.min(state.keyboardFocusDay.clone().add(1, "week"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()));
           patchState({ keyboardFocusDay: newFocusDay });
-        } else if (moment$6.isMoment(state.view)) {
+        } else if (moment$5.isMoment(state.view)) {
           patchState({ keyboardFocusDay: state.view.clone() });
         }
         break;
@@ -15411,7 +15411,7 @@ function SpsDatepicker(props2) {
           let newFocusDay;
           if (state.keyboardFocusDay.day() === 0 || state.keyboardFocusDay.date() === 1) {
             const week = weekOfMonth$1(state.keyboardFocusDay);
-            newFocusDay = week ? moment$6.min(state.keyboardFocusDay.clone().add(week, "weeks"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth())) : state.keyboardFocusDay.subtract(1, "month").date(1).day(6);
+            newFocusDay = week ? moment$5.min(state.keyboardFocusDay.clone().add(week, "weeks"), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth())) : state.keyboardFocusDay.subtract(1, "month").date(1).day(6);
           } else {
             newFocusDay = state.keyboardFocusDay.clone().subtract(1, "day");
           }
@@ -15425,7 +15425,7 @@ function SpsDatepicker(props2) {
           let newFocusDay;
           if (state.keyboardFocusDay.day() === 6 || state.keyboardFocusDay.date() === state.keyboardFocusDay.daysInMonth()) {
             const week = weekOfMonth$1(state.keyboardFocusDay);
-            newFocusDay = week ? moment$6.min(state.keyboardFocusDay.clone().add(week, "weeks").day(0), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()).day(0)) : state.keyboardFocusDay.add(1, "month").date(1);
+            newFocusDay = week ? moment$5.min(state.keyboardFocusDay.clone().add(week, "weeks").day(0), state.keyboardFocusDay.date(state.keyboardFocusDay.daysInMonth()).day(0)) : state.keyboardFocusDay.add(1, "month").date(1);
           } else {
             newFocusDay = state.keyboardFocusDay.clone().add(1, "day");
           }
@@ -15508,9 +15508,9 @@ function SpsDatepicker(props2) {
     className: "sps-datepicker__calendar-head-label"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "sps-datepicker__calendar-head-label-month"
-  }, moment$6.isMoment(state.view) ? state.view.format("MMMM") : ""), /* @__PURE__ */ React.createElement("span", {
+  }, moment$5.isMoment(state.view) ? state.view.format("MMMM") : ""), /* @__PURE__ */ React.createElement("span", {
     className: "sps-datepicker__calendar-head-label-year"
-  }, moment$6.isMoment(state.view) ? state.view.year() : "")), /* @__PURE__ */ React.createElement("a", {
+  }, moment$5.isMoment(state.view) ? state.view.year() : "")), /* @__PURE__ */ React.createElement("a", {
     className: "sps-datepicker__button sps-datepicker__button-next-month",
     onClick: viewNextMonth
   }, /* @__PURE__ */ React.createElement("i", {
@@ -15664,7 +15664,7 @@ const propTypes$1m = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
 function weekOfMonth(mmt) {
   return Math.floor((mmt.clone().date(1).day() + mmt.date() - 1) / 7);
 }
-const moment$5 = moment$7.default || moment$7;
+const moment$4 = moment$6.default || moment$6;
 const defaultPresets = [
   { days: 1 },
   { days: 7 },
@@ -15672,7 +15672,7 @@ const defaultPresets = [
   { days: 60 },
   { days: 90 },
   { years: 1 }
-].map(moment$5.duration);
+].map(moment$4.duration);
 const _positioningService = new PositioningService();
 let idNum = 0;
 function SpsDateRangePicker(props2) {
@@ -15680,7 +15680,7 @@ function SpsDateRangePicker(props2) {
     className,
     placeholder = "MM/DD/YYYY - MM/DD/YYYY",
     disabled,
-    format = moment$5.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
+    format = moment$4.localeData().longDateFormat("MM/DD/YYYY") || "MM/DD/YYYY",
     maxDate,
     minDate,
     availablePresets,
@@ -15712,14 +15712,14 @@ function SpsDateRangePicker(props2) {
   const [mouseoverRange, setMouseoverRange] = React.useState(null);
   const [selectMode, setSelectMode] = React.useState(SelectMode.START);
   const [keyboardFocusDay, setKeyboardFocusDay] = React.useState();
-  const [minDateMoment, setMinDateMoment] = React.useState(minDate ? moment$5(minDate) : {});
-  const [maxDateMoment, setMaxDateMoment] = React.useState(maxDate ? moment$5(maxDate) : {});
+  const [minDateMoment, setMinDateMoment] = React.useState(minDate ? moment$4(minDate) : {});
+  const [maxDateMoment, setMaxDateMoment] = React.useState(maxDate ? moment$4(maxDate) : {});
   const [isInitialValue, setIsInitialValue] = React.useState(true);
   const [months, setMonths] = React.useState(null);
   const inputElement = React.useRef(null);
   const calendar = React.useRef(null);
   const dateRange2 = React.useRef(null);
-  const weekDayNames = Object.freeze(moment$5.weekdaysShort());
+  const weekDayNames = Object.freeze(moment$4.weekdaysShort());
   let leftAligned = false;
   const _idNum = idNum++;
   const textRef = React.useRef();
@@ -15798,7 +15798,7 @@ function SpsDateRangePicker(props2) {
     } else if (maxDate) {
       displayMoment = maxDateMoment.clone();
     } else {
-      displayMoment = moment$5();
+      displayMoment = moment$4();
     }
     displayMoment.startOf("month");
     const viewStart = displayMoment.clone().subtract(1, "month");
@@ -15818,7 +15818,7 @@ function SpsDateRangePicker(props2) {
   const updatePresets = () => {
     if (availablePresets) {
       const psts = availablePresets;
-      const today = moment$5();
+      const today = moment$4();
       const todayIsAllowed = !dateIsDisabled(today);
       const t2 = psts.filter((pst) => todayIsAllowed && !dateIsDisabled(today.subtract(pst)));
       setPreset(t2);
@@ -15837,7 +15837,7 @@ function SpsDateRangePicker(props2) {
   }, []);
   const matchPreset = (newPreset) => {
     if (presets && newPreset) {
-      const match2 = presets.find((pst) => pst.asMilliseconds() === moment$5.duration(newPreset).asMilliseconds());
+      const match2 = presets.find((pst) => pst.asMilliseconds() === moment$4.duration(newPreset).asMilliseconds());
       return match2;
     }
     return void 0;
@@ -15847,7 +15847,7 @@ function SpsDateRangePicker(props2) {
     let newValue;
     if (matchedPreset) {
       setSelectedPreset(matchedPreset);
-      const today = moment$5();
+      const today = moment$4();
       newValue = {
         preset: matchedPreset,
         start: today.clone().subtract(matchedPreset).add(1, "day").startOf("day"),
@@ -15879,13 +15879,13 @@ function SpsDateRangePicker(props2) {
     }
   }, [currentValue]);
   React.useEffect(() => {
-    setMinDateMoment(moment$5(minDate).add(1, "day"));
+    setMinDateMoment(moment$4(minDate).add(1, "day"));
   }, [minDate]);
   React.useEffect(() => {
     updatePresets();
   }, [minDate, maxDate]);
   React.useEffect(() => {
-    setMaxDateMoment(moment$5(maxDate).add(1, "day"));
+    setMaxDateMoment(moment$4(maxDate).add(1, "day"));
   }, [maxDate]);
   React.useEffect(() => {
     setTimeout(() => {
@@ -15893,8 +15893,8 @@ function SpsDateRangePicker(props2) {
         updateFromPreset(selectedPreset);
       }
       if (preset2) {
-        setSelectedPreset(moment$5.duration(preset2));
-        updateFromPreset(moment$5.duration(preset2));
+        setSelectedPreset(moment$4.duration(preset2));
+        updateFromPreset(moment$4.duration(preset2));
       }
     }, 0);
   }, [presets]);
@@ -15932,9 +15932,9 @@ function SpsDateRangePicker(props2) {
       } else {
         [startStr, endStr] = split;
         const startDateStr = startStr ? startStr.trim().split("/") : [];
-        start = moment$5({ year: parseInt(startDateStr[2], 10), month: parseInt(startDateStr[0], 10) - 1, day: parseInt(startDateStr[1], 10) });
+        start = moment$4({ year: parseInt(startDateStr[2], 10), month: parseInt(startDateStr[0], 10) - 1, day: parseInt(startDateStr[1], 10) });
         const endDateStr = endStr ? endStr.trim().split("/") : [];
-        end2 = moment$5({ year: parseInt(endDateStr[2], 10), month: parseInt(endDateStr[0], 10) - 1, day: parseInt(endDateStr[1], 10) });
+        end2 = moment$4({ year: parseInt(endDateStr[2], 10), month: parseInt(endDateStr[0], 10) - 1, day: parseInt(endDateStr[1], 10) });
       }
       return {
         start,
@@ -15958,7 +15958,7 @@ function SpsDateRangePicker(props2) {
     return `Last ${pst.humanize().replace("a ", "")}`;
   };
   const dateIsSelected = (date2) => date2 && currentValue && (currentValue.start && currentValue.start.isSame(date2, "day") || currentValue.end && currentValue.end.isSame(date2, "day") || currentValue.start && currentValue.end && currentValue.start.isBefore(date2, "day") && currentValue.end.isAfter(date2, "day"));
-  const dateIsFocused = (date2) => date2 && keyboardFocusDay && moment$5.isMoment(keyboardFocusDay) && keyboardFocusDay.isSame(date2, "day");
+  const dateIsFocused = (date2) => date2 && keyboardFocusDay && moment$4.isMoment(keyboardFocusDay) && keyboardFocusDay.isSame(date2, "day");
   const dateIsSelectionStart = (date2) => date2 && currentValue && currentValue.start && currentValue.start.isSame(date2, "day") && currentValue.end && !currentValue.end.isSame(date2, "day");
   const dateIsSelectionMiddle = (date2) => date2 && currentValue && currentValue.start && currentValue.start.isBefore(date2, "day") && currentValue.end && currentValue.end.isAfter(date2, "day");
   const dateIsSelectionEnd = (date2) => date2 && currentValue && currentValue.start && !currentValue.start.isSame(date2, "day") && currentValue.end && currentValue.end.isSame(date2, "day");
@@ -16007,7 +16007,7 @@ function SpsDateRangePicker(props2) {
     if (event && event.target) {
       try {
         const date2 = JSON.parse(event.target.getAttribute("data-date"));
-        selectDate(moment$5(date2));
+        selectDate(moment$4(date2));
       } catch (ignore) {
       }
     }
@@ -16027,7 +16027,7 @@ function SpsDateRangePicker(props2) {
   const onCalendarMouseover = (event) => {
     try {
       const date2 = JSON.parse(event.target.getAttribute("data-date"));
-      updateMouseoverRange(moment$5(date2));
+      updateMouseoverRange(moment$4(date2));
     } catch (ignore) {
     }
   };
@@ -16100,7 +16100,7 @@ function SpsDateRangePicker(props2) {
           open();
         }
         if (keyboardFocusDay) {
-          newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(1, "week"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+          newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(1, "week"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
           setKeyboardFocusDay(newKeyboardFocusDay);
         } else {
           focusCalendar();
@@ -16116,7 +16116,7 @@ function SpsDateRangePicker(props2) {
             setKeyboardFocusDay(null);
             inputElement.current.focus();
           } else {
-            newKeyboardFocusDay = moment$5.max(keyboardFocusDay.clone().subtract(1, "week"), keyboardFocusDay.date(1));
+            newKeyboardFocusDay = moment$4.max(keyboardFocusDay.clone().subtract(1, "week"), keyboardFocusDay.date(1));
             setKeyboardFocusDay(newKeyboardFocusDay);
           }
         }
@@ -16130,7 +16130,7 @@ function SpsDateRangePicker(props2) {
             const week = weekOfMonth(keyboardFocusDay);
             keyboardFocusDay.subtract(1, "month").date(1).day(6);
             if (week) {
-              newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(week, "weeks"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
+              newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(week, "weeks"), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()));
               setKeyboardFocusDay(newKeyboardFocusDay);
             }
           } else {
@@ -16148,7 +16148,7 @@ function SpsDateRangePicker(props2) {
             const week = weekOfMonth(keyboardFocusDay);
             keyboardFocusDay.add(1, "month").date(1);
             if (week) {
-              newKeyboardFocusDay = moment$5.min(keyboardFocusDay.clone().add(week, "weeks").day(0), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()).day(0));
+              newKeyboardFocusDay = moment$4.min(keyboardFocusDay.clone().add(week, "weeks").day(0), keyboardFocusDay.date(keyboardFocusDay.daysInMonth()).day(0));
               setKeyboardFocusDay(newKeyboardFocusDay);
             }
           } else {
@@ -16165,7 +16165,7 @@ function SpsDateRangePicker(props2) {
         break;
       case "Esc":
       case "Escape":
-        if (keyboardFocusDay && moment$5.isMoment(keyboardFocusDay)) {
+        if (keyboardFocusDay && moment$4.isMoment(keyboardFocusDay)) {
           setKeyboardFocusDay(null);
           inputElement.current.focus();
         } else {
@@ -16176,7 +16176,7 @@ function SpsDateRangePicker(props2) {
         }
         break;
     }
-    if (keyboardFocusDay && moment$5.isMoment(keyboardFocusDay)) {
+    if (keyboardFocusDay && moment$4.isMoment(keyboardFocusDay)) {
       if (keyboardFocusDay.isBefore(view.start, "month")) {
         viewPreviousMonth();
       } else if (keyboardFocusDay.isAfter(view.end, "month")) {
@@ -16429,7 +16429,7 @@ const SpsDateRangePickerExamples = {
                         ])
                         const { formValue, formMeta, updateForm } = useSpsForm(
                           {
-                            dateRange: presets.current[0],
+                            dateRange: SimpleDateUtils.createRangeFromPreset(presets.current[0]),
                           },
                           {
                             dateRange: [SpsValidators.dateRange],
@@ -16454,7 +16454,7 @@ const SpsDateRangePickerExamples = {
     }
   }
 };
-var moment$4 = { exports: {} };
+var moment$3 = { exports: {} };
 (function(module, exports) {
   (function(global2, factory) {
     module.exports = factory();
@@ -20144,10 +20144,10 @@ var moment$4 = { exports: {} };
     };
     return hooks;
   });
-})(moment$4);
+})(moment$3);
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enAu = moment2.defineLocale("en-au", {
@@ -20203,7 +20203,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enCa = moment2.defineLocale("en-ca", {
@@ -20255,7 +20255,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enIe = moment2.defineLocale("en-ie", {
@@ -20311,7 +20311,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var enGb = moment2.defineLocale("en-gb", {
@@ -20367,7 +20367,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var frCa = moment2.defineLocale("fr-ca", {
@@ -20431,7 +20431,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var monthsStrictRegex = /^(janvier|février|mars|avril|mai|juin|juillet|août|septembre|octobre|novembre|décembre)/i, monthsShortStrictRegex = /(janv\.?|févr\.?|mars|avr\.?|mai|juin|juil\.?|août|sept\.?|oct\.?|nov\.?|déc\.?)/i, monthsRegex = /(janv\.?|févr\.?|mars|avr\.?|mai|juin|juil\.?|août|sept\.?|oct\.?|nov\.?|déc\.?|janvier|février|mars|avril|mai|juin|juillet|août|septembre|octobre|novembre|décembre)/i, monthsParse = [
@@ -20522,7 +20522,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var monthsShortDot = "ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.".split("_"), monthsShort = "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"), monthsParse = [
@@ -20618,7 +20618,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var zhCn = moment2.defineLocale("zh-cn", {
@@ -20732,7 +20732,7 @@ var moment$4 = { exports: {} };
 })();
 (function(module, exports) {
   (function(global2, factory) {
-    typeof commonjsRequire === "function" ? factory(moment$4.exports) : factory(global2.moment);
+    typeof commonjsRequire === "function" ? factory(moment$3.exports) : factory(global2.moment);
   })(commonjsGlobal, function(moment2) {
     //! moment.js locale configuration
     var zhTw = moment2.defineLocale("zh-tw", {
@@ -22669,7 +22669,7 @@ function isPlainObject(value) {
 var lodash_isplainobject = isPlainObject;
 const OnBlurErrorKeys = new Set();
 const AsTypingErrorKeys = new Set();
-const moment$3 = moment$7.default || moment$7;
+const moment$2 = moment$6.default || moment$6;
 const FORMAT = "MM/DD/YYYY";
 const FORMAT_PATTERN = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
 const SYMBOL_DATE_PARSE_ERROR = Symbol("Date Parse Error");
@@ -22725,7 +22725,7 @@ const SimpleDateUtils = Object.freeze({
     if (!date2) {
       return null;
     }
-    return moment$3(__spreadProps(__spreadValues({}, date2), {
+    return moment$2(__spreadProps(__spreadValues({}, date2), {
       month: date2.month - 1
     }));
   },
@@ -22786,6 +22786,14 @@ const SimpleDateUtils = Object.freeze({
       month: date2.month + 1 > 12 ? 1 : date2.month + 1,
       date: date2.date
     });
+  },
+  createRangeFromPreset(preset2) {
+    if (typeof preset2.definition === "function") {
+      return preset2.definition();
+    }
+    const end2 = moment$2();
+    const start = end2.clone().subtract(moment$2.duration(preset2.definition));
+    return [SimpleDateUtils.createFrom(start), SimpleDateUtils.createFrom(end2)];
   }
 });
 const date = function dateValidator(value) {
@@ -36459,12 +36467,12 @@ const MANIFEST = {
     examples: SpsZeroStateExamples
   }
 };
-const moment$2 = moment$7.default || moment$7;
+const moment$1 = moment$6.default || moment$6;
 function newWeekArray() {
   return new Array(7).fill(null);
 }
 function generateWeeks(date2) {
-  const dateAsMoment = moment$2({
+  const dateAsMoment = moment$1({
     year: date2.year,
     month: date2.month - 1,
     date: 1
@@ -36502,7 +36510,7 @@ function useMoment(date2) {
   React.useEffect(() => setMomentValue(SimpleDateUtils.toMoment(date2)), [date2]);
   return momentValue;
 }
-const moment$1 = moment$7.default || moment$7;
+const moment = moment$6.default || moment$6;
 const propTypes$c = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   maxDate: impl(),
   minDate: impl(),
@@ -36609,7 +36617,7 @@ function SpsDatepickerCalendar(props2) {
     className: `${CSS_ELEMENT$1}-body`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-datepicker__calendar-row"
-  }, moment$1.weekdaysShort().map((dayName) => /* @__PURE__ */ React.createElement("div", {
+  }, moment.weekdaysShort().map((dayName) => /* @__PURE__ */ React.createElement("div", {
     key: dayName,
     className: "sps-datepicker__calendar-header-cell"
   }, dayName))), cal.map((week, i2) => /* @__PURE__ */ React.createElement("div", {
@@ -36777,7 +36785,6 @@ Object.assign(SpsDatepickerV2, {
   propTypes: propTypes$a,
   displayName: "SpsDatepickerV2"
 });
-const moment = moment$7.default || moment$7;
 const propsDoc$9 = {
   disabled: "boolean",
   formMeta: "SpsFormFieldMeta<SimpleDateRange | DatePreset>",
@@ -36834,6 +36841,7 @@ function SpsDateRangePickerV2(_Y) {
   const textInput = React.useRef();
   const popupRef = React.useRef();
   const [stringValue, setStringValue] = React.useState(Array.isArray(value) ? SimpleDateUtils.toStringRange(value) : "");
+  const [selectedPreset, setSelectedPreset] = React.useState(null);
   const [displayRange, setDisplayRange] = React.useState();
   const {
     showPopup,
@@ -36864,6 +36872,7 @@ function SpsDateRangePickerV2(_Y) {
     updateValue(newValue);
     setStringValue(SimpleDateUtils.toStringRange(newValue));
     setDisplayRange(null);
+    setSelectedPreset(null);
   }
   function handleTextInputChange(event) {
     setStringValue(event.target.value);
@@ -36875,6 +36884,7 @@ function SpsDateRangePickerV2(_Y) {
     setStringValue("");
     updateValue();
     setDisplayRange(null);
+    setSelectedPreset(null);
   }
   function handleTextInputKeyDown(event) {
     switch (event.key) {
@@ -36889,28 +36899,39 @@ function SpsDateRangePickerV2(_Y) {
     }
   }
   function selectPreset(newPreset) {
+    if (!newPreset) {
+      setSelectedPreset(null);
+      updateValue(null);
+      return;
+    }
     setStringValue("");
-    updateValue(newPreset);
+    setSelectedPreset(newPreset);
+    updateValue(SimpleDateUtils.createRangeFromPreset(newPreset));
   }
+  React.useEffect(() => {
+    if (!value) {
+      return;
+    }
+    if (presets !== DEFAULT_PRESETS && Array.isArray(value)) {
+      const preselectedRange = SimpleDateUtils.toStringRange(value);
+      const preselectedPreset = presets.find((preset2) => preselectedRange === SimpleDateUtils.toStringRange(SimpleDateUtils.createRangeFromPreset(preset2)));
+      if (preselectedPreset) {
+        selectPreset(preselectedPreset);
+      }
+    }
+  }, []);
   React.useEffect(() => {
     if (!value) {
       clear();
-    } else if (Array.isArray(value)) {
+    } else if (Array.isArray(value) && !selectedPreset) {
       if (value.every((v2) => SimpleDateUtils.isValid(v2))) {
         setStringValue(SimpleDateUtils.toStringRange(value));
       }
       setDisplayRange(null);
-    } else if (typeof value.definition === "function") {
-      setDisplayRange(value.definition());
-    } else {
-      const end2 = moment();
-      const start = end2.clone().subtract(moment.duration(value.definition));
-      setDisplayRange([
-        SimpleDateUtils.createFrom(start),
-        SimpleDateUtils.createFrom(end2)
-      ]);
+    } else if (Array.isArray(value) && selectedPreset) {
+      setStringValue("");
     }
-  }, [value]);
+  }, [value, selectedPreset]);
   function getPresetText(preset2) {
     return preset2 && /^design-system:/.test(preset2.label) ? t2(preset2.label) : preset2.label;
   }
@@ -36926,16 +36947,16 @@ function SpsDateRangePickerV2(_Y) {
     className: clsx("sps-form-control", disabled && "disabled")
   }, /* @__PURE__ */ React.createElement("i", {
     className: clsx("sps-text-input__icon", "sps-icon", "sps-icon-calendar")
-  }), value && !Array.isArray(value) && /* @__PURE__ */ React.createElement("div", {
+  }), selectedPreset && /* @__PURE__ */ React.createElement("div", {
     className: "sps-datepicker__selected-preset"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "sps-tag sps-tag--info"
-  }, getPresetText(value))), /* @__PURE__ */ React.createElement("input", __spreadValues({
+  }, getPresetText(selectedPreset))), /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "text",
     ref: textInput,
     className: "sps-text-input__input",
     id: controlId,
-    placeholder: !value || Array.isArray(value) ? FORMAT : void 0,
+    placeholder: !stringValue && !selectedPreset ? FORMAT : void 0,
     onChange: handleTextInputChange,
     onClick: doShowPopup,
     onFocus: doShowPopup,
@@ -36959,7 +36980,7 @@ function SpsDateRangePickerV2(_Y) {
     type: "radio",
     id: `sps-date-range-picker-${wrapperId}__range-custom`,
     className: "sps-custom-control__input",
-    checked: !value || Array.isArray(value),
+    checked: !selectedPreset,
     name: `sps-date-range-picker-${wrapperId}__range`,
     onChange: () => selectPreset(null)
   }), /* @__PURE__ */ React.createElement("label", {
@@ -36973,7 +36994,7 @@ function SpsDateRangePickerV2(_Y) {
     id: `sps-date-range-picker-${wrapperId}__range-${i2}`,
     name: `sps-date-range-picker-${wrapperId}__range`,
     onChange: () => selectPreset(preset2),
-    checked: value === preset2,
+    checked: (selectedPreset == null ? void 0 : selectedPreset.definition) ? selectedPreset.definition === preset2.definition : false,
     className: "sps-custom-control__input"
   }), /* @__PURE__ */ React.createElement("label", {
     className: "sps-custom-control__label",