@opengeoweb/time-slider 19.6.1 → 20.0.0

package/dist/index.esm.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
+import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, InputAdornment, RadioGroup, FormControlLabel, Radio, Divider, FormHelperText, FormControl, TextField, Select, Popper, Paper, Stack, ClickAwayListener } from '@mui/material';
 import React, { useState, useRef, useEffect, useCallback, useContext, useMemo, createElement } from 'react';
-import { dateUtils, isTargetInteractiveInput, isDialogFocused, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
+import { dateUtils, isTargetInteractiveInput, isDialogFocused, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, NumberWithUnitField, DateTimePicker, renderCounter, pickerDateToUTC, CustomToggleButton } from '@opengeoweb/shared';
 import { debounce, throttle } from 'lodash';
-import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, FastForward, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
+import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, Clock, CalendarToday, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, FastForward, Options, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
-import { Box as Box$1 } from '@mui/system';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Box as Box$1 } from '@mui/system';
 import { PickerDay } from '@mui/x-date-pickers/PickerDay';
 
 var en = {
@@ -61,7 +61,37 @@ var en = {
 	"timeslider-span": "Span",
 	"timeslider-marker": "Marker",
 	"timeslider-marker-placement": "Marker placement",
-	"timeslider-marker-label": "Select date and time"
+	"timeslider-marker-label": "Select date and time",
+	"timeslider-animation-length": "Animation length",
+	"timeslider-animation-length-auto": "Auto",
+	"timeslider-animation-length-now": "Now −/+",
+	"timeslider-animation-length-recurring-period": "Recurring period −/+",
+	"timeslider-animation-length-reference-time": "Reference time −/+",
+	"timeslider-reference-time": "Reference time",
+	"timeslider-animation-length-exact": "Exact",
+	"timeslider-anchor-time": "Anchor Time",
+	"timeslider-auto-animation-length": "Auto animation length",
+	"timeslider-recurring-period": "Recurring period",
+	"timeslider-date": "Date",
+	"timeslider-today": "Today",
+	"timeslider-time": "Time",
+	"timeslider-start-time": "Start time",
+	"timeslider-end-time": "End time",
+	"timeslider-unit-years": "years",
+	"timeslider-unit-months": "months",
+	"timeslider-unit-weeks": "weeks",
+	"timeslider-unit-days": "days",
+	"timeslider-unit-hours": "hours",
+	"timeslider-unit-minutes": "minutes",
+	"timeslider-unit-short-years": "yr",
+	"timeslider-unit-short-months": "mo",
+	"timeslider-unit-short-weeks": "w",
+	"timeslider-unit-short-days": "d",
+	"timeslider-unit-short-hours": "h",
+	"timeslider-unit-short-minutes": "m",
+	"timeslider-start-before-end": "Start time must be before end time",
+	"timeslider-animation-too-many-steps": "Reduce the animation length or increase the time step",
+	"timeslider-start-and-end-time": "Start and end time"
 };
 var fi = {
 	"timeslider-auto": "Auto",
@@ -111,7 +141,36 @@ var fi = {
 	"timeslider-span": "missing-translation",
 	"timeslider-marker": "Aikamerkki",
 	"timeslider-marker-placement": "Aikamerkin siirto",
-	"timeslider-marker-label": "Valitse päivämäärä ja kellonaika"
+	"timeslider-marker-label": "Valitse päivämäärä ja kellonaika",
+	"timeslider-animation-length": "Animaation pituus",
+	"timeslider-animation-length-auto": "Auto",
+	"timeslider-animation-length-now": "Nyt −/+",
+	"timeslider-animation-length-recurring-period": "Toistuva jakso −/+",
+	"timeslider-animation-length-reference-time": "Referenssiaika −/+",
+	"timeslider-reference-time": "Referenssiaika",
+	"timeslider-animation-length-exact": "Tarkka",
+	"timeslider-anchor-time": "Ankkuriaika",
+	"timeslider-auto-animation-length": "Automaattinen animaation pituus",
+	"timeslider-recurring-period": "Toistuva jakso",
+	"timeslider-date": "Päivämäärä",
+	"timeslider-today": "Tänään",
+	"timeslider-time": "Aika",
+	"timeslider-start-time": "Alkuaika",
+	"timeslider-end-time": "Loppuaika",
+	"timeslider-unit-years": "vuotta",
+	"timeslider-unit-months": "kuukautta",
+	"timeslider-unit-weeks": "viikkoa",
+	"timeslider-unit-days": "päivää",
+	"timeslider-unit-hours": "tuntia",
+	"timeslider-unit-minutes": "minuuttia",
+	"timeslider-unit-short-years": "v",
+	"timeslider-unit-short-months": "kk",
+	"timeslider-unit-short-weeks": "vk",
+	"timeslider-unit-short-days": "pv",
+	"timeslider-unit-short-hours": "t",
+	"timeslider-unit-short-minutes": "min",
+	"timeslider-start-before-end": "Alkuajan on oltava ennen loppuaikaa",
+	"timeslider-animation-too-many-steps": "Pienennä animaation pituutta tai kasvata aika-askelta"
 };
 var no = {
 	"timeslider-auto": "Auto",
@@ -161,7 +220,36 @@ var no = {
 	"timeslider-span": "Periode",
 	"timeslider-marker": "missing translation",
 	"timeslider-marker-placement": "missing translation",
-	"timeslider-marker-label": "missing translation"
+	"timeslider-marker-label": "missing translation",
+	"timeslider-animation-length": "Animasjonslengde",
+	"timeslider-animation-length-auto": "Auto",
+	"timeslider-animation-length-now": "Nå −/+",
+	"timeslider-animation-length-recurring-period": "Gjentakende periode −/+",
+	"timeslider-animation-length-reference-time": "Referansetid −/+",
+	"timeslider-reference-time": "Referansetid",
+	"timeslider-animation-length-exact": "Eksakt",
+	"timeslider-anchor-time": "Ankertid",
+	"timeslider-auto-animation-length": "Automatisk animasjonslengde",
+	"timeslider-recurring-period": "Gjentakende periode",
+	"timeslider-date": "Dato",
+	"timeslider-today": "I dag",
+	"timeslider-time": "Tid",
+	"timeslider-start-time": "Starttid",
+	"timeslider-end-time": "Slutttid",
+	"timeslider-unit-years": "år",
+	"timeslider-unit-months": "måneder",
+	"timeslider-unit-weeks": "uker",
+	"timeslider-unit-days": "dager",
+	"timeslider-unit-hours": "timer",
+	"timeslider-unit-minutes": "minutter",
+	"timeslider-unit-short-years": "år",
+	"timeslider-unit-short-months": "mnd",
+	"timeslider-unit-short-weeks": "u",
+	"timeslider-unit-short-days": "d",
+	"timeslider-unit-short-hours": "t",
+	"timeslider-unit-short-minutes": "m",
+	"timeslider-start-before-end": "Starttid må være før slutttid",
+	"timeslider-animation-too-many-steps": "Reduser animasjonslengden eller øk tidssteget"
 };
 var nl = {
 	"timeslider-auto": "Auto",
@@ -211,7 +299,37 @@ var nl = {
 	"timeslider-span": "Tijdsperiode",
 	"timeslider-marker": "Kies tijdstip",
 	"timeslider-marker-placement": "Tijd kiezen",
-	"timeslider-marker-label": "Selecteer datum en tijd"
+	"timeslider-marker-label": "Selecteer datum en tijd",
+	"timeslider-animation-length": "Animatielengte",
+	"timeslider-animation-length-auto": "Auto",
+	"timeslider-animation-length-now": "Nu −/+",
+	"timeslider-animation-length-recurring-period": "Terugkerende periode −/+",
+	"timeslider-animation-length-reference-time": "Referentietijd −/+",
+	"timeslider-reference-time": "Referentietijd",
+	"timeslider-animation-length-exact": "Exact",
+	"timeslider-anchor-time": "Ankertijd",
+	"timeslider-auto-animation-length": "Automatische animatielengte",
+	"timeslider-recurring-period": "Terugkerende periode",
+	"timeslider-date": "Datum",
+	"timeslider-today": "Vandaag",
+	"timeslider-time": "Tijd",
+	"timeslider-start-time": "Starttijd",
+	"timeslider-end-time": "Eindtijd",
+	"timeslider-unit-years": "jaren",
+	"timeslider-unit-months": "maanden",
+	"timeslider-unit-weeks": "weken",
+	"timeslider-unit-days": "dagen",
+	"timeslider-unit-hours": "uren",
+	"timeslider-unit-minutes": "minuten",
+	"timeslider-unit-short-years": "jr",
+	"timeslider-unit-short-months": "mnd",
+	"timeslider-unit-short-weeks": "w",
+	"timeslider-unit-short-days": "d",
+	"timeslider-unit-short-hours": "u",
+	"timeslider-unit-short-minutes": "m",
+	"timeslider-start-before-end": "Starttijd moet voor eindtijd liggen",
+	"timeslider-animation-too-many-steps": "Verklein de animatielengte of vergroot de tijdstap",
+	"timeslider-start-and-end-time": "Start- en eindtijd"
 };
 var timesliderTranslations = {
 	en: en,
@@ -2340,6 +2458,932 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
   });
 };
 
+var _modeTranslationKey;
+var AnimationLengthMode;
+(function (AnimationLengthMode) {
+  AnimationLengthMode["Auto"] = "auto";
+  AnimationLengthMode["Now"] = "now";
+  AnimationLengthMode["RecurringPeriod"] = "recurringPeriod";
+  AnimationLengthMode["ReferenceTime"] = "referenceTime";
+  AnimationLengthMode["Exact"] = "exact";
+})(AnimationLengthMode || (AnimationLengthMode = {}));
+var timeUnits = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'];
+var defaultStartOffset = {
+  value: 0,
+  unit: 'hours'
+};
+var defaultEndOffset = {
+  value: 2,
+  unit: 'hours'
+};
+var defaultOffsetSelections = {
+  startOffset: defaultStartOffset,
+  endOffset: defaultEndOffset
+};
+var unitTranslationKey = {
+  years: 'timeslider-unit-years',
+  months: 'timeslider-unit-months',
+  weeks: 'timeslider-unit-weeks',
+  days: 'timeslider-unit-days',
+  hours: 'timeslider-unit-hours',
+  minutes: 'timeslider-unit-minutes'
+};
+var shortUnitTranslationKey = {
+  years: 'timeslider-unit-short-years',
+  months: 'timeslider-unit-short-months',
+  weeks: 'timeslider-unit-short-weeks',
+  days: 'timeslider-unit-short-days',
+  hours: 'timeslider-unit-short-hours',
+  minutes: 'timeslider-unit-short-minutes'
+};
+var modeTranslationKey = (_modeTranslationKey = {}, _modeTranslationKey[AnimationLengthMode.Auto] = 'timeslider-animation-length-auto', _modeTranslationKey[AnimationLengthMode.Now] = 'timeslider-animation-length-now', _modeTranslationKey[AnimationLengthMode.RecurringPeriod] = 'timeslider-animation-length-recurring-period', _modeTranslationKey[AnimationLengthMode.ReferenceTime] = 'timeslider-animation-length-reference-time', _modeTranslationKey[AnimationLengthMode.Exact] = 'timeslider-animation-length-exact', _modeTranslationKey);
+var offsetToDuration = function offsetToDuration(_ref) {
+  var _ref2;
+  var value = _ref.value,
+    unit = _ref.unit;
+  return _ref2 = {}, _ref2[unit] = value, _ref2;
+};
+var toAnimationTime = function toAnimationTime(date) {
+  return dateUtils.dateToString(date, dateUtils.DATE_FORMAT_UTC);
+};
+/* The clock in the menu offers minutes in these increments, so an anchor must land on one. */
+var ANCHOR_MINUTE_STEP = 5;
+var padded = function padded(value) {
+  return String(value).padStart(2, '0');
+};
+/**
+ * Reads the UTC fields directly: `dateUtils.dateToString` formats a local twin of the
+ * date, which a DST gap shifts by an hour.
+ */
+var toAnchorTime = function toAnchorTime(date) {
+  var minutes = date.getUTCMinutes();
+  return padded(date.getUTCHours()) + ":" + padded(minutes - minutes % ANCHOR_MINUTE_STEP);
+};
+/* Modes that count their offsets from an anchor instant rather than a stored range. */
+var anchoredModes = [AnimationLengthMode.Now, AnimationLengthMode.RecurringPeriod, AnimationLengthMode.ReferenceTime];
+var isAnchoredMode = function isAnchoredMode(mode) {
+  return !!mode && anchoredModes.includes(mode);
+};
+/** Narrows the mode so the compiler can require an anchor time alongside it. */
+var isRecurringPeriodMode = function isRecurringPeriodMode(mode) {
+  return mode === AnimationLengthMode.RecurringPeriod;
+};
+var ANCHOR_TIME_PATTERN = /^([01]\d|2[0-3]):[0-5]\d$/;
+var isValidAnchorTime = function isValidAnchorTime(anchorTime) {
+  return !!anchorTime && ANCHOR_TIME_PATTERN.test(anchorTime);
+};
+var selectionsForMode = function selectionsForMode(setting) {
+  if (setting.mode === AnimationLengthMode.Now) {
+    return setting.now;
+  }
+  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+    return setting.recurringPeriod;
+  }
+  if (setting.mode === AnimationLengthMode.ReferenceTime) {
+    return setting.referenceTime;
+  }
+  return defaultOffsetSelections;
+};
+/** The offsets of whichever mode is selected; the modes without offsets use the defaults. */
+var activeOffsets = function activeOffsets(setting) {
+  var _selectionsForMode = selectionsForMode(setting),
+    startOffset = _selectionsForMode.startOffset,
+    endOffset = _selectionsForMode.endOffset;
+  return {
+    startOffset: startOffset,
+    endOffset: endOffset
+  };
+};
+var defaultRecurringPeriodSelections = function defaultRecurringPeriodSelections(now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return Object.assign({}, defaultOffsetSelections, {
+    anchorTime: toAnchorTime(now)
+  });
+};
+/** Presets carry settings the compiler cannot vouch for, so the selected mode is given the slice it needs. */
+var withModeSelections = function withModeSelections(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode === AnimationLengthMode.Now) {
+    return Object.assign({}, setting, {
+      now: Object.assign({}, defaultOffsetSelections, setting.now)
+    });
+  }
+  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+    var merged = Object.assign({}, defaultRecurringPeriodSelections(now), setting.recurringPeriod);
+    return Object.assign({}, setting, {
+      recurringPeriod: isValidAnchorTime(merged.anchorTime) ? merged : Object.assign({}, merged, {
+        anchorTime: toAnchorTime(now)
+      })
+    });
+  }
+  if (setting.mode === AnimationLengthMode.Exact) {
+    return Object.assign({}, setting, {
+      exact: Object.assign({}, defaultExactSelections(now), setting.exact)
+    });
+  }
+  return setting;
+};
+/**
+ * A recurring period anchors on its time of day within the current UTC date, so the
+ * window it resolves rolls onto the next day once the clock passes midnight.
+ */
+var resolveAnchorInstant = function resolveAnchorInstant(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode !== AnimationLengthMode.RecurringPeriod) {
+    return now;
+  }
+  var _setting$recurringPer = setting.recurringPeriod.anchorTime.split(':').map(Number),
+    hours = _setting$recurringPer[0],
+    minutes = _setting$recurringPer[1];
+  return dateUtils.set(now, {
+    hours: hours,
+    minutes: minutes,
+    seconds: 0,
+    milliseconds: 0
+  });
+};
+/**
+ * Offsets are signed: negative lands before the anchor, positive after. They are
+ * applied as calendar durations, so "+ 1 month" lands on the same day of the next
+ * month rather than a fixed number of days later.
+ */
+var resolveAnimationRange = function resolveAnimationRange(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var _activeOffsets = activeOffsets(setting),
+    startOffset = _activeOffsets.startOffset,
+    endOffset = _activeOffsets.endOffset;
+  var anchor = resolveAnchorInstant(setting, now);
+  return {
+    animationStartTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(startOffset))),
+    animationEndTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(endOffset)))
+  };
+};
+/** Offsets can use different units, so validity is decided on the resolved instants. */
+/** Exact names its range outright; every other mode resolves one from its offsets. */
+var settingRange = function settingRange(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return setting.mode === AnimationLengthMode.Exact ? setting.exact : resolveAnimationRange(setting, now);
+};
+/* Exact times are picked to the minute, so seconds must not decide validity. */
+var isValidAnimationLength = function isValidAnimationLength(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var _settingRange = settingRange(setting, now),
+    animationStartTime = _settingRange.animationStartTime,
+    animationEndTime = _settingRange.animationEndTime;
+  return dateUtils.isBefore(dateUtils.utc(animationStartTime).setSeconds(0, 0), dateUtils.utc(animationEndTime).setSeconds(0, 0));
+};
+/** Frames the animation may hold; the range is expanded one entry per time step. */
+var MAX_ANIMATION_STEPS = 10000;
+/**
+ * The cost of an animation is its span divided by the time step, so a wide range
+ * is affordable with a coarse step and unaffordable with a fine one.
+ */
+var isWithinAnimationStepLimit = function isWithinAnimationStepLimit(setting, timeStepInMinutes, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (!timeStepInMinutes) {
+    return true;
+  }
+  var _settingRange2 = settingRange(setting, now),
+    animationStartTime = _settingRange2.animationStartTime,
+    animationEndTime = _settingRange2.animationEndTime;
+  var spanInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
+  return Math.abs(spanInMinutes) / timeStepInMinutes <= MAX_ANIMATION_STEPS;
+};
+/* Shares the animation-time format, so a typed and a dragged range serialise alike. */
+var toExactAnimationTime = toAnimationTime;
+/** A day either side of now, so an exact window opens on something usable. */
+var defaultExactSelections = function defaultExactSelections(now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var wholeMinute = dateUtils.set(now, {
+    seconds: 0,
+    milliseconds: 0
+  });
+  return {
+    animationStartTime: toExactAnimationTime(dateUtils.sub(wholeMinute, {
+      days: 1
+    })),
+    animationEndTime: toExactAnimationTime(dateUtils.add(wholeMinute, {
+      days: 1
+    }))
+  };
+};
+/** Starts Exact from whatever range is already on screen, falling back to the defaults. */
+var exactAnimationLengthFrom = function exactAnimationLengthFrom(_ref3, now) {
+  var animationStartTime = _ref3.animationStartTime,
+    animationEndTime = _ref3.animationEndTime;
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return {
+    mode: AnimationLengthMode.Exact,
+    exact: animationStartTime && animationEndTime ? {
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime
+    } : defaultExactSelections(now)
+  };
+};
+var getOffsetFromTime = function getOffsetFromTime(time, anchorTime) {
+  var relativeTime = dateUtils.utc(time);
+  var value = dateUtils.differenceInMinutes(relativeTime, anchorTime);
+  return {
+    unit: 'minutes',
+    value: value
+  };
+};
+var getAnimationLengthFromRange = function getAnimationLengthFromRange(mode, _ref4, now) {
+  var animationStartTime = _ref4.animationStartTime,
+    animationEndTime = _ref4.animationEndTime;
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  switch (mode) {
+    case AnimationLengthMode.Now:
+      {
+        return {
+          mode: mode,
+          now: {
+            startOffset: getOffsetFromTime(animationStartTime, now),
+            endOffset: getOffsetFromTime(animationEndTime, now)
+          }
+        };
+      }
+    case AnimationLengthMode.RecurringPeriod:
+      {
+        var today = dateUtils.startOfDayUTC(now);
+        return {
+          mode: mode,
+          recurringPeriod: {
+            anchorTime: '00:00',
+            startOffset: getOffsetFromTime(animationStartTime, today),
+            endOffset: getOffsetFromTime(animationEndTime, today)
+          }
+        };
+      }
+    case AnimationLengthMode.Exact:
+    default:
+      return exactAnimationLengthFrom({
+        animationStartTime: animationStartTime,
+        animationEndTime: animationEndTime
+      });
+  }
+};
+
+var styles$2 = {
+  openPickerButton: {
+    padding: 0
+  },
+  /* Filled inputs offset their adornments for the label, so match that offset. */
+  utc: {
+    paddingTop: '16px'
+  }
+};
+/**
+ * Only the hours and minutes of the carrier are ever read, so its date is arbitrary —
+ * but it must be a day no timezone shifts, or a DST gap swallows the anchor's hour.
+ */
+var TIME_ONLY_CARRIER_DATE = '2001-01-15T00:00:00Z';
+/* The picker reads and writes a Date through its local-time getters, so the anchor rides in that frame. */
+var anchorTimeToPickerDate = function anchorTimeToPickerDate(anchorTime) {
+  if (!isValidAnchorTime(anchorTime)) {
+    return null;
+  }
+  var _anchorTime$split$map = anchorTime.split(':').map(Number),
+    hours = _anchorTime$split$map[0],
+    minutes = _anchorTime$split$map[1];
+  var pickerDate = new Date(TIME_ONLY_CARRIER_DATE);
+  pickerDate.setHours(hours, minutes, 0, 0);
+  return pickerDate;
+};
+var pickerDateToAnchorTime = function pickerDateToAnchorTime(pickerDate) {
+  return dateUtils.dateToString(pickerDate, dateUtils.DATE_FORMAT_HOURS, false);
+};
+var OpenPicker = function OpenPicker() {
+  return jsx(Clock, {});
+};
+var AnchorTimeField = function AnchorTimeField(_ref) {
+  var value = _ref.value,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  /* Typing walks through incomplete times, so only a whole one is worth reporting. */
+  var reportCompletedAnchorTime = function reportCompletedAnchorTime(pickerDate) {
+    if (pickerDate && dateUtils.isValid(pickerDate)) {
+      onChange(pickerDateToAnchorTime(pickerDate));
+    }
+  };
+  return jsx(LocalizationProvider, {
+    dateAdapter: AdapterDateFns,
+    children: jsx(TimePicker, {
+      ampm: false,
+      closeOnSelect: false,
+      desktopModeMediaQuery: "@media (min-width: 720px)",
+      disabled: disabled,
+      label: label,
+      onChange: reportCompletedAnchorTime,
+      slotProps: {
+        actionBar: {
+          actions: ['accept']
+        },
+        field: {
+          openPickerButtonPosition: 'start'
+        },
+        openPickerButton: {
+          size: 'small',
+          sx: styles$2.openPickerButton
+        },
+        textField: {
+          variant: 'filled',
+          slotProps: {
+            input: {
+              endAdornment: jsx(InputAdornment, {
+                position: "end",
+                sx: styles$2.utc,
+                children: "UTC"
+              })
+            }
+          }
+        }
+      },
+      slots: {
+        openPickerIcon: OpenPicker
+      },
+      timeSteps: {
+        minutes: ANCHOR_MINUTE_STEP
+      },
+      value: anchorTimeToPickerDate(value)
+    })
+  });
+};
+
+var selectableModes = [AnimationLengthMode.Auto, AnimationLengthMode.Now, AnimationLengthMode.RecurringPeriod, AnimationLengthMode.ReferenceTime, AnimationLengthMode.Exact];
+var OFFSET_MAX_DIGITS = 3;
+var maxOffsetByUnit = {
+  minutes: 999,
+  hours: 999,
+  days: 365,
+  weeks: 99,
+  months: 99,
+  years: 99
+};
+/* One line of MuiFormHelperText: 20px line box plus its 3px top margin. */
+var RESERVED_ERROR_HEIGHT = '23px';
+/* Every row splits the panel the same way, so the fields line up in two columns. */
+var fieldRow = {
+  display: 'flex',
+  gap: 1,
+  '& > *': {
+    flex: '1 1 0'
+  }
+};
+var styles$1 = {
+  menu: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '260px',
+    padding: '8px 12px'
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 700,
+    paddingBottom: 2
+  },
+  caption: {
+    color: 'geowebColors.greys.accessible',
+    fontSize: 11,
+    paddingLeft: 0.5
+  },
+  radioLabel: {
+    '& .MuiFormControlLabel-label': {
+      fontSize: 14
+    }
+  },
+  anchorRow: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 1,
+    paddingLeft: 0.5
+  },
+  anchorValue: {
+    flexGrow: 1,
+    fontSize: 14,
+    fontWeight: 700
+  },
+  anchorFields: fieldRow,
+  /* The top padding matches the reserved error line below, so the fields sit between equal gaps. */
+  offsets: Object.assign({}, fieldRow, {
+    paddingTop: RESERVED_ERROR_HEIGHT
+  }),
+  reservedError: {
+    visibility: 'hidden'
+  },
+  readOnlyValue: {
+    flexGrow: 1,
+    fontSize: 14
+  },
+  exact: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  dateTimePicker: {
+    paddingBottom: 2
+  },
+  utc: {
+    color: 'geowebColors.greys.accessible',
+    fontSize: 18
+  }
+};
+var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
+  var setting = _ref.setting,
+    onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
+    animationStartTime = _ref.animationStartTime,
+    animationEndTime = _ref.animationEndTime,
+    autoTimeStepLayerName = _ref.autoTimeStepLayerName,
+    timeStep = _ref.timeStep,
+    _ref$isAutoDisabled = _ref.isAutoDisabled,
+    isAutoDisabled = _ref$isAutoDisabled === void 0 ? false : _ref$isAutoDisabled,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    referenceTimeFromLayer = _ref.referenceTimeFromLayer;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  /* Spreading the setting keeps every other mode's selections while this one changes. */
+  var changeMode = function changeMode(mode) {
+    if (isRecurringPeriodMode(mode)) {
+      var _setting$recurringPer;
+      onChange(Object.assign({}, setting, {
+        mode: mode,
+        recurringPeriod: (_setting$recurringPer = setting.recurringPeriod) != null ? _setting$recurringPer : defaultRecurringPeriodSelections()
+      }));
+      return;
+    }
+    if (mode === AnimationLengthMode.Now) {
+      var _setting$now;
+      onChange(Object.assign({}, setting, {
+        mode: mode,
+        now: (_setting$now = setting.now) != null ? _setting$now : defaultOffsetSelections
+      }));
+      return;
+    }
+    if (mode === AnimationLengthMode.Exact) {
+      var _setting$exact;
+      onChange(Object.assign({}, setting, {
+        mode: mode,
+        exact: (_setting$exact = setting.exact) != null ? _setting$exact : defaultExactSelections()
+      }));
+      return;
+    }
+    if (mode === AnimationLengthMode.ReferenceTime) {
+      var _setting$referenceTim;
+      onChange(Object.assign({}, setting, {
+        mode: mode,
+        referenceTime: (_setting$referenceTim = setting.referenceTime) != null ? _setting$referenceTim : defaultOffsetSelections
+      }));
+      return;
+    }
+    onChange(Object.assign({}, setting, {
+      mode: mode
+    }));
+  };
+  var _activeOffsets = activeOffsets(setting),
+    startOffset = _activeOffsets.startOffset,
+    endOffset = _activeOffsets.endOffset;
+  var changeActiveOffsets = function changeActiveOffsets(offsets, isStep) {
+    if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+      onChange(Object.assign({}, setting, {
+        recurringPeriod: Object.assign({}, setting.recurringPeriod, offsets)
+      }), isStep);
+      return;
+    }
+    if (setting.mode === AnimationLengthMode.Now) {
+      onChange(Object.assign({}, setting, {
+        now: offsets
+      }), isStep);
+    }
+    if (setting.mode === AnimationLengthMode.ReferenceTime) {
+      onChange(Object.assign({}, setting, {
+        referenceTime: offsets
+      }), isStep);
+    }
+  };
+  var changeAnchorTime = function changeAnchorTime(changedAnchorTime) {
+    if (setting.mode !== AnimationLengthMode.RecurringPeriod) {
+      return;
+    }
+    onChange(Object.assign({}, setting, {
+      recurringPeriod: Object.assign({}, setting.recurringPeriod, {
+        anchorTime: changedAnchorTime
+      })
+    }));
+  };
+  var unitOptions = timeUnits.map(function (unit) {
+    return {
+      value: unit,
+      label: t(unitTranslationKey[unit])
+    };
+  });
+  var asTimeOffset = function asTimeOffset(_ref2) {
+    var value = _ref2.value,
+      unit = _ref2.unit;
+    var maxOffset = maxOffsetByUnit[unit];
+    return {
+      value: Math.max(-maxOffset, Math.min(maxOffset, value)),
+      unit: unit
+    };
+  };
+  /* One unit spans the whole window, so picking it on either field moves both. */
+  var changeStartOffset = function changeStartOffset(offset, isStep) {
+    var changed = asTimeOffset(offset);
+    changeActiveOffsets({
+      startOffset: changed,
+      endOffset: asTimeOffset(Object.assign({}, endOffset, {
+        unit: changed.unit
+      }))
+    }, isStep);
+  };
+  var changeEndOffset = function changeEndOffset(offset, isStep) {
+    var changed = asTimeOffset(offset);
+    changeActiveOffsets({
+      startOffset: asTimeOffset(Object.assign({}, startOffset, {
+        unit: changed.unit
+      })),
+      endOffset: changed
+    }, isStep);
+  };
+  var resolvesOwnRange = isAnchoredMode(setting.mode);
+  var hasInvertedRange = !isValidAnimationLength(setting, dateUtils.utc(referenceTimeFromLayer));
+  var hasTooManySteps = resolvesOwnRange && !hasInvertedRange && !isWithinAnimationStepLimit(setting, timeStep);
+  var hasRangeError = hasInvertedRange || hasTooManySteps;
+  var rangeError = function () {
+    if (hasInvertedRange) {
+      return t('timeslider-start-before-end');
+    }
+    if (hasTooManySteps) {
+      return t('timeslider-animation-too-many-steps');
+    }
+    return ' ';
+  }();
+  var isModeDisabled = function isModeDisabled(mode) {
+    return disabled || mode === AnimationLengthMode.Auto && isAutoDisabled || mode === AnimationLengthMode.ReferenceTime && !referenceTimeFromLayer;
+  };
+  var describedAnimationLength = animationStartTime && animationEndTime ? minutesToDescribedDuration(dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime))) : '';
+  var asDisplayTime = function asDisplayTime(time) {
+    return time ? "" + dateUtils.dateToString(dateUtils.utc(time), dateUtils.DATE_FORMAT_DATEPICKER, true) : '';
+  };
+  /* The surrounding Menu dismisses itself on Tab; keep it open so focus can reach the next field. */
+  var keepMenuOpenOnTab = function keepMenuOpenOnTab(event) {
+    if (event.key === 'Tab') {
+      event.stopPropagation();
+    }
+  };
+  var isSteppingExactTimeRef = React.useRef(false);
+  var handleExactTimeKeyDown = function handleExactTimeKeyDown(event) {
+    isSteppingExactTimeRef.current = event.key === 'ArrowUp' || event.key === 'ArrowDown';
+  };
+  /* Typing walks through incomplete dates, so only a whole one is worth reporting. */
+  var changeExactStartTime = function changeExactStartTime(date) {
+    if (setting.mode !== AnimationLengthMode.Exact || !date) {
+      return;
+    }
+    var isStep = isSteppingExactTimeRef.current;
+    isSteppingExactTimeRef.current = false;
+    onChange(Object.assign({}, setting, {
+      exact: Object.assign({}, setting.exact, {
+        animationStartTime: toExactAnimationTime(date)
+      })
+    }), isStep);
+  };
+  var changeExactEndTime = function changeExactEndTime(date) {
+    if (setting.mode !== AnimationLengthMode.Exact || !date) {
+      return;
+    }
+    var isStep = isSteppingExactTimeRef.current;
+    isSteppingExactTimeRef.current = false;
+    onChange(Object.assign({}, setting, {
+      exact: Object.assign({}, setting.exact, {
+        animationEndTime: toExactAnimationTime(date)
+      })
+    }), isStep);
+  };
+  return jsxs(Box, {
+    onKeyDown: keepMenuOpenOnTab,
+    sx: styles$1.menu,
+    children: [jsx(Typography, {
+      sx: styles$1.sectionTitle,
+      children: t('timeslider-animation-length')
+    }), jsx(RadioGroup, {
+      onChange: function onChange(event) {
+        return changeMode(event.target.value);
+      },
+      value: setting.mode,
+      children: selectableModes.map(function (mode) {
+        return jsx(FormControlLabel, {
+          control: jsx(Radio, {
+            size: "small"
+          }),
+          disabled: isModeDisabled(mode),
+          label: t(modeTranslationKey[mode]),
+          sx: styles$1.radioLabel,
+          value: mode
+        }, mode);
+      })
+    }), jsx(Divider, {
+      sx: {
+        marginY: 1
+      }
+    }), setting.mode === AnimationLengthMode.Exact ? jsx(Typography, {
+      sx: styles$1.sectionTitle,
+      children: t('timeslider-start-and-end-time')
+    }) : jsx(Typography, {
+      sx: styles$1.sectionTitle,
+      children: t('timeslider-anchor-time')
+    }), setting.mode === AnimationLengthMode.Auto && jsxs(Box, {
+      children: [jsx(Typography, {
+        sx: styles$1.readOnlyValue,
+        children: autoTimeStepLayerName
+      }), jsx(Typography, {
+        sx: styles$1.caption,
+        children: t('timeslider-auto-animation-length')
+      }), jsx(Typography, {
+        sx: Object.assign({}, styles$1.readOnlyValue, {
+          paddingLeft: 0.5
+        }),
+        children: describedAnimationLength
+      })]
+    }), resolvesOwnRange ? jsxs(Box, {
+      children: [setting.mode === AnimationLengthMode.Now && jsxs(Fragment, {
+        children: [jsx(Typography, {
+          sx: styles$1.caption,
+          children: t('timeslider-date')
+        }), jsxs(Box, {
+          sx: styles$1.anchorRow,
+          children: [jsx(CalendarToday, {}), jsx(Typography, {
+            sx: styles$1.anchorValue,
+            children: t('timeslider-now')
+          }), jsx(Typography, {
+            sx: styles$1.utc,
+            children: "UTC"
+          })]
+        })]
+      }), setting.mode === AnimationLengthMode.RecurringPeriod && jsxs(Box, {
+        sx: styles$1.anchorFields,
+        children: [jsx(AnchorTimeField, {
+          disabled: disabled,
+          label: t('timeslider-time'),
+          onChange: changeAnchorTime,
+          value: setting.recurringPeriod.anchorTime
+        }), jsxs(Box, {
+          children: [jsx(Typography, {
+            sx: styles$1.caption,
+            children: t('timeslider-date')
+          }), jsxs(Box, {
+            sx: styles$1.anchorRow,
+            children: [jsx(CalendarToday, {}), jsx(Typography, {
+              sx: styles$1.anchorValue,
+              children: t('timeslider-today')
+            })]
+          })]
+        })]
+      }), setting.mode === AnimationLengthMode.ReferenceTime && jsxs(Fragment, {
+        children: [jsx(Typography, {
+          sx: styles$1.caption,
+          children: t('timeslider-reference-time')
+        }), jsxs(Box, {
+          sx: styles$1.anchorRow,
+          children: [jsx(CalendarToday, {}), jsx(Typography, {
+            sx: styles$1.readOnlyValue,
+            children: asDisplayTime(referenceTimeFromLayer)
+          }), jsx(Typography, {
+            sx: styles$1.utc,
+            children: "UTC"
+          })]
+        })]
+      }), jsxs(Box, {
+        sx: styles$1.offsets,
+        children: [jsx(NumberWithUnitField, {
+          disabled: disabled,
+          error: hasRangeError,
+          label: t('timeslider-start-time'),
+          maxDigits: OFFSET_MAX_DIGITS,
+          maxMagnitude: maxOffsetByUnit[startOffset.unit],
+          onChange: changeStartOffset,
+          onInputChange: onInputChange,
+          unit: startOffset.unit,
+          unitOptions: unitOptions,
+          value: startOffset.value
+        }), jsx(NumberWithUnitField, {
+          disabled: disabled,
+          error: hasRangeError,
+          label: t('timeslider-end-time'),
+          maxDigits: OFFSET_MAX_DIGITS,
+          maxMagnitude: maxOffsetByUnit[endOffset.unit],
+          onChange: changeEndOffset,
+          onInputChange: onInputChange,
+          unit: endOffset.unit,
+          unitOptions: unitOptions,
+          value: endOffset.value
+        })]
+      })]
+    }) : null, setting.mode === AnimationLengthMode.Exact && jsxs(Box, {
+      sx: styles$1.exact,
+      children: [jsx(DateTimePicker, {
+        label: t('timeslider-start-time'),
+        onChange: changeExactStartTime,
+        slotProps: {
+          textField: {
+            error: hasRangeError,
+            onKeyDown: handleExactTimeKeyDown
+          }
+        },
+        sx: styles$1.dateTimePicker,
+        value: new Date(setting.exact.animationStartTime)
+      }), jsx(DateTimePicker, {
+        label: t('timeslider-end-time'),
+        onChange: changeExactEndTime,
+        slotProps: {
+          textField: {
+            error: hasRangeError,
+            onKeyDown: handleExactTimeKeyDown
+          }
+        },
+        value: new Date(setting.exact.animationEndTime)
+      })]
+    }), jsx(FormHelperText, {
+      "data-testid": "animationLengthRangeError",
+      error: true,
+      sx: hasRangeError ? undefined : styles$1.reservedError,
+      children: rangeError
+    })]
+  });
+};
+
+var styles = {
+  button: {
+    padding: '0px',
+    paddingRight: '12px',
+    width: '100%!important',
+    minWidth: '64px',
+    justifyContent: 'space-between'
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: 400,
+    textTransform: 'none'
+  }
+};
+var asDisplayTime = function asDisplayTime(time) {
+  return time ? dateUtils.dateToString(dateUtils.utc(time), dateUtils.DATE_FORMAT_DATEPICKER) + " UTC" : '';
+};
+var AnimationLengthPanel = function AnimationLengthPanel(_ref) {
+  var setting = _ref.setting,
+    onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
+    animationStartTime = _ref.animationStartTime,
+    animationEndTime = _ref.animationEndTime,
+    autoTimeStepLayerName = _ref.autoTimeStepLayerName,
+    timeStep = _ref.timeStep,
+    _ref$isAutoDisabled = _ref.isAutoDisabled,
+    isAutoDisabled = _ref$isAutoDisabled === void 0 ? false : _ref$isAutoDisabled,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    referenceTimeFromLayer = _ref.referenceTimeFromLayer;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _React$useState = React.useState(null),
+    anchorRef = _React$useState[0],
+    setAnchorRef = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var describedAnimationLength = animationStartTime && animationEndTime ? minutesToDescribedDuration(dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime))) : '';
+  /* Zero has no direction, so it carries no sign. */
+  var asSignedOffsetLabel = function asSignedOffsetLabel(_ref2) {
+    var value = _ref2.value,
+      unit = _ref2.unit;
+    var sign = value === 0 ? '' : (value < 0 ? '−' : '+') + " ";
+    return "" + sign + Math.abs(value) + " " + t(shortUnitTranslationKey[unit]);
+  };
+  var _activeOffsets = activeOffsets(setting),
+    startOffset = _activeOffsets.startOffset,
+    endOffset = _activeOffsets.endOffset;
+  var offsetsLabel = asSignedOffsetLabel(startOffset) + " / " + asSignedOffsetLabel(endOffset);
+  var buttonLabel = function () {
+    switch (setting.mode) {
+      case AnimationLengthMode.Auto:
+        return t('timeslider-auto') + " " + describedAnimationLength;
+      case AnimationLengthMode.Now:
+        return t('timeslider-now') + " " + offsetsLabel;
+      case AnimationLengthMode.RecurringPeriod:
+        return setting.recurringPeriod.anchorTime + " " + offsetsLabel;
+      case AnimationLengthMode.ReferenceTime:
+        return "Ref. " + offsetsLabel;
+      case AnimationLengthMode.Exact:
+        return t('timeslider-animation-length-exact');
+      default:
+        return describedAnimationLength;
+    }
+  }();
+  /* The offsets are counted from an anchor, so the heading names which one. */
+  var tooltipHeading = function () {
+    switch (setting.mode) {
+      case AnimationLengthMode.Now:
+        return t('timeslider-now') + " - " + dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS);
+      case AnimationLengthMode.RecurringPeriod:
+        return t('timeslider-recurring-period') + " - " + setting.recurringPeriod.anchorTime;
+      case AnimationLengthMode.ReferenceTime:
+        return "Ref. - " + asDisplayTime(referenceTimeFromLayer);
+      default:
+        return t(modeTranslationKey[setting.mode]);
+    }
+  }();
+  var tooltipTitle = jsxs(Box, {
+    children: [jsx(Typography, {
+      variant: "body2",
+      children: tooltipHeading
+    }), jsx(Typography, {
+      variant: "body2",
+      children: t('timeslider-start-time') + " " + asDisplayTime(animationStartTime)
+    }), jsx(Typography, {
+      variant: "body2",
+      children: t('timeslider-end-time') + " " + asDisplayTime(animationEndTime)
+    })]
+  });
+  return jsxs(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+    },
+    children: [jsxs(CustomIconButton, {
+      "aria-label": t('timeslider-animation-length'),
+      "data-testid": "animationLengthPanelButton",
+      isSelected: true,
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      ref: setAnchorRef,
+      sx: styles.button,
+      tooltipProps: {
+        title: tooltipTitle,
+        placement: 'top'
+      },
+      variant: "tool",
+      children: [jsx(Animation, {}), jsx(Typography, {
+        sx: styles.buttonLabel,
+        children: buttonLabel
+      })]
+    }), !!anchorRef && jsx(Menu, {
+      anchorEl: anchorRef,
+      anchorOrigin: {
+        vertical: -15,
+        horizontal: 'center'
+      },
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      open: open,
+      slotProps: {
+        backdrop: {
+          sx: {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      children: jsx(AnimationLengthMenu, {
+        animationEndTime: animationEndTime,
+        animationStartTime: animationStartTime,
+        autoTimeStepLayerName: autoTimeStepLayerName,
+        disabled: disabled,
+        isAutoDisabled: isAutoDisabled,
+        onChange: onChange,
+        onInputChange: onInputChange,
+        referenceTimeFromLayer: referenceTimeFromLayer,
+        setting: setting,
+        timeStep: timeStep
+      })
+    })]
+  });
+};
+
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
     toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
@@ -2928,6 +3972,14 @@ var OptionsMenu = function OptionsMenu(_ref) {
     animationLengthBtn = _ref.animationLengthBtn;
   return jsxs(Fragment, {
     children: [jsx(Grid, {
+      size: {
+        xs: 'auto'
+      },
+      children: animationLengthBtn || jsx(AnimationLengthButton, {
+        onChangeAnimationLength: function onChangeAnimationLength() {},
+        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
+      })
+    }), jsx(Grid, {
       size: {
         xs: 'auto'
       },
@@ -2939,14 +3991,6 @@ var OptionsMenu = function OptionsMenu(_ref) {
         onToggleTimeSpan: function onToggleTimeSpan() {},
         timeSliderSpan: 0
       })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: animationLengthBtn || jsx(AnimationLengthButton, {
-        onChangeAnimationLength: function onChangeAnimationLength() {},
-        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
-      })
     }), jsx(Grid, {
       size: {
         xs: 'auto'
@@ -3238,18 +4282,6 @@ var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx
 };
 
 var _excluded = ["day", "today", "outsideCurrentMonth"];
-var getTimezoneOffsetS = function getTimezoneOffsetS(value) {
-  return value.getTimezoneOffset() * 60;
-};
-var toLocalTime = function toLocalTime(dateTime) {
-  return dateUtils.fromUnix(dateTime + getTimezoneOffsetS(dateUtils.fromUnix(dateTime)));
-};
-var toUTCTime = function toUTCTime(dateTime) {
-  return dateUtils.unix(dateTime) - getTimezoneOffsetS(dateTime);
-};
-var OpenPicker = function OpenPicker() {
-  return jsx(CalendarToday, {});
-};
 var enabledAndSelectedButtonStyle = {
   borderWidth: '6px',
   borderBottomStyle: 'solid',
@@ -3301,28 +4333,30 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  var _React$useState2 = React.useState(value ? toLocalTime(value) : null),
-    localTimeValue = _React$useState2[0],
-    setLocalTimeValue = _React$useState2[1];
+  var _React$useState2 = React.useState(value ? dateUtils.fromUnix(value) : null),
+    utcTimeValue = _React$useState2[0],
+    setUtcTimeValue = _React$useState2[1];
   var _React$useState3 = React.useState(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime),
     isUndefinedDateRange = _React$useState3[0],
     setIsUndefinedDateRange = _React$useState3[1];
   var isDateRangeDisabled = React.useCallback(function (date) {
-    if (dataStartTime === undefined || dataEndTime === undefined || dataStartTime > dataEndTime) {
+    if (!date || dataStartTime === undefined || dataEndTime === undefined || dataStartTime > dataEndTime) {
       return true;
     }
-    var startOfFirstDay = dateUtils.fromUnix(dataStartTime);
-    startOfFirstDay.setHours(0, 0, 0);
-    var endOfLastDay = dateUtils.fromUnix(dataEndTime);
-    var day = dateUtils.unix(date);
-    return day < dateUtils.unix(startOfFirstDay) || day > dateUtils.unix(endOfLastDay);
+    var asUtcDay = function asUtcDay(value) {
+      return Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate());
+    };
+    var firstDay = asUtcDay(dateUtils.fromUnix(dataStartTime));
+    var lastDay = asUtcDay(dateUtils.fromUnix(dataEndTime));
+    var day = asUtcDay(date);
+    return day < firstDay || day > lastDay;
   }, [dataStartTime, dataEndTime]);
-  var _React$useState4 = React.useState(isDateRangeDisabled(localTimeValue)),
+  var _React$useState4 = React.useState(isDateRangeDisabled(utcTimeValue)),
     isDisabledRange = _React$useState4[0],
     setIsDisabledRange = _React$useState4[1];
   var handleSelect = function handleSelect() {
-    if (localTimeValue) {
-      onSelect(toUTCTime(localTimeValue));
+    if (utcTimeValue) {
+      onSelect(dateUtils.unix(utcTimeValue));
     }
   };
   var handleKeyDown = function handleKeyDown(event) {
@@ -3337,16 +4371,16 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
   };
   var handleDateChange = function handleDateChange(value) {
     if (value instanceof Date || value === null || isDisabledDateWithSomeAvailableData()) {
-      setLocalTimeValue(value);
+      setUtcTimeValue(value);
     }
   };
   var AvailableDay = function AvailableDay(props) {
-    return AvailableDayByTimeRange(props, isDateRangeDisabled(props.day));
+    return AvailableDayByTimeRange(props, isDateRangeDisabled(pickerDateToUTC(props.day)));
   };
   React.useEffect(function () {
     setIsUndefinedDateRange(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime);
-    setIsDisabledRange(isDateRangeDisabled(localTimeValue));
-  }, [dataStartTime, dataEndTime, localTimeValue, isDateRangeDisabled]);
+    setIsDisabledRange(isDateRangeDisabled(utcTimeValue));
+  }, [dataStartTime, dataEndTime, utcTimeValue, isDateRangeDisabled]);
   return jsx(Paper, {
     sx: {
       borderRadius: '0px',
@@ -3380,59 +4414,33 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
           },
           children: t('timeslider-marker')
         })
-      }), jsx(LocalizationProvider, {
-        dateAdapter: AdapterDateFns,
-        children: jsx(DateTimePicker, {
-          ampm: false,
-          autoFocus: true,
-          closeOnSelect: false,
-          desktopModeMediaQuery: "@media (min-width: 720px)",
-          disableIgnoringDatePartForTimeValidation: true,
-          format: format,
-          label: t('timeslider-marker-label'),
-          maxDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataEndTime),
-          minDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataStartTime),
-          onChange: handleDateChange,
-          onClose: handleSelect,
-          shouldDisableDate: isDisabledDateWithSomeAvailableData,
-          slotProps: {
-            textField: {
-              variant: 'filled',
-              endAdornment: jsx(InputAdornment, {
-                position: "end",
-                sx: {
-                  paddingTop: '16px'
-                },
-                children: "UTC"
-              })
-            },
-            field: {
-              onKeyDownCapture: handleKeyDown,
-              openPickerButtonPosition: 'start'
-            },
-            openPickerButton: {
-              size: 'small',
-              sx: {
-                padding: 0
-              }
-            }
-          },
-          slots: {
-            openPickerIcon: OpenPicker,
-            day: AvailableDay
-          },
-          sx: {
-            marginTop: '8px',
-            marginBottom: '8px',
-            marginLeft: '8px',
-            marginRight: '8px',
-            borderRadius: '0px'
-          },
-          timeSteps: {
-            minutes: 1
-          },
-          value: localTimeValue
-        })
+      }), jsx(DateTimePicker, {
+        autoFocus: true,
+        closeOnSelect: false,
+        disableIgnoringDatePartForTimeValidation: true,
+        format: format,
+        label: t('timeslider-marker-label'),
+        maxDateTime: isUndefinedDateRange ? undefined : dateUtils.fromUnix(dataEndTime),
+        minDateTime: isUndefinedDateRange ? undefined : dateUtils.fromUnix(dataStartTime),
+        onChange: handleDateChange,
+        onClose: handleSelect,
+        shouldDisableDate: isDisabledDateWithSomeAvailableData,
+        slotProps: {
+          field: {
+            onKeyDownCapture: handleKeyDown
+          }
+        },
+        slots: {
+          day: AvailableDay
+        },
+        sx: {
+          marginTop: '8px',
+          marginBottom: '8px',
+          marginLeft: '8px',
+          marginRight: '8px',
+          borderRadius: '0px'
+        },
+        value: utcTimeValue
       })]
     })
   });
@@ -3688,4 +4696,4 @@ var DemoWrapper = function DemoWrapper(_ref2) {
   });
 };
 
-export { AUTO_MOVE_AREA_PADDING, AnimationLength, AnimationLengthButton, AutoUpdateButton, _BackwardForwardStepButton as BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, _TimeStepButton as TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };
+export { ANCHOR_MINUTE_STEP, AUTO_MOVE_AREA_PADDING, AnchorTimeField, AnimationLength, AnimationLengthButton, AnimationLengthMenu, AnimationLengthMode, AnimationLengthPanel, AutoUpdateButton, _BackwardForwardStepButton as BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, MAX_ANIMATION_STEPS, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, _TimeStepButton as TimeStepButton, activeOffsets, anchorTimeToPickerDate, asDisplayTime, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultEndOffset, defaultExactSelections, defaultOffsetSelections, defaultRecurringPeriodSelections, defaultSecondsPerPx, defaultStartOffset, defaultTimeSpan, defaultTimeStep, exactAnimationLengthFrom, getAnimationLengthFromRange, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isAnchoredMode, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRecurringPeriodMode, isRightAnimationIconArea, isSelectedTimeIconArea, isValidAnchorTime, isValidAnimationLength, isWithinAnimationStepLimit, marks$1 as marks, minutesToDescribedDuration, modeTranslationKey, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pickerDateToAnchorTime, pixelToTimestamp, resolveAnchorInstant, resolveAnimationRange, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, settingRange, shortUnitTranslationKey, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeUnits, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, toAnchorTime, toExactAnimationTime, unitTranslationKey, useCanvasTarget, withModeSelections };