@opengeoweb/webmap-react 9.0.0 → 9.2.0

package/index.esm.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import React__default, { Component, forwardRef, useContext, Children, isValidElement, cloneElement, useRef, useState, useEffect, useCallback, createRef, PureComponent } from 'react';
-import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getMapImageStore, LayerType, WMBBOX, debugLogger, DebugType, WMLayer, WMJSMap, tilesettings } from '@opengeoweb/webmap';
+import { legendImageStore, WMImageEventType, webmapUtils, getLegendGraphicURLForLayer, getMapImageStore, LayerType, WMBBOX, debugLogger, DebugType, WMLayer, WMJSMap, tilesettings, getWMJSMapById } from '@opengeoweb/webmap';
 import { CustomTooltip, ToolContainerDraggable, dateUtils, CustomIconButton } from '@opengeoweb/shared';
 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, DrawFIRLand, ArrowUp, Home, Add, Minus, Close } from '@opengeoweb/theme';
+import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus } from '@opengeoweb/theme';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7209,7 +7209,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$H = ["values", "unit", "step"];
+const _excluded$G = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -7244,7 +7244,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$H);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$G);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -8335,7 +8335,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$G = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$F = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -8343,7 +8343,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$G);
+    other = _objectWithoutPropertiesLoose(options, _excluded$F);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -8411,7 +8411,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$F = ["sx"];
+const _excluded$E = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -8432,7 +8432,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$F);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   const {
     systemProps,
     otherProps
@@ -8458,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$E = ["className", "component"];
+const _excluded$D = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -8476,7 +8476,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$E);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$D);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -8487,29 +8487,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-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"];
+const _excluded$C = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -8523,7 +8501,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -8535,7 +8513,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$C = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$B = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -8672,7 +8650,7 @@ function createStyled(input = {}) {
         // For more details: https://github.com/mui/material-ui/pull/37908
         overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$C);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$B);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -9106,7 +9084,7 @@ function createMixins(breakpoints, mixins) {
   }, mixins);
 }
 
-const _excluded$B = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$A = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -9275,7 +9253,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$B);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$A);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -9399,7 +9377,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$A = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$z = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -9430,7 +9408,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -9497,7 +9475,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$z = ["duration", "easing", "delay"];
+const _excluded$y = ["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 = {
@@ -9548,7 +9526,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$z);
+      other = _objectWithoutPropertiesLoose(options, _excluded$y);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -9595,7 +9573,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$y = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$x = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -9603,7 +9581,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$y);
+    other = _objectWithoutPropertiesLoose(options, _excluded$x);
   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));
@@ -9874,7 +9852,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$x = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$w = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -9890,7 +9868,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$x);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$w);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -10528,8 +10506,8 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-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 _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 {
     open,
     exited
@@ -10598,7 +10576,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const [exited, setExited] = React.useState(!open);
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
@@ -10670,7 +10648,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
     hideBackdrop,
     keepMounted
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   const handleEnter = () => {
     setExited(false);
     if (onTransitionEnter) {
@@ -10894,7 +10872,7 @@ process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes /* remove-propty
 } : void 0;
 var ModalUnstyled$1 = ModalUnstyled;
 
-const _excluded$v = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$u = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -10936,7 +10914,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -11152,8 +11130,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$u = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$o = ownerState => {
+const _excluded$t = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$n = ownerState => {
   const {
     color,
     fontSize,
@@ -11218,7 +11196,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -11231,7 +11209,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
@@ -12347,8 +12325,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$t = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$n = ownerState => {
+const _excluded$s = ["className", "component", "elevation", "square", "variant"];
+const useUtilityClasses$m = ownerState => {
   const {
     square,
     elevation,
@@ -12402,14 +12380,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const ownerState = _extends({}, props, {
     component,
     elevation,
     square,
     variant
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
@@ -12560,7 +12538,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$s = ["center", "classes", "className"];
+const _excluded$r = ["center", "classes", "className"];
 let _$1 = t => t,
   _t,
   _t2,
@@ -12689,7 +12667,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -12890,8 +12868,8 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-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 _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 {
     disabled,
     focusVisible,
@@ -12992,7 +12970,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -13159,7 +13137,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -13355,8 +13333,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$q = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$l = ownerState => {
+const _excluded$p = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const useUtilityClasses$k = ownerState => {
   const {
     align,
     gutterBottom,
@@ -13439,7 +13417,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const ownerState = _extends({}, props, {
     align,
     color,
@@ -13452,7 +13430,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
@@ -13620,7 +13598,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$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 _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 rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -13633,7 +13611,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$k = ownerState => {
+const useUtilityClasses$j = ownerState => {
   const {
     classes,
     color,
@@ -13851,7 +13829,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -14025,7 +14003,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -14329,7 +14307,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$n = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles$1 = {
   entering: {
     opacity: 1
@@ -14366,7 +14344,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$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14527,8 +14505,8 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$n = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$j = ownerState => {
+const _excluded$m = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     invisible
@@ -14582,12 +14560,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$m);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/jsx(TransitionComponent, _extends({
     in: open,
@@ -14736,8 +14714,8 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-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 _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 {
     classes,
     checked,
@@ -14800,7 +14778,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$l);
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -14849,7 +14827,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, _extends({
     component: "span",
     className: clsx(classes.root, className),
@@ -14992,7 +14970,7 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
 } : void 0;
 var SwitchBase$1 = SwitchBase;
 
-const _excluded$l = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded$k = ["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',
@@ -15067,7 +15045,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     closeAfterTransition,
@@ -15285,8 +15263,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$k = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$h = ownerState => {
+const _excluded$j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$g = ownerState => {
   const {
     classes,
     disableUnderline
@@ -15469,14 +15447,14 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const ownerState = _extends({}, props, {
     fullWidth,
     inputComponent,
     multiline,
     type
   });
-  const classes = useUtilityClasses$h(props);
+  const classes = useUtilityClasses$g(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -15704,8 +15682,8 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$j = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$g = ownerState => {
+const _excluded$i = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$f = ownerState => {
   const {
     classes,
     margin,
@@ -15790,7 +15768,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -15803,7 +15781,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     size,
     variant
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$f(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.
@@ -15985,9 +15963,9 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 var formHelperTextClasses$1 = formHelperTextClasses;
 
-var _span$3;
-const _excluded$i = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$f = ownerState => {
+var _span$2;
+const _excluded$h = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$e = ownerState => {
   const {
     classes,
     contained,
@@ -16045,7 +16023,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -16063,7 +16041,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   return /*#__PURE__*/jsx(FormHelperTextRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -16071,7 +16049,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$3 || (_span$3 = /*#__PURE__*/jsx("span", {
+    _span$2 || (_span$2 = /*#__PURE__*/jsx("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
@@ -16143,8 +16121,8 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$h = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$e = ownerState => {
+const _excluded$g = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$d = ownerState => {
   const {
     classes,
     color,
@@ -16208,7 +16186,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -16224,7 +16202,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /*#__PURE__*/jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -16320,7 +16298,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$g = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
+const _excluded$f = ["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'}`;
@@ -16629,7 +16607,7 @@ function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-const useUtilityClasses$d = ownerState => {
+const useUtilityClasses$c = ownerState => {
   const {
     classes,
     container,
@@ -16680,7 +16658,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       wrap = 'wrap',
       zeroMinWidth = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columnsContext = React.useContext(GridContext$1);
@@ -16708,7 +16686,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   }, breakpointsValues, {
     breakpoints: breakpoints.keys
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   return /*#__PURE__*/jsx(GridContext$1.Provider, {
     value: columns,
     children: /*#__PURE__*/jsx(GridRoot, _extends({
@@ -16863,7 +16841,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var Grid$1 = Grid;
 
-const _excluded$f = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$e = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -16907,7 +16885,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$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -17111,8 +17089,8 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$e = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$c = ownerState => {
+const _excluded$d = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const useUtilityClasses$b = ownerState => {
   const {
     classes,
     disableUnderline
@@ -17224,8 +17202,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$e);
-  const classes = useUtilityClasses$c(props);
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const classes = useUtilityClasses$b(props);
   const ownerState = {
     disableUnderline
   };
@@ -17441,169 +17419,6 @@ 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);
 }
@@ -53172,7 +52987,8 @@ const SelectField = ({
 
 const IntersectionSelect = ({
   intersections,
-  onChangeIntersection
+  onChangeIntersection,
+  isDisabled: _isDisabled = false
 }) => {
   const [activeIntersection, setActiveIntersection] = React__default.useState(0);
   return /*#__PURE__*/React__default.createElement(Grid$1, {
@@ -53191,8 +53007,13 @@ const IntersectionSelect = ({
     onChange: event => {
       const featureIndex = parseInt(event.target.value, 10);
       setActiveIntersection(featureIndex);
-      onChangeIntersection(intersections[featureIndex].geojson);
-    }
+      const {
+        geojson,
+        title
+      } = intersections[featureIndex];
+      onChangeIntersection(geojson, title);
+    },
+    disabled: _isDisabled
   }, intersections.map((listItem, index) => {
     return /*#__PURE__*/React__default.createElement(MenuItem$1, {
       key: listItem.title,
@@ -55647,7 +55468,12 @@ class ReactMapView extends React.Component {
         onMapPinChangeLocation({
           mapPinLocation: {
             lat: mapPinLatLonCoordinate.lat,
-            lon: mapPinLatLonCoordinate.lon
+            lon: mapPinLatLonCoordinate.lon,
+            projectionX: mapPinLatLonCoordinate.projectionX,
+            projectionY: mapPinLatLonCoordinate.projectionY,
+            screenOffsetX: mapPinLatLonCoordinate.screenOffsetX,
+            screenOffsetY: mapPinLatLonCoordinate.screenOffsetY,
+            srs: mapPinLatLonCoordinate.srs
           },
           mapId
         });
@@ -56859,6 +56685,224 @@ const MapTime = ({
   }, mapTime)));
 };
 
+/* *
+ * 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 MS_IN_HOUR = 3600 * 1000;
+// The following is necessary to allow to assign to the CanvasRenderingContext2D ctx property
+/* eslint-disable no-param-reassign */
+/**
+ * This component registers to a webmap instance and draws axis for height and time in the map using the Map Canvas.
+ */
+const ProfileAxis = ({
+  mapId
+}) => {
+  const drawAxisOnMapDisplay = (ctx, webMap, axisStyle) => {
+    const bbox = webMap.getBBOX();
+    const width = webMap.getWidth();
+    const height = webMap.getHeight();
+    const offY = height - 50;
+    const offX = 20;
+    try {
+      const startDate = new Date(bbox.left);
+      const endDate = new Date(bbox.right);
+      webMap.setMessage(`${startDate.toDateString()}, ${startDate.getUTCHours()} to ${endDate.getUTCHours()} hours UTC`);
+    } catch (e) {
+      webMap.setMessage('');
+    }
+    // Draw the horizontal time axis
+    drawTimeAxis(ctx, bbox, offX, offY, width, height, axisStyle);
+    // Draw the vertical elevation axis
+    drawHeightAxis(ctx, bbox, offX, offY, width, height, axisStyle);
+    // Draw the mouse cursor
+    drawCursor(ctx, bbox, offX, offY, width, height, webMap, axisStyle);
+    // Draw the layer name
+    drawLayerName(ctx, bbox, offX, offY, width, height, webMap, axisStyle);
+  };
+  React__default.useEffect(() => {
+    const axisStyle = {
+      backgroundColor: 'white',
+      color: 'black',
+      fontStyleSmall: '10px Roboto, Helvetica, Arial',
+      fontStyleBig: '14px Roboto, Helvetica, Arial'
+    };
+    // Draw on map canvas callback function
+    const beforeCanvasDisplay = ctx => {
+      drawAxisOnMapDisplay(ctx, getWMJSMapById(mapId), axisStyle);
+    };
+    // unMount logic
+    const unMount = () => {
+      const webMap = getWMJSMapById(mapId);
+      if (webMap) {
+        webMap.removeListener('beforecanvasdisplay', beforeCanvasDisplay);
+      }
+    };
+    // Mount logic
+    const webMap = getWMJSMapById(mapId);
+    if (webMap && webMap.getProjection().srs === 'GFI:TIME_ELEVATION') {
+      webMap.hideScaleBar();
+      webMap.hideMouseCursorProperties();
+      webMap.setTimeOffset('');
+      webMap.addListener('beforecanvasdisplay', beforeCanvasDisplay, true);
+      webMap.draw();
+    }
+    return unMount;
+  }, [mapId]);
+  return null;
+};
+/**
+ * Calculates a time spacing. This is used to place labels on the X axis (time axis).
+ * To make readable time labels, the time spacing is discretized to rounded times,
+ * The time spacing changes according to zoom level.
+ * @param bbox
+ * @param width
+ * @returns
+ */
+const getTimeSpacingInMs = (bbox, width) => {
+  const hoursInView = Math.abs(bbox.right - bbox.left) / (MS_IN_HOUR * width / 500);
+  return Math.pow(2, Math.round((Math.log10(hoursInView / 10) + 0.5) / Math.log10(2)) - 1) * MS_IN_HOUR;
+};
+const drawTimeAxis = (ctx, bbox, offsetX, offsetY, width, height, axisStyle) => {
+  const {
+    backgroundColor,
+    color,
+    fontStyleSmall,
+    fontStyleBig
+  } = axisStyle;
+  // Draw rectangle with backgroundColor for axis
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, offsetY, width, 50);
+  ctx.font = fontStyleSmall;
+  ctx.textAlign = 'left';
+  ctx.fillStyle = color;
+  ctx.strokeStyle = color;
+  const ticksMs = getTimeSpacingInMs(bbox, width);
+  const roundedTimeLeftMs = Math.round(bbox.left / ticksMs) * ticksMs;
+  const roundedTimeRightMs = Math.round(bbox.right / ticksMs) * ticksMs;
+  const numHoursInView = Math.min((roundedTimeRightMs - roundedTimeLeftMs) / ticksMs + 1, 100);
+  for (let hoursToPlot = 0; hoursToPlot < numHoursInView; hoursToPlot += 1) {
+    const timeMs = roundedTimeLeftMs + hoursToPlot * ticksMs;
+    const posX = Math.round((timeMs - bbox.left) / (bbox.right - bbox.left) * width) + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(posX, offsetY + 0);
+    ctx.lineTo(posX, offsetY + 10);
+    const date = new Date(timeMs);
+    const hourString = `0${date.getUTCHours()}`.slice(-2);
+    const minuteString = `:${`0${date.getUTCMinutes()}`.slice(-2)}`;
+    const txt = `${hourString}${minuteString}`;
+    ctx.stroke();
+    ctx.fillText(`${txt}`, posX - 13, offsetY + 16);
+  }
+  // Draw units in map
+  ctx.font = fontStyleBig;
+  ctx.fillText('time UTC (h)', width / 2 - 10, offsetY + 38);
+};
+/**
+ * Calculates a spacing for the height axis. This is used to place labels on the Y axis (height axis).
+ * To make readable height labels, the height spacing is discretized to rounded elevations,
+ * The spacing changes according to zoom level.
+ * @param bbox
+ * @param height
+ * @returns
+ */
+const getHeightSpacingInMs = (bbox, height) => {
+  const numMeterInView = Math.abs(bbox.bottom - bbox.top) / height;
+  return Math.pow(10, Math.round(Math.log10(numMeterInView * 100) + 0.5) - 1);
+};
+const drawHeightAxis = (ctx, bbox, offsetX, offsetY, width, height, axisStyle) => {
+  const {
+    backgroundColor,
+    color,
+    fontStyleSmall,
+    fontStyleBig
+  } = axisStyle;
+  // Draw rectangle in backgroundColor for axis
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, 0, 60 + offsetX, height);
+  ctx.font = fontStyleSmall;
+  ctx.textAlign = 'right';
+  ctx.fillStyle = color;
+  const ticksM = getHeightSpacingInMs(bbox, height);
+  const roundedElevBottomMeter = Math.round(bbox.bottom / ticksM) * ticksM;
+  const roundedElevTopMeter = Math.round(bbox.top / ticksM) * ticksM;
+  const numKmInView = Math.min((roundedElevTopMeter - roundedElevBottomMeter) / ticksM + 1, 100);
+  for (let kmToPlot = 0; kmToPlot < numKmInView; kmToPlot += 1) {
+    const valueInKm = roundedElevBottomMeter + kmToPlot * ticksM;
+    const posY = Math.round((bbox.top - valueInKm) / (bbox.top - bbox.bottom) * height) + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(offsetX + 50, posY);
+    ctx.lineTo(offsetX + 60, posY);
+    ctx.stroke();
+    const txt = valueInKm;
+    ctx.fillText(`${txt}`, offsetX + 48, posY + 2);
+  }
+  // Draw height unit in axis
+  ctx.font = axisStyle.fontStyleBig;
+  ctx.save();
+  ctx.translate(5, height / 2 - 50);
+  ctx.rotate(-Math.PI / 2);
+  ctx.font = fontStyleBig;
+  ctx.fillText('height (m)', 5, 5);
+  ctx.restore();
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, height - 60, offsetX + 60, 60);
+  // Draw line border for map
+  ctx.moveTo(offsetX + 60, offsetY + 0.5);
+  ctx.lineTo(width, offsetY + 0.5);
+  ctx.moveTo(offsetX + 60.5, 0);
+  ctx.lineTo(offsetX + 60.5, height - 50);
+  ctx.stroke();
+};
+const drawCursor = (ctx, bbox, offsetX, offsetY, width, height, webMapJS, axisStyle) => {
+  // Do not draw if mouse is not in the map
+  if (webMapJS.mouseX < 5 && webMapJS.mouseY < 5) {
+    return;
+  }
+  /* Draw cursor line */
+  const mouseX = Math.round(webMapJS.mouseX) + 0.5;
+  const mouseY = Math.round(webMapJS.mouseY) + 0.5;
+  ctx.strokeStyle = '#303030';
+  ctx.setLineDash([15, 5]);
+  ctx.beginPath();
+  ctx.moveTo(0, mouseY);
+  ctx.lineTo(width, mouseY);
+  ctx.moveTo(mouseX, 0);
+  ctx.lineTo(mouseX, height);
+  ctx.stroke();
+  ctx.strokeStyle = axisStyle.color;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([]);
+};
+const drawLayerName = (ctx, bbox, offsetX, offsetY, width, height, webMapJS, axisStyle) => {
+  // Draw layername
+  const layers = webMapJS.getLayers();
+  if (layers.length > 0) {
+    ctx.textBaseline = 'middle';
+    ctx.fillStyle = axisStyle.backgroundColor;
+    ctx.font = axisStyle.fontStyleBig;
+    ctx.textAlign = 'left';
+    ctx.fillStyle = axisStyle.color;
+    ctx.strokeStyle = axisStyle.color;
+    ctx.fillText(`Layer: ${layers[0].name}`, 10, offsetY + 38);
+  }
+};
+// Re-enable the previousely disabled eslint rule
+/* eslint-enable no-param-reassign */
+
 const MapView = _a => {
   var {
       children,
@@ -56912,7 +56956,9 @@ const MapView = _a => {
       top: 0,
       position: 'absolute'
     }
-  }, /*#__PURE__*/React.createElement(ZoomControls, {
+  }, /*#__PURE__*/React.createElement(ProfileAxis, {
+    mapId: mapId
+  }), /*#__PURE__*/React.createElement(ZoomControls, {
     onZoomIn: () => {
       const wmjsMap = webmapUtils.getWMJSMapById(mapId);
       wmjsMap.zoomIn(undefined);
@@ -57002,53 +57048,6 @@ 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.
@@ -57610,4 +57609,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-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 };
+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, 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, firButtonDrawId, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, 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 };