@opengeoweb/theme 4.3.0 → 4.5.0

package/index.d.ts

@@ -2,3 +2,4 @@ import * as Icons from './lib/components/Icons';
 export { Icons };
 export * from './lib/components/Theme';
 export * from './lib/components/Icons';
+export * from './lib/components/Paths';

package/index.esm.js

@@ -28,6 +28,24 @@ function __rest(s, e) {
     return t;
 }
 
+/* *
+ * 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)
+ * */
+var dragHandlePath = 'M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z';
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -297,7 +315,7 @@ var Cancel = function Cancel(props) {
 };
 var DragHandle = function DragHandle(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
-    d: "M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
+    d: dragHandlePath
   }));
 };
 var AutoUpdateActive = function AutoUpdateActive(props) {
@@ -347,6 +365,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"
@@ -439,10 +469,11 @@ var Flag = function Flag(props) {
 var Resize = function Resize(_a) {
   var _a$isRightAligned = _a.isRightAligned,
       isRightAligned = _a$isRightAligned === void 0 ? false : _a$isRightAligned,
-      props = __rest(_a, ["isRightAligned"]);
+      sx = _a.sx,
+      props = __rest(_a, ["isRightAligned", "sx"]);
 
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({
-    sx: Object.assign(Object.assign({
+    sx: Object.assign(Object.assign(Object.assign({
       width: 20,
       height: 20,
       top: -10,
@@ -454,7 +485,7 @@ var Resize = function Resize(_a) {
       left: -10
     }), {
       zIndex: 1
-    }),
+    }), sx),
     "data-testid": "resizeHandle"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
@@ -582,6 +613,55 @@ var Picture = function Picture(props) {
     transform: "translate(1 2)"
   }));
 };
+var CollapseWindow = function CollapseWindow(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5,17 C4.43301962,17 4,17.4597824 4,18.0268006 C4,18.5938188 4.43301962,19 5,19 L19,19 C19.5669804,19 20,18.5938188 20,18.0268006 C20,17.4597824 19.5669804,17 19,17 L5,17 Z"
+  }));
+};
+var ExpandWindow = function ExpandWindow(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M18,4.5 C18.81657,4.52323671 19.4399034,4.74990338 19.87,5.18 C20.3000966,5.61009662 20.5100966,6.21676329 20.5,7 L20.5,17 C20.4955176,17.7444824 20.2855176,18.3244824 19.87,18.74 C19.4544824,19.1555176 18.8311491,19.4088509 18,19.5 L6,19.5 C5.1805214,19.4148333 4.56096049,19.1624284 4.1413173,18.7427852 C3.7216741,18.323142 3.50790167,17.7422136 3.5,17 L3.5,7 C3.52565636,6.18855517 3.73942879,5.5818885 4.1413173,5.18 C4.5432058,4.7781115 5.1627667,4.55144483 6,4.5 L18,4.5 Z M17.6875,6.75 L6.3125,6.75 C5.85182844,6.75 5.5,7.20978239 5.5,7.77680061 C5.5,8.34381884 5.85182844,8.75 6.3125,8.75 L17.6875,8.75 C18.1481716,8.75 18.5,8.34381884 18.5,7.77680061 C18.5,7.20978239 18.1481716,6.75 17.6875,6.75 Z"
+  }));
+};
+var CollapseLarge = function CollapseLarge(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", {
+    id: "Icons-/-Collapse-L",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M11.51,8.14 L11.51,13.93 L14.4857761,13.93 L14.4857761,15.2471595 L9.79,15.2471595 L9.79,8.14 L11.51,8.14 Z",
+    id: "Icons-/-expand-L",
+    fill: "currentColor"
+  })));
+};
+var CollapseMedium = function CollapseMedium(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", {
+    id: "Icons-/-Collapse-M",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M10.3720217,8.13793154 L11.9560108,13.0709727 L13.54,8.13793154 L15.79,8.13793154 L15.79,15.25 L14.0828502,15.25 L14.0828502,13.5960917 L14.24,10.1828615 L12.52,15.25 L11.3929679,15.25 L9.66668436,10.1828615 L9.83,13.5960917 L9.83,15.25 L8.12,15.25 L8.12,8.13793154 L10.3720217,8.13793154 Z",
+    id: "Icons-/-expand-M",
+    fill: "currentColor"
+  })));
+};
+var CollapseSmall = function CollapseSmall(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("g", {
+    id: "Icons-/-Collapse-S",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M12,8.04223293 C12.3816424,8.04223293 12.7614621,8.07548514 13.1091818,8.18 C13.5650277,8.31701461 13.9657061,8.56252016 14.2430015,8.87556815 C14.5528447,9.22536046 14.7487564,9.63866568 14.7487564,10.2519529 L13.0420578,10.2519529 C13.0420578,10.1288369 13.0272095,9.87711169 12.8626035,9.66926494 C12.7706891,9.55320533 12.6320802,9.43866588 12.4232884,9.38 C12.3058648,9.34700656 12.1662431,9.34 12.0002452,9.34 C11.7669952,9.34 11.5569756,9.40134185 11.3953298,9.49974489 C11.191832,9.62362564 11.065,9.80624313 11.065,9.99915266 C11.065,10.4659624 11.5303207,10.7054039 12.0069825,10.88 C12.251836,10.9696872 12.4996821,11.0509766 12.6889856,11.1190164 C13.2468104,11.3195109 14.7487564,11.8079437 14.7487564,13.3345338 C14.7487564,14.1523847 14.3639594,14.7065019 13.71,15.0235466 C13.2549114,15.2441772 12.7956716,15.35 12,15.35 C11.5837341,15.35 11.0482218,15.2531638 10.57,15.0437157 C10.1291519,14.8506364 9.73916298,14.5618589 9.48671724,14.1650248 C9.25557241,13.8016749 9.14333333,13.3931427 9.15,12.939428 L10.8662463,12.939428 C10.8586095,13.2482201 10.923194,13.4935781 11.06,13.6755022 C11.265209,13.9483883 11.6785712,14.059404 12.0002452,14.059404 C12.416347,14.059404 13.0420578,13.9897611 13.0420578,13.3345338 C13.0420578,13.0169697 12.9081037,12.8095581 12.4695878,12.5923469 C12.3796921,12.5478187 12.2231629,12.4829201 12,12.3976512 C11.2094155,12.128282 10.6637991,11.8940163 10.3631508,11.6948541 C10.1074343,11.5254567 9.88191516,11.3372466 9.73293087,11.1353958 C9.51970344,10.8465054 9.36,10.5472019 9.36,9.99915266 C9.36,9.53454971 9.57462649,9.02233509 10.0735216,8.63036466 C10.4735262,8.31609021 11.2198472,8.04223293 12,8.04223293 Z",
+    id: "Icons-/-expand-S",
+    fill: "currentColor"
+  })));
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -638,6 +718,8 @@ var index = /*#__PURE__*/Object.freeze({
     Now: Now,
     Pause: Pause,
     Play: Play,
+    StepBackward: StepBackward,
+    StepForward: StepForward,
     Info: Info,
     TextIcon: TextIcon,
     FastForward: FastForward,
@@ -674,7 +756,12 @@ var index = /*#__PURE__*/Object.freeze({
     DimensionsTime: DimensionsTime,
     DimensionsRefTime: DimensionsRefTime,
     DimensionsOther: DimensionsOther,
-    Picture: Picture
+    Picture: Picture,
+    CollapseWindow: CollapseWindow,
+    ExpandWindow: ExpandWindow,
+    CollapseLarge: CollapseLarge,
+    CollapseMedium: CollapseMedium,
+    CollapseSmall: CollapseSmall
 });
 
 function _defineProperty(obj, key, value) {
@@ -764,6 +851,13 @@ function _nonIterableRest() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var ThemeTypes;
+
+(function (ThemeTypes) {
+  ThemeTypes["DARK_THEME"] = "darkTheme";
+  ThemeTypes["LIGHT_THEME"] = "lightTheme";
+})(ThemeTypes || (ThemeTypes = {}));
+
 var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
 
 var defaultButtonStyle = function defaultButtonStyle(button) {
@@ -981,8 +1075,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
@@ -1340,6 +1434,40 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
             fontSize: 16
           })
         }
+      },
+      MuiAccordion: {
+        styleOverrides: {
+          root: {
+            backgroundColor: geowebColors.cards.cardContainer,
+            borderRadius: '3px',
+            border: 'solid 1px',
+            borderColor: geowebColors.cards.cardContainerBorder,
+            color: geowebColors.buttons.flat["default"].color,
+            padding: '0px',
+            margin: '0px 12px 4px 12px',
+            fontSize: '12px',
+            '&:before': {
+              display: 'none'
+            },
+            '& .MuiAccordionSummary-root.Mui-expanded': {
+              borderBottom: 'solid 1px',
+              borderColor: geowebColors.cards.cardContainerBorder
+            },
+            '& .MuiAccordionSummary-content': {
+              margin: '2px',
+              padding: '4px 4px 4px 10px'
+            }
+          }
+        }
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            minHeight: '32px',
+            padding: '0px',
+            paddingRight: '5px'
+          }
+        }
       }
     }
   });
@@ -1631,24 +1759,8 @@ var colors$1 = {
       fill: '#67F0FF',
       opacity: 0.75
     },
-    playerRailObservation: {
-      fill: '#0876B6',
-      opacity: 100
-    },
-    playerRailSelection: {
-      fill: '#C6D111',
-      opacity: 0.5
-    },
-    playerRailForecastData: {
-      fill: '#FD64FF',
-      opacity: 0.6
-    },
-    playerRailForecastNoData: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     playerTimeMarkers: {
-      fill: '#2C2C2C'
+      fill: '#051039'
     },
     playerTimeText: {
       color: '#FFFFFF',
@@ -1661,15 +1773,15 @@ var colors$1 = {
     },
     timelineText: {
       fontSize: 14,
-      color: '#051039',
+      color: '#FFFFFF',
       fontFamily: 'Roboto'
     },
     timelineTimeScale: {
       fill: '#979797'
     },
     timelineNightTime: {
-      fill: '#070808',
-      opacity: 0.1
+      fill: '#051038',
+      opacity: 0.67
     },
     timelineTimelineSurface: {
       fill: '#FFFFFF'
@@ -1679,8 +1791,8 @@ var colors$1 = {
       opacity: 0.5
     },
     timelineSelectionBackground: {
-      fill: '#11D1C6',
-      opacity: 0.25
+      fill: '#FFFFFF',
+      opacity: 0.32
     },
     // time scale
     timeScalePointer: {
@@ -1698,6 +1810,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: {
@@ -1774,17 +1896,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',
@@ -1793,7 +1918,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: {
@@ -1840,6 +1978,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'
@@ -2410,24 +2557,8 @@ var colors = {
       fill: '#67F0FF',
       opacity: 0.75
     },
-    playerRailObservation: {
-      fill: '#0876B6',
-      opacity: 100
-    },
-    playerRailSelection: {
-      fill: '#C6D111',
-      opacity: 0.5
-    },
-    playerRailForecastData: {
-      fill: '#FD64FF',
-      opacity: 0.6
-    },
-    playerRailForecastNoData: {
-      fill: '#051039',
-      opacity: 0.67
-    },
     playerTimeMarkers: {
-      fill: '#2C2C2C'
+      fill: '#051039'
     },
     playerTimeText: {
       color: '#FFFFFF',
@@ -2447,8 +2578,8 @@ var colors = {
       fill: '#979797'
     },
     timelineNightTime: {
-      fill: '#070808',
-      opacity: 0.3
+      fill: '#051038',
+      opacity: 0.67
     },
     timelineTimelineSurface: {
       fill: '#303030'
@@ -2458,8 +2589,8 @@ var colors = {
       opacity: 0.5
     },
     timelineSelectionBackground: {
-      fill: '#11D1C6',
-      opacity: 0.25
+      fill: '#FFFFFF',
+      opacity: 0.32
     },
     // time scale
     timeScalePointer: {
@@ -2477,6 +2608,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: {
@@ -2553,17 +2695,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',
@@ -2572,7 +2717,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: {
@@ -2606,19 +2764,21 @@ var ThemeContext = /*#__PURE__*/React.createContext({
 });
 var ThemeProvider = function ThemeProvider(_ref) {
   var children = _ref.children,
-      _ref$theme = _ref.theme,
-      defaultTheme = _ref$theme === void 0 ? lightTheme : _ref$theme,
+      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(false),
+  var _React$useState = React.useState(defaultTheme === darkTheme),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isDark = _React$useState2[0],
       setDark = _React$useState2[1];
 
+  var configuredTheme = isDark ? darkTheme : lightTheme;
   var currentTheme = React.useMemo(function () {
-    return isDark ? darkTheme : defaultTheme;
-  }, [isDark, defaultTheme]);
+    return theme || configuredTheme;
+  }, [configuredTheme, theme]);
 
   var toggleTheme = function toggleTheme() {
     return setDark(!isDark);
@@ -2639,14 +2799,15 @@ var useThemeContext = function useThemeContext() {
 
 var ThemeWrapper = function ThemeWrapper(_ref2) {
   var children = _ref2.children,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? lightTheme : _ref2$theme,
+      theme = _ref2.theme,
+      defaultThemeName = _ref2.defaultThemeName,
       _ref2$disableCssBasel = _ref2.disableCssBaseline,
       disableCssBaseline = _ref2$disableCssBasel === void 0 ? false : _ref2$disableCssBasel;
   return /*#__PURE__*/React.createElement(StyledEngineProvider, {
     injectFirst: true
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme,
+    defaultThemeName: defaultThemeName,
     disableCssBaseline: disableCssBaseline
   }, children));
 }; // Wrapper for storybook stories with GWTheme. Will be deprecated
@@ -2661,4 +2822,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, Now, 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, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, Expand, ExpandWindow, 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, ThemeTypes, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, darkTheme, dragHandlePath, gwButtonVariants, lightTheme, useThemeContext };

package/index.umd.js

@@ -79,6 +79,24 @@
         return ar;
     }
 
+    /* *
+     * 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)
+     * */
+    var dragHandlePath = 'M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z';
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -348,7 +366,7 @@
     };
     var DragHandle = function DragHandle(props) {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
-        d: "M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
+        d: dragHandlePath
       }));
     };
     var AutoUpdateActive = function AutoUpdateActive(props) {
@@ -398,6 +416,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"
@@ -490,10 +520,11 @@
     var Resize = function Resize(_a) {
       var _b = _a.isRightAligned,
           isRightAligned = _b === void 0 ? false : _b,
-          props = __rest(_a, ["isRightAligned"]);
+          sx = _a.sx,
+          props = __rest(_a, ["isRightAligned", "sx"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({
-        sx: __assign(__assign({
+        sx: __assign(__assign(__assign({
           width: 20,
           height: 20,
           top: -10,
@@ -505,7 +536,7 @@
           left: -10
         }), {
           zIndex: 1
-        }),
+        }), sx),
         "data-testid": "resizeHandle"
       }, props), /*#__PURE__*/React__namespace.createElement("path", {
         d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
@@ -633,6 +664,55 @@
         transform: "translate(1 2)"
       }));
     };
+    var CollapseWindow = function CollapseWindow(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M5,17 C4.43301962,17 4,17.4597824 4,18.0268006 C4,18.5938188 4.43301962,19 5,19 L19,19 C19.5669804,19 20,18.5938188 20,18.0268006 C20,17.4597824 19.5669804,17 19,17 L5,17 Z"
+      }));
+    };
+    var ExpandWindow = function ExpandWindow(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M18,4.5 C18.81657,4.52323671 19.4399034,4.74990338 19.87,5.18 C20.3000966,5.61009662 20.5100966,6.21676329 20.5,7 L20.5,17 C20.4955176,17.7444824 20.2855176,18.3244824 19.87,18.74 C19.4544824,19.1555176 18.8311491,19.4088509 18,19.5 L6,19.5 C5.1805214,19.4148333 4.56096049,19.1624284 4.1413173,18.7427852 C3.7216741,18.323142 3.50790167,17.7422136 3.5,17 L3.5,7 C3.52565636,6.18855517 3.73942879,5.5818885 4.1413173,5.18 C4.5432058,4.7781115 5.1627667,4.55144483 6,4.5 L18,4.5 Z M17.6875,6.75 L6.3125,6.75 C5.85182844,6.75 5.5,7.20978239 5.5,7.77680061 C5.5,8.34381884 5.85182844,8.75 6.3125,8.75 L17.6875,8.75 C18.1481716,8.75 18.5,8.34381884 18.5,7.77680061 C18.5,7.20978239 18.1481716,6.75 17.6875,6.75 Z"
+      }));
+    };
+    var CollapseLarge = function CollapseLarge(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", {
+        id: "Icons-/-Collapse-L",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M11.51,8.14 L11.51,13.93 L14.4857761,13.93 L14.4857761,15.2471595 L9.79,15.2471595 L9.79,8.14 L11.51,8.14 Z",
+        id: "Icons-/-expand-L",
+        fill: "currentColor"
+      })));
+    };
+    var CollapseMedium = function CollapseMedium(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", {
+        id: "Icons-/-Collapse-M",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M10.3720217,8.13793154 L11.9560108,13.0709727 L13.54,8.13793154 L15.79,8.13793154 L15.79,15.25 L14.0828502,15.25 L14.0828502,13.5960917 L14.24,10.1828615 L12.52,15.25 L11.3929679,15.25 L9.66668436,10.1828615 L9.83,13.5960917 L9.83,15.25 L8.12,15.25 L8.12,8.13793154 L10.3720217,8.13793154 Z",
+        id: "Icons-/-expand-M",
+        fill: "currentColor"
+      })));
+    };
+    var CollapseSmall = function CollapseSmall(props) {
+      return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("g", {
+        id: "Icons-/-Collapse-S",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M18.0000715,4.5 C18.8166416,4.52323671 19.4399749,4.74990338 19.8700715,5.18 C20.3001681,5.61009662 20.5101681,6.21676329 20.5000715,7 L20.5000715,17 C20.4955891,17.7444824 20.2855891,18.3244824 19.8700715,18.74 C19.4545539,19.1555176 18.8312206,19.4088509 18.0000715,19.5 L6.00007152,19.5 C5.18059291,19.4148333 4.56103201,19.1624284 4.14138882,18.7427852 C3.72174562,18.323142 3.50797319,17.7422136 3.50007152,17 L3.50007152,7 C3.52572788,6.18855517 3.73950031,5.5818885 4.14138882,5.18 C4.54327732,4.7781115 5.16283822,4.55144483 6.00007152,4.5 L18.0000715,4.5 Z M17.5015692,6.5 L6.49857385,6.5 C5.94711624,6.5 5.50007152,6.94483697 5.50007152,7.4955775 L5.50007152,16.5044225 C5.50007152,17.0542648 5.94756094,17.5 6.49857385,17.5 L17.5015692,17.5 C18.0530268,17.5 18.5000715,17.055163 18.5000715,16.5044225 L18.5000715,7.4955775 C18.5000715,6.94573523 18.0525821,6.5 17.5015692,6.5 Z M12,8.04223293 C12.3816424,8.04223293 12.7614621,8.07548514 13.1091818,8.18 C13.5650277,8.31701461 13.9657061,8.56252016 14.2430015,8.87556815 C14.5528447,9.22536046 14.7487564,9.63866568 14.7487564,10.2519529 L13.0420578,10.2519529 C13.0420578,10.1288369 13.0272095,9.87711169 12.8626035,9.66926494 C12.7706891,9.55320533 12.6320802,9.43866588 12.4232884,9.38 C12.3058648,9.34700656 12.1662431,9.34 12.0002452,9.34 C11.7669952,9.34 11.5569756,9.40134185 11.3953298,9.49974489 C11.191832,9.62362564 11.065,9.80624313 11.065,9.99915266 C11.065,10.4659624 11.5303207,10.7054039 12.0069825,10.88 C12.251836,10.9696872 12.4996821,11.0509766 12.6889856,11.1190164 C13.2468104,11.3195109 14.7487564,11.8079437 14.7487564,13.3345338 C14.7487564,14.1523847 14.3639594,14.7065019 13.71,15.0235466 C13.2549114,15.2441772 12.7956716,15.35 12,15.35 C11.5837341,15.35 11.0482218,15.2531638 10.57,15.0437157 C10.1291519,14.8506364 9.73916298,14.5618589 9.48671724,14.1650248 C9.25557241,13.8016749 9.14333333,13.3931427 9.15,12.939428 L10.8662463,12.939428 C10.8586095,13.2482201 10.923194,13.4935781 11.06,13.6755022 C11.265209,13.9483883 11.6785712,14.059404 12.0002452,14.059404 C12.416347,14.059404 13.0420578,13.9897611 13.0420578,13.3345338 C13.0420578,13.0169697 12.9081037,12.8095581 12.4695878,12.5923469 C12.3796921,12.5478187 12.2231629,12.4829201 12,12.3976512 C11.2094155,12.128282 10.6637991,11.8940163 10.3631508,11.6948541 C10.1074343,11.5254567 9.88191516,11.3372466 9.73293087,11.1353958 C9.51970344,10.8465054 9.36,10.5472019 9.36,9.99915266 C9.36,9.53454971 9.57462649,9.02233509 10.0735216,8.63036466 C10.4735262,8.31609021 11.2198472,8.04223293 12,8.04223293 Z",
+        id: "Icons-/-expand-S",
+        fill: "currentColor"
+      })));
+    };
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -689,6 +769,8 @@
         Now: Now,
         Pause: Pause,
         Play: Play,
+        StepBackward: StepBackward,
+        StepForward: StepForward,
         Info: Info,
         TextIcon: TextIcon,
         FastForward: FastForward,
@@ -725,7 +807,12 @@
         DimensionsTime: DimensionsTime,
         DimensionsRefTime: DimensionsRefTime,
         DimensionsOther: DimensionsOther,
-        Picture: Picture
+        Picture: Picture,
+        CollapseWindow: CollapseWindow,
+        ExpandWindow: ExpandWindow,
+        CollapseLarge: CollapseLarge,
+        CollapseMedium: CollapseMedium,
+        CollapseSmall: CollapseSmall
     });
 
     /* *
@@ -744,6 +831,13 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
+    exports.ThemeTypes = void 0;
+
+    (function (ThemeTypes) {
+      ThemeTypes["DARK_THEME"] = "darkTheme";
+      ThemeTypes["LIGHT_THEME"] = "lightTheme";
+    })(exports.ThemeTypes || (exports.ThemeTypes = {}));
+
     var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
 
     var defaultButtonStyle = function defaultButtonStyle(button) {
@@ -968,8 +1062,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
@@ -1327,6 +1421,40 @@
                 fontSize: 16
               })
             }
+          },
+          MuiAccordion: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.cards.cardContainer,
+                borderRadius: '3px',
+                border: 'solid 1px',
+                borderColor: geowebColors.cards.cardContainerBorder,
+                color: geowebColors.buttons.flat["default"].color,
+                padding: '0px',
+                margin: '0px 12px 4px 12px',
+                fontSize: '12px',
+                '&:before': {
+                  display: 'none'
+                },
+                '& .MuiAccordionSummary-root.Mui-expanded': {
+                  borderBottom: 'solid 1px',
+                  borderColor: geowebColors.cards.cardContainerBorder
+                },
+                '& .MuiAccordionSummary-content': {
+                  margin: '2px',
+                  padding: '4px 4px 4px 10px'
+                }
+              }
+            }
+          },
+          MuiAccordionSummary: {
+            styleOverrides: {
+              root: {
+                minHeight: '32px',
+                padding: '0px',
+                paddingRight: '5px'
+              }
+            }
           }
         }
       });
@@ -1618,24 +1746,8 @@
           fill: '#67F0FF',
           opacity: 0.75
         },
-        playerRailObservation: {
-          fill: '#0876B6',
-          opacity: 100
-        },
-        playerRailSelection: {
-          fill: '#C6D111',
-          opacity: 0.5
-        },
-        playerRailForecastData: {
-          fill: '#FD64FF',
-          opacity: 0.6
-        },
-        playerRailForecastNoData: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         playerTimeMarkers: {
-          fill: '#2C2C2C'
+          fill: '#051039'
         },
         playerTimeText: {
           color: '#FFFFFF',
@@ -1648,15 +1760,15 @@
         },
         timelineText: {
           fontSize: 14,
-          color: '#051039',
+          color: '#FFFFFF',
           fontFamily: 'Roboto'
         },
         timelineTimeScale: {
           fill: '#979797'
         },
         timelineNightTime: {
-          fill: '#070808',
-          opacity: 0.1
+          fill: '#051038',
+          opacity: 0.67
         },
         timelineTimelineSurface: {
           fill: '#FFFFFF'
@@ -1666,8 +1778,8 @@
           opacity: 0.5
         },
         timelineSelectionBackground: {
-          fill: '#11D1C6',
-          opacity: 0.25
+          fill: '#FFFFFF',
+          opacity: 0.32
         },
         // time scale
         timeScalePointer: {
@@ -1685,6 +1797,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: {
@@ -1761,17 +1883,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',
@@ -1780,7 +1905,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: {
@@ -1811,6 +1949,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'
@@ -2381,24 +2528,8 @@
           fill: '#67F0FF',
           opacity: 0.75
         },
-        playerRailObservation: {
-          fill: '#0876B6',
-          opacity: 100
-        },
-        playerRailSelection: {
-          fill: '#C6D111',
-          opacity: 0.5
-        },
-        playerRailForecastData: {
-          fill: '#FD64FF',
-          opacity: 0.6
-        },
-        playerRailForecastNoData: {
-          fill: '#051039',
-          opacity: 0.67
-        },
         playerTimeMarkers: {
-          fill: '#2C2C2C'
+          fill: '#051039'
         },
         playerTimeText: {
           color: '#FFFFFF',
@@ -2418,8 +2549,8 @@
           fill: '#979797'
         },
         timelineNightTime: {
-          fill: '#070808',
-          opacity: 0.3
+          fill: '#051038',
+          opacity: 0.67
         },
         timelineTimelineSurface: {
           fill: '#303030'
@@ -2429,8 +2560,8 @@
           opacity: 0.5
         },
         timelineSelectionBackground: {
-          fill: '#11D1C6',
-          opacity: 0.25
+          fill: '#FFFFFF',
+          opacity: 0.32
         },
         // time scale
         timeScalePointer: {
@@ -2448,6 +2579,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: {
@@ -2524,17 +2666,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',
@@ -2543,7 +2688,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: {
@@ -2577,18 +2735,20 @@
     });
     var ThemeProvider = function ThemeProvider(_a) {
       var children = _a.children,
-          _b = _a.theme,
-          defaultTheme = _b === void 0 ? lightTheme : _b,
-          _c = _a.disableCssBaseline,
-          disableCssBaseline = _c === void 0 ? false : _c;
+          theme = _a.theme,
+          defaultThemeName = _a.defaultThemeName,
+          _b = _a.disableCssBaseline,
+          disableCssBaseline = _b === void 0 ? false : _b;
+      var defaultTheme = defaultThemeName === exports.ThemeTypes.DARK_THEME ? darkTheme : lightTheme;
 
-      var _d = __read(React__namespace.useState(false), 2),
-          isDark = _d[0],
-          setDark = _d[1];
+      var _c = __read(React__namespace.useState(defaultTheme === darkTheme), 2),
+          isDark = _c[0],
+          setDark = _c[1];
 
+      var configuredTheme = isDark ? darkTheme : lightTheme;
       var currentTheme = React__namespace.useMemo(function () {
-        return isDark ? darkTheme : defaultTheme;
-      }, [isDark, defaultTheme]);
+        return theme || configuredTheme;
+      }, [configuredTheme, theme]);
 
       var toggleTheme = function toggleTheme() {
         return setDark(!isDark);
@@ -2609,14 +2769,15 @@
 
     var ThemeWrapper = function ThemeWrapper(_a) {
       var children = _a.children,
-          _b = _a.theme,
-          theme = _b === void 0 ? lightTheme : _b,
-          _c = _a.disableCssBaseline,
-          disableCssBaseline = _c === void 0 ? false : _c;
+          theme = _a.theme,
+          defaultThemeName = _a.defaultThemeName,
+          _b = _a.disableCssBaseline,
+          disableCssBaseline = _b === void 0 ? false : _b;
       return /*#__PURE__*/React__namespace.createElement(material.StyledEngineProvider, {
         injectFirst: true
       }, /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
         theme: theme,
+        defaultThemeName: defaultThemeName,
         disableCssBaseline: disableCssBaseline
       }, children));
     }; // Wrapper for storybook stories with GWTheme. Will be deprecated
@@ -2648,6 +2809,10 @@
     exports.Clear = Clear;
     exports.Clock = Clock;
     exports.Close = Close;
+    exports.CollapseLarge = CollapseLarge;
+    exports.CollapseMedium = CollapseMedium;
+    exports.CollapseSmall = CollapseSmall;
+    exports.CollapseWindow = CollapseWindow;
     exports.Copy = Copy;
     exports.Delete = Delete;
     exports.DimensionsElevation = DimensionsElevation;
@@ -2662,6 +2827,7 @@
     exports.Equalizer = Equalizer;
     exports.Exclamation = Exclamation;
     exports.Expand = Expand;
+    exports.ExpandWindow = ExpandWindow;
     exports.Export = Export;
     exports.FastForward = FastForward;
     exports.Filter = Filter;
@@ -2696,6 +2862,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;
@@ -2711,6 +2879,7 @@
     exports.VisibilityOff = VisibilityOff;
     exports.WebAssetOff = WebAssetOff;
     exports.darkTheme = darkTheme;
+    exports.dragHandlePath = dragHandlePath;
     exports.gwButtonVariants = gwButtonVariants;
     exports.lightTheme = lightTheme;
     exports.useThemeContext = useThemeContext;

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

@@ -36,6 +36,8 @@ 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;
@@ -57,7 +59,7 @@ export declare const Flag: (props: SvgIconProps) => JSX.Element;
 interface ResizeIconProps extends SvgIconProps {
     isRightAligned?: boolean;
 }
-export declare const Resize: ({ isRightAligned, ...props }: ResizeIconProps) => JSX.Element;
+export declare const Resize: ({ isRightAligned, sx, ...props }: ResizeIconProps) => JSX.Element;
 export declare const PresetWorkspace: (props: SvgIconProps) => JSX.Element;
 export declare const Preset: (props: SvgIconProps) => JSX.Element;
 export declare const PresetTiles: (props: SvgIconProps) => JSX.Element;
@@ -79,4 +81,9 @@ export declare const DimensionsTime: (props: SvgIconProps) => JSX.Element;
 export declare const DimensionsRefTime: (props: SvgIconProps) => JSX.Element;
 export declare const DimensionsOther: (props: SvgIconProps) => JSX.Element;
 export declare const Picture: (props: SvgIconProps) => JSX.Element;
+export declare const CollapseWindow: (props: SvgIconProps) => JSX.Element;
+export declare const ExpandWindow: (props: SvgIconProps) => JSX.Element;
+export declare const CollapseLarge: (props: SvgIconProps) => JSX.Element;
+export declare const CollapseMedium: (props: SvgIconProps) => JSX.Element;
+export declare const CollapseSmall: (props: SvgIconProps) => JSX.Element;
 export {};

package/lib/components/Paths/Paths.d.ts

@@ -0,0 +1 @@
+export declare const dragHandlePath = "M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z";

package/lib/components/Paths/index.d.ts

@@ -0,0 +1 @@
+export * from './Paths';

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Theme as MUITheme } from '@mui/material';
+import { ThemeTypes } from './types';
 interface ThemeContextProps {
     toggleTheme?: () => void;
     isDark?: boolean;
@@ -8,6 +9,7 @@ export declare const ThemeContext: React.Context<Partial<ThemeContextProps>>;
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: MUITheme;
+    defaultThemeName?: ThemeTypes;
     disableCssBaseline?: boolean;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;

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

@@ -2,6 +2,10 @@
 interface CSSProperties extends React.CSSProperties {
     rgba?: string;
 }
+export declare enum ThemeTypes {
+    DARK_THEME = "darkTheme",
+    LIGHT_THEME = "lightTheme"
+}
 export declare const gwButtonVariants: readonly ["primary", "secondary", "tertiary", "flat", "tool", "boxed", "icon"];
 export declare type ButtonVariant = typeof gwButtonVariants[number];
 export interface ButtonStyle {
@@ -71,10 +75,6 @@ export declare type GeowebColorPalette = {
         playerNeedleTime: CSSProperties;
         playerNeedlePlayerTop: CSSProperties;
         playerNeedlePlayer: CSSProperties;
-        playerRailObservation: CSSProperties;
-        playerRailSelection: CSSProperties;
-        playerRailForecastData: CSSProperties;
-        playerRailForecastNoData: CSSProperties;
         playerTimeMarkers: CSSProperties;
         playerTimeText: CSSProperties;
         timelineIndicator: CSSProperties;
@@ -89,6 +89,9 @@ export declare type GeowebColorPalette = {
         timeScaleTimeIndicators: CSSProperties;
         timeScaleTimeIndicatorsActive: CSSProperties;
         timeScaleShadowButtonScale: CSSProperties;
+        ledgendObservedBackground: CSSProperties;
+        legendForecastBackground: CSSProperties;
+        legendNoDataBackground: CSSProperties;
     };
     customSlider: {
         rail: CSSProperties['color'];
@@ -135,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/Accordion.stories.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const AccordionDemo: React.FC;
+export declare const Accordion: () => React.ReactElement;

package/lib/stories/index.stories.d.ts

@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion.stories';
 export { Avatar } from './Avatar.stories';
 export { Backdrop } from './Backdrop.stories';
 export { Cards } from './Card.stories';

package/lib/stories/snapshots/Accordion.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AccordionLight: () => React.ReactElement;
+export declare const AccordionDark: () => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {