@opengeoweb/time-slider-lite 17.0.1 → 17.1.0

package/index.esm.js

@@ -1,2899 +0,0 @@
-import { Card, Typography, IconButton, CardContent, Select, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Box, ToggleButtonGroup, ToggleButton, Divider, useTheme, ButtonGroup, Tooltip } from '@mui/material';
-import React, { useState, useEffect, useLayoutEffect, useRef, createElement } from 'react';
-import { Close, ChevronDown, ChevronUp, Options, Pause, Play, StepForward, StepBackward } from '@opengeoweb/theme';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { usePrevious, safelyInitI18nForTestsAndStories } from '@opengeoweb/shared';
-import { speedFactors, defaultAnimationDelayAtStart } from '@opengeoweb/time-slider';
-import i18n from 'i18next';
-import { I18nextProvider, useTranslation } from 'react-i18next';
-import { CORE_NAMESPACE, coreTranslations } from '@opengeoweb/core';
-import { useDispatch, useSelector } from 'react-redux';
-import { mapActions, mapEnums, mapSelectors, genericActions } from '@opengeoweb/store';
-import { handleDateUtilsISOString } from '@opengeoweb/webmap';
-import Draggable from 'react-draggable';
-
-var en = {
-	common: {
-		"default": "Default",
-		custom: "Custom",
-		observed: "Observed",
-		forecast: "Forecast"
-	},
-	units: {
-		days: "days",
-		hours: "hours",
-		minutes: "min"
-	},
-	menu: {
-		title: "Animation options",
-		timeRange: {
-			title: "Time range",
-			description: "Time range from current time",
-			button: "Time range"
-		},
-		timeStep: {
-			title: "Time step",
-			button: "Time step"
-		},
-		speed: {
-			title: "Animation speed",
-			button: "Speed"
-		},
-		updateInterval: {
-			title: "Update interval",
-			button: "Update interval"
-		},
-		LT: "LT",
-		UTC: "UTC"
-	},
-	controlButtons: {
-		play: "Play",
-		pause: "Pause",
-		forward: "Forward",
-		backward: "Backward",
-		hide: "Hide",
-		show: "Show"
-	}
-};
-var fi = {
-	common: {
-		"default": "Oletus",
-		custom: "Valitse",
-		observed: "Havainto",
-		forecast: "Ennuste"
-	},
-	units: {
-		days: "vrk",
-		hours: "h",
-		minutes: "min"
-	},
-	menu: {
-		title: "Aikajana-asetukset",
-		timeRange: {
-			title: "Aikaväli",
-			description: "Valittu aika nykyhetkestä",
-			button: "Aikaväli"
-		},
-		timeStep: {
-			title: "Aika-askel",
-			button: "Aika-askel"
-		},
-		speed: {
-			title: "Animointinopeus",
-			button: "Animointinopeus"
-		},
-		updateInterval: {
-			title: "Päivitysväli",
-			button: "Päivitysväli"
-		},
-		LT: "PA",
-		UTC: "UTC"
-	},
-	controlButtons: {
-		play: "Toista",
-		pause: "Pysäytä",
-		forward: "Eteenpäin",
-		backward: "Taaksepäin",
-		hide: "Piilota aikajana",
-		show: "Näytä aikajana"
-	}
-};
-var translations = {
-	en: en,
-	"sv-FI": {
-	common: {
-		"default": "Standard",
-		custom: "Välj",
-		observed: "Observation",
-		forecast: "Prognos"
-	},
-	units: {
-		days: "dygn",
-		hours: "h",
-		minutes: "min"
-	},
-	menu: {
-		title: "Tidslinjeinställningar",
-		timeRange: {
-			title: "Tidsintervall",
-			description: "Vald tid från nu",
-			button: "Tidsintervall"
-		},
-		timeStep: {
-			title: "Tidssteg",
-			button: "Tidssteg"
-		},
-		speed: {
-			title: "Animationshastighet",
-			button: "Hastighet"
-		},
-		updateInterval: {
-			title: "Uppdateringsintervall",
-			button: "Uppdateringsintervall"
-		},
-		LT: "LT",
-		UTC: "UTC"
-	},
-	controlButtons: {
-		play: "Spela",
-		pause: "Paus",
-		forward: "Framåt",
-		backward: "Bakåt",
-		hide: "Dölj tidslinje",
-		show: "Visa tidslinje"
-	}
-},
-	fi: fi
-};
-
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-var _excluded$4 = ["children", "closeButtonIcon", "sx", "setSubmenu", "title"];
-var SubmenuWrapper = function SubmenuWrapper(_ref) {
-  var children = _ref.children,
-    closeButtonIcon = _ref.closeButtonIcon,
-    sx = _ref.sx,
-    setSubmenu = _ref.setSubmenu,
-    title = _ref.title,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/jsxs(Card, Object.assign({}, props, {
-    sx: Object.assign({
-      position: 'relative'
-    }, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx),
-    children: [/*#__PURE__*/jsx(Typography, {
-      sx: {
-        fontWeight: '500',
-        padding: '16px',
-        paddingBottom: '0px'
-      },
-      children: title
-    }), /*#__PURE__*/jsx(IconButton, {
-      "data-testid": "TimeSliderLite-submenuWrapper-closeButton",
-      onClick: function onClick() {
-        return setSubmenu == null ? void 0 : setSubmenu(null);
-      },
-      size: "small",
-      sx: {
-        position: 'absolute',
-        top: 4,
-        right: 4
-      },
-      children: closeButtonIcon != null ? closeButtonIcon : /*#__PURE__*/jsx(Close, {
-        "data-testid": "TimeSliderLite-submenuWrapper-defaultCloseIcon"
-      })
-    }), children]
-  }));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var DAY_TO_MILLISECOND = 24 * 60 * 60 * 1000;
-var DAY_TO_SECOND = 86400;
-var HOUR_TO_SECOND = 3600;
-var HOUR_TO_MINUTE = 60;
-var MILLISECOND_TO_DAY = 1 / 86400000;
-var MILLISECOND_TO_SECOND = 1 / 1000;
-var MILLISECOND_TO_MINUTE = 1 / 60000;
-var MINUTE_TO_SECOND = 60;
-var MINUTE_TO_MILLISECOND = 60000;
-var SECOND_TO_DAY = 1 / 86400;
-var SECOND_TO_HOUR = 1 / 3600;
-var SECOND_TO_MILLISECOND = 1000;
-var SEVEN_DAYS_IN_SECONDS = 7 * 24 * 60 * 60;
-var ONE_DAY_IN_SECONDS = DAY_TO_SECOND;
-/**
- * Default behaviour for time slider lite to update
- *  - Update current time
- *  - Update time range
- *
- * Layers are updated using the native auto update functionality implemented in ReactMapView.tsx
- *
- * @param mapId
- * @param options
- */
-var defaultTimeSliderLiteUpdate = function defaultTimeSliderLiteUpdate(options) {
-  if (document.visibilityState !== 'visible') {
-    return;
-  }
-  var setCurrentTime = options.setCurrentTime,
-    timeRange = options.timeRange,
-    currentTime = options.currentTime,
-    setTimeRange = options.setTimeRange;
-  var newCurrentTime = Math.floor(Date.now() * MILLISECOND_TO_SECOND);
-  var delta = newCurrentTime - currentTime;
-
-  // Update current time and trigger update in useDefaultTimeRange hook
-  setCurrentTime(currentTime + delta);
-  if (timeRange && setTimeRange) {
-    setTimeRange([timeRange[0] + delta, timeRange[1] + delta]);
-  }
-};
-
-/**
- * Connected hook for updating time range and current time every 10 seconds
- * @param updateInterval Update interval in minutes
- * @param timeRange [startTime, endTime] in seconds
- * @param setTimeRange Sets the time range
- * @param options Options
- */
-var useAutoUpdate = function useAutoUpdate(timeRange, setTimeRange, options) {
-  var _useState = useState(Math.floor(Date.now() * MILLISECOND_TO_SECOND)),
-    currentTime = _useState[0],
-    setCurrentTime = _useState[1];
-  useEffect(function () {
-    var intervalCallback = function intervalCallback() {
-      var _options$handleUpdate;
-      return ((_options$handleUpdate = options == null ? void 0 : options.handleUpdate) != null ? _options$handleUpdate : defaultTimeSliderLiteUpdate)({
-        setCurrentTime: setCurrentTime,
-        currentTime: currentTime,
-        timeRange: timeRange,
-        setTimeRange: setTimeRange
-      });
-    };
-    var interval = setInterval(intervalCallback, 10 * SECOND_TO_MILLISECOND);
-    document.addEventListener('visibilitychange', intervalCallback);
-    return function () {
-      clearInterval(interval);
-      document.removeEventListener('visibilitychange', intervalCallback);
-    };
-  }, [timeRange, setTimeRange, options == null ? void 0 : options.handleUpdate, currentTime, setCurrentTime]);
-  return {
-    currentTime: currentTime
-  };
-};
-
-/**
- * Reformats a date that has capitalized first letter and colon separator for time
- * @param dateString Date string from Date.toLocaleDateString
- * @returns Reformatted date string
- */
-var reformatFinnishDateString = function reformatFinnishDateString(dateString) {
-  var charPositionOfTimestamp = -4;
-  return dateString.charAt(0).toUpperCase() + dateString.slice(1, charPositionOfTimestamp) + dateString.slice(charPositionOfTimestamp).replace('.', ':');
-};
-
-/**
- * Marks UTC time with Z after hh:mm or hh.mm or appends UTC to the end of the date string
- * If two matches of time are found, the second one is marked
- */
-var shortUTCTime = function shortUTCTime(dateString) {
-  var timeRegex = /(\d[:.]\d{2})/g;
-  var match = dateString.match(timeRegex);
-  if (!match) {
-    return dateString + " UTC";
-  }
-  var first = match[0],
-    second = match[1];
-  if (second) {
-    var secondIndex = dateString.lastIndexOf(second);
-    return "" + dateString.substring(0, secondIndex) + second + "Z" + dateString.substring(secondIndex + second.length);
-  }
-  return dateString.replace(first, first + "Z");
-};
-var getMonthChanges = function getMonthChanges(startDate, endDate) {
-  var result = [];
-  var currentDate = new Date(startDate.getTime());
-  var lastDate = new Date(endDate.getTime());
-  currentDate.setDate(1);
-  currentDate.setHours(0, 0, 0, 0);
-  while (currentDate <= lastDate) {
-    result.push(currentDate.getTime() * MILLISECOND_TO_SECOND);
-    currentDate.setMonth(currentDate.getMonth() + 1);
-  }
-  return result;
-};
-var isWithinRange = function isWithinRange(time, target, range) {
-  return Math.abs(time - target) <= range;
-};
-var getSelectedTimePx = function getSelectedTimePx(startTime, endTime, selectedTime, width) {
-  var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
-  var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
-  var selectedTimeX = selectedTime - startDateX;
-  var needleX = Math.floor(selectedTimeX / (endTime - startTime) * width);
-  return needleX;
-};
-var boundedValue = function boundedValue(value, bounds) {
-  var min = bounds[0],
-    max = bounds[1];
-  return Math.max(min, Math.min(max, value));
-};
-var getSelectedTimeFromPx = function getSelectedTimeFromPx(startTime, endTime, selectedTimePx, width) {
-  var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
-  var startDateX = startDate.getTime() * MILLISECOND_TO_SECOND;
-  var selectedTimeX = Math.floor(selectedTimePx / width * (endTime - startTime));
-  var selectedTime = selectedTimeX + startDateX;
-  return selectedTime;
-};
-var getNearestSelectableTime = function getNearestSelectableTime(timeStep, startTime, endTime, x, width, currentTime, disableForecast, timeZoneOffsetSeconds) {
-  var observedTimeStepSeconds = timeStep[0];
-  var forecastTimeStepSeconds = timeStep[1];
-  var hoveredTime = getSelectedTimeFromPx(startTime, endTime, x, width);
-  var lastObservedTime = floorLocalSeconds(currentTime, observedTimeStepSeconds, timeZoneOffsetSeconds);
-  if (disableForecast && hoveredTime >= lastObservedTime) {
-    return lastObservedTime;
-  }
-  var timeStepSeconds = hoveredTime >= currentTime ? forecastTimeStepSeconds : observedTimeStepSeconds;
-  var firstForecastTime = floorLocalSeconds(currentTime, forecastTimeStepSeconds, timeZoneOffsetSeconds) + forecastTimeStepSeconds;
-  var isBetweenObservedAndForecast = hoveredTime >= lastObservedTime && hoveredTime < firstForecastTime;
-  var roundedCurrentTime = hoveredTime >= (lastObservedTime + firstForecastTime) / 2 ? firstForecastTime : lastObservedTime;
-  var result = isBetweenObservedAndForecast ? roundedCurrentTime : floorLocalSeconds(hoveredTime + timeStepSeconds / 2, timeStepSeconds, timeZoneOffsetSeconds);
-  return result;
-};
-var floorLocalMinutes = function floorLocalMinutes(selectedTimeMinutes, timeStepMinutes, timeZoneOffsetMinutes) {
-  var localTimeZoneOffset = timeZoneOffsetMinutes != null ? timeZoneOffsetMinutes : new Date().getTimezoneOffset();
-  var unFlooredTimeSteps = (selectedTimeMinutes - localTimeZoneOffset) / timeStepMinutes;
-  return Math.floor(unFlooredTimeSteps) * timeStepMinutes + localTimeZoneOffset;
-};
-var floorLocalSeconds = function floorLocalSeconds(selectedTimeSeconds, timeStepSeconds, timeZoneOffsetSeconds) {
-  if (timeZoneOffsetSeconds === 0) {
-    return Math.floor(selectedTimeSeconds / timeStepSeconds) * timeStepSeconds;
-  }
-  var localTimeZoneOffset = timeZoneOffsetSeconds != null ? timeZoneOffsetSeconds : new Date().getTimezoneOffset() * 60;
-  var unFlooredTimeSteps = (selectedTimeSeconds - localTimeZoneOffset) / timeStepSeconds;
-  return Math.floor(unFlooredTimeSteps) * timeStepSeconds + localTimeZoneOffset;
-};
-var secondsToDaysAndHours = function secondsToDaysAndHours(seconds) {
-  var days = Math.floor(seconds * SECOND_TO_DAY);
-  var hours = Math.round(seconds % DAY_TO_SECOND * SECOND_TO_HOUR);
-  if (hours === 24) {
-    return {
-      days: days + 1,
-      hours: 0
-    };
-  }
-  return {
-    days: days,
-    hours: hours
-  };
-};
-var hoursAndDaysToSeconds = function hoursAndDaysToSeconds(hours, days) {
-  return hours * HOUR_TO_SECOND + days * DAY_TO_SECOND;
-};
-var TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE = 2 * SEVEN_DAYS_IN_SECONDS;
-var TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE = SEVEN_DAYS_IN_SECONDS;
-
-/**
- * Checks which layers have observed/forecasted data and returns a default time range
- * @param layers layerTypes.ReduxLayer[] Map layers
- * @param currentTime Current time in seconds
- * @param overrideDefaultTimeRange [observedTimeRange, forecastTime] in seconds from current time
- * @returns [startTime, endTime] in seconds
- */
-var defaultTimeRange = function defaultTimeRange(layers, currentTime, overrideDefaultTimeRange) {
-  if (currentTime === void 0) {
-    currentTime = Math.floor(Date.now() * MILLISECOND_TO_SECOND);
-  }
-  var defaultBounds = [currentTime - TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE, currentTime + TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE];
-  var bounds = overrideDefaultTimeRange ? [currentTime - overrideDefaultTimeRange[0], currentTime + overrideDefaultTimeRange[1]] : defaultBounds;
-  var timeDimensions = [];
-  layers.forEach(function (layer) {
-    var _layer$dimensions;
-    var timeDimension = (_layer$dimensions = layer.dimensions) == null ? void 0 : _layer$dimensions.find(function (dimension) {
-      return dimension.name === 'time';
-    });
-    if (timeDimension != null && timeDimension.minValue && timeDimension != null && timeDimension.maxValue) {
-      timeDimensions.push(timeDimension);
-    }
-  });
-  if (timeDimensions.length === 0) {
-    return bounds;
-  }
-  var minMinValue = Math.min.apply(Math, timeDimensions.map(function (dimension) {
-    return new Date(dimension.minValue).valueOf() * MILLISECOND_TO_SECOND;
-  }));
-  var maxMaxValue = Math.max.apply(Math, timeDimensions.map(function (dimension) {
-    return new Date(dimension.maxValue).valueOf() * MILLISECOND_TO_SECOND;
-  }));
-  return [Math.max(bounds[0], minMinValue), Math.min(bounds[1], maxMaxValue)];
-};
-var useDefaultTimeRange = function useDefaultTimeRange(layers, updateThreshold, currentTime) {
-  if (currentTime === void 0) {
-    currentTime = Math.floor(Date.now() * MILLISECOND_TO_SECOND);
-  }
-  var _useState2 = useState([0, 0]),
-    _useState2$ = _useState2[0],
-    defaultStartTime = _useState2$[0],
-    defaultEndTime = _useState2$[1],
-    setDefaultTimeRange = _useState2[1];
-  var updateThresholdInMinutes = updateThreshold * MINUTE_TO_SECOND;
-  var updateDefaultTimeRange = function updateDefaultTimeRange() {
-    var newTimeRange = defaultTimeRange(layers, currentTime);
-    var defaultStartTimeChanged = Math.abs(newTimeRange[0] - defaultStartTime) > updateThresholdInMinutes;
-    var defaultEndTimeChanged = Math.abs(newTimeRange[1] - defaultEndTime) > updateThresholdInMinutes;
-    if (defaultStartTimeChanged || defaultEndTimeChanged) {
-      setDefaultTimeRange(newTimeRange);
-    }
-  };
-  useEffect(function () {
-    updateDefaultTimeRange();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layers, currentTime]);
-  return [defaultStartTime, defaultEndTime];
-};
-var generateCustomTimeList = function generateCustomTimeList(currentTime, startTime, endTime, timeStep, timeZoneOffsetSeconds) {
-  var localTimeZoneOffset = timeZoneOffsetSeconds !== undefined ? timeZoneOffsetSeconds : new Date().getTimezoneOffset() * MINUTE_TO_SECOND;
-  var observedTimeStep = timeStep[0] * MINUTE_TO_SECOND;
-  var forecastTimeStep = timeStep[1] * MINUTE_TO_SECOND;
-  var firstObservedTimeStep = floorLocalSeconds(startTime, observedTimeStep, localTimeZoneOffset);
-  if (firstObservedTimeStep < startTime) {
-    firstObservedTimeStep += observedTimeStep;
-  }
-  var lastObservedTimeStep = floorLocalSeconds(currentTime, observedTimeStep, localTimeZoneOffset);
-  var truncatePassingHour = currentTime - startTime < 0;
-  var firstForecastTimeStep = truncatePassingHour ? floorLocalSeconds(currentTime + HOUR_TO_SECOND, HOUR_TO_SECOND, localTimeZoneOffset) - 1 : floorLocalSeconds(currentTime, forecastTimeStep, localTimeZoneOffset);
-  var lastForecastTimeStep = floorLocalSeconds(endTime, forecastTimeStep, localTimeZoneOffset);
-  var observedTimeList = [];
-  var forecastTimeList = [];
-  var time = firstObservedTimeStep;
-  while (time <= lastObservedTimeStep) {
-    var observedTimeListItem = {
-      name: 'time',
-      value: new Date(time * SECOND_TO_MILLISECOND).toISOString()
-    };
-    observedTimeList.push(observedTimeListItem);
-    time += observedTimeStep;
-  }
-  time = lastForecastTimeStep;
-  while (time > firstForecastTimeStep) {
-    var forecastTimeListItem = {
-      name: 'time',
-      value: new Date(time * SECOND_TO_MILLISECOND).toISOString()
-    };
-    forecastTimeList.push(forecastTimeListItem);
-    time -= forecastTimeStep;
-  }
-  forecastTimeList.reverse();
-  return [].concat(observedTimeList, forecastTimeList);
-};
-var TickMode = /*#__PURE__*/function (TickMode) {
-  TickMode[TickMode["DAY"] = 1] = "DAY";
-  TickMode[TickMode["HALF_A_DAY"] = 2] = "HALF_A_DAY";
-  TickMode[TickMode["SIX_HOURS"] = 4] = "SIX_HOURS";
-  TickMode[TickMode["THREE_HOURS"] = 8] = "THREE_HOURS";
-  TickMode[TickMode["ONE_HOUR"] = 24] = "ONE_HOUR";
-  TickMode[TickMode["HALF_AN_HOUR"] = 48] = "HALF_AN_HOUR";
-  TickMode[TickMode["FIFTEEN_MINUTES"] = 96] = "FIFTEEN_MINUTES";
-  return TickMode;
-}(TickMode || {});
-var subTicksPerDay = function subTicksPerDay(dayWidthInPixels) {
-  if (dayWidthInPixels < 40) {
-    return TickMode.DAY;
-  }
-  if (dayWidthInPixels < 75) {
-    return TickMode.HALF_A_DAY;
-  }
-  if (dayWidthInPixels < 400) {
-    return TickMode.SIX_HOURS;
-  }
-  if (dayWidthInPixels < 800) {
-    return TickMode.THREE_HOURS;
-  }
-  if (dayWidthInPixels < 1600) {
-    return TickMode.ONE_HOUR;
-  }
-  if (dayWidthInPixels < 3200) {
-    return TickMode.HALF_AN_HOUR;
-  }
-  return TickMode.FIFTEEN_MINUTES;
-};
-var maxSubTicksPerDay = function maxSubTicksPerDay(dayWidthInPixels, timeStep) {
-  return Math.min(subTicksPerDay(dayWidthInPixels), Math.floor(ONE_DAY_IN_SECONDS / timeStep));
-};
-var getRemainingHours = function getRemainingHours(maxHours, days) {
-  var hourDifference = maxHours && maxHours - days * 24;
-  var result = maxHours && hourDifference && hourDifference > 0 ? hourDifference : 0;
-  return result;
-};
-var secondsSinceLocalMidnight = function secondsSinceLocalMidnight(currentTimeInSeconds) {
-  return new Date(currentTimeInSeconds * 1000).getHours() * HOUR_TO_SECOND + new Date(currentTimeInSeconds * 1000).getMinutes() * MINUTE_TO_SECOND + new Date(currentTimeInSeconds * 1000).getSeconds();
-};
-var getTimeScaleDescription = function getTimeScaleDescription(timeScale) {
-  if (timeScale !== 1 && timeScale < HOUR_TO_SECOND) {
-    return Math.round(timeScale / MINUTE_TO_SECOND) + " minutes is ~1 second";
-  }
-  if (timeScale > 60) {
-    var hours = Math.floor(timeScale / HOUR_TO_SECOND);
-    var mins = Math.round((timeScale - hours * HOUR_TO_SECOND) / MINUTE_TO_SECOND);
-    return hours + " h " + mins + " min is ~1 second";
-  }
-  return 'Real-time';
-};
-/**
- * Keeps selected time in sync with default time
- * @returns True if selected time sync to default time is enabled
- */
-var useAutoUpdateSelectedTime = function useAutoUpdateSelectedTime(defaultTime, selectedTime, setSelectedTime) {
-  var defaultTimeBeforeChange = usePrevious(defaultTime);
-  var _useState3 = useState(defaultTime),
-    previousDefaultTime = _useState3[0],
-    setPreviousDefaultTime = _useState3[1];
-  useEffect(function () {
-    if (defaultTime !== defaultTimeBeforeChange) {
-      setPreviousDefaultTime(defaultTimeBeforeChange);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultTime]);
-  useEffect(function () {
-    if (previousDefaultTime === selectedTime) {
-      setSelectedTime(defaultTime);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previousDefaultTime]);
-  return defaultTime === selectedTime;
-};
-
-var timeSliderLiteUtils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DAY_TO_MILLISECOND: DAY_TO_MILLISECOND,
-  DAY_TO_SECOND: DAY_TO_SECOND,
-  HOUR_TO_MINUTE: HOUR_TO_MINUTE,
-  HOUR_TO_SECOND: HOUR_TO_SECOND,
-  MILLISECOND_TO_DAY: MILLISECOND_TO_DAY,
-  MILLISECOND_TO_MINUTE: MILLISECOND_TO_MINUTE,
-  MILLISECOND_TO_SECOND: MILLISECOND_TO_SECOND,
-  MINUTE_TO_MILLISECOND: MINUTE_TO_MILLISECOND,
-  MINUTE_TO_SECOND: MINUTE_TO_SECOND,
-  SECOND_TO_DAY: SECOND_TO_DAY,
-  SECOND_TO_HOUR: SECOND_TO_HOUR,
-  SECOND_TO_MILLISECOND: SECOND_TO_MILLISECOND,
-  SEVEN_DAYS_IN_SECONDS: SEVEN_DAYS_IN_SECONDS,
-  TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE: TIME_SLIDER_LITE_DEFAULT_MAX_FORECAST_RANGE,
-  TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE: TIME_SLIDER_LITE_DEFAULT_MAX_OBSERVED_RANGE,
-  boundedValue: boundedValue,
-  defaultTimeRange: defaultTimeRange,
-  defaultTimeSliderLiteUpdate: defaultTimeSliderLiteUpdate,
-  floorLocalMinutes: floorLocalMinutes,
-  floorLocalSeconds: floorLocalSeconds,
-  generateCustomTimeList: generateCustomTimeList,
-  getMonthChanges: getMonthChanges,
-  getNearestSelectableTime: getNearestSelectableTime,
-  getRemainingHours: getRemainingHours,
-  getSelectedTimeFromPx: getSelectedTimeFromPx,
-  getSelectedTimePx: getSelectedTimePx,
-  getTimeScaleDescription: getTimeScaleDescription,
-  hoursAndDaysToSeconds: hoursAndDaysToSeconds,
-  isWithinRange: isWithinRange,
-  maxSubTicksPerDay: maxSubTicksPerDay,
-  reformatFinnishDateString: reformatFinnishDateString,
-  secondsSinceLocalMidnight: secondsSinceLocalMidnight,
-  secondsToDaysAndHours: secondsToDaysAndHours,
-  shortUTCTime: shortUTCTime,
-  subTicksPerDay: subTicksPerDay,
-  useAutoUpdate: useAutoUpdate,
-  useAutoUpdateSelectedTime: useAutoUpdateSelectedTime,
-  useDefaultTimeRange: useDefaultTimeRange
-});
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var TIME_SLIDER_LITE_NAMESPACE = 'timesliderlite';
-var initTimeSliderLiteI18n = function initTimeSliderLiteI18n(language, i18nInstance) {
-  var i18nInst = i18nInstance != null ? i18nInstance : i18n;
-  safelyInitI18nForTestsAndStories(i18nInst, TIME_SLIDER_LITE_NAMESPACE, [], language);
-  // load all translations here that are needed for tests and stories
-  i18nInst.addResourceBundle('en', TIME_SLIDER_LITE_NAMESPACE, translations['en']);
-  i18nInst.addResourceBundle('en', CORE_NAMESPACE, coreTranslations['en']);
-  i18nInst.addResourceBundle('fi', TIME_SLIDER_LITE_NAMESPACE, translations['fi']);
-  i18nInst.addResourceBundle('fi', CORE_NAMESPACE, coreTranslations['fi']);
-  i18nInst.addResourceBundle('sv-FI', TIME_SLIDER_LITE_NAMESPACE, translations['sv-FI']);
-};
-/**
- * This provider is limited to TimeSliderLite translations.
- *
- * If you need more translations, install i18next and react-i18next packages and create your own I18nextProvider as multiple providers are not supported.
- *
- * You can then import TIME_SLIDER_LITE_NAMESPACE and timeSliderLiteTranslations and use it to build your own provider.
- * @language TimeSliderLiteLanguage - optional - default 'en'
- * @returns I18nextProvider
- */
-var TimeSliderLiteI18nProvider = function TimeSliderLiteI18nProvider(_ref) {
-  var children = _ref.children,
-    language = _ref.language,
-    i18nInstance = _ref.i18nInstance;
-  initTimeSliderLiteI18n(language, i18nInstance);
-  return /*#__PURE__*/jsx(I18nextProvider, {
-    i18n: i18nInstance != null ? i18nInstance : i18n,
-    children: children
-  });
-};
-var useTimesliderLiteTranslation = function useTimesliderLiteTranslation() {
-  return useTranslation(TIME_SLIDER_LITE_NAMESPACE);
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var AnimationSpeedOptions = function AnimationSpeedOptions(_ref) {
-  var _useAnimationSpeed$;
-  var dropdownButtonIcon = _ref.dropdownButtonIcon,
-    _ref$speedOptions = _ref.speedOptions,
-    speedOptions = _ref$speedOptions === void 0 ? speedFactors.sort(function (speedA, speedB) {
-      return speedB - speedA;
-    }) : _ref$speedOptions,
-    _ref$speedOptionItemP = _ref.speedOptionItemPrefix,
-    speedOptionItemPrefix = _ref$speedOptionItemP === void 0 ? 'x ' : _ref$speedOptionItemP,
-    _ref$speedOptionItemP2 = _ref.speedOptionItemPostfix,
-    speedOptionItemPostfix = _ref$speedOptionItemP2 === void 0 ? '' : _ref$speedOptionItemP2,
-    defaultSpeedOptionPostfix = _ref.defaultSpeedOptionPostfix,
-    _ref$defaultSpeedFact = _ref.defaultSpeedFactor,
-    defaultSpeedFactor = _ref$defaultSpeedFact === void 0 ? speedFactors[2] : _ref$defaultSpeedFact,
-    useAnimationSpeed = _ref.useAnimationSpeed;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var translatedSpeedOptionPostfix = defaultSpeedOptionPostfix != null ? defaultSpeedOptionPostfix : " (" + t('common.default').toLocaleLowerCase() + ")";
-  var animationSpeed = (_useAnimationSpeed$ = useAnimationSpeed == null ? void 0 : useAnimationSpeed[0]) != null ? _useAnimationSpeed$ : defaultSpeedFactor;
-  var setAnimationSpeed = useAnimationSpeed == null ? void 0 : useAnimationSpeed[1];
-  var readOnly = !setAnimationSpeed || speedOptions.length < 2;
-  return /*#__PURE__*/jsx(CardContent, {
-    className: "TimeSliderLite-animationSpeedOptions",
-    "data-testid": "TimeSliderLite-animationSpeedOptions",
-    sx: {
-      paddingTop: '12px',
-      marginBottom: '-8px',
-      minWidth: '200px'
-    },
-    children: /*#__PURE__*/jsx(Select, {
-      IconComponent: dropdownButtonIcon,
-      className: "TimeSliderLite-animationSpeedSelect",
-      "data-testid": "TimeSliderLite-animationSpeedSelect",
-      disabled: readOnly,
-      inputProps: {
-        'data-testid': 'TimeSliderLite-animationSpeedSelect-input'
-      },
-      onChange: function onChange(event) {
-        var _event$target;
-        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
-        setAnimationSpeed == null || setAnimationSpeed(newValue);
-      },
-      sx: {
-        height: '40px'
-      },
-      value: String(animationSpeed),
-      children: speedOptions.map(function (option) {
-        var postfix = option === defaultSpeedFactor ? translatedSpeedOptionPostfix : speedOptionItemPostfix;
-        var label = speedOptionItemPrefix + option + postfix;
-        return /*#__PURE__*/jsx(MenuItem, {
-          value: String(option),
-          children: label
-        }, String(option));
-      })
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var SubmenuSelectLabel = function SubmenuSelectLabel(_ref) {
-  var children = _ref.children,
-    isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/jsx(Typography, {
-    sx: {
-      opacity: isDisabled ? 0.5 : 1,
-      fontWeight: '400',
-      paddingTop: '10px'
-    },
-    children: children
-  });
-};
-
-var _excluded$3 = ["amountOfOptions", "dropdownButtonIcon", "itemPostFix", "value", "setValue"];
-var CustomSelect = function CustomSelect(_ref) {
-  var amountOfOptions = _ref.amountOfOptions,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    itemPostFix = _ref.itemPostFix,
-    value = _ref.value,
-    setValue = _ref.setValue,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var availableOptions = Array.from(Array(amountOfOptions).keys());
-  return /*#__PURE__*/jsx(Select, Object.assign({}, props, {
-    IconComponent: dropdownButtonIcon,
-    autoWidth: false,
-    "data-testid": "TimeSliderLite-customSelect-" + itemPostFix,
-    inputProps: {
-      'data-testid': "TimeSliderLite-customSelect-" + itemPostFix + "-input"
-    },
-    onChange: function onChange(event) {
-      var _event$target;
-      var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
-      if (availableOptions.includes(newValue)) {
-        setValue(newValue);
-      }
-    },
-    sx: {
-      height: '40px',
-      width: '100%'
-    },
-    value: String(availableOptions.includes(value) ? value : availableOptions[availableOptions.length - 1]),
-    children: availableOptions.map(function (option) {
-      return /*#__PURE__*/jsxs(MenuItem, {
-        value: String(option),
-        children: [option, " ", itemPostFix]
-      }, option);
-    })
-  }));
-};
-var DayHourSelector = function DayHourSelector(_ref2) {
-  var isDisabled = _ref2.isDisabled,
-    dropdownButtonIcon = _ref2.dropdownButtonIcon,
-    label = _ref2.label,
-    maxHours = _ref2.maxHours,
-    sx = _ref2.sx,
-    useDays = _ref2.useDays,
-    useHours = _ref2.useHours;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var days = useDays[0],
-    setDays = useDays[1];
-  var hours = useHours[0],
-    setHours = useHours[1];
-  var remainingHours = getRemainingHours(maxHours, days);
-  var amountOfDayOptions = maxHours ? Math.floor(maxHours / 24) + 1 : 1;
-  var amountOfHourOptions = maxHours ? Math.min(24, remainingHours + 1) : 1;
-  return /*#__PURE__*/jsxs(Grid, {
-    container: true,
-    sx: sx,
-    children: [/*#__PURE__*/jsx(Grid, {
-      size: {
-        xs: 3
-      },
-      children: /*#__PURE__*/jsx(SubmenuSelectLabel, {
-        isDisabled: isDisabled || amountOfDayOptions === 1 && amountOfHourOptions === 1,
-        children: label
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      paddingX: "4px",
-      size: {
-        xs: 4.5
-      },
-      children: /*#__PURE__*/jsx(CustomSelect, {
-        amountOfOptions: amountOfDayOptions,
-        disabled: isDisabled || amountOfDayOptions === 1,
-        dropdownButtonIcon: dropdownButtonIcon,
-        itemPostFix: t('units.days'),
-        setValue: setDays,
-        value: days
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      paddingLeft: "4px",
-      size: {
-        xs: 4.5
-      },
-      children: /*#__PURE__*/jsx(CustomSelect, {
-        amountOfOptions: amountOfHourOptions,
-        disabled: isDisabled || amountOfHourOptions === 1,
-        dropdownButtonIcon: dropdownButtonIcon,
-        itemPostFix: t('units.hours'),
-        setValue: setHours,
-        value: hours
-      })
-    })]
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var TIME_SELECTOR_MIN_WIDTH = '21em';
-var TimeRangeOptions = function TimeRangeOptions(_ref) {
-  var _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now().valueOf() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    useTimeRange = _ref.useTimeRange,
-    defaultTimeRange = _ref.defaultTimeRange,
-    dropdownButtonIcon = _ref.dropdownButtonIcon;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var isReadOnly = useTimeRange === undefined;
-  var isDefault = (useTimeRange == null ? void 0 : useTimeRange[0]) === null;
-  var handleIsDefaultChange = function handleIsDefaultChange(event) {
-    if (event.target.value === 'default' && useTimeRange != null && useTimeRange[1]) {
-      useTimeRange[1](null);
-    }
-    if (event.target.value === 'custom' && useTimeRange != null && useTimeRange[1]) {
-      useTimeRange[1](defaultTimeRange);
-    }
-  };
-  var _React$useState = React.useState(0),
-    forecastDays = _React$useState[0],
-    setForecastDays = _React$useState[1];
-  var _React$useState2 = React.useState(0),
-    forecastHours = _React$useState2[0],
-    setForecastHours = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    observedDays = _React$useState3[0],
-    setObservedDays = _React$useState3[1];
-  var _React$useState4 = React.useState(0),
-    observedHours = _React$useState4[0],
-    setObservedHours = _React$useState4[1];
-  useEffect(function () {
-    if (!isDefault && !isReadOnly) {
-      var observedSeconds = Math.min(hoursAndDaysToSeconds(observedHours, observedDays), currentTime - defaultTimeRange[0]);
-      var forecastSeconds = Math.min(hoursAndDaysToSeconds(forecastHours, forecastDays), defaultTimeRange[1] - currentTime);
-      if (useTimeRange != null && useTimeRange[1]) {
-        useTimeRange[1]([currentTime - observedSeconds, currentTime + forecastSeconds]);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [forecastDays, forecastHours, observedDays, observedHours]);
-  useLayoutEffect(function () {
-    if (useTimeRange) {
-      var timeRange = useTimeRange[0];
-      var _ref2 = timeRange || defaultTimeRange,
-        timeStart = _ref2[0],
-        timeEnd = _ref2[1];
-      var timeToEndSeconds = timeEnd - currentTime > 0 ? timeEnd - currentTime : 0;
-      var timeToStartSeconds = currentTime - timeStart > 0 ? currentTime - timeStart : 0;
-      var _secondsToDaysAndHour = secondsToDaysAndHours(timeToEndSeconds),
-        _forecastDays = _secondsToDaysAndHour.days,
-        _forecastHours = _secondsToDaysAndHour.hours;
-      var _secondsToDaysAndHour2 = secondsToDaysAndHours(timeToStartSeconds),
-        _observedDays = _secondsToDaysAndHour2.days,
-        _observedHours = _secondsToDaysAndHour2.hours;
-      setForecastDays(_forecastDays);
-      setForecastHours(_forecastHours);
-      setObservedDays(_observedDays);
-      setObservedHours(_observedHours);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDefault]);
-  var customTimeRange = (useTimeRange == null ? void 0 : useTimeRange[0]) || defaultTimeRange;
-  var minStartTime = Math.min(defaultTimeRange[0], customTimeRange[0]);
-  var observedHoursToCurrentTime = (currentTime - minStartTime) * SECOND_TO_HOUR;
-  var maxObservedHours = observedHoursToCurrentTime > 0 ? Math.floor(observedHoursToCurrentTime) : 0;
-  var maxEndTime = Math.max(defaultTimeRange[1], customTimeRange[1]);
-  var forecastHoursToCurrentTime = (maxEndTime - currentTime) * SECOND_TO_HOUR;
-  var maxForecastHours = forecastHoursToCurrentTime > 0 ? Math.floor(forecastHoursToCurrentTime) : 0;
-  return /*#__PURE__*/jsxs(CardContent, {
-    className: "TimeSliderLite-timeRangeOptions",
-    "data-testid": "TimeSliderLite-timeRangeOptions",
-    sx: {
-      paddingTop: '4px',
-      '& label': {
-        height: '36px'
-      },
-      '&:last-child': {
-        paddingBottom: '16px'
-      }
-    },
-    children: [t('menu.timeRange.description'), /*#__PURE__*/jsxs(RadioGroup, {
-      defaultValue: isDefault ? 'default' : 'custom',
-      name: "time-range-radio-button-group",
-      onChange: handleIsDefaultChange,
-      row: true,
-      sx: {
-        marginTop: 1
-      },
-      value: isDefault ? 'default' : 'custom',
-      children: [/*#__PURE__*/jsx(FormControlLabel, {
-        control: /*#__PURE__*/jsx(Radio, {}),
-        disabled: isReadOnly,
-        label: t('common.default'),
-        value: "default"
-      }), /*#__PURE__*/jsx(FormControlLabel, {
-        control: /*#__PURE__*/jsx(Radio, {}),
-        disabled: isReadOnly,
-        label: t('common.custom'),
-        value: "custom"
-      })]
-    }), /*#__PURE__*/jsxs(Box, {
-      minWidth: TIME_SELECTOR_MIN_WIDTH,
-      children: [/*#__PURE__*/jsx(DayHourSelector, {
-        dropdownButtonIcon: dropdownButtonIcon,
-        isDisabled: isDefault,
-        label: t('common.observed'),
-        maxHours: maxObservedHours,
-        sx: {
-          marginY: 1
-        },
-        useDays: [observedDays, setObservedDays],
-        useHours: [observedHours, setObservedHours]
-      }), /*#__PURE__*/jsx(DayHourSelector, {
-        dropdownButtonIcon: dropdownButtonIcon,
-        isDisabled: isDefault,
-        label: t('common.forecast'),
-        maxHours: maxForecastHours,
-        useDays: [forecastDays, setForecastDays],
-        useHours: [forecastHours, setForecastHours]
-      })]
-    })]
-  });
-};
-
-var _excluded$2 = ["dropdownButtonIcon", "value", "setValue", "defaultTimeStep", "timeStepOptions"];
-var TimeStepSelector = function TimeStepSelector(_ref) {
-  var dropdownButtonIcon = _ref.dropdownButtonIcon,
-    value = _ref.value,
-    setValue = _ref.setValue,
-    defaultTimeStep = _ref.defaultTimeStep,
-    timeStepOptions = _ref.timeStepOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var defaultTimeStepOptions = {
-    5: "5 " + t('units.minutes'),
-    15: "15 " + t('units.minutes'),
-    30: "30 " + t('units.minutes'),
-    60: "1 " + t('units.hours'),
-    180: "3 " + t('units.hours'),
-    360: "6 " + t('units.hours'),
-    720: "12 " + t('units.hours')
-  };
-  var options = timeStepOptions != null ? timeStepOptions : defaultTimeStepOptions;
-  var allOptionsKeys = Object.keys(options);
-  var availableOptionKeys = allOptionsKeys.filter(function (option) {
-    return Number(option) >= defaultTimeStep;
-  });
-  return /*#__PURE__*/jsx(Select, Object.assign({}, props, {
-    IconComponent: dropdownButtonIcon,
-    className: "TimeSliderLite-timeStepSelect",
-    "data-testid": "TimeSliderLite-timeStepSelect",
-    inputProps: {
-      'data-testid': 'TimeSliderLite-timeStepSelect-input'
-    },
-    onChange: function onChange(event) {
-      var _event$target;
-      var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
-      setValue(newValue);
-    },
-    sx: {
-      height: '40px',
-      width: '100%'
-    },
-    value: String(availableOptionKeys.includes(String(value)) ? value : availableOptionKeys[availableOptionKeys.length - 1]),
-    children: availableOptionKeys.map(function (option) {
-      return /*#__PURE__*/jsx(MenuItem, {
-        value: String(option),
-        children: options[option]
-      }, String(option));
-    })
-  }));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var TimeStepOptions = function TimeStepOptions(_ref) {
-  var useTimeStep = _ref.useTimeStep,
-    _ref$defaultTimeStep = _ref.defaultTimeStep,
-    defaultTimeStep = _ref$defaultTimeStep === void 0 ? [5, 15] : _ref$defaultTimeStep,
-    timeStepOptions = _ref.timeStepOptions,
-    dropdownButtonIcon = _ref.dropdownButtonIcon;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var isReadOnly = useTimeStep === undefined;
-  var timeStep = useTimeStep == null ? void 0 : useTimeStep[0];
-  var setTimeStep = useTimeStep == null ? void 0 : useTimeStep[1];
-  var observedTimeStepProp = timeStep == null ? void 0 : timeStep[0];
-  var forecastTimeStepProp = timeStep == null ? void 0 : timeStep[1];
-  var isDefault = !useTimeStep || timeStep === null;
-  var defaultObservedTimeStep = defaultTimeStep[0];
-  var defaultForecastTimeStep = defaultTimeStep[1];
-  var _React$useState = React.useState(observedTimeStepProp != null ? observedTimeStepProp : defaultObservedTimeStep),
-    observedTimeStep = _React$useState[0],
-    setObservedTimeStep = _React$useState[1];
-  var _React$useState2 = React.useState(forecastTimeStepProp != null ? forecastTimeStepProp : defaultForecastTimeStep),
-    forecastTimeStep = _React$useState2[0],
-    setForecastTimeStep = _React$useState2[1];
-  useEffect(function () {
-    if (!isDefault && setTimeStep) {
-      setTimeStep([observedTimeStep, forecastTimeStep]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observedTimeStep, forecastTimeStep]);
-  var handleIsDefaultChange = function handleIsDefaultChange(event) {
-    if (event.target.value === 'default') {
-      setTimeStep == null || setTimeStep(null);
-      setObservedTimeStep(defaultTimeStep[0]);
-      setForecastTimeStep(defaultTimeStep[1]);
-    }
-    if (event.target.value === 'custom' && setTimeStep) {
-      setTimeStep(defaultTimeStep);
-    }
-  };
-  return /*#__PURE__*/jsxs(CardContent, {
-    "data-testid": "TimeSliderLite-timeStepOptions",
-    sx: {
-      paddingTop: '4px',
-      '& label': {
-        height: '36px'
-      },
-      '&:last-child': {
-        paddingBottom: '16px'
-      }
-    },
-    children: [/*#__PURE__*/jsxs(RadioGroup, {
-      defaultValue: isDefault ? 'default' : 'custom',
-      name: "time-range-radio-button-group",
-      onChange: handleIsDefaultChange,
-      row: true,
-      sx: {
-        marginTop: 1
-      },
-      value: isDefault ? 'default' : 'custom',
-      children: [/*#__PURE__*/jsx(FormControlLabel, {
-        control: /*#__PURE__*/jsx(Radio, {}),
-        disabled: isReadOnly,
-        label: t('common.default'),
-        value: "default"
-      }), /*#__PURE__*/jsx(FormControlLabel, {
-        control: /*#__PURE__*/jsx(Radio, {}),
-        disabled: isReadOnly,
-        label: t('common.custom'),
-        value: "custom"
-      })]
-    }), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      width: 250,
-      children: [/*#__PURE__*/jsx(Grid, {
-        size: {
-          xs: 4
-        },
-        sx: {
-          marginY: 1
-        },
-        children: /*#__PURE__*/jsx(SubmenuSelectLabel, {
-          isDisabled: isDefault,
-          children: t('common.observed')
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        paddingX: "4px",
-        size: {
-          xs: 8
-        },
-        sx: {
-          marginY: 1
-        },
-        children: /*#__PURE__*/jsx(TimeStepSelector, {
-          defaultTimeStep: defaultTimeStep[0],
-          disabled: isDefault,
-          dropdownButtonIcon: dropdownButtonIcon,
-          setValue: setObservedTimeStep,
-          timeStepOptions: timeStepOptions,
-          value: observedTimeStep
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        size: {
-          xs: 4
-        },
-        children: /*#__PURE__*/jsx(SubmenuSelectLabel, {
-          isDisabled: isDefault,
-          children: t('common.forecast')
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        paddingX: "4px",
-        size: {
-          xs: 8
-        },
-        children: /*#__PURE__*/jsx(TimeStepSelector, {
-          defaultTimeStep: defaultTimeStep[1],
-          disabled: isDefault,
-          dropdownButtonIcon: dropdownButtonIcon,
-          setValue: setForecastTimeStep,
-          timeStepOptions: timeStepOptions,
-          value: forecastTimeStep
-        })
-      })]
-    })]
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var availableTimeZones = ['LT', 'UTC'];
-var styles$3 = {
-  root: {
-    marginY: 0.5,
-    marginRight: 1,
-    '> button': {
-      borderRadius: 10,
-      height: '36px',
-      textTransform: 'none'
-    },
-    '> button:first-of-type': {
-      paddingRight: 1
-    },
-    '> button:last-of-type': {
-      paddingLeft: 1
-    }
-  }
-};
-var TimeZoneSwitch = function TimeZoneSwitch(_ref) {
-  var _ref$useTimeZone = _ref.useTimeZone,
-    _ref$useTimeZone2 = _ref$useTimeZone === void 0 ? ['LT', undefined] : _ref$useTimeZone,
-    timeZone = _ref$useTimeZone2[0],
-    setTimeZone = _ref$useTimeZone2[1];
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  return /*#__PURE__*/jsx(ToggleButtonGroup, {
-    className: "TimeSliderLite-timeZoneSwitch",
-    "data-testid": "TimeSliderLite-timeZoneSwitch",
-    disabled: !setTimeZone,
-    exclusive: true,
-    onChange: function onChange(_event, newZone) {
-      if (newZone && setTimeZone) {
-        setTimeZone(newZone);
-      }
-    },
-    sx: styles$3.root,
-    value: timeZone != null ? timeZone : 'LT',
-    children: availableTimeZones.map(function (zone) {
-      return /*#__PURE__*/jsx(ToggleButton, {
-        value: zone,
-        children: t("menu." + zone)
-      }, zone);
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var defaultUpdateIntervalOptions = [1, 2, 5, 10, 15, 30, 60];
-var UpdateIntervalOptions = function UpdateIntervalOptions(_ref) {
-  var _useUpdateInterval$, _updateIntervalOption;
-  var _ref$defaultUpdateInt = _ref.defaultUpdateInterval,
-    defaultUpdateInterval = _ref$defaultUpdateInt === void 0 ? 1 : _ref$defaultUpdateInt,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    _ref$intervalOptionPr = _ref.intervalOptionPrefix,
-    intervalOptionPrefix = _ref$intervalOptionPr === void 0 ? '' : _ref$intervalOptionPr,
-    intervalOptionPostfix = _ref.intervalOptionPostfix,
-    defaultOptionPostfix = _ref.defaultOptionPostfix,
-    _ref$updateIntervalOp = _ref.updateIntervalOptions,
-    updateIntervalOptions = _ref$updateIntervalOp === void 0 ? defaultUpdateIntervalOptions.sort(function (optionA, optionB) {
-      return optionA - optionB;
-    }) : _ref$updateIntervalOp,
-    useUpdateInterval = _ref.useUpdateInterval;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var translatedIntervalOptionPostfix = intervalOptionPostfix != null ? intervalOptionPostfix : " " + t('units.minutes');
-  var translatedDefaultOptionPostfix = defaultOptionPostfix != null ? defaultOptionPostfix : " " + t('units.minutes') + " (" + t('common.default').toLowerCase() + ")";
-  var updateInterval = (_useUpdateInterval$ = useUpdateInterval == null ? void 0 : useUpdateInterval[0]) != null ? _useUpdateInterval$ : defaultUpdateInterval;
-  var setUpdateInterval = useUpdateInterval == null ? void 0 : useUpdateInterval[1];
-  var readOnly = !setUpdateInterval || updateIntervalOptions.length < 2;
-  var defaultValue = (_updateIntervalOption = updateIntervalOptions.find(function (option) {
-    return option === defaultUpdateInterval;
-  })) != null ? _updateIntervalOption : Math.min.apply(Math, updateIntervalOptions);
-  return /*#__PURE__*/jsx(CardContent, {
-    className: "TimeSliderLite-updateIntervalOptions",
-    "data-testid": "TimeSliderLite-updateIntervalOptions",
-    sx: {
-      paddingTop: '12px',
-      marginBottom: '-8px',
-      minWidth: '200px'
-    },
-    children: /*#__PURE__*/jsx(Select, {
-      IconComponent: dropdownButtonIcon,
-      className: "TimeSliderLite-updateIntervalSelect",
-      "data-testid": "TimeSliderLite-updateIntervalSelect",
-      disabled: readOnly,
-      inputProps: {
-        'data-testid': 'TimeSliderLite-updateIntervalSelect-input'
-      },
-      onChange: function onChange(event) {
-        var _event$target;
-        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
-        setUpdateInterval == null || setUpdateInterval(newValue === defaultValue ? null : newValue);
-      },
-      sx: {
-        height: '40px'
-      },
-      value: String(updateInterval != null ? updateInterval : defaultValue),
-      children: updateIntervalOptions.map(function (option) {
-        var label = option === defaultValue ? "" + intervalOptionPrefix + option + translatedDefaultOptionPostfix : "" + intervalOptionPrefix + option + translatedIntervalOptionPostfix;
-        return /*#__PURE__*/jsx(MenuItem, {
-          value: String(option),
-          children: label
-        }, String(option));
-      })
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var styles$2 = {
-  button: {
-    height: '36px',
-    lineHeight: '1em',
-    border: 'none',
-    textTransform: 'none',
-    borderRadius: '2px !important',
-    color: 'geowebColors.typographyAndIcons.text',
-    '&.Mui-selected': {
-      backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
-    },
-    '&:disabled': {
-      border: 'none'
-    }
-  }
-};
-
-// TODO: Add translations
-var SubmenuTitleTranslations = /*#__PURE__*/function (SubmenuTitleTranslations) {
-  SubmenuTitleTranslations["TIME_RANGE"] = "menu.timeRange";
-  SubmenuTitleTranslations["TIME_STEP"] = "menu.timeStep";
-  SubmenuTitleTranslations["SPEED"] = "menu.speed";
-  SubmenuTitleTranslations["UPDATE_INTERVAL"] = "menu.updateInterval";
-  return SubmenuTitleTranslations;
-}({});
-var TimeSliderLiteOptionsMenu = function TimeSliderLiteOptionsMenu(_ref) {
-  var closeButtonIcon = _ref.closeButtonIcon,
-    _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now().valueOf() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    defaultTimeRange = _ref.defaultTimeRange,
-    defaultTimeStep = _ref.defaultTimeStep,
-    defaultSpeedFactor = _ref.defaultSpeedFactor,
-    defaultUpdateInterval = _ref.defaultUpdateInterval,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    menuOpen = _ref.menuOpen,
-    setMenuOpen = _ref.setMenuOpen,
-    speedOptionItemPostfix = _ref.speedOptionItemPostfix,
-    speedOptionItemPrefix = _ref.speedOptionItemPrefix,
-    speedOptions = _ref.speedOptions,
-    updateIntervalOptions = _ref.updateIntervalOptions,
-    subMenuSx = _ref.subMenuSx,
-    sx = _ref.sx,
-    _ref$TimeZoneSwitch = _ref.TimeZoneSwitch,
-    TimeZoneSwitch$1 = _ref$TimeZoneSwitch === void 0 ? TimeZoneSwitch : _ref$TimeZoneSwitch,
-    timeStepOptions = _ref.timeStepOptions,
-    useAnimationSpeed = _ref.useAnimationSpeed,
-    useTimeRange = _ref.useTimeRange,
-    useTimeStep = _ref.useTimeStep,
-    useTimeZone = _ref.useTimeZone,
-    useUpdateInterval = _ref.useUpdateInterval;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var _React$useState = React.useState(null),
-    submenu = _React$useState[0],
-    setSubmenu = _React$useState[1];
-  var _React$useState2 = React.useState(0),
-    submenuLeft = _React$useState2[0],
-    setSubmenuLeft = _React$useState2[1];
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [!!submenu && /*#__PURE__*/jsxs(SubmenuWrapper, {
-      closeButtonIcon: closeButtonIcon,
-      setSubmenu: setSubmenu,
-      sx: Object.assign({
-        left: submenuLeft,
-        marginLeft: '-12px'
-      }, Array.isArray(subMenuSx) ? Object.assign.apply(Object, [{}].concat(subMenuSx)) : subMenuSx),
-      title: t(submenu + ".title"),
-      children: [submenu === SubmenuTitleTranslations.TIME_RANGE && /*#__PURE__*/jsx(TimeRangeOptions, {
-        currentTime: currentTime,
-        defaultTimeRange: defaultTimeRange,
-        dropdownButtonIcon: dropdownButtonIcon,
-        useTimeRange: useTimeRange
-      }), submenu === SubmenuTitleTranslations.TIME_STEP && /*#__PURE__*/jsx(TimeStepOptions, {
-        defaultTimeStep: defaultTimeStep,
-        dropdownButtonIcon: dropdownButtonIcon,
-        timeStepOptions: timeStepOptions,
-        useTimeStep: useTimeStep
-      }), submenu === SubmenuTitleTranslations.SPEED && /*#__PURE__*/jsx(AnimationSpeedOptions, {
-        defaultSpeedFactor: defaultSpeedFactor,
-        dropdownButtonIcon: dropdownButtonIcon,
-        speedOptionItemPostfix: speedOptionItemPostfix,
-        speedOptionItemPrefix: speedOptionItemPrefix,
-        speedOptions: speedOptions,
-        useAnimationSpeed: useAnimationSpeed
-      }), submenu === SubmenuTitleTranslations.UPDATE_INTERVAL && /*#__PURE__*/jsx(UpdateIntervalOptions, {
-        defaultUpdateInterval: defaultUpdateInterval,
-        dropdownButtonIcon: dropdownButtonIcon,
-        updateIntervalOptions: updateIntervalOptions,
-        useUpdateInterval: useUpdateInterval
-      })]
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: Object.assign({
-        backgroundColor: 'geowebColors.background.surface',
-        borderRadius: 1,
-        display: 'flex',
-        flexDirection: 'row',
-        marginY: 1,
-        visibility: menuOpen ? 'visible' : 'hidden'
-      }, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx),
-      children: [/*#__PURE__*/jsx(ToggleButtonGroup, {
-        "data-testid": "TimeSliderLite-optionsMenu",
-        exclusive: true,
-        onChange: function onChange(event, newOption) {
-          setSubmenu(newOption);
-          var button = event.currentTarget;
-          var buttonPosition = button.getBoundingClientRect();
-          setSubmenuLeft(buttonPosition.x);
-        },
-        sx: {
-          padding: 0.5,
-          gap: 0.5
-        },
-        value: submenu,
-        children: Object.values(SubmenuTitleTranslations).map(function (value) {
-          return /*#__PURE__*/jsx(ToggleButton, {
-            sx: styles$2.button,
-            value: value,
-            children: t(value + ".button")
-          }, value);
-        })
-      }), /*#__PURE__*/jsx(TimeZoneSwitch$1, {
-        useTimeZone: useTimeZone != null ? useTimeZone : ['LT']
-      }), /*#__PURE__*/jsx(Divider, {
-        flexItem: true,
-        orientation: "vertical"
-      }), /*#__PURE__*/jsx(IconButton, {
-        "data-testid": "TimeSliderLite-optionsMenu-closeButton",
-        onClick: function onClick() {
-          return setMenuOpen == null ? void 0 : setMenuOpen(false);
-        },
-        size: "small",
-        sx: {
-          margin: 0.5
-        },
-        children: closeButtonIcon != null ? closeButtonIcon : /*#__PURE__*/jsx(Close, {})
-      })]
-    })]
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var DRAG_AREA_WIDTH = 10;
-var NEEDLE_WIDTH = 5;
-var SHADOW_SPREAD = 2;
-var NeedleShadow = function NeedleShadow(_ref) {
-  var x = _ref.x,
-    stroke = _ref.stroke,
-    height = _ref.height,
-    width = _ref.width;
-  return /*#__PURE__*/jsx("line", {
-    "data-testid": "TimeSliderLite-NeedleShadow",
-    filter: "blur(0.5px)",
-    stroke: stroke,
-    strokeLinecap: "round",
-    strokeWidth: width + SHADOW_SPREAD,
-    x1: x,
-    x2: x,
-    y1: height - (height - SHADOW_SPREAD / 2),
-    y2: height - SHADOW_SPREAD / 2
-  });
-};
-var NeedleLine = function NeedleLine(_ref2) {
-  var x = _ref2.x,
-    stroke = _ref2.stroke,
-    height = _ref2.height,
-    width = _ref2.width;
-  return /*#__PURE__*/jsx("line", {
-    "data-testid": "TimeSliderLite-NeedleLine",
-    stroke: stroke,
-    strokeLinecap: "round",
-    strokeWidth: width,
-    x1: x,
-    x2: x,
-    y1: width / 2,
-    y2: height - width / 2
-  });
-};
-var TimeSliderDraggableNeedle = function TimeSliderDraggableNeedle(_ref3) {
-  var draggableLabel = _ref3.draggableLabel,
-    width = _ref3.width,
-    height = _ref3.height,
-    _ref3$timeZone = _ref3.timeZone,
-    timeZone = _ref3$timeZone === void 0 ? 'LT' : _ref3$timeZone,
-    _ref3$currentTime = _ref3.currentTime,
-    currentTime = _ref3$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref3$currentTime,
-    currentTimeSelected = _ref3.currentTimeSelected,
-    startTime = _ref3.startTime,
-    endTime = _ref3.endTime,
-    disableForecast = _ref3.disableForecast,
-    _ref3$needleDragAreaW = _ref3.needleDragAreaWidth,
-    needleDragAreaWidth = _ref3$needleDragAreaW === void 0 ? DRAG_AREA_WIDTH : _ref3$needleDragAreaW,
-    needleLabelZIndex = _ref3.needleLabelZIndex,
-    _ref3$needleLabelOffs = _ref3.needleLabelOffset,
-    needleLabelOffset = _ref3$needleLabelOffs === void 0 ? [0, -5] : _ref3$needleLabelOffs,
-    _ref3$needleWidth = _ref3.needleWidth,
-    needleWidth = _ref3$needleWidth === void 0 ? NEEDLE_WIDTH : _ref3$needleWidth,
-    timeStep = _ref3.timeStep,
-    selectedTime = _ref3.selectedTime,
-    setSelectedTime = _ref3.setSelectedTime,
-    style = _ref3.style,
-    onDoubleClick = _ref3.onDoubleClick;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    i18n = _useTimesliderLiteTra.i18n;
-  var language = i18n.language;
-  var draggableRef = useRef(null);
-  var _useTheme = useTheme(),
-    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
-  var timeZoneOffset = timeZone === 'UTC' ? 0 : undefined;
-  var observedTimeStepSeconds = timeStep[0];
-  var forecastTimeStepSeconds = timeStep[1];
-  var timeStepSeconds = selectedTime >= currentTime ? forecastTimeStepSeconds : observedTimeStepSeconds;
-  var lastObservedTime = floorLocalSeconds(currentTime, observedTimeStepSeconds, timeZoneOffset);
-  var firstForecastTime = floorLocalSeconds(currentTime, forecastTimeStepSeconds, timeZoneOffset) + forecastTimeStepSeconds;
-  var selectedTimePx = getSelectedTimePx(startTime, endTime, selectedTime, width);
-  var x = selectedTimePx > 0 ? selectedTimePx - needleDragAreaWidth / 2 : -needleDragAreaWidth / 2;
-  var isBetweenObservedAndForecast = selectedTime >= lastObservedTime && selectedTime < firstForecastTime;
-  var roundedSelectedTime = isBetweenObservedAndForecast ? lastObservedTime : floorLocalSeconds(selectedTime, timeStepSeconds, timeZoneOffset);
-  var dateString = new Date(roundedSelectedTime * 1000).toLocaleDateString(language, {
-    weekday: 'short',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    timeZone: timeZone === 'UTC' ? 'UTC' : undefined
-  });
-  var localLabel = language === 'fi' || language === 'sv-FI' ? reformatFinnishDateString(dateString) : dateString;
-  var label = timeZone === 'UTC' ? shortUTCTime(localLabel) : localLabel;
-  return /*#__PURE__*/jsx(Draggable, {
-    axis: "x",
-    bounds: {
-      left: -needleDragAreaWidth / 2,
-      right: width - needleDragAreaWidth / 2
-    },
-    handle: ".TimeSliderLite-DraggableNeedle",
-    nodeRef: draggableRef,
-    onDrag: function onDrag(_, position) {
-      var positionOffsetToCompensateFlooring = 0.5;
-      var needleCenterPosition = position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring;
-      var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, needleCenterPosition, width);
-      if (disableForecast && newSelectedTime >= lastObservedTime) {
-        setSelectedTime(lastObservedTime);
-      }
-      setSelectedTime(newSelectedTime);
-    },
-    onStop: function onStop(_, position) {
-      var positionOffsetToCompensateFlooring = 0.5;
-      var needleCenterPosition = position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring;
-      var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, needleCenterPosition, width);
-      var isLastObservedTime = newSelectedTime >= lastObservedTime && newSelectedTime < firstForecastTime || newSelectedTime >= lastObservedTime && disableForecast;
-      var roundedSelectedTime = isLastObservedTime ? lastObservedTime : floorLocalSeconds(newSelectedTime, timeStepSeconds, timeZoneOffset);
-      setSelectedTime(roundedSelectedTime);
-    },
-    position: {
-      x: x,
-      y: 0
-    },
-    children: /*#__PURE__*/jsxs(Box, {
-      className: "TimeSliderLite-DraggableNeedle",
-      "data-testid": "TimeSliderLite-DraggableNeedle",
-      onDoubleClick: onDoubleClick,
-      ref: draggableRef,
-      sx: {
-        overflow: 'visible'
-      },
-      children: [/*#__PURE__*/jsxs("svg", {
-        cursor: "ew-resize",
-        "data-testid": "TimeSliderLite-NeedleSvg",
-        height: height,
-        style: style,
-        width: needleDragAreaWidth,
-        children: [/*#__PURE__*/jsx(NeedleShadow, {
-          height: height,
-          stroke: timeSliderLite.needleShadow.stroke,
-          width: needleWidth,
-          x: needleDragAreaWidth / 2
-        }), /*#__PURE__*/jsx(NeedleLine, {
-          height: height,
-          stroke: currentTimeSelected ? timeSliderLite.needleDefault.stroke : timeSliderLite.needle.stroke,
-          width: needleWidth,
-          x: needleDragAreaWidth / 2
-        })]
-      }), /*#__PURE__*/jsxs(Box, {
-        bottom: "-1px",
-        className: "TimeSliderLite-timeStamp",
-        position: "absolute",
-        sx: {
-          backgroundColor: timeSliderLite.needleLabel.backgroundColor,
-          border: "1px solid " + timeSliderLite.needleLabel.borderColor,
-          borderRadius: '4px',
-          className: draggableLabel ? 'TimeSliderLite-DraggableNeedle' : '',
-          color: timeSliderLite.needleLabel.color,
-          cursor: draggableLabel ? 'ew-resize' : null,
-          fontSize: '12px',
-          padding: '0px 4px 0px 4px',
-          pointerEvents: draggableLabel ? null : 'none',
-          transform: "translate(calc(-50% + " + needleWidth + "px + " + needleLabelOffset[0] + "px), " + needleLabelOffset[1] + "px)",
-          zIndex: needleLabelZIndex != null ? needleLabelZIndex : null
-        },
-        children: [label, /*#__PURE__*/jsx(Box, {
-          bottom: "-4px",
-          className: "TimeSliderLite-timeStamp-tail",
-          height: "10px",
-          position: "absolute",
-          sx: {
-            backgroundColor: timeSliderLite.needleLabel.backgroundColor,
-            transform: 'rotate(45deg)',
-            left: "calc(50% - 5px - " + needleLabelOffset[0] + "px)",
-            zIndex: -1
-          },
-          width: "10px"
-        })]
-      })]
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var OBSERVED_PADDING_DAYS = 1;
-var FORECAST_PADDING_DAYS = OBSERVED_PADDING_DAYS + 2;
-var TICK_HEIGHT = 6;
-var HOUR_LABEL_OFFSET = 1.5;
-var MONTH_LABEL_BREAKPOINT = 65;
-var HOUR_LABEL_BREAKPOINT = 800;
-var HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT = 1600;
-var TIME_SLIDER_LITE_PADDING_RIGHT = 1;
-var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    startTime = _ref.startTime,
-    endTime = _ref.endTime,
-    disableForecast = _ref.disableForecast,
-    _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    timeStep = _ref.timeStep,
-    style = _ref.style,
-    _ref$timeZone = _ref.timeZone,
-    timeZone = _ref$timeZone === void 0 ? 'LT' : _ref$timeZone;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    i18n = _useTimesliderLiteTra.i18n;
-  var language = i18n.language;
-  var _useTheme = useTheme(),
-    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
-  if (!width) {
-    return /*#__PURE__*/jsx("svg", {
-      height: height,
-      style: style
-    });
-  }
-
-  // Convert start and end time from Unix timestamp to JavaScript Date object
-  var startDate = new Date(startTime * SECOND_TO_MILLISECOND);
-  var endDate = new Date(endTime * SECOND_TO_MILLISECOND);
-  var totalDays = (endDate.getTime() - startDate.getTime()) * MILLISECOND_TO_DAY;
-  var utcOffset = timeZone === 'UTC' ? new Date().getTimezoneOffset() * 60 * SECOND_TO_DAY : 0;
-  var tickSpacing = width / totalDays;
-  if (tickSpacing === Infinity || tickSpacing === -Infinity || isNaN(tickSpacing)) {
-    return null;
-  }
-  var startTimeDayOffset = secondsSinceLocalMidnight(startTime) * SECOND_TO_DAY + utcOffset;
-  var tickOffset = startTimeDayOffset * tickSpacing;
-  var showMonthLabel = tickSpacing < MONTH_LABEL_BREAKPOINT;
-  var maxTimeStep = timeStep ? Math.max.apply(Math, timeStep) : null;
-  var hideHourLabels = maxTimeStep && maxTimeStep > 60 * 60 * 3;
-  var showHourLabel = !hideHourLabels && tickSpacing > HOUR_LABEL_BREAKPOINT;
-  var limitHourLabelsToEveryThirdHour = maxTimeStep && maxTimeStep > 60 * 60;
-  var showHourLabelEveryThirdHour = limitHourLabelsToEveryThirdHour || tickSpacing < HOUR_LABEL_EVERY_THIRD_HOUR_BREAKPOINT;
-
-  // Set up variables for date labels and background colors
-  var dayLabels = [];
-  var dayLabelDate = new Date(startTime * SECOND_TO_MILLISECOND - OBSERVED_PADDING_DAYS * DAY_TO_MILLISECOND);
-  var lastDayLabelDate = new Date(endDate.getTime() + FORECAST_PADDING_DAYS * DAY_TO_MILLISECOND);
-  while (dayLabelDate < lastDayLabelDate) {
-    var dateString = dayLabelDate.toLocaleDateString(language, {
-      weekday: 'short',
-      month: 'numeric',
-      day: 'numeric'
-    });
-    var label = dateString.charAt(0).toUpperCase() + dateString.slice(1);
-    dayLabels.push(label);
-    dayLabelDate.setDate(dayLabelDate.getDate() + 1);
-  }
-  var monthChanges = getMonthChanges(startDate, endDate);
-  var monthLabels = showMonthLabel ? monthChanges.map(function (monthChange) {
-    var x = getSelectedTimePx(startTime, endTime, monthChange, width) + 4;
-    var dateString = new Date(monthChange * 1000).toLocaleDateString(language, {
-      weekday: 'short',
-      month: 'numeric',
-      day: 'numeric'
-    });
-    var label = dateString.charAt(0).toUpperCase() + dateString.slice(1);
-    return /*#__PURE__*/jsx("text", {
-      fill: timeSliderLite.timeline.fill,
-      fontSize: "12px",
-      style: {
-        userSelect: 'none'
-      },
-      textAnchor: "left",
-      x: x,
-      y: 14,
-      children: label
-    }, monthChange + "-month-change-text");
-  }) : null;
-  var currentDayIndex = (currentTime - startTime) * SECOND_TO_DAY + startTimeDayOffset + OBSERVED_PADDING_DAYS;
-  var backgroundRectangles = dayLabels.map(function (label, index) {
-    var observedColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundObserved.fill : timeSliderLite.timelineBackgroundObservedAlternative.fill;
-    var enabledForecastColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundAlternative.fill : timeSliderLite.timelineBackground.fill;
-    var disabledForecastColor = index % 2 === 0 ? timeSliderLite.timelineBackgroundDisabled.fill : timeSliderLite.timelineBackgroundDisabledAlternative.fill;
-    var forecastColor = disableForecast ? disabledForecastColor : enabledForecastColor;
-    var defaultProps = {
-      x: Math.floor((index - OBSERVED_PADDING_DAYS) * tickSpacing - tickOffset),
-      y: 0,
-      height: height
-    };
-    var isObserved = index + 1 < currentDayIndex;
-    var baseRectangle = /*#__PURE__*/createElement("rect", Object.assign({}, defaultProps, {
-      "data-testid": "TimeSliderLite-BackgroundRectangle-" + (isObserved ? 'Observed' : 'Forecast'),
-      fill: isObserved ? observedColor : forecastColor,
-      key: label + "-color",
-      width: Math.ceil(tickSpacing)
-    }));
-    var localDayOffset = secondsSinceLocalMidnight(currentTime) * SECOND_TO_DAY + utcOffset;
-    var isCurrentDay = index === Math.floor(currentDayIndex);
-    if (isCurrentDay) {
-      var partialRectangle = /*#__PURE__*/createElement("rect", Object.assign({}, defaultProps, {
-        fill: observedColor,
-        key: label + "-partial-color",
-        width: tickSpacing * localDayOffset
-      }));
-      return [baseRectangle, partialRectangle];
-    }
-    return baseRectangle;
-  }).flat();
-  var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
-    return /*#__PURE__*/jsx("text", {
-      fill: timeSliderLite.timeline.fill,
-      fontSize: "12px",
-      style: {
-        userSelect: 'none'
-      },
-      textAnchor: "left",
-      x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + 8 - tickOffset,
-      y: 14,
-      children: dayLabels[index]
-    }, label + "-text");
-  }) : null;
-  var hourLabelsPerDay = 24;
-  var hourLabels = showHourLabel ? dayLabels.map(function (label, index) {
-    return Array.from({
-      length: hourLabelsPerDay
-    }, function (_, value) {
-      var defaultProps = {
-        x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / hourLabelsPerDay) - tickOffset - HOUR_LABEL_OFFSET,
-        y: height - 10,
-        visibility: showHourLabelEveryThirdHour && value % 3 !== 0 ? 'hidden' : 'visible',
-        fill: timeSliderLite.timeline.fill,
-        fontSize: '12px'
-      };
-      return /*#__PURE__*/jsxs("g", {
-        children: [/*#__PURE__*/jsx("text", Object.assign({}, defaultProps, {
-          style: {
-            userSelect: 'none'
-          },
-          textAnchor: "end",
-          children: value
-        })), /*#__PURE__*/jsx("text", Object.assign({}, defaultProps, {
-          style: {
-            userSelect: 'none'
-          },
-          textAnchor: "start",
-          children: ":00"
-        })), ","]
-      }, label + "-" + value + "-hourLabel");
-    });
-  }).flat() : null;
-  var tickMarks = dayLabels.map(function (label, index) {
-    var defaultProps = {
-      y1: height,
-      y2: Math.floor(height - TICK_HEIGHT),
-      stroke: timeSliderLite.timeline.stroke
-    };
-    var ticksPerDay = timeStep ? maxSubTicksPerDay(tickSpacing, index > currentDayIndex ? timeStep[1] : timeStep[0]) : subTicksPerDay(tickSpacing);
-    var isCurrentDay = index === Math.floor(currentDayIndex);
-    if (isCurrentDay && timeStep) {
-      var observedTicksPerDay = maxSubTicksPerDay(tickSpacing, timeStep[0]);
-      var forecastTicksPerDay = maxSubTicksPerDay(tickSpacing, timeStep[1]);
-      var observedTickMarksFromStartOfDay = Array.from({
-        length: Math.floor(observedTicksPerDay * (currentDayIndex - index)) + 1
-      }, function (_, value) {
-        return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
-          key: label + "-" + value + "-observed-tick",
-          x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
-          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset
-        }));
-      });
-      var forecastTickMarksFromEndOfDay = Array.from({
-        length: Math.floor(forecastTicksPerDay * (1 - (currentDayIndex - index))) + 1
-      }, function (_, value) {
-        return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
-          key: label + "-" + value + "-forecast-tick",
-          x1: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
-          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset
-        }));
-      });
-      return [].concat(observedTickMarksFromStartOfDay, forecastTickMarksFromEndOfDay);
-    }
-    return Array.from({
-      length: ticksPerDay + 1
-    }, function (_, value) {
-      return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
-        key: label + "-" + value + "-tick",
-        x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
-        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset
-      }));
-    });
-  }).flat();
-  return /*#__PURE__*/jsxs("svg", {
-    height: height,
-    style: style,
-    width: width + TIME_SLIDER_LITE_PADDING_RIGHT,
-    children: [backgroundRectangles, tickMarks, monthLabels, dailyLabels, hourLabels]
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var HOVER_NEEDLE_WIDTH = 1;
-var DEFAULT_OPACITY = 0.5;
-var TimeSliderClickableTimeline = function TimeSliderClickableTimeline(_ref) {
-  var _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    endTime = _ref.endTime,
-    disableForecast = _ref.disableForecast,
-    _ref$opacity = _ref.opacity,
-    opacity = _ref$opacity === void 0 ? DEFAULT_OPACITY : _ref$opacity,
-    setSelectedTime = _ref.setSelectedTime,
-    startTime = _ref.startTime,
-    timeStep = _ref.timeStep,
-    width = _ref.width,
-    timeZone = _ref.timeZone;
-  var _React$useState = React.useState(false),
-    isShown = _React$useState[0],
-    setIsShown = _React$useState[1];
-  var _React$useState2 = React.useState(0),
-    mouseX = _React$useState2[0],
-    setMouseX = _React$useState2[1];
-  var _useTheme = useTheme(),
-    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
-  var needleSuggestion = getNearestSelectableTime(timeStep, startTime, endTime, mouseX, width, currentTime, disableForecast, timeZone === 'UTC' ? 0 : undefined);
-  var x = getSelectedTimePx(startTime, endTime, needleSuggestion, width);
-  if (isNaN(x)) {
-    return null;
-  }
-  return /*#__PURE__*/jsx("svg", {
-    "data-testid": "TimeSliderLite-clickableTimeline",
-    onClick: function onClick() {
-      return setSelectedTime(needleSuggestion);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setIsShown(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsShown(false);
-    },
-    onMouseMove: function onMouseMove(event) {
-      isShown && setMouseX(event.nativeEvent.offsetX);
-    },
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      cursor: 'pointer'
-    },
-    children: /*#__PURE__*/jsx("line", {
-      opacity: isShown ? opacity : 0,
-      stroke: timeSliderLite.timeline.stroke,
-      strokeWidth: HOVER_NEEDLE_WIDTH,
-      style: {
-        transition: 'opacity 0.2s ease-in-out'
-      },
-      x1: x,
-      x2: x,
-      y1: "0",
-      y2: "100%"
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2024 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var styles$1 = {
-  centeredBox: {
-    borderRadius: '4px',
-    bottom: 'calc(50% - 0.5rem - 2px)',
-    left: '50%',
-    padding: '0px 3px 0px 3px',
-    position: 'absolute',
-    transform: 'translateX(-50%)'
-  }
-};
-var TimeSliderZeroTimestamp = function TimeSliderZeroTimestamp(_ref) {
-  var _ref$timeZone = _ref.timeZone,
-    timeZone = _ref$timeZone === void 0 ? 'LT' : _ref$timeZone,
-    _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    timeStep = _ref.timeStep,
-    timestampZIndex = _ref.timestampZIndex;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    i18n = _useTimesliderLiteTra.i18n;
-  var language = i18n.language;
-  var _useTheme = useTheme(),
-    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
-  var observedTimeStepSeconds = timeStep[0];
-  var lastObservedTime = floorLocalSeconds(currentTime, observedTimeStepSeconds);
-  var dateString = new Date(lastObservedTime * 1000).toLocaleDateString(language, {
-    weekday: 'short',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    timeZone: timeZone === 'UTC' ? 'UTC' : undefined
-  });
-  var localLabel = language === 'fi' || language === 'sv-FI' ? reformatFinnishDateString(dateString) : dateString;
-  var label = timeZone === 'UTC' ? shortUTCTime(localLabel) : localLabel;
-  return /*#__PURE__*/jsx(Box, {
-    className: "TimeSliderLite-zeroTimeStamp",
-    sx: Object.assign({}, styles$1.centeredBox, timeSliderLite.needleLabel, {
-      fontSize: '13px',
-      opacity: 0.6,
-      pointerEvents: null,
-      zIndex: timestampZIndex != null ? timestampZIndex : null
-    }),
-    children: label
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
-  var height = _ref.height,
-    draggableTimeStamp = _ref.draggableTimeStamp,
-    _ref$timeZone = _ref.timeZone,
-    timeZone = _ref$timeZone === void 0 ? 'LT' : _ref$timeZone,
-    startTime = _ref.startTime,
-    endTime = _ref.endTime,
-    disableForecast = _ref.disableForecast,
-    _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    currentTimeSelected = _ref.currentTimeSelected,
-    mouseHoverNeedleOpacity = _ref.mouseHoverNeedleOpacity,
-    needleWidth = _ref.needleWidth,
-    needleDragAreaWidth = _ref.needleDragAreaWidth,
-    needleLabelZIndex = _ref.needleLabelZIndex,
-    needleLabelOffset = _ref.needleLabelOffset,
-    timeStep = _ref.timeStep,
-    selectedTime = _ref.selectedTime,
-    setSelectedTime = _ref.setSelectedTime,
-    resetSelectedTime = _ref.resetSelectedTime,
-    zerorange = _ref.zerorange;
-  var _useTheme = useTheme(),
-    timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
-  var sliderAreaRef = useRef(null);
-  var _React$useState = React.useState(0),
-    areaWidth = _React$useState[0],
-    setAreaWidth = _React$useState[1];
-  var drawNeedle = selectedTime && areaWidth && startTime <= endTime;
-  useLayoutEffect(function () {
-    var sliderArea = sliderAreaRef.current;
-    setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
-    var observer = new ResizeObserver(function () {
-      setAreaWidth(sliderArea.clientWidth - TIME_SLIDER_LITE_PADDING_RIGHT);
-    });
-    observer.observe(sliderArea);
-    return function () {
-      observer.disconnect();
-    };
-  }, [sliderAreaRef]);
-  return /*#__PURE__*/jsxs(Box, {
-    "data-testid": "TimeSliderLite-Background",
-    ref: sliderAreaRef,
-    sx: {
-      position: 'relative',
-      height: height + "px",
-      overflow: 'visible',
-      width: '100%',
-      backgroundColor: timeSliderLite.timelineBackgroundObserved.fill
-    },
-    children: [/*#__PURE__*/jsx(TimeSliderLiteBackgroundSvg, {
-      currentTime: currentTime,
-      disableForecast: disableForecast,
-      endTime: endTime,
-      height: height,
-      startTime: startTime,
-      style: {
-        position: 'absolute',
-        top: 0
-      },
-      timeStep: timeStep,
-      timeZone: timeZone,
-      width: areaWidth
-    }), /*#__PURE__*/jsx(TimeSliderClickableTimeline, {
-      currentTime: currentTime,
-      disableForecast: disableForecast,
-      endTime: endTime,
-      opacity: mouseHoverNeedleOpacity,
-      setSelectedTime: setSelectedTime,
-      startTime: startTime,
-      timeStep: timeStep,
-      timeZone: timeZone,
-      width: areaWidth
-    }), !!drawNeedle && (!zerorange ? /*#__PURE__*/jsx(TimeSliderDraggableNeedle, {
-      currentTime: currentTime,
-      currentTimeSelected: currentTimeSelected,
-      disableForecast: disableForecast,
-      draggableLabel: draggableTimeStamp,
-      endTime: endTime,
-      height: height,
-      needleDragAreaWidth: needleDragAreaWidth,
-      needleLabelOffset: needleLabelOffset,
-      needleLabelZIndex: needleLabelZIndex,
-      needleWidth: needleWidth,
-      onDoubleClick: resetSelectedTime,
-      selectedTime: selectedTime,
-      setSelectedTime: setSelectedTime,
-      startTime: startTime,
-      style: {
-        position: 'absolute',
-        top: 0
-      },
-      timeStep: timeStep,
-      timeZone: timeZone,
-      width: areaWidth
-    }) : /*#__PURE__*/jsx(TimeSliderZeroTimestamp, {
-      currentTime: currentTime,
-      timeStep: timeStep,
-      timeZone: timeZone,
-      timestampZIndex: needleLabelZIndex
-    }))]
-  });
-};
-
-var _excluded$1 = ["children", "right", "left"];
-var ControlButtonGroup = function ControlButtonGroup(_ref) {
-  var children = _ref.children,
-    right = _ref.right,
-    left = _ref.left,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/jsx(ButtonGroup, Object.assign({
-    fullWidth: true,
-    orientation: "horizontal"
-  }, props, {
-    sx: Object.assign({}, right && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }, left && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }, {
-      backgroundColor: 'geowebColors.background.surface',
-      height: '100%',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '4px',
-      gap: '2px'
-    }, Array.isArray(props.sx) ? Object.assign.apply(Object, [{}].concat(props.sx)) : props.sx),
-    children: children
-  }));
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var timeSliderLiteButtonDefaultProps = {
-  sx: {
-    width: '36px',
-    height: '36px'
-  }
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var HideButton = function HideButton(_ref) {
-  var _settings$icon$hide, _settings$icon, _settings$icon$show, _settings$icon2;
-  var isVisible = _ref.isVisible,
-    settings = _ref.settings,
-    onClick = _ref.onClick;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var hideIcon = (_settings$icon$hide = settings == null || (_settings$icon = settings.icon) == null ? void 0 : _settings$icon.hide) != null ? _settings$icon$hide : /*#__PURE__*/jsx(ChevronDown, {});
-  var showIcon = (_settings$icon$show = settings == null || (_settings$icon2 = settings.icon) == null ? void 0 : _settings$icon2.show) != null ? _settings$icon$show : /*#__PURE__*/jsx(ChevronUp, {});
-  return /*#__PURE__*/jsx(Tooltip, {
-    placement: "top-end",
-    title: isVisible ? t('controlButtons.hide') : t('controlButtons.show'),
-    children: /*#__PURE__*/jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
-      "aria-selected": !isVisible,
-      "data-testid": "TimeSliderLite-HideButton",
-      onClick: onClick,
-      children: isVisible ? hideIcon : showIcon
-    }))
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var MenuButton = function MenuButton(_ref) {
-  var _settings$icon;
-  var menuOpen = _ref.menuOpen,
-    onClick = _ref.onClick,
-    settings = _ref.settings;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var icon = (_settings$icon = settings == null ? void 0 : settings.icon) != null ? _settings$icon : /*#__PURE__*/jsx(Options, {});
-  var Button = /*#__PURE__*/jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
-    "aria-selected": menuOpen,
-    "data-testid": "TimeSliderLite-MenuButton",
-    onClick: onClick,
-    sx: Object.assign({}, menuOpen && {
-      backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
-    }, Array.isArray(timeSliderLiteButtonDefaultProps.sx) ? Object.assign.apply(Object, [{}].concat(timeSliderLiteButtonDefaultProps.sx)) : timeSliderLiteButtonDefaultProps.sx),
-    children: icon
-  }));
-  if (menuOpen) {
-    return Button;
-  }
-  return /*#__PURE__*/jsx(Tooltip, {
-    placement: "top-start",
-    title: t('menu.title'),
-    children: Button
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var PlayButton = function PlayButton(_ref) {
-  var _settings$icon$pause, _settings$icon, _settings$icon$play, _settings$icon2;
-  var isAnimating = _ref.isAnimating,
-    isDisabled = _ref.isDisabled,
-    onTogglePlayButton = _ref.onTogglePlayButton,
-    settings = _ref.settings,
-    tooltipDelay = _ref.tooltipDelay;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var pauseIcon = (_settings$icon$pause = settings == null || (_settings$icon = settings.icon) == null ? void 0 : _settings$icon.pause) != null ? _settings$icon$pause : /*#__PURE__*/jsx(Pause, {});
-  var playIcon = (_settings$icon$play = settings == null || (_settings$icon2 = settings.icon) == null ? void 0 : _settings$icon2.play) != null ? _settings$icon$play : /*#__PURE__*/jsx(Play, {});
-  return /*#__PURE__*/jsx(Tooltip, {
-    enterDelay: tooltipDelay,
-    enterNextDelay: tooltipDelay,
-    placement: "top",
-    title: isAnimating ? t('controlButtons.pause') : t('controlButtons.play'),
-    children: /*#__PURE__*/jsx("span", {
-      children: /*#__PURE__*/jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
-        "data-testid": "TimeSliderLite-PlayButton",
-        disabled: isDisabled,
-        onClick: function onClick() {
-          onTogglePlayButton();
-        },
-        sx: Object.assign({}, isAnimating && {
-          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
-        }, Array.isArray(timeSliderLiteButtonDefaultProps.sx) ? Object.assign.apply(Object, [{}].concat(timeSliderLiteButtonDefaultProps.sx)) : timeSliderLiteButtonDefaultProps.sx),
-        children: isAnimating ? pauseIcon : playIcon
-      }))
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var StepButton = function StepButton(_ref) {
-  var _settings$icon$forwar, _settings$icon, _settings$icon$backwa, _settings$icon2;
-  var forward = _ref.forward,
-    isDisabled = _ref.isDisabled,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-    settings = _ref.settings,
-    tooltipDelay = _ref.tooltipDelay;
-  var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
-    t = _useTimesliderLiteTra.t;
-  var forwardTitle = t('controlButtons.forward');
-  var backwardTitle = t('controlButtons.backward');
-  var forwardIcon = (_settings$icon$forwar = settings == null || (_settings$icon = settings.icon) == null ? void 0 : _settings$icon.forward) != null ? _settings$icon$forwar : /*#__PURE__*/jsx(StepForward, {
-    "data-testid": "step-forward-svg-path"
-  });
-  var backwardIcon = (_settings$icon$backwa = settings == null || (_settings$icon2 = settings.icon) == null ? void 0 : _settings$icon2.backward) != null ? _settings$icon$backwa : /*#__PURE__*/jsx(StepBackward, {
-    "data-testid": "step-backward-svg-path"
-  });
-  return /*#__PURE__*/jsx(Tooltip, {
-    enterDelay: tooltipDelay,
-    enterNextDelay: tooltipDelay,
-    placement: "top",
-    title: forward ? forwardTitle : backwardTitle,
-    children: /*#__PURE__*/jsx("span", {
-      children: /*#__PURE__*/jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
-        "aria-label": forward ? forwardTitle : backwardTitle,
-        "data-testid": "TimeSliderLite-StepButton" + (forward ? 'Forward' : 'Backward'),
-        disabled: isDisabled,
-        onClick: onClick,
-        children: forward ? forwardIcon : backwardIcon
-      }))
-    })
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var TIME_SLIDER_LITE_DEFAULT_HEIGHT = 40;
-var TIME_SLIDER_LITE_DEFAULT_TIME_STEP = 5;
-var TIME_SLIDER_LITE_TOOLTIP_DELAY = 3000;
-var styles = {
-  container: {
-    display: 'grid',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '4px',
-    width: '100%'
-  }
-};
-var TimeSliderLite = function TimeSliderLite(_ref) {
-  var controlButtons = _ref.controlButtons,
-    _ref$currentTime = _ref.currentTime,
-    currentTime = _ref$currentTime === void 0 ? Date.now() * MILLISECOND_TO_SECOND : _ref$currentTime,
-    endTime = _ref.endTime,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? TIME_SLIDER_LITE_DEFAULT_HEIGHT : _ref$height,
-    hideButton = _ref.hideButton,
-    hideMenuButton = _ref.hideMenuButton,
-    hideStepButtons = _ref.hideStepButtons,
-    hidePlayButton = _ref.hidePlayButton,
-    isAnimating = _ref.isAnimating,
-    isVisible = _ref.isVisible,
-    mapId = _ref.mapId,
-    menuOpen = _ref.menuOpen,
-    mouseHoverNeedleOpacity = _ref.mouseHoverNeedleOpacity,
-    overrideAnimation = _ref.overrideAnimation,
-    onToggleAnimation = _ref.onToggleAnimation,
-    onToggleMenu = _ref.onToggleMenu,
-    onToggleTimeSlider = _ref.onToggleTimeSlider,
-    needleWidth = _ref.needleWidth,
-    needleDragAreaWidth = _ref.needleDragAreaWidth,
-    needleLabelZIndex = _ref.needleLabelZIndex,
-    needleLabelOffset = _ref.needleLabelOffset,
-    draggableTimeStamp = _ref.draggableTimeStamp,
-    selectedTime = _ref.selectedTime,
-    setSelectedTime = _ref.setSelectedTime,
-    settings = _ref.settings,
-    startTime = _ref.startTime,
-    sx = _ref.sx,
-    needleDisabled = _ref.needleDisabled,
-    _ref$timeStep = _ref.timeStep,
-    timeStep = _ref$timeStep === void 0 ? [TIME_SLIDER_LITE_DEFAULT_TIME_STEP, TIME_SLIDER_LITE_DEFAULT_TIME_STEP] : _ref$timeStep,
-    _ref$timeZone = _ref.timeZone,
-    timeZone = _ref$timeZone === void 0 ? 'LT' : _ref$timeZone,
-    _ref$animationSpeed = _ref.animationSpeed,
-    animationSpeed = _ref$animationSpeed === void 0 ? 1 : _ref$animationSpeed;
-  var observedTimeStep = timeStep[0],
-    forecastTimeStep = timeStep[1];
-  var timeZoneOffset = timeZone === 'UTC' ? 0 : undefined;
-  var _useState = useState(currentTime),
-    rawSelectedTime = _useState[0],
-    setRawSelectedTime = _useState[1];
-  var forecastTimeStepSeconds = forecastTimeStep * MINUTE_TO_SECOND;
-  var observedTimeStepSeconds = observedTimeStep * MINUTE_TO_SECOND;
-  var lastObservedTime = floorLocalSeconds(currentTime, observedTimeStepSeconds, timeZoneOffset);
-  var firstForecastTime = floorLocalSeconds(currentTime, forecastTimeStepSeconds, timeZoneOffset) + forecastTimeStepSeconds;
-  var timeStepSeconds = rawSelectedTime >= currentTime ? forecastTimeStepSeconds : observedTimeStepSeconds;
-  var roundedStartTime = floorLocalSeconds(startTime + Math.max(forecastTimeStepSeconds, observedTimeStepSeconds, HOUR_TO_SECOND), HOUR_TO_SECOND, timeZoneOffset);
-  var isObservedTimeRange = endTime - currentTime < HOUR_TO_SECOND;
-  var roundedEndTime = floorLocalSeconds(endTime + HOUR_TO_SECOND, HOUR_TO_SECOND, timeZoneOffset);
-  var autoUpdateSelectedTime = useAutoUpdateSelectedTime(lastObservedTime, selectedTime, setRawSelectedTime);
-  var runningExternalAnimation = overrideAnimation && isAnimating;
-  var runningInternalAnimation = !overrideAnimation && isAnimating;
-  useEffect(function () {
-    if (needleDisabled && selectedTime !== lastObservedTime) {
-      setRawSelectedTime(lastObservedTime);
-      setSelectedTime(lastObservedTime);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTime, needleDisabled, lastObservedTime]);
-  useEffect(function () {
-    if (!runningExternalAnimation) {
-      var roundedSelectedTime = floorLocalSeconds(rawSelectedTime, timeStepSeconds, timeZoneOffset);
-      setSelectedTime(roundedSelectedTime);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rawSelectedTime, timeStepSeconds, runningExternalAnimation]);
-  useEffect(function () {
-    if (runningInternalAnimation) {
-      var interval = setInterval(function () {
-        handleTimeStep(timeStepSeconds, true);
-      }, SECOND_TO_MILLISECOND / animationSpeed);
-      return function () {
-        return clearInterval(interval);
-      };
-    }
-    if (runningExternalAnimation) {
-      setRawSelectedTime(selectedTime);
-    }
-    return function () {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runningInternalAnimation, runningExternalAnimation, selectedTime]);
-  var handleTimeStep = function handleTimeStep(stepSeconds, asAnimation) {
-    var newSteppedTime = stepSeconds >= 0 ? floorLocalSeconds(rawSelectedTime, timeStepSeconds, timeZoneOffset) + stepSeconds : floorLocalSeconds(rawSelectedTime - 1, timeStepSeconds, timeZoneOffset);
-    if (asAnimation && newSteppedTime > roundedEndTime + 1) {
-      setRawSelectedTime(roundedStartTime);
-      return;
-    }
-
-    // Handle stepping over current time
-    if (newSteppedTime >= currentTime && currentTime > rawSelectedTime && !isObservedTimeRange) {
-      setRawSelectedTime(firstForecastTime);
-    } else if (newSteppedTime < currentTime && currentTime <= rawSelectedTime && newSteppedTime >= roundedStartTime) {
-      setRawSelectedTime(lastObservedTime);
-    } else {
-      // Handle normal stepping
-      setRawSelectedTime(boundedValue(newSteppedTime, [roundedStartTime, isObservedTimeRange ? lastObservedTime : roundedEndTime]));
-    }
-    if (!asAnimation && isAnimating && onToggleAnimation) {
-      onToggleAnimation();
-    }
-  };
-  var handleTimeSelect = function handleTimeSelect(value) {
-    setRawSelectedTime(boundedValue(value, [roundedStartTime, roundedEndTime]));
-    if (isAnimating && onToggleAnimation) {
-      onToggleAnimation();
-    }
-  };
-
-  // Handle time range selection
-  useEffect(function () {
-    var userDraggingNeedle = rawSelectedTime !== selectedTime || rawSelectedTime === roundedEndTime;
-    if (!userDraggingNeedle) {
-      var newRawSelectedTime = isObservedTimeRange ? lastObservedTime : roundedEndTime;
-      var isValid = newRawSelectedTime >= roundedStartTime;
-      setRawSelectedTime(boundedValue(selectedTime, [roundedStartTime, isValid ? newRawSelectedTime : roundedStartTime]));
-    }
-    if (needleDisabled) {
-      setRawSelectedTime(selectedTime);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime, endTime, needleDisabled, timeStep]);
-  var tooltipDelay = menuOpen ? TIME_SLIDER_LITE_TOOLTIP_DELAY : undefined;
-  return /*#__PURE__*/jsxs(Grid, {
-    container: true,
-    "data-testid": "timeSliderLite-" + mapId,
-    sx: Object.assign({}, styles.container, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx, {
-      gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      boxShadow: isVisible ? sx == null ? void 0 : sx.boxShadow : undefined
-    }),
-    children: [isVisible ? /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(Grid, {
-        sx: {
-          height: height + "px"
-        },
-        children: controlButtons || /*#__PURE__*/jsxs(ControlButtonGroup, {
-          left: true,
-          children: [!hideMenuButton && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(MenuButton, {
-              menuOpen: menuOpen,
-              onClick: onToggleMenu,
-              settings: settings == null ? void 0 : settings.menuButton
-            }), /*#__PURE__*/jsx(Divider, {
-              orientation: "vertical",
-              sx: {
-                height: height + "px",
-                margin: '2px'
-              }
-            })]
-          }), !hidePlayButton && /*#__PURE__*/jsx(PlayButton, {
-            isAnimating: isAnimating,
-            isDisabled: needleDisabled,
-            onTogglePlayButton: onToggleAnimation,
-            settings: settings == null ? void 0 : settings.playButton,
-            tooltipDelay: tooltipDelay
-          }), !hideStepButtons && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(StepButton, {
-              isDisabled: needleDisabled,
-              onClick: function onClick() {
-                return handleTimeStep(-timeStepSeconds);
-              },
-              settings: settings == null ? void 0 : settings.stepButton,
-              tooltipDelay: tooltipDelay
-            }), /*#__PURE__*/jsx(StepButton, {
-              forward: true,
-              isDisabled: needleDisabled,
-              onClick: function onClick() {
-                return handleTimeStep(timeStepSeconds);
-              },
-              settings: settings == null ? void 0 : settings.stepButton,
-              tooltipDelay: tooltipDelay
-            })]
-          })]
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        children: /*#__PURE__*/jsx(TimeSliderLiteBackground, {
-          currentTime: currentTime,
-          currentTimeSelected: !!autoUpdateSelectedTime && !isAnimating,
-          disableForecast: isObservedTimeRange,
-          draggableTimeStamp: draggableTimeStamp,
-          endTime: roundedEndTime,
-          height: height,
-          mouseHoverNeedleOpacity: mouseHoverNeedleOpacity,
-          needleDragAreaWidth: needleDragAreaWidth,
-          needleLabelOffset: needleLabelOffset,
-          needleLabelZIndex: needleLabelZIndex,
-          needleWidth: needleWidth,
-          resetSelectedTime: function resetSelectedTime() {
-            return setRawSelectedTime(lastObservedTime);
-          },
-          selectedTime: runningExternalAnimation ? selectedTime : rawSelectedTime,
-          setSelectedTime: handleTimeSelect,
-          startTime: roundedStartTime,
-          timeStep: [observedTimeStepSeconds, forecastTimeStepSeconds],
-          timeZone: timeZone,
-          zerorange: needleDisabled
-        })
-      })]
-    }) : /*#__PURE__*/jsx(Grid, {}), /*#__PURE__*/jsx(Grid, {
-      sx: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        boxShadow: isVisible ? 'none' : sx == null ? void 0 : sx.boxShadow,
-        borderRadius: isVisible ? 'none' : '4px',
-        height: height + "px"
-      },
-      children: hideButton || /*#__PURE__*/jsx(ControlButtonGroup, {
-        className: "timeSliderLite-hideButtonGroup-" + (isVisible ? 'hide' : 'show'),
-        right: isVisible,
-        children: /*#__PURE__*/jsx(HideButton, {
-          isVisible: isVisible,
-          onClick: onToggleTimeSlider,
-          settings: settings == null ? void 0 : settings.hideButton
-        })
-      })
-    })]
-  });
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-
-var useOnToggleAnimation = function useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, timeSliderProps) {
-  var startMapAnimation = function startMapAnimation() {
-    var _timeStep$, _timeStep$2, _timeSliderProps$curr, _timeSliderProps$curr2;
-    var observedTimeStep = (_timeStep$ = timeStep == null ? void 0 : timeStep[0]) != null ? _timeStep$ : defaultTimeStep[0];
-    var forecastTimeStep = (_timeStep$2 = timeStep == null ? void 0 : timeStep[1]) != null ? _timeStep$2 : defaultTimeStep[1];
-    var floorCorrectedTimeStart = floorLocalSeconds(startTime + HOUR_TO_SECOND, HOUR_TO_SECOND);
-    var floorCorrectedEndTime = floorLocalSeconds(endTime + HOUR_TO_SECOND, HOUR_TO_SECOND);
-    var currentTime = (_timeSliderProps$curr = timeSliderProps.currentTime) != null ? _timeSliderProps$curr : Date.now() * MILLISECOND_TO_SECOND;
-    var observedOnly = floorCorrectedEndTime - currentTime < HOUR_TO_SECOND;
-    var timeList = generateCustomTimeList((_timeSliderProps$curr2 = timeSliderProps.currentTime) != null ? _timeSliderProps$curr2 : Date.now() * MILLISECOND_TO_SECOND, floorCorrectedTimeStart, observedOnly ? currentTime : floorCorrectedEndTime, [observedTimeStep, forecastTimeStep], timeSliderProps.timeZone === 'UTC' ? 0 : undefined);
-    dispatch(mapActions.mapStartAnimation({
-      mapId: mapId,
-      initialTime: new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString(),
-      timeList: timeList,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  };
-  var onToggleAnimation = function onToggleAnimation(forceStart) {
-    if (isAnimating && !forceStart) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId,
-        origin: mapEnums.MapActionOrigin.map
-      }));
-    } else {
-      startMapAnimation();
-    }
-  };
-  React.useEffect(function () {
-    var hasTimeRange = startTime && endTime && selectedTime;
-    var isInvalidAnimation = selectedTime < startTime || selectedTime > endTime;
-    if (hasTimeRange && isInvalidAnimation && isAnimating) {
-      startMapAnimation();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTime, startTime, endTime]);
-  return onToggleAnimation;
-};
-
-var _excluded = ["overrideUseTimeRange", "overrideUseTimeStep", "overrideUseTimeZone", "overrideUseUpdateInterval", "overrideHandleAutoUpdate", "preTimeDimensionSelect", "sourceId", "mapId", "isAlwaysVisible", "TimeSliderLiteOptionsMenuProps"];
-var TimeSliderLiteConnect = function TimeSliderLiteConnect(_ref) {
-  var _TimeSliderLiteOption, _timeSliderProps$sett, _timeSliderProps$sett2, _timeSliderProps$sett3;
-  var overrideUseTimeRange = _ref.overrideUseTimeRange,
-    overrideUseTimeStep = _ref.overrideUseTimeStep,
-    overrideUseTimeZone = _ref.overrideUseTimeZone,
-    overrideUseUpdateInterval = _ref.overrideUseUpdateInterval,
-    overrideHandleAutoUpdate = _ref.overrideHandleAutoUpdate,
-    _ref$preTimeDimension = _ref.preTimeDimensionSelect,
-    preTimeDimensionSelect = _ref$preTimeDimension === void 0 ? function (_, selectedTime) {
-      return new Date(selectedTime * SECOND_TO_MILLISECOND).toISOString();
-    } : _ref$preTimeDimension,
-    sourceId = _ref.sourceId,
-    mapId = _ref.mapId,
-    _ref$isAlwaysVisible = _ref.isAlwaysVisible,
-    isAlwaysVisible = _ref$isAlwaysVisible === void 0 ? false : _ref$isAlwaysVisible,
-    TimeSliderLiteOptionsMenuProps = _ref.TimeSliderLiteOptionsMenuProps,
-    timeSliderProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    menuOpen = _React$useState[0],
-    setMenuOpen = _React$useState[1];
-  // eslint-disable-next-line react/hook-use-state
-  var useTimeRange = React.useState(null);
-  var _ref2 = overrideUseTimeRange || useTimeRange,
-    timeRange = _ref2[0],
-    setTimeRange = _ref2[1];
-  // eslint-disable-next-line react/hook-use-state
-  var useTimeStep = React.useState(null);
-  var _ref3 = overrideUseTimeStep || useTimeStep,
-    timeStep = _ref3[0],
-    setTimeStep = _ref3[1];
-  // eslint-disable-next-line react/hook-use-state
-  var useTimeZone = React.useState('LT');
-  var _ref4 = overrideUseTimeZone || useTimeZone,
-    timeZone = _ref4[0],
-    setTimeZone = _ref4[1];
-
-  // eslint-disable-next-line react/hook-use-state
-  var useUpdateInterval = React.useState(null);
-  var _ref5 = overrideUseUpdateInterval || useUpdateInterval,
-    updateInterval = _ref5[0],
-    setUpdateInterval = _ref5[1];
-  var dispatch = useDispatch();
-  var _useAutoUpdate = useAutoUpdate(timeRange, setTimeRange, Object.assign({}, TimeSliderLiteOptionsMenuProps, {
-      handleUpdate: overrideHandleAutoUpdate
-    })),
-    currentTime = _useAutoUpdate.currentTime;
-  var isTimeSliderVisible = useSelector(function (store) {
-    return mapSelectors.isTimeSliderVisible(store, mapId);
-  });
-  var isVisible = isAlwaysVisible || isTimeSliderVisible;
-  var onToggleTimeSliderVisibility = function onToggleTimeSliderVisibility() {
-    dispatch(mapActions.toggleTimeSliderIsVisible({
-      mapId: mapId,
-      isTimeSliderVisible: !isVisible,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  };
-  var animationDelay = useSelector(function (store) {
-    return mapSelectors.getMapAnimationDelay(store, mapId);
-  });
-  var animationSpeed = animationDelay ? SECOND_TO_MILLISECOND / animationDelay : defaultAnimationDelayAtStart;
-  var handleAnimationSpeedChange = function handleAnimationSpeedChange(animationSpeed) {
-    var animationDelay = SECOND_TO_MILLISECOND / animationSpeed;
-    dispatch(mapActions.setAnimationDelay({
-      mapId: mapId,
-      animationDelay: animationDelay,
-      origin: mapEnums.MapActionOrigin.map
-    }));
-  };
-  var defaultTimeStep = (_TimeSliderLiteOption = TimeSliderLiteOptionsMenuProps == null ? void 0 : TimeSliderLiteOptionsMenuProps.defaultTimeStep) != null ? _TimeSliderLiteOption : [5, 15];
-  var layers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, mapId);
-  });
-  var _useDefaultTimeRange = useDefaultTimeRange(layers, HOUR_TO_MINUTE, currentTime),
-    defaultStartTime = _useDefaultTimeRange[0],
-    defaultEndTime = _useDefaultTimeRange[1];
-  var _ref6 = timeRange || [defaultStartTime, defaultEndTime],
-    startTime = _ref6[0],
-    endTime = _ref6[1];
-  var zeroRange = isWithinRange(startTime, endTime, 30 * MINUTE_TO_SECOND);
-  var isAnimating = useSelector(function (store) {
-    return mapSelectors.isAnimating(store, mapId);
-  });
-  useEffect(function () {
-    if (zeroRange) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId
-      }));
-    }
-  }, [dispatch, mapId, zeroRange]);
-  var selectedTime = useSelector(function (store) {
-    return mapSelectors.getSelectedTime(store, mapId);
-  });
-  var onToggleAnimation = useOnToggleAnimation(dispatch, mapId, selectedTime, timeStep, defaultTimeStep, startTime, endTime, isAnimating, Object.assign({}, timeSliderProps, {
-    timeZone: timeZone
-  }));
-
-  // Restart animation if auto updated
-  useEffect(function () {
-    if (isAnimating) {
-      onToggleAnimation(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentTime]);
-  var handleTimeRangeChange = function handleTimeRangeChange(newTimeRange) {
-    if (isAnimating && newTimeRange) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId
-      }));
-    }
-    setTimeRange(newTimeRange);
-  };
-  var handleTimeStepChange = function handleTimeStepChange(newTimeStep) {
-    if (isAnimating) {
-      dispatch(mapActions.mapStopAnimation({
-        mapId: mapId
-      }));
-    }
-    setTimeStep(newTimeStep);
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [!!isVisible && !!menuOpen && /*#__PURE__*/jsx(TimeSliderLiteOptionsMenu, Object.assign({
-      TimeZoneSwitch: timeSliderProps == null || (_timeSliderProps$sett = timeSliderProps.settings) == null ? void 0 : _timeSliderProps$sett.TimeZoneSwitch,
-      closeButtonIcon: (_timeSliderProps$sett2 = timeSliderProps.settings) == null || (_timeSliderProps$sett2 = _timeSliderProps$sett2.closeButton) == null ? void 0 : _timeSliderProps$sett2.icon,
-      defaultTimeRange: [defaultStartTime, defaultEndTime],
-      defaultTimeStep: defaultTimeStep // TODO: Calculate from layers
-      ,
-      dropdownButtonIcon: (_timeSliderProps$sett3 = timeSliderProps.settings) == null || (_timeSliderProps$sett3 = _timeSliderProps$sett3.dropdownButton) == null ? void 0 : _timeSliderProps$sett3.icon,
-      menuOpen: menuOpen,
-      setMenuOpen: setMenuOpen,
-      useAnimationSpeed: [animationSpeed, handleAnimationSpeedChange],
-      useTimeRange: [timeRange, handleTimeRangeChange],
-      useTimeStep: [timeStep, handleTimeStepChange],
-      useTimeZone: [timeZone, setTimeZone],
-      useUpdateInterval: [updateInterval, setUpdateInterval]
-    }, TimeSliderLiteOptionsMenuProps)), /*#__PURE__*/jsx(TimeSliderLite, Object.assign({
-      currentTime: currentTime,
-      endTime: endTime,
-      isAnimating: !!isAnimating,
-      isVisible: isVisible,
-      mapId: mapId,
-      menuOpen: menuOpen,
-      needleDisabled: zeroRange,
-      onToggleAnimation: onToggleAnimation,
-      onToggleMenu: function onToggleMenu() {
-        return setMenuOpen(!menuOpen);
-      },
-      onToggleTimeSlider: onToggleTimeSliderVisibility,
-      overrideAnimation: true,
-      selectedTime: selectedTime,
-      setSelectedTime: function setSelectedTime(newSelectedTime) {
-        var newDate = preTimeDimensionSelect(mapId, newSelectedTime);
-        if (isAnimating) {
-          dispatch(mapActions.mapStopAnimation({
-            mapId: mapId
-          }));
-        }
-        dispatch(genericActions.setTime({
-          sourceId: sourceId,
-          value: {
-            currentTime: handleDateUtilsISOString(newDate)
-          },
-          origin: mapEnums.MapActionOrigin.map
-        }));
-      },
-      startTime: startTime,
-      timeStep: timeStep != null ? timeStep : defaultTimeStep,
-      timeZone: timeZone
-    }, timeSliderProps))]
-  });
-};
-
-export { TIME_SLIDER_LITE_NAMESPACE, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteI18nProvider, TimeSliderLiteOptionsMenu, timeSliderLiteUtils as TimeSliderLiteUtils, initTimeSliderLiteI18n, translations as timeSliderLiteTranslations, translations as timesliderliteTranslations, useTimesliderLiteTranslation };