@opengeoweb/theme 4.0.0 → 4.2.0

package/README.md

@@ -320,7 +320,7 @@ 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:

package/index.esm.js

@@ -110,7 +110,8 @@ var ThumbsUp = function ThumbsUp(props) {
 };
 var Edit = function Edit(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
-    d: "m8.332 17.09-.005.001-2.652.604.956-2.542.001-.001.001-.001.857-.744 1.69 1.945-.848.738zm.71.815L20.932 7.577 17.823 4 5.933 14.329l-.01.008.005.005L4.173 19l4.857-1.09-.004-.02.019.02-.002-.005z"
+    d: "m12.718 3.807-5.214 9.426-1.3 2.325.325 5.58 4.905-2.683 6.494-11.711-5.21-2.937zM11.514 5.98l-.616 1.111 5.23 2.9.616-1.11-5.23-2.901zm-4.69 8.462-.612 1.113 5.225 2.898.616-1.11-5.23-2.901z",
+    fillRule: "evenodd"
   }));
 };
 var Export = function Export(props) {
@@ -195,91 +196,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", {
@@ -492,11 +486,6 @@ var Minus = function Minus(props) {
     d: "M13,11 L11,11 L8,11 C7.43301962,11 7,11.4597824 7,12.0268006 C7,12.5938188 7.43301962,13 8,13 L11,13 L13,13 L16,13 C16.5669804,13 17,12.5938188 17,12.0268006 C17,11.4597824 16.5669804,11 16,11 L13,11 Z"
   }));
 };
-var Sort = function Sort(props) {
-  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
-    d: "M5.5,20 L5.5,22 L3,22 L3,20 L5.5,20 Z M17,2 L20,6 L18,6 L18,18 L20,18 L17,22 L14,18 L16,18 L16,6 L14,6 L17,2 Z M7,15.5 L7,17.5 L3,17.5 L3,15.5 L7,15.5 Z M8.5,11 L8.5,13 L3,13 L3,11 L8.5,11 Z M10,6.5 L10,8.5 L3,8.5 L3,6.5 L10,6.5 Z M11.5,2 L11.5,4 L3,4 L3,2 L11.5,2 Z"
-  }));
-};
 var Equalizer = function Equalizer(props) {
   return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
     d: "M5,2 L5.00043449,14.0500973 C6.14133817,14.2819003 7,15.2906746 7,16.5 C7,17.3174727 6.60764218,18.0433054 6.00097133,18.4994531 L6,22 L3,22 L3.00004507,18.5002169 C2.39279608,18.0441159 2,17.3179292 2,16.5 C2,15.2903182 2.85916789,14.2813059 4.00057405,14.0498926 L4,2 L5,2 Z M12.5,2 L12.5004345,5.05009729 C13.6413382,5.28190033 14.5,6.29067455 14.5,7.5 C14.5,8.31747272 14.1076422,9.04330535 13.5009713,9.49945313 L13.5,22 L10.5,22 L10.5000451,9.50021694 C9.89279608,9.04411586 9.5,8.31792915 9.5,7.5 C9.5,6.29031824 10.3591679,5.2813059 11.500574,5.0498926 L11.5,2 L12.5,2 Z M20,2 L20.0004345,11.0500973 C21.1413382,11.2819003 22,12.2906746 22,13.5 C22,14.3174727 21.6076422,15.0433054 21.0009713,15.4994531 L21,22 L18,22 L18.0000451,15.5002169 C17.3927961,15.0441159 17,14.3179292 17,13.5 C17,12.2903182 17.8591679,11.2813059 19.000574,11.0498926 L19,2 L20,2 Z"
@@ -550,6 +539,42 @@ var SubdirectoryArrowRight = function SubdirectoryArrowRight(props) {
     d: "M5.08 2c.595 0 1.078.59 1.078 1.317V14.84h10.469l-3.784-3.578a1.037 1.037 0 0 1 0-1.526 1.19 1.19 0 0 1 1.614 0l6.54 6.183-6.54 6.185c-.223.21-.515.316-.807.316-.292 0-.585-.106-.807-.316a1.038 1.038 0 0 1 0-1.527L16.627 17H5.08a.912.912 0 0 1-.387-.086A1.081 1.081 0 0 1 4 15.92l.006-.1L4 15.684V3.317C4 2.59 4.483 2 5.08 2z"
   }));
 };
+var Speed = function Speed(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M13.0185689,0.0297138829 C13.2816828,0.125479523 13.375552,0.393860848 13.3173741,0.670655588 C13.2591962,0.947450328 11.1238887,11.0829138 10.7956738,11.9846767 C10.4178888,13.0226325 9.27020413,13.5578066 8.23224832,13.1800216 C7.19429251,12.8022366 6.65911834,11.6545519 7.03690336,10.6165961 C7.19777378,10.1746082 8.45223163,7.753762 9.7051842,5.37094004 L10.0053032,4.80082548 C11.2011782,2.53154866 12.314927,0.44601574 12.3776815,0.328635445 C12.5110348,0.0792023166 12.755455,-0.0660517572 13.0185689,0.0297138829 Z M19.4360969,8.53332236 C19.7202953,9.34072717 20.0334312,10.6740767 20.0334312,12.9435947 L15.8134312,12.9409726 C15.9147467,12.4409651 16.0334312,11.9234904 16.0334312,11.3935947 C16.0334312,10.7848462 15.9747709,10.1930974 15.860471,9.62582623 L19.4360969,8.53332236 Z M0.24,9.02480771 L1.14284266,9.30137886 C0.796626585,10.38249 0.683431191,11.5887966 0.683431191,12.8935947 L0.193431191,12.8935947 C-0.149932748,11.3243559 0.0281771199,9.95042242 0.233431191,9.05635532 L0.24,9.02480771 Z M7.97460351,10.9640905 C7.785711,11.4830684 8.05329808,12.0569108 8.57227599,12.2458033 C9.09125389,12.4346958 9.66509624,12.1671087 9.85398875,11.6481308 C10.0428813,11.1291529 9.77529418,10.5553105 9.25631627,10.366418 C8.73733837,10.1775255 8.16349602,10.4451126 7.97460351,10.9640905 Z M15.66294,3.32668699 C17.1046645,4.36667952 18.3549992,5.93102775 19.0441285,7.59528372 L19.048,7.60580771 L15.6041584,8.65930693 C15.2288334,7.53006422 14.6145128,6.52875923 13.7894188,5.72525838 L15.66294,3.32668699 Z M3.151,3.91680771 L4.07227289,5.23343855 C3.04988317,6.02547664 2.14199378,7.08924721 1.51712115,8.36942033 L0.504,8.05980771 L0.66653777,7.65768052 C0.946845496,6.97287844 1.22267153,6.3505113 1.58343119,5.78752126 C2.04185637,5.07211751 2.62700543,4.45259196 3.14662121,3.92267024 Z M13.5370427,2.15601523 C13.9045004,2.32031554 14.3000944,2.51472051 14.7316953,2.74422981 L14.813,2.78880771 L13.0229815,5.08063176 L12.9211263,5.01013613 C13.1339222,4.03128992 13.3442549,3.05520552 13.5370427,2.15601523 Z M8.64330378,1.36555752 L8.60273799,3.67605906 C8.53008184,3.67441939 8.45697828,3.67359473 8.38343119,3.67359473 C7.29621364,3.67359473 5.99983997,4.00544303 4.89787799,4.66702681 L3.90244703,3.24533554 C5.38148072,2.08015309 7.15804171,1.51034477 8.64330378,1.36555752 Z M9.64483088,1.31952159 C10.1808707,1.31407534 10.6831894,1.3389592 11.2036076,1.42293267 L11.1277192,1.56621248 C10.7501769,2.27968921 10.3484138,3.04068828 9.94570637,3.80634031 C9.83236728,3.78598023 9.71777754,3.76829082 9.60184741,3.75281542 L9.64483088,1.31952159 Z",
+    transform: "translate(2 6)"
+  }));
+};
+var DimensionsElevation = function DimensionsElevation(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M4,16 L4,19 L0,19 L0,16 L4,16 Z M7,11 L7,14 L0,14 L0,11 L7,11 Z M9,6 L9,9 L0,9 L0,6 L9,6 Z M12,1 L12,4 L0,4 L0,1 L12,1 Z M16,0 L13,4 L15,4 L15,16 L13,16 L16,20 L19,16 L17,16 L17,4 L19,4 L16,0 Z",
+    transform: "translate(2 2)"
+  }));
+};
+var DimensionsTime = function DimensionsTime(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.13,5 C16.0677903,5 19.26,8.19220973 19.26,12.13 C19.26,16.0677903 16.0677903,19.26 12.13,19.26 C8.19220973,19.26 5,16.0677903 5,12.13 C5,8.19220973 8.19220973,5 12.13,5 Z M5.1376547,18.0009318 L0,18 L0,15 L3.46039175,15.000536 C3.82762817,16.1102542 4.40198,17.1256503 5.1376547,18.0009318 Z M12.13,7 C9.29677923,7 7,9.29677923 7,12.13 C7,14.9632208 9.29677923,17.26 12.13,17.26 C14.9632208,17.26 17.26,14.9632208 17.26,12.13 C17.26,9.29677923 14.9632208,7 12.13,7 Z M12.547494,8.35 L12.547,11.769 L14.7493339,13.0406354 L14.0651234,14.2257228 L12.183,13.139 L11.179073,13.1394737 L11.179073,8.35 L12.547494,8.35 Z M3,12.13 C3,12.4237363 3.0138714,12.7142328 3.04099487,13.0008701 L0,13 L0,10 L3.24967033,10.0005024 C3.08643451,10.6837249 3,11.3967685 3,12.13 Z M3.98526578,8.00011679 L0,8 L0,5 L6.42694067,4.99991383 C5.41424324,5.81098129 4.57807756,6.83332299 3.98526578,8.00011679 Z M18,0 L18,3 L0,3 L0,0 L18,0 Z",
+    transform: "translate(2 2)"
+  }));
+};
+var DimensionsRefTime = function DimensionsRefTime(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M14.41,3.78240772 L14.41,5.15240772 L12.66,5.15240772 L12.6594767,6.01936211 C13.545349,6.08439076 14.3862477,6.31127801 15.1527207,6.67057174 L15.7989136,5.55168032 L16.9160864,6.19668032 L16.2670916,7.32230296 C18.0787957,8.61518068 19.26,10.7346478 19.26,13.13 C19.26,17.0677903 16.0677903,20.26 12.13,20.26 C8.19220973,20.26 5,17.0677903 5,13.13 C5,9.4490968 7.78929885,6.41966926 11.3695371,6.04007678 L11.37,5.15240772 L9.62,5.15240772 L9.62,3.78240772 L14.41,3.78240772 Z M12.13,8 C9.29677923,8 7,10.2967792 7,13.13 C7,15.9632208 9.29677923,18.26 12.13,18.26 C14.9632208,18.26 17.26,15.9632208 17.26,13.13 C17.26,10.2967792 14.9632208,8 12.13,8 Z M3.19183937,15.0007752 C3.41732809,16.0836244 3.83463472,17.0961214 4.40661658,18.0011235 L0,18 L0,15 Z M14.3819805,9.95760756 L15.3496003,10.9252274 L12.1676198,14.1072079 L11.2,13.1395881 L14.3819805,9.95760756 Z M3.55058156,10.0001683 C3.19435424,10.9763976 3,12.0305019 3,13.13 L3.002,13 L0,13 L0,10 Z M7.97195056,4.9996378 C6.60386085,5.70071412 5.43590345,6.73695253 4.57644304,7.99998836 L0,8 L0,5 Z M18,0 L18,3 L16,3 L16,2.5 L8,2.5 L8,3 L0,3 L0,0 L18,0 Z",
+    transform: "translate(2 2)"
+  }));
+};
+var DimensionsOther = function DimensionsOther(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.1376547,18.0009318 L0,18 L0,15 L3.46039175,15.000536 C3.82762817,16.1102542 4.40198,17.1256503 5.1376547,18.0009318 Z M12.5,7 L12.5,11 L16.5,11 L16.5,12.5 L12.5,12.5 L12.5,16.5 L11,16.5 L11,12.5 L7,12.5 L7,11 L11,11 L11,7 L12.5,7 Z M3,12.13 C3,12.4237363 3.0138714,12.7142328 3.04099487,13.0008701 L0,13 L0,10 L3.24967033,10.0005024 C3.08643451,10.6837249 3,11.3967685 3,12.13 Z M3.98526578,8.00011679 L0,8 L0,5 L6.42694067,4.99991383 C5.41424324,5.81098129 4.57807756,6.83332299 3.98526578,8.00011679 Z M18,0 L18,3 L0,3 L0,0 L18,0 Z",
+    transform: "translate(3 3)"
+  }));
+};
+var Picture = function Picture(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React.createElement("path", {
+    d: "M19.9986404,0 C21,0 22,1 22,2 L22,17.9956787 C22,19 21,20 20,20 L2,20 C0.8954305,20 1.3527075e-16,19.1045695 0,18 L0,2 C0,0.996459653 1,0 2,0 L19.9986404,0 Z M19.5,2.5 L2.5,2.5 L2.5,17.5 L19.5,17.5 L19.5,2.5 Z M12.8300654,7 L18,15.5204398 L4,15.5204398 L8.02614379,9 L9.81960446,11.7515969 L12.8300654,7 Z M6,4.35 C7.1045695,4.35 8,5.2454305 8,6.35 C8,7.4545695 7.1045695,8.35 6,8.35 C4.8954305,8.35 4,7.4545695 4,6.35 C4,5.2454305 4.8954305,4.35 6,4.35 Z",
+    transform: "translate(1 2)"
+  }));
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -627,7 +652,6 @@ var index = /*#__PURE__*/Object.freeze({
     List: List,
     Home: Home,
     Minus: Minus,
-    Sort: Sort,
     Equalizer: Equalizer,
     Link: Link,
     LinkOff: LinkOff,
@@ -636,7 +660,13 @@ var index = /*#__PURE__*/Object.freeze({
     WebAssetOff: WebAssetOff,
     Notifications: Notifications,
     Update: Update,
-    SubdirectoryArrowRight: SubdirectoryArrowRight
+    SubdirectoryArrowRight: SubdirectoryArrowRight,
+    Speed: Speed,
+    DimensionsElevation: DimensionsElevation,
+    DimensionsTime: DimensionsTime,
+    DimensionsRefTime: DimensionsRefTime,
+    DimensionsOther: DimensionsOther,
+    Picture: Picture
 });
 
 function _defineProperty(obj, key, value) {
@@ -726,7 +756,7 @@ function _nonIterableRest() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed'];
+var gwButtonVariants = ['primary', 'secondary', 'tertiary', 'flat', 'tool', 'boxed', 'icon'];
 
 var defaultButtonStyle = function defaultButtonStyle(button) {
   return {
@@ -1274,9 +1304,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 +1339,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 +1350,7 @@ var colors$1 = {
     surfaceBrowser: '#CFCFCF'
   },
   brand: {
-    brand: '#00547d'
+    brand: '#FFFFFF'
   },
   buttons: {
     primary: {
@@ -1463,6 +1507,33 @@ var colors$1 = {
         borderColor: 'transparent'
       }
     },
+    icon: {
+      "default": {
+        fill: 'transparent',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#E3E4E7',
+        color: '#374061',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#186DFF',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#707070',
+        borderColor: 'transparent'
+      }
+    },
     focusDefault: {
       outline: 'solid 2px #419cfe'
     }
@@ -1589,9 +1660,6 @@ var colors$1 = {
       opacity: 0.25
     },
     // time scale
-    timeScaleText: {
-      fontSize: 12
-    },
     timeScalePointer: {
       fill: '#F8F9F9'
     },
@@ -1638,7 +1706,8 @@ var colors$1 = {
     },
     tableRowDefaultCardContainer: {
       fill: '#FFFFFF',
-      border: '1px solid #EEEEEE'
+      border: '1px solid #EEEEEE',
+      borderColor: '#EEEEEE'
     },
     tableRowDisabledText: {
       color: '#767676',
@@ -1647,7 +1716,8 @@ var colors$1 = {
     },
     tableRowDisabledCardContainer: {
       fill: '#F5F5F5',
-      border: '1px solid #EEEEEE'
+      border: '1px solid #EEEEEE',
+      borderColor: '#EEEEEE'
     }
   },
   tooltips: {
@@ -1707,7 +1777,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 +2114,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 +2125,7 @@ var colors = {
     surfaceBrowser: '#181818'
   },
   brand: {
-    brand: '#404040'
+    brand: '#313131'
   },
   buttons: {
     primary: {
@@ -2209,6 +2282,33 @@ var colors = {
         borderColor: 'transparent'
       }
     },
+    icon: {
+      "default": {
+        fill: 'transparent',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      mouseOver: {
+        fill: '#494949',
+        color: '#F8F9F9',
+        borderColor: 'transparent'
+      },
+      active: {
+        fill: 'transparent',
+        color: '#7BACFF',
+        borderColor: 'transparent'
+      },
+      activeMouseOver: {
+        fill: 'rgba(24, 109, 255, 0.1)',
+        color: '#488BFD',
+        borderColor: 'transparent'
+      },
+      disabled: {
+        fill: 'transparent',
+        color: '#B4B4B4',
+        borderColor: 'transparent'
+      }
+    },
     focusDefault: {
       outline: 'solid 2px #419cfe'
     }
@@ -2335,9 +2435,6 @@ var colors = {
       opacity: 0.25
     },
     // time scale
-    timeScaleText: {
-      fontSize: 12
-    },
     timeScalePointer: {
       fill: '#F8F9F9'
     },
@@ -2384,7 +2481,8 @@ var colors = {
     },
     tableRowDefaultCardContainer: {
       fill: '#303030',
-      border: '1px solid #404040'
+      border: '1px solid #404040',
+      borderColor: '#404040'
     },
     tableRowDisabledText: {
       color: '#909090',
@@ -2393,7 +2491,8 @@ var colors = {
     },
     tableRowDisabledCardContainer: {
       fill: '#2B2B2B',
-      border: '1px solid #404040'
+      border: '1px solid #404040',
+      borderColor: '#404040'
     }
   },
   tooltips: {
@@ -2453,7 +2552,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
 
@@ -2472,8 +2574,8 @@ var elevations = {
 var darkTheme = createTheme('dark', parseColors(colors), createShadows(elevations));
 
 var ThemeContext = /*#__PURE__*/React.createContext({
-  toggleTheme: null,
-  isDark: null
+  toggleTheme: undefined,
+  isDark: undefined
 });
 var ThemeProvider = function ThemeProvider(_ref) {
   var children = _ref.children,
@@ -2532,4 +2634,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, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, Expand, Export, FastForward, Filter, Flag, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Minus, Notifications, Options, Pause, Play, Preset, PresetTiles, PresetWorkspace, Resize, Search, SliderThumb, Sort, SplitHorizontal, SplitVertical, SubdirectoryArrowRight, Success, TextIcon, ThemeContext, ThemeProvider, ThemeWrapper, ThemeWrapperOldTheme, ThumbsUp, TimeSeriesManager, UnExpand, Update, Visibility, VisibilityOff, WebAssetOff, darkTheme, gwButtonVariants, lightTheme, useThemeContext };
+export { Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, AutoUpdateActive, AutoUpdateInActive, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, Edit, Equalizer, Exclamation, Expand, Export, FastForward, Filter, Flag, GWTheme, GeoWebLogo, HamburgerMenu, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, Link, LinkOff, List, ListItem, Location, Minus, Notifications, 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 };