@opengeoweb/theme 4.2.0 → 4.4.0

package/index.esm.js

@@ -330,6 +330,13 @@ var AutoUpdateInActive = function AutoUpdateInActive(props) {
     y: 17.3
   }, "AUTO"))));
 };
+var Now = function Now(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.85,15.55 L5.89,15.55 L7.39013512,18.2040258 L7.39,15.55 L8.42,15.55 L8.42,19.82 L7.39,19.815 L5.89,17.19 L5.89,19.82 L4.85,19.815 L4.85,15.55 Z M11.275,15.49 C12.55,15.49 13.14,16.4749736 13.14,17.69 C13.14,18.9050264 12.55,19.89 11.275,19.89 C10,19.89 9.4,18.9050264 9.4,17.69 C9.4,16.4749736 10,15.49 11.275,15.49 Z M11.265,16.3 C10.63,16.3 10.46,16.8781414 10.46,17.69 C10.46,18.5018586 10.63,19.08 11.265,19.08 C11.9,19.08 12.09,18.5018586 12.09,17.69 C12.09,16.8781414 11.9,16.3 11.265,16.3 Z M13.85,15.55 L14.88,15.55 L15.37,18.23 L15.96,15.55 L16.83,15.55 L17.42,18.23 L17.91,15.55 L18.93,15.55 L18.03,19.82 L16.96,19.82 L16.39,17.38 L15.83,19.82 L14.76,19.82 L13.85,15.55 Z M12,0 C16.7,0 18.85,4.12 18.85,6.82 C18.85,9.52 17.0960097,13.63 12,13.63 C9.06797949,13.63 7.24456537,12.2694474 6.22334015,10.5996971 C6.10797504,10.4110698 6.00732732,9.72319365 6.59320378,9.33888177 C7.17908025,8.95456988 7.71708662,9.39022217 7.84387287,9.58248667 C8.70143045,10.8829264 10.1633005,11.82 12,11.82 C15,11.82 17,9.32 17,6.82 C17,4.32 15,1.81 12,1.81 C10.5492584,1.81 9.33236686,2.39696387 8.46241089,3.28591644 L9.474995,3.73670576 C9.86718007,3.9113178 9.95685384,4.26087798 9.84288406,4.51685828 C9.78589918,4.64484843 9.68395359,4.74990886 9.54141806,4.83107363 L6.67469458,6.47927087 C6.45916744,6.60267712 6.21814322,6.61960842 6.01095111,6.52736055 C5.80211462,6.43438056 5.65295882,6.24275928 5.60209611,6.00074862 L4.90755008,2.76794268 C4.87285304,2.60689825 4.88471829,2.46076082 4.94098185,2.3343908 C5.05495162,2.0784105 5.37472892,1.91114968 5.7660918,2.08539566 L6.7215416,2.51032096 C7.8443708,1.0870475 9.58579853,0 12,0 Z"
+  })));
+};
 var Pause = function Pause(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
     d: "M8.579 4c.865 0 1.565.7 1.565 1.564v12.87c0 .866-.7 1.566-1.565 1.566-.863 0-1.565-.7-1.565-1.565v-4.87H7v-3.13h.014V5.564C7.014 4.7 7.716 4 8.579 4zm6.915 0c.865 0 1.565.7 1.565 1.564v12.871c0 .865-.7 1.565-1.565 1.565-.863 0-1.565-.7-1.565-1.565v-4.87h-.014v-3.13h.014v-4.87C13.93 4.7 14.631 4 15.494 4z"
@@ -340,6 +347,18 @@ var Play = function Play(props) {
     d: "M15.18 12.688l-3.909 2.81c-.161.115-.325.175-.486.175-.303 0-.629-.234-.629-.748v-5.85c0-.514.325-.747.63-.747.16 0 .324.059.485.174l3.91 2.81c.24.172.378.423.378.688 0 .265-.137.517-.379.688M12 4c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8"
   }));
 };
+var StepBackward = function StepBackward(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.5794386,6.68811254 L8.12440829,1.33228882 C7.81918795,1.11107407 7.50556704,1 7.19941329,1 C6.62070805,1 6,1.44616308 6,2.42342823 L6,13.5775052 C6,14.5547703 6.62164144,15 7.19941329,15 C7.50556704,15 7.81918795,14.8889259 8.12720848,14.6686446 L15.5785052,9.31282085 C16.0377358,8.98426562 16.2990866,8.50636709 16.2990866,7.9995333 C16.2990866,7.4945663 16.0368025,7.01760117 15.5794386,6.68811254 M2,0 C3.05,0 3.9177686,0.820041322 3.99448723,1.85130541 L4,2 L4,14 C4,15.1 3.1,16 2,16 C0.9,16 0,15.1 0,14 L0,2 C0,0.9 0.9,0 2,0 Z",
+    transform: "translate(4.000000, 4.000000) translate(8.149543, 8.000000) scale(-1, 1) translate(-8.149543, -8.000000) "
+  }));
+};
+var StepForward = function StepForward(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.5794386,6.68811254 L8.12440829,1.33228882 C7.81918795,1.11107407 7.50556704,1 7.19941329,1 C6.62070805,1 6,1.44616308 6,2.42342823 L6,13.5775052 C6,14.5547703 6.62164144,15 7.19941329,15 C7.50556704,15 7.81918795,14.8889259 8.12720848,14.6686446 L15.5785052,9.31282085 C16.0377358,8.98426562 16.2990866,8.50636709 16.2990866,7.9995333 C16.2990866,7.4945663 16.0368025,7.01760117 15.5794386,6.68811254 M2,0 C3.05,0 3.9177686,0.820041322 3.99448723,1.85130541 L4,2 L4,14 C4,15.1 3.1,16 2,16 C0.9,16 0,15.1 0,14 L0,2 C0,0.9 0.9,0 2,0 Z",
+    transform: "translate(4.000000, 4.000000)"
+  }));
+};
 var Info = function Info(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
     d: "M12.0004012,4 C16.4182338,4 20,7.58096384 20,11.9995988 C20,16.4182338 16.4182338,20 12.0004012,20 C7.58176621,20 4,16.4182338 4,11.9995988 C4,7.58096384 7.58176621,4 12.0004012,4 Z M13.0518404,10 L10,10 L10,11.6134693 L10.9489304,11.6134693 L10.9489304,15.3873607 L10,15.3873607 L10,17 L14,17 L14,15.3873607 L13.0518404,15.3873607 L13.0518404,10 Z M11.9907922,6 C11.1541947,6 10.5,6.65419468 10.5,7.49079217 C10.5,8.32738965 11.1541947,9 11.9907922,9 C12.8273897,9 13.5,8.32738965 13.5,7.49079217 C13.5,6.65419468 12.8273897,6 11.9907922,6 Z"
@@ -628,8 +647,11 @@ var index = /*#__PURE__*/Object.freeze({
     DragHandle: DragHandle,
     AutoUpdateActive: AutoUpdateActive,
     AutoUpdateInActive: AutoUpdateInActive,
+    Now: Now,
     Pause: Pause,
     Play: Play,
+    StepBackward: StepBackward,
+    StepForward: StepForward,
     Info: Info,
     TextIcon: TextIcon,
     FastForward: FastForward,
@@ -960,8 +982,8 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
         styleOverrides: {
           root: {
             color: geowebColors.typographyAndIcons.iconLinkActive,
-            '&.Mui-disabled': {
-              color: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled, "!important")
+            '&.MuiRadio-root.Mui-disabled': {
+              color: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled)
             },
             '&.Mui-checked': {
               color: geowebColors.typographyAndIcons.iconLinkActive
@@ -973,8 +995,8 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
         styleOverrides: {
           root: {
             color: geowebColors.typographyAndIcons.iconLinkActive,
-            '&.Mui-disabled': {
-              color: "".concat(geowebColors.typographyAndIcons.iconLinkDisabled, "!important")
+            '&.MuiCheckbox-root.Mui-disabled': {
+              color: geowebColors.typographyAndIcons.iconLinkDisabled
             },
             '&.Mui-checked': {
               color: geowebColors.typographyAndIcons.iconLinkActive
@@ -1220,6 +1242,17 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
               '&:after': {
                 borderColor: geowebColors.captions.captionError.color
               }
+            },
+            // can be improved in MUI6 or after this PR is merged https://github.com/mui/material-ui/pull/32822#issuecomment-1275927288
+            '&.MuiInputBase-readOnly': {
+              background: 'transparent',
+              color: geowebColors.typographyAndIcons.text,
+              ' .MuiInputBase-readOnly': {
+                WebkitTextFillColor: 'inherit'
+              },
+              '&:before': {
+                border: 'transparent'
+              }
             }
           },
           underline: {
@@ -1560,6 +1593,10 @@ var colors$1 = {
     disabled: {
       fill: '#000000',
       opacity: 0
+    },
+    label: {
+      fill: '#051039',
+      opacity: 0.67
     }
   },
   tab: {
@@ -1638,7 +1675,7 @@ var colors$1 = {
     },
     timelineText: {
       fontSize: 14,
-      color: '#051039',
+      color: '#FFFFFF',
       fontFamily: 'Roboto'
     },
     timelineTimeScale: {
@@ -1656,8 +1693,8 @@ var colors$1 = {
       opacity: 0.5
     },
     timelineSelectionBackground: {
-      fill: '#11D1C6',
-      opacity: 0.25
+      fill: '#FFFFFF',
+      opacity: 0.32
     },
     // time scale
     timeScalePointer: {
@@ -1675,6 +1712,16 @@ var colors$1 = {
     },
     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))'
+    },
+    ledgendObservedBackground: {
+      fill: '#00649F'
+    },
+    legendForecastBackground: {
+      fill: '#9900B1'
+    },
+    legendNoDataBackground: {
+      fill: '#575F7A',
+      opacity: '0.95'
     }
   },
   customSlider: {
@@ -1751,17 +1798,20 @@ var colors$1 = {
     success: '#72BB23',
     successOutline: {
       fill: '#FCFFEB',
-      border: ' 1px solid #72BB23'
+      border: '1px solid #72BB23',
+      borderColor: '#72BB23'
     },
     error: '#C00000',
     errorOutline: {
       fill: '#F9E8EA',
-      border: '1px solid #C00000'
+      border: '1px solid #C00000',
+      borderColor: '#C00000'
     },
     warning: '#FFA800',
     warningOutline: {
       fill: '#FFF8EB',
-      border: '1px solid #FFA800'
+      border: '1px solid #FFA800',
+      borderColor: '#FFA800'
     },
     warningHighlight: {
       fill: '#FFA800',
@@ -1770,7 +1820,20 @@ var colors$1 = {
     notification: '#0062E6',
     notificationOutline: {
       fill: '#DFF2FD',
-      border: '1px solid #0062E6'
+      border: '1px solid #0062E6',
+      borderColor: '#0062E6'
+    },
+    summary: '#9595FF',
+    summaryOutline: {
+      fill: '#F8F9F9',
+      border: '1px solid #8383F2',
+      borderColor: '#8383F2'
+    },
+    disabled: '#9B9FB0',
+    disabledOutline: {
+      fill: '#F8F9F9',
+      border: '1p solid #9B9FB0',
+      borderColor: '#9B9FB0'
     }
   },
   snackbar: {
@@ -1817,6 +1880,15 @@ var lightTheme = createTheme('light', parseColors(colors$1), createShadows(eleva
 
 var geowebColors = Object.assign({}, colors$1);
 var GWTheme = createTheme$1({
+  breakpoints: {
+    values: {
+      xs: breakpoints.mobile,
+      sm: breakpoints.tablet,
+      md: breakpoints.desktop,
+      lg: breakpoints.dekstopHD,
+      xl: breakpoints.dekstopHDWide
+    }
+  },
   palette: {
     secondary: {
       main: '#0075a9'
@@ -2335,6 +2407,10 @@ var colors = {
     disabled: {
       color: '#000000',
       opacity: 0
+    },
+    label: {
+      fill: '#FFFFFF',
+      opacity: 0.7
     }
   },
   tab: {
@@ -2431,8 +2507,8 @@ var colors = {
       opacity: 0.5
     },
     timelineSelectionBackground: {
-      fill: '#11D1C6',
-      opacity: 0.25
+      fill: '#FFFFFF',
+      opacity: 0.32
     },
     // time scale
     timeScalePointer: {
@@ -2450,6 +2526,17 @@ var colors = {
     },
     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: '#00649F'
+    },
+    legendForecastBackground: {
+      fill: '#9900B1'
+    },
+    legendNoDataBackground: {
+      fill: '#575F7A',
+      opacity: '0.95'
     }
   },
   customSlider: {
@@ -2526,17 +2613,20 @@ var colors = {
     success: '#72BB23',
     successOutline: {
       fill: 'rgba(114, 187, 35, 0.25)',
-      border: ' 1px solid #72BB23'
+      border: '1px solid #72BB23',
+      borderColor: '#72BB23'
     },
     error: '#C00000',
     errorOutline: {
       fill: 'rgba(192, 0, 0, 0.25)',
-      border: '1px solid #C00000'
+      border: '1px solid #C00000',
+      borderColor: '#C00000'
     },
     warning: '#FFA800',
     warningOutline: {
       fill: 'rgba(255, 168, 0, 0.25)',
-      border: '1px solid #FFA800'
+      border: '1px solid #FFA800',
+      borderColor: '#FFA800'
     },
     warningHighlight: {
       fill: '#FFA800',
@@ -2545,7 +2635,20 @@ var colors = {
     notification: '#186DFF',
     notificationOutline: {
       fill: 'rgba(24, 109, 255, 0.25)',
-      border: '1px solid #186DFF'
+      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: {
@@ -2634,4 +2737,4 @@ var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {
   }, props), children);
 };
 
-export { Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, Expand, Export, FastForward, Filter, Flag, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Minus, Notifications, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, darkTheme, gwButtonVariants, lightTheme, useThemeContext };
+export { Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, Expand, Export, FastForward, Filter, Flag, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Minus, Notifications, Now, Options, Pause, Picture, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, darkTheme, gwButtonVariants, lightTheme, useThemeContext };

package/index.umd.js

@@ -381,6 +381,13 @@
         y: 17.3
       }, "AUTO"))));
     };
+    var Now = function Now(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", {
+        transform: "translate(0 2)"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M4.85,15.55 L5.89,15.55 L7.39013512,18.2040258 L7.39,15.55 L8.42,15.55 L8.42,19.82 L7.39,19.815 L5.89,17.19 L5.89,19.82 L4.85,19.815 L4.85,15.55 Z M11.275,15.49 C12.55,15.49 13.14,16.4749736 13.14,17.69 C13.14,18.9050264 12.55,19.89 11.275,19.89 C10,19.89 9.4,18.9050264 9.4,17.69 C9.4,16.4749736 10,15.49 11.275,15.49 Z M11.265,16.3 C10.63,16.3 10.46,16.8781414 10.46,17.69 C10.46,18.5018586 10.63,19.08 11.265,19.08 C11.9,19.08 12.09,18.5018586 12.09,17.69 C12.09,16.8781414 11.9,16.3 11.265,16.3 Z M13.85,15.55 L14.88,15.55 L15.37,18.23 L15.96,15.55 L16.83,15.55 L17.42,18.23 L17.91,15.55 L18.93,15.55 L18.03,19.82 L16.96,19.82 L16.39,17.38 L15.83,19.82 L14.76,19.82 L13.85,15.55 Z M12,0 C16.7,0 18.85,4.12 18.85,6.82 C18.85,9.52 17.0960097,13.63 12,13.63 C9.06797949,13.63 7.24456537,12.2694474 6.22334015,10.5996971 C6.10797504,10.4110698 6.00732732,9.72319365 6.59320378,9.33888177 C7.17908025,8.95456988 7.71708662,9.39022217 7.84387287,9.58248667 C8.70143045,10.8829264 10.1633005,11.82 12,11.82 C15,11.82 17,9.32 17,6.82 C17,4.32 15,1.81 12,1.81 C10.5492584,1.81 9.33236686,2.39696387 8.46241089,3.28591644 L9.474995,3.73670576 C9.86718007,3.9113178 9.95685384,4.26087798 9.84288406,4.51685828 C9.78589918,4.64484843 9.68395359,4.74990886 9.54141806,4.83107363 L6.67469458,6.47927087 C6.45916744,6.60267712 6.21814322,6.61960842 6.01095111,6.52736055 C5.80211462,6.43438056 5.65295882,6.24275928 5.60209611,6.00074862 L4.90755008,2.76794268 C4.87285304,2.60689825 4.88471829,2.46076082 4.94098185,2.3343908 C5.05495162,2.0784105 5.37472892,1.91114968 5.7660918,2.08539566 L6.7215416,2.51032096 C7.8443708,1.0870475 9.58579853,0 12,0 Z"
+      })));
+    };
     var Pause = function Pause(props) {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
         d: "M8.579 4c.865 0 1.565.7 1.565 1.564v12.87c0 .866-.7 1.566-1.565 1.566-.863 0-1.565-.7-1.565-1.565v-4.87H7v-3.13h.014V5.564C7.014 4.7 7.716 4 8.579 4zm6.915 0c.865 0 1.565.7 1.565 1.564v12.871c0 .865-.7 1.565-1.565 1.565-.863 0-1.565-.7-1.565-1.565v-4.87h-.014v-3.13h.014v-4.87C13.93 4.7 14.631 4 15.494 4z"
@@ -391,6 +398,18 @@
         d: "M15.18 12.688l-3.909 2.81c-.161.115-.325.175-.486.175-.303 0-.629-.234-.629-.748v-5.85c0-.514.325-.747.63-.747.16 0 .324.059.485.174l3.91 2.81c.24.172.378.423.378.688 0 .265-.137.517-.379.688M12 4c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8"
       }));
     };
+    var StepBackward = function StepBackward(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M15.5794386,6.68811254 L8.12440829,1.33228882 C7.81918795,1.11107407 7.50556704,1 7.19941329,1 C6.62070805,1 6,1.44616308 6,2.42342823 L6,13.5775052 C6,14.5547703 6.62164144,15 7.19941329,15 C7.50556704,15 7.81918795,14.8889259 8.12720848,14.6686446 L15.5785052,9.31282085 C16.0377358,8.98426562 16.2990866,8.50636709 16.2990866,7.9995333 C16.2990866,7.4945663 16.0368025,7.01760117 15.5794386,6.68811254 M2,0 C3.05,0 3.9177686,0.820041322 3.99448723,1.85130541 L4,2 L4,14 C4,15.1 3.1,16 2,16 C0.9,16 0,15.1 0,14 L0,2 C0,0.9 0.9,0 2,0 Z",
+        transform: "translate(4.000000, 4.000000) translate(8.149543, 8.000000) scale(-1, 1) translate(-8.149543, -8.000000) "
+      }));
+    };
+    var StepForward = function StepForward(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M15.5794386,6.68811254 L8.12440829,1.33228882 C7.81918795,1.11107407 7.50556704,1 7.19941329,1 C6.62070805,1 6,1.44616308 6,2.42342823 L6,13.5775052 C6,14.5547703 6.62164144,15 7.19941329,15 C7.50556704,15 7.81918795,14.8889259 8.12720848,14.6686446 L15.5785052,9.31282085 C16.0377358,8.98426562 16.2990866,8.50636709 16.2990866,7.9995333 C16.2990866,7.4945663 16.0368025,7.01760117 15.5794386,6.68811254 M2,0 C3.05,0 3.9177686,0.820041322 3.99448723,1.85130541 L4,2 L4,14 C4,15.1 3.1,16 2,16 C0.9,16 0,15.1 0,14 L0,2 C0,0.9 0.9,0 2,0 Z",
+        transform: "translate(4.000000, 4.000000)"
+      }));
+    };
     var Info = function Info(props) {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
         d: "M12.0004012,4 C16.4182338,4 20,7.58096384 20,11.9995988 C20,16.4182338 16.4182338,20 12.0004012,20 C7.58176621,20 4,16.4182338 4,11.9995988 C4,7.58096384 7.58176621,4 12.0004012,4 Z M13.0518404,10 L10,10 L10,11.6134693 L10.9489304,11.6134693 L10.9489304,15.3873607 L10,15.3873607 L10,17 L14,17 L14,15.3873607 L13.0518404,15.3873607 L13.0518404,10 Z M11.9907922,6 C11.1541947,6 10.5,6.65419468 10.5,7.49079217 C10.5,8.32738965 11.1541947,9 11.9907922,9 C12.8273897,9 13.5,8.32738965 13.5,7.49079217 C13.5,6.65419468 12.8273897,6 11.9907922,6 Z"
@@ -679,8 +698,11 @@
         DragHandle: DragHandle,
         AutoUpdateActive: AutoUpdateActive,
         AutoUpdateInActive: AutoUpdateInActive,
+        Now: Now,
         Pause: Pause,
         Play: Play,
+        StepBackward: StepBackward,
+        StepForward: StepForward,
         Info: Info,
         TextIcon: TextIcon,
         FastForward: FastForward,
@@ -947,8 +969,8 @@
             styleOverrides: {
               root: {
                 color: geowebColors.typographyAndIcons.iconLinkActive,
-                '&.Mui-disabled': {
-                  color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
+                '&.MuiRadio-root.Mui-disabled': {
+                  color: "" + geowebColors.typographyAndIcons.iconLinkDisabled
                 },
                 '&.Mui-checked': {
                   color: geowebColors.typographyAndIcons.iconLinkActive
@@ -960,8 +982,8 @@
             styleOverrides: {
               root: {
                 color: geowebColors.typographyAndIcons.iconLinkActive,
-                '&.Mui-disabled': {
-                  color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
+                '&.MuiCheckbox-root.Mui-disabled': {
+                  color: geowebColors.typographyAndIcons.iconLinkDisabled
                 },
                 '&.Mui-checked': {
                   color: geowebColors.typographyAndIcons.iconLinkActive
@@ -1207,6 +1229,17 @@
                   '&:after': {
                     borderColor: geowebColors.captions.captionError.color
                   }
+                },
+                // can be improved in MUI6 or after this PR is merged https://github.com/mui/material-ui/pull/32822#issuecomment-1275927288
+                '&.MuiInputBase-readOnly': {
+                  background: 'transparent',
+                  color: geowebColors.typographyAndIcons.text,
+                  ' .MuiInputBase-readOnly': {
+                    WebkitTextFillColor: 'inherit'
+                  },
+                  '&:before': {
+                    border: 'transparent'
+                  }
                 }
               },
               underline: {
@@ -1547,6 +1580,10 @@
         disabled: {
           fill: '#000000',
           opacity: 0
+        },
+        label: {
+          fill: '#051039',
+          opacity: 0.67
         }
       },
       tab: {
@@ -1625,7 +1662,7 @@
         },
         timelineText: {
           fontSize: 14,
-          color: '#051039',
+          color: '#FFFFFF',
           fontFamily: 'Roboto'
         },
         timelineTimeScale: {
@@ -1643,8 +1680,8 @@
           opacity: 0.5
         },
         timelineSelectionBackground: {
-          fill: '#11D1C6',
-          opacity: 0.25
+          fill: '#FFFFFF',
+          opacity: 0.32
         },
         // time scale
         timeScalePointer: {
@@ -1662,6 +1699,16 @@
         },
         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))'
+        },
+        ledgendObservedBackground: {
+          fill: '#00649F'
+        },
+        legendForecastBackground: {
+          fill: '#9900B1'
+        },
+        legendNoDataBackground: {
+          fill: '#575F7A',
+          opacity: '0.95'
         }
       },
       customSlider: {
@@ -1738,17 +1785,20 @@
         success: '#72BB23',
         successOutline: {
           fill: '#FCFFEB',
-          border: ' 1px solid #72BB23'
+          border: '1px solid #72BB23',
+          borderColor: '#72BB23'
         },
         error: '#C00000',
         errorOutline: {
           fill: '#F9E8EA',
-          border: '1px solid #C00000'
+          border: '1px solid #C00000',
+          borderColor: '#C00000'
         },
         warning: '#FFA800',
         warningOutline: {
           fill: '#FFF8EB',
-          border: '1px solid #FFA800'
+          border: '1px solid #FFA800',
+          borderColor: '#FFA800'
         },
         warningHighlight: {
           fill: '#FFA800',
@@ -1757,7 +1807,20 @@
         notification: '#0062E6',
         notificationOutline: {
           fill: '#DFF2FD',
-          border: '1px solid #0062E6'
+          border: '1px solid #0062E6',
+          borderColor: '#0062E6'
+        },
+        summary: '#9595FF',
+        summaryOutline: {
+          fill: '#F8F9F9',
+          border: '1px solid #8383F2',
+          borderColor: '#8383F2'
+        },
+        disabled: '#9B9FB0',
+        disabledOutline: {
+          fill: '#F8F9F9',
+          border: '1p solid #9B9FB0',
+          borderColor: '#9B9FB0'
         }
       },
       snackbar: {
@@ -1788,6 +1851,15 @@
     var geowebColors = __assign({}, colors$1);
 
     var GWTheme = material.createTheme({
+      breakpoints: {
+        values: {
+          xs: breakpoints.mobile,
+          sm: breakpoints.tablet,
+          md: breakpoints.desktop,
+          lg: breakpoints.dekstopHD,
+          xl: breakpoints.dekstopHDWide
+        }
+      },
       palette: {
         secondary: {
           main: '#0075a9'
@@ -2306,6 +2378,10 @@
         disabled: {
           color: '#000000',
           opacity: 0
+        },
+        label: {
+          fill: '#FFFFFF',
+          opacity: 0.7
         }
       },
       tab: {
@@ -2402,8 +2478,8 @@
           opacity: 0.5
         },
         timelineSelectionBackground: {
-          fill: '#11D1C6',
-          opacity: 0.25
+          fill: '#FFFFFF',
+          opacity: 0.32
         },
         // time scale
         timeScalePointer: {
@@ -2421,6 +2497,17 @@
         },
         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: '#00649F'
+        },
+        legendForecastBackground: {
+          fill: '#9900B1'
+        },
+        legendNoDataBackground: {
+          fill: '#575F7A',
+          opacity: '0.95'
         }
       },
       customSlider: {
@@ -2497,17 +2584,20 @@
         success: '#72BB23',
         successOutline: {
           fill: 'rgba(114, 187, 35, 0.25)',
-          border: ' 1px solid #72BB23'
+          border: '1px solid #72BB23',
+          borderColor: '#72BB23'
         },
         error: '#C00000',
         errorOutline: {
           fill: 'rgba(192, 0, 0, 0.25)',
-          border: '1px solid #C00000'
+          border: '1px solid #C00000',
+          borderColor: '#C00000'
         },
         warning: '#FFA800',
         warningOutline: {
           fill: 'rgba(255, 168, 0, 0.25)',
-          border: '1px solid #FFA800'
+          border: '1px solid #FFA800',
+          borderColor: '#FFA800'
         },
         warningHighlight: {
           fill: '#FFA800',
@@ -2516,7 +2606,20 @@
         notification: '#186DFF',
         notificationOutline: {
           fill: 'rgba(24, 109, 255, 0.25)',
-          border: '1px solid #186DFF'
+          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: {
@@ -2655,6 +2758,7 @@
     exports.Location = Location;
     exports.Minus = Minus;
     exports.Notifications = Notifications;
+    exports.Now = Now;
     exports.Options = Options;
     exports.Pause = Pause;
     exports.Picture = Picture;
@@ -2668,6 +2772,8 @@
     exports.Speed = Speed;
     exports.SplitHorizontal = SplitHorizontal;
     exports.SplitVertical = SplitVertical;
+    exports.StepBackward = StepBackward;
+    exports.StepForward = StepForward;
     exports.SubdirectoryArrowRight = SubdirectoryArrowRight;
     exports.Success = Success;
     exports.TextIcon = TextIcon;

package/lib/components/Icons/Icons.d.ts

@@ -33,8 +33,11 @@ export declare const Cancel: (props: SvgIconProps) => JSX.Element;
 export declare const DragHandle: (props: SvgIconProps) => JSX.Element;
 export declare const AutoUpdateActive: (props: SvgIconProps) => JSX.Element;
 export declare const AutoUpdateInActive: (props: SvgIconProps) => JSX.Element;
+export declare const Now: (props: SvgIconProps) => JSX.Element;
 export declare const Pause: (props: SvgIconProps) => JSX.Element;
 export declare const Play: (props: SvgIconProps) => JSX.Element;
+export declare const StepBackward: (props: SvgIconProps) => JSX.Element;
+export declare const StepForward: (props: SvgIconProps) => JSX.Element;
 export declare const Info: (props: SvgIconProps) => JSX.Element;
 interface TextIconProps extends SvgIconProps {
     text?: string;

package/lib/components/Theme/types.d.ts

@@ -45,6 +45,7 @@ export declare type GeowebColorPalette = {
         default: CSSProperties;
         active: CSSProperties;
         disabled: CSSProperties;
+        label: CSSProperties;
     };
     tab: {
         mouseOver: CSSProperties;
@@ -88,6 +89,9 @@ export declare type GeowebColorPalette = {
         timeScaleTimeIndicators: CSSProperties;
         timeScaleTimeIndicatorsActive: CSSProperties;
         timeScaleShadowButtonScale: CSSProperties;
+        ledgendObservedBackground: CSSProperties;
+        legendForecastBackground: CSSProperties;
+        legendNoDataBackground: CSSProperties;
     };
     customSlider: {
         rail: CSSProperties['color'];
@@ -134,6 +138,10 @@ export declare type GeowebColorPalette = {
         warningHighlight: CSSProperties;
         notification: CSSProperties['color'];
         notificationOutline: CSSProperties;
+        summary: CSSProperties['color'];
+        summaryOutline: CSSProperties;
+        disabled: CSSProperties['color'];
+        disabledOutline: CSSProperties;
     };
     snackbar: {
         background: CSSProperties['color'];

package/lib/stories/Button.stories.d.ts

@@ -2,13 +2,11 @@ import * as React from 'react';
 export declare const ButtonDemo: React.FC;
 export declare const Buttons: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/lib/stories/Card.stories.d.ts

@@ -2,13 +2,11 @@ import * as React from 'react';
 export declare const CardDemo: React.FC;
 export declare const Cards: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/lib/stories/IconButton.stories.d.ts

@@ -2,13 +2,11 @@ import * as React from 'react';
 export declare const IconButtonDemo: React.FC;
 export declare const IconButtons: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/lib/stories/TextField.stories.d.ts

@@ -2,13 +2,11 @@ import * as React from 'react';
 export declare const TextFieldDemo: React.FC;
 export declare const TextFields: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/lib/stories/ToggleButton.stories.d.ts

@@ -2,13 +2,11 @@ import * as React from 'react';
 export declare const ToggleButtonDemo: React.FC;
 export declare const ToggleButtons: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,6 +13,6 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^17.0.2",
-    "@mui/material": "^5.2.8"
+    "@mui/material": "^5.10.8"
   }
 }