@opengeoweb/theme 3.0.0 → 4.1.0

package/README.md

@@ -95,21 +95,20 @@ export const Wrapper: React.FC = () => (
 
 > **note** make sure to use the ThemeProvider in unit tests too, as they will fail otherwise
 
-2.  Use the style/color in your component. The theme palette can be found as `geowebColor` property inside the `theme.palette` of the MUI Theme
+2.  Use the style/color in your component. You can do this directly by passing an style object as `sx` props or create an object with styles which could be handy if you need to reuse styles. The theme palette can be found as `geowebColor` property inside the `theme.palette` of the MUI Theme
 
 ```javascript
-const useStyles = makeStyles((theme: Theme) => ({
+const styles = {
   button: {
-    border: theme.palette.geowebColors.buttons.flatMouseOver.border,
+    border: 'geowebColors.buttons.flatMouseOver.border',
     '&:hover': {
-      backgroundColor: theme.palette.geowebColors.buttons.flatMouseOver.fill,
+      backgroundColor: 'geowebColors.buttons.flatMouseOver.fill',
     },
   },
-}));
+};
 
 const MyButton: React.FC = () => {
-  const classes = useStyles();
-  return <Button className={classes.button}>content</Button>;
+  return <Button sx={styles.button}>content</Button>;
 };
 ```
 
@@ -321,17 +320,17 @@ If there are mistakes in naming, colors are missing in the Design, contact [Didi
 
 ## Theme Stories `(lib/stories)`
 
-Contains demo stories with MUI components. Every story is build with the `StoryWrapper` component which needs links to the designs (`lib/stories/StoryWrapper.tsx`) and can be toggled from light to dark theme. It does not export anything, it only shows the MUI components in light or dark theme.
+Contains demo stories with MUI components. Every story is build with the `StoryWrapper` component and can be toggled from light to dark theme. It does not export anything, it only shows the MUI components in light or dark theme.
 
 - The **Color** story shows all the colors, styles and other properties of the defined theme. Could be handy for reviewing styling values. On the right the `geowebColor` object is shown, and these values are accessible throughout all components with the ThemeProvider wrapper. Not that more values are shown than given, this is because of the parsers that adds in some cases extra properties as for example `rgba`
 - The **Elevation** shows all elevations we currently have. These can be used for defining `box-shadow` for elements. If you want to use the elevation in code:
 
 ```javascript
-const useStyles = makeStyles((theme: Theme) => ({
+const styles = {
   header: {
-    boxShadow: theme.shadows[1], // elevation_01
+    boxShadow: 1, // elevation_01
   },
-}));
+};
 ```
 
 - The rest of the stories are for showing the MUI elements without any styling, other then the given theme styling.
@@ -449,7 +448,7 @@ This footer is only used for when the wrapper is resizable. Therefore it would m
 
 - do follow design names, if you feel the name has too much repeat in it or can be changed, ask [Didier](https://gitlab.com/didier.dezanet)! Same for missing colors .
 - do add links to design in code
-- do create shared components that are used in knmi-geoweb and reference application in the `shared` lib
+- do create shared components that are used in opengeoweb application in the `shared` lib
 - do add a ThemeProvider for components with a new theme styling. Otherwise unit tests will break
 - do discuss the library and the usage of it. If you think it can be approved please let us know!
 

package/index.esm.js

@@ -195,91 +195,84 @@ var HamburgerMenu = function HamburgerMenu(props) {
     d: "M18.693 7.732H5.306C4.584 7.732 4 7.12 4 6.366 4 5.611 4.584 5 5.306 5h13.387C19.414 5 20 5.611 20 6.366c0 .754-.586 1.366-1.307 1.366m0 5.634H5.306C4.584 13.366 4 12.754 4 12c0-.755.584-1.367 1.306-1.367h13.387c.721 0 1.307.612 1.307 1.367 0 .753-.586 1.365-1.307 1.365m0 5.634H5.306C4.584 19 4 18.388 4 17.634c0-.754.584-1.367 1.306-1.367h13.387c.721 0 1.307.613 1.307 1.367S19.414 19 18.693 19"
   }));
 };
-var GeoWebLogo = function GeoWebLogo() {
-  return /*#__PURE__*/React.createElement("svg", {
-    id: "svg4550",
-    style: {
-      width: 44,
-      height: 30
-    },
-    xmlns: "http://www.w3.org/2000/svg,Rdf:http://www.w3.org/1999/02/22-rdf-syntax-ns#,Cc:http://creativecommons.org/ns#,Dc:http://purl.org/dc/elements/1.1/",
-    height: "55.156mm",
-    viewBox: "0 0 289.84072 195.43326",
-    width: "81.799mm",
+var GeoWebLogo = function GeoWebLogo(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "47px",
+    height: "29px",
+    viewBox: "0 0 71 44",
     version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, /*#__PURE__*/React.createElement("defs", {
-    id: "defs14"
-  }, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient4263",
-    y2: "113.1",
-    gradientUnits: "userSpaceOnUse",
-    y1: "76.066",
-    gradientTransform: "translate(0 -.0012816)",
-    x2: "199.26",
-    x1: "160.9"
+  }, props), /*#__PURE__*/React.createElement("title", null, "Geoweb logo"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    x1: "16.8198885%",
+    y1: "6.54485841%",
+    x2: "57.3699143%",
+    y2: "42.3856856%",
+    id: "linearGradient-1"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop4259",
-    stopColor: "#fff",
-    stopOpacity: ".33333",
-    offset: "0"
+    stopColor: "#FFFFFF",
+    stopOpacity: "0.33333",
+    offset: "0%"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop4261",
-    stopColor: "#fff",
+    stopColor: "#FFFFFF",
     stopOpacity: "0",
-    offset: "1"
+    offset: "100%"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient4240",
-    y2: "79.833",
-    gradientUnits: "userSpaceOnUse",
-    x2: "120.82",
-    y1: "120.77",
-    x1: "128.56"
+    x1: "50.9318547%",
+    y1: "46.4796835%",
+    x2: "43.0090172%",
+    y2: "0.844973858%",
+    id: "linearGradient-2"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop4236",
-    stopColor: "#fff",
+    stopColor: "#FFFFFF",
     stopOpacity: "0",
-    offset: "0"
+    offset: "0%"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop4238",
-    stopColor: "#fff",
-    stopOpacity: ".33333",
-    offset: "1"
+    stopColor: "#FFFFFF",
+    stopOpacity: "0.33333",
+    offset: "100%"
   }))), /*#__PURE__*/React.createElement("g", {
-    id: "layer1",
-    transform: "translate(353.49 -626.07)"
+    id: "Geoweb-logo",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-0.000002, 0.000000)",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "layer1"
   }, /*#__PURE__*/React.createElement("g", {
     id: "g4"
   }, /*#__PURE__*/React.createElement("path", {
+    d: "M29.0244012,8.24968403 C22.1632139,8.25834657 16.1741523,12.832579 14.4544599,19.3776076 C13.832111,19.279281 13.20312,19.2272122 12.5728452,19.2218415 C5.62905014,19.2217232 1.99977785e-06,24.7686157 1.99977785e-06,31.6109206 C1.99977785e-06,38.4532254 6.62905014,44 12.5728452,44 C22.6625546,44 49.500002,43.9979372 53.3350238,44 C56.2372834,44 63.2828385,43.8604971 68.2761419,37.5041138 C73.2694453,31.147461 70.2632768,17.4867764 68.1881953,11.6493259 C66.1131138,5.81187538 59.6578291,0 53.3280106,0 C45.8866154,0 39.2715769,4.00456749 35.9382426,9.91929332 C33.8018082,8.82655405 31.4311891,8.25413905 29.0244012,8.24968403 Z",
     id: "path4220",
-    d: "m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z",
-    fill: "#0b9ee5"
+    fill: "#0B9EE5"
   }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.6356798,44 C22.7746907,43.937003 33.0654278,43.9720938 43.255762,43.9720938 C46.0886384,43.9720938 50.8633856,43.9748907 55.181552,43.9769417 C58.5400012,43.846454 64.6600826,42.7286231 68.900002,36.6595013 C70.4781085,33.855306 70.7241054,31.4933791 70.870002,29.9999998 C61.0123574,29.9967644 4.74480574,30.0001193 0.107164182,30.0001762 C0.0357213941,30.3929005 0,30.9706094 0,31.7333029 C0,38.2015669 6.41531361,44 12.6356798,44 Z",
     id: "path4220-7",
-    opacity: ".98",
-    d: "m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z",
-    fill: "#60bce9"
+    fill: "#60BCE9"
   })), /*#__PURE__*/React.createElement("path", {
+    d: "M53.3593361,0 C47.918804,0 42.9223401,2.15054275 39.3299564,5.62541069 C38.0351939,6.90249749 36.9198138,8.3502422 36.000002,9.92363493 C36.000002,21.1882124 36.0054345,31.3594567 36.0054345,43.9919386 C38.3685237,43.9938645 40.7366832,43.9957078 43.0921391,43.9957078 C45.9061498,43.9957078 50.6490992,43.9981839 54.9385085,44 C58.2745918,43.8844761 64.0692084,42.8948363 68.2808918,37.5217121 C73.2653764,31.1622771 70.2646844,17.4953381 68.1932872,11.6553326 C66.1218901,5.8153271 59.6782653,0.000907901172 53.3596259,0.000907901172 L53.3593361,0 Z",
     id: "path4220-2",
-    d: "m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z",
-    fill: "#fff",
-    fillOpacity: ".31373"
+    fillOpacity: "0.31373",
+    fill: "#FFFFFF"
   })), /*#__PURE__*/React.createElement("g", {
     id: "g4244",
-    transform: "translate(2.926 -1.3827)"
+    transform: "translate(20.000002, 14.500000)"
   }, /*#__PURE__*/React.createElement("path", {
+    d: "M33.2943298,6.72474814 C36.4490656,9.02287887 37.3756525,8.9287324 39.4713926,11.7544337 C40.4745953,13.1069689 40.9988188,14.8107298 41,16.5033269 C41,21.1960094 37.0027377,25.0000392 32.0720208,24.9997778 C27.1415787,24.9997778 23.1445911,21.195748 23.1445911,16.5033269 C23.1462393,16.3723481 23.1510741,16.241411 23.1590681,16.110636 C22.2077851,15.8184709 21.258837,15.606125 20.5069638,15.606125 C19.7497338,15.606125 18.7925446,15.8208605 17.8344763,16.1162571 C17.8443657,16.2451131 17.851151,16.3741703 17.8548595,16.5033269 C17.8548101,21.195748 13.8578719,24.9997778 8.92742977,24.9997778 C3.9969876,24.9997778 0,21.195748 0,16.5033269 C0.00164824231,15.5820197 0.197168239,14.6813928 0.515927314,13.8208977 C2.01967372,8.45577777 2.93181101,2.25743153 8.1156979,1.57087606 C10.3834596,1.27052764 12.4978248,3.88414447 15.0127678,3.88414447 C17.5279307,3.88407126 17.5724882,0.0722713368 21.3552043,0.0053413284 C25.9779745,-0.0763080529 29.9219437,4.26794624 33.2945221,6.72474814 L33.2943298,6.72474814 Z M31.9884,10.3640673 C28.347158,10.3640673 25.3954308,13.1732976 25.3954308,16.6387556 C25.3954308,20.1042137 28.347158,22.9134439 31.9884,22.9134439 C35.629642,22.9134439 38.5813692,20.1042137 38.5813692,16.6387556 C38.5813692,13.1732976 35.629642,10.3640673 31.9884,10.3640673 L31.9884,10.3640673 Z M8.87866927,10.3640673 C5.23742729,10.3640673 2.28570002,13.1732976 2.28570002,16.6387556 C2.28570002,20.1042137 5.23742729,22.9134439 8.87866927,22.9134439 C12.5199112,22.9134439 15.4716385,20.1042137 15.4716385,16.6387556 C15.4716385,13.1732976 12.5199112,10.3640673 8.87866927,10.3640673 L8.87866927,10.3640673 Z",
     id: "path4329",
-    fill: "#003232",
-    d: "m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"
+    fill: "#003232"
   }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.3777369,1.23152 C17.7953855,1.80024206 17.3777758,2.40363177 16.8938244,2.93721557 C16.7477214,3.09830251 16.551869,3.28208813 16.3862482,3.40648382 C16.0550064,3.65530136 15.686377,3.82759384 15.2412692,3.87167353 C15.1670845,3.87902014 15.0907654,3.88290522 15.012169,3.88290783 C16.4111971,7.35960803 18.259481,10.684147 20.50631,15.6045484 C21.2581832,15.6045484 22.2071313,15.8168943 23.1584143,16.1090595 C23.1504203,16.2398345 23.1455855,16.3707663 23.1439372,16.5017504 C23.1439372,18.7013163 24.021901,20.7057916 25.4628494,22.2148541 C25.5589117,22.3154426 25.6575095,22.4133931 25.7584891,22.509503 C27.3740413,24.0470369 29.6063108,24.998332 32.0712571,24.998332 C32.2253403,24.998332 32.3783796,24.9944364 32.5305399,24.9870898 C33.4435562,24.9430912 34.3203662,24.7689529 35.1408063,24.4831016 C35.4142881,24.3878153 35.6816495,24.2796919 35.941852,24.1603735 C36.3321558,23.9814063 36.7064442,23.7766502 37.0626843,23.5475979 C39.4375267,22.0207571 40.9992363,19.4348012 40.9992363,16.5019073 C40.9981375,14.8093101 40.4264996,13.1363214 39.4706289,11.753014 C37.5293291,8.94378381 35.4368306,8.41618711 33.2935662,6.7233285 C30.0479023,4.15990918 25.8852664,0 21.5836287,0 C19.877588,0 19.0182769,0.606161033 18.3777974,1.23172131 L18.3777369,1.23152 Z M31.9875484,10.3622372 C33.3530073,10.3622372 34.6213297,10.7575164 35.6735676,11.4340586 C35.8489406,11.5468173 36.018325,11.6672051 36.1811164,11.7950884 C36.3439243,11.9229614 36.5003809,12.0580763 36.6495194,12.200015 C37.8425996,13.3354983 38.5805176,14.9041442 38.5805176,16.6370039 C38.5805176,19.9942236 35.810097,22.7354781 32.3265369,22.9035874 C32.2141652,22.9089993 32.1012359,22.9117445 31.9874385,22.9117445 C30.6221445,22.9117445 29.3536022,22.5168313 28.3014193,21.8404461 C28.3012984,21.8403676 28.3008699,21.8405219 28.3008699,21.8404461 C26.5471401,20.7128584 25.3944693,18.8029741 25.3944693,16.6371608 C25.3944693,14.9044318 26.1323874,13.335629 27.3254676,12.2001719 C27.4746005,12.0582358 27.6310517,11.9231182 27.7938705,11.7952453 C27.9566784,11.6673724 28.1255244,11.5469847 28.3008974,11.4342154 C29.3531352,10.7576472 30.6219796,10.3623941 31.987466,10.3623941 L31.9875484,10.3622372 Z",
     id: "path4329-2",
-    fill: "url(#linearGradient4263)",
-    d: "m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z"
+    fill: "url(#linearGradient-1)"
   }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.54047741,1.54734597 C8.39980543,1.54470276 8.25835327,1.55206506 8.11660443,1.57083684 C2.93260766,2.25739231 2.02085496,8.456 0.517108554,13.8211199 C0.198338491,14.681615 0.00260971699,15.5821896 0.000961474681,16.5035492 C0.000961474681,21.1959702 3.99794908,25 8.92839124,25 C13.8588334,25 17.855821,21.1959702 17.855821,16.5035492 C17.8521125,16.3743899 17.8453272,16.2453405 17.8354377,16.1164793 C18.7972421,15.8531777 19.4247005,15.6277596 20.4971568,15.6132493 C19.1526306,12.6387856 16.571593,7.26948259 15.0137293,3.88402682 C12.6559736,3.88402708 10.6505572,1.58699416 8.54025765,1.5473329 L8.54047741,1.54734597 Z M8.8795758,10.3640673 C12.5208178,10.3640673 15.472545,13.1732976 15.472545,16.6387556 C15.472545,20.1042137 12.5208178,22.9134439 8.8795758,22.9134439 C5.23833383,22.9134439 2.28660656,20.1042137 2.28660656,16.6387556 C2.28660656,13.1732976 5.23833383,10.3640673 8.8795758,10.3640673 L8.8795758,10.3640673 Z",
     id: "path4329-7",
-    d: "m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z",
-    fill: "url(#linearGradient4240)"
-  })));
+    fill: "url(#linearGradient-2)"
+  })))));
 };
 var Add = function Add(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
@@ -1274,9 +1267,23 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
             color: geowebColors.snackbar.text,
             fontSize: '16px',
             letterSpacing: '0.44px',
-            borderRadius: '2px'
+            borderRadius: '2px',
+            boxShadow: shadows[8]
           }
         }
+      },
+      MuiAvatar: {
+        styleOverrides: {
+          root: Object.assign(Object.assign({}, defaultButtonStyle(geowebColors.buttons.primary)), {
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: 'geowebColors.buttons.primary.default.fill'
+            },
+            height: 32,
+            width: 32,
+            fontSize: 16
+          })
+        }
       }
     }
   });
@@ -1295,8 +1302,8 @@ var createTheme = function createTheme(paletteType, geowebColors, shadows) {
  * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var colors$1 = {
@@ -1306,7 +1313,7 @@ var colors$1 = {
     surfaceBrowser: '#CFCFCF'
   },
   brand: {
-    brand: '#00547d'
+    brand: '#FFFFFF'
   },
   buttons: {
     primary: {
@@ -1589,9 +1596,6 @@ var colors$1 = {
       opacity: 0.25
     },
     // time scale
-    timeScaleText: {
-      fontSize: 12
-    },
     timeScalePointer: {
       fill: '#F8F9F9'
     },
@@ -1638,7 +1642,8 @@ var colors$1 = {
     },
     tableRowDefaultCardContainer: {
       fill: '#FFFFFF',
-      border: '1px solid #EEEEEE'
+      border: '1px solid #EEEEEE',
+      borderColor: '#EEEEEE'
     },
     tableRowDisabledText: {
       color: '#767676',
@@ -1647,7 +1652,8 @@ var colors$1 = {
     },
     tableRowDisabledCardContainer: {
       fill: '#F5F5F5',
-      border: '1px solid #EEEEEE'
+      border: '1px solid #EEEEEE',
+      borderColor: '#EEEEEE'
     }
   },
   tooltips: {
@@ -1707,7 +1713,10 @@ var colors$1 = {
     background: '#051039',
     text: '#FFFFFF',
     action: '#98e1f1',
-    actionHover: '#494949'
+    actionHover: {
+      fill: '#7BACFF',
+      opacity: 0.2
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -2041,8 +2050,8 @@ var GWTheme = createTheme$1({
  * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var colors = {
@@ -2052,7 +2061,7 @@ var colors = {
     surfaceBrowser: '#181818'
   },
   brand: {
-    brand: '#404040'
+    brand: '#313131'
   },
   buttons: {
     primary: {
@@ -2335,9 +2344,6 @@ var colors = {
       opacity: 0.25
     },
     // time scale
-    timeScaleText: {
-      fontSize: 12
-    },
     timeScalePointer: {
       fill: '#F8F9F9'
     },
@@ -2384,7 +2390,8 @@ var colors = {
     },
     tableRowDefaultCardContainer: {
       fill: '#303030',
-      border: '1px solid #404040'
+      border: '1px solid #404040',
+      borderColor: '#404040'
     },
     tableRowDisabledText: {
       color: '#909090',
@@ -2393,7 +2400,8 @@ var colors = {
     },
     tableRowDisabledCardContainer: {
       fill: '#2B2B2B',
-      border: '1px solid #404040'
+      border: '1px solid #404040',
+      borderColor: '#404040'
     }
   },
   tooltips: {
@@ -2453,7 +2461,10 @@ var colors = {
     background: '#051039',
     text: '#FFFFFF',
     action: '#98e1f1',
-    actionHover: '#494949'
+    actionHover: {
+      fill: '#7BACFF',
+      opacity: 0.2
+    }
   }
 }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

package/index.umd.js

@@ -246,91 +246,84 @@
         d: "M18.693 7.732H5.306C4.584 7.732 4 7.12 4 6.366 4 5.611 4.584 5 5.306 5h13.387C19.414 5 20 5.611 20 6.366c0 .754-.586 1.366-1.307 1.366m0 5.634H5.306C4.584 13.366 4 12.754 4 12c0-.755.584-1.367 1.306-1.367h13.387c.721 0 1.307.612 1.307 1.367 0 .753-.586 1.365-1.307 1.365m0 5.634H5.306C4.584 19 4 18.388 4 17.634c0-.754.584-1.367 1.306-1.367h13.387c.721 0 1.307.613 1.307 1.367S19.414 19 18.693 19"
       }));
     };
-    var GeoWebLogo = function GeoWebLogo() {
-      return /*#__PURE__*/React__namespace.createElement("svg", {
-        id: "svg4550",
-        style: {
-          width: 44,
-          height: 30
-        },
-        xmlns: "http://www.w3.org/2000/svg,Rdf:http://www.w3.org/1999/02/22-rdf-syntax-ns#,Cc:http://creativecommons.org/ns#,Dc:http://purl.org/dc/elements/1.1/",
-        height: "55.156mm",
-        viewBox: "0 0 289.84072 195.43326",
-        width: "81.799mm",
+    var GeoWebLogo = function GeoWebLogo(props) {
+      return /*#__PURE__*/React__namespace.createElement("svg", __assign({
+        width: "47px",
+        height: "29px",
+        viewBox: "0 0 71 44",
         version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
         xmlnsXlink: "http://www.w3.org/1999/xlink"
-      }, /*#__PURE__*/React__namespace.createElement("defs", {
-        id: "defs14"
-      }, /*#__PURE__*/React__namespace.createElement("linearGradient", {
-        id: "linearGradient4263",
-        y2: "113.1",
-        gradientUnits: "userSpaceOnUse",
-        y1: "76.066",
-        gradientTransform: "translate(0 -.0012816)",
-        x2: "199.26",
-        x1: "160.9"
+      }, props), /*#__PURE__*/React__namespace.createElement("title", null, "Geoweb logo"), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+        x1: "16.8198885%",
+        y1: "6.54485841%",
+        x2: "57.3699143%",
+        y2: "42.3856856%",
+        id: "linearGradient-1"
       }, /*#__PURE__*/React__namespace.createElement("stop", {
-        id: "stop4259",
-        stopColor: "#fff",
-        stopOpacity: ".33333",
-        offset: "0"
+        stopColor: "#FFFFFF",
+        stopOpacity: "0.33333",
+        offset: "0%"
       }), /*#__PURE__*/React__namespace.createElement("stop", {
-        id: "stop4261",
-        stopColor: "#fff",
+        stopColor: "#FFFFFF",
         stopOpacity: "0",
-        offset: "1"
+        offset: "100%"
       })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
-        id: "linearGradient4240",
-        y2: "79.833",
-        gradientUnits: "userSpaceOnUse",
-        x2: "120.82",
-        y1: "120.77",
-        x1: "128.56"
+        x1: "50.9318547%",
+        y1: "46.4796835%",
+        x2: "43.0090172%",
+        y2: "0.844973858%",
+        id: "linearGradient-2"
       }, /*#__PURE__*/React__namespace.createElement("stop", {
-        id: "stop4236",
-        stopColor: "#fff",
+        stopColor: "#FFFFFF",
         stopOpacity: "0",
-        offset: "0"
+        offset: "0%"
       }), /*#__PURE__*/React__namespace.createElement("stop", {
-        id: "stop4238",
-        stopColor: "#fff",
-        stopOpacity: ".33333",
-        offset: "1"
+        stopColor: "#FFFFFF",
+        stopOpacity: "0.33333",
+        offset: "100%"
       }))), /*#__PURE__*/React__namespace.createElement("g", {
-        id: "layer1",
-        transform: "translate(353.49 -626.07)"
+        id: "Geoweb-logo",
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        transform: "translate(-0.000002, 0.000000)",
+        fillRule: "nonzero"
+      }, /*#__PURE__*/React__namespace.createElement("g", {
+        id: "layer1"
       }, /*#__PURE__*/React__namespace.createElement("g", {
         id: "g4"
       }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M29.0244012,8.24968403 C22.1632139,8.25834657 16.1741523,12.832579 14.4544599,19.3776076 C13.832111,19.279281 13.20312,19.2272122 12.5728452,19.2218415 C5.62905014,19.2217232 1.99977785e-06,24.7686157 1.99977785e-06,31.6109206 C1.99977785e-06,38.4532254 6.62905014,44 12.5728452,44 C22.6625546,44 49.500002,43.9979372 53.3350238,44 C56.2372834,44 63.2828385,43.8604971 68.2761419,37.5041138 C73.2694453,31.147461 70.2632768,17.4867764 68.1881953,11.6493259 C66.1131138,5.81187538 59.6578291,0 53.3280106,0 C45.8866154,0 39.2715769,4.00456749 35.9382426,9.91929332 C33.8018082,8.82655405 31.4311891,8.25413905 29.0244012,8.24968403 Z",
         id: "path4220",
-        d: "m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z",
-        fill: "#0b9ee5"
+        fill: "#0B9EE5"
       }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M12.6356798,44 C22.7746907,43.937003 33.0654278,43.9720938 43.255762,43.9720938 C46.0886384,43.9720938 50.8633856,43.9748907 55.181552,43.9769417 C58.5400012,43.846454 64.6600826,42.7286231 68.900002,36.6595013 C70.4781085,33.855306 70.7241054,31.4933791 70.870002,29.9999998 C61.0123574,29.9967644 4.74480574,30.0001193 0.107164182,30.0001762 C0.0357213941,30.3929005 0,30.9706094 0,31.7333029 C0,38.2015669 6.41531361,44 12.6356798,44 Z",
         id: "path4220-7",
-        opacity: ".98",
-        d: "m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z",
-        fill: "#60bce9"
+        fill: "#60BCE9"
       })), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M53.3593361,0 C47.918804,0 42.9223401,2.15054275 39.3299564,5.62541069 C38.0351939,6.90249749 36.9198138,8.3502422 36.000002,9.92363493 C36.000002,21.1882124 36.0054345,31.3594567 36.0054345,43.9919386 C38.3685237,43.9938645 40.7366832,43.9957078 43.0921391,43.9957078 C45.9061498,43.9957078 50.6490992,43.9981839 54.9385085,44 C58.2745918,43.8844761 64.0692084,42.8948363 68.2808918,37.5217121 C73.2653764,31.1622771 70.2646844,17.4953381 68.1932872,11.6553326 C66.1218901,5.8153271 59.6782653,0.000907901172 53.3596259,0.000907901172 L53.3593361,0 Z",
         id: "path4220-2",
-        d: "m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z",
-        fill: "#fff",
-        fillOpacity: ".31373"
+        fillOpacity: "0.31373",
+        fill: "#FFFFFF"
       })), /*#__PURE__*/React__namespace.createElement("g", {
         id: "g4244",
-        transform: "translate(2.926 -1.3827)"
+        transform: "translate(20.000002, 14.500000)"
       }, /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M33.2943298,6.72474814 C36.4490656,9.02287887 37.3756525,8.9287324 39.4713926,11.7544337 C40.4745953,13.1069689 40.9988188,14.8107298 41,16.5033269 C41,21.1960094 37.0027377,25.0000392 32.0720208,24.9997778 C27.1415787,24.9997778 23.1445911,21.195748 23.1445911,16.5033269 C23.1462393,16.3723481 23.1510741,16.241411 23.1590681,16.110636 C22.2077851,15.8184709 21.258837,15.606125 20.5069638,15.606125 C19.7497338,15.606125 18.7925446,15.8208605 17.8344763,16.1162571 C17.8443657,16.2451131 17.851151,16.3741703 17.8548595,16.5033269 C17.8548101,21.195748 13.8578719,24.9997778 8.92742977,24.9997778 C3.9969876,24.9997778 0,21.195748 0,16.5033269 C0.00164824231,15.5820197 0.197168239,14.6813928 0.515927314,13.8208977 C2.01967372,8.45577777 2.93181101,2.25743153 8.1156979,1.57087606 C10.3834596,1.27052764 12.4978248,3.88414447 15.0127678,3.88414447 C17.5279307,3.88407126 17.5724882,0.0722713368 21.3552043,0.0053413284 C25.9779745,-0.0763080529 29.9219437,4.26794624 33.2945221,6.72474814 L33.2943298,6.72474814 Z M31.9884,10.3640673 C28.347158,10.3640673 25.3954308,13.1732976 25.3954308,16.6387556 C25.3954308,20.1042137 28.347158,22.9134439 31.9884,22.9134439 C35.629642,22.9134439 38.5813692,20.1042137 38.5813692,16.6387556 C38.5813692,13.1732976 35.629642,10.3640673 31.9884,10.3640673 L31.9884,10.3640673 Z M8.87866927,10.3640673 C5.23742729,10.3640673 2.28570002,13.1732976 2.28570002,16.6387556 C2.28570002,20.1042137 5.23742729,22.9134439 8.87866927,22.9134439 C12.5199112,22.9134439 15.4716385,20.1042137 15.4716385,16.6387556 C15.4716385,13.1732976 12.5199112,10.3640673 8.87866927,10.3640673 L8.87866927,10.3640673 Z",
         id: "path4329",
-        fill: "#003232",
-        d: "m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"
+        fill: "#003232"
       }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M18.3777369,1.23152 C17.7953855,1.80024206 17.3777758,2.40363177 16.8938244,2.93721557 C16.7477214,3.09830251 16.551869,3.28208813 16.3862482,3.40648382 C16.0550064,3.65530136 15.686377,3.82759384 15.2412692,3.87167353 C15.1670845,3.87902014 15.0907654,3.88290522 15.012169,3.88290783 C16.4111971,7.35960803 18.259481,10.684147 20.50631,15.6045484 C21.2581832,15.6045484 22.2071313,15.8168943 23.1584143,16.1090595 C23.1504203,16.2398345 23.1455855,16.3707663 23.1439372,16.5017504 C23.1439372,18.7013163 24.021901,20.7057916 25.4628494,22.2148541 C25.5589117,22.3154426 25.6575095,22.4133931 25.7584891,22.509503 C27.3740413,24.0470369 29.6063108,24.998332 32.0712571,24.998332 C32.2253403,24.998332 32.3783796,24.9944364 32.5305399,24.9870898 C33.4435562,24.9430912 34.3203662,24.7689529 35.1408063,24.4831016 C35.4142881,24.3878153 35.6816495,24.2796919 35.941852,24.1603735 C36.3321558,23.9814063 36.7064442,23.7766502 37.0626843,23.5475979 C39.4375267,22.0207571 40.9992363,19.4348012 40.9992363,16.5019073 C40.9981375,14.8093101 40.4264996,13.1363214 39.4706289,11.753014 C37.5293291,8.94378381 35.4368306,8.41618711 33.2935662,6.7233285 C30.0479023,4.15990918 25.8852664,0 21.5836287,0 C19.877588,0 19.0182769,0.606161033 18.3777974,1.23172131 L18.3777369,1.23152 Z M31.9875484,10.3622372 C33.3530073,10.3622372 34.6213297,10.7575164 35.6735676,11.4340586 C35.8489406,11.5468173 36.018325,11.6672051 36.1811164,11.7950884 C36.3439243,11.9229614 36.5003809,12.0580763 36.6495194,12.200015 C37.8425996,13.3354983 38.5805176,14.9041442 38.5805176,16.6370039 C38.5805176,19.9942236 35.810097,22.7354781 32.3265369,22.9035874 C32.2141652,22.9089993 32.1012359,22.9117445 31.9874385,22.9117445 C30.6221445,22.9117445 29.3536022,22.5168313 28.3014193,21.8404461 C28.3012984,21.8403676 28.3008699,21.8405219 28.3008699,21.8404461 C26.5471401,20.7128584 25.3944693,18.8029741 25.3944693,16.6371608 C25.3944693,14.9044318 26.1323874,13.335629 27.3254676,12.2001719 C27.4746005,12.0582358 27.6310517,11.9231182 27.7938705,11.7952453 C27.9566784,11.6673724 28.1255244,11.5469847 28.3008974,11.4342154 C29.3531352,10.7576472 30.6219796,10.3623941 31.987466,10.3623941 L31.9875484,10.3622372 Z",
         id: "path4329-2",
-        fill: "url(#linearGradient4263)",
-        d: "m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z"
+        fill: "url(#linearGradient-1)"
       }), /*#__PURE__*/React__namespace.createElement("path", {
+        d: "M8.54047741,1.54734597 C8.39980543,1.54470276 8.25835327,1.55206506 8.11660443,1.57083684 C2.93260766,2.25739231 2.02085496,8.456 0.517108554,13.8211199 C0.198338491,14.681615 0.00260971699,15.5821896 0.000961474681,16.5035492 C0.000961474681,21.1959702 3.99794908,25 8.92839124,25 C13.8588334,25 17.855821,21.1959702 17.855821,16.5035492 C17.8521125,16.3743899 17.8453272,16.2453405 17.8354377,16.1164793 C18.7972421,15.8531777 19.4247005,15.6277596 20.4971568,15.6132493 C19.1526306,12.6387856 16.571593,7.26948259 15.0137293,3.88402682 C12.6559736,3.88402708 10.6505572,1.58699416 8.54025765,1.5473329 L8.54047741,1.54734597 Z M8.8795758,10.3640673 C12.5208178,10.3640673 15.472545,13.1732976 15.472545,16.6387556 C15.472545,20.1042137 12.5208178,22.9134439 8.8795758,22.9134439 C5.23833383,22.9134439 2.28660656,20.1042137 2.28660656,16.6387556 C2.28660656,13.1732976 5.23833383,10.3640673 8.8795758,10.3640673 L8.8795758,10.3640673 Z",
         id: "path4329-7",
-        d: "m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z",
-        fill: "url(#linearGradient4240)"
-      })));
+        fill: "url(#linearGradient-2)"
+      })))));
     };
     var Add = function Add(props) {
       return /*#__PURE__*/React__namespace.createElement(material.SvgIcon, __assign({}, props), /*#__PURE__*/React__namespace.createElement("path", {
@@ -1261,9 +1254,23 @@
                 color: geowebColors.snackbar.text,
                 fontSize: '16px',
                 letterSpacing: '0.44px',
-                borderRadius: '2px'
+                borderRadius: '2px',
+                boxShadow: shadows[8]
               }
             }
+          },
+          MuiAvatar: {
+            styleOverrides: {
+              root: __assign(__assign({}, defaultButtonStyle(geowebColors.buttons.primary)), {
+                fontWeight: 500,
+                '&:hover': {
+                  backgroundColor: 'geowebColors.buttons.primary.default.fill'
+                },
+                height: 32,
+                width: 32,
+                fontSize: 16
+              })
+            }
           }
         }
       });
@@ -1282,8 +1289,8 @@
      * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var colors$1 = {
@@ -1293,7 +1300,7 @@
         surfaceBrowser: '#CFCFCF'
       },
       brand: {
-        brand: '#00547d'
+        brand: '#FFFFFF'
       },
       buttons: {
         primary: {
@@ -1576,9 +1583,6 @@
           opacity: 0.25
         },
         // time scale
-        timeScaleText: {
-          fontSize: 12
-        },
         timeScalePointer: {
           fill: '#F8F9F9'
         },
@@ -1625,7 +1629,8 @@
         },
         tableRowDefaultCardContainer: {
           fill: '#FFFFFF',
-          border: '1px solid #EEEEEE'
+          border: '1px solid #EEEEEE',
+          borderColor: '#EEEEEE'
         },
         tableRowDisabledText: {
           color: '#767676',
@@ -1634,7 +1639,8 @@
         },
         tableRowDisabledCardContainer: {
           fill: '#F5F5F5',
-          border: '1px solid #EEEEEE'
+          border: '1px solid #EEEEEE',
+          borderColor: '#EEEEEE'
         }
       },
       tooltips: {
@@ -1694,7 +1700,10 @@
         background: '#051039',
         text: '#FFFFFF',
         action: '#98e1f1',
-        actionHover: '#494949'
+        actionHover: {
+          fill: '#7BACFF',
+          opacity: 0.2
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
 
@@ -2012,8 +2021,8 @@
      * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var colors = {
@@ -2023,7 +2032,7 @@
         surfaceBrowser: '#181818'
       },
       brand: {
-        brand: '#404040'
+        brand: '#313131'
       },
       buttons: {
         primary: {
@@ -2306,9 +2315,6 @@
           opacity: 0.25
         },
         // time scale
-        timeScaleText: {
-          fontSize: 12
-        },
         timeScalePointer: {
           fill: '#F8F9F9'
         },
@@ -2355,7 +2361,8 @@
         },
         tableRowDefaultCardContainer: {
           fill: '#303030',
-          border: '1px solid #404040'
+          border: '1px solid #404040',
+          borderColor: '#404040'
         },
         tableRowDisabledText: {
           color: '#909090',
@@ -2364,7 +2371,8 @@
         },
         tableRowDisabledCardContainer: {
           fill: '#2B2B2B',
-          border: '1px solid #404040'
+          border: '1px solid #404040',
+          borderColor: '#404040'
         }
       },
       tooltips: {
@@ -2424,7 +2432,10 @@
         background: '#051039',
         text: '#FFFFFF',
         action: '#98e1f1',
-        actionHover: '#494949'
+        actionHover: {
+          fill: '#7BACFF',
+          opacity: 0.2
+        }
       }
     }; // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
 

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

@@ -82,7 +82,6 @@ export declare type GeowebColorPalette = {
         timelineTimelineSurface: CSSProperties;
         timelineMonthChangeDash: CSSProperties;
         timelineSelectionBackground: CSSProperties;
-        timeScaleText: CSSProperties;
         timeScalePointer: CSSProperties;
         timeScaleHorizontalScale: CSSProperties;
         timeScaleTimeIndicators: CSSProperties;
@@ -139,7 +138,7 @@ export declare type GeowebColorPalette = {
         background: CSSProperties['color'];
         text: CSSProperties['color'];
         action: CSSProperties['color'];
-        actionHover: CSSProperties['color'];
+        actionHover: CSSProperties;
     };
 };
 export declare type Elevations = {

package/lib/stories/Avatar.stories.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare const AvatarDemo: React.FC;
+export declare const Avatar: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Breakpoints.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const BreakpointDemo: React.FC;
-export declare const Breakpoints: React.FC;
+export declare const Breakpoints: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

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

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

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

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

package/lib/stories/Colors.stories.d.ts

@@ -3,5 +3,13 @@ interface ColorsDemoProps {
     showSourceCode?: boolean;
 }
 export declare const ColorsDemo: React.FC<ColorsDemoProps>;
-export declare const Colors: React.FC;
+export declare const Colors: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
 export {};

package/lib/stories/Elevation.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const ElevationDemo: React.FC;
-export declare const Elevation: React.FC;
+export declare const Elevation: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/FormElements.stories.d.ts

@@ -1,4 +1,12 @@
 import * as React from 'react';
 export declare const FormElementsDemo: React.FC;
 export declare const FormElementsGWTheme: React.FC;
-export declare const FormElements: React.FC;
+export declare const FormElements: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

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

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

package/lib/stories/List.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const ListDemo: React.FC;
-export declare const List: React.FC;
+export declare const List: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/MenuItem.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const MenuItemDemo: React.FC;
-export declare const MenuItem: () => React.ReactElement;
+export declare const MenuItem: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Slider.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const SliderDemo: React.FC;
-export declare const Slider: React.FC;
+export declare const Slider: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Snackbar.stories.d.ts

@@ -4,5 +4,13 @@ interface SnackbarDemoProps {
     handleClose?: () => void;
 }
 export declare const SnackbarDemo: React.FC<SnackbarDemoProps>;
-export declare const Snackbar: React.FC;
+export declare const Snackbar: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
 export {};

package/lib/stories/StoryWrapper.d.ts

@@ -2,8 +2,6 @@ import * as React from 'react';
 interface StoryLayoutProps {
     children: React.ReactNode;
     title: string;
-    linkToLightThemeDesign?: string;
-    linkToDarkThemeDesign?: string;
 }
 export declare const StoryWrapper: React.FC<StoryLayoutProps>;
 export {};

package/lib/stories/Switch.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const SwitchDemo: React.FC;
-export declare const Switch: React.FC;
+export declare const Switch: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Table.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const TableDemo: React.FC;
-export declare const Table: React.FC;
+export declare const Table: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Tabs.stories.d.ts

@@ -4,5 +4,13 @@ interface TabsDemoProps {
     onChange?: (event: React.ChangeEvent, index: number) => void;
 }
 export declare const TabsDemo: React.FC<TabsDemoProps>;
-export declare const Tabs: React.FC;
+export declare const Tabs: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
 export {};

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

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

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

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

package/lib/stories/Tooltip.stories.d.ts

@@ -1,3 +1,11 @@
 import * as React from 'react';
 export declare const TooltipDemo: React.FC;
-export declare const Tooltips: React.FC;
+export declare const Tooltips: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/stories/Typography.stories.d.ts

@@ -1,4 +1,12 @@
 import * as React from 'react';
 export declare const TypographyDemo: React.FC;
 export declare const TypographyGWTheme: React.FC;
-export declare const Typography: React.FC;
+export declare const Typography: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

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

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

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

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

package/package.json

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