@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

package/components/indicators/IndicatorValueAndMagnitude/IndicatorValueAndMagnitude.styles.js

@@ -0,0 +1,41 @@
+const indicatorValueStatusStyles = {
+  /**
+   * The root styles
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    alignItems: "flex-end"
+  }),
+  /**
+   * The value styles
+   */
+  value: ({ ownerState }) => ({
+    // alignItems: 'flex-end',
+    fontVariantNumeric: "tabular-nums",
+    fontFeatureSettings: '"tnum" 1, "lnum" 1',
+    letterSpacing: "0.05em",
+    // Ajusta según necesites
+    ...ownerState?.minWidth && {
+      minWidth: ownerState?.minWidth
+    }
+  }),
+  /**
+   * The unit container styles
+   */
+  unitContainer: () => ({
+    // width: 'fit-content',
+    // height: 'fit-content',
+    display: "flex",
+    alignItems: "flex-end"
+  }),
+  /**
+   * The unit styles
+   */
+  unit: () => ({
+    paddingBottom: "1px"
+  })
+};
+export {
+  indicatorValueStatusStyles as i
+};

package/components/indicators/IndicatorValueAndMagnitude/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VALUE_AND_MAGNITUDE_COMPONENT_KEY = "M4LIndicatorValueAndMagnitude";
+export declare const VALUE_AND_MAGNITUDE_CLASSES: Record<string, string>;

package/components/indicators/IndicatorValueAndMagnitude/constants.js

@@ -0,0 +1,7 @@
+import { getComponentClasses } from "@m4l/components";
+import { I as IndicatorValueAndMagnitudeSlots } from "./slots/slots.js";
+const VALUE_AND_MAGNITUDE_COMPONENT_KEY = "M4LIndicatorValueAndMagnitude";
+getComponentClasses(VALUE_AND_MAGNITUDE_COMPONENT_KEY, IndicatorValueAndMagnitudeSlots);
+export {
+  VALUE_AND_MAGNITUDE_COMPONENT_KEY as V
+};

package/components/indicators/IndicatorValueAndMagnitude/index.d.ts

@@ -0,0 +1 @@
+export { IndicatorValueAndMagnitude } from './IndicatorValueAndMagnitude';

package/components/indicators/IndicatorValueAndMagnitude/index.js

@@ -0,0 +1 @@
+

package/components/indicators/IndicatorValueAndMagnitude/slots/slots.d.ts

@@ -0,0 +1,6 @@
+export declare enum IndicatorValueAndMagnitudeSlots {
+    root = "root",
+    value = "value",
+    unitContainer = "unitContainer",
+    unit = "unit"
+}

package/components/indicators/IndicatorValueAndMagnitude/slots/slots.js

@@ -0,0 +1,10 @@
+var IndicatorValueAndMagnitudeSlots = /* @__PURE__ */ ((IndicatorValueAndMagnitudeSlots2) => {
+  IndicatorValueAndMagnitudeSlots2["root"] = "root";
+  IndicatorValueAndMagnitudeSlots2["value"] = "value";
+  IndicatorValueAndMagnitudeSlots2["unitContainer"] = "unitContainer";
+  IndicatorValueAndMagnitudeSlots2["unit"] = "unit";
+  return IndicatorValueAndMagnitudeSlots2;
+})(IndicatorValueAndMagnitudeSlots || {});
+export {
+  IndicatorValueAndMagnitudeSlots as I
+};

package/components/indicators/IndicatorValueAndMagnitude/slots/styled.d.ts

@@ -0,0 +1,12 @@
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ValueStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;
+export declare const ContainerUnitStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const UnitStyled: import('@emotion/styled').StyledComponent<Pick<import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps, keyof import('@m4l/components/src/components/mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: any;
+}, {}, {}>;

package/components/indicators/IndicatorValueAndMagnitude/slots/styled.js

@@ -0,0 +1,27 @@
+import { styled } from "@mui/material/styles";
+import { I as IndicatorValueAndMagnitudeSlots } from "./slots.js";
+import { V as VALUE_AND_MAGNITUDE_COMPONENT_KEY } from "../constants.js";
+import { i as indicatorValueStatusStyles } from "../IndicatorValueAndMagnitude.styles.js";
+import { Typography } from "@m4l/components";
+const RootStyled = styled("div", {
+  name: VALUE_AND_MAGNITUDE_COMPONENT_KEY,
+  slot: IndicatorValueAndMagnitudeSlots.root
+})(indicatorValueStatusStyles?.root);
+const ValueStyled = styled(Typography, {
+  name: VALUE_AND_MAGNITUDE_COMPONENT_KEY,
+  slot: IndicatorValueAndMagnitudeSlots.value
+})(indicatorValueStatusStyles?.value);
+const ContainerUnitStyled = styled("div", {
+  name: VALUE_AND_MAGNITUDE_COMPONENT_KEY,
+  slot: IndicatorValueAndMagnitudeSlots.unitContainer
+})(indicatorValueStatusStyles?.unitContainer);
+const UnitStyled = styled(Typography, {
+  name: VALUE_AND_MAGNITUDE_COMPONENT_KEY,
+  slot: IndicatorValueAndMagnitudeSlots.unit
+})(indicatorValueStatusStyles?.unit);
+export {
+  ContainerUnitStyled as C,
+  RootStyled as R,
+  UnitStyled as U,
+  ValueStyled as V
+};

package/components/indicators/IndicatorValueAndMagnitude/types.d.ts

@@ -0,0 +1,14 @@
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { IndicatorValueAndMagnitudeSlots } from './slots/slots';
+import { VALUE_AND_MAGNITUDE_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+export type IndicatorValueAndMagnitudeProps = {
+    value: React.ReactNode;
+    magnitude?: string;
+    minWidth?: string;
+};
+export type IndicatorValueAndMagnitudeOwnerState = {
+    minWidth?: string;
+};
+export type IndicatorValueAndMagnitudeSlotsType = keyof typeof IndicatorValueAndMagnitudeSlots;
+export type IndicatorValueAndMagnitudeStyles = M4LOverridesStyleRules<IndicatorValueAndMagnitudeSlotsType, typeof VALUE_AND_MAGNITUDE_COMPONENT_KEY, Theme>;

package/components/indicators/IndicatorValueStatus/IndicatorValueStatus.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useComponentSize, Typography } from "@m4l/components";
+import { I as IndicatorValueStatusRootStyled, C as ContainerTitleIconStyled, a as IconStyled, b as ContainerValueStatusStyled, c as ContainerValueStyled } from "./slots/IndicatorValueStatusSlots.js";
+import { I as INDICATOR_VALUE_STATUS_CLASSES } from "./constants.js";
+import clsx from "clsx";
+const IndicatorValueStatus = (props) => {
+  const { title, iconUrl, value, status, className, dataTestId, size, tooltipContent } = props;
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    size: currentSize
+  };
+  return /* @__PURE__ */ jsxs(IndicatorValueStatusRootStyled, { className: clsx(className, INDICATOR_VALUE_STATUS_CLASSES.root), "data-testid": dataTestId, variant: "text", children: [
+    /* @__PURE__ */ jsxs(ContainerTitleIconStyled, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", ellipsis: true, size: currentSize, skeletonWidth: "80px", children: title }),
+      iconUrl && /* @__PURE__ */ jsx(IconStyled, { src: iconUrl, ownerState, color: "text.secondary", tooltipContent })
+    ] }),
+    /* @__PURE__ */ jsxs(ContainerValueStatusStyled, { children: [
+      value && /* @__PURE__ */ jsx(ContainerValueStyled, { ownerState, children: value }),
+      status
+    ] })
+  ] });
+};
+export {
+  IndicatorValueStatus as I
+};

package/components/indicators/IndicatorValueStatus/IndicatorValueStatus.styles.js

@@ -0,0 +1,76 @@
+import { getSizeStyles } from "@m4l/components";
+const indicatorValueStatusStyles = {
+  /**
+   * The root styles
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    width: "fit-content",
+    padding: theme.vars.size.baseSpacings.sp3,
+    backgroundColor: theme.vars.palette.background.base,
+    gap: theme.vars.size.baseSpacings.sp1,
+    overflow: "hidden"
+  }),
+  /**
+   * The container title icon styles
+   */
+  containerTitleIcon: ({ theme }) => ({
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.vars.size.baseSpacings.sp4,
+    width: "100%"
+  }),
+  /**
+   * The icon styles
+   */
+  icon: ({ theme, ownerState }) => ({
+    "&&&": {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "case",
+        (size) => ({
+          width: size,
+          height: size
+        })
+      )
+    }
+  }),
+  /**
+   * The container value styles
+   */
+  containerValue: () => ({
+    display: "flex",
+    width: "100%",
+    // gap: theme.vars.size.baseSpacings.sp1,
+    // ...getSizeStyles(
+    //   theme,
+    //   ownerState?.size || 'medium',
+    //   'container',
+    //   (size) => ({
+    //     height: size,
+    //   }),
+    // ),
+    "& .M4LTypography-root": {
+      width: "fit-content"
+    }
+  }),
+  /**
+   * The container value status styles
+   */
+  containerValueStatus: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp1"],
+    height: "fit-content",
+    width: "100%",
+    overflow: "hidden"
+  })
+};
+export {
+  indicatorValueStatusStyles as i
+};

package/components/indicators/IndicatorValueStatus/constants.js

@@ -0,0 +1,8 @@
+import { getComponentClasses } from "@m4l/components";
+import { I as IndicatorValueStatusSlots } from "./slots/IndicatorValueStatusEnum.js";
+const INDICATOR_VALUE_STATUS_COMPONENT_KEY = "M4LIndicatorValueStatus";
+const INDICATOR_VALUE_STATUS_CLASSES = getComponentClasses(INDICATOR_VALUE_STATUS_COMPONENT_KEY, IndicatorValueStatusSlots);
+export {
+  INDICATOR_VALUE_STATUS_CLASSES as I,
+  INDICATOR_VALUE_STATUS_COMPONENT_KEY as a
+};

package/components/indicators/IndicatorValueStatus/index.js

@@ -0,0 +1 @@
+

package/components/indicators/IndicatorValueStatus/slots/IndicatorValueStatusEnum.js

@@ -0,0 +1,11 @@
+var IndicatorValueStatusSlots = /* @__PURE__ */ ((IndicatorValueStatusSlots2) => {
+  IndicatorValueStatusSlots2["root"] = "root";
+  IndicatorValueStatusSlots2["containerTitleIcon"] = "containerTitleIcon";
+  IndicatorValueStatusSlots2["containerValue"] = "containerValue";
+  IndicatorValueStatusSlots2["containerValueStatus"] = "containerValueStatus";
+  IndicatorValueStatusSlots2["icon"] = "icon";
+  return IndicatorValueStatusSlots2;
+})(IndicatorValueStatusSlots || {});
+export {
+  IndicatorValueStatusSlots as I
+};

package/components/indicators/IndicatorValueStatus/slots/IndicatorValueStatusSlots.js

@@ -0,0 +1,32 @@
+import { styled } from "@mui/material/styles";
+import { I as IndicatorValueStatusSlots } from "./IndicatorValueStatusEnum.js";
+import { a as INDICATOR_VALUE_STATUS_COMPONENT_KEY } from "../constants.js";
+import { i as indicatorValueStatusStyles } from "../IndicatorValueStatus.styles.js";
+import { Card, Icon } from "@m4l/components";
+const IndicatorValueStatusRootStyled = styled(Card, {
+  name: INDICATOR_VALUE_STATUS_COMPONENT_KEY,
+  slot: IndicatorValueStatusSlots.root
+})(indicatorValueStatusStyles?.root);
+const ContainerTitleIconStyled = styled("div", {
+  name: INDICATOR_VALUE_STATUS_COMPONENT_KEY,
+  slot: IndicatorValueStatusSlots.containerTitleIcon
+})(indicatorValueStatusStyles?.containerTitleIcon);
+const ContainerValueStyled = styled("div", {
+  name: INDICATOR_VALUE_STATUS_COMPONENT_KEY,
+  slot: IndicatorValueStatusSlots.containerValue
+})(indicatorValueStatusStyles?.containerValue);
+const ContainerValueStatusStyled = styled("div", {
+  name: INDICATOR_VALUE_STATUS_COMPONENT_KEY,
+  slot: IndicatorValueStatusSlots.containerValueStatus
+})(indicatorValueStatusStyles?.containerValueStatus);
+const IconStyled = styled(Icon, {
+  name: INDICATOR_VALUE_STATUS_COMPONENT_KEY,
+  slot: IndicatorValueStatusSlots.icon
+})(indicatorValueStatusStyles?.icon);
+export {
+  ContainerTitleIconStyled as C,
+  IndicatorValueStatusRootStyled as I,
+  IconStyled as a,
+  ContainerValueStatusStyled as b,
+  ContainerValueStyled as c
+};

package/components/indicators/IndicatorValueStatus/types.d.ts

@@ -32,6 +32,10 @@ export interface IndicatorValueStatusProps {
      * The size of the indicator value status
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * tooltip of the indicator value status
+     */
+    tooltipContent?: React.ReactNode;
 }
 export type IndicatorValueStatusOwnerState = {
     size: IndicatorValueStatusProps['size'];

package/components/indicators/index.d.ts

@@ -1,2 +1,4 @@
 export * from './IndicatorBattery';
 export * from './IndicatorCSQ';
+export * from './IndicatorValueStatus';
+export * from './IndicatorValueAndMagnitude';

package/components/maps/components/GpsMap/GpsMap.js

@@ -1,33 +1,50 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { T as TileLayers } from "./subcomponents/TileLayers/index.js";
 import { C as Controls } from "./subcomponents/Controls/index.js";
 import { L as LayersContainer } from "./subcomponents/LayersContainer/index.js";
 import { m as mapClasses } from "./classes/index.js";
-import { G as GpsMapRootStyled } from "./slots/GpsMapSlots.js";
+import { G as GpsMapRootStyled, a as GpsMapContainerStyled } from "./slots/styled.js";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { u as useMapStore } from "./hooks/useMapStore/index.js";
+import { M as MapEventController } from "./subcomponents/MapEventController/MapEventController.js";
 function GpsMap(props) {
   const {
-    tools,
+    GpsTools,
     center = [6.215749485905093, -75.58622905191254],
     initalZoom = 16,
-    maxZoom = 22
+    maxZoom = 22,
+    children,
+    className,
+    disableMapEvents = false,
+    style
   } = props;
-  return /* @__PURE__ */ jsxs(
-    GpsMapRootStyled,
+  const setMapRef = useMapStore((state) => state.mapActions.setMapRef);
+  const mapRef = useCallback((newMap) => {
+    if (newMap !== null) {
+      setMapRef(newMap);
+    }
+  }, [setMapRef]);
+  return /* @__PURE__ */ jsx(GpsMapRootStyled, { className: clsx(mapClasses.root, className), children: /* @__PURE__ */ jsxs(
+    GpsMapContainerStyled,
     {
-      className: mapClasses.root,
+      ref: mapRef,
       center,
       zoom: initalZoom,
       maxZoom,
       boxZoom: true,
       preferCanvas: true,
       zoomControl: false,
+      style,
       children: [
+        /* @__PURE__ */ jsx(MapEventController, { disableMapEvents }),
         /* @__PURE__ */ jsx(TileLayers, {}),
         /* @__PURE__ */ jsx(LayersContainer, {}),
-        /* @__PURE__ */ jsx(Controls, { tools })
+        /* @__PURE__ */ jsx(Controls, { GpsTools }),
+        children
       ]
     }
-  );
+  ) });
 }
 export {
   GpsMap as G

package/components/maps/components/GpsMap/GpsMap.styles.js

@@ -1,9 +1,20 @@
-import "leaflet/dist/leaflet.css";
+import { leafletAllStyles } from "./leaflet.styles";
+import { m as mapSourcesToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapSourcesTool/MapSourcesTool.styles.js";
+import { m as mapLayersToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MapLayersTool/MapLayersTool.styles.js";
+import { m as mapMeasureToolStyles, g as getMapContainerMeasureToolStyles } from "./subcomponents/Controls/subcomponents/TopRigthTools/subcomponents/MeasureTool/MeasureTool.styles.js";
 const mapStyles = {
   /**
    * TODO: Documentar
    */
   root: () => ({
+    ...leafletAllStyles,
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * Estilos del contenedor del mapa
+   */
+  mapContainer: ({ theme }) => ({
     //leaflet_css,
     width: "100%",
     height: "100%",
@@ -22,17 +33,28 @@ const mapStyles = {
      * Control superior derecho
      */
     "& .M4LMap-topRigthToolsRoot": {
-      backgroundColor: "blue",
+      padding: theme.vars.size.baseSpacings.sp1,
+      gap: theme.vars.size.baseSpacings.sp1,
+      borderRadius: theme.vars.size.borderRadius.r2,
+      backgroundColor: "white",
       //Por cambiar
       display: "flex",
+      flexDirection: "column",
       right: 0,
-      position: "absolute",
-      /**
-       * Zoom buttons
-       */
-      "& .M4LMap-zoomButtons": {
-        display: "flex"
-      }
+      position: "absolute"
+    },
+    "& .M4LMap-bottomRightToolsRoot": {
+      padding: theme.vars.size.baseSpacings.sp1,
+      gap: theme.vars.size.baseSpacings.sp1,
+      borderRadius: theme.vars.size.borderRadius.r2,
+      backgroundColor: "white",
+      //Por cambiar
+      display: "flex",
+      flexDirection: "column",
+      right: 0,
+      bottom: 0,
+      marginBottom: "24px !important",
+      position: "absolute"
     },
     /**
      * Marcas
@@ -65,79 +87,8 @@ const mapStyles = {
       overflow: "hidden",
       textOverflow: "ellipsis"
     },
-    //Herramienta de medición Formulario
-    "& .M4LMap-meaureToolRoot": {
-      backgroundColor: "green",
-      //Por cambiar
-      height: "100%",
-      width: "100%"
-    },
-    "& .M4LMap-measureToolFormValue": {
-      justifyContent: "center"
-    },
-    "& .M4LMap-measureToolFormValueDistance": {
-      border: "1px solid white",
-      margin: "0 5px",
-      fontWeight: 800,
-      //Por cambiar
-      fontSize: "large"
-      //Por cambiar
-    },
     //Marker measure Point Icon
-    "& .M4LMap-measureMarkerRoot": {
-      "--color": "green"
-    },
-    "& .M4LMap-measureMarkerContainer": {
-      position: "relative",
-      cursor: "pointer"
-    },
-    "& .M4LMap-measureMarkerContainerRhomb": {
-      position: "absolute",
-      filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
-      width: "31px",
-      height: "31px",
-      borderRadius: "50% 50% 50% 0",
-      border: "4px solid var(--color)",
-      backgroundColor: "var(--color)",
-      transform: "rotate(-45deg)"
-    },
-    "& .M4LMap-measureMarkerContainerSlot": {
-      position: "absolute",
-      background: "#fff",
-      borderRadius: "50%",
-      overflow: "hidden",
-      top: "3px",
-      left: "3px",
-      width: "25px",
-      height: "24px"
-    },
-    "& .M4LMap-measureMarkerContainerSlotNumber": {
-      fontSize: "14px",
-      fontWeight: "600",
-      textAlign: "center",
-      marginTop: "1px",
-      color: "black"
-    },
-    //Marker Point Label
-    "& .M4LMap-measureLabelMarkerRoot": {
-      "--color": "yellow"
-    },
-    "& .M4LMap-measureLabelMarkerContainer": {
-      backgroundColor: "var(--color)",
-      border: "1px solid gray",
-      color: "#fff",
-      width: "80px",
-      marginLeft: "15px",
-      marginTop: "15px"
-    },
-    "& .M4LMap-measureLabelMarkerDistance": {
-      color: "gray"
-    },
-    "& .M4LMap-measureLabelMarkerRemove": {
-      color: "blue"
-    },
-    //Cluster Markers
-    //Animacion
+    ...getMapContainerMeasureToolStyles(theme),
     "& .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow": {
       // '-webkit-transition': '-webkit-transform 0.3s ease-out, opacity 0.3s ease-in',
       // '-moz-transition': '-moz-transform 0.3s ease-out, opacity 0.3s ease-in',
@@ -207,21 +158,58 @@ const mapStyles = {
     //Cluster Markers
     "& .marker-cluster span": {
       lineHeight: "30px"
+    }
+  }),
+  /**
+   * Botón de zoom del mapa
+   */
+  zoomButton: ({ theme: _theme }) => ({}),
+  /**
+   * Estilos del contenedor de las herramientas
+   */
+  controlRightToolsRoot: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp1,
+    gap: theme.vars.size.baseSpacings.sp1,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.base,
+    //Por cambiar
+    display: "flex",
+    flexDirection: "column",
+    right: 0,
+    position: "absolute"
+  }),
+  /**
+   * Estilos del contenedor de las herramientas
+   */
+  controlLeftToolsRoot: ({ theme }) => ({
+    padding: theme.vars.size.baseSpacings.sp1,
+    gap: theme.vars.size.baseSpacings.sp1,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    backgroundColor: theme.vars.palette.background.base,
+    //Por cambiar
+    display: "flex",
+    flexDirection: "column",
+    left: 0,
+    position: "absolute"
+  }),
+  /**
+   * Estilos del contenedor de los popups
+   */
+  popupsViewer: ({ theme }) => ({
+    "& .M4LWindowBase-root": {
+      borderColor: `${theme.vars.palette.border.disabled} !important`
+    },
+    "& .M4LWindowBase-root .M4LWindowBase-headerContentWindowBase .M4LIcon-icon": {
+      backgroundColor: `${theme.vars.palette.text.primary} !important`
     },
-    // '& .xxxxx': {
-    //   // color: theme.vars.palette.state.error.normal,
-    //   '& .M4LIcon-root .M4LIcon-icon': {
-    //     backgroundColor: theme.vars.palette.state.error.normal,
-    //   },
-    // },
-    "& .leaflet-control-scale-line": {
-      color: "red"
-      //Ejemplo de como estilar el control de scala
+    "& .M4LWindowBase-root .M4LWindowBase-headerContentWindowBase .M4LTypography-root": {
+      color: `${theme.vars.palette.text.primary} !important`
     }
   }),
-  popupGpsDevice: () => ({}),
-  popupGpsDeviceHeader: () => ({}),
-  popupGpsDeviceContent: () => ({})
+  // Concatenar estilos de MapSourcesTool
+  ...mapSourcesToolStyles,
+  ...mapLayersToolStyles,
+  ...mapMeasureToolStyles
 };
 export {
   mapStyles as m

package/components/maps/components/GpsMap/classes/index.d.ts

@@ -4,5 +4,5 @@ export declare const mapClasses: MapClasses;
 /**
  * TODO: Documentar
  */
-export declare const useMapUtilityClasses: (_ownerState: OwnerState) => Record<"root" | "active" | "disabled" | "topLeftToolsRoot" | "topRigthToolsRoot" | "zoomButtons" | "markerLayerRoot" | "markerLayerIcon" | "markerLayerLabel" | "featureLabel" | "meaureToolRoot" | "measureToolFormValue" | "measureToolFormValueDistance" | "measureToolFormValueSymbol" | "measureToolLabel" | "meausureToolLabelDistance" | "meausureToolLabelSymbol" | "measureMarkerRoot" | "measureMarkerContainer" | "measureMarkerContainerRhomb" | "measureMarkerContainerSlot" | "measureMarkerContainerSlotNumber" | "measureLabelMarkerRoot" | "measureLabelMarkerContainer" | "measureLabelMarkerDistance" | "measureLabelMarkerRemove" | "mapSourcesPopoverRoot" | "mapSourcesRoot" | "mapSourcesOption" | "mapSourcesOptionIconLabel" | "mapSourcesOptionRoadOptions" | "mapSourcesOptionRoadOptionsCheck" | "layersPopoverRoot" | "markerLayerLabelInner", string>;
+export declare const useMapUtilityClasses: (_ownerState: OwnerState) => Record<"active" | "disabled" | "root" | "topLeftToolsRoot" | "topRigthToolsRoot" | "zoomButtons" | "markerLayerRoot" | "markerLayerIcon" | "markerLayerLabel" | "featureLabel" | "measureMarkerRoot" | "measureMarkerContainer" | "measureMarkerSvgRoot" | "measureMarkerContainerRhomb" | "measureMarkerContainerSlot" | "measureMarkerContainerSlotNumber" | "measureLabelMarkerRoot" | "measureLabelMarkerContainer" | "measureLabelMarkerDistance" | "measureLabelMarkerRemove" | "layersPopoverRoot" | "markerLayerLabelInner", string>;
 export type Classes = ReturnType<typeof useMapUtilityClasses>;