@m4l/components 3.0.0 → 3.0.1

package/components/maps/components/GpsTools/{index.c1198f79.js → index-BP1dIwh6.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.db9e7ddb.js";
-import { D as DynamicFilter } from "../../../DynamicFilter/index.b07b567a.js";
-import { C as ColumnIconFormatter } from "../../../DataGrid/formatters/index.06c18753.js";
-import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index.e00d0cf2.js";
+import { au as RHFormProviderStyled, av as StackGeofenceListRoot, aw as DivTabGpsToolsRoot } from "../../../../styles/index-Cc9p_h7i.js";
+import { D as DynamicFilter } from "../../../DynamicFilter/index-D2CmPq_i.js";
+import { C as ColumnIconFormatter } from "../../../DataGrid/formatters/index-B5SJg0Qq.js";
+import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index-CKg8CJ6A.js";
 import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useFormContext, useWatch, useFormState } from "react-hook-form";
-import { H as HelperError } from "../../../hook-form/HelperError/index.360f8fb7.js";
-import { u as useModal } from "../../../../hooks/useModal/index.eb857f6e.js";
-import { u as usePopupsStore } from "../../../popups/PopupsProvider/index.9a23e1d0.js";
+import { H as HelperError } from "../../../hook-form/HelperError/index-D-_czK9n.js";
+import { u as useModal } from "../../../../hooks/useModal/index-C9r1LQIz.js";
+import { u as usePopupsStore } from "../../../popups/PopupsProvider/index-DhSxmtfJ.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.f8867ae9.js";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.abf49573.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.f674be30.js";
-import { B as Button } from "../../../mui_extended/Button/index.3d14e3e9.js";
+import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index-BbVMcr05.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm-DraflAKP.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index-B_vOmNZT.js";
+import { B as Button } from "../../../mui_extended/Button/index-DlzpoczE.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.9ad15247.js";
+import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index-B3HygFCM.js";
+import { u as useTab } from "../../../../hooks/useTab/index-DTbLh_DH.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-import { P as PaperForm } from "../../../PaperForm/index.cdb1f846.js";
-import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.089af1b8.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.80b98b98.js";
-import { S as Stack } from "../../../mui_extended/Stack/index.99de8138.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
-import { P as PropertyValue } from "../../../PropertyValue/index.d81eae0a.js";
-import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.ed380b30.js";
-import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.5c6a6801.js";
-import { I as Icon } from "../../../Icon/index.c06685f4.js";
+import { P as PaperForm } from "../../../PaperForm/index-DciWfnML.js";
+import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index-BhbgwNUz.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index-Cz7BMTLe.js";
+import { S as Stack } from "../../../mui_extended/Stack/index-CV2W-_eL.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-BfDbi0cC.js";
+import { P as PropertyValue } from "../../../PropertyValue/index-hcXIE6qk.js";
+import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index-DBpi0Zhe.js";
+import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index-PyZxxeDt.js";
+import { I as Icon } from "../../../Icon/index-CedboS6y.js";
 import * as Yup from "yup";
-import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.8947ee59.js";
-import { u as useMapStore, C as CommonFeatureRender, G as GPS_TOOLS_POPUP_ID } from "../Map/index.8c947175.js";
-import { D as DataGrid } from "../../../DataGrid/index.b37d6cab.js";
+import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index-DvRNtaub.js";
+import { u as useMapStore, C as CommonFeatureRender, G as GPS_TOOLS_POPUP_ID } from "../Map/index-CS6xr1Fl.js";
+import { D as DataGrid } from "../../../DataGrid/index-7vJWvQtu.js";
 const COMPONENT_CLASS_NAME = "M4LMapGpsTools";
 const COMPONENT_MAP_TOOLS_ID = "gps_tools";
 const STYLE_OPACITIES = [
@@ -106,6 +106,7 @@ const STYLE_PATTERNS = [
   }
 ];
 const gpsToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  /* elements */
   "gpsToolsRoot",
   "gpsToolsTab",
   "gpsToolsTabContent",
@@ -115,17 +116,25 @@ const gpsToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "gpsToolsGeofencesAddEditDrawFinishContainer",
   "toolGeofencesAddEditGeneral",
   "toolGeofencesAddEditStyle",
+  /* states or variants of elements */
   "visible",
   "hidden"
 ]);
 const MAP_GPSTOOLS_DICCTIONARY = {
+  /**
+   * GPSTools
+   */
   LABEL_GPSTOOLS_NAME: "label_gpstools_name",
+  /** Common */
+  /** GeofenceList */
   ACTION_GEOFENCE_ADD: "action_geofence_add",
   ACTION_GEOFENCE_EDIT: "action_geofence_edit",
+  // Row Actions
   ROW_ACTION_GEO_EDIT: "row_action_geo_edit",
   ROW_ACTION_GEO_ENABLE: "row_action_geo_enable",
   ROW_ACTION_GEO_DISABLE: "row_action_geo_disable",
   ROW_ACTION_GEO_DELETE: "row_action_geo_delete",
+  /** GeofenceAddEdit */
   LABEL_TAB_GEO: "label_tab_geo",
   TAB_GENERAL_CONFIG_TOOLTIP: "tab_general_config_tooltip",
   PAPER_GENERAL: "paper_general",
@@ -177,6 +186,9 @@ const MAP_GPSTOOLS_DICCTIONARY = {
   ACTION_CANCEL: "action_cancel"
 };
 const MAP_GPSTOOLS_ICONS = {
+  /**
+   * GpsTools
+   */
   MAP_GPS_TOOLS_TOOL: "cmp_map_gpstools_tool.svg",
   GEOFENCES: "cmp_map_gpstools_geofences.svg",
   GEOFENCE_ID: "cmp_map_gpstools_geofence_id.svg",
@@ -276,6 +288,34 @@ function useColumns(_props) {
         type: "string",
         width: 220
       },
+      // {
+      //     key: 'checkedCrossingFeatures',
+      //     name: getLabel(DICCTIONARY.LABEL_VIEW_TRANSIT_FEATURES),
+      //     width: 32,
+      //     type: 'boolean',
+      //     // frozen: true,
+      //     // isDraggable: false,
+      //     formatter: ColumnSetCheckFormatter({
+      //         field: 'CrossingFeatures',
+      //         rowKeyGetter,
+      //         useHook,
+      //     }),
+      //     cellClass: 'rdg-cell-align-center',
+      // },
+      // {
+      //     key: 'checkedInternalFeatures',
+      //     name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
+      //     width: 32,
+      //     type: 'boolean',
+      //     // isDraggable: false,
+      //     // frozen: true,
+      //     formatter: ColumnSetCheckFormatter({
+      //         field: 'InternalFeatures',
+      //         rowKeyGetter,
+      //         useHook,
+      //     }),
+      //     cellClass: 'rdg-cell-align-center',
+      // },
       {
         key: "created_at",
         name: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_CREATED_AT),
@@ -353,18 +393,22 @@ const STROKE_DASH_ARRAY_DEFAULT = { value: "", label: "-----" };
 const FILL_COLOR_DEFAULT = "#aa3000";
 const FILL_OPACITY_DEFAULT = { value: 0.2, label: "20%" };
 const initialValues = {
+  /** General Data */
   name: "",
   geofenceType: null,
+  /** Config Data */
   alias: null,
   customerId: null,
   timeMinInSeconds: 5,
   timeMinOutSeconds: 5,
+  /** de Apoyo */
   inEdition: false,
   geometry: null,
   lat: null,
   lng: null,
   properties: {
     radius: null,
+    /** Style Data */
     strokeColor: STROKE_COLOR_DEFAULT,
     strokeOpacity: STROKE_OPACITY_DEFAULT,
     strokeWeight: STROKE_WHEIGTH_DEFAULT,
@@ -385,10 +429,14 @@ const formatDataEnpoint = (response) => {
       properties: {
         strokeColor: data.properties.strokeColor || STROKE_COLOR_DEFAULT,
         strokeOpacity: STROKE_OPACITY_DEFAULT,
+        //getFormStrokeOpacityFromData(data.properties.strokeOpacity),
         strokeWeight: STROKE_WHEIGTH_DEFAULT,
+        //,getFormStrokeWeightFromData(data.properties.strokeWeight) ,
         strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
+        // getFormstrokeDashArrayFromData(data.properties.strokeDashArray) ,
         fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
         fillOpacity: FILL_OPACITY_DEFAULT
+        //data.properties.fillOpacity || FILL_OPACITY_DEFAULT,
       }
     };
     if (obRet.geofenceType?.id === "gt_circle") {
@@ -625,8 +673,7 @@ function useDrawing() {
     }
   }, []);
   useEffect(() => {
-    if (!readyToUpdate)
-      return;
+    if (!readyToUpdate) return;
     if (geofenceTypeId) {
       if (geofenceTypeId !== geometrTypeIdCached) {
         setgeofenceTypeIdCached(geofenceTypeId);
@@ -757,7 +804,8 @@ function GeneralData() {
           }
         )
       ] }),
-      geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+      geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && // <HelperText variant='info' message={'undefined'} />
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
         /* @__PURE__ */ jsx(
           RHFTextField,
           {
@@ -1193,9 +1241,12 @@ function useRowActionsGetter(props) {
       editionInfo: `${getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_ID)}:${objectId} - ${name} `,
       componentProps: { fullRefresh, geofenceId: objectId },
       functionComponent: GeofenceAddEdit,
+      //   onMouseDown,
       defaultPosition: {
         vertical: { top: 50, bottom: 50 },
         horizontal: { right: 50, width: 380 }
+        // left:490,top:50,width:360, height:420},
+        // bounds:{top:5, left:5, right:-5, bottom:-5}
       },
       iconUrl: urlIconEdit
     });
@@ -1238,6 +1289,8 @@ function useRowActionsGetter(props) {
         onClick: () => {
           goEdit(row.id, row.name);
         },
+        // Solo se habilita si intenta editarse a él mismo, o si tiene permisos pero está en un nivel superior al usuario a editar
+        // disabled: !(itsMe || (hasPrivilege(PRIVILEGE_EDIT) && (loggedUserType > row.user_type.id)))
         disabled: !row.authUserOptions.edit
       });
       conditionalItems.push({
@@ -1247,6 +1300,8 @@ function useRowActionsGetter(props) {
           onDelete(row);
         },
         variant: "delete",
+        // Solo se habilita si intenta editarse a él mismo, o si tiene permisos pero está en un nivel superior al usuario a editar
+        // disabled: !(itsMe || (hasPrivilege(PRIVILEGE_EDIT) && (loggedUserType > row.user_type.id)))
         disabled: !row.authUserOptions.edit
       });
       return conditionalItems;
@@ -1419,9 +1474,12 @@ function useMaster() {
       popupId: "geofencesAddEdit",
       title: getLabel(MAP_GPSTOOLS_DICCTIONARY.ACTION_GEOFENCE_ADD),
       functionComponent: () => /* @__PURE__ */ jsx(GeofenceAddEdit, {}),
+      //   onMouseDown,
       defaultPosition: {
         vertical: { top: 50, bottom: 50 },
         horizontal: { right: 50, width: 380 }
+        // left:490,top:50,width:360, height:420},
+        // bounds:{top:5, left:5, right:-5, bottom:-5}
       },
       iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_ADD}`
     });
@@ -1618,6 +1676,7 @@ const createGpsToolsStore = (initProps) => {
   const startProps = {
     currentTabGpsTool: "geofences",
     geofenceState: {
+      // currentGeofenceTool: 'list',
       rows: [],
       checkedGeofences: /* @__PURE__ */ new Set(),
       checkedCrossingFeatures: /* @__PURE__ */ new Set(),
@@ -1658,6 +1717,18 @@ const createGpsToolsStore = (initProps) => {
           }
         },
         geofenceActions: {
+          // goToAddEdit: (geofenceId?: GeofenceId) => {
+          //     set(state => {
+          //         state.geofenceState.currentGeofenceTool = 'add_edit';
+          //         state.geofenceState.geofenceId = geofenceId;
+          //     });
+          // },
+          // goToList: (geofenceId?: GeofenceId) => {
+          //     set(state => {
+          //         state.geofenceState.currentGeofenceTool = 'list';
+          //         state.geofenceState.geofenceId = geofenceId;
+          //     });
+          // },
           addGeofence: (geofenceId, geofence) => {
             set((state) => {
               state.geofenceState.hashGeofences[geofenceId] = geofence;
@@ -1748,8 +1819,7 @@ function GpsToolsProvider(props) {
 }
 function useGpsToolsStore(selector, equalityFn) {
   const context = useContext(GpsToolsContext);
-  if (!context)
-    throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
+  if (!context) throw new Error("useGpsToolsStore context must be use inside GpsToolsContext");
   return useStore(context, selector, equalityFn);
 }
 function useLayers() {
@@ -1770,7 +1840,7 @@ function useLayers() {
     });
     addLayer({
       layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
-      name: "Geometr\xEDas de tr\xE1nsito",
+      name: "Geometrías de tránsito",
       renderFeature: CommonFeatureRender,
       geoJsonObject: {
         object: {
@@ -1782,7 +1852,7 @@ function useLayers() {
     });
     addLayer({
       layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
-      name: "Geometr\xEDas internas",
+      name: "Geometrías internas",
       renderFeature: CommonFeatureRender,
       geoJsonObject: {
         object: {

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;
+  }
+}