@opengeoweb/theme 9.36.0 → 10.0.0

package/index.esm.js

@@ -1,8 +1,12 @@
+import 'msw';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, GlobalStyles, StyledEngineProvider } from '@mui/material';
+import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, GlobalStyles, StyledEngineProvider, useTheme } from '@mui/material';
 import * as React from 'react';
+import React__default from 'react';
 import 'i18next';
 import 'react-i18next';
+import { range } from 'lodash';
+import styled from '@emotion/styled';
 
 function _objectDestructuringEmpty(t) {
   if (null == t) throw new TypeError("Cannot destructure " + t);
@@ -2046,11 +2050,11 @@ var createShadows = function createShadows(elevations) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var focusButtonStyle$1 = {
+var focusButtonStyle$2 = {
   outline: 'solid 2px #419cfe'
 };
 // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
-var colors$1 = {
+var colors$2 = {
   background: {
     surface: '#FFFFFF',
     surfaceApp: '#F5F5F5',
@@ -2082,7 +2086,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     secondary: {
       "default": {
@@ -2106,7 +2110,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     tertiary: {
       "default": {
@@ -2134,7 +2138,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     flat: {
       "default": {
@@ -2162,7 +2166,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     tool: {
       "default": {
@@ -2190,7 +2194,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     boxed: {
       "default": {
@@ -2218,7 +2222,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     icon: {
       "default": {
@@ -2246,7 +2250,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     }
   },
   iconButtons: {
@@ -2276,7 +2280,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     tool: {
       "default": {
@@ -2304,7 +2308,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     },
     boxed: {
       "default": {
@@ -2332,7 +2336,7 @@ var colors$1 = {
         color: '#626262',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle$1
+      focus: focusButtonStyle$2
     }
   },
   typographyAndIcons: {
@@ -2694,7 +2698,7 @@ var colors$1 = {
   }
 };
 // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
-var elevations$1 = {
+var elevations$2 = {
   elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
   elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
   elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
@@ -2735,9 +2739,9 @@ var createTheme = function createTheme(_ref) {
   var _ref$paletteType = _ref.paletteType,
     paletteType = _ref$paletteType === void 0 ? 'light' : _ref$paletteType,
     _ref$geowebColors = _ref.geowebColors,
-    defaultGeowebColors = _ref$geowebColors === void 0 ? colors$1 : _ref$geowebColors,
+    defaultGeowebColors = _ref$geowebColors === void 0 ? colors$2 : _ref$geowebColors,
     _ref$elevations = _ref.elevations,
-    defaultShadows = _ref$elevations === void 0 ? elevations$1 : _ref$elevations;
+    defaultShadows = _ref$elevations === void 0 ? elevations$2 : _ref$elevations;
   var geowebColors = parseColors(defaultGeowebColors);
   var shadows = createShadows(defaultShadows);
   return createTheme$1({
@@ -3355,11 +3359,11 @@ var createTheme = function createTheme(_ref) {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var focusButtonStyle = {
+var focusButtonStyle$1 = {
   outline: 'solid 2px #419cfe'
 };
 // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
-var colors = {
+var colors$1 = {
   background: {
     surface: '#303030',
     surfaceApp: '#2B2B2B',
@@ -3391,7 +3395,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     secondary: {
       "default": {
@@ -3415,7 +3419,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     tertiary: {
       "default": {
@@ -3443,7 +3447,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     flat: {
       "default": {
@@ -3471,7 +3475,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     tool: {
       "default": {
@@ -3499,7 +3503,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     boxed: {
       "default": {
@@ -3527,7 +3531,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     icon: {
       "default": {
@@ -3555,7 +3559,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     }
   },
   iconButtons: {
@@ -3585,7 +3589,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     tool: {
       "default": {
@@ -3613,7 +3617,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     },
     boxed: {
       "default": {
@@ -3641,7 +3645,7 @@ var colors = {
         color: '#B4B4B4',
         borderColor: 'transparent'
       },
-      focus: focusButtonStyle
+      focus: focusButtonStyle$1
     }
   },
   typographyAndIcons: {
@@ -4004,7 +4008,7 @@ var colors = {
   }
 };
 // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
-var elevations = {
+var elevations$1 = {
   elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
   elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
   elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
@@ -4034,175 +4038,909 @@ var elevations = {
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var lightTheme = createTheme({
-  paletteType: 'light',
-  geowebColors: colors$1,
-  elevations: elevations$1
-});
-var darkTheme = createTheme({
-  paletteType: 'dark',
-  geowebColors: colors,
-  elevations: elevations
-});
-
-/* *
- * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var ThemeTypes;
-(function (ThemeTypes) {
-  ThemeTypes["DARK_THEME"] = "darkTheme";
-  ThemeTypes["LIGHT_THEME"] = "lightTheme";
-})(ThemeTypes || (ThemeTypes = {}));
-
-var ThemeContext = /*#__PURE__*/React.createContext({
-  toggleTheme: undefined,
-  isDark: undefined
-});
-var ThemeProvider = function ThemeProvider(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    defaultThemeName = _ref.defaultThemeName,
-    _ref$disableCssBaseli = _ref.disableCssBaseline,
-    disableCssBaseline = _ref$disableCssBaseli === void 0 ? false : _ref$disableCssBaseli;
-  var defaultTheme = defaultThemeName === ThemeTypes.DARK_THEME ? darkTheme : lightTheme;
-  var _React$useState = React.useState(defaultTheme === darkTheme),
-    isDark = _React$useState[0],
-    setDark = _React$useState[1];
-  var configuredTheme = isDark ? darkTheme : lightTheme;
-  var currentTheme = React.useMemo(function () {
-    return theme || configuredTheme;
-  }, [configuredTheme, theme]);
-  var toggleTheme = React.useCallback(function () {
-    return setDark(!isDark);
-  }, [isDark]);
-  var contextValue = React.useMemo(function () {
-    return {
-      toggleTheme: toggleTheme,
-      isDark: isDark
-    };
-  }, [toggleTheme, isDark]);
-  return jsx(ThemeContext.Provider, {
-    value: contextValue,
-    children: jsxs(ThemeProvider$1, {
-      theme: currentTheme,
-      children: [!disableCssBaseline && jsx(CssBaseline, {}), jsx(GlobalStyles, {
-        styles: {
-          '@keyframes mui-auto-fill': {
-            from: {
-              display: 'block'
-            }
-          },
-          '@keyframes mui-auto-fill-cancel': {
-            from: {
-              display: 'block'
-            }
-          }
-        }
-      }), children]
-    })
-  });
-};
-var useThemeContext = function useThemeContext() {
-  return React.useContext(ThemeContext);
-};
-// Wrapper for storybook stories. Will include later an additional wrapper after upgrade to MUI5
-var ThemeWrapper = function ThemeWrapper(_ref2) {
-  var children = _ref2.children,
-    theme = _ref2.theme,
-    defaultThemeName = _ref2.defaultThemeName,
-    _ref2$disableCssBasel = _ref2.disableCssBaseline,
-    disableCssBaseline = _ref2$disableCssBasel === void 0 ? false : _ref2$disableCssBasel;
-  return jsx(StyledEngineProvider, {
-    injectFirst: true,
-    children: jsx(ThemeProvider, {
-      theme: theme,
-      defaultThemeName: defaultThemeName,
-      disableCssBaseline: disableCssBaseline,
-      children: children
-    })
-  });
+var focusButtonStyle = {
+  outline: 'solid 2px #FFFFFF'
 };
-
-/* *
- * 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 EChartsDarkTheme = {
-  backgroundColor: '#393939',
-  textStyle: {
-    color: '#ffffff',
-    fontSize: '10px',
-    fontWeight: '400'
+// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
+var colors = {
+  background: {
+    surface: '#9e1f1e',
+    surfaceApp: '#740c16',
+    surfaceBrowser: '#5d111b'
   },
-  title: {
-    textStyle: {
-      color: '#ffffff'
-    },
-    subtextStyle: {
-      color: '#ffffff'
-    }
+  brand: {
+    brand: '#5d111b'
   },
-  line: {
-    itemStyle: {
-      borderWidth: 1
+  buttons: {
+    primary: {
+      "default": {
+        fill: '#04501e',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: '#9e1f1e'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
     },
-    lineStyle: {
-      width: 2
+    secondary: {
+      "default": {
+        fill: '#04501e',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: '#transparent'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {},
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
     },
-    symbolSize: 4,
-    symbol: 'circle',
-    smooth: false
-  },
-  bar: {
-    itemStyle: {
-      barBorderWidth: 0,
-      barBorderColor: '#ccc'
-    }
-  },
-  scatter: {
-    itemStyle: {
-      borderWidth: 0,
-      borderColor: '#ccc'
-    }
-  },
-  categoryAxis: {
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: '#979797'
-      }
+    tertiary: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#FFFFFF',
+        borderColor: '#FFFFFF'
+      },
+      activeMouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: '#FFFFFF'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
     },
-    axisTick: {
-      show: true,
-      lineStyle: {
-        color: '#979797'
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#45556F',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#45556F',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    tool: {
+      "default": {
+        fill: '#04501e',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    icon: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#FFFFFF',
+        color: '#033E1A',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    }
+  },
+  iconButtons: {
+    flat: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#BBD4FF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#033E1A',
+        color: '#BBD4FF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    tool: {
+      "default": {
+        fill: '#393939',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    },
+    boxed: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      mouseOver: {
+        fill: '#033E1A',
+        color: '#F8F9F9',
+        borderColor: '#F8F9F9'
+      },
+      active: {
+        fill: '#05662a',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: '#033E1A',
+        color: '#FFFFFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      },
+      focus: focusButtonStyle
+    }
+  },
+  typographyAndIcons: {
+    text: '#FFFFFF',
+    icon: '#FFFFFF',
+    buttonIcon: '#FFFFFF',
+    iconLinkActive: '#05662a',
+    iconLinkDisabled: '#5E5E5E',
+    textLinkActive: '#05662a',
+    buttonIconTertiaryFlat: '#C5C5C5',
+    inactiveText: '#b4b4b4',
+    iconWarning: '#ffa800'
+  },
+  textInputField: {
+    "default": {
+      fill: '#352020',
+      opacity: 1
+    },
+    mouseOver: {
+      fill: '#033E1A',
+      opacity: 1
+    },
+    active: {
+      fill: '#909090',
+      opacity: 0.2
+    },
+    disabled: {
+      color: '#000000',
+      opacity: 0
+    },
+    label: {
+      fill: '#FFFFFF',
+      opacity: 0.7
+    },
+    error: {
+      fill: '#532323',
+      opacity: 1
+    },
+    errorMouseOver: {
+      fill: '#633838',
+      opacity: 1
+    }
+  },
+  menuItem: {
+    mouseOver: '#033e1a',
+    selected: '#05662a',
+    selectedMouseOver: '#033e1a'
+  },
+  tab: {
+    mouseOver: {
+      fill: '#000000',
+      opacity: 0.17
+    }
+  },
+  greys: {
+    accessible: '#B4B4B4',
+    accessibleLight: '#6F6F6F'
+  },
+  cards: {
+    cardContainer: '#311c1c',
+    cardContainerBorder: '#404040',
+    cardContainerMouseOver: '#033E1A',
+    cardContainerDisabled: '#252525',
+    cardContainerDisabledBorder: '#363636',
+    cardContainerDisabledMouseOver: '#45556F'
+  },
+  backdrops: {
+    black: {
+      fill: '#000000',
+      opacity: 0.5
+    },
+    white: {
+      fill: '#FFFFFF',
+      opacity: 0.24
+    }
+  },
+  workspace: {
+    activeWindow: '#05662a',
+    inactiveWindow: '#04501e',
+    tabButtonHover: '#033E1A'
+  },
+  timeSlider: {
+    // player
+    playerNeedleTimeTop: {
+      fill: '#E3004F',
+      opacity: 100
+    },
+    playerNeedleTime: {
+      fill: '#FFD523',
+      opacity: 0.75
+    },
+    playerNeedlePlayerTop: {
+      fill: '#051039',
+      opacity: 100
+    },
+    playerNeedlePlayer: {
+      fill: '#67F0FF',
+      opacity: 0.75
+    },
+    playerTimeMarkers: {
+      fill: '#051039'
+    },
+    playerTimeText: {
+      color: '#FFFFFF',
+      fontFamily: 'Roboto',
+      fontSize: 14
+    },
+    // timeline
+    timelineIndicator: {
+      fill: '#A2A2A2'
+    },
+    timelineText: {
+      fontSize: 12,
+      color: '#FFFFFF',
+      fontFamily: 'Roboto'
+    },
+    timelineTimeScale: {
+      fill: '#FFFFFF'
+    },
+    timelineNightTime: {
+      fill: '#051038',
+      opacity: 0.67
+    },
+    timelineTimelineSurface: {
+      fill: '#044d1e'
+    },
+    timelineMonthChangeDash: {
+      fill: '#A2A2A2',
+      opacity: 0.5
+    },
+    timelineSelectionBackground: {
+      fill: '#FFFFFF',
+      opacity: 0.15
+    },
+    timelineSelectionOutline: {
+      fill: '#F0FF00',
+      opacity: 0.4
+    },
+    // time scale
+    timeScalePointer: {
+      fill: '#F8F9F9'
+    },
+    timeScaleHorizontalScale: {
+      fill: '#000000',
+      opacity: 0.8
+    },
+    timeScaleTimeIndicators: {
+      fill: '#A2A2A2'
+    },
+    timeScaleTimeIndicatorsActive: {
+      fill: '#FFFFFF'
+    },
+    timeScaleShadowButtonScale: {
+      filter: 'drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.24)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.40))'
+    },
+    // legend
+    ledgendObservedBackground: {
+      fill: '#d54847'
+    },
+    legendForecastBackground: {
+      fill: '#056628'
+    },
+    legendNoDataBackground: {
+      fill: '#5d111b',
+      opacity: 0.95
+    }
+  },
+  timeSliderLite: {
+    selected: {
+      backgroundColor: '#EEF4FB'
+    },
+    needle: {
+      stroke: '#ff0829'
+    },
+    needleDefault: {
+      stroke: '#3BA587'
+    },
+    needleShadow: {
+      stroke: '#E7F0FA'
+    },
+    needleLabel: {
+      backgroundColor: '#212121',
+      borderColor: '#9e9e9e',
+      color: '#FFFFFF'
+    },
+    timeline: {
+      fill: '#FFFFFF',
+      stroke: '#FFFFFF'
+    },
+    timelineBackground: {
+      fill: '#2959E0',
+      color: '#FFFFFF'
+    },
+    timelineBackgroundAlternative: {
+      fill: '#4871E5',
+      color: '#FFFFFF'
+    },
+    timelineBackgroundDisabled: {
+      fill: '#767E93',
+      color: '#FFFFFF'
+    },
+    timelineBackgroundDisabledAlternative: {
+      fill: '#8A91A3',
+      color: '#FFFFFF'
+    },
+    timelineBackgroundObserved: {
+      fill: '#8A91A3',
+      color: '#FFFFFF'
+    },
+    timelineBackgroundObservedAlternative: {
+      fill: '#767E93',
+      color: '#FFFFFF'
+    }
+  },
+  customSlider: {
+    rail: '#068032',
+    railDisabled: '#5E5E5E',
+    track: '#186DFF',
+    trackDisabled: '#5E5E5E',
+    thumb: '#F8F9F9',
+    thumbDisabled: '#5E5E5E',
+    mark: '#FFFFFF',
+    markDisabled: '#044d1e'
+  },
+  customSwitch: {
+    thumb: '#F8F9F9',
+    thumbDisabled: '#F5F5F5',
+    track: '#BDBDBD',
+    trackActive: '#068032'
+  },
+  syncGroups: {
+    drawerOpen: {
+      fill: '#232323'
+    }
+  },
+  layerManager: {
+    headerRowText: {
+      color: '#FFFFFF',
+      opacity: 0.67,
+      fontSize: 12
+    },
+    tableRowDefaultText: {
+      color: '#FFFFFF',
+      opacity: 0.87,
+      fontSize: 12
+    },
+    tableRowDefaultCardContainer: {
+      fill: '#352020',
+      border: '1px solid #9e1f1e',
+      borderColor: '#9e1f1e'
+    },
+    tableRowDisabledText: {
+      color: '#909090',
+      opacity: 0.87,
+      fontSize: 12
+    },
+    tableRowDisabledCardContainer: {
+      fill: '#06402B',
+      border: '1px solid #9e1f1e',
+      borderColor: '#9e1f1e'
+    },
+    dragHandleHover: {
+      backgroundColor: 'transparent'
+    },
+    root: {},
+    opacitySelect: {
+      root: {},
+      button: {},
+      popper: {}
+    },
+    baseLayerRow: {
+      root: {}
+    }
+  },
+  logo: {
+    image: 'assets/themes/xmas2024/app_icon.png'
+  },
+  tooltips: {
+    tooltipContainer: {
+      fill: '#232323',
+      opacity: 1
+    },
+    tooltipText: {
+      color: '#FFFFFF'
+    },
+    tooltipSelect: {
+      select: {},
+      menu: {}
+    }
+  },
+  captions: {
+    captionStatus: {
+      color: '#FFFFFF',
+      opacity: 0.67
+    },
+    captionInformation: {
+      color: '#FFFFFF',
+      opacity: 1
+    },
+    captionError: {
+      color: '#FF8F8F',
+      opacity: 1
+    },
+    captionErrorBackground: {
+      color: '#C00000',
+      opacity: 0.25
+    },
+    captionDisabled: {
+      color: '#B0B0B0',
+      opacity: 1
+    }
+  },
+  functional: {
+    success: '#72BB23',
+    successOutline: {
+      fill: 'rgba(114, 187, 35, 0.25)',
+      border: '1px solid #72BB23',
+      borderColor: '#72BB23'
+    },
+    error: '#C00000',
+    errorOutline: {
+      fill: 'rgba(192, 0, 0, 0.25)',
+      border: '1px solid #C00000',
+      borderColor: '#C00000'
+    },
+    warning: '#FFA800',
+    warningOutline: {
+      fill: 'rgba(255, 168, 0, 0.25)',
+      border: '1px solid #FFA800',
+      borderColor: '#FFA800'
+    },
+    warningHighlight: {
+      fill: '#FFA800',
+      opacity: 0.2
+    },
+    notification: '#186DFF',
+    notificationOutline: {
+      fill: 'rgba(24, 109, 255, 0.25)',
+      border: '1px solid #186DFF',
+      borderColor: '#186DFF'
+    },
+    summary: '#9595FF',
+    summaryOutline: {
+      fill: 'rgba(131, 131, 242, 0.25)',
+      border: '1px solid #8383F2',
+      borderColor: '#8383F2'
+    },
+    disabled: '#9B9FB0',
+    disabledOutline: {
+      fill: 'rgba(155, 159, 176, 0.25)',
+      border: '1px solid #9B9FB0',
+      borderColor: '#9B9FB0'
+    }
+  },
+  snackbar: {
+    background: '#051039',
+    text: '#FFFFFF',
+    action: '#FFFFFF',
+    actionHover: {
+      fill: '#FFFFFF',
+      opacity: 0.2
+    }
+  },
+  festoonOverlay: {
+    position: 'absolute',
+    top: '-70px',
+    width: '100%',
+    height: '100%',
+    backgroundImage: 'url("assets/themes/xmas2024/xmasRibbon.png")',
+    backgroundRepeat: 'repeat-x',
+    backgroundSize: '460px',
+    pointerEvents: 'none',
+    zIndex: 1000
+  },
+  festoonContainer: {
+    width: '100%',
+    height: '20px',
+    position: 'relative',
+    paddingTop: '50px',
+    backgroundColor: '#FFFFFF'
+  },
+  festoonBackdrop: {
+    backgroundImage: 'linear-gradient(to bottom, rgba(20, 20, 20, 0.85), rgba(255, 150, 20, 0.2)), url("assets/themes/xmas2024/santa100th.png")',
+    backgroundSize: '100%',
+    backgroundColor: 'rgba(0, 35, 65, 0.95)',
+    backgroundRepeat: 'no-repeat'
+  }
+};
+// https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
+var elevations = {
+  elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
+  elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+  elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
+  elevation_04: '0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
+  elevation_06: '0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 6px 10px 0 rgba(0, 0, 0, 0.14)',
+  elevation_08: '0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.14)',
+  elevation_09: '0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 9px 12px 1px rgba(0, 0, 0, 0.14)',
+  elevation_12: '0 7px 8px 0 rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14)',
+  elevation_16: '0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)',
+  elevation_24: '0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14)'
+};
+
+/* *
+ * 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 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var ThemeTypes;
+(function (ThemeTypes) {
+  ThemeTypes["DARK_THEME"] = "darkTheme";
+  ThemeTypes["LIGHT_THEME"] = "lightTheme";
+  ThemeTypes["XMAS2024_THEME"] = "xmas2024Theme";
+})(ThemeTypes || (ThemeTypes = {}));
+
+/* *
+ * 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 getThemeByName = function getThemeByName(themeName) {
+  switch (themeName) {
+    case ThemeTypes.DARK_THEME:
+      return namedDarkTheme;
+    case ThemeTypes.LIGHT_THEME:
+      return namedLightTheme;
+    case ThemeTypes.XMAS2024_THEME:
+      return namedXmas2024Theme;
+    default:
+      return namedLightTheme;
+  }
+};
+var lightTheme = createTheme({
+  paletteType: 'light',
+  geowebColors: colors$2,
+  elevations: elevations$2
+});
+var darkTheme = createTheme({
+  paletteType: 'dark',
+  geowebColors: colors$1,
+  elevations: elevations$1
+});
+var xmas2024Theme = createTheme({
+  paletteType: 'dark',
+  geowebColors: colors,
+  elevations: elevations
+});
+var namedLightTheme = {
+  name: ThemeTypes.LIGHT_THEME,
+  theme: lightTheme
+};
+var namedDarkTheme = {
+  name: ThemeTypes.DARK_THEME,
+  theme: darkTheme
+};
+var namedXmas2024Theme = {
+  name: ThemeTypes.XMAS2024_THEME,
+  theme: xmas2024Theme
+};
+
+var ThemeContext = /*#__PURE__*/React.createContext({
+  setThemeName: undefined,
+  namedTheme: undefined
+});
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+    theme = _ref.theme,
+    defaultThemeName = _ref.defaultThemeName,
+    _ref$disableCssBaseli = _ref.disableCssBaseline,
+    disableCssBaseline = _ref$disableCssBaseli === void 0 ? false : _ref$disableCssBaseli;
+  var _React$useState = React.useState(getThemeByName(defaultThemeName || ThemeTypes.LIGHT_THEME)),
+    configuredTheme = _React$useState[0],
+    setConfiguredTheme = _React$useState[1];
+  var currentTheme = React.useMemo(function () {
+    return theme || configuredTheme.theme;
+  }, [configuredTheme, theme]);
+  var setThemeName = React.useCallback(function (themeName) {
+    setConfiguredTheme(getThemeByName(themeName));
+  }, []);
+  var contextValue = React.useMemo(function () {
+    return {
+      setThemeName: setThemeName,
+      namedTheme: configuredTheme
+    };
+  }, [configuredTheme, setThemeName]);
+  return jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: jsxs(ThemeProvider$1, {
+      theme: currentTheme,
+      children: [!disableCssBaseline && jsx(CssBaseline, {}), jsx(GlobalStyles, {
+        styles: {
+          '@keyframes mui-auto-fill': {
+            from: {
+              display: 'block'
+            }
+          },
+          '@keyframes mui-auto-fill-cancel': {
+            from: {
+              display: 'block'
+            }
+          }
+        }
+      }), children]
+    })
+  });
+};
+var useThemeContext = function useThemeContext() {
+  return React.useContext(ThemeContext);
+};
+// Wrapper for storybook stories. Will include later an additional wrapper after upgrade to MUI5
+var ThemeWrapper = function ThemeWrapper(_ref2) {
+  var children = _ref2.children,
+    theme = _ref2.theme,
+    defaultThemeName = _ref2.defaultThemeName,
+    _ref2$disableCssBasel = _ref2.disableCssBaseline,
+    disableCssBaseline = _ref2$disableCssBasel === void 0 ? false : _ref2$disableCssBasel;
+  return jsx(StyledEngineProvider, {
+    injectFirst: true,
+    children: jsx(ThemeProvider, {
+      theme: theme,
+      defaultThemeName: defaultThemeName,
+      disableCssBaseline: disableCssBaseline,
+      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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var EChartsDarkTheme = {
+  backgroundColor: '#393939',
+  textStyle: {
+    color: '#ffffff',
+    fontSize: '10px',
+    fontWeight: '400'
+  },
+  title: {
+    textStyle: {
+      color: '#ffffff'
+    },
+    subtextStyle: {
+      color: '#ffffff'
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: 'circle',
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc'
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc'
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#979797'
       }
     },
     axisLabel: {
@@ -4685,4 +5423,100 @@ var EChartsLightTheme = {
  * */
 var THEME_NAMESPACE = 'theme';
 
-export { Add, Admin, Animation, ArrowDown, ArrowDownCompact, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, ArrowUpCompact, AutoUpdateActive, AutoUpdateInActive, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CloudIdle, CloudLoading, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, ColumnCollapse, ColumnCollapsed, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, EChartsDarkTheme, EChartsLightTheme, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Expire, Export, FastForward, Filter, FlagBritain, FlagFinland, FlagNetherlands, FlagNorway, Fog, FreezingPrecipitation, FunnelCloud, GeoWebLogo, HamburgerMenu, Haze, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, ModerateAircraftIcing, ModerateTurbulence, MyLocation, None, Notifications, Now, Options, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, RadioactiveMaterials, Rain, Remove, Resize, SandStorm, Search, SevereAircraftIcing, SevereTurbulence, SevereWaves, Share, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, THEME_NAMESPACE, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThumbsUp, Thunderstorm, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, VulcanicEruption, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$1 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$1 as elevationsLight, lightTheme, parseColors, themeTranslations, useThemeContext };
+var Snowflake = styled('div')(function () {
+  return {
+    '--fall-duration': Math.random() * 10 + 10 + "s",
+    '--fall-delay': "-" + Math.random() * 10 + "s",
+    '--sway-delay': "-" + Math.random() * 5 + "s",
+    left: Math.random() * 100 + "%"
+  };
+});
+var getSnowflakes = function getSnowflakes() {
+  return range(100).map(function (_, index) {
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      jsx(Snowflake, {
+        className: "snowflake",
+        children: "\u2744"
+      }, index)
+    );
+  });
+};
+// Overlay style
+var useOverlayStyle = function useOverlayStyle() {
+  var _React$useState = React__default.useState({}),
+    overlayStyle = _React$useState[0],
+    setOverlayStyle = _React$useState[1];
+  var theme = useTheme();
+  var _useThemeContext = useThemeContext(),
+    namedTheme = _useThemeContext.namedTheme;
+  React__default.useEffect(function () {
+    var isXmasStyle = !!theme.palette.geowebColors.festoonOverlay && (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME;
+    setOverlayStyle(isXmasStyle ? theme.palette.geowebColors.festoonOverlay : {});
+  }, [theme, namedTheme]);
+  return overlayStyle;
+};
+var OverlayStyle = function OverlayStyle() {
+  var defaultStyle = {};
+  var style = useOverlayStyle();
+  return style === {} ? defaultStyle : style;
+};
+// Container  style
+var useContainerStyle = function useContainerStyle() {
+  var _React$useState2 = React__default.useState({}),
+    containerStyle = _React$useState2[0],
+    setContainerStyle = _React$useState2[1];
+  var theme = useTheme();
+  var _useThemeContext2 = useThemeContext(),
+    namedTheme = _useThemeContext2.namedTheme;
+  React__default.useEffect(function () {
+    var isXmasStyle = !!theme.palette.geowebColors.festoonContainer && (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME;
+    setContainerStyle(isXmasStyle ? theme.palette.geowebColors.festoonContainer : {});
+  }, [theme, namedTheme]);
+  return containerStyle;
+};
+var ContainerStyle = function ContainerStyle() {
+  var defaultStyle = {};
+  var style = useContainerStyle();
+  return style === {} ? defaultStyle : style;
+};
+// Backdrop style
+var useBackdropStyle = function useBackdropStyle() {
+  var _React$useState3 = React__default.useState({}),
+    backdropStyle = _React$useState3[0],
+    setBackdropStyle = _React$useState3[1];
+  var theme = useTheme();
+  var _useThemeContext3 = useThemeContext(),
+    namedTheme = _useThemeContext3.namedTheme;
+  React__default.useEffect(function () {
+    var isXmasThemeStyle = !!theme.palette.geowebColors.festoonBackdrop && (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME;
+    setBackdropStyle(isXmasThemeStyle ? theme.palette.geowebColors.festoonBackdrop : {});
+  }, [theme, namedTheme]);
+  return backdropStyle;
+};
+var BackdropStyle = function BackdropStyle() {
+  var defaultStyle = {};
+  var style = useBackdropStyle();
+  return style === {} ? defaultStyle : style;
+};
+// Backdrop element
+var useBackdropElement = function useBackdropElement() {
+  var _React$useState4 = React__default.useState(null),
+    backdropElement = _React$useState4[0],
+    setBackdropElement = _React$useState4[1];
+  var theme = useTheme();
+  var _useThemeContext4 = useThemeContext(),
+    namedTheme = _useThemeContext4.namedTheme;
+  React__default.useEffect(function () {
+    var isXmasThemeElem = !!theme.palette.geowebColors.festoonBackdrop && (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME;
+    setBackdropElement(isXmasThemeElem ? getSnowflakes() : null);
+  }, [theme, namedTheme]);
+  return backdropElement;
+};
+var BackdropElement = function BackdropElement() {
+  var defaultElem = null;
+  var elem = useBackdropElement();
+  return elem === null ? defaultElem : elem;
+};
+
+export { Add, Admin, Animation, ArrowDown, ArrowDownCompact, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, ArrowUpCompact, AutoUpdateActive, AutoUpdateInActive, BackdropElement, BackdropStyle, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CloudIdle, CloudLoading, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, ColumnCollapse, ColumnCollapsed, ContainerStyle, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, EChartsDarkTheme, EChartsLightTheme, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Expire, Export, FastForward, Filter, FlagBritain, FlagFinland, FlagNetherlands, FlagNorway, Fog, FreezingPrecipitation, FunnelCloud, GeoWebLogo, HamburgerMenu, Haze, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, ModerateAircraftIcing, ModerateTurbulence, MyLocation, None, Notifications, Now, Options, OverlayStyle, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, RadioactiveMaterials, Rain, Remove, Resize, SandStorm, Search, SevereAircraftIcing, SevereTurbulence, SevereWaves, Share, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, THEME_NAMESPACE, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThumbsUp, Thunderstorm, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, VulcanicEruption, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$2 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$2 as elevationsLight, getThemeByName, lightTheme, namedDarkTheme, namedLightTheme, namedXmas2024Theme, parseColors, themeTranslations, useThemeContext, xmas2024Theme };