@m4l/components 1.1.2 → 2.0.1

package/components/hook-form/RHFAutocompleteAsync/types.d.ts

@@ -1,9 +1,12 @@
-import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
-export declare type RHFAutocompleteAsyncProps<T> = {
+import { ImageProps, RHFAutocompleteBaseProps, RHFAutocompleteTypeTextProps } from '../RHFAutocomplete/types';
+export interface RHFAutocompleteAsyncBaseProps {
     endPoint: string;
     timeout?: number;
     parms?: Record<string, any>;
     resultField?: string;
     isRemote?: boolean;
     onChangeFilterParms?: (newValue: string) => Record<string, any>;
-} & Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput'>;
+}
+export declare type RHFAutocompleteAsyncProps<T> = (Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & ImageProps<T> & RHFAutocompleteAsyncBaseProps) | (Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & RHFAutocompleteTypeTextProps & RHFAutocompleteAsyncBaseProps);
+export declare type ComponentImageProps<T> = RHFAutocompleteAsyncBaseProps & Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & ImageProps<T>;
+export declare type ComponentTextProps<T> = RHFAutocompleteAsyncBaseProps & Omit<RHFAutocompleteBaseProps<T>, 'options' | 'onChangeSearchInput'> & RHFAutocompleteTypeTextProps;

package/components/hook-form/RHFCheckbox/{index.c3b7ce0f.js → index.140d872f.js}

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
-import { aj as RHFCheckboxRoot, ak as ContainerCheckTypography } from "../../../styles/index.239f949e.js";
+import { aj as RHFCheckboxRoot, ak as ContainerCheckTypography } from "../../../styles/index.59da2f54.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useModuleSkeleton } from "@m4l/core";
 import { useFormFocus } from "../../../index.js";
-import { C as CheckBox } from "../../mui_extended/CheckBox.a8958eb8.js";
+import { C as CheckBox } from "../../mui_extended/CheckBox.9d43398b.js";
 generateUtilityClasses("M4LRHFCheckbox", [
   "root",
   "checkTypography",

package/components/hook-form/RHFColorPicker/{index.c259b8ac.js → index.3eb719ac.js}

@@ -3,17 +3,17 @@ import { useState } from "react";
 import { useFormContext, useWatch, Controller } from "react-hook-form";
 import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
 import { SketchPicker } from "react-color";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { al as RHFColorPickerRoot } from "../../../styles/index.239f949e.js";
+import { al as RHFColorPickerRoot } from "../../../styles/index.59da2f54.js";
 import { useTheme } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.59b9b63a.js";
-import { P as Popover } from "../../mui_extended/Popover/index.5e78a637.js";
-import { I as Icon } from "../../Icon/index.13aaae3c.js";
-import { B as Button } from "../../mui_extended/Button/index.111f830e.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2aaaac6f.js";
+import { P as Popover } from "../../mui_extended/Popover/index.58f8522b.js";
+import { I as Icon } from "../../Icon/index.89dba21c.js";
+import { B as Button } from "../../mui_extended/Button/index.9c6c173c.js";
 const componentName = "M4LRHFColorPicker";
 const colorPickerClasses = generateUtilityClasses(componentName, [
   "root",

package/components/hook-form/RHFDateTime/{index.4efe48ce.js → index.54f97b37.js}

@@ -7,12 +7,12 @@ import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { useState, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
-import { am as RHFDateTimeRoot } from "../../../styles/index.239f949e.js";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { am as RHFDateTimeRoot } from "../../../styles/index.59da2f54.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.59b9b63a.js";
-import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2aaaac6f.js";
+import { I as Icon } from "../../Icon/index.89dba21c.js";
 const SkeletonRHFDateTime = (props) => {
   const { skeletonWidth, skeletonHeight, className, label } = props;
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/components/hook-form/RHFPeriod/{index.0f912e3e.js → index.c8238ea4.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { an as RHFPeriodRoot } from "../../../styles/index.239f949e.js";
+import { an as RHFPeriodRoot } from "../../../styles/index.59da2f54.js";
 import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.59b9b63a.js";
-import { P as Period } from "../../Period/index.13e4c351.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2aaaac6f.js";
+import { P as Period } from "../../Period/index.76c4e428.js";
 const componentName = "M4LRHFPeriod";
 generateUtilityClasses(componentName, [
   "root",

package/components/hook-form/RHFRadioGroup/{index.96c94958.js → index.78ec0e22.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
 import { RadioGroup, FormControlLabel, FormHelperText, Radio } from "@mui/material";
-import { I as Icon } from "../../Icon/index.13aaae3c.js";
+import { I as Icon } from "../../Icon/index.89dba21c.js";
 function OptionIconLabelFormatter(option, getOptionLabel, getOptionIconUrl) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(

package/components/hook-form/RHFTextField/{index.828b30f5.js → index.984a4dba.js}

@@ -2,16 +2,16 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
 import { forwardRef, useState, useEffect } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.9425bdc5.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.42efd85d.js";
 import { useFormContext, Controller } from "react-hook-form";
-import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index.239f949e.js";
+import { ao as SkeletonTextFieldRoot, ap as WrapperSkeletonRHFTextField, aq as RHFTextFieldRoot, ar as RHFTextFieldPasswordRoot } from "../../../styles/index.59da2f54.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../utils/index.78d1638f.js";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.14912462.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.59b9b63a.js";
+import { F as FieldLabel } from "../../FieldLabel/index.2aaaac6f.js";
 const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
 const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
 const RHFTEXTFIELD_PREFIX = "RHFTextField";

package/components/hook-form/RHFUpload/{index.b664c68b.js → index.0516dc8f.js}

@@ -3,15 +3,15 @@ import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import isString from "lodash/isString";
 import { useDropzone } from "react-dropzone";
-import { I as Image } from "../../Image/index.4b51d4ba.js";
+import { I as Image } from "../../Image/index.94949e55.js";
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { as as UploadImageRoot, at as WrapperRHFUploadImage } from "../../../styles/index.239f949e.js";
+import { as as UploadImageRoot, at as WrapperRHFUploadImage } from "../../../styles/index.59da2f54.js";
 import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
 import { unstable_composeClasses } from "@mui/base";
-import { T as Typography } from "../../mui_extended/Typography/index.45e97bdd.js";
-import { B as Button } from "../../mui_extended/Button/index.111f830e.js";
-import { H as HelperText } from "../../HelperText/index.5c72277a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.24a872e2.js";
+import { B as Button } from "../../mui_extended/Button/index.9c6c173c.js";
+import { H as HelperText } from "../../HelperText/index.25891eda.js";
 const ICON_PREFIX = "M4LRHFUploadImage";
 const getNameRHFUploadImageDataTestId = (KEY) => {
   return `${ICON_PREFIX}-${KEY}`;

package/components/maps/components/GpsTools/{index.e759163d.js → index.779e5b17.js}

@@ -5,42 +5,42 @@ import { shallow } from "zustand/shallow";
 import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
 import "@geoman-io/leaflet-geoman-free";
 import clsx from "clsx";
-import { au as RHFormProviderStyled, av as StackGeofenceListRoot, aw as DivTabGpsToolsRoot } from "../../../../styles/index.239f949e.js";
-import { D as DynamicFilter } from "../../../DynamicFilter/index.08abfc2c.js";
-import { C as ColumnIconFormatter } from "../../../DataGrid/formatters/index.6698b419.js";
+import { au as RHFormProviderStyled, av as StackGeofenceListRoot, aw as DivTabGpsToolsRoot } from "../../../../styles/index.59da2f54.js";
+import { D as DynamicFilter } from "../../../DynamicFilter/index.a978aea9.js";
+import { C as ColumnIconFormatter } from "../../../DataGrid/formatters/index.90ed715b.js";
 import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index.e00d0cf2.js";
 import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useFormContext, useWatch, useFormState } from "react-hook-form";
-import { H as HelperError } from "../../../hook-form/HelperError/index.9f93c627.js";
-import { u as useModal } from "../../../../hooks/useModal/index.3ad1e014.js";
+import { H as HelperError } from "../../../hook-form/HelperError/index.296a4c82.js";
+import { u as useModal } from "../../../../hooks/useModal/index.a2a50f01.js";
 import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.776c62e7.js";
 import { createStore, useStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { enableMapSet } from "immer";
-import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.415de2bb.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.60955735.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.2342a37e.js";
-import { B as Button } from "../../../mui_extended/Button/index.111f830e.js";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.0e78a223.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.38a79eee.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.c7fab394.js";
+import { B as Button } from "../../../mui_extended/Button/index.9c6c173c.js";
 import { useMap } from "react-leaflet";
 import * as L from "leaflet";
 import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
-import { u as useTab } from "../../../../hooks/useTab/index.4081b113.js";
+import { u as useTab } from "../../../../hooks/useTab/index.c0a8f413.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import { P as PaperForm } from "../../../PaperForm/index.8289409f.js";
-import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.b8347185.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.828b30f5.js";
-import { S as Stack } from "../../../mui_extended/Stack/index.3674daf7.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.9425bdc5.js";
-import { P as PropertyValue } from "../../../PropertyValue/index.36555931.js";
-import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.c259b8ac.js";
-import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.a94a92c1.js";
-import { I as Icon } from "../../../Icon/index.13aaae3c.js";
+import { P as PaperForm } from "../../../PaperForm/index.dbcbd677.js";
+import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.b1c29dd0.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.984a4dba.js";
+import { S as Stack } from "../../../mui_extended/Stack/index.b0690398.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.42efd85d.js";
+import { P as PropertyValue } from "../../../PropertyValue/index.9dd592cd.js";
+import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.3eb719ac.js";
+import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.8a0bd49c.js";
+import { I as Icon } from "../../../Icon/index.89dba21c.js";
 import * as Yup from "yup";
-import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.b6a3cf63.js";
-import { u as useMapStore, C as CommonFeatureRender, G as GPS_TOOLS_POPUP_ID } from "../Map/index.c568e68d.js";
-import { D as DataGrid } from "../../../DataGrid/index.b1cac6af.js";
+import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.aa9cc210.js";
+import { u as useMapStore, C as CommonFeatureRender, G as GPS_TOOLS_POPUP_ID } from "../Map/index.14ce256b.js";
+import { D as DataGrid } from "../../../DataGrid/index.58b8d903.js";
 const COMPONENT_CLASS_NAME = "M4LMapGpsTools";
 const COMPONENT_MAP_TOOLS_ID = "gps_tools";
 const STYLE_OPACITIES = [
@@ -715,14 +715,13 @@ function GeneralData() {
         /* @__PURE__ */ jsx(
           RHFAutocomplete,
           {
+            type: "image",
             name: "geofenceType",
             autoComplete: "off",
             options: geofencesTypes,
             getOptionLabel: (option) => option.name,
             isOptionEqualToValue: (option, value) => option.id === value.id,
             getOptionUrlImage: (option) => option.url,
-            imageHeight: "12px",
-            imageWidth: "12px",
             label: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_GEOMETRY_TYPE)
           }
         ),
@@ -866,6 +865,7 @@ function FillData() {
         value: /* @__PURE__ */ jsx(
           RHFAutocomplete,
           {
+            type: "text",
             name: "properties.fillOpacity",
             autoComplete: "off",
             options: STYLE_OPACITIES,
@@ -902,6 +902,7 @@ function StrokeData() {
         value: /* @__PURE__ */ jsx(
           RHFAutocomplete,
           {
+            type: "text",
             name: "properties.strokeOpacity",
             autoComplete: "off",
             options: STYLE_OPACITIES,
@@ -921,6 +922,7 @@ function StrokeData() {
         value: /* @__PURE__ */ jsx(
           RHFAutocomplete,
           {
+            type: "text",
             name: "properties.strokeWeight",
             autoComplete: "off",
             options: STYLE_WHEIGHTS,
@@ -940,6 +942,7 @@ function StrokeData() {
         value: /* @__PURE__ */ jsx(
           RHFAutocomplete,
           {
+            type: "text",
             name: "properties.strokeDashArray",
             autoComplete: "off",
             options: STYLE_PATTERNS,

package/components/maps/components/Map/external/googleMutant/index.d.ts

@@ -1,159 +1,159 @@
-import 'leaflet';
-
-declare module 'leaflet' {
-  namespace gridLayer {
-    interface GoogleMutant extends GridLayer {
-      setElementSize(e: HTMLElement, size: Point): void;
-
-      /**
-       * Add additional Google Maps layer.
-       *
-       * https://developers.google.com/maps/documentation/javascript/trafficlayer
-       *
-       * @param googleLayerName such as BicyclingLayer, TrafficLayer, or TransitLayer.
-       * @param options? constructor arguments to pass through to the google layer.
-       * @returns Promise for the native Google Maps Layer instance.
-       */
-      addGoogleLayer(googleLayerName: string, options?: object): Promise<object>;
-
-      /**
-       * Removes Google Maps layer.
-       *
-       *  https://developers.google.com/maps/documentation/javascript/trafficlayer
-       *
-       * @param googleLayerName such as BicyclingLayer, TrafficLayer, or TransitLayer.
-       */
-      removeGoogleLayer(googleLayerName: string): void;
-    }
-
-    type GoogleMutantType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
-
-    interface GoogleMutantStyler {
-      hue?: string | undefined;
-      lightness?: number | undefined;
-      saturation?: number | undefined;
-      gamma?: number | undefined;
-      invert_lightness?: boolean | undefined;
-      visibility?: string | undefined;
-      color?: string | undefined;
-      weight?: number | undefined;
-    }
-
-    /**
-     * Google's map style.
-     *
-     * https://developers.google.com/maps/documentation/javascript/style-reference
-     */
-    interface GoogleMutantStyle {
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#style-features
-       */
-      featureType?: string | undefined;
-
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#style-elements
-       */
-      elementType?: string | undefined;
-
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#stylers
-       */
-      stylers?: GoogleMutantStyler[] | undefined;
-    }
-
-    interface GoogleMutantOptions extends TileLayerOptions {
-      minZoom?: number | undefined;
-      maxZoom?: number | undefined;
-      maxNativeZoom?: number | undefined;
-      tileSize?: number | Point | undefined;
-      subdomains?: string | string[] | undefined;
-      errorTileUrl?: string | undefined;
-
-      /**
-       * The mutant container will add its own attribution anyways.
-       */
-      attribution?: string | undefined;
-
-      opacity?: number | undefined;
-      continuousWorld?: boolean | undefined;
-      noWrap?: boolean | undefined;
-
-      /**
-       * Google's map type. 'hybrid' is not really supported.
-       */
-      type?: GoogleMutantType | undefined;
-
-      /**
-       * Google's map styles.
-       */
-      styles?: GoogleMutantStyle[] | undefined;
-    }
-
-    function googleMutant(options?: GoogleMutantOptions): GoogleMutant;
-
-    // Remove the duplicate declaration of GoogleMutantType
-
-    interface GoogleMutantStyler {
-      hue?: string | undefined;
-      lightness?: number | undefined;
-      saturation?: number | undefined;
-      gamma?: number | undefined;
-      invert_lightness?: boolean | undefined;
-      visibility?: string | undefined;
-      color?: string | undefined;
-      weight?: number | undefined;
-    }
-
-    /**
-     * Google's map style.
-     *
-     * https://developers.google.com/maps/documentation/javascript/style-reference
-     */
-    interface GoogleMutantStyle {
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#style-features
-       */
-      featureType?: string | undefined;
-
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#style-elements
-       */
-      elementType?: string | undefined;
-
-      /**
-       * https://developers.google.com/maps/documentation/javascript/style-reference#stylers
-       */
-      stylers?: GoogleMutantStyler[] | undefined;
-    }
-
-    interface GoogleMutantOptions extends TileLayerOptions {
-      minZoom?: number | undefined;
-      maxZoom?: number | undefined;
-      maxNativeZoom?: number | undefined;
-      tileSize?: number | Point | undefined;
-      subdomains?: string | string[] | undefined;
-      errorTileUrl?: string | undefined;
-
-      /**
-       * The mutant container will add its own attribution anyways.
-       */
-      attribution?: string | undefined;
-
-      opacity?: number | undefined;
-      continuousWorld?: boolean | undefined;
-      noWrap?: boolean | undefined;
-
-      /**
-       * Google's map type. 'hybrid' is not really supported.
-       */
-      type?: GoogleMutantType | undefined;
-
-      /**
-       * Google's map styles.
-       */
-      styles?: GoogleMutantStyle[] | undefined;
-    }
-
-    function googleMutant(options?: GoogleMutantOptions): GoogleMutant;
-  }
-}
+import 'leaflet';
+
+declare module 'leaflet' {
+  namespace gridLayer {
+    interface GoogleMutant extends GridLayer {
+      setElementSize(e: HTMLElement, size: Point): void;
+
+      /**
+       * Add additional Google Maps layer.
+       *
+       * https://developers.google.com/maps/documentation/javascript/trafficlayer
+       *
+       * @param googleLayerName such as BicyclingLayer, TrafficLayer, or TransitLayer.
+       * @param options? constructor arguments to pass through to the google layer.
+       * @returns Promise for the native Google Maps Layer instance.
+       */
+      addGoogleLayer(googleLayerName: string, options?: object): Promise<object>;
+
+      /**
+       * Removes Google Maps layer.
+       *
+       *  https://developers.google.com/maps/documentation/javascript/trafficlayer
+       *
+       * @param googleLayerName such as BicyclingLayer, TrafficLayer, or TransitLayer.
+       */
+      removeGoogleLayer(googleLayerName: string): void;
+    }
+
+    type GoogleMutantType = 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
+
+    interface GoogleMutantStyler {
+      hue?: string | undefined;
+      lightness?: number | undefined;
+      saturation?: number | undefined;
+      gamma?: number | undefined;
+      invert_lightness?: boolean | undefined;
+      visibility?: string | undefined;
+      color?: string | undefined;
+      weight?: number | undefined;
+    }
+
+    /**
+     * Google's map style.
+     *
+     * https://developers.google.com/maps/documentation/javascript/style-reference
+     */
+    interface GoogleMutantStyle {
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#style-features
+       */
+      featureType?: string | undefined;
+
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#style-elements
+       */
+      elementType?: string | undefined;
+
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#stylers
+       */
+      stylers?: GoogleMutantStyler[] | undefined;
+    }
+
+    interface GoogleMutantOptions extends TileLayerOptions {
+      minZoom?: number | undefined;
+      maxZoom?: number | undefined;
+      maxNativeZoom?: number | undefined;
+      tileSize?: number | Point | undefined;
+      subdomains?: string | string[] | undefined;
+      errorTileUrl?: string | undefined;
+
+      /**
+       * The mutant container will add its own attribution anyways.
+       */
+      attribution?: string | undefined;
+
+      opacity?: number | undefined;
+      continuousWorld?: boolean | undefined;
+      noWrap?: boolean | undefined;
+
+      /**
+       * Google's map type. 'hybrid' is not really supported.
+       */
+      type?: GoogleMutantType | undefined;
+
+      /**
+       * Google's map styles.
+       */
+      styles?: GoogleMutantStyle[] | undefined;
+    }
+
+    function googleMutant(options?: GoogleMutantOptions): GoogleMutant;
+
+    // Remove the duplicate declaration of GoogleMutantType
+
+    interface GoogleMutantStyler {
+      hue?: string | undefined;
+      lightness?: number | undefined;
+      saturation?: number | undefined;
+      gamma?: number | undefined;
+      invert_lightness?: boolean | undefined;
+      visibility?: string | undefined;
+      color?: string | undefined;
+      weight?: number | undefined;
+    }
+
+    /**
+     * Google's map style.
+     *
+     * https://developers.google.com/maps/documentation/javascript/style-reference
+     */
+    interface GoogleMutantStyle {
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#style-features
+       */
+      featureType?: string | undefined;
+
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#style-elements
+       */
+      elementType?: string | undefined;
+
+      /**
+       * https://developers.google.com/maps/documentation/javascript/style-reference#stylers
+       */
+      stylers?: GoogleMutantStyler[] | undefined;
+    }
+
+    interface GoogleMutantOptions extends TileLayerOptions {
+      minZoom?: number | undefined;
+      maxZoom?: number | undefined;
+      maxNativeZoom?: number | undefined;
+      tileSize?: number | Point | undefined;
+      subdomains?: string | string[] | undefined;
+      errorTileUrl?: string | undefined;
+
+      /**
+       * The mutant container will add its own attribution anyways.
+       */
+      attribution?: string | undefined;
+
+      opacity?: number | undefined;
+      continuousWorld?: boolean | undefined;
+      noWrap?: boolean | undefined;
+
+      /**
+       * Google's map type. 'hybrid' is not really supported.
+       */
+      type?: GoogleMutantType | undefined;
+
+      /**
+       * Google's map styles.
+       */
+      styles?: GoogleMutantStyle[] | undefined;
+    }
+
+    function googleMutant(options?: GoogleMutantOptions): GoogleMutant;
+  }
+}