@opengeoweb/webmap-react 8.4.0 → 9.0.0

package/index.esm.js

@@ -5,7 +5,7 @@ import { CustomTooltip, ToolContainerDraggable, dateUtils, CustomIconButton } fr
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode } from 'react-dom';
-import { Delete, Edit, DrawRegion, DrawPolygon, Location, Home, Add, Minus } from '@opengeoweb/theme';
+import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus, Close } from '@opengeoweb/theme';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -490,10 +490,10 @@ var store$2 = sharedStore;
 (shared$4.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.33.0',
+  version: '3.33.2',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.33.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1811,13 +1811,12 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
 }, function () {
   var state = getInternalState$1(this);
   var target = state.target;
-  var kind = state.kind;
   var index = state.index++;
   if (!target || index >= target.length) {
     state.target = undefined;
     return createIterResultObject(undefined, true);
   }
-  switch (kind) {
+  switch (state.kind) {
     case 'keys': return createIterResultObject(index, false);
     case 'values': return createIterResultObject(target[index], false);
   } return createIterResultObject([index, target[index]], false);
@@ -3912,10 +3911,10 @@ function useEventCallback(fn) {
   useEnhancedEffect$1(() => {
     ref.current = fn;
   });
-  return React.useCallback((...args) =>
+  return React.useRef((...args) =>
   // @ts-expect-error hide `this`
   // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args), []);
+  (0, ref.current)(...args)).current;
 }
 
 function useForkRef(...refs) {
@@ -7179,7 +7178,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
 } : void 0;
 
 /**
- * @mui/styled-engine v5.14.14
+ * @mui/styled-engine v5.14.16
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7210,7 +7209,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$G = ["values", "unit", "step"];
+const _excluded$H = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -7245,7 +7244,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$G);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$H);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -8336,7 +8335,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$F = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$G = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -8344,7 +8343,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$F);
+    other = _objectWithoutPropertiesLoose(options, _excluded$G);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -8412,7 +8411,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$E = ["sx"];
+const _excluded$F = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -8433,7 +8432,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   const {
     systemProps,
     otherProps
@@ -8459,7 +8458,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$D = ["className", "component"];
+const _excluded$E = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -8477,7 +8476,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$D);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$E);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -8488,7 +8487,29 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$C = ["variant"];
+const Box$2 = createBox();
+process.env.NODE_ENV !== "production" ? Box$2.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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])
+} : void 0;
+var Box$3 = Box$2;
+
+const _excluded$D = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -8502,7 +8523,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -8514,7 +8535,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$B = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$C = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -8651,7 +8672,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$B);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$C);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -9085,7 +9106,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$A = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$B = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -9254,7 +9275,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$A);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$B);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -9378,7 +9399,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$z = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$A = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -9409,7 +9430,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -9476,7 +9497,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$y = ["duration", "easing", "delay"];
+const _excluded$z = ["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 = {
@@ -9527,7 +9548,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$y);
+      other = _objectWithoutPropertiesLoose(options, _excluded$z);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -9574,7 +9595,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$x = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$y = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -9582,7 +9603,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$x);
+    other = _objectWithoutPropertiesLoose(options, _excluded$y);
   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));
@@ -9853,7 +9874,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$w = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$x = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -9869,7 +9890,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$x);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -10507,8 +10528,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$v = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-const useUtilityClasses$o = ownerState => {
+const _excluded$w = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const useUtilityClasses$p = ownerState => {
   const {
     open,
     exited
@@ -10577,7 +10598,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const [exited, setExited] = React.useState(!open);
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
@@ -10649,7 +10670,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
     hideBackdrop,
     keepMounted
   });
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   const handleEnter = () => {
     setExited(false);
     if (onTransitionEnter) {
@@ -10873,7 +10894,7 @@ process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes /* remove-propty
 } : void 0;
 var ModalUnstyled$1 = ModalUnstyled;
 
-const _excluded$u = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$v = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -10915,7 +10936,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -11131,8 +11152,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$t = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$n = ownerState => {
+const _excluded$u = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$o = ownerState => {
   const {
     color,
     fontSize,
@@ -11197,7 +11218,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -11210,7 +11231,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -12326,8 +12347,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$s = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$m = ownerState => {
+const _excluded$t = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$n = ownerState => {
   const {
     square,
     elevation,
@@ -12381,14 +12402,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -12539,7 +12560,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$r = ["center", "classes", "className"];
+const _excluded$s = ["center", "classes", "className"];
 let _$1 = t => t,
   _t,
   _t2,
@@ -12668,7 +12689,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -12869,8 +12890,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$q = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$l = ownerState => {
+const _excluded$r = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const useUtilityClasses$m = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -12971,7 +12992,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -13138,7 +13159,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -13334,8 +13355,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$p = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$k = ownerState => {
+const _excluded$q = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$l = ownerState => {
   const {
     align,
     gutterBottom,
@@ -13418,7 +13439,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -13431,7 +13452,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -13599,7 +13620,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$o = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$p = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -13612,7 +13633,7 @@ const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$j = ownerState => {
+const useUtilityClasses$k = ownerState => {
   const {
     classes,
     color,
@@ -13830,7 +13851,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -14004,7 +14025,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -14308,7 +14329,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$n = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles$1 = {
   entering: {
     opacity: 1
@@ -14345,7 +14366,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14506,8 +14527,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$m = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$i = ownerState => {
+const _excluded$n = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const useUtilityClasses$j = ownerState => {
   const {
     classes,
     invisible
@@ -14561,12 +14582,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsx(TransitionComponent, _extends({
     in: open,
@@ -14715,8 +14736,8 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const _excluded$l = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-const useUtilityClasses$h = ownerState => {
+const _excluded$m = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     checked,
@@ -14779,7 +14800,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$m);
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -14828,7 +14849,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, _extends({
     component: "span",
     className: clsx(classes.root, className),
@@ -14971,7 +14992,7 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
 } : void 0;
 var SwitchBase$1 = SwitchBase;
 
-const _excluded$k = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded$l = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 const ModalRoot = styled$1('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -15046,7 +15067,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$l);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     closeAfterTransition,
@@ -15264,8 +15285,8 @@ var Modal$1 = Modal;
 const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 var dividerClasses$1 = dividerClasses;
 
-const _excluded$j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$g = ownerState => {
+const _excluded$k = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     disableUnderline
@@ -15448,14 +15469,14 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const ownerState = _extends({}, props, {
     fullWidth,
     inputComponent,
     multiline,
     type
   });
-  const classes = useUtilityClasses$g(props);
+  const classes = useUtilityClasses$h(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -15683,8 +15704,8 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$i = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$f = ownerState => {
+const _excluded$j = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$g = ownerState => {
   const {
     classes,
     margin,
@@ -15769,7 +15790,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -15782,7 +15803,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     size,
     variant
   });
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
     // to fully support server-side rendering.
@@ -15964,9 +15985,9 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 var formHelperTextClasses$1 = formHelperTextClasses;
 
-var _span$2;
-const _excluded$h = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$e = ownerState => {
+var _span$3;
+const _excluded$i = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$f = ownerState => {
   const {
     classes,
     contained,
@@ -16024,7 +16045,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -16042,7 +16063,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   return /*#__PURE__*/jsx(FormHelperTextRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -16050,7 +16071,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     ref: ref
   }, other, {
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
-    _span$2 || (_span$2 = /*#__PURE__*/jsx("span", {
+    _span$3 || (_span$3 = /*#__PURE__*/jsx("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
@@ -16122,8 +16143,8 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$g = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$d = ownerState => {
+const _excluded$h = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$e = ownerState => {
   const {
     classes,
     color,
@@ -16187,7 +16208,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -16203,7 +16224,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /*#__PURE__*/jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -16299,7 +16320,7 @@ const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'ite
 // 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$f = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+const _excluded$g = ["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'}`;
@@ -16608,7 +16629,7 @@ function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-const useUtilityClasses$c = ownerState => {
+const useUtilityClasses$d = ownerState => {
   const {
     classes,
     container,
@@ -16659,7 +16680,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       wrap = 'wrap',
       zeroMinWidth = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columnsContext = React.useContext(GridContext$1);
@@ -16687,7 +16708,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   }, breakpointsValues, {
     breakpoints: breakpoints.keys
   });
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /*#__PURE__*/jsx(GridContext$1.Provider, {
     value: columns,
     children: /*#__PURE__*/jsx(GridRoot, _extends({
@@ -16842,7 +16863,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var Grid$1 = Grid;
 
-const _excluded$e = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$f = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -16886,7 +16907,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -17090,8 +17111,8 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$d = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$b = ownerState => {
+const _excluded$e = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$c = ownerState => {
   const {
     classes,
     disableUnderline
@@ -17203,8 +17224,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$d);
-  const classes = useUtilityClasses$b(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
+  const classes = useUtilityClasses$c(props);
   const ownerState = {
     disableUnderline
   };
@@ -17420,6 +17441,169 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
 Input.muiName = 'Input';
 var Input$1 = Input;
 
+function getInputAdornmentUtilityClass(slot) {
+  return generateUtilityClass('MuiInputAdornment', slot);
+}
+const inputAdornmentClasses = generateUtilityClasses('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
+var inputAdornmentClasses$1 = inputAdornmentClasses;
+
+var _span$2;
+const _excluded$d = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
+const overridesResolver$1 = (props, styles) => {
+  const {
+    ownerState
+  } = props;
+  return [styles.root, styles[`position${capitalize(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
+};
+const useUtilityClasses$b = ownerState => {
+  const {
+    classes,
+    disablePointerEvents,
+    hiddenLabel,
+    position,
+    size,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', disablePointerEvents && 'disablePointerEvents', position && `position${capitalize(position)}`, variant, hiddenLabel && 'hiddenLabel', size && `size${capitalize(size)}`]
+  };
+  return composeClasses(slots, getInputAdornmentUtilityClass, classes);
+};
+const InputAdornmentRoot = styled$1('div', {
+  name: 'MuiInputAdornment',
+  slot: 'Root',
+  overridesResolver: overridesResolver$1
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'flex',
+  height: '0.01em',
+  // Fix IE11 flexbox alignment. To remove at some point.
+  maxHeight: '2em',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  color: (theme.vars || theme).palette.action.active
+}, ownerState.variant === 'filled' && {
+  // Styles applied to the root element if `variant="filled"`.
+  [`&.${inputAdornmentClasses$1.positionStart}&:not(.${inputAdornmentClasses$1.hiddenLabel})`]: {
+    marginTop: 16
+  }
+}, ownerState.position === 'start' && {
+  // Styles applied to the root element if `position="start"`.
+  marginRight: 8
+}, ownerState.position === 'end' && {
+  // Styles applied to the root element if `position="end"`.
+  marginLeft: 8
+}, ownerState.disablePointerEvents === true && {
+  // Styles applied to the root element if `disablePointerEvents={true}`.
+  pointerEvents: 'none'
+}));
+const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiInputAdornment'
+  });
+  const {
+      children,
+      className,
+      component = 'div',
+      disablePointerEvents = false,
+      disableTypography = false,
+      position,
+      variant: variantProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const muiFormControl = useFormControl() || {};
+  let variant = variantProp;
+  if (variantProp && muiFormControl.variant) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (variantProp === muiFormControl.variant) {
+        console.error('MUI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');
+      }
+    }
+  }
+  if (muiFormControl && !variant) {
+    variant = muiFormControl.variant;
+  }
+  const ownerState = _extends({}, props, {
+    hiddenLabel: muiFormControl.hiddenLabel,
+    size: muiFormControl.size,
+    disablePointerEvents,
+    position,
+    variant
+  });
+  const classes = useUtilityClasses$b(ownerState);
+  return /*#__PURE__*/jsx(FormControlContext$1.Provider, {
+    value: null,
+    children: /*#__PURE__*/jsx(InputAdornmentRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      ref: ref
+    }, other, {
+      children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/jsx(Typography$1, {
+        color: "text.secondary",
+        children: children
+      }) : /*#__PURE__*/jsxs(React.Fragment, {
+        children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span$2 || (_span$2 = /*#__PURE__*/jsx("span", {
+          className: "notranslate",
+          children: "\u200B"
+        })) : null, children]
+      })
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? InputAdornment.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, normally an `IconButton` or string.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents: PropTypes.bool,
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography: PropTypes.bool,
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: PropTypes.oneOf(['end', 'start']).isRequired,
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var InputAdornment$1 = InputAdornment;
+
 function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiInputLabel', slot);
 }
@@ -40335,9 +40519,6 @@ function nadgrid(key, data) {
   var view = new DataView(data);
   var isLittleEndian = detectLittleEndian(view);
   var header = readHeader(view, isLittleEndian);
-  if (header.nSubgrids > 1) {
-    console.log('Only single NTv2 subgrids are currently supported, subsequent sub grids are ignored');
-  }
   var subgrids = readSubgrids(view, header, isLittleEndian);
   var nadgrid = {header: header, subgrids: subgrids};
   loadedNadgrids[key] = nadgrid;
@@ -40424,6 +40605,7 @@ function readSubgrids(view, header, isLittleEndian) {
       count: subHeader.gridNodeCount,
       cvs: mapNodes(nodes)
     });
+    gridOffset += 176 + subHeader.gridNodeCount * 16;
   }
   return grids;
 }
@@ -40843,6 +41025,7 @@ function applyGridShift(source, inverse, point) {
   var input = {x: -point.x, y: point.y};
   var output = {x: Number.NaN, y: Number.NaN};
   var attemptedGrids = [];
+  outer:
   for (var i = 0; i < source.grids.length; i++) {
     var grid = source.grids[i];
     attemptedGrids.push(grid.name);
@@ -40858,19 +41041,22 @@ function applyGridShift(source, inverse, point) {
       }
       continue;
     }
-    var subgrid = grid.grid.subgrids[0];
-    // skip tables that don't match our point at all
-    var epsilon = (Math.abs(subgrid.del[1]) + Math.abs(subgrid.del[0])) / 10000.0;
-    var minX = subgrid.ll[0] - epsilon;
-    var minY = subgrid.ll[1] - epsilon;
-    var maxX = subgrid.ll[0] + (subgrid.lim[0] - 1) * subgrid.del[0] + epsilon;
-    var maxY = subgrid.ll[1] + (subgrid.lim[1] - 1) * subgrid.del[1] + epsilon;
-    if (minY > input.y || minX > input.x || maxY < input.y || maxX < input.x ) {
-      continue;
-    }
-    output = applySubgridShift(input, inverse, subgrid);
-    if (!isNaN(output.x)) {
-      break;
+    var subgrids = grid.grid.subgrids;
+    for (var j = 0, jj = subgrids.length; j < jj; j++) {
+      var subgrid = subgrids[j];
+      // skip tables that don't match our point at all
+      var epsilon = (Math.abs(subgrid.del[1]) + Math.abs(subgrid.del[0])) / 10000.0;
+      var minX = subgrid.ll[0] - epsilon;
+      var minY = subgrid.ll[1] - epsilon;
+      var maxX = subgrid.ll[0] + (subgrid.lim[0] - 1) * subgrid.del[0] + epsilon;
+      var maxY = subgrid.ll[1] + (subgrid.lim[1] - 1) * subgrid.del[1] + epsilon;
+      if (minY > input.y || minX > input.x || maxY < input.y || maxX < input.x ) {
+        continue;
+      }
+      output = applySubgridShift(input, inverse, subgrid);
+      if (!isNaN(output.x)) {
+        break outer;
+      }
     }
   }
   if (isNaN(output.x)) {
@@ -46313,6 +46499,93 @@ function polygon(coordinates, properties, options) {
     };
     return feature(geom, properties, options);
 }
+/**
+ * Creates a {@link LineString} {@link Feature} from an Array of Positions.
+ *
+ * @name lineString
+ * @param {Array<Array<number>>} coordinates an array of Positions
+ * @param {Object} [properties={}] an Object of key-value pairs to add as properties
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {Feature<LineString>} LineString Feature
+ * @example
+ * var linestring1 = turf.lineString([[-24, 63], [-23, 60], [-25, 65], [-20, 69]], {name: 'line 1'});
+ * var linestring2 = turf.lineString([[-14, 43], [-13, 40], [-15, 45], [-10, 49]], {name: 'line 2'});
+ *
+ * //=linestring1
+ * //=linestring2
+ */
+function lineString$1(coordinates, properties, options) {
+    if (options === void 0) { options = {}; }
+    if (coordinates.length < 2) {
+        throw new Error("coordinates must be an array of two or more positions");
+    }
+    var geom = {
+        type: "LineString",
+        coordinates: coordinates,
+    };
+    return feature(geom, properties, options);
+}
+/**
+ * Takes one or more {@link Feature|Features} and creates a {@link FeatureCollection}.
+ *
+ * @name featureCollection
+ * @param {Feature[]} features input features
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {FeatureCollection} FeatureCollection of Features
+ * @example
+ * var locationA = turf.point([-75.343, 39.984], {name: 'Location A'});
+ * var locationB = turf.point([-75.833, 39.284], {name: 'Location B'});
+ * var locationC = turf.point([-75.534, 39.123], {name: 'Location C'});
+ *
+ * var collection = turf.featureCollection([
+ *   locationA,
+ *   locationB,
+ *   locationC
+ * ]);
+ *
+ * //=collection
+ */
+function featureCollection(features, options) {
+    if (options === void 0) { options = {}; }
+    var fc = { type: "FeatureCollection" };
+    if (options.id) {
+        fc.id = options.id;
+    }
+    if (options.bbox) {
+        fc.bbox = options.bbox;
+    }
+    fc.features = features;
+    return fc;
+}
+/**
+ * Creates a {@link Feature<MultiLineString>} based on a
+ * coordinate array. Properties can be added optionally.
+ *
+ * @name multiLineString
+ * @param {Array<Array<Array<number>>>} coordinates an array of LineStrings
+ * @param {Object} [properties={}] an Object of key-value pairs to add as properties
+ * @param {Object} [options={}] Optional Parameters
+ * @param {Array<number>} [options.bbox] Bounding Box Array [west, south, east, north] associated with the Feature
+ * @param {string|number} [options.id] Identifier associated with the Feature
+ * @returns {Feature<MultiLineString>} a MultiLineString feature
+ * @throws {Error} if no coordinates are passed
+ * @example
+ * var multiLine = turf.multiLineString([[[0,0],[10,10]]]);
+ *
+ * //=multiLine
+ */
+function multiLineString(coordinates, properties, options) {
+    if (options === void 0) { options = {}; }
+    var geom = {
+        type: "MultiLineString",
+        coordinates: coordinates,
+    };
+    return feature(geom, properties, options);
+}
 /**
  * Creates a {@link Feature<MultiPolygon>} based on a
  * coordinate array. Properties can be added optionally.
@@ -46368,6 +46641,43 @@ function isObject$4(input) {
     return !!input && input.constructor === Object;
 }
 
+/**
+ * Callback for featureEach
+ *
+ * @callback featureEachCallback
+ * @param {Feature<any>} currentFeature The current Feature being processed.
+ * @param {number} featureIndex The current index of the Feature being processed.
+ */
+
+/**
+ * Iterate over features in any GeoJSON object, similar to
+ * Array.forEach.
+ *
+ * @name featureEach
+ * @param {FeatureCollection|Feature|Geometry} geojson any GeoJSON object
+ * @param {Function} callback a method that takes (currentFeature, featureIndex)
+ * @returns {void}
+ * @example
+ * var features = turf.featureCollection([
+ *   turf.point([26, 37], {foo: 'bar'}),
+ *   turf.point([36, 53], {hello: 'world'})
+ * ]);
+ *
+ * turf.featureEach(features, function (currentFeature, featureIndex) {
+ *   //=currentFeature
+ *   //=featureIndex
+ * });
+ */
+function featureEach(geojson, callback) {
+  if (geojson.type === "Feature") {
+    callback(geojson, 0);
+  } else if (geojson.type === "FeatureCollection") {
+    for (var i = 0; i < geojson.features.length; i++) {
+      if (callback(geojson.features[i], i) === false) break;
+    }
+  }
+}
+
 /**
  * Callback for geomEach
  *
@@ -47360,6 +47670,237 @@ function checkValidity(ring) {
   );
 }
 
+/**
+ * Converts a {@link Polygon} to {@link LineString|(Multi)LineString} or {@link MultiPolygon} to a
+ * {@link FeatureCollection} of {@link LineString|(Multi)LineString}.
+ *
+ * @name polygonToLine
+ * @param {Feature<Polygon|MultiPolygon>} poly Feature to convert
+ * @param {Object} [options={}] Optional parameters
+ * @param {Object} [options.properties={}] translates GeoJSON properties to Feature
+ * @returns {FeatureCollection|Feature<LineString|MultiLinestring>} converted (Multi)Polygon to (Multi)LineString
+ * @example
+ * var poly = turf.polygon([[[125, -30], [145, -30], [145, -20], [125, -20], [125, -30]]]);
+ *
+ * var line = turf.polygonToLine(poly);
+ *
+ * //addToMap
+ * var addToMap = [line];
+ */
+function polygonToLineString (poly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(poly);
+    if (!options.properties && poly.type === "Feature") {
+        options.properties = poly.properties;
+    }
+    switch (geom.type) {
+        case "Polygon":
+            return polygonToLine(geom, options);
+        case "MultiPolygon":
+            return multiPolygonToLine(geom, options);
+        default:
+            throw new Error("invalid poly");
+    }
+}
+/**
+ * @private
+ */
+function polygonToLine(poly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(poly);
+    var coords = geom.coordinates;
+    var properties = options.properties
+        ? options.properties
+        : poly.type === "Feature"
+            ? poly.properties
+            : {};
+    return coordsToLine(coords, properties);
+}
+/**
+ * @private
+ */
+function multiPolygonToLine(multiPoly, options) {
+    if (options === void 0) { options = {}; }
+    var geom = getGeom(multiPoly);
+    var coords = geom.coordinates;
+    var properties = options.properties
+        ? options.properties
+        : multiPoly.type === "Feature"
+            ? multiPoly.properties
+            : {};
+    var lines = [];
+    coords.forEach(function (coord) {
+        lines.push(coordsToLine(coord, properties));
+    });
+    return featureCollection(lines);
+}
+/**
+ * @private
+ */
+function coordsToLine(coords, properties) {
+    if (coords.length > 1) {
+        return multiLineString(coords, properties);
+    }
+    return lineString$1(coords[0], properties);
+}
+
+/**
+ * Takes a ring and return true or false whether or not the ring is clockwise or counter-clockwise.
+ *
+ * @name booleanClockwise
+ * @param {Feature<LineString>|LineString|Array<Array<number>>} line to be evaluated
+ * @returns {boolean} true/false
+ * @example
+ * var clockwiseRing = turf.lineString([[0,0],[1,1],[1,0],[0,0]]);
+ * var counterClockwiseRing = turf.lineString([[0,0],[1,0],[1,1],[0,0]]);
+ *
+ * turf.booleanClockwise(clockwiseRing)
+ * //=true
+ * turf.booleanClockwise(counterClockwiseRing)
+ * //=false
+ */
+function booleanClockwise(line) {
+    var ring = getCoords(line);
+    var sum = 0;
+    var i = 1;
+    var prev;
+    var cur;
+    while (i < ring.length) {
+        prev = cur || ring[0];
+        cur = ring[i];
+        sum += (cur[0] - prev[0]) * (cur[1] + prev[1]);
+        i++;
+    }
+    return sum > 0;
+}
+
+/**
+ * Rewind {@link LineString|(Multi)LineString} or {@link Polygon|(Multi)Polygon} outer ring counterclockwise and inner rings clockwise (Uses {@link http://en.wikipedia.org/wiki/Shoelace_formula|Shoelace Formula}).
+ *
+ * @name rewind
+ * @param {GeoJSON} geojson input GeoJSON Polygon
+ * @param {Object} [options={}] Optional parameters
+ * @param {boolean} [options.reverse=false] enable reverse winding
+ * @param {boolean} [options.mutate=false] allows GeoJSON input to be mutated (significant performance increase if true)
+ * @returns {GeoJSON} rewind Polygon
+ * @example
+ * var polygon = turf.polygon([[[121, -29], [138, -29], [138, -18], [121, -18], [121, -29]]]);
+ *
+ * var rewind = turf.rewind(polygon);
+ *
+ * //addToMap
+ * var addToMap = [rewind];
+ */
+function rewind(geojson, options) {
+  // Optional parameters
+  options = options || {};
+  if (!isObject$4(options)) throw new Error("options is invalid");
+  var reverse = options.reverse || false;
+  var mutate = options.mutate || false;
+
+  // validation
+  if (!geojson) throw new Error("<geojson> is required");
+  if (typeof reverse !== "boolean")
+    throw new Error("<reverse> must be a boolean");
+  if (typeof mutate !== "boolean")
+    throw new Error("<mutate> must be a boolean");
+
+  // prevent input mutation
+  if (mutate === false) geojson = clone(geojson);
+
+  // Support Feature Collection or Geometry Collection
+  var results = [];
+  switch (geojson.type) {
+    case "GeometryCollection":
+      geomEach(geojson, function (geometry) {
+        rewindFeature(geometry, reverse);
+      });
+      return geojson;
+    case "FeatureCollection":
+      featureEach(geojson, function (feature) {
+        featureEach(rewindFeature(feature, reverse), function (result) {
+          results.push(result);
+        });
+      });
+      return featureCollection(results);
+  }
+  // Support Feature or Geometry Objects
+  return rewindFeature(geojson, reverse);
+}
+
+/**
+ * Rewind
+ *
+ * @private
+ * @param {Geometry|Feature<any>} geojson Geometry or Feature
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {Geometry|Feature<any>} rewind Geometry or Feature
+ */
+function rewindFeature(geojson, reverse) {
+  var type = geojson.type === "Feature" ? geojson.geometry.type : geojson.type;
+
+  // Support all GeoJSON Geometry Objects
+  switch (type) {
+    case "GeometryCollection":
+      geomEach(geojson, function (geometry) {
+        rewindFeature(geometry, reverse);
+      });
+      return geojson;
+    case "LineString":
+      rewindLineString(getCoords(geojson), reverse);
+      return geojson;
+    case "Polygon":
+      rewindPolygon(getCoords(geojson), reverse);
+      return geojson;
+    case "MultiLineString":
+      getCoords(geojson).forEach(function (lineCoords) {
+        rewindLineString(lineCoords, reverse);
+      });
+      return geojson;
+    case "MultiPolygon":
+      getCoords(geojson).forEach(function (lineCoords) {
+        rewindPolygon(lineCoords, reverse);
+      });
+      return geojson;
+    case "Point":
+    case "MultiPoint":
+      return geojson;
+  }
+}
+
+/**
+ * Rewind LineString - outer ring clockwise
+ *
+ * @private
+ * @param {Array<Array<number>>} coords GeoJSON LineString geometry coordinates
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {void} mutates coordinates
+ */
+function rewindLineString(coords, reverse) {
+  if (booleanClockwise(coords) === reverse) coords.reverse();
+}
+
+/**
+ * Rewind Polygon - outer ring counterclockwise and inner rings clockwise.
+ *
+ * @private
+ * @param {Array<Array<Array<number>>>} coords GeoJSON Polygon geometry coordinates
+ * @param {Boolean} [reverse=false] enable reverse winding
+ * @returns {void} mutates coordinates
+ */
+function rewindPolygon(coords, reverse) {
+  // outer ring
+  if (booleanClockwise(coords[0]) !== reverse) {
+    coords[0].reverse();
+  }
+  // inner rings
+  for (var i = 1; i < coords.length; i++) {
+    if (booleanClockwise(coords[i]) === reverse) {
+      coords[i].reverse();
+    }
+  }
+}
+
 /**
  * splaytree v3.1.2
  * Fast Splay tree for Node and browser
@@ -52629,6 +53170,37 @@ const SelectField = ({
   }) : getLabel(value.toString())))));
 };
 
+const IntersectionSelect = ({
+  intersections,
+  onChangeIntersection
+}) => {
+  const [activeIntersection, setActiveIntersection] = React__default.useState(0);
+  return /*#__PURE__*/React__default.createElement(Grid$1, {
+    item: true,
+    sm: 12
+  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
+    variant: "filled",
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(InputLabel$1, {
+    id: "demo-intersection"
+  }, "Intersection shapes"), /*#__PURE__*/React__default.createElement(Select$1, {
+    labelId: "demo-intersection",
+    value: activeIntersection.toString(),
+    onChange: event => {
+      const featureIndex = parseInt(event.target.value, 10);
+      setActiveIntersection(featureIndex);
+      onChangeIntersection(intersections[featureIndex].geojson);
+    }
+  }, intersections.map((listItem, index) => {
+    return /*#__PURE__*/React__default.createElement(MenuItem$1, {
+      key: listItem.title,
+      value: index
+    }, listItem.title);
+  }))));
+};
+
 function n(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=arguments[e];if("production"!==process.env.NODE_ENV){var i=Y[n],o=i?"function"==typeof i?i.apply(null,t):i:"unknown error nr: "+n;throw Error("[Immer] "+o)}throw Error("[Immer] minified error nr: "+n+(t.length?" "+t.map((function(n){return "'"+n+"'"})).join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function r(n){return !!n&&!!n[Q]}function t(n){var r;return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var r=Object.getPrototypeOf(n);if(null===r)return !0;var t=Object.hasOwnProperty.call(r,"constructor")&&r.constructor;return t===Object||"function"==typeof t&&Function.toString.call(t)===Z}(n)||Array.isArray(n)||!!n[L]||!!(null===(r=n.constructor)||void 0===r?void 0:r[L])||s(n)||v(n))}function i(n,r,t){void 0===t&&(t=!1),0===o(n)?(t?Object.keys:nn)(n).forEach((function(e){t&&"symbol"==typeof e||r(e,n[e],n);})):n.forEach((function(t,e){return r(e,t,n)}));}function o(n){var r=n[Q];return r?r.i>3?r.i-4:r.i:Array.isArray(n)?1:s(n)?2:v(n)?3:0}function u(n,r){return 2===o(n)?n.has(r):Object.prototype.hasOwnProperty.call(n,r)}function a(n,r){return 2===o(n)?n.get(r):n[r]}function f(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?n.add(t):n[r]=t;}function c(n,r){return n===r?0!==n||1/n==1/r:n!=n&&r!=r}function s(n){return X&&n instanceof Map}function v(n){return q&&n instanceof Set}function p(n){return n.o||n.t}function l(n){if(Array.isArray(n))return Array.prototype.slice.call(n);var r=rn(n);delete r[Q];for(var t=nn(r),e=0;e<t.length;e++){var i=t[e],o=r[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),r)}function d(n,e){return void 0===e&&(e=!1),y(n)||r(n)||!t(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h),Object.freeze(n),e&&i(n,(function(n,r){return d(r,!0)}),!0)),n}function h(){n(2);}function y(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b(r){var t=tn[r];return t||n(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n(0),U}function j(n,r){r&&(b("Patches"),n.u=[],n.s=[],n.v=r);}function g(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var r=n[Q];0===r.i||1===r.i?r.j():r.g=!0;}function P(r,e){e._=e.p.length;var i=e.p[0],o=void 0!==r&&r!==i;return e.h.O||b("ES5").S(e,r,o),o?(i[Q].P&&(g(e),n(4)),t(r)&&(r=M(e,r),e.l||x(e,r)),e.u&&b("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),g(e),e.u&&e.v(e.u,e.s),r!==H?r:void 0}function M(n,r,t){if(y(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l(e.k):e.o,u=o,a=!1;3===e.i&&(u=new Set(o),o.clear(),a=!0),i(u,(function(r,i){return A(n,e,o,r,i,t,a)})),x(n,o,!1),t&&n.u&&b("Patches").N(e,t,n.u,n.s);}return e.o}function A(e,i,o,a,c,s,v){if("production"!==process.env.NODE_ENV&&c===o&&n(5),r(c)){var p=M(e,c,s&&i&&3!==i.i&&!u(i.R,a)?s.concat(a):void 0);if(f(o,a,p),!r(p))return;e.m=!1;}else v&&o.add(c);if(t(c)&&!y(c)){if(!e.h.D&&e._<1)return;M(e,c),i&&i.A.l||x(e,c);}}function x(n,r,t){void 0===t&&(t=!1),!n.l&&n.h.D&&n.m&&d(r,t);}function z(n,r){var t=n[Q];return (t?p(t):n)[r]}function I(n,r){if(r in n)for(var t=Object.getPrototypeOf(n);t;){var e=Object.getOwnPropertyDescriptor(t,r);if(e)return e;t=Object.getPrototypeOf(t);}}function k(n){n.P||(n.P=!0,n.l&&k(n.l));}function E(n){n.o||(n.o=l(n.t));}function N(n,r,t){var e=s(r)?b("MapSet").F(r,t):v(r)?b("MapSet").T(r,t):n.O?function(n,r){var t=Array.isArray(n),e={i:t?1:0,A:r?r.A:_(),P:!1,I:!1,R:{},l:r,t:n,k:null,o:null,j:null,C:!1},i=e,o=en;t&&(i=[e],o=on);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(r,t):b("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function R(e){return r(e)||n(22,e),function n(r){if(!t(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b("ES5").K(u)))return u.t;u.I=!0,e=D(r,c),u.I=!1;}else e=D(r,c);return i(e,(function(r,t){u&&a(u.t,r)===t||f(e,r,n(t));})),3===c?new Set(e):e}(e)}function D(n,r){switch(r){case 2:return new Map(n);case 3:return Array.from(n)}return l(n)}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q="undefined"!=typeof Set,B="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H=W?Symbol.for("immer-nothing"):((G={})["immer-nothing"]=!0,G),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Y={0:"Illegal state",1:"Immer drafts cannot have computed properties",2:"This object has been frozen and should not be mutated",3:function(n){return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+n},4:"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",5:"Immer forbids circular references",6:"The first or second argument to `produce` must be a function",7:"The third argument to `produce` must be a function or undefined",8:"First argument to `createDraft` must be a plain object, an array, or an immerable object",9:"First argument to `finishDraft` must be a draft returned by `createDraft`",10:"The given draft is already finalized",11:"Object.defineProperty() cannot be used on an Immer draft",12:"Object.setPrototypeOf() cannot be used on an Immer draft",13:"Immer only supports deleting array indices",14:"Immer only supports setting array indices and the 'length' property",15:function(n){return "Cannot apply patch, path doesn't resolve: "+n},16:'Sets cannot have "replace" patches.',17:function(n){return "Unsupported patch operation: "+n},18:function(n){return "The plugin for '"+n+"' has not been loaded into Immer. To enable the plugin, import and call `enable"+n+"()` when initializing your application."},20:"Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available",21:function(n){return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '"+n+"'"},22:function(n){return "'current' expects a draft, got: "+n},23:function(n){return "'original' expects a draft, got: "+n},24:"Patching reserved attributes like __proto__, prototype and constructor is not allowed"},Z=""+Object.prototype.constructor,nn="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,rn=Object.getOwnPropertyDescriptors||function(n){var r={};return nn(n).forEach((function(t){r[t]=Object.getOwnPropertyDescriptor(n,t);})),r},tn={},en={get:function(n,r){if(r===Q)return n;var e=p(n);if(!u(e,r))return function(n,r,t){var e,i=I(r,t);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,r);var i=e[r];return n.I||!t(i)?i:i===z(n.t,r)?(E(n),n.o[r]=N(n.A.h,i,n)):i},has:function(n,r){return r in p(n)},ownKeys:function(n){return Reflect.ownKeys(p(n))},set:function(n,r,t){var e=I(p(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z(p(n),r),o=null==i?void 0:i[Q];if(o&&o.t===t)return n.o[r]=t,n.R[r]=!1,!0;if(c(t,i)&&(void 0!==t||u(n.t,r)))return !0;E(n),k(n);}return n.o[r]===t&&(void 0!==t||r in n.o)||Number.isNaN(t)&&Number.isNaN(n.o[r])||(n.o[r]=t,n.R[r]=!0),!0},deleteProperty:function(n,r){return void 0!==z(n.t,r)||r in n.t?(n.R[r]=!1,E(n),k(n)):delete n.R[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p(n),e=Reflect.getOwnPropertyDescriptor(t,r);return e?{writable:!0,configurable:1!==n.i||"length"!==r,enumerable:e.enumerable,value:t[r]}:e},defineProperty:function(){n(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n(12);}},on={};i(en,(function(n,r){on[n]=function(){return arguments[0]=arguments[0][0],r.apply(this,arguments)};})),on.deleteProperty=function(r,t){return "production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&n(13),on.set.call(this,r,t,void 0)},on.set=function(r,t,e){return "production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&n(14),en.set.call(this,r[0],t,e,r[0])};var un=function(){function e(r){var e=this;this.O=B,this.D=!0,this.produce=function(r,i,o){if("function"==typeof r&&"function"!=typeof i){var u=i;i=r;var a=e;return function(n){var r=this;void 0===n&&(n=u);for(var t=arguments.length,e=Array(t>1?t-1:0),o=1;o<t;o++)e[o-1]=arguments[o];return a.produce(n,(function(n){var t;return (t=i).call.apply(t,[r,n].concat(e))}))}}var f;if("function"!=typeof i&&n(6),void 0!==o&&"function"!=typeof o&&n(7),t(r)){var c=w(e),s=N(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?g(c):O(c);}return "undefined"!=typeof Promise&&f instanceof Promise?f.then((function(n){return j(c,o),P(n,c)}),(function(n){throw g(c),n})):(j(c,o),P(f,c))}if(!r||"object"!=typeof r){if(void 0===(f=i(r))&&(f=r),f===H&&(f=void 0),e.D&&d(f,!0),o){var p=[],l=[];b("Patches").M(r,f,p,l),o(p,l);}return f}n(21,r);},this.produceWithPatches=function(n,r){if("function"==typeof n)return function(r){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o<t;o++)i[o-1]=arguments[o];return e.produceWithPatches(r,(function(r){return n.apply(void 0,[r].concat(i))}))};var t,i,o=e.produce(n,r,(function(n,r){t=n,i=r;}));return "undefined"!=typeof Promise&&o instanceof Promise?o.then((function(n){return [n,t,i]})):[o,t,i]},"boolean"==typeof(null==r?void 0:r.useProxies)&&this.setUseProxies(r.useProxies),"boolean"==typeof(null==r?void 0:r.autoFreeze)&&this.setAutoFreeze(r.autoFreeze);}var i=e.prototype;return i.createDraft=function(e){t(e)||n(8),r(e)&&(e=R(e));var i=w(this),o=N(this,e,void 0);return o[Q].C=!0,O(i),o},i.finishDraft=function(r,t){var e=r&&r[Q];"production"!==process.env.NODE_ENV&&(e&&e.C||n(9),e.I&&n(10));var i=e.A;return j(i,t),P(void 0,i)},i.setAutoFreeze=function(n){this.D=n;},i.setUseProxies=function(r){r&&!B&&n(20),this.O=r;},i.applyPatches=function(n,t){var e;for(e=t.length-1;e>=0;e--){var i=t[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}e>-1&&(t=t.slice(e+1));var o=b("Patches").$;return r(n)?o(n,t):this.produce(n,(function(n){return o(n,t)}))},e}(),an=new un,fn=an.produce;an.produceWithPatches.bind(an);an.setAutoFreeze.bind(an);an.setUseProxies.bind(an);an.applyPatches.bind(an);an.createDraft.bind(an);an.finishDraft.bind(an);var produce = fn;
 
 /**
@@ -52802,6 +53374,20 @@ const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
   const newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
   return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
 };
+const rewindGeometry = geoJSON => {
+  return produce(geoJSON, geoJSONDraft => {
+    if (geoJSONDraft && geoJSONDraft.features.length > 0 && geoJSONDraft.features[0].geometry.type === 'Polygon' && geoJSONDraft.features[0].geometry.coordinates[0].length > 1) {
+      const {
+        geometry
+      } = geoJSON.features[0];
+      const lineString = polygonToLineString(geometry);
+      if (booleanClockwise(lineString.geometry.coordinates)) {
+        // eslint-disable-next-line no-param-reassign
+        geoJSONDraft.features[0].geometry = rewind(geoJSONDraft.features[0].geometry);
+      }
+    }
+  });
+};
 
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
@@ -52889,7 +53475,10 @@ const useMapDrawTool = ({
   defaultGeoJSON: _defaultGeoJSON = emptyGeoJSON,
   defaultGeoJSONIntersection: _defaultGeoJSONIntersection = emptyIntersectionShape,
   defaultGeoJSONIntersectionBounds,
-  defaultGeoJSONIntersectionProperties: _defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties
+  defaultGeoJSONIntersectionProperties: _defaultGeoJSONIntersectionProperties = defaultIntersectionStyleProperties,
+  geoJSONLayerId: _geoJSONLayerId = 'draw-layer',
+  geoJSONIntersectionLayerId: _geoJSONIntersectionLayerId = 'intersection-layer',
+  geoJSONIntersectionBoundsLayerId: _geoJSONIntersectionBoundsLayerId = 'static-layer'
 }) => {
   // geoJSON feature collections
   const [geoJSON, setGeoJSON] = React__default.useState(_defaultGeoJSON);
@@ -52929,7 +53518,7 @@ const useMapDrawTool = ({
       reset(shouldDeleteShape);
       return;
     }
-    setActiveTool(newMode.drawModeId);
+    setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
     // updates shape
     const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
     const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleShapes || isNewSelectedTool;
@@ -52939,7 +53528,7 @@ const useMapDrawTool = ({
     }
     // handle modes and update feature layer index
     setDrawMode(newMode.value);
-    setEditMode(!!newMode.value);
+    setEditMode(!!newMode.value && newMode.isSelectable);
   };
   const changeGeoJSON = (updatedGeoJSON, reason = '') => {
     const geoJSONFeatureCollection = getFeatureCollection(updatedGeoJSON, _shouldAllowMultipleShapes, geoJSON);
@@ -53001,7 +53590,7 @@ const useMapDrawTool = ({
       isInEditMode: false
     };
   };
-  const layers = [...(geoJSONIntersectionBounds ? [getLayer('geoJSONIntersectionBounds', 'static-layer'), getLayer('geoJSONIntersection', 'intersection-layer')] : []), getLayer('geoJSON', 'draw-layer')];
+  const layers = [...(geoJSONIntersectionBounds ? [getLayer('geoJSONIntersectionBounds', _geoJSONIntersectionBoundsLayerId), getLayer('geoJSONIntersection', _geoJSONIntersectionLayerId)] : []), getLayer('geoJSON', _geoJSONLayerId)];
   return {
     geoJSON,
     geoJSONIntersection,
@@ -53026,8 +53615,24 @@ const useMapDrawTool = ({
   };
 };
 
+const opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
+const fillOptions = [defaultGeoJSONStyleProperties.fill, '#6e1e91', '#FF00FF', '#33ccFF', '#8F8'];
+const strokeWidthOptions = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
+const getToolIcon = id => {
+  const defaultIcon = getIcon(id);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (id === 'tool-fir') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  }
+  if (id === 'tool-custom-line') {
+    return /*#__PURE__*/React__default.createElement(ArrowUp, null);
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
 // custom buttons
-const shapeButtonNL = {
+const shapeButtonNL$2 = {
   drawModeId: 'tool-fir',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
@@ -53048,8 +53653,8 @@ const customLineButton = {
   },
   isSelectable: false
 };
-// example options
 const basicExampleDrawOptions = {
+  defaultDrawModes: [...defaultModes, shapeButtonNL$2, customLineButton],
   defaultGeoJSON: {
     type: 'FeatureCollection',
     features: [{
@@ -53067,7 +53672,7 @@ const basicExampleDrawOptions = {
 const basicExampleMultipleShapeDrawOptions = {
   shouldAllowMultipleShapes: true,
   // add multiple tools, and update all with custom color
-  defaultDrawModes: [...defaultModes, shapeButtonNL, customLineButton].map(mode => Object.assign(Object.assign({}, mode), {
+  defaultDrawModes: [...defaultModes, shapeButtonNL$2, customLineButton].map(mode => Object.assign(Object.assign({}, mode), {
     shape: Object.assign(Object.assign({}, mode.shape), {
       properties: Object.assign(Object.assign({}, mode.shape.properties), {
         stroke: '#8F8',
@@ -53080,6 +53685,295 @@ const basicExampleMultipleShapeDrawOptions = {
   }))
 };
 
+const getIntersectionToolIcon = id => {
+  const defaultIcon = getIcon(id);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (id === 'fir-nl') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+  }
+  if (id === 'fir-be') {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+      sx: {
+        transform: `scaleY(-1)`
+      }
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
+// custom buttons
+const shapeButtonNL$1 = {
+  drawModeId: 'tool-fir',
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR NL polygon',
+  shape: intersectionFeatureNL,
+  isSelectable: false
+};
+const shapeButtonBE$1 = {
+  drawModeId: 'fir-be',
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR BE polygon',
+  shape: intersectionFeatureBE,
+  isSelectable: false
+};
+const geoJSONIntersectionBoundsStyle$1 = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#0075a9',
+  'fill-opacity': 0.0
+};
+const featurePropsIntersectionEnd = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#6e1e91',
+  'fill-opacity': 0.5
+};
+const intersectionShapeNL$1 = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+    properties: geoJSONIntersectionBoundsStyle$1
+  })]
+};
+const intersectionShapeBE$1 = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
+    properties: geoJSONIntersectionBoundsStyle$1
+  })]
+};
+const exampleIntersections = [{
+  title: 'NL',
+  geojson: intersectionShapeNL$1
+}, {
+  title: 'BE',
+  geojson: intersectionShapeBE$1
+}];
+const exampleIntersectionOptions = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL$1,
+  defaultDrawModes: [defaultPoint, defaultPolygon, defaultBox, shapeButtonNL$1, shapeButtonBE$1, defaultDelete]
+};
+const exampleIntersectionWithShapeOptions = {
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropsIntersectionEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[5.711880814773656, 55.12656218004421], [7.663910745234145, 55.970965630799725], [10.075241835802988, 52.35182632872327], [6.673542618750517, 51.77828698943017], [4.506215269489237, 53.442721496909385], [5.711880814773656, 55.12656218004421]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropsIntersectionEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[4.506215269489237, 53.442721496909385], [6.515104876543458, 51.89996184648691], [7.053095, 52.237764], [7.031389, 52.268885], [7.063612, 52.346109], [7.065557, 52.385828], [7.133055, 52.888887], [7.14218, 52.898244], [7.191667, 53.3], [6.5, 53.666667], [6.500002, 55.000002], [5.621260209964854, 55.00000082834584], [4.506215269489237, 53.442721496909385]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL$1,
+  defaultDrawModes: [Object.assign(Object.assign({}, defaultPoint), {
+    shape: Object.assign(Object.assign({}, defaultPoint.shape), {
+      properties: Object.assign(Object.assign({}, defaultPoint.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, defaultPolygon), {
+    shape: Object.assign(Object.assign({}, defaultPolygon.shape), {
+      properties: Object.assign(Object.assign({}, defaultPolygon.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, defaultBox), {
+    shape: Object.assign(Object.assign({}, defaultBox.shape), {
+      properties: Object.assign(Object.assign({}, defaultBox.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, shapeButtonNL$1), {
+    shape: Object.assign(Object.assign({}, shapeButtonNL$1.shape), {
+      properties: Object.assign(Object.assign({}, shapeButtonNL$1.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), Object.assign(Object.assign({}, shapeButtonBE$1), {
+    shape: Object.assign(Object.assign({}, shapeButtonBE$1.shape), {
+      properties: Object.assign(Object.assign({}, shapeButtonBE$1.shape.properties), featurePropsIntersectionEnd)
+    })
+  }), defaultDelete],
+  defaultGeoJSONIntersectionProperties: featurePropsIntersectionEnd
+};
+
+const firButtonDrawId = 'fir-button';
+// styles and shapes
+const featurePropertiesStart = defaultGeoJSONStyleProperties;
+const featurePropertiesEnd = {
+  stroke: '#6e1e91',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#6e1e91',
+  'fill-opacity': 0.25
+};
+const geoJSONIntersectionBoundsStyle = {
+  stroke: '#000000',
+  'stroke-width': 1.5,
+  'stroke-opacity': 1,
+  fill: '#0075a9',
+  'fill-opacity': 0.0
+};
+const intersectionShapeNL = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
+      selectionType: 'fir'
+    })
+  })]
+};
+const intersectionShapeBE = {
+  type: 'FeatureCollection',
+  features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
+    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
+      selectionType: 'fir'
+    })
+  })]
+};
+// custom buttons
+const shapeButtonNL = {
+  drawModeId: firButtonDrawId,
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR NL polygon',
+  shape: intersectionShapeNL,
+  isSelectable: false
+};
+const shapeButtonBE = {
+  drawModeId: firButtonDrawId,
+  value: DRAWMODE.POLYGON,
+  title: 'Custom FIR BE polygon',
+  shape: intersectionShapeBE,
+  isSelectable: false
+};
+const exampleIntersectionsMultiDrawTool = [{
+  title: 'NL',
+  geojson: shapeButtonNL.shape
+}, {
+  title: 'BE',
+  geojson: shapeButtonBE.shape
+}];
+const getDoubleControlToolIcon = drawMode => {
+  const {
+    drawModeId
+  } = drawMode;
+  const defaultIcon = getIcon(drawModeId);
+  if (defaultIcon) {
+    return defaultIcon;
+  }
+  if (drawModeId === firButtonDrawId) {
+    return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
+      sx: Object.assign({}, drawMode.title === shapeButtonBE.title && {
+        transform: `scaleY(-1)`
+      })
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
+};
+const getEditModes = geoJSONProperties => [Object.assign(Object.assign({}, defaultPoint), {
+  shape: Object.assign(Object.assign({}, defaultPoint.shape), {
+    properties: Object.assign(Object.assign({}, defaultPoint.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, defaultPolygon), {
+  shape: Object.assign(Object.assign({}, defaultPolygon.shape), {
+    properties: Object.assign(Object.assign({}, defaultPolygon.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, defaultBox), {
+  shape: Object.assign(Object.assign({}, defaultBox.shape), {
+    properties: Object.assign(Object.assign({}, defaultBox.shape.properties), geoJSONProperties)
+  })
+}), Object.assign(Object.assign({}, shapeButtonNL), {
+  shape: Object.assign(Object.assign({}, shapeButtonNL.shape), {
+    features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
+      properties: Object.assign(Object.assign({}, intersectionShapeNL.features[0].properties), geoJSONProperties)
+    })]
+  })
+}), defaultDelete];
+const getUpdatedFirShape = isNL => isNL ? intersectionShapeNL : intersectionShapeBE;
+const getFirTitle = isNL => isNL ? shapeButtonNL.title : shapeButtonBE.title;
+const updateEditModeButtonsWithFir = (drawModes, newFirGeoJSON) => {
+  const isNL = newFirGeoJSON === intersectionShapeNL;
+  return drawModes.map(mode => {
+    if (mode.drawModeId === firButtonDrawId) {
+      return Object.assign(Object.assign({}, mode), {
+        shape: getUpdatedFirShape(isNL),
+        title: getFirTitle(isNL)
+      });
+    }
+    return mode;
+  });
+};
+// example configs
+const startToolExampleConfig = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL,
+  defaultDrawModes: getEditModes(featurePropertiesStart),
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesStart), {
+        selectionType: 'box'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[9.451665078283622, 53.21804334226515], [4.734608638338736, 53.21804334226515], [4.734608638338736, 54.57650543915101], [9.451665078283622, 54.57650543915101], [9.451665078283622, 53.21804334226515]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, defaultIntersectionStyleProperties), {
+        selectionType: 'box'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[4.734608638338736, 53.21804334226515], [7.181571844927457, 53.21804334226515], [7.191667, 53.3], [6.5, 53.666667], [6.500001364755953, 54.57650543915101], [4.734608638338736, 54.57650543915101], [4.734608638338736, 53.21804334226515]]]
+      }
+    }]
+  }
+};
+const endToolExampleConfig = {
+  defaultGeoJSONIntersectionBounds: intersectionShapeNL,
+  defaultDrawModes: getEditModes(featurePropertiesEnd),
+  defaultGeoJSONIntersectionProperties: featurePropertiesEnd,
+  defaultGeoJSON: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[2.3408785046353606, 52.57033268070152], [8.870833501723242, 51.74975701659361], [-0.088053542798945, 50.72496422996941], [2.3408785046353606, 52.57033268070152]]]
+      }
+    }]
+  },
+  defaultGeoJSONIntersection: {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      properties: Object.assign(Object.assign({}, featurePropertiesEnd), {
+        selectionType: 'poly'
+      }),
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[[2.000002, 51.500002], [3.370001, 51.369722], [3.362223, 51.320002], [3.36389, 51.313608], [3.373613, 51.309999], [3.952501, 51.214441], [4.397501, 51.452776], [5.078611, 51.391665], [5.249839243115953, 51.335557264081125], [6.173465572431757, 51.44120940537001], [5.94639, 51.811663], [6.405001, 51.830828], [6.708618091513499, 52.02146813052448], [2.8253551673020594, 52.50945174669971], [2.000002, 51.500002]]]
+      }
+    }]
+  }
+};
+
 var fails$5 = fails$j;
 var global$4 = global$h;
 
@@ -53825,6 +54719,30 @@ function debounce$2 (delay, callback, options) {
 const setLayerInfo = (wmLayer, mapId, onUpdateLayerInformation) => {
   const origin = 'ReactMapViewParseLayer';
   const map = webmapUtils.getWMJSMapById(mapId);
+  const mapDimensions = map === null || map === void 0 ? void 0 : map.mapdimensions.map(mapdim => {
+    return {
+      units: mapdim.units,
+      currentValue: mapdim.currentValue,
+      name: mapdim.name
+    };
+  });
+  const layerDimensions = wmLayer.dimensions.map(dim => {
+    const {
+      name,
+      units,
+      synced
+    } = dim;
+    return {
+      name,
+      units,
+      currentValue: dim.getValue(),
+      minValue: dim.getFirstValue(),
+      maxValue: dim.getLastValue(),
+      timeInterval: dim.getDimInterval(),
+      values: dim.getValues(),
+      synced
+    };
+  });
   /* Update list of layers for service */
   const updateObject = {
     origin,
@@ -53836,34 +54754,12 @@ const setLayerInfo = (wmLayer, mapId, onUpdateLayerInformation) => {
     mapDimensions: {
       mapId,
       origin,
-      dimensions: map && map.mapdimensions.map(mapdim => {
-        return {
-          units: mapdim.units,
-          currentValue: mapdim.currentValue,
-          name: mapdim.name
-        };
-      }) || []
+      dimensions: mapDimensions !== null && mapDimensions !== void 0 ? mapDimensions : []
     },
     layerDimensions: {
       origin,
       layerId: wmLayer.id,
-      dimensions: wmLayer.dimensions.map(dim => {
-        const {
-          name,
-          units,
-          synced
-        } = dim;
-        return {
-          name,
-          units,
-          currentValue: dim.getValue(),
-          minValue: dim.getFirstValue(),
-          maxValue: dim.getLastValue(),
-          timeInterval: dim.getDimInterval(),
-          values: dim.getValues(),
-          synced
-        };
-      })
+      dimensions: layerDimensions
     }
   };
   onUpdateLayerInformation === null || onUpdateLayerInformation === void 0 ? void 0 : onUpdateLayerInformation(updateObject);
@@ -54453,6 +55349,15 @@ class ReactMapView extends React.Component {
         }
       }
     }
+    /* Check if srs */
+    if (!prevProps || prevProps.srs !== props.srs) {
+      if (props.bbox.left !== undefined) {
+        wmjsMap.suspendEvent('onupdatebbox');
+        wmjsMap.setProjection(props.srs, new WMBBOX(props.bbox));
+        wmjsMap.resumeEvent('onupdatebbox');
+        wmjsMap.draw();
+      }
+    }
     /* Check display/hide map cursor */
     if (!prevProps || prevProps.displayMapPin !== props.displayMapPin) {
       if (props.displayMapPin === true) {
@@ -56097,6 +57002,53 @@ const MapWarningProperties = ({
   }, "Identifier: ", selectedFeatureProperties.identifier)));
 };
 
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+const SearchDialog = ({
+  isOpen,
+  onClose
+}) => {
+  return isOpen ? /*#__PURE__*/React__default.createElement(Box$3, {
+    tabIndex: -1,
+    sx: {
+      position: 'absolute',
+      pointerEvents: 'all',
+      zIndex: 999,
+      left: 50,
+      top: 15,
+      backgroundColor: theme => theme.palette.background.paper
+    }
+  }, /*#__PURE__*/React__default.createElement(TextField$1, {
+    id: "dummy-search-field",
+    label: "Search",
+    variant: "filled",
+    InputProps: {
+      endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment$1, {
+        position: "end"
+      }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+        tooltipTitle: "Close",
+        edge: "end",
+        onClick: onClose,
+        size: "large"
+      }, /*#__PURE__*/React__default.createElement(Close, null)))
+    }
+  })) : null;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -56658,4 +57610,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, featureBox, featureMultiPoint, featurePoint, featurePolygon, formatTime, getDrawFunctionFromStore, getFeatureCollection, getGeoJSONPropertyValue, getGeoJson, getIcon, getTimeDimension, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, publicLayers, publicServices, registerDrawFunction, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, useGeoJSON, useMapDrawTool };
+export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SearchDialog, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getTimeDimension, getToolIcon, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };