@opengeoweb/time-slider-lite 13.0.0

package/index.esm.js

@@ -0,0 +1,2559 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Card, Typography, IconButton, Select, MenuItem, CardContent, RadioGroup, FormControlLabel, Radio, Grid, Box, ToggleButtonGroup, ToggleButton, Divider, Tooltip, ButtonGroup, useTheme } from '@mui/material';
+import { Close, ChevronDown, ChevronUp, StepForward, StepBackward, Pause, Play, Options } from '@opengeoweb/theme';
+import React, { useState, useEffect, useLayoutEffect, createElement, useRef } from 'react';
+import { usePrevious, safelyInitI18nForTestsAndStories } from '@opengeoweb/shared';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import i18n from 'i18next';
+import { CORE_NAMESPACE, coreTranslations } from '@opengeoweb/core';
+import { speedFactors, defaultAnimationDelayAtStart } from '@opengeoweb/time-slider';
+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 jsxs(Card, Object.assign({}, props, {
+    sx: Object.assign({
+      position: 'relative'
+    }, sx),
+    children: [jsx(Typography, {
+      sx: {
+        fontWeight: '500',
+        padding: '16px',
+        paddingBottom: '0px'
+      },
+      children: title
+    }), jsx(IconButton, {
+      "data-testid": "TimeSliderLite-submenuWrapper-closeButton",
+      size: "small",
+      sx: {
+        position: 'absolute',
+        top: 4,
+        right: 4
+      },
+      onClick: function onClick() {
+        return setSubmenu && setSubmenu(null);
+      },
+      children: closeButtonIcon != null ? closeButtonIcon : 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);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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;
+(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";
+})(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
+});
+
+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 jsx(I18nextProvider, {
+    i18n: i18nInstance != null ? i18nInstance : i18n,
+    children: children
+  });
+};
+var useTimesliderLiteTranslation = function useTimesliderLiteTranslation() {
+  return useTranslation(TIME_SLIDER_LITE_NAMESPACE);
+};
+
+var _excluded$3 = ["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$3);
+  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 jsx(Select, Object.assign({}, props, {
+    className: "TimeSliderLite-timeStepSelect",
+    "data-testid": "TimeSliderLite-timeStepSelect",
+    inputProps: {
+      'data-testid': 'TimeSliderLite-timeStepSelect-input'
+    },
+    sx: {
+      height: '40px',
+      width: '100%'
+    },
+    value: String(availableOptionKeys.includes(String(value)) ? value : availableOptionKeys[availableOptionKeys.length - 1]),
+    onChange: function onChange(event) {
+      var _event$target;
+      var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+      setValue(newValue);
+    },
+    IconComponent: dropdownButtonIcon,
+    children: availableOptionKeys.map(function (option) {
+      return jsx(MenuItem, {
+        value: String(option),
+        children: options[option]
+      }, String(option));
+    })
+  }));
+};
+
+var SubmenuSelectLabel = function SubmenuSelectLabel(_ref) {
+  var children = _ref.children,
+    isDisabled = _ref.isDisabled;
+  return jsx(Typography, {
+    sx: {
+      opacity: isDisabled ? 0.5 : 1,
+      fontWeight: '400',
+      paddingTop: '10px'
+    },
+    children: children
+  });
+};
+
+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 && setTimeStep(null);
+      setObservedTimeStep(defaultTimeStep[0]);
+      setForecastTimeStep(defaultTimeStep[1]);
+    }
+    if (event.target.value === 'custom' && setTimeStep) {
+      setTimeStep(defaultTimeStep);
+    }
+  };
+  return jsxs(CardContent, {
+    "data-testid": "TimeSliderLite-timeStepOptions",
+    sx: {
+      paddingTop: '4px',
+      '& label': {
+        height: '36px'
+      },
+      '&:last-child': {
+        paddingBottom: '16px'
+      }
+    },
+    children: [jsxs(RadioGroup, {
+      defaultValue: isDefault ? 'default' : 'custom',
+      name: "time-range-radio-button-group",
+      row: true,
+      sx: {
+        marginTop: 1
+      },
+      value: isDefault ? 'default' : 'custom',
+      onChange: handleIsDefaultChange,
+      children: [jsx(FormControlLabel, {
+        disabled: isReadOnly,
+        value: "default",
+        control: jsx(Radio, {}),
+        label: t('common.default')
+      }), jsx(FormControlLabel, {
+        disabled: isReadOnly,
+        value: "custom",
+        control: jsx(Radio, {}),
+        label: t('common.custom')
+      })]
+    }), jsxs(Grid, {
+      container: true,
+      width: 250,
+      children: [jsx(Grid, {
+        size: {
+          xs: 4
+        },
+        sx: {
+          marginY: 1
+        },
+        children: jsx(SubmenuSelectLabel, {
+          isDisabled: isDefault,
+          children: t('common.observed')
+        })
+      }), jsx(Grid, {
+        size: {
+          xs: 8
+        },
+        paddingX: "4px",
+        sx: {
+          marginY: 1
+        },
+        children: jsx(TimeStepSelector, {
+          disabled: isDefault,
+          value: observedTimeStep,
+          setValue: setObservedTimeStep,
+          defaultTimeStep: defaultTimeStep[0],
+          dropdownButtonIcon: dropdownButtonIcon,
+          timeStepOptions: timeStepOptions
+        })
+      }), jsx(Grid, {
+        size: {
+          xs: 4
+        },
+        children: jsx(SubmenuSelectLabel, {
+          isDisabled: isDefault,
+          children: t('common.forecast')
+        })
+      }), jsx(Grid, {
+        size: {
+          xs: 8
+        },
+        paddingX: "4px",
+        children: jsx(TimeStepSelector, {
+          disabled: isDefault,
+          value: forecastTimeStep,
+          setValue: setForecastTimeStep,
+          defaultTimeStep: defaultTimeStep[1],
+          dropdownButtonIcon: dropdownButtonIcon,
+          timeStepOptions: timeStepOptions
+        })
+      })]
+    })]
+  });
+};
+
+var _excluded$2 = ["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$2);
+  var availableOptions = Array.from(Array(amountOfOptions).keys());
+  return jsx(Select, Object.assign({}, props, {
+    "data-testid": "TimeSliderLite-customSelect-" + itemPostFix,
+    inputProps: {
+      'data-testid': "TimeSliderLite-customSelect-" + itemPostFix + "-input"
+    },
+    sx: {
+      height: '40px',
+      width: '100%'
+    },
+    value: String(availableOptions.includes(value) ? value : availableOptions[availableOptions.length - 1]),
+    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);
+      }
+    },
+    autoWidth: false,
+    IconComponent: dropdownButtonIcon,
+    children: availableOptions.map(function (option) {
+      return 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 jsxs(Grid, {
+    container: true,
+    sx: sx,
+    children: [jsx(Grid, {
+      size: {
+        xs: 3
+      },
+      children: jsx(SubmenuSelectLabel, {
+        isDisabled: isDisabled || amountOfDayOptions === 1 && amountOfHourOptions === 1,
+        children: label
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 4.5
+      },
+      paddingX: "4px",
+      children: jsx(CustomSelect, {
+        disabled: isDisabled || amountOfDayOptions === 1,
+        value: days,
+        setValue: setDays,
+        itemPostFix: t('units.days'),
+        amountOfOptions: amountOfDayOptions,
+        dropdownButtonIcon: dropdownButtonIcon
+      })
+    }), jsx(Grid, {
+      size: {
+        xs: 4.5
+      },
+      paddingLeft: "4px",
+      children: jsx(CustomSelect, {
+        disabled: isDisabled || amountOfHourOptions === 1,
+        value: hours,
+        setValue: setHours,
+        itemPostFix: t('units.hours'),
+        amountOfOptions: amountOfHourOptions,
+        dropdownButtonIcon: dropdownButtonIcon
+      })
+    })]
+  });
+};
+
+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 || 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 jsxs(CardContent, {
+    className: "TimeSliderLite-timeRangeOptions",
+    "data-testid": "TimeSliderLite-timeRangeOptions",
+    sx: {
+      paddingTop: '4px',
+      '& label': {
+        height: '36px'
+      },
+      '&:last-child': {
+        paddingBottom: '16px'
+      }
+    },
+    children: [t('menu.timeRange.description'), jsxs(RadioGroup, {
+      defaultValue: isDefault ? 'default' : 'custom',
+      name: "time-range-radio-button-group",
+      row: true,
+      sx: {
+        marginTop: 1
+      },
+      value: isDefault ? 'default' : 'custom',
+      onChange: handleIsDefaultChange,
+      children: [jsx(FormControlLabel, {
+        disabled: isReadOnly,
+        value: "default",
+        control: jsx(Radio, {}),
+        label: t('common.default')
+      }), jsx(FormControlLabel, {
+        disabled: isReadOnly,
+        value: "custom",
+        control: jsx(Radio, {}),
+        label: t('common.custom')
+      })]
+    }), jsxs(Box, {
+      minWidth: TIME_SELECTOR_MIN_WIDTH,
+      children: [jsx(DayHourSelector, {
+        isDisabled: isDefault,
+        dropdownButtonIcon: dropdownButtonIcon,
+        label: t('common.observed'),
+        maxHours: maxObservedHours,
+        sx: {
+          marginY: 1
+        },
+        useDays: [observedDays, setObservedDays],
+        useHours: [observedHours, setObservedHours]
+      }), jsx(DayHourSelector, {
+        isDisabled: isDefault,
+        dropdownButtonIcon: dropdownButtonIcon,
+        label: t('common.forecast'),
+        maxHours: maxForecastHours,
+        useDays: [forecastDays, setForecastDays],
+        useHours: [forecastHours, setForecastHours]
+      })]
+    })]
+  });
+};
+
+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 jsx(CardContent, {
+    className: "TimeSliderLite-animationSpeedOptions",
+    "data-testid": "TimeSliderLite-animationSpeedOptions",
+    sx: {
+      paddingTop: '12px',
+      marginBottom: '-8px',
+      minWidth: '200px'
+    },
+    children: jsx(Select, {
+      disabled: readOnly,
+      className: "TimeSliderLite-animationSpeedSelect",
+      "data-testid": "TimeSliderLite-animationSpeedSelect",
+      inputProps: {
+        'data-testid': 'TimeSliderLite-animationSpeedSelect-input'
+      },
+      sx: {
+        height: '40px'
+      },
+      value: String(animationSpeed),
+      onChange: function onChange(event) {
+        var _event$target;
+        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+        setAnimationSpeed && setAnimationSpeed(newValue);
+      },
+      IconComponent: dropdownButtonIcon,
+      children: speedOptions.map(function (option) {
+        var postfix = option === defaultSpeedFactor ? translatedSpeedOptionPostfix : speedOptionItemPostfix;
+        var label = speedOptionItemPrefix + option + postfix;
+        return jsx(MenuItem, {
+          value: String(option),
+          children: label
+        }, String(option));
+      })
+    })
+  });
+};
+
+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 jsx(CardContent, {
+    className: "TimeSliderLite-updateIntervalOptions",
+    "data-testid": "TimeSliderLite-updateIntervalOptions",
+    sx: {
+      paddingTop: '12px',
+      marginBottom: '-8px',
+      minWidth: '200px'
+    },
+    children: jsx(Select, {
+      disabled: readOnly,
+      className: "TimeSliderLite-updateIntervalSelect",
+      "data-testid": "TimeSliderLite-updateIntervalSelect",
+      inputProps: {
+        'data-testid': 'TimeSliderLite-updateIntervalSelect-input'
+      },
+      sx: {
+        height: '40px'
+      },
+      value: String(updateInterval != null ? updateInterval : defaultValue),
+      onChange: function onChange(event) {
+        var _event$target;
+        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+        setUpdateInterval && setUpdateInterval(newValue === defaultValue ? null : newValue);
+      },
+      IconComponent: dropdownButtonIcon,
+      children: updateIntervalOptions.map(function (option) {
+        var label = option === defaultValue ? "" + intervalOptionPrefix + option + translatedDefaultOptionPostfix : "" + intervalOptionPrefix + option + translatedIntervalOptionPostfix;
+        return jsx(MenuItem, {
+          value: String(option),
+          children: label
+        }, String(option));
+      })
+    })
+  });
+};
+
+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 jsx(ToggleButtonGroup, {
+    disabled: !setTimeZone,
+    className: "TimeSliderLite-timeZoneSwitch",
+    "data-testid": "TimeSliderLite-timeZoneSwitch",
+    value: timeZone != null ? timeZone : 'LT',
+    exclusive: true,
+    sx: styles$3.root,
+    onChange: function onChange(_event, newZone) {
+      if (newZone && setTimeZone) {
+        setTimeZone(newZone);
+      }
+    },
+    children: availableTimeZones.map(function (zone) {
+      return jsx(ToggleButton, {
+        value: zone,
+        children: t("menu." + zone)
+      }, zone);
+    })
+  });
+};
+
+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;
+(function (SubmenuTitleTranslations) {
+  SubmenuTitleTranslations["TIME_RANGE"] = "menu.timeRange";
+  SubmenuTitleTranslations["TIME_STEP"] = "menu.timeStep";
+  SubmenuTitleTranslations["SPEED"] = "menu.speed";
+  SubmenuTitleTranslations["UPDATE_INTERVAL"] = "menu.updateInterval";
+})(SubmenuTitleTranslations || (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 jsxs(Fragment, {
+    children: [submenu && jsxs(SubmenuWrapper, {
+      sx: Object.assign({
+        left: submenuLeft,
+        marginLeft: '-12px'
+      }, subMenuSx),
+      setSubmenu: setSubmenu,
+      title: t(submenu + ".title"),
+      closeButtonIcon: closeButtonIcon,
+      children: [submenu === SubmenuTitleTranslations.TIME_RANGE && jsx(TimeRangeOptions, {
+        currentTime: currentTime,
+        useTimeRange: useTimeRange,
+        defaultTimeRange: defaultTimeRange,
+        dropdownButtonIcon: dropdownButtonIcon
+      }), submenu === SubmenuTitleTranslations.TIME_STEP && jsx(TimeStepOptions, {
+        defaultTimeStep: defaultTimeStep,
+        useTimeStep: useTimeStep,
+        dropdownButtonIcon: dropdownButtonIcon,
+        timeStepOptions: timeStepOptions
+      }), submenu === SubmenuTitleTranslations.SPEED && jsx(AnimationSpeedOptions, {
+        useAnimationSpeed: useAnimationSpeed,
+        dropdownButtonIcon: dropdownButtonIcon,
+        speedOptionItemPostfix: speedOptionItemPostfix,
+        speedOptionItemPrefix: speedOptionItemPrefix,
+        speedOptions: speedOptions,
+        defaultSpeedFactor: defaultSpeedFactor
+      }), submenu === SubmenuTitleTranslations.UPDATE_INTERVAL && jsx(UpdateIntervalOptions, {
+        defaultUpdateInterval: defaultUpdateInterval,
+        dropdownButtonIcon: dropdownButtonIcon,
+        updateIntervalOptions: updateIntervalOptions,
+        useUpdateInterval: useUpdateInterval
+      })]
+    }), jsxs(Box, {
+      sx: Object.assign({
+        backgroundColor: 'geowebColors.background.surface',
+        borderRadius: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        marginY: 1,
+        visibility: menuOpen ? 'visible' : 'hidden'
+      }, sx),
+      children: [jsx(ToggleButtonGroup, {
+        "data-testid": "TimeSliderLite-optionsMenu",
+        value: submenu,
+        exclusive: true,
+        sx: {
+          padding: 0.5,
+          gap: 0.5
+        },
+        onChange: function onChange(event, newOption) {
+          setSubmenu(newOption);
+          var button = event.currentTarget;
+          var buttonPosition = button.getBoundingClientRect();
+          setSubmenuLeft(buttonPosition.x);
+        },
+        children: Object.values(SubmenuTitleTranslations).map(function (value) {
+          return jsx(ToggleButton, {
+            value: value,
+            sx: styles$2.button,
+            children: t(value + ".button")
+          }, value);
+        })
+      }), jsx(TimeZoneSwitch$1, {
+        useTimeZone: useTimeZone != null ? useTimeZone : ['LT']
+      }), jsx(Divider, {
+        orientation: "vertical",
+        flexItem: true
+      }), jsx(IconButton, {
+        "data-testid": "TimeSliderLite-optionsMenu-closeButton",
+        size: "small",
+        sx: {
+          margin: 0.5
+        },
+        onClick: function onClick() {
+          return setMenuOpen && setMenuOpen(false);
+        },
+        children: closeButtonIcon != null ? closeButtonIcon : 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 timeSliderLiteButtonDefaultProps = {
+  sx: {
+    width: '36px',
+    height: '36px'
+  }
+};
+
+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 : jsx(ChevronDown, {});
+  var showIcon = (_settings$icon$show = settings == null || (_settings$icon2 = settings.icon) == null ? void 0 : _settings$icon2.show) != null ? _settings$icon$show : jsx(ChevronUp, {});
+  return jsx(Tooltip, {
+    placement: "top-end",
+    title: isVisible ? t('controlButtons.hide') : t('controlButtons.show'),
+    children: jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+      "aria-selected": !isVisible,
+      onClick: onClick,
+      "data-testid": "TimeSliderLite-HideButton",
+      children: isVisible ? hideIcon : showIcon
+    }))
+  });
+};
+
+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 jsx(ButtonGroup, Object.assign({
+    orientation: "horizontal",
+    fullWidth: true
+  }, 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'
+    }, props.sx),
+    children: children
+  }));
+};
+
+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 jsx("svg", {
+      style: style,
+      height: height
+    });
+  }
+  // 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 jsx("text", {
+      x: x,
+      y: 14,
+      fill: timeSliderLite.timeline.fill,
+      textAnchor: "left",
+      fontSize: "12px",
+      style: {
+        userSelect: 'none'
+      },
+      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, {
+      fill: isObserved ? observedColor : forecastColor,
+      width: Math.ceil(tickSpacing),
+      key: label + "-color",
+      "data-testid": "TimeSliderLite-BackgroundRectangle-" + (isObserved ? 'Observed' : 'Forecast')
+    }));
+    var localDayOffset = secondsSinceLocalMidnight(currentTime) * SECOND_TO_DAY + utcOffset;
+    var isCurrentDay = index === Math.floor(currentDayIndex);
+    if (isCurrentDay) {
+      var partialRectangle = /*#__PURE__*/createElement("rect", Object.assign({}, defaultProps, {
+        width: tickSpacing * localDayOffset,
+        fill: observedColor,
+        key: label + "-partial-color"
+      }));
+      return [baseRectangle, partialRectangle];
+    }
+    return baseRectangle;
+  }).flat();
+  var dailyLabels = !showMonthLabel ? dayLabels.map(function (label, index) {
+    return jsx("text", {
+      x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + 8 - tickOffset,
+      y: 14,
+      fill: timeSliderLite.timeline.fill,
+      textAnchor: "left",
+      fontSize: "12px",
+      style: {
+        userSelect: 'none'
+      },
+      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 jsxs("g", {
+        children: [jsx("text", Object.assign({}, defaultProps, {
+          textAnchor: "end",
+          style: {
+            userSelect: 'none'
+          },
+          children: value
+        })), jsx("text", Object.assign({}, defaultProps, {
+          textAnchor: "start",
+          style: {
+            userSelect: 'none'
+          },
+          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, {
+          x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
+          key: label + "-" + value + "-observed-tick"
+        }));
+      });
+      var forecastTickMarksFromEndOfDay = Array.from({
+        length: Math.floor(forecastTicksPerDay * (1 - (currentDayIndex - index))) + 1
+      }, function (_, value) {
+        return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
+          x1: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
+          key: label + "-" + value + "-forecast-tick"
+        }));
+      });
+      return [].concat(observedTickMarksFromStartOfDay, forecastTickMarksFromEndOfDay);
+    }
+    return Array.from({
+      length: ticksPerDay + 1
+    }, function (_, value) {
+      return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
+        x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
+        key: label + "-" + value + "-tick"
+      }));
+    });
+  }).flat();
+  return jsxs("svg", {
+    style: style,
+    width: width + TIME_SLIDER_LITE_PADDING_RIGHT,
+    height: height,
+    children: [backgroundRectangles, tickMarks, monthLabels, dailyLabels, hourLabels]
+  });
+};
+
+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 jsx("line", {
+    x1: x,
+    y1: height - (height - SHADOW_SPREAD / 2),
+    x2: x,
+    y2: height - SHADOW_SPREAD / 2,
+    strokeWidth: width + SHADOW_SPREAD,
+    stroke: stroke,
+    strokeLinecap: "round",
+    filter: "blur(0.5px)",
+    "data-testid": "TimeSliderLite-NeedleShadow"
+  });
+};
+var NeedleLine = function NeedleLine(_ref2) {
+  var x = _ref2.x,
+    stroke = _ref2.stroke,
+    height = _ref2.height,
+    width = _ref2.width;
+  return jsx("line", {
+    x1: x,
+    y1: width / 2,
+    x2: x,
+    y2: height - width / 2,
+    strokeWidth: width,
+    strokeLinecap: "round",
+    stroke: stroke,
+    "data-testid": "TimeSliderLite-NeedleLine"
+  });
+};
+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 jsx(Draggable, {
+    handle: ".TimeSliderLite-DraggableNeedle",
+    axis: "x",
+    nodeRef: draggableRef,
+    bounds: {
+      left: -needleDragAreaWidth / 2,
+      right: width - needleDragAreaWidth / 2
+    },
+    position: {
+      x: x,
+      y: 0
+    },
+    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);
+    },
+    children: jsxs(Box, {
+      className: "TimeSliderLite-DraggableNeedle",
+      ref: draggableRef,
+      "data-testid": "TimeSliderLite-DraggableNeedle",
+      onDoubleClick: onDoubleClick,
+      sx: {
+        overflow: 'visible'
+      },
+      children: [jsxs("svg", {
+        style: style,
+        cursor: "ew-resize",
+        width: needleDragAreaWidth,
+        height: height,
+        "data-testid": "TimeSliderLite-NeedleSvg",
+        children: [jsx(NeedleShadow, {
+          x: needleDragAreaWidth / 2,
+          stroke: timeSliderLite.needleShadow.stroke,
+          height: height,
+          width: needleWidth
+        }), jsx(NeedleLine, {
+          x: needleDragAreaWidth / 2,
+          stroke: currentTimeSelected ? timeSliderLite.needleDefault.stroke : timeSliderLite.needle.stroke,
+          height: height,
+          width: needleWidth
+        })]
+      }), jsxs(Box, {
+        className: "TimeSliderLite-timeStamp",
+        position: "absolute",
+        bottom: "-1px",
+        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, jsx(Box, {
+          className: "TimeSliderLite-timeStamp-tail",
+          position: "absolute",
+          width: "10px",
+          height: "10px",
+          bottom: "-4px",
+          sx: {
+            backgroundColor: timeSliderLite.needleLabel.backgroundColor,
+            transform: 'rotate(45deg)',
+            left: "calc(50% - 5px - " + needleLabelOffset[0] + "px)",
+            zIndex: -1
+          }
+        })]
+      })]
+    })
+  });
+};
+
+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 jsx("svg", {
+    "data-testid": "TimeSliderLite-clickableTimeline",
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer'
+    },
+    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);
+    },
+    children: jsx("line", {
+      opacity: isShown ? opacity : 0,
+      x1: x,
+      y1: "0",
+      x2: x,
+      y2: "100%",
+      stroke: timeSliderLite.timeline.stroke,
+      strokeWidth: HOVER_NEEDLE_WIDTH,
+      style: {
+        transition: 'opacity 0.2s ease-in-out'
+      }
+    })
+  });
+};
+
+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 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
+  });
+};
+
+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 jsxs(Box, {
+    ref: sliderAreaRef,
+    sx: {
+      position: 'relative',
+      height: height + "px",
+      overflow: 'visible',
+      width: '100%',
+      backgroundColor: timeSliderLite.timelineBackgroundObserved.fill
+    },
+    "data-testid": "TimeSliderLite-Background",
+    children: [jsx(TimeSliderLiteBackgroundSvg, {
+      style: {
+        position: 'absolute',
+        top: 0
+      },
+      timeStep: timeStep,
+      width: areaWidth,
+      height: height,
+      startTime: startTime,
+      endTime: endTime,
+      disableForecast: disableForecast,
+      currentTime: currentTime,
+      timeZone: timeZone
+    }), jsx(TimeSliderClickableTimeline, {
+      currentTime: currentTime,
+      opacity: mouseHoverNeedleOpacity,
+      width: areaWidth,
+      startTime: startTime,
+      endTime: endTime,
+      disableForecast: disableForecast,
+      timeStep: timeStep,
+      setSelectedTime: setSelectedTime,
+      timeZone: timeZone
+    }), drawNeedle && (!zerorange ? jsx(TimeSliderDraggableNeedle, {
+      currentTimeSelected: currentTimeSelected,
+      onDoubleClick: resetSelectedTime,
+      needleWidth: needleWidth,
+      draggableLabel: draggableTimeStamp,
+      style: {
+        position: 'absolute',
+        top: 0
+      },
+      timeZone: timeZone,
+      disableForecast: disableForecast,
+      width: areaWidth,
+      needleDragAreaWidth: needleDragAreaWidth,
+      needleLabelZIndex: needleLabelZIndex,
+      needleLabelOffset: needleLabelOffset,
+      height: height,
+      startTime: startTime,
+      endTime: endTime,
+      timeStep: timeStep,
+      currentTime: currentTime,
+      selectedTime: selectedTime,
+      setSelectedTime: setSelectedTime
+    }) : jsx(TimeSliderZeroTimestamp, {
+      timeZone: timeZone,
+      timeStep: timeStep,
+      currentTime: currentTime,
+      timestampZIndex: needleLabelZIndex
+    }))]
+  });
+};
+
+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 : 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 : jsx(StepBackward, {
+    "data-testid": "step-backward-svg-path"
+  });
+  return jsx(Tooltip, {
+    placement: "top",
+    title: forward ? forwardTitle : backwardTitle,
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay,
+    children: jsx("span", {
+      children: jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+        disabled: isDisabled,
+        "aria-label": forward ? forwardTitle : backwardTitle,
+        onClick: onClick,
+        "data-testid": "TimeSliderLite-StepButton" + (forward ? 'Forward' : 'Backward'),
+        children: forward ? forwardIcon : backwardIcon
+      }))
+    })
+  });
+};
+
+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 : jsx(Pause, {});
+  var playIcon = (_settings$icon$play = settings == null || (_settings$icon2 = settings.icon) == null ? void 0 : _settings$icon2.play) != null ? _settings$icon$play : jsx(Play, {});
+  return jsx(Tooltip, {
+    title: isAnimating ? t('controlButtons.pause') : t('controlButtons.play'),
+    placement: "top",
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay,
+    children: jsx("span", {
+      children: jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+        sx: Object.assign({}, isAnimating && {
+          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+        }, timeSliderLiteButtonDefaultProps.sx),
+        onClick: function onClick() {
+          onTogglePlayButton();
+        },
+        disabled: isDisabled,
+        "data-testid": "TimeSliderLite-PlayButton",
+        children: isAnimating ? pauseIcon : playIcon
+      }))
+    })
+  });
+};
+
+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 : jsx(Options, {});
+  var Button = jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+    sx: Object.assign({}, menuOpen && {
+      backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+    }, timeSliderLiteButtonDefaultProps.sx),
+    "aria-selected": menuOpen,
+    onClick: onClick,
+    "data-testid": "TimeSliderLite-MenuButton",
+    children: icon
+  }));
+  if (menuOpen) {
+    return Button;
+  }
+  return jsx(Tooltip, {
+    placement: "top-start",
+    title: t('menu.title'),
+    children: Button
+  });
+};
+
+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 jsxs(Grid, {
+    container: true,
+    sx: Object.assign({}, styles.container, 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
+    }),
+    "data-testid": "timeSliderLite-" + mapId,
+    children: [isVisible ? jsxs(Fragment, {
+      children: [jsx(Grid, {
+        sx: {
+          height: height + "px"
+        },
+        children: controlButtons || jsxs(ControlButtonGroup, {
+          left: true,
+          children: [!hideMenuButton && jsxs(Fragment, {
+            children: [jsx(MenuButton, {
+              settings: settings == null ? void 0 : settings.menuButton,
+              menuOpen: menuOpen,
+              onClick: onToggleMenu
+            }), jsx(Divider, {
+              orientation: "vertical",
+              sx: {
+                height: height + "px",
+                margin: '2px'
+              }
+            })]
+          }), !hidePlayButton && jsx(PlayButton, {
+            settings: settings == null ? void 0 : settings.playButton,
+            isAnimating: isAnimating,
+            onTogglePlayButton: onToggleAnimation,
+            tooltipDelay: tooltipDelay,
+            isDisabled: needleDisabled
+          }), !hideStepButtons && jsxs(Fragment, {
+            children: [jsx(StepButton, {
+              settings: settings == null ? void 0 : settings.stepButton,
+              onClick: function onClick() {
+                return handleTimeStep(-timeStepSeconds);
+              },
+              tooltipDelay: tooltipDelay,
+              isDisabled: needleDisabled
+            }), jsx(StepButton, {
+              forward: true,
+              settings: settings == null ? void 0 : settings.stepButton,
+              onClick: function onClick() {
+                return handleTimeStep(timeStepSeconds);
+              },
+              tooltipDelay: tooltipDelay,
+              isDisabled: needleDisabled
+            })]
+          })]
+        })
+      }), jsx(Grid, {
+        children: jsx(TimeSliderLiteBackground, {
+          draggableTimeStamp: draggableTimeStamp,
+          currentTime: currentTime,
+          currentTimeSelected: autoUpdateSelectedTime && !isAnimating,
+          startTime: roundedStartTime,
+          timeZone: timeZone,
+          endTime: roundedEndTime,
+          disableForecast: isObservedTimeRange,
+          mouseHoverNeedleOpacity: mouseHoverNeedleOpacity,
+          needleWidth: needleWidth,
+          needleDragAreaWidth: needleDragAreaWidth,
+          needleLabelZIndex: needleLabelZIndex,
+          needleLabelOffset: needleLabelOffset,
+          timeStep: [observedTimeStepSeconds, forecastTimeStepSeconds],
+          selectedTime: runningExternalAnimation ? selectedTime : rawSelectedTime,
+          setSelectedTime: handleTimeSelect,
+          resetSelectedTime: function resetSelectedTime() {
+            return setRawSelectedTime(lastObservedTime);
+          },
+          height: height,
+          zerorange: needleDisabled
+        })
+      })]
+    }) : jsx(Grid, {}), 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 || jsx(ControlButtonGroup, {
+        className: "timeSliderLite-hideButtonGroup-" + (isVisible ? 'hide' : 'show'),
+        right: isVisible,
+        children: jsx(HideButton, {
+          settings: settings == null ? void 0 : settings.hideButton,
+          onClick: onToggleTimeSlider,
+          isVisible: isVisible
+        })
+      })
+    })]
+  });
+};
+
+/* *
+ * 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];
+  var useTimeRange = React.useState(null);
+  var _ref2 = overrideUseTimeRange || useTimeRange,
+    timeRange = _ref2[0],
+    setTimeRange = _ref2[1];
+  var useTimeStep = React.useState(null);
+  var _ref3 = overrideUseTimeStep || useTimeStep,
+    timeStep = _ref3[0],
+    setTimeStep = _ref3[1];
+  var useTimeZone = React.useState('LT');
+  var _ref4 = overrideUseTimeZone || useTimeZone,
+    timeZone = _ref4[0],
+    setTimeZone = _ref4[1];
+  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 jsxs(Fragment, {
+    children: [isVisible && menuOpen && jsx(TimeSliderLiteOptionsMenu, Object.assign({
+      menuOpen: menuOpen,
+      setMenuOpen: setMenuOpen,
+      defaultTimeRange: [defaultStartTime, defaultEndTime],
+      defaultTimeStep: defaultTimeStep,
+      useTimeRange: [timeRange, handleTimeRangeChange],
+      useTimeStep: [timeStep, handleTimeStepChange],
+      useAnimationSpeed: [animationSpeed, handleAnimationSpeedChange],
+      useUpdateInterval: [updateInterval, setUpdateInterval],
+      useTimeZone: [timeZone, setTimeZone],
+      closeButtonIcon: (_timeSliderProps$sett = timeSliderProps.settings) == null || (_timeSliderProps$sett = _timeSliderProps$sett.closeButton) == null ? void 0 : _timeSliderProps$sett.icon,
+      dropdownButtonIcon: (_timeSliderProps$sett2 = timeSliderProps.settings) == null || (_timeSliderProps$sett2 = _timeSliderProps$sett2.dropdownButton) == null ? void 0 : _timeSliderProps$sett2.icon,
+      TimeZoneSwitch: timeSliderProps == null || (_timeSliderProps$sett3 = timeSliderProps.settings) == null ? void 0 : _timeSliderProps$sett3.TimeZoneSwitch
+    }, TimeSliderLiteOptionsMenuProps)), jsx(TimeSliderLite, Object.assign({
+      currentTime: currentTime,
+      selectedTime: selectedTime,
+      timeStep: timeStep != null ? timeStep : defaultTimeStep,
+      timeZone: timeZone,
+      overrideAnimation: true,
+      isAnimating: !!isAnimating,
+      isVisible: isVisible,
+      needleDisabled: zeroRange,
+      mapId: mapId,
+      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
+        }));
+      },
+      menuOpen: menuOpen,
+      onToggleMenu: function onToggleMenu() {
+        return setMenuOpen(!menuOpen);
+      },
+      onToggleTimeSlider: onToggleTimeSliderVisibility,
+      onToggleAnimation: onToggleAnimation,
+      startTime: startTime,
+      endTime: endTime
+    }, timeSliderProps))]
+  });
+};
+
+export { TIME_SLIDER_LITE_NAMESPACE, TimeSliderLite, TimeSliderLiteConnect, TimeSliderLiteI18nProvider, TimeSliderLiteOptionsMenu, timeSliderLiteUtils as TimeSliderLiteUtils, initTimeSliderLiteI18n, translations as timeSliderLiteTranslations, translations as timesliderliteTranslations, useTimesliderLiteTranslation };