@opengeoweb/time-slider 19.6.0 → 19.6.1-nightly-20260913

package/dist/index.esm.js

@@ -1,15 +1,12 @@
 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, 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, CalendarToday, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, 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 { PickerDay } from '@mui/x-date-pickers/PickerDay';
 
 var en = {
@@ -61,7 +58,33 @@ 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-animation-length-exact": "Exact",
+	"timeslider-anchor-time": "Anchor Time",
+	"timeslider-auto-animation-length": "Auto animation length",
+	"timeslider-date": "Date",
+	"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 +134,32 @@ 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-animation-length-exact": "Tarkka",
+	"timeslider-anchor-time": "Ankkuriaika",
+	"timeslider-auto-animation-length": "Automaattinen animaation pituus",
+	"timeslider-date": "Päivämäärä",
+	"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 +209,32 @@ 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-animation-length-exact": "Eksakt",
+	"timeslider-anchor-time": "Ankertid",
+	"timeslider-auto-animation-length": "Automatisk animasjonslengde",
+	"timeslider-date": "Dato",
+	"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 +284,33 @@ 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-animation-length-exact": "Exact",
+	"timeslider-anchor-time": "Ankertijd",
+	"timeslider-auto-animation-length": "Automatische animatielengte",
+	"timeslider-date": "Datum",
+	"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 +2439,537 @@ 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 defaultNowAnimationLength = {
+  mode: AnimationLengthMode.Now,
+  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);
+};
+/**
+ * Offsets are signed: negative lands before now, 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 resolveNowAnimationRange = function resolveNowAnimationRange(_ref3, now) {
+  var _ref3$startOffset = _ref3.startOffset,
+    startOffset = _ref3$startOffset === void 0 ? defaultStartOffset : _ref3$startOffset,
+    _ref3$endOffset = _ref3.endOffset,
+    endOffset = _ref3$endOffset === void 0 ? defaultEndOffset : _ref3$endOffset;
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return {
+    animationStartTime: toAnimationTime(dateUtils.add(now, offsetToDuration(startOffset))),
+    animationEndTime: toAnimationTime(dateUtils.add(now, offsetToDuration(endOffset)))
+  };
+};
+/** Offsets can use different units, so validity is decided on the resolved instants. */
+var isValidAnimationLength = function isValidAnimationLength(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode === AnimationLengthMode.Now) {
+    var _resolveNowAnimationR = resolveNowAnimationRange(setting, now),
+      animationStartTime = _resolveNowAnimationR.animationStartTime,
+      animationEndTime = _resolveNowAnimationR.animationEndTime;
+    return dateUtils.isBefore(dateUtils.utc(animationStartTime), dateUtils.utc(animationEndTime));
+  }
+  if (setting.animationStartTime && setting.animationEndTime) {
+    return dateUtils.isBefore(dateUtils.utc(setting.animationStartTime).setSeconds(0, 0), dateUtils.utc(setting.animationEndTime).setSeconds(0, 0));
+  }
+  return true;
+};
+/** 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 _resolveNowAnimationR2 = resolveNowAnimationRange(setting, now),
+    animationStartTime = _resolveNowAnimationR2.animationStartTime,
+    animationEndTime = _resolveNowAnimationR2.animationEndTime;
+  var spanInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
+  return Math.abs(spanInMinutes) / timeStepInMinutes <= MAX_ANIMATION_STEPS;
+};
+var exactAnimationLength = {
+  mode: AnimationLengthMode.Exact
+};
+var toExactAnimationTime = function toExactAnimationTime(date) {
+  return dateUtils.dateToIsoString(date);
+};
+
+var selectableModes = [AnimationLengthMode.Auto, AnimationLengthMode.Now, 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';
+var styles$1 = {
+  menu: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '260px',
+    padding: '8px 12px'
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: 700
+  },
+  caption: {
+    color: 'geowebColors.greys.accessible',
+    fontSize: 11
+  },
+  radioLabel: {
+    '& .MuiFormControlLabel-label': {
+      fontSize: 14
+    }
+  },
+  anchorRow: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 1,
+    paddingY: 0.5
+  },
+  anchorValue: {
+    flexGrow: 1,
+    fontSize: 14,
+    fontWeight: 700
+  },
+  /* Matches the reserved error line below, so the fields sit between equal gaps. */
+  offsets: {
+    display: 'flex',
+    gap: 1,
+    paddingTop: RESERVED_ERROR_HEIGHT
+  },
+  reservedError: {
+    visibility: 'hidden'
+  },
+  readOnlyValue: {
+    fontSize: 14
+  },
+  exact: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  dateTimePicker: {
+    paddingBottom: 2
+  }
+};
+var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
+  var _setting$startOffset2, _setting$endOffset2;
+  var setting = _ref.setting,
+    onChange = _ref.onChange,
+    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;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var changeMode = function changeMode(mode) {
+    if (mode === AnimationLengthMode.Now) {
+      var _setting$startOffset, _setting$endOffset;
+      onChange({
+        mode: mode,
+        startOffset: (_setting$startOffset = setting.startOffset) != null ? _setting$startOffset : defaultStartOffset,
+        endOffset: (_setting$endOffset = setting.endOffset) != null ? _setting$endOffset : defaultEndOffset
+      });
+      return;
+    }
+    onChange(Object.assign({}, setting, {
+      mode: mode
+    }));
+  };
+  var startOffset = (_setting$startOffset2 = setting.startOffset) != null ? _setting$startOffset2 : defaultStartOffset;
+  var endOffset = (_setting$endOffset2 = setting.endOffset) != null ? _setting$endOffset2 : defaultEndOffset;
+  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) {
+    var changed = asTimeOffset(offset);
+    onChange(Object.assign({}, setting, {
+      startOffset: changed,
+      endOffset: asTimeOffset(Object.assign({}, endOffset, {
+        unit: changed.unit
+      }))
+    }));
+  };
+  var changeEndOffset = function changeEndOffset(offset) {
+    var changed = asTimeOffset(offset);
+    onChange(Object.assign({}, setting, {
+      startOffset: asTimeOffset(Object.assign({}, startOffset, {
+        unit: changed.unit
+      })),
+      endOffset: changed
+    }));
+  };
+  var followsClock = setting.mode === AnimationLengthMode.Now;
+  var hasInvertedRange = !isValidAnimationLength(setting);
+  var hasTooManySteps = followsClock && !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;
+  };
+  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) + " UTC" : '';
+  };
+  /* 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 handleChangeStartTime = function handleChangeStartTime(date) {
+    return onChange(Object.assign({}, setting, {
+      animationStartTime: date ? toExactAnimationTime(date) : undefined,
+      animationEndTime: animationEndTime
+    }));
+  };
+  var handleChangeEndTime = function handleChangeEndTime(date) {
+    return onChange(Object.assign({}, setting, {
+      animationStartTime: animationStartTime,
+      animationEndTime: date ? toExactAnimationTime(date) : undefined
+    }));
+  };
+  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: styles$1.readOnlyValue,
+        children: describedAnimationLength
+      })]
+    }), setting.mode === AnimationLengthMode.Now && 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-now')
+        }), jsx(Typography, {
+          sx: styles$1.caption,
+          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,
+          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,
+          unit: endOffset.unit,
+          unitOptions: unitOptions,
+          value: endOffset.value
+        })]
+      }), jsx(FormHelperText, {
+        "data-testid": "animationLengthRangeError",
+        error: true,
+        sx: hasRangeError ? undefined : styles$1.reservedError,
+        children: rangeError
+      })]
+    }), setting.mode === AnimationLengthMode.Exact && jsxs(Box, {
+      sx: styles$1.exact,
+      children: [jsx(DateTimePicker, {
+        label: t('timeslider-start-time'),
+        onChange: handleChangeStartTime,
+        slotProps: {
+          textField: {
+            error: hasRangeError
+          }
+        },
+        sx: styles$1.dateTimePicker,
+        value: animationStartTime ? new Date(animationStartTime) : undefined
+      }), jsx(DateTimePicker, {
+        label: t('timeslider-end-time'),
+        onChange: handleChangeEndTime,
+        slotProps: {
+          textField: {
+            error: hasRangeError
+          }
+        },
+        value: animationEndTime ? new Date(animationEndTime) : undefined
+      }), jsx(FormHelperText, {
+        "data-testid": "animationLengthRangeError",
+        error: true,
+        sx: hasRangeError ? undefined : styles$1.reservedError,
+        children: rangeError
+      })]
+    }), !selectableModes.includes(setting.mode) && jsxs(Box, {
+      children: [jsx(Typography, {
+        sx: styles$1.caption,
+        children: t('timeslider-start-time')
+      }), jsx(Typography, {
+        sx: styles$1.readOnlyValue,
+        children: asDisplayTime(animationStartTime)
+      }), jsx(Typography, {
+        sx: styles$1.caption,
+        children: t('timeslider-end-time')
+      }), jsx(Typography, {
+        sx: styles$1.readOnlyValue,
+        children: asDisplayTime(animationEndTime)
+      })]
+    })]
+  });
+};
+
+var styles = {
+  button: {
+    padding: '0px',
+    paddingRight: '12px',
+    width: '100%!important',
+    minWidth: '64px',
+    justifyContent: 'space-between'
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: 400,
+    textTransform: 'none'
+  }
+};
+var AnimationLengthPanel = function AnimationLengthPanel(_ref) {
+  var setting = _ref.setting,
+    onChange = _ref.onChange,
+    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;
+  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))) : '';
+  var asDisplayTime = function asDisplayTime(time) {
+    return time ? dateUtils.dateToString(dateUtils.utc(time), dateUtils.DATE_FORMAT_DATEPICKER) + " UTC" : '';
+  };
+  /* 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 buttonLabel = function (_setting$startOffset, _setting$endOffset) {
+    switch (setting.mode) {
+      case AnimationLengthMode.Auto:
+        return t('timeslider-auto') + " " + describedAnimationLength;
+      case AnimationLengthMode.Now:
+        return t('timeslider-now') + " " + asSignedOffsetLabel((_setting$startOffset = setting.startOffset) != null ? _setting$startOffset : defaultStartOffset) + " / " + asSignedOffsetLabel((_setting$endOffset = setting.endOffset) != null ? _setting$endOffset : defaultEndOffset);
+      case AnimationLengthMode.Exact:
+        return "" + t('timeslider-animation-length-exact');
+      default:
+        return describedAnimationLength;
+    }
+  }();
+  /* Following the clock, so the heading names the anchor the offsets are counted from. */
+  var tooltipHeading = setting.mode === AnimationLengthMode.Now ? t('timeslider-now') + " - " + dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS) : 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,
+        setting: setting,
+        timeStep: timeStep
+      })
+    })]
+  });
+};
+
 var AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
     toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
@@ -2928,6 +3558,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 +3577,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 +3868,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 +3919,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 +3957,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 +4000,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 +4282,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 { AUTO_MOVE_AREA_PADDING, 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, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultEndOffset, defaultNowAnimationLength, defaultSecondsPerPx, defaultStartOffset, defaultTimeSpan, defaultTimeStep, exactAnimationLength, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, isValidAnimationLength, isWithinAnimationStepLimit, marks$1 as marks, minutesToDescribedDuration, modeTranslationKey, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, resolveNowAnimationRange, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, shortUnitTranslationKey, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeUnits, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, toExactAnimationTime, unitTranslationKey, useCanvasTarget };

package/dist/src/lib/components/TimeSliderButtons/AnimationLengthPanel/AnimationLengthMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AnimationLengthSetting } from './animationLengthUtils';
+export interface AnimationLengthMenuProps {
+    setting: AnimationLengthSetting;
+    onChange: (setting: AnimationLengthSetting) => void;
+    animationStartTime?: string;
+    animationEndTime?: string;
+    autoTimeStepLayerName?: string;
+    timeStep?: number;
+    isAutoDisabled?: boolean;
+    disabled?: boolean;
+}
+export declare const AnimationLengthMenu: React.FC<AnimationLengthMenuProps>;

package/dist/src/lib/components/TimeSliderButtons/AnimationLengthPanel/AnimationLengthPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AnimationLengthSetting } from './animationLengthUtils';
+export interface AnimationLengthPanelProps {
+    setting: AnimationLengthSetting;
+    onChange: (setting: AnimationLengthSetting) => void;
+    animationStartTime?: string;
+    animationEndTime?: string;
+    autoTimeStepLayerName?: string;
+    timeStep?: number;
+    isAutoDisabled?: boolean;
+    disabled?: boolean;
+}
+export declare const AnimationLengthPanel: React.FC<AnimationLengthPanelProps>;

package/dist/src/lib/components/TimeSliderButtons/AnimationLengthPanel/animationLengthUtils.d.ts

@@ -0,0 +1,47 @@
+export declare enum AnimationLengthMode {
+    Auto = "auto",
+    Now = "now",
+    RecurringPeriod = "recurringPeriod",
+    ReferenceTime = "referenceTime",
+    Exact = "exact"
+}
+export type TimeUnit = 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes';
+export declare const timeUnits: TimeUnit[];
+export interface RelativeTimeOffset {
+    value: number;
+    unit: TimeUnit;
+}
+export interface AnimationLengthSetting {
+    mode: AnimationLengthMode;
+    startOffset?: RelativeTimeOffset;
+    endOffset?: RelativeTimeOffset;
+    animationStartTime?: string;
+    animationEndTime?: string;
+}
+export interface AnimationRange {
+    animationStartTime: string;
+    animationEndTime: string;
+}
+export declare const defaultStartOffset: RelativeTimeOffset;
+export declare const defaultEndOffset: RelativeTimeOffset;
+export declare const defaultNowAnimationLength: AnimationLengthSetting;
+export declare const unitTranslationKey: Record<TimeUnit, string>;
+export declare const shortUnitTranslationKey: Record<TimeUnit, string>;
+export declare const modeTranslationKey: Record<AnimationLengthMode, string>;
+/**
+ * Offsets are signed: negative lands before now, 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.
+ */
+export declare const resolveNowAnimationRange: ({ startOffset, endOffset, }: AnimationLengthSetting, now?: Date) => AnimationRange;
+/** Offsets can use different units, so validity is decided on the resolved instants. */
+export declare const isValidAnimationLength: (setting: AnimationLengthSetting, now?: Date) => boolean;
+/** Frames the animation may hold; the range is expanded one entry per time step. */
+export declare const 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.
+ */
+export declare const isWithinAnimationStepLimit: (setting: AnimationLengthSetting, timeStepInMinutes: number | undefined, now?: Date) => boolean;
+export declare const exactAnimationLength: AnimationLengthSetting;
+export declare const toExactAnimationTime: (date: Date) => string;

package/dist/src/lib/components/TimeSliderButtons/AnimationLengthPanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './animationLengthUtils';
+export * from './AnimationLengthMenu';
+export * from './AnimationLengthPanel';

package/dist/src/lib/components/TimeSliderButtons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AnimationLengthButton/AnimationLengthButton';
+export * from './AnimationLengthPanel';
 export * from './AutoUpdateButton/AutoUpdateButton';
 export * from './BackwardForwardStepButton/BackwardForwardStepButton';
 export * from './ControlButtons/ControlButtons';

package/package.json

@@ -1,46 +1,46 @@
 {
-  "name": "@opengeoweb/time-slider",
-  "version": "19.6.0",
-  "description": "GeoWeb time-slider library for the opengeoweb project",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
-  },
-  "main": "./dist/index.esm.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "@opengeoweb/source": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
-    }
-  },
-  "dependencies": {
-    "@opengeoweb/shared": "*",
-    "lodash": "^4.18.1",
-    "@opengeoweb/theme": "*",
-    "@mui/x-date-pickers": "^9.3.0",
-    "@mui/system": "^9.0.1",
-    "i18next": "^25.0.1",
-    "@mui/material": "^9.0.1",
-    "react-i18next": "^15.1.1"
-  },
-  "peerDependencies": {
-    "react": "19",
-    "@emotion/react": "*",
-    "@emotion/styled": "*"
-  },
-  "devDependencies": {
-    "eslint-plugin-storybook": "10.3.3"
-  },
-  "files": [
-    "dist",
-    "!dist/package.json",
-    "README.md",
-    "package.json"
-  ]
-}
+    "name": "@opengeoweb/time-slider",
+    "version": "19.6.1-nightly-20260913",
+    "description": "GeoWeb time-slider library for the opengeoweb project",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
+    },
+    "main": "./dist/index.esm.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "@opengeoweb/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "default": "./dist/index.esm.js"
+        }
+    },
+    "dependencies": {
+        "@opengeoweb/shared": "19.6.1-nightly-20260913",
+        "lodash": "^4.18.1",
+        "@opengeoweb/theme": "19.6.1-nightly-20260913",
+        "@mui/x-date-pickers": "^9.3.0",
+        "@mui/system": "^9.0.1",
+        "i18next": "^25.0.1",
+        "@mui/material": "^9.0.1",
+        "react-i18next": "^15.1.1"
+    },
+    "peerDependencies": {
+        "react": "19",
+        "@emotion/react": "*",
+        "@emotion/styled": "*"
+    },
+    "devDependencies": {
+        "eslint-plugin-storybook": "10.3.3"
+    },
+    "files": [
+        "dist",
+        "!dist/package.json",
+        "README.md",
+        "package.json"
+    ]
+}