@opengeoweb/time-slider-lite 14.3.0 → 14.5.0

package/index.esm.js

@@ -1,12 +1,12 @@
 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 { Card, Typography, IconButton, CardContent, Select, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Box, ToggleButtonGroup, ToggleButton, Divider, useTheme, ButtonGroup, Tooltip } from '@mui/material';
+import React, { useState, useEffect, useLayoutEffect, useRef, createElement } from 'react';
+import { Close, ChevronDown, ChevronUp, Options, Pause, Play, StepForward, StepBackward } from '@opengeoweb/theme';
 import { usePrevious, safelyInitI18nForTestsAndStories } from '@opengeoweb/shared';
-import { I18nextProvider, useTranslation } from 'react-i18next';
+import { speedFactors, defaultAnimationDelayAtStart } from '@opengeoweb/time-slider';
 import i18n from 'i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import { CORE_NAMESPACE, coreTranslations } from '@opengeoweb/core';
-import { 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';
@@ -167,7 +167,7 @@ var SubmenuWrapper = function SubmenuWrapper(_ref) {
   return jsxs(Card, Object.assign({}, props, {
     sx: Object.assign({
       position: 'relative'
-    }, sx),
+    }, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx),
     children: [jsx(Typography, {
       sx: {
         fontWeight: '500',
@@ -177,15 +177,15 @@ var SubmenuWrapper = function SubmenuWrapper(_ref) {
       children: title
     }), jsx(IconButton, {
       "data-testid": "TimeSliderLite-submenuWrapper-closeButton",
+      onClick: function onClick() {
+        return setSubmenu == null ? void 0 : setSubmenu(null);
+      },
       size: "small",
       sx: {
         position: 'absolute',
         top: 4,
         right: 4
       },
-      onClick: function onClick() {
-        return setSubmenu && setSubmenu(null);
-      },
       children: closeButtonIcon != null ? closeButtonIcon : jsx(Close, {
         "data-testid": "TimeSliderLite-submenuWrapper-defaultCloseIcon"
       })
@@ -636,54 +636,62 @@ var useTimesliderLiteTranslation = function useTimesliderLiteTranslation() {
   return useTranslation(TIME_SLIDER_LITE_NAMESPACE);
 };
 
-var _excluded$3 = ["dropdownButtonIcon", "value", "setValue", "defaultTimeStep", "timeStepOptions"];
-var TimeStepSelector = function TimeStepSelector(_ref) {
+var AnimationSpeedOptions = function AnimationSpeedOptions(_ref) {
+  var _useAnimationSpeed$;
   var dropdownButtonIcon = _ref.dropdownButtonIcon,
-    value = _ref.value,
-    setValue = _ref.setValue,
-    defaultTimeStep = _ref.defaultTimeStep,
-    timeStepOptions = _ref.timeStepOptions,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    _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 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'
-    },
+  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: {
-      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);
+      paddingTop: '12px',
+      marginBottom: '-8px',
+      minWidth: '200px'
     },
-    IconComponent: dropdownButtonIcon,
-    children: availableOptionKeys.map(function (option) {
-      return jsx(MenuItem, {
-        value: String(option),
-        children: options[option]
-      }, String(option));
+    children: jsx(Select, {
+      IconComponent: dropdownButtonIcon,
+      className: "TimeSliderLite-animationSpeedSelect",
+      "data-testid": "TimeSliderLite-animationSpeedSelect",
+      disabled: readOnly,
+      inputProps: {
+        'data-testid': 'TimeSliderLite-animationSpeedSelect-input'
+      },
+      onChange: function onChange(event) {
+        var _event$target;
+        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+        setAnimationSpeed == null || setAnimationSpeed(newValue);
+      },
+      sx: {
+        height: '40px'
+      },
+      value: String(animationSpeed),
+      children: speedOptions.map(function (option) {
+        var postfix = option === defaultSpeedFactor ? translatedSpeedOptionPostfix : speedOptionItemPostfix;
+        var label = speedOptionItemPrefix + option + postfix;
+        return jsx(MenuItem, {
+          value: String(option),
+          children: label
+        }, String(option));
+      })
     })
-  }));
+  });
 };
 
 var SubmenuSelectLabel = function SubmenuSelectLabel(_ref) {
@@ -699,150 +707,22 @@ var SubmenuSelectLabel = function SubmenuSelectLabel(_ref) {
   });
 };
 
-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 _excluded$3 = ["amountOfOptions", "dropdownButtonIcon", "itemPostFix", "value", "setValue"];
 var CustomSelect = function CustomSelect(_ref) {
   var amountOfOptions = _ref.amountOfOptions,
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     itemPostFix = _ref.itemPostFix,
     value = _ref.value,
     setValue = _ref.setValue,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var availableOptions = Array.from(Array(amountOfOptions).keys());
   return jsx(Select, Object.assign({}, props, {
+    IconComponent: dropdownButtonIcon,
+    autoWidth: false,
     "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);
@@ -850,8 +730,11 @@ var CustomSelect = function CustomSelect(_ref) {
         setValue(newValue);
       }
     },
-    autoWidth: false,
-    IconComponent: dropdownButtonIcon,
+    sx: {
+      height: '40px',
+      width: '100%'
+    },
+    value: String(availableOptions.includes(value) ? value : availableOptions[availableOptions.length - 1]),
     children: availableOptions.map(function (option) {
       return jsxs(MenuItem, {
         value: String(option),
@@ -889,30 +772,30 @@ var DayHourSelector = function DayHourSelector(_ref2) {
         children: label
       })
     }), jsx(Grid, {
+      paddingX: "4px",
       size: {
         xs: 4.5
       },
-      paddingX: "4px",
       children: jsx(CustomSelect, {
+        amountOfOptions: amountOfDayOptions,
         disabled: isDisabled || amountOfDayOptions === 1,
-        value: days,
-        setValue: setDays,
+        dropdownButtonIcon: dropdownButtonIcon,
         itemPostFix: t('units.days'),
-        amountOfOptions: amountOfDayOptions,
-        dropdownButtonIcon: dropdownButtonIcon
+        setValue: setDays,
+        value: days
       })
     }), jsx(Grid, {
+      paddingLeft: "4px",
       size: {
         xs: 4.5
       },
-      paddingLeft: "4px",
       children: jsx(CustomSelect, {
+        amountOfOptions: amountOfHourOptions,
         disabled: isDisabled || amountOfHourOptions === 1,
-        value: hours,
-        setValue: setHours,
+        dropdownButtonIcon: dropdownButtonIcon,
         itemPostFix: t('units.hours'),
-        amountOfOptions: amountOfHourOptions,
-        dropdownButtonIcon: dropdownButtonIcon
+        setValue: setHours,
+        value: hours
       })
     })]
   });
@@ -928,7 +811,7 @@ var TimeRangeOptions = function TimeRangeOptions(_ref) {
   var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
     t = _useTimesliderLiteTra.t;
   var isReadOnly = useTimeRange === undefined;
-  var isDefault = !useTimeRange || useTimeRange[0] === null;
+  var isDefault = (useTimeRange == null ? void 0 : useTimeRange[0]) === null;
   var handleIsDefaultChange = function handleIsDefaultChange(event) {
     if (event.target.value === 'default' && useTimeRange != null && useTimeRange[1]) {
       useTimeRange[1](null);
@@ -1002,28 +885,28 @@ var TimeRangeOptions = function TimeRangeOptions(_ref) {
     children: [t('menu.timeRange.description'), jsxs(RadioGroup, {
       defaultValue: isDefault ? 'default' : 'custom',
       name: "time-range-radio-button-group",
+      onChange: handleIsDefaultChange,
       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",
+        label: t('common.default'),
+        value: "default"
+      }), jsx(FormControlLabel, {
         control: jsx(Radio, {}),
-        label: t('common.custom')
+        disabled: isReadOnly,
+        label: t('common.custom'),
+        value: "custom"
       })]
     }), jsxs(Box, {
       minWidth: TIME_SELECTOR_MIN_WIDTH,
       children: [jsx(DayHourSelector, {
-        isDisabled: isDefault,
         dropdownButtonIcon: dropdownButtonIcon,
+        isDisabled: isDefault,
         label: t('common.observed'),
         maxHours: maxObservedHours,
         sx: {
@@ -1032,8 +915,8 @@ var TimeRangeOptions = function TimeRangeOptions(_ref) {
         useDays: [observedDays, setObservedDays],
         useHours: [observedHours, setObservedHours]
       }), jsx(DayHourSelector, {
-        isDisabled: isDefault,
         dropdownButtonIcon: dropdownButtonIcon,
+        isDisabled: isDefault,
         label: t('common.forecast'),
         maxHours: maxForecastHours,
         useDays: [forecastDays, setForecastDays],
@@ -1043,122 +926,178 @@ var TimeRangeOptions = function TimeRangeOptions(_ref) {
   });
 };
 
-var AnimationSpeedOptions = function AnimationSpeedOptions(_ref) {
-  var _useAnimationSpeed$;
+var _excluded$2 = ["dropdownButtonIcon", "value", "setValue", "defaultTimeStep", "timeStepOptions"];
+var TimeStepSelector = function TimeStepSelector(_ref) {
   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;
+    value = _ref.value,
+    setValue = _ref.setValue,
+    defaultTimeStep = _ref.defaultTimeStep,
+    timeStepOptions = _ref.timeStepOptions,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   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",
+  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, {
+    IconComponent: dropdownButtonIcon,
+    className: "TimeSliderLite-timeStepSelect",
+    "data-testid": "TimeSliderLite-timeStepSelect",
+    inputProps: {
+      'data-testid': 'TimeSliderLite-timeStepSelect-input'
+    },
+    onChange: function onChange(event) {
+      var _event$target;
+      var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+      setValue(newValue);
+    },
     sx: {
-      paddingTop: '12px',
-      marginBottom: '-8px',
-      minWidth: '200px'
+      height: '40px',
+      width: '100%'
     },
-    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));
-      })
+    value: String(availableOptionKeys.includes(String(value)) ? value : availableOptionKeys[availableOptionKeys.length - 1]),
+    children: availableOptionKeys.map(function (option) {
+      return jsx(MenuItem, {
+        value: String(option),
+        children: options[option]
+      }, 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 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 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",
+  var isReadOnly = useTimeStep === undefined;
+  var timeStep = useTimeStep == null ? void 0 : useTimeStep[0];
+  var setTimeStep = useTimeStep == null ? void 0 : useTimeStep[1];
+  var observedTimeStepProp = timeStep == null ? void 0 : timeStep[0];
+  var forecastTimeStepProp = timeStep == null ? void 0 : timeStep[1];
+  var isDefault = !useTimeStep || timeStep === null;
+  var defaultObservedTimeStep = defaultTimeStep[0];
+  var defaultForecastTimeStep = defaultTimeStep[1];
+  var _React$useState = React.useState(observedTimeStepProp != null ? observedTimeStepProp : defaultObservedTimeStep),
+    observedTimeStep = _React$useState[0],
+    setObservedTimeStep = _React$useState[1];
+  var _React$useState2 = React.useState(forecastTimeStepProp != null ? forecastTimeStepProp : defaultForecastTimeStep),
+    forecastTimeStep = _React$useState2[0],
+    setForecastTimeStep = _React$useState2[1];
+  useEffect(function () {
+    if (!isDefault && setTimeStep) {
+      setTimeStep([observedTimeStep, forecastTimeStep]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observedTimeStep, forecastTimeStep]);
+  var handleIsDefaultChange = function handleIsDefaultChange(event) {
+    if (event.target.value === 'default') {
+      setTimeStep == null || setTimeStep(null);
+      setObservedTimeStep(defaultTimeStep[0]);
+      setForecastTimeStep(defaultTimeStep[1]);
+    }
+    if (event.target.value === 'custom' && setTimeStep) {
+      setTimeStep(defaultTimeStep);
+    }
+  };
+  return jsxs(CardContent, {
+    "data-testid": "TimeSliderLite-timeStepOptions",
     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'
+      paddingTop: '4px',
+      '& label': {
+        height: '36px'
       },
+      '&:last-child': {
+        paddingBottom: '16px'
+      }
+    },
+    children: [jsxs(RadioGroup, {
+      defaultValue: isDefault ? 'default' : 'custom',
+      name: "time-range-radio-button-group",
+      onChange: handleIsDefaultChange,
+      row: true,
       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);
+        marginTop: 1
       },
-      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));
-      })
-    })
+      value: isDefault ? 'default' : 'custom',
+      children: [jsx(FormControlLabel, {
+        control: jsx(Radio, {}),
+        disabled: isReadOnly,
+        label: t('common.default'),
+        value: "default"
+      }), jsx(FormControlLabel, {
+        control: jsx(Radio, {}),
+        disabled: isReadOnly,
+        label: t('common.custom'),
+        value: "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, {
+        paddingX: "4px",
+        size: {
+          xs: 8
+        },
+        sx: {
+          marginY: 1
+        },
+        children: jsx(TimeStepSelector, {
+          defaultTimeStep: defaultTimeStep[0],
+          disabled: isDefault,
+          dropdownButtonIcon: dropdownButtonIcon,
+          setValue: setObservedTimeStep,
+          timeStepOptions: timeStepOptions,
+          value: observedTimeStep
+        })
+      }), jsx(Grid, {
+        size: {
+          xs: 4
+        },
+        children: jsx(SubmenuSelectLabel, {
+          isDisabled: isDefault,
+          children: t('common.forecast')
+        })
+      }), jsx(Grid, {
+        paddingX: "4px",
+        size: {
+          xs: 8
+        },
+        children: jsx(TimeStepSelector, {
+          defaultTimeStep: defaultTimeStep[1],
+          disabled: isDefault,
+          dropdownButtonIcon: dropdownButtonIcon,
+          setValue: setForecastTimeStep,
+          timeStepOptions: timeStepOptions,
+          value: forecastTimeStep
+        })
+      })]
+    })]
   });
 };
 
@@ -1188,22 +1127,83 @@ var TimeZoneSwitch = function TimeZoneSwitch(_ref) {
   var _useTimesliderLiteTra = useTimesliderLiteTranslation(),
     t = _useTimesliderLiteTra.t;
   return jsx(ToggleButtonGroup, {
-    disabled: !setTimeZone,
     className: "TimeSliderLite-timeZoneSwitch",
     "data-testid": "TimeSliderLite-timeZoneSwitch",
-    value: timeZone != null ? timeZone : 'LT',
+    disabled: !setTimeZone,
     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);
+    sx: styles$3.root,
+    value: timeZone != null ? timeZone : 'LT',
+    children: availableTimeZones.map(function (zone) {
+      return jsx(ToggleButton, {
+        value: zone,
+        children: t("menu." + zone)
+      }, zone);
+    })
+  });
+};
+
+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, {
+      IconComponent: dropdownButtonIcon,
+      className: "TimeSliderLite-updateIntervalSelect",
+      "data-testid": "TimeSliderLite-updateIntervalSelect",
+      disabled: readOnly,
+      inputProps: {
+        'data-testid': 'TimeSliderLite-updateIntervalSelect-input'
+      },
+      onChange: function onChange(event) {
+        var _event$target;
+        var newValue = Number(event == null || (_event$target = event.target) == null ? void 0 : _event$target.value);
+        setUpdateInterval == null || setUpdateInterval(newValue === defaultValue ? null : newValue);
+      },
+      sx: {
+        height: '40px'
+      },
+      value: String(updateInterval != null ? updateInterval : defaultValue),
+      children: updateIntervalOptions.map(function (option) {
+        var label = option === defaultValue ? "" + intervalOptionPrefix + option + translatedDefaultOptionPostfix : "" + intervalOptionPrefix + option + translatedIntervalOptionPostfix;
+        return jsx(MenuItem, {
+          value: String(option),
+          children: label
+        }, String(option));
+      })
     })
   });
 };
@@ -1266,31 +1266,31 @@ var TimeSliderLiteOptionsMenu = function TimeSliderLiteOptionsMenu(_ref) {
     submenuLeft = _React$useState2[0],
     setSubmenuLeft = _React$useState2[1];
   return jsxs(Fragment, {
-    children: [submenu && jsxs(SubmenuWrapper, {
+    children: [!!submenu && jsxs(SubmenuWrapper, {
+      closeButtonIcon: closeButtonIcon,
+      setSubmenu: setSubmenu,
       sx: Object.assign({
         left: submenuLeft,
         marginLeft: '-12px'
-      }, subMenuSx),
-      setSubmenu: setSubmenu,
+      }, Array.isArray(subMenuSx) ? Object.assign.apply(Object, [{}].concat(subMenuSx)) : subMenuSx),
       title: t(submenu + ".title"),
-      closeButtonIcon: closeButtonIcon,
       children: [submenu === SubmenuTitleTranslations.TIME_RANGE && jsx(TimeRangeOptions, {
         currentTime: currentTime,
-        useTimeRange: useTimeRange,
         defaultTimeRange: defaultTimeRange,
-        dropdownButtonIcon: dropdownButtonIcon
+        dropdownButtonIcon: dropdownButtonIcon,
+        useTimeRange: useTimeRange
       }), submenu === SubmenuTitleTranslations.TIME_STEP && jsx(TimeStepOptions, {
         defaultTimeStep: defaultTimeStep,
-        useTimeStep: useTimeStep,
         dropdownButtonIcon: dropdownButtonIcon,
-        timeStepOptions: timeStepOptions
+        timeStepOptions: timeStepOptions,
+        useTimeStep: useTimeStep
       }), submenu === SubmenuTitleTranslations.SPEED && jsx(AnimationSpeedOptions, {
-        useAnimationSpeed: useAnimationSpeed,
+        defaultSpeedFactor: defaultSpeedFactor,
         dropdownButtonIcon: dropdownButtonIcon,
         speedOptionItemPostfix: speedOptionItemPostfix,
         speedOptionItemPrefix: speedOptionItemPrefix,
         speedOptions: speedOptions,
-        defaultSpeedFactor: defaultSpeedFactor
+        useAnimationSpeed: useAnimationSpeed
       }), submenu === SubmenuTitleTranslations.UPDATE_INTERVAL && jsx(UpdateIntervalOptions, {
         defaultUpdateInterval: defaultUpdateInterval,
         dropdownButtonIcon: dropdownButtonIcon,
@@ -1305,119 +1305,221 @@ var TimeSliderLiteOptionsMenu = function TimeSliderLiteOptionsMenu(_ref) {
         flexDirection: 'row',
         marginY: 1,
         visibility: menuOpen ? 'visible' : 'hidden'
-      }, sx),
+      }, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : 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);
         },
+        sx: {
+          padding: 0.5,
+          gap: 0.5
+        },
+        value: submenu,
         children: Object.values(SubmenuTitleTranslations).map(function (value) {
           return jsx(ToggleButton, {
-            value: value,
             sx: styles$2.button,
+            value: value,
             children: t(value + ".button")
           }, value);
         })
       }), jsx(TimeZoneSwitch$1, {
         useTimeZone: useTimeZone != null ? useTimeZone : ['LT']
       }), jsx(Divider, {
-        orientation: "vertical",
-        flexItem: true
+        flexItem: true,
+        orientation: "vertical"
       }), jsx(IconButton, {
         "data-testid": "TimeSliderLite-optionsMenu-closeButton",
+        onClick: function onClick() {
+          return setMenuOpen == null ? void 0 : setMenuOpen(false);
+        },
         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 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", {
+    "data-testid": "TimeSliderLite-NeedleShadow",
+    filter: "blur(0.5px)",
+    stroke: stroke,
+    strokeLinecap: "round",
+    strokeWidth: width + SHADOW_SPREAD,
+    x1: x,
+    x2: x,
+    y1: height - (height - SHADOW_SPREAD / 2),
+    y2: height - SHADOW_SPREAD / 2
+  });
 };
-
-var 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 NeedleLine = function NeedleLine(_ref2) {
+  var x = _ref2.x,
+    stroke = _ref2.stroke,
+    height = _ref2.height,
+    width = _ref2.width;
+  return jsx("line", {
+    "data-testid": "TimeSliderLite-NeedleLine",
+    stroke: stroke,
+    strokeLinecap: "round",
+    strokeWidth: width,
+    x1: x,
+    x2: x,
+    y1: width / 2,
+    y2: height - width / 2
   });
 };
-
-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 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, {
+    axis: "x",
+    bounds: {
+      left: -needleDragAreaWidth / 2,
+      right: width - needleDragAreaWidth / 2
+    },
+    handle: ".TimeSliderLite-DraggableNeedle",
+    nodeRef: draggableRef,
+    onDrag: function onDrag(_, position) {
+      var positionOffsetToCompensateFlooring = 0.5;
+      var needleCenterPosition = position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring;
+      var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, needleCenterPosition, width);
+      if (disableForecast && newSelectedTime >= lastObservedTime) {
+        setSelectedTime(lastObservedTime);
+      }
+      setSelectedTime(newSelectedTime);
+    },
+    onStop: function onStop(_, position) {
+      var positionOffsetToCompensateFlooring = 0.5;
+      var needleCenterPosition = position.x + needleDragAreaWidth / 2 + positionOffsetToCompensateFlooring;
+      var newSelectedTime = getSelectedTimeFromPx(startTime, endTime, needleCenterPosition, width);
+      var isLastObservedTime = newSelectedTime >= lastObservedTime && newSelectedTime < firstForecastTime || newSelectedTime >= lastObservedTime && disableForecast;
+      var roundedSelectedTime = isLastObservedTime ? lastObservedTime : floorLocalSeconds(newSelectedTime, timeStepSeconds, timeZoneOffset);
+      setSelectedTime(roundedSelectedTime);
+    },
+    position: {
+      x: x,
+      y: 0
+    },
+    children: jsxs(Box, {
+      className: "TimeSliderLite-DraggableNeedle",
+      "data-testid": "TimeSliderLite-DraggableNeedle",
+      onDoubleClick: onDoubleClick,
+      ref: draggableRef,
+      sx: {
+        overflow: 'visible'
+      },
+      children: [jsxs("svg", {
+        cursor: "ew-resize",
+        "data-testid": "TimeSliderLite-NeedleSvg",
+        height: height,
+        style: style,
+        width: needleDragAreaWidth,
+        children: [jsx(NeedleShadow, {
+          height: height,
+          stroke: timeSliderLite.needleShadow.stroke,
+          width: needleWidth,
+          x: needleDragAreaWidth / 2
+        }), jsx(NeedleLine, {
+          height: height,
+          stroke: currentTimeSelected ? timeSliderLite.needleDefault.stroke : timeSliderLite.needle.stroke,
+          width: needleWidth,
+          x: needleDragAreaWidth / 2
+        })]
+      }), jsxs(Box, {
+        bottom: "-1px",
+        className: "TimeSliderLite-timeStamp",
+        position: "absolute",
+        sx: {
+          backgroundColor: timeSliderLite.needleLabel.backgroundColor,
+          border: "1px solid " + timeSliderLite.needleLabel.borderColor,
+          borderRadius: '4px',
+          className: draggableLabel ? 'TimeSliderLite-DraggableNeedle' : '',
+          color: timeSliderLite.needleLabel.color,
+          cursor: draggableLabel ? 'ew-resize' : null,
+          fontSize: '12px',
+          padding: '0px 4px 0px 4px',
+          pointerEvents: draggableLabel ? null : 'none',
+          transform: "translate(calc(-50% + " + needleWidth + "px + " + needleLabelOffset[0] + "px), " + needleLabelOffset[1] + "px)",
+          zIndex: needleLabelZIndex != null ? needleLabelZIndex : null
+        },
+        children: [label, jsx(Box, {
+          bottom: "-4px",
+          className: "TimeSliderLite-timeStamp-tail",
+          height: "10px",
+          position: "absolute",
+          sx: {
+            backgroundColor: timeSliderLite.needleLabel.backgroundColor,
+            transform: 'rotate(45deg)',
+            left: "calc(50% - 5px - " + needleLabelOffset[0] + "px)",
+            zIndex: -1
+          },
+          width: "10px"
+        })]
+      })]
+    })
+  });
 };
 
 var OBSERVED_PADDING_DAYS = 1;
@@ -1447,8 +1549,8 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
     timeSliderLite = _useTheme.palette.geowebColors.timeSliderLite;
   if (!width) {
     return jsx("svg", {
-      style: style,
-      height: height
+      height: height,
+      style: style
     });
   }
   // Convert start and end time from Unix timestamp to JavaScript Date object
@@ -1492,14 +1594,14 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
     });
     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'
       },
+      textAnchor: "left",
+      x: x,
+      y: 14,
       children: label
     }, monthChange + "-month-change-text");
   }) : null;
@@ -1516,18 +1618,18 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
     };
     var isObserved = index + 1 < currentDayIndex;
     var baseRectangle = /*#__PURE__*/createElement("rect", Object.assign({}, defaultProps, {
+      "data-testid": "TimeSliderLite-BackgroundRectangle-" + (isObserved ? 'Observed' : 'Forecast'),
       fill: isObserved ? observedColor : forecastColor,
-      width: Math.ceil(tickSpacing),
       key: label + "-color",
-      "data-testid": "TimeSliderLite-BackgroundRectangle-" + (isObserved ? 'Observed' : 'Forecast')
+      width: Math.ceil(tickSpacing)
     }));
     var localDayOffset = secondsSinceLocalMidnight(currentTime) * SECOND_TO_DAY + utcOffset;
     var isCurrentDay = index === Math.floor(currentDayIndex);
     if (isCurrentDay) {
       var partialRectangle = /*#__PURE__*/createElement("rect", Object.assign({}, defaultProps, {
-        width: tickSpacing * localDayOffset,
         fill: observedColor,
-        key: label + "-partial-color"
+        key: label + "-partial-color",
+        width: tickSpacing * localDayOffset
       }));
       return [baseRectangle, partialRectangle];
     }
@@ -1535,14 +1637,14 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
   }).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'
       },
+      textAnchor: "left",
+      x: (index - OBSERVED_PADDING_DAYS) * tickSpacing + 8 - tickOffset,
+      y: 14,
       children: dayLabels[index]
     }, label + "-text");
   }) : null;
@@ -1560,16 +1662,16 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       };
       return jsxs("g", {
         children: [jsx("text", Object.assign({}, defaultProps, {
-          textAnchor: "end",
           style: {
             userSelect: 'none'
           },
+          textAnchor: "end",
           children: value
         })), jsx("text", Object.assign({}, defaultProps, {
-          textAnchor: "start",
           style: {
             userSelect: 'none'
           },
+          textAnchor: "start",
           children: ":00"
         })), ","]
       }, label + "-" + value + "-hourLabel");
@@ -1590,18 +1692,18 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
         length: Math.floor(observedTicksPerDay * (currentDayIndex - index)) + 1
       }, function (_, value) {
         return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
+          key: label + "-" + value + "-observed-tick",
           x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
-          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset,
-          key: label + "-" + value + "-observed-tick"
+          x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / observedTicksPerDay) - tickOffset
         }));
       });
       var forecastTickMarksFromEndOfDay = Array.from({
         length: Math.floor(forecastTicksPerDay * (1 - (currentDayIndex - index))) + 1
       }, function (_, value) {
         return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
+          key: label + "-" + value + "-forecast-tick",
           x1: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
-          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset,
-          key: label + "-" + value + "-forecast-tick"
+          x2: (index + 1 - OBSERVED_PADDING_DAYS) * tickSpacing - value * (tickSpacing / forecastTicksPerDay) - tickOffset
         }));
       });
       return [].concat(observedTickMarksFromStartOfDay, forecastTickMarksFromEndOfDay);
@@ -1610,195 +1712,20 @@ var TimeSliderLiteBackgroundSvg = function TimeSliderLiteBackgroundSvg(_ref) {
       length: ticksPerDay + 1
     }, function (_, value) {
       return /*#__PURE__*/createElement("line", Object.assign({}, defaultProps, {
+        key: label + "-" + value + "-tick",
         x1: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
-        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset,
-        key: label + "-" + value + "-tick"
+        x2: (index - OBSERVED_PADDING_DAYS) * tickSpacing + value * (tickSpacing / ticksPerDay) - tickOffset
       }));
     });
   }).flat();
   return jsxs("svg", {
+    height: height,
     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) {
@@ -1828,12 +1755,6 @@ var TimeSliderClickableTimeline = function TimeSliderClickableTimeline(_ref) {
   }
   return jsx("svg", {
     "data-testid": "TimeSliderLite-clickableTimeline",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      cursor: 'pointer'
-    },
     onClick: function onClick() {
       return setSelectedTime(needleSuggestion);
     },
@@ -1846,17 +1767,23 @@ var TimeSliderClickableTimeline = function TimeSliderClickableTimeline(_ref) {
     onMouseMove: function onMouseMove(event) {
       isShown && setMouseX(event.nativeEvent.offsetX);
     },
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer'
+    },
     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'
-      }
+      },
+      x1: x,
+      x2: x,
+      y1: "0",
+      y2: "100%"
     })
   });
 };
@@ -1947,6 +1874,7 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
     };
   }, [sliderAreaRef]);
   return jsxs(Box, {
+    "data-testid": "TimeSliderLite-Background",
     ref: sliderAreaRef,
     sx: {
       position: 'relative',
@@ -1955,93 +1883,157 @@ var TimeSliderLiteBackground = function TimeSliderLiteBackground(_ref) {
       width: '100%',
       backgroundColor: timeSliderLite.timelineBackgroundObserved.fill
     },
-    "data-testid": "TimeSliderLite-Background",
     children: [jsx(TimeSliderLiteBackgroundSvg, {
+      currentTime: currentTime,
+      disableForecast: disableForecast,
+      endTime: endTime,
+      height: height,
+      startTime: startTime,
       style: {
         position: 'absolute',
         top: 0
       },
       timeStep: timeStep,
-      width: areaWidth,
-      height: height,
-      startTime: startTime,
-      endTime: endTime,
-      disableForecast: disableForecast,
-      currentTime: currentTime,
-      timeZone: timeZone
+      timeZone: timeZone,
+      width: areaWidth
     }), jsx(TimeSliderClickableTimeline, {
       currentTime: currentTime,
+      disableForecast: disableForecast,
+      endTime: endTime,
       opacity: mouseHoverNeedleOpacity,
-      width: areaWidth,
+      setSelectedTime: setSelectedTime,
       startTime: startTime,
-      endTime: endTime,
-      disableForecast: disableForecast,
       timeStep: timeStep,
-      setSelectedTime: setSelectedTime,
-      timeZone: timeZone
-    }), drawNeedle && (!zerorange ? jsx(TimeSliderDraggableNeedle, {
+      timeZone: timeZone,
+      width: areaWidth
+    }), !!drawNeedle && (!zerorange ? jsx(TimeSliderDraggableNeedle, {
+      currentTime: currentTime,
       currentTimeSelected: currentTimeSelected,
-      onDoubleClick: resetSelectedTime,
+      disableForecast: disableForecast,
+      draggableLabel: draggableTimeStamp,
+      endTime: endTime,
+      height: height,
+      needleDragAreaWidth: needleDragAreaWidth,
+      needleLabelOffset: needleLabelOffset,
+      needleLabelZIndex: needleLabelZIndex,
       needleWidth: needleWidth,
-      draggableLabel: draggableTimeStamp,
+      onDoubleClick: resetSelectedTime,
+      selectedTime: selectedTime,
+      setSelectedTime: setSelectedTime,
+      startTime: startTime,
       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,
+      width: areaWidth
+    }) : jsx(TimeSliderZeroTimestamp, {
       currentTime: currentTime,
+      timeStep: timeStep,
+      timeZone: timeZone,
       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,
+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({
+    fullWidth: true,
+    orientation: "horizontal"
+  }, props, {
+    sx: Object.assign({}, right && {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }, left && {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    }, {
+      backgroundColor: 'geowebColors.background.surface',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '4px',
+      gap: '2px'
+    }, Array.isArray(props.sx) ? Object.assign.apply(Object, [{}].concat(props.sx)) : props.sx),
+    children: children
+  }));
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var timeSliderLiteButtonDefaultProps = {
+  sx: {
+    width: '36px',
+    height: '36px'
+  }
+};
+
+var HideButton = function HideButton(_ref) {
+  var _settings$icon$hide, _settings$icon, _settings$icon$show, _settings$icon2;
+  var isVisible = _ref.isVisible,
     settings = _ref.settings,
-    tooltipDelay = _ref.tooltipDelay;
+    onClick = _ref.onClick;
   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"
+  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,
+      "data-testid": "TimeSliderLite-HideButton",
+      onClick: onClick,
+      children: isVisible ? hideIcon : showIcon
+    }))
   });
+};
+
+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, {
+    "aria-selected": menuOpen,
+    "data-testid": "TimeSliderLite-MenuButton",
+    onClick: onClick,
+    sx: Object.assign({}, menuOpen && {
+      backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+    }, Array.isArray(timeSliderLiteButtonDefaultProps.sx) ? Object.assign.apply(Object, [{}].concat(timeSliderLiteButtonDefaultProps.sx)) : timeSliderLiteButtonDefaultProps.sx),
+    children: icon
+  }));
+  if (menuOpen) {
+    return Button;
+  }
   return 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
-      }))
-    })
+    placement: "top-start",
+    title: t('menu.title'),
+    children: Button
   });
 };
 
@@ -2057,50 +2049,58 @@ var PlayButton = function PlayButton(_ref) {
   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,
+    placement: "top",
+    title: isAnimating ? t('controlButtons.pause') : t('controlButtons.play'),
     children: jsx("span", {
       children: jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
-        sx: Object.assign({}, isAnimating && {
-          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
-        }, timeSliderLiteButtonDefaultProps.sx),
+        "data-testid": "TimeSliderLite-PlayButton",
+        disabled: isDisabled,
         onClick: function onClick() {
           onTogglePlayButton();
         },
-        disabled: isDisabled,
-        "data-testid": "TimeSliderLite-PlayButton",
+        sx: Object.assign({}, isAnimating && {
+          backgroundColor: 'geowebColors.timeSliderLite.selected.backgroundColor'
+        }, Array.isArray(timeSliderLiteButtonDefaultProps.sx) ? Object.assign.apply(Object, [{}].concat(timeSliderLiteButtonDefaultProps.sx)) : timeSliderLiteButtonDefaultProps.sx),
         children: isAnimating ? pauseIcon : playIcon
       }))
     })
   });
 };
 
-var MenuButton = function MenuButton(_ref) {
-  var _settings$icon;
-  var menuOpen = _ref.menuOpen,
-    onClick = _ref.onClick,
-    settings = _ref.settings;
+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 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;
-  }
+  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-start",
-    title: t('menu.title'),
-    children: Button
+    enterDelay: tooltipDelay,
+    enterNextDelay: tooltipDelay,
+    placement: "top",
+    title: forward ? forwardTitle : backwardTitle,
+    children: jsx("span", {
+      children: jsx(IconButton, Object.assign({}, timeSliderLiteButtonDefaultProps, {
+        "aria-label": forward ? forwardTitle : backwardTitle,
+        "data-testid": "TimeSliderLite-StepButton" + (forward ? 'Forward' : 'Backward'),
+        disabled: isDisabled,
+        onClick: onClick,
+        children: forward ? forwardIcon : backwardIcon
+      }))
+    })
   });
 };
 
@@ -2240,12 +2240,12 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
   var tooltipDelay = menuOpen ? TIME_SLIDER_LITE_TOOLTIP_DELAY : undefined;
   return jsxs(Grid, {
     container: true,
-    sx: Object.assign({}, styles.container, sx, {
+    "data-testid": "timeSliderLite-" + mapId,
+    sx: Object.assign({}, styles.container, Array.isArray(sx) ? Object.assign.apply(Object, [{}].concat(sx)) : sx, {
       gridTemplateColumns: isVisible ? 'auto 1fr auto' : "1fr auto",
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       boxShadow: isVisible ? sx == null ? void 0 : sx.boxShadow : undefined
     }),
-    "data-testid": "timeSliderLite-" + mapId,
     children: [isVisible ? jsxs(Fragment, {
       children: [jsx(Grid, {
         sx: {
@@ -2255,9 +2255,9 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
           left: true,
           children: [!hideMenuButton && jsxs(Fragment, {
             children: [jsx(MenuButton, {
-              settings: settings == null ? void 0 : settings.menuButton,
               menuOpen: menuOpen,
-              onClick: onToggleMenu
+              onClick: onToggleMenu,
+              settings: settings == null ? void 0 : settings.menuButton
             }), jsx(Divider, {
               orientation: "vertical",
               sx: {
@@ -2266,51 +2266,51 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
               }
             })]
           }), !hidePlayButton && jsx(PlayButton, {
-            settings: settings == null ? void 0 : settings.playButton,
             isAnimating: isAnimating,
+            isDisabled: needleDisabled,
             onTogglePlayButton: onToggleAnimation,
-            tooltipDelay: tooltipDelay,
-            isDisabled: needleDisabled
+            settings: settings == null ? void 0 : settings.playButton,
+            tooltipDelay: tooltipDelay
           }), !hideStepButtons && jsxs(Fragment, {
             children: [jsx(StepButton, {
-              settings: settings == null ? void 0 : settings.stepButton,
+              isDisabled: needleDisabled,
               onClick: function onClick() {
                 return handleTimeStep(-timeStepSeconds);
               },
-              tooltipDelay: tooltipDelay,
-              isDisabled: needleDisabled
+              settings: settings == null ? void 0 : settings.stepButton,
+              tooltipDelay: tooltipDelay
             }), jsx(StepButton, {
               forward: true,
-              settings: settings == null ? void 0 : settings.stepButton,
+              isDisabled: needleDisabled,
               onClick: function onClick() {
                 return handleTimeStep(timeStepSeconds);
               },
-              tooltipDelay: tooltipDelay,
-              isDisabled: needleDisabled
+              settings: settings == null ? void 0 : settings.stepButton,
+              tooltipDelay: tooltipDelay
             })]
           })]
         })
       }), jsx(Grid, {
         children: jsx(TimeSliderLiteBackground, {
-          draggableTimeStamp: draggableTimeStamp,
           currentTime: currentTime,
-          currentTimeSelected: autoUpdateSelectedTime && !isAnimating,
-          startTime: roundedStartTime,
-          timeZone: timeZone,
-          endTime: roundedEndTime,
+          currentTimeSelected: !!autoUpdateSelectedTime && !isAnimating,
           disableForecast: isObservedTimeRange,
+          draggableTimeStamp: draggableTimeStamp,
+          endTime: roundedEndTime,
+          height: height,
           mouseHoverNeedleOpacity: mouseHoverNeedleOpacity,
-          needleWidth: needleWidth,
           needleDragAreaWidth: needleDragAreaWidth,
-          needleLabelZIndex: needleLabelZIndex,
           needleLabelOffset: needleLabelOffset,
-          timeStep: [observedTimeStepSeconds, forecastTimeStepSeconds],
-          selectedTime: runningExternalAnimation ? selectedTime : rawSelectedTime,
-          setSelectedTime: handleTimeSelect,
+          needleLabelZIndex: needleLabelZIndex,
+          needleWidth: needleWidth,
           resetSelectedTime: function resetSelectedTime() {
             return setRawSelectedTime(lastObservedTime);
           },
-          height: height,
+          selectedTime: runningExternalAnimation ? selectedTime : rawSelectedTime,
+          setSelectedTime: handleTimeSelect,
+          startTime: roundedStartTime,
+          timeStep: [observedTimeStepSeconds, forecastTimeStepSeconds],
+          timeZone: timeZone,
           zerorange: needleDisabled
         })
       })]
@@ -2325,9 +2325,9 @@ var TimeSliderLite = function TimeSliderLite(_ref) {
         className: "timeSliderLite-hideButtonGroup-" + (isVisible ? 'hide' : 'show'),
         right: isVisible,
         children: jsx(HideButton, {
-          settings: settings == null ? void 0 : settings.hideButton,
+          isVisible: isVisible,
           onClick: onToggleTimeSlider,
-          isVisible: isVisible
+          settings: settings == null ? void 0 : settings.hideButton
         })
       })
     })]
@@ -2410,18 +2410,22 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_ref) {
   var _React$useState = React.useState(false),
     menuOpen = _React$useState[0],
     setMenuOpen = _React$useState[1];
+  // eslint-disable-next-line react/hook-use-state
   var useTimeRange = React.useState(null);
   var _ref2 = overrideUseTimeRange || useTimeRange,
     timeRange = _ref2[0],
     setTimeRange = _ref2[1];
+  // eslint-disable-next-line react/hook-use-state
   var useTimeStep = React.useState(null);
   var _ref3 = overrideUseTimeStep || useTimeStep,
     timeStep = _ref3[0],
     setTimeStep = _ref3[1];
+  // eslint-disable-next-line react/hook-use-state
   var useTimeZone = React.useState('LT');
   var _ref4 = overrideUseTimeZone || useTimeZone,
     timeZone = _ref4[0],
     setTimeZone = _ref4[1];
+  // eslint-disable-next-line react/hook-use-state
   var useUpdateInterval = React.useState(null);
   var _ref5 = overrideUseUpdateInterval || useUpdateInterval,
     updateInterval = _ref5[0],
@@ -2505,29 +2509,34 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_ref) {
     setTimeStep(newTimeStep);
   };
   return jsxs(Fragment, {
-    children: [isVisible && menuOpen && jsx(TimeSliderLiteOptionsMenu, Object.assign({
-      menuOpen: menuOpen,
-      setMenuOpen: setMenuOpen,
+    children: [!!isVisible && !!menuOpen && jsx(TimeSliderLiteOptionsMenu, Object.assign({
+      TimeZoneSwitch: timeSliderProps == null || (_timeSliderProps$sett = timeSliderProps.settings) == null ? void 0 : _timeSliderProps$sett.TimeZoneSwitch,
+      closeButtonIcon: (_timeSliderProps$sett2 = timeSliderProps.settings) == null || (_timeSliderProps$sett2 = _timeSliderProps$sett2.closeButton) == null ? void 0 : _timeSliderProps$sett2.icon,
       defaultTimeRange: [defaultStartTime, defaultEndTime],
       defaultTimeStep: defaultTimeStep,
+      dropdownButtonIcon: (_timeSliderProps$sett3 = timeSliderProps.settings) == null || (_timeSliderProps$sett3 = _timeSliderProps$sett3.dropdownButton) == null ? void 0 : _timeSliderProps$sett3.icon,
+      menuOpen: menuOpen,
+      setMenuOpen: setMenuOpen,
+      useAnimationSpeed: [animationSpeed, handleAnimationSpeedChange],
       useTimeRange: [timeRange, handleTimeRangeChange],
       useTimeStep: [timeStep, handleTimeStepChange],
-      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
+      useUpdateInterval: [updateInterval, setUpdateInterval]
     }, TimeSliderLiteOptionsMenuProps)), jsx(TimeSliderLite, Object.assign({
       currentTime: currentTime,
-      selectedTime: selectedTime,
-      timeStep: timeStep != null ? timeStep : defaultTimeStep,
-      timeZone: timeZone,
-      overrideAnimation: true,
+      endTime: endTime,
       isAnimating: !!isAnimating,
       isVisible: isVisible,
-      needleDisabled: zeroRange,
       mapId: mapId,
+      menuOpen: menuOpen,
+      needleDisabled: zeroRange,
+      onToggleAnimation: onToggleAnimation,
+      onToggleMenu: function onToggleMenu() {
+        return setMenuOpen(!menuOpen);
+      },
+      onToggleTimeSlider: onToggleTimeSliderVisibility,
+      overrideAnimation: true,
+      selectedTime: selectedTime,
       setSelectedTime: function setSelectedTime(newSelectedTime) {
         var newDate = preTimeDimensionSelect(mapId, newSelectedTime);
         if (isAnimating) {
@@ -2543,14 +2552,9 @@ var TimeSliderLiteConnect = function TimeSliderLiteConnect(_ref) {
           origin: mapEnums.MapActionOrigin.map
         }));
       },
-      menuOpen: menuOpen,
-      onToggleMenu: function onToggleMenu() {
-        return setMenuOpen(!menuOpen);
-      },
-      onToggleTimeSlider: onToggleTimeSliderVisibility,
-      onToggleAnimation: onToggleAnimation,
       startTime: startTime,
-      endTime: endTime
+      timeStep: timeStep != null ? timeStep : defaultTimeStep,
+      timeZone: timeZone
     }, timeSliderProps))]
   });
 };