@opengeoweb/time-slider 15.3.0 → 17.0.0

package/index.esm.js

@@ -1,4 +1,3 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
 import React, { useState, useRef, useEffect, createElement } from 'react';
 import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
@@ -6,6 +5,7 @@ import { debounce, throttle } from 'lodash';
 import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, FastForward, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Box as Box$1 } from '@mui/system';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -259,8 +259,7 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var Scale;
-(function (Scale) {
+var Scale = /*#__PURE__*/function (Scale) {
   Scale[Scale["Minutes5"] = 0] = "Minutes5";
   Scale[Scale["Hour"] = 1] = "Hour";
   Scale[Scale["Hours3"] = 2] = "Hours3";
@@ -271,9 +270,9 @@ var Scale;
   Scale[Scale["Month"] = 7] = "Month";
   Scale[Scale["Months3"] = 8] = "Months3";
   Scale[Scale["Year"] = 9] = "Year";
-})(Scale || (Scale = {}));
-var AnimationLength;
-(function (AnimationLength) {
+  return Scale;
+}({});
+var AnimationLength = /*#__PURE__*/function (AnimationLength) {
   AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
   AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
   AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
@@ -282,15 +281,18 @@ var AnimationLength;
   AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
   AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
   AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
-})(AnimationLength || (AnimationLength = {}));
+  return AnimationLength;
+}({});
 /**
  * In this Map collection all fundamental scales
  * (Scale.Minutes5 ... Scale.Year) are mapped with their corresponding
  * secondsPerPx numbers.
  * @returns a Map including information explained above
  */
+
 var secondsPerPxToScale = new Map([[2.5, Scale.Minutes5], [30, Scale.Hour], [3 * 30, Scale.Hours3], [6 * 30, Scale.Hours6], [24 * 30, Scale.Day], [7 * 24 * 30, Scale.Week], [14 * 24 * 30, Scale.Weeks2], [30 * 24 * 30, Scale.Month], [90 * 24 * 30, Scale.Months3], [365 * 24 * 30, Scale.Year]]);
 var spanToScale = new Map([[5 * 60, Scale.Minutes5], [60 * 60, Scale.Hour], [3 * 60 * 60, Scale.Hours3], [6 * 60 * 60, Scale.Hours6], [24 * 60 * 60, Scale.Day], [7 * 24 * 60 * 60, Scale.Week], [14 * 24 * 60 * 60, Scale.Weeks2], [30 * 24 * 60 * 60, Scale.Month], [90 * 24 * 60 * 60, Scale.Months3], [365 * 24 * 60 * 60, Scale.Year]]);
+
 /**
  * Creates a reverse mapping of scales to their corresponding secondsPerPx
  * values to make it easier in some parts GeoWeb to fetch a secondsPerpx for
@@ -298,6 +300,7 @@ var spanToScale = new Map([[5 * 60, Scale.Minutes5], [60 * 60, Scale.Hour], [3 *
  * @returns an Object, where names are fundamental scale values (0 - 7) and
  * values are their corresponding secondsPerPx numbers.
  */
+
 var scaleToSecondsPerPx = Object.fromEntries(Array.from(secondsPerPxToScale.entries()).map(function (_ref) {
   var key = _ref[0],
     value = _ref[1];
@@ -315,6 +318,7 @@ var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx,
 var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
   return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
 };
+
 /**
  * This function creates and returns an array where there is secondsPerPx
  * number of the data set added for a data scale (secondsPerPx)
@@ -324,6 +328,7 @@ var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, se
  * The secondsPerPx number for a data scale is included
  * contrary to secondsPerPxToScale.
  */
+
 var secondsPerPxValues = function secondsPerPxValues(secondsPerPx) {
   var sortedSecondsPerPx = [].concat(secondsPerPxToScale).map(function (value) {
     return Number(value[0]);
@@ -341,6 +346,7 @@ var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTi
   var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
   return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
 };
+
 /**
  * Move the time slider such that a given time point (timePoint)
  * is at a given pixel width (timePointPx).
@@ -349,6 +355,7 @@ var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTi
 var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
   return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
 };
+
 /** This reusable custom hook tells whether given pointer event targets current canvas node.
  * Example:
  *
@@ -357,11 +364,13 @@ var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePo
  * return isAllowedCanvasNodePointed ? (<CanvasComponent ref={nodeRef}>Component with ref</CanvasComponent>) : (<CanvasComponent>Component with NO ref</CanvasComponent>);
  *  ...
  */
+
 var useCanvasTarget = function useCanvasTarget(eventType) {
   var nodeRef = React.useRef(null);
   var _React$useState = React.useState(false),
     isTargetNode = _React$useState[0],
     setIsTargetNode = _React$useState[1];
+
   // Check if pointer event targets current node element
   var pointerEventListener = React.useCallback(function (event) {
     setIsTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
@@ -372,6 +381,7 @@ var useCanvasTarget = function useCanvasTarget(eventType) {
       return document.removeEventListener(eventType, pointerEventListener);
     };
   }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
+
   return [isTargetNode, nodeRef];
 };
 var timeBoxGeom = {
@@ -387,15 +397,16 @@ var AUTO_MOVE_AREA_PADDING = 1;
 var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
   return (scale === Scale.Year ? timeBoxGeom.largeWidth + timeBoxGeom.iconWidth : timeBoxGeom.smallWidth + timeBoxGeom.iconWidth) / 2 + AUTO_MOVE_AREA_PADDING;
 };
-var TimeInMinutes;
-(function (TimeInMinutes) {
+var TimeInMinutes = /*#__PURE__*/function (TimeInMinutes) {
   TimeInMinutes[TimeInMinutes["YEAR"] = 525600] = "YEAR";
   TimeInMinutes[TimeInMinutes["MONTH"] = 43200] = "MONTH";
   TimeInMinutes[TimeInMinutes["WEEK"] = 10080] = "WEEK";
   TimeInMinutes[TimeInMinutes["DAY"] = 1440] = "DAY";
   TimeInMinutes[TimeInMinutes["HOUR"] = 60] = "HOUR";
   TimeInMinutes[TimeInMinutes["MINUTE"] = 1] = "MINUTE";
-})(TimeInMinutes || (TimeInMinutes = {}));
+  return TimeInMinutes;
+}({});
+
 /**
  *
  * @param minutes
@@ -448,6 +459,7 @@ var minutesToDescribedDuration = function minutesToDescribedDuration(minutes) {
   });
   return durations.time.trim();
 };
+
 /**
  * Returns the largest timeunit value divisible by minuts
  * @param minutes
@@ -465,6 +477,7 @@ function getLargestTimeUnit(minutes) {
   }
   return TimeInMinutes.MINUTE;
 }
+
 // For a data scale an appropriate fundamental scale is chosen
 // depending on secondsPerPx of data. When a time range of
 // data is for example many months. the fundamental scale Scale.Year
@@ -473,6 +486,7 @@ function getLargestTimeUnit(minutes) {
 //
 // If a  time range of data is a few weeks, Scale.Month is chosen. So, all
 // the time range of data can be shown in the window.
+
 var getFundamentalScale = function getFundamentalScale(secondsPerPx) {
   if (secondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
     return Scale.Year;
@@ -520,10 +534,12 @@ var calculateMouseTimeAndCheckBounds = function calculateMouseTimeAndCheckBounds
   if (isDraggingWithinBounds) {
     return undefined;
   }
+
   // eslint-disable-next-line no-param-reassign
   tooltipPosition.current = pixelsBetweenViewportAndTimesliderOnLeft && mousePosition + pixelsBetweenViewportAndTimesliderOnLeft;
   return pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
 };
+
 // default values
 var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
@@ -531,6 +547,7 @@ var defaultTimeStep = 60;
 var defaultSecondsPerPx = 80;
 var defaultTimeSpan = 24 * 3600;
 var speedFactors = [0.1, 0.2, 0.5, 1, 2, 4, 8, 16]; // Declares available animation speed multipliers for default delay
+
 var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
   var adjustedTimeStep = timeStep * 60;
   if (!type || type === 'round') {
@@ -544,9 +561,11 @@ var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
   }
   return undefined;
 };
+
 /**
  * Returns speed delay for given speedFactor. For options, see defined above in "speedFactors"
  */
+
 var getSpeedDelay = function getSpeedDelay(speedFactor) {
   return defaultDelay / speedFactor;
 };
@@ -570,9 +589,9 @@ var timeSliderLegendDefaultProps = {
 var timeSliderUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
-  get AnimationLength () { return AnimationLength; },
-  get Scale () { return Scale; },
-  get TimeInMinutes () { return TimeInMinutes; },
+  AnimationLength: AnimationLength,
+  Scale: Scale,
+  TimeInMinutes: TimeInMinutes,
   calculateMouseTimeAndCheckBounds: calculateMouseTimeAndCheckBounds,
   defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
   defaultDelay: defaultDelay,
@@ -620,6 +639,7 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var onsetNewDateDebounced = debounce(function (dateToSet, onSetNewDate) {
   onSetNewDate(dateToSet);
 }, 4, {
@@ -643,6 +663,7 @@ var setNextTimeStep = function setNextTimeStep(timeStep, currentTime, dataEndTim
   var selectedTimeString = dateUtils.fromUnix(newTime).toISOString();
   onSetNewDate(selectedTimeString);
 };
+
 /**
  * updates unfiltered selected time and moves selected time a given distance
  * in pixels. Unfiltered selected time can be outside data data limits, but
@@ -662,6 +683,7 @@ function getFilteredTime(unfilteredTime, timeStep, dataStartTime, dataEndTime) {
   var maxTime = Math.max(roundedTime, dataStartTime);
   return Math.min(maxTime, dataEndTime);
 }
+
 /** Reusable business logic for how to handle events that set time to now (closest).
  * Used in NowButton and TimeSliderLegend.
  */
@@ -698,6 +720,7 @@ var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, data
  * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
@@ -755,6 +778,7 @@ var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, time
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var TIME_SLIDER_NAMESPACE = 'timeslider';
 var initTimesliderI18n = function initTimesliderI18n() {
   safelyInitI18nForTestsAndStories(i18n, TIME_SLIDER_NAMESPACE, [{
@@ -766,19 +790,37 @@ var useTimesliderTranslation = function useTimesliderTranslation() {
   return useTranslation(TIME_SLIDER_NAMESPACE);
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
   var isVisible = _ref.isVisible,
     toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
+  return /*#__PURE__*/jsx(CustomIconButton, {
     "data-testid": "hideTimeSliderButton",
     onClick: function onClick() {
       toggleTimeSliderIsVisible(!isVisible);
     },
     tooltipTitle: isVisible ? t('timeslider-hide') : t('timeslider-show'),
     variant: "tool",
-    children: isVisible ? jsx(ChevronDown, {}) : jsx(ChevronUp, {})
+    children: isVisible ? /*#__PURE__*/jsx(ChevronDown, {}) : /*#__PURE__*/jsx(ChevronUp, {})
   });
 };
 var HideSliderButton = /*#__PURE__*/React.memo(HideSliderButtonComponent);
@@ -800,6 +842,8 @@ var HideSliderButton = /*#__PURE__*/React.memo(HideSliderButtonComponent);
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
+
 /**
  * @param x The pin location
  * @param selectedTimePx The selected px
@@ -867,6 +911,24 @@ function getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, s
   };
 }
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var TimeSlider = function TimeSlider(_ref) {
   var buttons = _ref.buttons,
     timeBox = _ref.timeBox,
@@ -885,11 +947,13 @@ var TimeSlider = function TimeSlider(_ref) {
     onToggleTimeSlider = _ref$onToggleTimeSlid === void 0 ? function () {} : _ref$onToggleTimeSlid;
   // set up visibility toggle
   useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider);
+
   // set up movement with keyboard shortcuts
   useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime);
+
   // timeBox, buttons and legend are created in TimeSliderConnect.tsx
   // these components will always be created as TimeSlider never runs in isolation from the store
-  return isVisible ? jsxs(Grid, {
+  return isVisible ? /*#__PURE__*/jsxs(Grid, {
     container: true,
     "data-testid": "timeSlider",
     sx: {
@@ -897,7 +961,6 @@ var TimeSlider = function TimeSlider(_ref) {
       gridTemplateColumns: '175px 1fr 40px',
       gridTemplateRows: TIME_SLIDER_LEGEND_HEIGHT,
       gridTemplateAreas: "\". timebox .\"\n                            \"buttons timelegend toggle\"",
-      paddingBottom: 1,
       alignItems: 'center',
       justifyContent: 'center',
       visibility: isVisible ? 'visible' : 'hidden',
@@ -907,7 +970,7 @@ var TimeSlider = function TimeSlider(_ref) {
         paddingRight: '5%'
       }
     },
-    children: [jsx(Grid, {
+    children: [/*#__PURE__*/jsx(Grid, {
       sx: {
         gridArea: 'timebox',
         zIndex: 99,
@@ -915,35 +978,35 @@ var TimeSlider = function TimeSlider(_ref) {
         overflow: 'hidden'
       },
       children: timeBox
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       sx: {
         gridArea: 'buttons'
       },
       children: buttons
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       sx: {
         gridArea: 'timelegend'
       },
       children: legend
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       sx: {
         gridArea: 'toggle',
-        paddingLeft: 1
+        paddingLeft: 1,
+        lineHeight: 0
       },
-      children: jsx(HideSliderButton, {
+      children: /*#__PURE__*/jsx(HideSliderButton, {
         isVisible: isVisible,
         toggleTimeSliderIsVisible: onToggleTimeSlider
       })
     })]
-  }) : jsx(Grid, {
+  }) : /*#__PURE__*/jsx(Grid, {
     container: true,
     sx: {
       paddingRight: 1,
-      paddingBottom: 1,
       alignItems: 'center',
       justifyContent: 'flex-end'
     },
-    children: jsx(HideSliderButton, {
+    children: /*#__PURE__*/jsx(HideSliderButton, {
       isVisible: isVisible,
       toggleTimeSliderIsVisible: onToggleTimeSlider
     })
@@ -1158,6 +1221,7 @@ var roundByUnitOfTime = function roundByUnitOfTime(timeUnix, unit, roundUp) {
     }
     return dateUtils.unix(_timeStartOfPassedUnit4);
   }
+
   // Default unit === 'year'
   var timeStartOfPassedUnit = dateUtils.startOfYearUTC(dateUtils.fromUnix(timeUnix));
   if (roundUp) {
@@ -1175,12 +1239,14 @@ var roundToNearestMultiple = function roundToNearestMultiple(timeUnix, scale, ro
   var roundFn = roundUp ? Math.ceil : Math.floor;
   return roundFn(timeUnix / stepSeconds) * stepSeconds;
 };
+
 /**
  * In this script starting and ending times of the time slider are rounded.
  * Here it is defined what is a time unit to a start of which a rounding is
  * done for each scale.
  * @returns an object where there are rounding units of each scale
  */
+
 var scaleToRoundableUnit = (_scaleToRoundableUnit = {}, _scaleToRoundableUnit[Scale.Hour] = 'hour', _scaleToRoundableUnit[Scale.Day] = 'day', _scaleToRoundableUnit[Scale.Week] = 'week', _scaleToRoundableUnit[Scale.Weeks2] = 'week', _scaleToRoundableUnit[Scale.Month] = 'week', _scaleToRoundableUnit[Scale.Months3] = 'week', _scaleToRoundableUnit[Scale.Year] = 'year', _scaleToRoundableUnit);
 var getRoundedStartAndEnd = function getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, scale) {
   if (scale === Scale.Minutes5 || scale === Scale.Hours3 || scale === Scale.Hours6) {
@@ -1291,12 +1357,14 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
   var _getRoundedStartAndEn = getRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, fundamentalScale),
     roundedStart = _getRoundedStartAndEn[0],
     roundedEnd = _getRoundedStartAndEn[1];
+
   // draw regular tickmarks
   var ctx = context;
   getTimesteps(roundedStart, roundedEnd, fundamentalScale).forEach(function (timestep) {
     var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
     // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
     drawStepPxLine(ctx, theme, Math.floor(stepPx) + 0.5, height, fundamentalScale, timestep);
+
     // Draw the time step time as text
     var timeFormat = getTimeFormat(fundamentalScale);
     var timeText = dateUtils.dateToString(dateUtils.fromUnix(timestep), timeFormat);
@@ -1309,6 +1377,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
       drawYearScaleText(ctx, theme, timeText, stepPx, height);
     }
   });
+
   // draw month overlay lines
   if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Weeks2 || fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
     var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, Scale.Year),
@@ -1319,6 +1388,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
       var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
       if (fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
         var month = dateUtils.dateToString(dateUtils.fromUnix(timestep), 'MMM');
+
         // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
         drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
         drawTimeText(ctx, theme, stepPx, height, month, fundamentalScale);
@@ -1353,6 +1423,7 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var drawBackground = function drawBackground(context, theme, visibleTimeStart, visibleTimeEnd, animationStartPx, animationEndPx, canvasWidth, height, secondsPerPx, timeSliderSpan, dataStartPx, dataEndPx, currentTimePx) {
   var ctx = context;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
@@ -1360,6 +1431,7 @@ var drawBackground = function drawBackground(context, theme, visibleTimeStart, v
     ledgendObservedBackground = _theme$palette$geoweb.ledgendObservedBackground,
     legendForecastBackground = _theme$palette$geoweb.legendForecastBackground,
     legendNoDataBackground = _theme$palette$geoweb.legendNoDataBackground;
+
   // top spacing
   var y = 0;
   var scaleToUse = timeSliderSpan ? getScaleFromSpan(timeSliderSpan) : getFundamentalScale(secondsPerPx);
@@ -1482,6 +1554,7 @@ function getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
   var ctx = context;
   var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
@@ -1519,6 +1592,7 @@ var drawCurrentTime = function drawCurrentTime(context, theme, width, height, st
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
   if (!selectedTime) {
     return;
@@ -1529,6 +1603,7 @@ var drawNeedle = function drawNeedle(context, theme, width, height, startTime, e
     playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
     playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
   var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
+
   // Draw a high vertical line (needle) indicating the current or selected time
   ctx.beginPath();
   // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
@@ -1540,6 +1615,7 @@ var drawNeedle = function drawNeedle(context, theme, width, height, startTime, e
   ctx.lineWidth = 1;
   ctx.strokeStyle = playerNeedlePlayerTop.rgba;
   ctx.stroke();
+
   // Triange connecting timebox.
   ctx.beginPath();
   ctx.moveTo(Math.floor(selectedPx) + 5, 0);
@@ -1567,6 +1643,7 @@ var drawNeedle = function drawNeedle(context, theme, width, height, startTime, e
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasWidth, height, centerTime, secondsPerPx, timeSliderSpan, selectedTimeUnix, currentTimeUnix, animationStartTime, animationEndTime, dataStartTime, dataEndTime) {
   var ctx = context;
   var _map = [0, canvasWidth].map(function (px) {
@@ -1589,8 +1666,27 @@ var drawTimeSliderLegend = function drawTimeSliderLegend(context, theme, canvasW
   drawNeedle(ctx, theme, canvasWidth, height, visibleTimeStart, visibleTimeEnd, selectedTimeUnix);
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 // Explanation of props can be found here:
 // https://drive.google.com/file/d/1jqqNcciCH0UJiZ04HO-1vknmPPpT8fK5/view?usp=sharing
+
 var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var _node$current, _getTimeSliderLegendE;
   var mapId = _ref.mapId,
@@ -1653,6 +1749,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var _useState7 = useState(),
     lastHandledRoundedTime = _useState7[0],
     setLastHandledRoundedTime = _useState7[1];
+
   // remove active drag. can happen outside canvas.
   var _useState8 = useState(),
     localAnimationStartTime = _useState8[0],
@@ -1674,6 +1771,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   var startDraggingPosition = useRef(0);
   var popperRef = useRef(null);
   var isClickOrDrag = useRef();
+
   // Display unfilteredSelectedTime (already snapped to available timestep)
   var displayTime = unfilteredSelectedTime;
   var start = localAnimationStartTime;
@@ -1762,6 +1860,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       if (timeBetweenMouseAndStartAndEnd.current === undefined) {
         // to move the whole animation area we need to calculate the distance
         // between the mouse position and the start and end position
+
         var _timeFromMouseToStart = mouseTimeUnix - start;
         var _timeFromMouseToEnd = end - mouseTimeUnix;
         timeBetweenMouseAndStartAndEnd.current = {
@@ -1882,6 +1981,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       startAnimationPosition = _getPositions.startAnimationPosition,
       endAnimationPosition = _getPositions.endAnimationPosition,
       selectedTimePosition = _getPositions.selectedTimePosition;
+
     // start dragging selected time.
     if (isSelectedTimeIconArea(x, selectedTimePosition, DRAG_AREA_WIDTH)) {
       setCursorStyle('grabbing');
@@ -1891,6 +1991,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     if (reduxAnimationStartTime && reduxAnimationEndTime) {
       var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
       tooltipPosition.current = pixelsBetweenOnLeft ? x + pixelsBetweenOnLeft : x;
+
       // start dragging either marker
       if (isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH)) {
         setCursorStyle('grabbing');
@@ -1935,6 +2036,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       startAnimationPosition = _getPositions2.startAnimationPosition,
       endAnimationPosition = _getPositions2.endAnimationPosition,
       selectedTimePosition = _getPositions2.selectedTimePosition;
+
     // Adjust mouse cursor while hovering draggable areas
     var leftAnimationIconArea = isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH);
     var rightAnimationIconArea = isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH);
@@ -1980,12 +2082,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     }
     return undefined;
   }, [isTimeScrollingEnabled, mapWindowRef, onWheel]);
-  return jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     sx: {
       position: 'relative',
       height: TIME_SLIDER_LEGEND_HEIGHT + "px"
     },
-    children: [jsx(CustomTooltip, {
+    children: [/*#__PURE__*/jsx(CustomTooltip, {
       open: Boolean(showTooltip),
       slotProps: {
         popper: {
@@ -1996,7 +2098,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         }
       },
       title: getTooltipText(),
-      children: jsx(Box, {
+      children: /*#__PURE__*/jsx(Box, {
         className: getTimeSliderLegendId(mapId),
         "data-testid": "timeSliderLegend",
         onMouseLeave: function onMouseLeave() {
@@ -2008,7 +2110,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
           overflow: 'hidden',
           cursor: cursorStyle
         },
-        children: jsx(CanvasComponent, {
+        children: /*#__PURE__*/jsx(CanvasComponent, {
           onMouseDown: onMouseDown,
           onMouseMove: onMouseMove,
           onMouseUp: onMouseUp,
@@ -2020,7 +2122,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
           ref: node
         })
       })
-    }), !!isTimeSliderHoverOn && jsx(Box, {
+    }), !!isTimeSliderHoverOn && /*#__PURE__*/jsx(Box, {
       "data-testid": "customCanvasMouseOverContainer",
       onMouseLeave: function onMouseLeave() {
         return setIsMouseOverCanvas(false);
@@ -2041,6 +2143,24 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   });
 };
 
+/* *
+ * 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 THROTTLE_WAIT_TIME = 300; // [ms]
 var THROTTLE_OPTIONS = {
   trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
@@ -2095,6 +2215,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     }
     return '';
   };
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var throttledScroll = React.useCallback(throttle(function (newValue) {
     onChangeSliderValue(newValue);
@@ -2104,11 +2225,11 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     var newValue = marks[Math.min(Math.max(currentMarkIndex - direction, 0), marks.length - 1)];
     throttledScroll(newValue.value);
   }, [currentMarkIndex, marks, throttledScroll]);
-  return jsxs(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     onKeyDown: function onKeyDown(event) {
       event.stopPropagation();
     },
-    children: [jsxs(CustomIconButton, {
+    children: [/*#__PURE__*/jsxs(CustomIconButton, {
       isSelected: true,
       onClick: function onClick() {
         setOpen(true);
@@ -2116,12 +2237,15 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       onWheel: onWheel,
       ref: setAnchorRef,
       sx: {
-        padding: '11px!important',
-        width: '100%!important'
+        padding: '0px',
+        paddingRight: '12px',
+        width: '100%!important',
+        minWidth: '64px',
+        justifyContent: 'space-between'
       },
       tooltipTitle: title,
       variant: "tool",
-      children: [icon, jsx(Typography, {
+      children: [icon, /*#__PURE__*/jsx(Typography, {
         sx: {
           fontSize: 12,
           fontWeight: 400,
@@ -2129,7 +2253,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         },
         children: buttonText(value, displayCurrentLength, currentMark)
       })]
-    }), !!anchorRef && jsxs(Menu, {
+    }), !!anchorRef && /*#__PURE__*/jsxs(Menu, {
       anchorEl: anchorRef,
       anchorOrigin: {
         vertical: -15,
@@ -2150,7 +2274,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         vertical: 'bottom',
         horizontal: 'center'
       },
-      children: [jsx(MenuItem, {
+      children: [/*#__PURE__*/jsx(MenuItem, {
         disabled: true,
         sx: {
           fontSize: '12px',
@@ -2164,7 +2288,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         children: title
       }), marks.map(function (mark) {
         var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value && !isAutoSelected;
-        return jsx(MenuItem, {
+        return /*#__PURE__*/jsx(MenuItem, {
           disabled: allOptionsDisabled,
           onClick: function onClick() {
             if (!isSelected) {
@@ -2175,7 +2299,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
           selected: !!isSelected && !displayLengthInputField,
           children: mark.label || mark.text
         }, mark.value);
-      }), !!handleAutoClick && jsx(MenuItem, {
+      }), !!handleAutoClick && /*#__PURE__*/jsx(MenuItem, {
         disabled: allOptionsDisabled || isAutoDisabled,
         onClick: function onClick() {
           handleAutoClick();
@@ -2183,7 +2307,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         },
         selected: isAutoSelected,
         children: t('timeslider-auto')
-      }), !!displayCurrentLength && jsxs(MenuItem, {
+      }), !!displayCurrentLength && /*#__PURE__*/jsxs(MenuItem, {
         disabled: disbleUserSetDuration,
         onClick: function onClick() {
           return setDisplayLengthInputField(true);
@@ -2191,13 +2315,13 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         sx: {
           maxWidth: '175px'
         },
-        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
+        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && /*#__PURE__*/jsxs(Box, {
           sx: {
             flexDirection: 'column',
             display: 'flex',
             flexGrow: 1
           },
-          children: [jsx(CardHeader, {
+          children: [/*#__PURE__*/jsx(CardHeader, {
             slotProps: {
               title: {
                 fontSize: 12
@@ -2209,7 +2333,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
               color: 'geowebColors.greys.accessible'
             },
             title: t(customFieldHeader)
-          }), jsxs(Box, {
+          }), /*#__PURE__*/jsxs(Box, {
             sx: {
               flexDirection: 'row',
               display: 'flex',
@@ -2217,20 +2341,20 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
               flexGrow: 1,
               paddingTop: 0.5
             },
-            children: [jsx(Typography, {
+            children: [/*#__PURE__*/jsx(Typography, {
               sx: {
                 fontSize: 14,
                 textTransform: 'none',
                 lineHeight: 2
               },
               children: minutesToDescribedDuration(value)
-            }), jsx(CustomTooltip, {
+            }), /*#__PURE__*/jsx(CustomTooltip, {
               title: t('timeslider-edit'),
-              children: jsx("span", {
-                children: jsx(CustomIconButton, {
+              children: /*#__PURE__*/jsx("span", {
+                children: /*#__PURE__*/jsx(CustomIconButton, {
                   "aria-label": "edit animation option",
                   "data-testid": "editAnimationOption",
-                  children: jsx(Edit, {})
+                  children: /*#__PURE__*/jsx(Edit, {})
                 })
               })
             })]
@@ -2241,6 +2365,24 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var marks$2 = [{
   value: AnimationLength.Minutes15,
   text: 'timeslider-min',
@@ -2300,11 +2442,11 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
   var _useState = useState(false),
     open = _useState[0],
     setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
+  return /*#__PURE__*/jsx(TimeSliderMenu, {
     allOptionsDisabled: disabled,
     displayCurrentLength: true,
     handleAutoClick: toggleAnimationLengthAuto,
-    icon: jsx(Animation, {
+    icon: /*#__PURE__*/jsx(Animation, {
       "data-testid": "animationLengthButton"
     }),
     isAutoDisabled: !layerHasTimeStep,
@@ -2318,6 +2460,24 @@ var AnimationLengthButton = function AnimationLengthButton(_ref) {
   });
 };
 
+/* *
+ * 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 AutoUpdateButton = function AutoUpdateButton(_ref) {
   var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
     toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
@@ -2327,7 +2487,7 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
+  return /*#__PURE__*/jsx(CustomIconButton, {
     "data-testid": "autoUpdateButton",
     disabled: disabled,
     isSelected: isAutoUpdating,
@@ -2336,14 +2496,32 @@ var AutoUpdateButton = function AutoUpdateButton(_ref) {
     },
     tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
     variant: "tool",
-    children: isAutoUpdating ? jsx(AutoUpdateActive, {
+    children: isAutoUpdating ? /*#__PURE__*/jsx(AutoUpdateActive, {
       "data-testid": "auto-update-svg-on"
-    }) : jsx(AutoUpdateInActive, {
+    }) : /*#__PURE__*/jsx(AutoUpdateInActive, {
       "data-testid": "auto-update-svg-off"
     })
   });
 };
 
+/* *
+ * 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 BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
   var isForwardStep = _ref.isForwardStep,
     isDisabled = _ref.isDisabled,
@@ -2353,21 +2531,39 @@ var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
   renderCounter.count(BackwardForwardStepButton.name);
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
+  return /*#__PURE__*/jsx(CustomIconButton, {
     "aria-label": isForwardStep ? 'forward' : 'backward',
     "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
     disabled: isDisabled,
     onClick: onClickBFButton,
     tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
     variant: "tool",
-    children: isForwardStep ? jsx(StepForward, {
+    children: isForwardStep ? /*#__PURE__*/jsx(StepForward, {
       "data-testid": "step-forward-svg-path"
-    }) : jsx(StepBackward, {
+    }) : /*#__PURE__*/jsx(StepBackward, {
       "data-testid": "step-backward-svg-path"
     })
   });
 };
 
+/* *
+ * 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 NowButton = function NowButton(_ref) {
   var _ref$onSetNow = _ref.onSetNow,
     onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
@@ -2375,7 +2571,7 @@ var NowButton = function NowButton(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
+  return /*#__PURE__*/jsx(CustomIconButton, {
     "aria-label": "now",
     "data-testid": "nowButtonTooltip",
     disabled: disabled,
@@ -2384,12 +2580,30 @@ var NowButton = function NowButton(_ref) {
     },
     tooltipTitle: t('timeslider-now'),
     variant: "tool",
-    children: jsx(Now, {
+    children: /*#__PURE__*/jsx(Now, {
       "data-testid": "now-svg"
     })
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var PlayButton = function PlayButton(_ref) {
   var isAnimating = _ref.isAnimating,
     isDisabled = _ref.isDisabled,
@@ -2400,46 +2614,82 @@ var PlayButton = function PlayButton(_ref) {
   };
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
+  return /*#__PURE__*/jsx(CustomIconButton, {
     "data-testid": "playButton",
     disabled: isDisabled,
     isSelected: isAnimating,
     onClick: onTogglePlay,
     tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
     variant: "tool",
-    children: isAnimating ? jsx(Pause, {
+    children: isAnimating ? /*#__PURE__*/jsx(Pause, {
       "data-testid": "pause-svg-path"
-    }) : jsx(Play, {
+    }) : /*#__PURE__*/jsx(Play, {
       "data-testid": "play-svg-path"
     })
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var ControlButtons = function ControlButtons(_ref) {
   var backwardBtn = _ref.backwardBtn,
     forwardBtn = _ref.forwardBtn,
     playBtn = _ref.playBtn,
     nowBtn = _ref.nowBtn,
     autoUpdateBtn = _ref.autoUpdateBtn;
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
-      children: backwardBtn || jsx(BackwardForwardStepButton, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Grid, {
+      children: backwardBtn || /*#__PURE__*/jsx(BackwardForwardStepButton, {
         isForwardStep: false
       })
-    }), jsx(Grid, {
-      children: forwardBtn || jsx(BackwardForwardStepButton, {
+    }), /*#__PURE__*/jsx(Grid, {
+      children: forwardBtn || /*#__PURE__*/jsx(BackwardForwardStepButton, {
         isForwardStep: true
       })
-    }), jsx(Grid, {
-      children: playBtn || jsx(PlayButton, {})
-    }), jsx(Grid, {
-      children: nowBtn || jsx(NowButton, {})
-    }), jsx(Grid, {
-      children: autoUpdateBtn || jsx(AutoUpdateButton, {})
+    }), /*#__PURE__*/jsx(Grid, {
+      children: playBtn || /*#__PURE__*/jsx(PlayButton, {})
+    }), /*#__PURE__*/jsx(Grid, {
+      children: nowBtn || /*#__PURE__*/jsx(NowButton, {})
+    }), /*#__PURE__*/jsx(Grid, {
+      children: autoUpdateBtn || /*#__PURE__*/jsx(AutoUpdateButton, {})
     })]
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
     setMapAnimationDelay = _ref.setMapAnimationDelay;
@@ -2458,8 +2708,8 @@ var SpeedButton = function SpeedButton(_ref) {
   var _useState = useState(false),
     open = _useState[0],
     setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    icon: jsx(Speed, {}),
+  return /*#__PURE__*/jsx(TimeSliderMenu, {
+    icon: /*#__PURE__*/jsx(Speed, {}),
     marks: marks,
     onChangeSliderValue: function onChangeSliderValue(markValue) {
       setMapAnimationDelay(markValue);
@@ -2471,6 +2721,24 @@ var SpeedButton = function SpeedButton(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
   var timeSliderSpan = _ref.timeSliderSpan,
     setOpen = _ref.setOpen,
@@ -2486,8 +2754,8 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
   var _React$useState3 = React.useState(true),
     isANumber = _React$useState3[0],
     setIsANumber = _React$useState3[1];
-  return jsx(Box, {
-    children: jsxs(FormControl, {
+  return /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsxs(FormControl, {
       onKeyDown: function onKeyDown(event) {
         event.stopPropagation();
       },
@@ -2497,7 +2765,7 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
         display: 'flex'
       },
       variant: "standard",
-      children: [jsx(TextField, {
+      children: [/*#__PURE__*/jsx(TextField, {
         autoFocus: true,
         color: isANumber ? 'primary' : 'warning',
         label: t('timeslider-span'),
@@ -2527,11 +2795,11 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
         },
         value: Math.round(selectedTimeValue * 100) / 100,
         variant: "standard"
-      }), jsx(Box, {
+      }), /*#__PURE__*/jsx(Box, {
         sx: {
           alignContent: 'end'
         },
-        children: jsxs(Select, {
+        children: /*#__PURE__*/jsxs(Select, {
           "aria-label": "time-resolution-selector",
           defaultValue: "h",
           onChange: function onChange(e) {
@@ -2542,22 +2810,22 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
           size: "small",
           tabIndex: -1,
           value: selectedTimeResolution,
-          children: [jsx(MenuItem, {
+          children: [/*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.YEAR,
             children: t('years')
-          }), jsx(MenuItem, {
+          }), /*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.MONTH,
             children: t('months')
-          }), jsx(MenuItem, {
+          }), /*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.WEEK,
             children: t('weeks')
-          }), jsx(MenuItem, {
+          }), /*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.DAY,
             children: t('days')
-          }), jsx(MenuItem, {
+          }), /*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.HOUR,
             children: t('hours')
-          }), jsx(MenuItem, {
+          }), /*#__PURE__*/jsx(MenuItem, {
             value: TimeInMinutes.MINUTE,
             children: t('minutes')
           })]
@@ -2567,6 +2835,24 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var marks$1 = [{
   value: 60,
   text: 'timeslider-hour',
@@ -2637,10 +2923,10 @@ var TimeSpanButton = function TimeSpanButton(_ref) {
   var _useState = useState(isOpenByDefault),
     open = _useState[0],
     setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
+  return /*#__PURE__*/jsx(TimeSliderMenu, {
     allOptionsDisabled: disabled,
     customFieldHeader: t('timeslider-span'),
-    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
+    customLengthSelector: /*#__PURE__*/jsx(TimeSpanButtonCustomSelect, {
       onChangeSliderValue: onChangeSliderValue,
       setOpen: setOpen,
       timeSliderSpan: timeSliderSpan
@@ -2648,7 +2934,7 @@ var TimeSpanButton = function TimeSpanButton(_ref) {
     disbleUserSetDuration: false,
     displayCurrentLength: true,
     handleAutoClick: onToggleTimeSpan,
-    icon: jsx(Clock, {}),
+    icon: /*#__PURE__*/jsx(Clock, {}),
     isAutoDisabled: !layerHasTimeStep,
     isAutoSelected: isTimeSpanAuto,
     marks: translatedMarks,
@@ -2660,6 +2946,24 @@ var TimeSpanButton = function TimeSpanButton(_ref) {
   });
 };
 
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var marks = [{
   value: 1,
   text: 'timeslider-min',
@@ -2785,11 +3089,11 @@ var TimeStepButton = function TimeStepButton(_ref) {
   var _useState = useState(isOpenByDefault),
     open = _useState[0],
     setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
+  return /*#__PURE__*/jsx(TimeSliderMenu, {
     allOptionsDisabled: disabled,
     displayCurrentLength: true,
     handleAutoClick: handleToggleTimeStep,
-    icon: jsx(FastForward, {
+    icon: /*#__PURE__*/jsx(FastForward, {
       "data-testid": "timeStepButton"
     }),
     isAutoDisabled: !layerHasTimeStep,
@@ -2803,17 +3107,35 @@ var TimeStepButton = function TimeStepButton(_ref) {
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var OptionsMenu = function OptionsMenu(_ref) {
   var speedBtn = _ref.speedBtn,
     timeSpanBtn = _ref.timeSpanBtn,
     timeStepBtn = _ref.timeStepBtn,
     animationLengthBtn = _ref.animationLengthBtn;
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Grid, {
       size: {
         xs: 'auto'
       },
-      children: timeSpanBtn || jsx(TimeSpanButton, {
+      children: timeSpanBtn || /*#__PURE__*/jsx(TimeSpanButton, {
         disabled: false,
         isTimeSpanAuto: false,
         layerHasTimeStep: false,
@@ -2821,27 +3143,27 @@ var OptionsMenu = function OptionsMenu(_ref) {
         onToggleTimeSpan: function onToggleTimeSpan() {},
         timeSliderSpan: 0
       })
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       size: {
         xs: 'auto'
       },
-      children: animationLengthBtn || jsx(AnimationLengthButton, {
+      children: animationLengthBtn || /*#__PURE__*/jsx(AnimationLengthButton, {
         onChangeAnimationLength: function onChangeAnimationLength() {},
         toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
       })
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       size: {
         xs: 'auto'
       },
-      children: timeStepBtn || jsx(TimeStepButton, {
+      children: timeStepBtn || /*#__PURE__*/jsx(TimeStepButton, {
         isTimestepAuto: false,
         onChangeTimeStep: function onChangeTimeStep() {}
       })
-    }), jsx(Grid, {
+    }), /*#__PURE__*/jsx(Grid, {
       size: {
         xs: 'auto'
       },
-      children: speedBtn || jsx(SpeedButton, {
+      children: speedBtn || /*#__PURE__*/jsx(SpeedButton, {
         animationDelay: defaultAnimationDelayAtStart,
         setMapAnimationDelay: function setMapAnimationDelay() {}
       })
@@ -2849,6 +3171,24 @@ var OptionsMenu = function OptionsMenu(_ref) {
   });
 };
 
+/* *
+ * 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 OptionsMenuButton = function OptionsMenuButton(_ref) {
   var speedBtn = _ref.speedBtn,
     timeStepBtn = _ref.timeStepBtn,
@@ -2869,8 +3209,8 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       setOpen(true);
     }
   }, [anchorEl, isOpenByDefault]);
-  return jsxs("div", {
-    children: [jsx(CustomIconButton, {
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(CustomIconButton, {
       "aria-label": "animation options",
       "data-testid": "optionsMenuButton",
       isSelected: open,
@@ -2885,8 +3225,8 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
         placement: 'bottom'
       },
       variant: "tool",
-      children: jsx(Options, {})
-    }), jsx(Popper, {
+      children: /*#__PURE__*/jsx(Options, {})
+    }), /*#__PURE__*/jsx(Popper, {
       anchorEl: anchorEl,
       "data-testid": "optionsMenuPopOver",
       open: open,
@@ -2894,19 +3234,19 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       sx: {
         zIndex: 10
       },
-      children: jsx(Paper, {
+      children: /*#__PURE__*/jsx(Paper, {
         elevation: 3,
         sx: {
           position: 'relative',
           top: '-2rem'
         },
-        children: jsx(Grid, {
+        children: /*#__PURE__*/jsx(Grid, {
           container: true,
           spacing: 1,
           sx: {
             padding: '10px'
           },
-          children: jsx(OptionsMenu, {
+          children: /*#__PURE__*/jsx(OptionsMenu, {
             animationLengthBtn: animationLengthBtn,
             speedBtn: speedBtn,
             timeSpanBtn: timeSpanBtn,
@@ -2918,6 +3258,24 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   });
 };
 
+/* *
+ * 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 2020 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2020 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var TimeSliderButtons = function TimeSliderButtons(_ref) {
   var optionsMenuBtn = _ref.optionsMenuBtn,
     playBtn = _ref.playBtn,
@@ -2925,18 +3283,21 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
     forwardBtn = _ref.forwardBtn,
     nowBtn = _ref.nowBtn,
     autoUpdateBtn = _ref.autoUpdateBtn;
-  return jsx("div", {
+  return /*#__PURE__*/jsx(Box, {
     "data-testid": "timeSliderButtons",
-    children: jsxs(Grid, {
+    sx: {
+      height: 24
+    },
+    children: /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 0.5,
       sx: {
         alignItems: 'center',
         justifyContent: 'center'
       },
-      children: [jsx(Grid, {
-        children: optionsMenuBtn || jsx(OptionsMenuButton, {})
-      }), jsx(ControlButtons, {
+      children: [/*#__PURE__*/jsx(Grid, {
+        children: optionsMenuBtn || /*#__PURE__*/jsx(OptionsMenuButton, {})
+      }), /*#__PURE__*/jsx(ControlButtons, {
         autoUpdateBtn: autoUpdateBtn,
         backwardBtn: backwardBtn,
         forwardBtn: forwardBtn,
@@ -2964,6 +3325,7 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var onMouseMove = function onMouseMove(x, width, selectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle) {
   if (!selectedTime || mouseDownInTimeBox) {
     return;
@@ -3003,6 +3365,7 @@ var onMouseDown = function onMouseDown(x, width, selectedTime, centerTime, secon
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
+
 var secondsInYear = 365 * 24 * 3600;
 var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, theme) {
   ctx.save();
@@ -3013,11 +3376,14 @@ var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, heigh
   ctx.fillStyle = playerTimeMarkers.fill;
   ctx.lineWidth = timeBoxGeom.lineWidth;
   var halfLineWidth = timeBoxGeom.lineWidth / 2;
+
   // Top left corner
   ctx.moveTo(halfLineWidth, height / 2);
   ctx.arcTo(halfLineWidth, halfLineWidth, width / 2, halfLineWidth, cornerRadius);
+
   // Top right corner
   ctx.arcTo(width - halfLineWidth, halfLineWidth, width - halfLineWidth, height / 2, cornerRadius);
+
   // Bottom right corner
   ctx.arcTo(width - halfLineWidth, height - halfLineWidth, width / 2, height - halfLineWidth, cornerRadius);
   // Bottom left corner
@@ -3041,6 +3407,7 @@ var drawAutoUpdateIcon = function drawAutoUpdateIcon(ctx, x, y, theme, isAutoUpd
   ctx.save();
   ctx.translate(x, y);
   ctx.fillStyle = isAutoUpdating ? '#7BACFF' : '#B4B4B4'; // ON
+
   ctx.font = "7px " + playerTimeText.fontFamily;
   ctx.fillText(text, 5, 14);
   ctx.restore();
@@ -3093,7 +3460,7 @@ var toUTCTime = function toUTCTime(dateTime) {
   return dateUtils.unix(dateTime) - getTimezoneOffsetS(dateTime);
 };
 var OpenPicker = function OpenPicker() {
-  return jsx(CalendarToday, {});
+  return /*#__PURE__*/jsx(CalendarToday, {});
 };
 var enabledAndSelectedButtonStyle = {
   borderWidth: '6px',
@@ -3193,14 +3560,14 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
     setIsUndefinedDateRange(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime);
     setIsDisabledRange(isDateRangeDisabled(localTimeValue));
   }, [dataStartTime, dataEndTime, localTimeValue, isDateRangeDisabled]);
-  return jsx(Paper, {
+  return /*#__PURE__*/jsx(Paper, {
     sx: {
       borderRadius: '0px',
       width: '240px'
     },
-    children: jsxs(Stack, {
+    children: /*#__PURE__*/jsxs(Stack, {
       "data-testid": "markerTimeSelector",
-      children: [jsx(Paper, {
+      children: [/*#__PURE__*/jsx(Paper, {
         sx: {
           height: '24px',
           align: 'center',
@@ -3209,7 +3576,7 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
           alignItems: 'center',
           borderRadius: '0px'
         },
-        children: jsx(Paper, {
+        children: /*#__PURE__*/jsx(Paper, {
           sx: {
             variant: 'subtitle',
             textAlign: 'center',
@@ -3226,9 +3593,9 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
           },
           children: t('timeslider-marker')
         })
-      }), jsx(LocalizationProvider, {
+      }), /*#__PURE__*/jsx(LocalizationProvider, {
         dateAdapter: AdapterDateFns,
-        children: jsx(DateTimePicker, {
+        children: /*#__PURE__*/jsx(DateTimePicker, {
           ampm: false,
           autoFocus: true,
           closeOnSelect: false,
@@ -3246,7 +3613,7 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
               variant: 'filled',
               InputProps: {
                 onKeyDownCapture: handleKeyDown,
-                endAdornment: jsx(InputAdornment, {
+                endAdornment: /*#__PURE__*/jsx(InputAdornment, {
                   position: "end",
                   sx: {
                     paddingTop: '16px'
@@ -3286,6 +3653,24 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
   });
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var style = {
   '&.MuiToggleButton-root': {
     color: '#B4B4B4',
@@ -3318,25 +3703,25 @@ var CalendarButton = function CalendarButton(_ref) {
     setOpen = _React$useState2[1];
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  return jsx(ClickAwayListener, {
+  return /*#__PURE__*/jsx(ClickAwayListener, {
     mouseEvent: "onMouseDown",
     onClickAway: function onClickAway() {
       return setOpen(false);
     },
-    children: jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       style: {
         position: 'absolute',
         top: '-2px',
         left: calendarIconPx + "px"
       },
-      children: [jsx(CustomTooltip, {
+      children: [/*#__PURE__*/jsx(CustomTooltip, {
         slotProps: {
           transition: {
             exit: false
           }
         },
         title: !open && t('timeslider-marker-placement'),
-        children: jsx(CustomToggleButton, {
+        children: /*#__PURE__*/jsx(CustomToggleButton, {
           onClick: function onClick() {
             return setOpen(!open);
           },
@@ -3346,13 +3731,13 @@ var CalendarButton = function CalendarButton(_ref) {
           selected: open,
           sx: style,
           variant: "flat",
-          children: jsx(CalendarToday, {
+          children: /*#__PURE__*/jsx(CalendarToday, {
             style: {
               marginRight: '0px'
             }
           })
         })
-      }), jsx(Popper, {
+      }), /*#__PURE__*/jsx(Popper, {
         anchorEl: anchorEl,
         "data-testid": "dateTimePickerPopOver",
         open: open,
@@ -3360,7 +3745,7 @@ var CalendarButton = function CalendarButton(_ref) {
         sx: {
           zIndex: 10
         },
-        children: jsx(MarkerTimeSelector, {
+        children: /*#__PURE__*/jsx(MarkerTimeSelector, {
           dataEndTime: dataEndTime,
           dataStartTime: dataStartTime,
           onCancel: function onCancel() {
@@ -3377,6 +3762,24 @@ var CalendarButton = function CalendarButton(_ref) {
   });
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+
 var getTimeBoxWidth = function getTimeBoxWidth(span) {
   var smallWidth = timeBoxGeom.smallWidth,
     largeWidth = timeBoxGeom.largeWidth,
@@ -3387,6 +3790,7 @@ var getTimeBoxWidth = function getTimeBoxWidth(span) {
 };
 var CALENDAR_ICON_LEFT_SPACING = 1;
 var DEFAULT_PX_TO_MOVE_TIMESLIDER_CENTER = 25; // When the timeslider centertime is reaching the end of the canvas, move the timeslider center a bit
+
 var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   var centerTime = _ref.centerTime,
     _ref$secondsPerPx = _ref.secondsPerPx,
@@ -3416,6 +3820,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     canvasWidth = _React$useState3[0],
     setCanvasWidth = _React$useState3[1];
   var isAnimating = linkedMapAnimationInfo == null ? void 0 : linkedMapAnimationInfo.isAnimating;
+
   // Move TimeBox back to view if it goes out of bounds
   useEffect(function () {
     if (!(onSetCenterTime && canvasWidth && !mouseDownInTimeBox)) {
@@ -3467,19 +3872,20 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
       document.removeEventListener('mouseup', handleMouseUp);
     };
   }, [canvasWidth, centerTime, mouseDownInTimeBox, secondsPerPx, setUnfilteredSelectedTime, unfilteredSelectedTime]);
+
   // Display unfilteredSelectedTime (already snapped to available timestep)
   var displayTime = unfilteredSelectedTime;
   var timePx = timestampToPixel(displayTime, centerTime, canvasWidth, secondsPerPx);
   var currentTimeBoxWidth = getTimeBoxWidth(span);
   var calendarIconPx = timePx - currentTimeBoxWidth / 2 + CALENDAR_ICON_LEFT_SPACING;
-  return jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$1, {
     className: "timeSliderTimeBox",
     "data-testid": "timeSliderTimeBox",
     sx: {
       height: '24px',
       cursor: cursorStyle
     },
-    children: [jsx(CanvasComponent, {
+    children: [/*#__PURE__*/jsx(CanvasComponent, {
       onMouseDown: function onMouseDown$1(x, y, width) {
         if (!unfilteredSelectedTime) {
           return;
@@ -3498,7 +3904,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
         renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, unfilteredSelectedTime, secondsPerPx, span, isAutoUpdating);
       },
       ref: node
-    }), jsx(CalendarButton, {
+    }), /*#__PURE__*/jsx(CalendarButton, {
       calendarIconPx: calendarIconPx,
       dataEndTime: dataEndTime,
       dataStartTime: dataStartTime,
@@ -3515,10 +3921,28 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   });
 };
 
+/* *
+ * 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 TimesliderI18nProvider = function TimesliderI18nProvider(_ref) {
   var children = _ref.children;
   initTimesliderI18n();
-  return jsx(I18nextProvider, {
+  return /*#__PURE__*/jsx(I18nextProvider, {
     i18n: i18n,
     children: children
   });
@@ -3528,8 +3952,8 @@ var DemoWrapper = function DemoWrapper(_ref2) {
     _ref2$theme = _ref2.theme,
     theme = _ref2$theme === void 0 ? 'light' : _ref2$theme;
   var themeToApply = theme === 'light' ? lightTheme : darkTheme;
-  return jsx(TimesliderI18nProvider, {
-    children: jsx(ThemeWrapper, {
+  return /*#__PURE__*/jsx(TimesliderI18nProvider, {
+    children: /*#__PURE__*/jsx(ThemeWrapper, {
       theme: themeToApply,
       children: children
     })