@opengeoweb/webmap-react 6.1.1 → 7.0.0

package/index.esm.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { Component, forwardRef, useContext, useRef, useState, useEffect } from 'react';
+import React__default, { Component, forwardRef, useContext, useRef, useState, useEffect, cloneElement, useCallback, isValidElement, createRef, PureComponent } from 'react';
 import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getMapImageStore, LayerType, WMBBOX, debug, DebugType, WMLayer, WMJSMap, tilesettings } from '@opengeoweb/webmap';
-import { CustomTooltip, dateUtils } from '@opengeoweb/shared';
+import { CustomTooltip, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
+import { findDOMNode } from 'react-dom';
+import { Home, Add, Minus } from '@opengeoweb/theme';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -171,7 +173,7 @@ var $documentAll = documentAll_1;
 
 var documentAll = $documentAll.all;
 
-var isObject$7 = $documentAll.IS_HTMLDDA ? function (it) {
+var isObject$b = $documentAll.IS_HTMLDDA ? function (it) {
   return typeof it == 'object' ? it !== null : isCallable$g(it) || it === documentAll;
 } : function (it) {
   return typeof it == 'object' ? it !== null : isCallable$g(it);
@@ -255,7 +257,7 @@ var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
 var $Object$3 = Object;
 
-var isSymbol$2 = USE_SYMBOL_AS_UID$1 ? function (it) {
+var isSymbol$4 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return typeof it == 'symbol';
 } : function (it) {
   var $Symbol = getBuiltIn$2('Symbol');
@@ -295,7 +297,7 @@ var getMethod$2 = function (V, P) {
 
 var call$9 = functionCall;
 var isCallable$c = isCallable$h;
-var isObject$6 = isObject$7;
+var isObject$a = isObject$b;
 
 var $TypeError$6 = TypeError;
 
@@ -303,9 +305,9 @@ var $TypeError$6 = TypeError;
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
 var ordinaryToPrimitive$1 = function (input, pref) {
   var fn, val;
-  if (pref === 'string' && isCallable$c(fn = input.toString) && !isObject$6(val = call$9(fn, input))) return val;
-  if (isCallable$c(fn = input.valueOf) && !isObject$6(val = call$9(fn, input))) return val;
-  if (pref !== 'string' && isCallable$c(fn = input.toString) && !isObject$6(val = call$9(fn, input))) return val;
+  if (pref === 'string' && isCallable$c(fn = input.toString) && !isObject$a(val = call$9(fn, input))) return val;
+  if (isCallable$c(fn = input.valueOf) && !isObject$a(val = call$9(fn, input))) return val;
+  if (pref !== 'string' && isCallable$c(fn = input.toString) && !isObject$a(val = call$9(fn, input))) return val;
   throw $TypeError$6("Can't convert object to primitive value");
 };
 
@@ -357,13 +359,13 @@ var toObject$6 = function (argument) {
 var uncurryThis$g = functionUncurryThis;
 var toObject$5 = toObject$6;
 
-var hasOwnProperty$2 = uncurryThis$g({}.hasOwnProperty);
+var hasOwnProperty$3 = uncurryThis$g({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
 // eslint-disable-next-line es/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
-  return hasOwnProperty$2(toObject$5(it), key);
+  return hasOwnProperty$3(toObject$5(it), key);
 };
 
 var uncurryThis$f = functionUncurryThis;
@@ -383,21 +385,21 @@ var uid$1 = uid$2;
 var NATIVE_SYMBOL = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
-var Symbol$2 = global$b.Symbol;
+var Symbol$5 = global$b.Symbol;
 var WellKnownSymbolsStore = shared$3('wks');
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2['for'] || Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$1;
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$5['for'] || Symbol$5 : Symbol$5 && Symbol$5.withoutSetter || uid$1;
 
 var wellKnownSymbol$a = function (name) {
   if (!hasOwn$9(WellKnownSymbolsStore, name)) {
-    WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$9(Symbol$2, name)
-      ? Symbol$2[name]
+    WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$9(Symbol$5, name)
+      ? Symbol$5[name]
       : createWellKnownSymbol('Symbol.' + name);
   } return WellKnownSymbolsStore[name];
 };
 
 var call$8 = functionCall;
-var isObject$5 = isObject$7;
-var isSymbol$1 = isSymbol$2;
+var isObject$9 = isObject$b;
+var isSymbol$3 = isSymbol$4;
 var getMethod$1 = getMethod$2;
 var ordinaryToPrimitive = ordinaryToPrimitive$1;
 var wellKnownSymbol$9 = wellKnownSymbol$a;
@@ -408,13 +410,13 @@ var TO_PRIMITIVE = wellKnownSymbol$9('toPrimitive');
 // `ToPrimitive` abstract operation
 // https://tc39.es/ecma262/#sec-toprimitive
 var toPrimitive$1 = function (input, pref) {
-  if (!isObject$5(input) || isSymbol$1(input)) return input;
+  if (!isObject$9(input) || isSymbol$3(input)) return input;
   var exoticToPrim = getMethod$1(input, TO_PRIMITIVE);
   var result;
   if (exoticToPrim) {
     if (pref === undefined) pref = 'default';
     result = call$8(exoticToPrim, input, pref);
-    if (!isObject$5(result) || isSymbol$1(result)) return result;
+    if (!isObject$9(result) || isSymbol$3(result)) return result;
     throw $TypeError$5("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
@@ -422,21 +424,21 @@ var toPrimitive$1 = function (input, pref) {
 };
 
 var toPrimitive = toPrimitive$1;
-var isSymbol = isSymbol$2;
+var isSymbol$2 = isSymbol$4;
 
 // `ToPropertyKey` abstract operation
 // https://tc39.es/ecma262/#sec-topropertykey
 var toPropertyKey$2 = function (argument) {
   var key = toPrimitive(argument, 'string');
-  return isSymbol(key) ? key : key + '';
+  return isSymbol$2(key) ? key : key + '';
 };
 
 var global$a = global$h;
-var isObject$4 = isObject$7;
+var isObject$8 = isObject$b;
 
 var document$1 = global$a.document;
 // typeof document.createElement is 'object' in old IE
-var EXISTS$1 = isObject$4(document$1) && isObject$4(document$1.createElement);
+var EXISTS$1 = isObject$8(document$1) && isObject$8(document$1.createElement);
 
 var documentCreateElement$2 = function (it) {
   return EXISTS$1 ? document$1.createElement(it) : {};
@@ -492,14 +494,14 @@ var v8PrototypeDefineBug = DESCRIPTORS$7 && fails$d(function () {
   }).prototype !== 42;
 });
 
-var isObject$3 = isObject$7;
+var isObject$7 = isObject$b;
 
 var $String$3 = String;
 var $TypeError$4 = TypeError;
 
 // `Assert: Type(argument) is Object`
 var anObject$9 = function (argument) {
-  if (isObject$3(argument)) return argument;
+  if (isObject$7(argument)) return argument;
   throw $TypeError$4($String$3(argument) + ' is not an object');
 };
 
@@ -613,7 +615,7 @@ var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
 var global$8 = global$h;
-var isObject$2 = isObject$7;
+var isObject$6 = isObject$b;
 var createNonEnumerableProperty$4 = createNonEnumerableProperty$5;
 var hasOwn$6 = hasOwnProperty_1;
 var shared$1 = sharedStore;
@@ -632,7 +634,7 @@ var enforce = function (it) {
 var getterFor = function (TYPE) {
   return function (it) {
     var state;
-    if (!isObject$2(it) || (state = get$1(it)).type !== TYPE) {
+    if (!isObject$6(it) || (state = get$1(it)).type !== TYPE) {
       throw TypeError$1('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
@@ -1601,7 +1603,7 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf :
 
 var fails$8 = fails$j;
 var isCallable$5 = isCallable$h;
-var isObject$1 = isObject$7;
+var isObject$5 = isObject$b;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$3 = defineBuiltIn$5;
 var wellKnownSymbol$7 = wellKnownSymbol$a;
@@ -1624,7 +1626,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$1(IteratorPrototype$2) || fails$8(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject$5(IteratorPrototype$2) || fails$8(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$3].call(test) !== test;
@@ -2376,7 +2378,7 @@ object-assign
 */
 /* eslint-disable no-unused-vars */
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
 function toObject$2(val) {
@@ -2440,7 +2442,7 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 		from = Object(arguments[s]);
 
 		for (var key in from) {
-			if (hasOwnProperty$1.call(from, key)) {
+			if (hasOwnProperty$2.call(from, key)) {
 				to[key] = from[key];
 			}
 		}
@@ -3589,6 +3591,30 @@ function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+function requirePropFactory(componentNameInError, Component) {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  const prevPropTypes = Component ? _extends({}, Component.propTypes) : null;
+  const requireProp = requiredProp => (props, propName, componentName, location, propFullName, ...args) => {
+    const propFullNameSafe = propFullName || propName;
+    const defaultTypeChecker = prevPropTypes == null ? void 0 : prevPropTypes[propFullNameSafe];
+    if (defaultTypeChecker) {
+      const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);
+      if (typeCheckerResult) {
+        return typeCheckerResult;
+      }
+    }
+    if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
+      return new Error(`The prop \`${propFullNameSafe}\` of ` + `\`${componentNameInError}\` can only be used together with the \`${requiredProp}\` prop.`);
+    }
+    return null;
+  };
+  return requireProp;
+}
+
 function getTypeByValue(value) {
   const valueType = typeof value;
   switch (valueType) {
@@ -5664,7 +5690,7 @@ var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion'
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
 
 var isBrowser$1 = typeof document !== 'undefined';
-var hasOwnProperty = {}.hasOwnProperty;
+var hasOwnProperty$1 = {}.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
@@ -5785,7 +5811,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
   var newProps = {};
 
   for (var key in props) {
-    if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
+    if (hasOwnProperty$1.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
       newProps[key] = props[key];
     }
   }
@@ -6029,7 +6055,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$b = ["values", "unit", "step"];
+const _excluded$c = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -6064,7 +6090,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$b);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$c);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6191,6 +6217,56 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
   }, style);
 }
 
+// compute base for responsive values; e.g.,
+// [1,2,3] => {xs: true, sm: true, md: true}
+// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
+  // fixed value
+  if (typeof breakpointValues !== 'object') {
+    return {};
+  }
+  const base = {};
+  const breakpointsKeys = Object.keys(themeBreakpoints);
+  if (Array.isArray(breakpointValues)) {
+    breakpointsKeys.forEach((breakpoint, i) => {
+      if (i < breakpointValues.length) {
+        base[breakpoint] = true;
+      }
+    });
+  } else {
+    breakpointsKeys.forEach(breakpoint => {
+      if (breakpointValues[breakpoint] != null) {
+        base[breakpoint] = true;
+      }
+    });
+  }
+  return base;
+}
+function resolveBreakpointValues({
+  values: breakpointValues,
+  breakpoints: themeBreakpoints,
+  base: customBase
+}) {
+  const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
+  const keys = Object.keys(base);
+  if (keys.length === 0) {
+    return breakpointValues;
+  }
+  let previous;
+  return keys.reduce((acc, breakpoint, i) => {
+    if (Array.isArray(breakpointValues)) {
+      acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
+      previous = i;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+      previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
+    }
+    return acc;
+  }, {});
+}
+
 function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
@@ -7105,7 +7181,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$a = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$b = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -7113,7 +7189,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$a);
+    other = _objectWithoutPropertiesLoose(options, _excluded$b);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7151,7 +7227,7 @@ function useTheme$1(defaultTheme = systemDefaultTheme$1) {
   return useTheme$2(defaultTheme);
 }
 
-const _excluded$9 = ["sx"];
+const _excluded$a = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -7172,7 +7248,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$a);
   const {
     systemProps,
     otherProps
@@ -7198,7 +7274,7 @@ function extendSxProp(props) {
 
 function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$8 = ["className", "component"];
+const _excluded$9 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -7216,7 +7292,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$8);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$9);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -7227,7 +7303,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$7 = ["variant"];
+const _excluded$8 = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -7241,7 +7317,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -7253,7 +7329,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$6 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$7 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -7359,7 +7435,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$6);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$7);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -7760,7 +7836,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$5 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$6 = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -7929,7 +8005,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$5);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$6);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8053,7 +8129,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$4 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$5 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -8084,7 +8160,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8151,7 +8227,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$3 = ["duration", "easing", "delay"];
+const _excluded$4 = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -8202,7 +8278,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$3);
+      other = _objectWithoutPropertiesLoose(options, _excluded$4);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8249,7 +8325,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$2 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$3 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8257,7 +8333,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$2);
+    other = _objectWithoutPropertiesLoose(options, _excluded$3);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -8366,8 +8442,8 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$1 = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$1 = ownerState => {
+const _excluded$2 = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$2 = ownerState => {
   const {
     square,
     elevation,
@@ -8421,14 +8497,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$1(ownerState);
+  const classes = useUtilityClasses$2(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -8502,8 +8578,8 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses = ownerState => {
+const _excluded$1 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$1 = ownerState => {
   const {
     align,
     gutterBottom,
@@ -8586,7 +8662,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -8599,7 +8675,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses$1(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -8712,6 +8788,575 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
 } : void 0;
 var Box$1 = Box;
 
+/**
+ * @ignore - internal component.
+ */
+const GridContext = /*#__PURE__*/React.createContext();
+if (process.env.NODE_ENV !== 'production') {
+  GridContext.displayName = 'GridContext';
+}
+var GridContext$1 = GridContext;
+
+function getGridUtilityClass(slot) {
+  return generateUtilityClass('MuiGrid', slot);
+}
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
+// spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
+// direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`),
+// wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`),
+// grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+
+const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+function getOffset(val) {
+  const parse = parseFloat(val);
+  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
+}
+function generateGrid({
+  theme,
+  ownerState
+}) {
+  let size;
+  return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
+    // Use side effect over immutability for better performance.
+    let styles = {};
+    if (ownerState[breakpoint]) {
+      size = ownerState[breakpoint];
+    }
+    if (!size) {
+      return globalStyles;
+    }
+    if (size === true) {
+      // For the auto layouting
+      styles = {
+        flexBasis: 0,
+        flexGrow: 1,
+        maxWidth: '100%'
+      };
+    } else if (size === 'auto') {
+      styles = {
+        flexBasis: 'auto',
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: 'none',
+        width: 'auto'
+      };
+    } else {
+      const columnsBreakpointValues = resolveBreakpointValues({
+        values: ownerState.columns,
+        breakpoints: theme.breakpoints.values
+      });
+      const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
+      if (columnValue === undefined || columnValue === null) {
+        return globalStyles;
+      }
+      // Keep 7 significant numbers.
+      const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
+      let more = {};
+      if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
+        const themeSpacing = theme.spacing(ownerState.columnSpacing);
+        if (themeSpacing !== '0px') {
+          const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
+          more = {
+            flexBasis: fullWidth,
+            maxWidth: fullWidth
+          };
+        }
+      }
+
+      // Close to the bootstrap implementation:
+      // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+      styles = _extends({
+        flexBasis: width,
+        flexGrow: 0,
+        maxWidth: width
+      }, more);
+    }
+
+    // No need for a media query for the first size.
+    if (theme.breakpoints.values[breakpoint] === 0) {
+      Object.assign(globalStyles, styles);
+    } else {
+      globalStyles[theme.breakpoints.up(breakpoint)] = styles;
+    }
+    return globalStyles;
+  }, {});
+}
+function generateDirection({
+  theme,
+  ownerState
+}) {
+  const directionValues = resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  });
+  return handleBreakpoints({
+    theme
+  }, directionValues, propValue => {
+    const output = {
+      flexDirection: propValue
+    };
+    if (propValue.indexOf('column') === 0) {
+      output[`& > .${gridClasses.item}`] = {
+        maxWidth: 'none'
+      };
+    }
+    return output;
+  });
+}
+
+/**
+ * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
+ * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
+ * @returns [xs, sm]
+ */
+function extractZeroValueBreakpointKeys({
+  breakpoints,
+  values
+}) {
+  let nonZeroKey = '';
+  Object.keys(values).forEach(key => {
+    if (nonZeroKey !== '') {
+      return;
+    }
+    if (values[key] !== 0) {
+      nonZeroKey = key;
+    }
+  });
+  const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
+    return breakpoints[a] - breakpoints[b];
+  });
+  return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
+}
+function generateRowGap({
+  theme,
+  ownerState
+}) {
+  const {
+    container,
+    rowSpacing
+  } = ownerState;
+  let styles = {};
+  if (container && rowSpacing !== 0) {
+    const rowSpacingValues = resolveBreakpointValues({
+      values: rowSpacing,
+      breakpoints: theme.breakpoints.values
+    });
+    let zeroValueBreakpointKeys;
+    if (typeof rowSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: rowSpacingValues
+      });
+    }
+    styles = handleBreakpoints({
+      theme
+    }, rowSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK;
+      const themeSpacing = theme.spacing(propValue);
+      if (themeSpacing !== '0px') {
+        return {
+          marginTop: `-${getOffset(themeSpacing)}`,
+          [`& > .${gridClasses.item}`]: {
+            paddingTop: getOffset(themeSpacing)
+          }
+        };
+      }
+      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+        return {};
+      }
+      return {
+        marginTop: 0,
+        [`& > .${gridClasses.item}`]: {
+          paddingTop: 0
+        }
+      };
+    });
+  }
+  return styles;
+}
+function generateColumnGap({
+  theme,
+  ownerState
+}) {
+  const {
+    container,
+    columnSpacing
+  } = ownerState;
+  let styles = {};
+  if (container && columnSpacing !== 0) {
+    const columnSpacingValues = resolveBreakpointValues({
+      values: columnSpacing,
+      breakpoints: theme.breakpoints.values
+    });
+    let zeroValueBreakpointKeys;
+    if (typeof columnSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: columnSpacingValues
+      });
+    }
+    styles = handleBreakpoints({
+      theme
+    }, columnSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK2;
+      const themeSpacing = theme.spacing(propValue);
+      if (themeSpacing !== '0px') {
+        return {
+          width: `calc(100% + ${getOffset(themeSpacing)})`,
+          marginLeft: `-${getOffset(themeSpacing)}`,
+          [`& > .${gridClasses.item}`]: {
+            paddingLeft: getOffset(themeSpacing)
+          }
+        };
+      }
+      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+        return {};
+      }
+      return {
+        width: '100%',
+        marginLeft: 0,
+        [`& > .${gridClasses.item}`]: {
+          paddingLeft: 0
+        }
+      };
+    });
+  }
+  return styles;
+}
+function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  }
+  // in case of string/number `spacing`
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return [styles[`spacing-xs-${String(spacing)}`]];
+  }
+  // in case of object `spacing`
+  const spacingStyles = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+    if (Number(value) > 0) {
+      spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+    }
+  });
+  return spacingStyles;
+}
+
+// Default CSS values
+// flex: '0 1 auto',
+// flexDirection: 'row',
+// alignItems: 'flex-start',
+// flexWrap: 'nowrap',
+// justifyContent: 'flex-start',
+const GridRoot = styled$1('div', {
+  name: 'MuiGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      container,
+      direction,
+      item,
+      spacing,
+      wrap,
+      zeroMinWidth,
+      breakpoints
+    } = ownerState;
+    let spacingStyles = [];
+
+    // in case of grid item
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+    const breakpointsStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+      if (value) {
+        breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
+  }
+})(({
+  ownerState
+}) => _extends({
+  boxSizing: 'border-box'
+}, ownerState.container && {
+  display: 'flex',
+  flexWrap: 'wrap',
+  width: '100%'
+}, ownerState.item && {
+  margin: 0 // For instance, it's useful when used with a `figure` element.
+}, ownerState.zeroMinWidth && {
+  minWidth: 0
+}, ownerState.wrap !== 'wrap' && {
+  flexWrap: ownerState.wrap
+}), generateDirection, generateRowGap, generateColumnGap, generateGrid);
+function resolveSpacingClasses(spacing, breakpoints) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  }
+  // in case of string/number `spacing`
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return [`spacing-xs-${String(spacing)}`];
+  }
+  // in case of object `spacing`
+  const classes = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+    if (Number(value) > 0) {
+      const className = `spacing-${breakpoint}-${String(value)}`;
+      classes.push(className);
+    }
+  });
+  return classes;
+}
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    container,
+    direction,
+    item,
+    spacing,
+    wrap,
+    zeroMinWidth,
+    breakpoints
+  } = ownerState;
+  let spacingClasses = [];
+
+  // in case of grid item
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+  const breakpointsClasses = [];
+  breakpoints.forEach(breakpoint => {
+    const value = ownerState[breakpoint];
+    if (value) {
+      breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+    }
+  });
+  const slots = {
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
+  };
+  return composeClasses(slots, getGridUtilityClass, classes);
+};
+const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+  const themeProps = useThemeProps({
+    props: inProps,
+    name: 'MuiGrid'
+  });
+  const {
+    breakpoints
+  } = useTheme();
+  const props = extendSxProp(themeProps);
+  const {
+      className,
+      columns: columnsProp,
+      columnSpacing: columnSpacingProp,
+      component = 'div',
+      container = false,
+      direction = 'row',
+      item = false,
+      rowSpacing: rowSpacingProp,
+      spacing = 0,
+      wrap = 'wrap',
+      zeroMinWidth = false
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rowSpacing = rowSpacingProp || spacing;
+  const columnSpacing = columnSpacingProp || spacing;
+  const columnsContext = React.useContext(GridContext$1);
+
+  // columns set with default breakpoint unit of 12
+  const columns = container ? columnsProp || 12 : columnsContext;
+  const breakpointsValues = {};
+  const otherFiltered = _extends({}, other);
+  breakpoints.keys.forEach(breakpoint => {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
+  const ownerState = _extends({}, props, {
+    columns,
+    container,
+    direction,
+    item,
+    rowSpacing,
+    columnSpacing,
+    wrap,
+    zeroMinWidth,
+    spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/jsx(GridContext$1.Provider, {
+    value: columns,
+    children: /*#__PURE__*/jsx(GridRoot, _extends({
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      as: component,
+      ref: ref
+    }, otherFiltered))
+  });
+});
+process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * If `true`, the component will have the flex *item* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  item: PropTypes.bool,
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
+   * @default false
+   */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+  /**
+   * If `true`, it sets `min-width: 0` on the item.
+   * Refer to the limitations section of the documentation to better understand the use case.
+   * @default false
+   */
+  zeroMinWidth: PropTypes.bool
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  const requireProp = requirePropFactory('Grid', Grid);
+  // eslint-disable-next-line no-useless-concat
+  Grid['propTypes' + ''] = _extends({}, Grid.propTypes, {
+    direction: requireProp('container'),
+    lg: requireProp('item'),
+    md: requireProp('item'),
+    sm: requireProp('item'),
+    spacing: requireProp('container'),
+    wrap: requireProp('container'),
+    xs: requireProp('item'),
+    zeroMinWidth: requireProp('item')
+  });
+}
+var Grid$1 = Grid;
+
 const LegendLayout = ({
   title,
   name,
@@ -8912,6 +9557,64 @@ const Legend = ({
   }));
 };
 
+const LegendDialog = ({
+  layers,
+  isOpen,
+  onClose,
+  onMouseDown: _onMouseDown = () => {},
+  mapId,
+  showMapId: _showMapId = false,
+  order: _order = 0,
+  source: _source = 'app'
+}) => {
+  return jsx(ToolContainerDraggable, Object.assign({
+    startPosition: {
+      right: 20,
+      top: 50
+    },
+    minWidth: 100,
+    onClose: onClose,
+    title: _showMapId ? `Legend ${mapId}` : 'Legend',
+    initialMaxHeight: 440,
+    isOpen: isOpen,
+    "data-testid": "moveable-legend",
+    bounds: "parent",
+    onMouseDown: _onMouseDown,
+    order: _order,
+    source: _source
+  }, {
+    children: jsx(Box$1, Object.assign({
+      sx: {
+        padding: 0.5
+      }
+    }, {
+      children: layers && layers.length > 0 ? jsx(Box$1, Object.assign({
+        "data-testid": "LegendList",
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          '&>div:last-child': {
+            marginBottom: 0
+          }
+        }
+      }, {
+        children: layers.map(layer => jsx(Legend, {
+          layer: layer
+        }, layer.id))
+      })) : jsx(Typography$1, Object.assign({
+        "data-testid": "NoLayers",
+        variant: "body1",
+        style: {
+          fontWeight: 500,
+          fontSize: 14
+        }
+      }, {
+        children: "No layers"
+      }))
+    }))
+  }));
+};
+
 var wellKnownSymbol$3 = wellKnownSymbol$a;
 
 var TO_STRING_TAG$1 = wellKnownSymbol$3('toStringTag');
@@ -9003,8 +9706,8 @@ var trim = stringTrim.trim;
 var whitespaces = whitespaces$2;
 
 var $parseInt$1 = global$5.parseInt;
-var Symbol$1 = global$5.Symbol;
-var ITERATOR = Symbol$1 && Symbol$1.iterator;
+var Symbol$4 = global$5.Symbol;
+var ITERATOR = Symbol$4 && Symbol$4.iterator;
 var hex = /^[+-]?0x/i;
 var exec$1 = uncurryThis$7(hex.exec);
 var FORCED$1 = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
@@ -33806,7 +34509,7 @@ function isNumber(num) {
  * turf.isObject('foo')
  * //=false
  */
-function isObject(input) {
+function isObject$4(input) {
     return !!input && input.constructor === Object;
 }
 
@@ -34659,7 +35362,7 @@ function simplify(points, tolerance, highestQuality) {
 function simplify$1(geojson, options) {
   // Optional parameters
   options = options || {};
-  if (!isObject(options)) throw new Error("options is invalid");
+  if (!isObject$4(options)) throw new Error("options is invalid");
   var tolerance = options.tolerance !== undefined ? options.tolerance : 1;
   var highQuality = options.highQuality || false;
   var mutate = options.mutate || false;
@@ -40474,7 +41177,7 @@ const ReactMapViewLayer = props => {
  *
  * @returns {Function} A new, throttled, function.
  */
-function throttle (delay, callback, options) {
+function throttle$1 (delay, callback, options) {
   var _ref = options || {},
       _ref$noTrailing = _ref.noTrailing,
       noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
@@ -40611,12 +41314,12 @@ function throttle (delay, callback, options) {
  * @returns {Function} A new, debounced function.
  */
 
-function debounce (delay, callback, options) {
+function debounce$2 (delay, callback, options) {
   var _ref = options || {},
       _ref$atBegin = _ref.atBegin,
       atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
 
-  return throttle(delay, callback, {
+  return throttle$1(delay, callback, {
     debounceMode: atBegin !== false
   });
 }
@@ -41104,7 +41807,7 @@ class ReactMapView extends React.Component {
     };
     this.resize = this.resize.bind(this);
     this.handleWindowResize = this.handleWindowResize.bind(this);
-    this.drawDebounced = debounce(600, this.drawDebounced);
+    this.drawDebounced = debounce$2(600, this.drawDebounced);
     this.updateWMJSMapProps = this.updateWMJSMapProps.bind(this);
     this.mountWMJSMap = this.mountWMJSMap.bind(this);
     this.onAfterSetBBoxListener = this.onAfterSetBBoxListener.bind(this);
@@ -41312,6 +42015,7 @@ class ReactMapView extends React.Component {
       const myChildren = [];
       const takenIds = new Set();
       React.Children.forEach(children, child => {
+        var _a;
         if (child) {
           const {
             props: childProps
@@ -41321,7 +42025,7 @@ class ReactMapView extends React.Component {
               myChildren.push(child);
               takenIds.add(childProps.id);
             } else {
-              childProps.onLayerError(childProps, new Error(`Duplicate layer id "${childProps.id}" encountered within this mapTypes.WebMap`), wmjsMap);
+              (_a = childProps.onLayerError) === null || _a === void 0 ? void 0 : _a.call(childProps, childProps, new Error(`Duplicate layer id "${childProps.id}" encountered within this mapTypes.WebMap`), wmjsMap);
               console.warn('ReactWMJSLayer has a duplicate id', child);
             }
           } else {
@@ -41690,6 +42394,1173 @@ ReactMapView.defaultProps = {
   }
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+
+function isObject$3(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject$3;
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$2 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$2;
+
+var root$1 = _root;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$1 = function() {
+  return root$1.Date.now();
+};
+
+var now_1 = now$1;
+
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+
+var trimmedEndIndex = _trimmedEndIndex;
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim$1(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+var _baseTrim = baseTrim$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$3 = root.Symbol;
+
+var _Symbol = Symbol$3;
+
+var Symbol$2 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol$1 = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+
+function isObjectLike$1(value) {
+  return value != null && typeof value == 'object';
+}
+
+var isObjectLike_1 = isObjectLike$1;
+
+var baseGetTag = _baseGetTag,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol$1(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+var isSymbol_1 = isSymbol$1;
+
+var baseTrim = _baseTrim,
+    isObject$2 = isObject_1,
+    isSymbol = isSymbol_1;
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber$1(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$2(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$2(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var toNumber_1 = toNumber$1;
+
+var isObject$1 = isObject_1,
+    now = now_1,
+    toNumber = toNumber_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT$1 = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce$1(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$1);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject$1(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var debounce_1 = debounce$1;
+
+var debounce = debounce_1,
+    isObject = isObject_1;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+var throttle_1 = throttle;
+
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}var patchResizeCallback = function (resizeCallback, refreshMode, refreshRate, refreshOptions) {
+    switch (refreshMode) {
+        case 'debounce':
+            return debounce_1(resizeCallback, refreshRate, refreshOptions);
+        case 'throttle':
+            return throttle_1(resizeCallback, refreshRate, refreshOptions);
+        default:
+            return resizeCallback;
+    }
+};
+var isFunction = function (fn) { return typeof fn === 'function'; };
+var isSSR = function () { return typeof window === 'undefined'; };
+var isDOMElement = function (element) {
+    return element instanceof Element || element instanceof HTMLDocument;
+};/** @class */ ((function (_super) {
+    __extends(ResizeDetector, _super);
+    function ResizeDetector(props) {
+        var _this = _super.call(this, props) || this;
+        _this.cancelHandler = function () {
+            if (_this.resizeHandler && _this.resizeHandler.cancel) {
+                // cancel debounced handler
+                _this.resizeHandler.cancel();
+                _this.resizeHandler = null;
+            }
+        };
+        _this.attachObserver = function () {
+            var _a = _this.props, targetRef = _a.targetRef, observerOptions = _a.observerOptions;
+            if (isSSR()) {
+                return;
+            }
+            if (targetRef && targetRef.current) {
+                _this.targetRef.current = targetRef.current;
+            }
+            var element = _this.getElement();
+            if (!element) {
+                // can't find element to observe
+                return;
+            }
+            if (_this.observableElement && _this.observableElement === element) {
+                // element is already observed
+                return;
+            }
+            _this.observableElement = element;
+            _this.resizeObserver.observe(element, observerOptions);
+        };
+        _this.getElement = function () {
+            var _a = _this.props, querySelector = _a.querySelector, targetDomEl = _a.targetDomEl;
+            if (isSSR())
+                return null;
+            // in case we pass a querySelector
+            if (querySelector)
+                return document.querySelector(querySelector);
+            // in case we pass a DOM element
+            if (targetDomEl && isDOMElement(targetDomEl))
+                return targetDomEl;
+            // in case we pass a React ref using React.createRef()
+            if (_this.targetRef && isDOMElement(_this.targetRef.current))
+                return _this.targetRef.current;
+            // the worse case when we don't receive any information from the parent and the library doesn't add any wrappers
+            // we have to use a deprecated `findDOMNode` method in order to find a DOM element to attach to
+            var currentElement = findDOMNode(_this);
+            if (!currentElement)
+                return null;
+            var renderType = _this.getRenderType();
+            switch (renderType) {
+                case 'renderProp':
+                    return currentElement;
+                case 'childFunction':
+                    return currentElement;
+                case 'child':
+                    return currentElement;
+                case 'childArray':
+                    return currentElement;
+                default:
+                    return currentElement.parentElement;
+            }
+        };
+        _this.createResizeHandler = function (entries) {
+            var _a = _this.props, _b = _a.handleWidth, handleWidth = _b === void 0 ? true : _b, _c = _a.handleHeight, handleHeight = _c === void 0 ? true : _c, onResize = _a.onResize;
+            if (!handleWidth && !handleHeight)
+                return;
+            var notifyResize = function (_a) {
+                var width = _a.width, height = _a.height;
+                if (_this.state.width === width && _this.state.height === height) {
+                    // skip if dimensions haven't changed
+                    return;
+                }
+                if ((_this.state.width === width && !handleHeight) || (_this.state.height === height && !handleWidth)) {
+                    // process `handleHeight/handleWidth` props
+                    return;
+                }
+                onResize === null || onResize === void 0 ? void 0 : onResize(width, height);
+                _this.setState({ width: width, height: height });
+            };
+            entries.forEach(function (entry) {
+                var _a = (entry && entry.contentRect) || {}, width = _a.width, height = _a.height;
+                var shouldSetSize = !_this.skipOnMount && !isSSR();
+                if (shouldSetSize) {
+                    notifyResize({ width: width, height: height });
+                }
+                _this.skipOnMount = false;
+            });
+        };
+        _this.getRenderType = function () {
+            var _a = _this.props, render = _a.render, children = _a.children;
+            if (isFunction(render)) {
+                // DEPRECATED. Use `Child Function Pattern` instead
+                return 'renderProp';
+            }
+            if (isFunction(children)) {
+                return 'childFunction';
+            }
+            if (isValidElement(children)) {
+                return 'child';
+            }
+            if (Array.isArray(children)) {
+                // DEPRECATED. Wrap children with a single parent
+                return 'childArray';
+            }
+            // DEPRECATED. Use `Child Function Pattern` instead
+            return 'parent';
+        };
+        var skipOnMount = props.skipOnMount, refreshMode = props.refreshMode, _a = props.refreshRate, refreshRate = _a === void 0 ? 1000 : _a, refreshOptions = props.refreshOptions;
+        _this.state = {
+            width: undefined,
+            height: undefined
+        };
+        _this.sizeRef = {
+            current: _this.state
+        };
+        _this.skipOnMount = skipOnMount;
+        _this.targetRef = createRef();
+        _this.observableElement = null;
+        if (isSSR()) {
+            return _this;
+        }
+        _this.resizeHandler = patchResizeCallback(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
+        _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
+        return _this;
+    }
+    ResizeDetector.prototype.componentDidMount = function () {
+        this.attachObserver();
+    };
+    ResizeDetector.prototype.componentDidUpdate = function () {
+        this.attachObserver();
+        this.sizeRef.current = this.state;
+    };
+    ResizeDetector.prototype.componentWillUnmount = function () {
+        if (isSSR()) {
+            return;
+        }
+        this.observableElement = null;
+        this.resizeObserver.disconnect();
+        this.cancelHandler();
+    };
+    ResizeDetector.prototype.render = function () {
+        var _a = this.props, render = _a.render, children = _a.children, _b = _a.nodeType, WrapperTag = _b === void 0 ? 'div' : _b;
+        var _c = this.state, width = _c.width, height = _c.height;
+        var childProps = { width: width, height: height, targetRef: this.targetRef };
+        var renderType = this.getRenderType();
+        switch (renderType) {
+            case 'renderProp':
+                return render === null || render === void 0 ? void 0 : render(childProps);
+            case 'childFunction': {
+                var childFunction = children;
+                return childFunction === null || childFunction === void 0 ? void 0 : childFunction(childProps);
+            }
+            case 'child': {
+                // @TODO bug prone logic
+                var child = children;
+                if (child.type && typeof child.type === 'string') {
+                    // child is a native DOM elements such as div, span etc
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    childProps.targetRef; var nativeProps = __rest(childProps, ["targetRef"]);
+                    return cloneElement(child, nativeProps);
+                }
+                // class or functional component otherwise
+                return cloneElement(child, childProps);
+            }
+            case 'childArray': {
+                var childArray = children;
+                return childArray.map(function (el) { return !!el && cloneElement(el, childProps); });
+            }
+            default:
+                return React__default.createElement(WrapperTag, null);
+        }
+    };
+    return ResizeDetector;
+})(PureComponent));function useResizeDetector(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
+    var skipResize = useRef(skipOnMount);
+    var _g = useState({
+        width: undefined,
+        height: undefined
+    }), size = _g[0], setSize = _g[1];
+    // we are going to use this ref to store the last element that was passed to the hook
+    var _h = useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
+    // if targetRef is passed, we need to update the refElement
+    // we have to use setTimeout because ref get assigned after the hook is called
+    // in the future releases we are going to remove targetRef and force users to use ref returned by the hook
+    if (targetRef) {
+        setTimeout(function () {
+            if (targetRef.current !== refElement) {
+                setRefElement(targetRef.current);
+            }
+        }, 0);
+    }
+    // this is a callback that will be called every time the ref is changed
+    // we call setState inside to trigger rerender
+    var onRefChange = useCallback(function (node) {
+        if (node !== refElement) {
+            setRefElement(node);
+        }
+    }, [refElement]);
+    // adding `current` to make it compatible with useRef shape
+    onRefChange.current = refElement;
+    useEffect(function () {
+        return function () {
+            // component is unmounted
+            // clear ref to avoid memory leaks
+            setRefElement(null);
+            onRefChange.current = null;
+        };
+    }, []);
+    var shouldSetSize = useCallback(function (prevSize, nextSize) {
+        if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
+            // skip if dimensions haven't changed
+            return false;
+        }
+        if ((prevSize.width === nextSize.width && !handleHeight) ||
+            (prevSize.height === nextSize.height && !handleWidth)) {
+            // process `handleHeight/handleWidth` props
+            return false;
+        }
+        return true;
+    }, [handleWidth, handleHeight]);
+    var resizeCallback = useCallback(function (entries) {
+        if (!handleWidth && !handleHeight)
+            return;
+        if (skipResize.current) {
+            skipResize.current = false;
+            return;
+        }
+        entries.forEach(function (entry) {
+            var _a = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {}, width = _a.width, height = _a.height;
+            setSize(function (prevSize) {
+                if (!shouldSetSize(prevSize, { width: width, height: height }))
+                    return prevSize;
+                return { width: width, height: height };
+            });
+        });
+    }, [handleWidth, handleHeight, skipResize, shouldSetSize]);
+    var resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+        resizeCallback,
+        refreshMode,
+        refreshRate,
+        refreshOptions
+    ]);
+    // on refElement change
+    useEffect(function () {
+        var resizeObserver;
+        if (refElement) {
+            resizeObserver = new window.ResizeObserver(resizeHandler);
+            resizeObserver.observe(refElement, observerOptions);
+        }
+        else {
+            if (size.width || size.height) {
+                setSize({ width: undefined, height: undefined });
+            }
+        }
+        return function () {
+            var _a, _b, _c;
+            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+            (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
+        };
+    }, [resizeHandler, refElement]);
+    useEffect(function () {
+        onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
+    }, [size]);
+    return __assign({ ref: onRefChange }, size);
+}
+
+const MapControlButton = _a => {
+  var {
+      onClick,
+      children,
+      title,
+      placement = 'right',
+      isActive = false
+    } = _a,
+    props = __rest$1(_a, ["onClick", "children", "title", "placement", "isActive"]);
+  return jsx(CustomIconButton, Object.assign({
+    variant: "tool",
+    tooltipProps: {
+      placement,
+      title
+    },
+    onClick: onClick,
+    isSelected: isActive
+  }, props, {
+    children: children
+  }));
+};
+
+const ZoomControls = ({
+  onZoomIn,
+  onZoomOut,
+  onZoomReset
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx(MapControlButton, Object.assign({
+      title: "Reset zoom",
+      "data-testid": "zoom-reset",
+      onClick: onZoomReset
+    }, {
+      children: jsx(Home, {})
+    })), jsx(MapControlButton, Object.assign({
+      title: "Zoom in",
+      "data-testid": "zoom-in",
+      onClick: onZoomIn
+    }, {
+      children: jsx(Add, {})
+    })), jsx(MapControlButton, Object.assign({
+      title: "Zoom out",
+      "data-testid": "zoom-out",
+      onClick: onZoomOut
+    }, {
+      children: jsx(Minus, {})
+    }))]
+  });
+};
+
+const MapControls = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest$1(_a, ["children"]);
+  return jsx(Box$1, Object.assign({
+    sx: {
+      position: 'absolute',
+      overflow: 'visible',
+      display: 'block',
+      left: 0,
+      margin: 1,
+      zIndex: 50,
+      top: '96px',
+      userSelect: 'none'
+    }
+  }, props, {
+    children: jsx(Grid$1, Object.assign({
+      sx: {
+        '& > button': {
+          marginBottom: 1
+        }
+      },
+      container: true,
+      direction: "column"
+    }, {
+      children: children
+    }))
+  }));
+};
+
+const getTimeDimension = dimensions => dimensions.find(dimension => dimension.name === 'time' && dimension.currentValue !== undefined);
+const formatTime = (time, timeFormat) => dateUtils.dateToString(dateUtils.utc(time), timeFormat);
+const defaultTimeFormat = "EEE dd MMM yyyy HH:mm 'UTC'";
+const MapTime = ({
+  dimensions,
+  timeFormat: _timeFormat = defaultTimeFormat
+}) => {
+  const timeDimension = getTimeDimension(dimensions);
+  if (!timeDimension) {
+    return null;
+  }
+  const mapTime = formatTime(timeDimension.currentValue, _timeFormat);
+  return jsx(Box$1, Object.assign({
+    "data-testid": "map-time",
+    sx: {
+      zIndex: 10,
+      justifySelf: 'center',
+      bottom: '12px',
+      position: 'absolute'
+    }
+  }, {
+    children: jsx(Box$1, {
+      children: jsx(Typography$1, Object.assign({
+        variant: "caption",
+        sx: {
+          fontWeight: 500
+        }
+      }, {
+        children: mapTime
+      }))
+    })
+  }));
+};
+
+const MapView = _a => {
+  var {
+      children,
+      controls = {
+        zoomControls: true
+      },
+      displayTimeInMap = true,
+      onWMJSMount
+    } = _a,
+    // rest props
+    props = __rest$1(_a, ["children", "controls", "displayTimeInMap", "onWMJSMount"]);
+  const {
+    dimensions,
+    mapId: mapIdProp
+  } = props;
+  const wmjsMapRef = React.useRef(null);
+  const mapId = React.useRef(mapIdProp).current;
+  if (mapIdProp !== mapId) {
+    console.warn(`Warning, MapId ${mapId} has been updated to ${mapIdProp} on an already mounted component. Keeping ${mapId}`);
+  }
+  const {
+    ref,
+    height,
+    width
+  } = useResizeDetector();
+  React.useEffect(() => {
+    if (wmjsMapRef.current && !!width && !!height) {
+      const {
+        height: mapHeight,
+        width: mapWidth
+      } = wmjsMapRef.current.getSize();
+      if (width !== mapWidth || height !== mapHeight) {
+        wmjsMapRef.current.setSize(Math.ceil(width), Math.ceil(height));
+      }
+    }
+  }, [width, height]);
+  const reactMapViewProps = Object.assign(Object.assign({}, props), {
+    mapId
+  });
+  return jsxs(Box$1, Object.assign({
+    ref: ref,
+    sx: {
+      display: 'grid',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, {
+    children: [controls && controls.zoomControls && jsx(MapControls, Object.assign({
+      style: {
+        top: 0,
+        position: 'absolute'
+      }
+    }, {
+      children: jsx(ZoomControls, {
+        onZoomIn: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomIn(undefined);
+        },
+        onZoomOut: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomOut();
+        },
+        onZoomReset: () => {
+          const wmjsMap = webmapUtils.getWMJSMapById(mapId);
+          wmjsMap.zoomToLayer(wmjsMap.getActiveLayer());
+        }
+      })
+    })), jsx(Box$1, Object.assign({
+      sx: {
+        gridColumnStart: 1,
+        gridRowStart: 1
+      }
+    }, {
+      children: jsx(ReactMapView, Object.assign({}, reactMapViewProps, {
+        showLegend: false,
+        displayTimeInMap: false,
+        onWMJSMount: id => {
+          wmjsMapRef.current = webmapUtils.getWMJSMapById(id);
+          if (onWMJSMount) {
+            onWMJSMount(id);
+          }
+        }
+      }, {
+        children: children
+      }))
+    })), displayTimeInMap && dimensions && jsx(MapTime, {
+      dimensions: dimensions
+    })]
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -41733,4 +43604,522 @@ var defaultLayers = /*#__PURE__*/Object.freeze({
 	overLayer: overLayer
 });
 
-export { CanvasComponent, DRAWMODE, EDITMODE, Legend, LegendLayout, MapDrawContainer, MapViewLayer, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, addFeatureProperties, checkHoverFeatures, createInterSections, defaultLayers, defaultStyleProperties, distance, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, getDrawFunctionFromStore, getFeatureCollection, getGeoJson, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, registerDrawFunction, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON };
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+const DWD = {
+  name: 'DWD',
+  url: 'https://maps.dwd.de/geoserver/ows?',
+  id: 'dwd'
+};
+const nationaalgeoregister = {
+  name: 'nationaalgeoregister.nl',
+  url: 'https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wms?request=GetCapabilities&service=wms',
+  id: 'nationaalgeoregister'
+};
+const KNMImsgcpp = {
+  name: 'KNMImsgcpp',
+  url: 'https://adaguc-server-msg-cpp-portal.pmc.knmi.cloud/wms?DATASET=msgrt&',
+  id: 'msgcpp-ogc-realtime'
+};
+const HeiGit = {
+  name: 'HeiGit',
+  url: 'https://maps.heigit.org/osm-wms/service',
+  id: 'HeiGit-osm-wms'
+};
+const ArcGisCanvas = {
+  name: 'ArcGisCanvas',
+  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/',
+  id: 'ArcGisCanvas'
+};
+const KNMIgeoservicesRadar = {
+  name: 'KNMIgeoservicesRadar',
+  url: 'https://geoservices.knmi.nl/wms?dataset=RADAR&',
+  id: 'KNMIgeoservicesRadar'
+};
+const KNMIgeoservicesObs = {
+  name: 'KNMIgeoservicesObs',
+  url: 'https://geoservices.knmi.nl/adagucserver?dataset=OBS',
+  id: 'KNMIgeoservicesObs'
+};
+const KNMIgeoservicesKlimaatAtlas = {
+  name: 'KNMIgeoservicesKlimaatAtlas',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=gsie-dataset&SERVICE=WMS&',
+  id: 'KNMIgeoservicesKlimaatAtlas'
+};
+const KNMIgeoservicesHarmonie = {
+  name: 'KNMIgeoservicesHarmonie',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25&',
+  id: 'KNMIgeoservicesKliKNMIgeoservicesHarmoniemaatAtlas'
+};
+const KNMIgeoservicesHarmonieMLService = {
+  name: 'KNMI Harmonie ML',
+  url: 'https://geoservices.knmi.nl/wms?DATASET=HARM_N25_ML&SERVICE=WMS&',
+  id: 'harmonieML'
+};
+const MetNorwayService = {
+  name: 'MetNorwayService',
+  url: 'https://wms-e1.geoweb.met.no/wms?',
+  id: 'MetNorwayService'
+};
+const FMIopenwms = {
+  name: 'FMIopenwms',
+  url: 'https://openwms.fmi.fi/geoserver/wms?',
+  id: 'FMIopenwms'
+};
+const DWDObservations = {
+  name: 'DWDObservations',
+  url: 'https://maps.dwd.de/geoserver/dwd/Wetter_Beobachtungen/ows?',
+  id: 'DWDObservations'
+};
+const DWDWarnings = {
+  name: 'DWDWarnings',
+  url: 'https://maps.dwd.de/geoserver/dwd/Warnungen_Gemeinden_vereinigt/ows?',
+  id: 'DWDWarnings'
+};
+const DWDWXProdukt = {
+  name: 'DWDWXProdukt',
+  url: 'https://maps.dwd.de/geoserver/dwd/WX-Produkt/ows?',
+  id: 'DWDWXProdukt'
+};
+const EUMETSAT = {
+  name: 'EUMETSAT',
+  url: 'https://view.eumetsat.int/geoserver/wms?',
+  id: 'EUMETSAT'
+};
+const eumetviewEUMETSAT = {
+  name: 'eumetviewEUMETSAT',
+  url: 'https://eumetview.eumetsat.int/geoserv/wms?',
+  id: 'eumetviewEUMETSAT'
+};
+const ECMWFPublicService = {
+  name: 'ECMWF',
+  url: 'https://eccharts.ecmwf.int/wms/?token=public',
+  id: 'ecmwf'
+};
+const MeteoCanada = {
+  name: 'Meteo Canada',
+  url: 'https://geo.weather.gc.ca/geomet/?lang=en&',
+  id: 'MeteoCanada'
+};
+
+var publicServices = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	DWD: DWD,
+	nationaalgeoregister: nationaalgeoregister,
+	KNMImsgcpp: KNMImsgcpp,
+	HeiGit: HeiGit,
+	ArcGisCanvas: ArcGisCanvas,
+	KNMIgeoservicesRadar: KNMIgeoservicesRadar,
+	KNMIgeoservicesObs: KNMIgeoservicesObs,
+	KNMIgeoservicesKlimaatAtlas: KNMIgeoservicesKlimaatAtlas,
+	KNMIgeoservicesHarmonie: KNMIgeoservicesHarmonie,
+	KNMIgeoservicesHarmonieMLService: KNMIgeoservicesHarmonieMLService,
+	MetNorwayService: MetNorwayService,
+	FMIopenwms: FMIopenwms,
+	DWDObservations: DWDObservations,
+	DWDWarnings: DWDWarnings,
+	DWDWXProdukt: DWDWXProdukt,
+	EUMETSAT: EUMETSAT,
+	eumetviewEUMETSAT: eumetviewEUMETSAT,
+	ECMWFPublicService: ECMWFPublicService,
+	MeteoCanada: MeteoCanada
+});
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+const baseLayer = {
+  name: 'arcGisSat',
+  title: 'arcGisSat',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true,
+  id: webmapUtils.generateLayerId()
+};
+// Base Layers List
+const baseLayerOpenStreetMapNL = {
+  id: 'base-layer-2',
+  name: 'OpenStreetMap_NL',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+const baseLayerArcGisCanvas = {
+  service: ArcGisCanvas.url,
+  id: webmapUtils.generateLayerId(),
+  name: 'arcGisCanvas',
+  type: 'twms',
+  enabled: true,
+  layerType: LayerType.baseLayer
+};
+const baseLayerWorldMap = {
+  id: webmapUtils.generateLayerId(),
+  name: 'WorldMap',
+  type: 'twms',
+  layerType: LayerType.baseLayer,
+  enabled: true
+};
+const baseLayerHeiGit = {
+  service: HeiGit.url,
+  id: webmapUtils.generateLayerId(),
+  name: 'osm_auto:all',
+  layerType: LayerType.baseLayer
+};
+// KNMI msgcpp List
+const msgCppLayer = {
+  // doesn't work with https
+  service: KNMImsgcpp.url,
+  name: 'lwe_precipitation_rate',
+  format: 'image/png',
+  enabled: true,
+  style: 'precip-transparent/nearest',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// Nederlandse Nationaal Georegister Layers list
+const veiligheidsRegiosGebiedsIndelingenLabels = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_labelpoint',
+  style: 'CBS_Label',
+  enabled: false,
+  layerType: LayerType.mapLayer
+};
+const veiligheidsRegiosGebiedsIndelingen = {
+  service: nationaalgeoregister.url,
+  name: 'cbsgebiedsindelingen:cbs_veiligheidsregio_2020_gegeneraliseerd',
+  style: 'CBS_Gebiedsindeling',
+  enabled: false,
+  layerType: LayerType.mapLayer
+};
+// KNMI Geoservices Layers List
+const radarLayer = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'RAD_NL25_PCP_CM',
+  format: 'image/png',
+  enabled: true,
+  style: 'radar/nearest',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const radarLayerWithError = {
+  service: KNMIgeoservicesRadar.url,
+  name: 'radarLayer',
+  format: 'image/png',
+  enabled: true,
+  style: 'knmiradar/nearest',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsAirTemperature = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/ta',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsWind = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/wind',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsAirPressureAtSeaLevel = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pp',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsRelativeHumidity = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/rh',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsGlobalSolarRadiation = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/qg',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const obsPrecipitationIntensityPWS = {
+  service: KNMIgeoservicesObs.url,
+  name: '10M/pg',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const harmonieRelativeHumidityPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'relative_humidity__at_pl',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+const harmonieWindPl = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_pl',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+const harmonieAirTemperature = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_temperature__at_2m',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+const harmoniePrecipitation = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'precipitation_flux',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+const harmoniePressure = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'air_pressure_at_sea_level',
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  enabled: true
+};
+const harmonieWindFlags = {
+  service: KNMIgeoservicesHarmonie.url,
+  name: 'wind__at_10m',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const klimaatAtlasTG3 = {
+  service: KNMIgeoservicesKlimaatAtlas.url,
+  name: 'TG3',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// DWD Layers List
+const dwdWarningLayer = {
+  service: DWDWarnings.url,
+  name: 'Warnungen_Gemeinden_vereinigt',
+  format: 'image/png',
+  // style: 'warnungen_gemeinden_vereinigt_event_seamless_param',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const dwdRadarLayer = {
+  service: DWDWXProdukt.url,
+  name: 'WX-Produkt',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// this needs authentication to work
+const dwdObservationsWetterLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+  // headers: [{ name: 'Authorization', value: 'Basic ...' }]
+};
+
+const dwdObservationsWetterLayerWithHeader = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Symbole',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer,
+  headers: [{
+    name: 'authorization',
+    value: 'Basic aW50cmFuZXQtdXNlcjpDQnMjMTEh'
+  }]
+};
+// this needs authentication to work
+const dwdObservationsWindLayer = {
+  service: DWDObservations.url,
+  name: 'Wetter_Beobachtungen',
+  style: 'Wetter_Wind',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// FMI open wms Layers List
+const FMITemp = {
+  service: FMIopenwms.url,
+  name: 'temperature-forecast',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+// Met Norway Layers List
+const MetNoTemp = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const metNorwayWind1 = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_wind',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const metNorwayWind2 = {
+  service: MetNorwayService.url,
+  name: 'thredds_aromearctic_extracted_t',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const metNorwayWind3 = {
+  service: MetNorwayService.url,
+  name: 'thredds_nk800_temperature',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const metNorwayLatestT = {
+  service: MetNorwayService.url,
+  name: 'thredds_meps_latest_t',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const metNorwaySalinaty = {
+  service: MetNorwayService.url,
+  name: 'thredds_barents_2_5km_1h_salinity',
+  format: 'image/png',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgFesEUMETSAT = {
+  service: EUMETSAT.url,
+  name: 'msg_fes:rgb_eview',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgNaturalenhncdEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_naturalenhncd',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgAshEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_ash',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgCthEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_cth',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgFogEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_fog',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+const msgNaturalEUMETSAT = {
+  service: eumetviewEUMETSAT.url,
+  name: 'meteosat:msg_natural',
+  enabled: true,
+  id: webmapUtils.generateLayerId(),
+  layerType: LayerType.mapLayer
+};
+
+var publicLayers = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	defaultLayers: defaultLayers,
+	baseLayer: baseLayer,
+	baseLayerOpenStreetMapNL: baseLayerOpenStreetMapNL,
+	baseLayerArcGisCanvas: baseLayerArcGisCanvas,
+	baseLayerWorldMap: baseLayerWorldMap,
+	baseLayerHeiGit: baseLayerHeiGit,
+	msgCppLayer: msgCppLayer,
+	veiligheidsRegiosGebiedsIndelingenLabels: veiligheidsRegiosGebiedsIndelingenLabels,
+	veiligheidsRegiosGebiedsIndelingen: veiligheidsRegiosGebiedsIndelingen,
+	radarLayer: radarLayer,
+	radarLayerWithError: radarLayerWithError,
+	obsAirTemperature: obsAirTemperature,
+	obsWind: obsWind,
+	obsAirPressureAtSeaLevel: obsAirPressureAtSeaLevel,
+	obsRelativeHumidity: obsRelativeHumidity,
+	obsGlobalSolarRadiation: obsGlobalSolarRadiation,
+	obsPrecipitationIntensityPWS: obsPrecipitationIntensityPWS,
+	harmonieRelativeHumidityPl: harmonieRelativeHumidityPl,
+	harmonieWindPl: harmonieWindPl,
+	harmonieAirTemperature: harmonieAirTemperature,
+	harmoniePrecipitation: harmoniePrecipitation,
+	harmoniePressure: harmoniePressure,
+	harmonieWindFlags: harmonieWindFlags,
+	klimaatAtlasTG3: klimaatAtlasTG3,
+	dwdWarningLayer: dwdWarningLayer,
+	dwdRadarLayer: dwdRadarLayer,
+	dwdObservationsWetterLayer: dwdObservationsWetterLayer,
+	dwdObservationsWetterLayerWithHeader: dwdObservationsWetterLayerWithHeader,
+	dwdObservationsWindLayer: dwdObservationsWindLayer,
+	FMITemp: FMITemp,
+	MetNoTemp: MetNoTemp,
+	metNorwayWind1: metNorwayWind1,
+	metNorwayWind2: metNorwayWind2,
+	metNorwayWind3: metNorwayWind3,
+	metNorwayLatestT: metNorwayLatestT,
+	metNorwaySalinaty: metNorwaySalinaty,
+	msgFesEUMETSAT: msgFesEUMETSAT,
+	msgNaturalenhncdEUMETSAT: msgNaturalenhncdEUMETSAT,
+	msgAshEUMETSAT: msgAshEUMETSAT,
+	msgCthEUMETSAT: msgCthEUMETSAT,
+	msgFogEUMETSAT: msgFogEUMETSAT,
+	msgNaturalEUMETSAT: msgNaturalEUMETSAT
+});
+
+export { CanvasComponent, DRAWMODE, EDITMODE, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, ZoomControls, addFeatureProperties, checkHoverFeatures, createInterSections, defaultLayers, defaultStyleProperties, defaultTimeFormat, distance, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, formatTime, getDrawFunctionFromStore, getFeatureCollection, getGeoJson, getTimeDimension, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, publicLayers, publicServices, registerDrawFunction, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON };