@m4l/components 3.0.0 → 3.0.2

package/components/FieldLabel/{index.9a979def.js → index-DCAMDJoJ.js}

@@ -1,20 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { F as FieldLabelRoot } from "../../styles/index.db9e7ddb.js";
+import { F as FieldLabelRoot } from "../../styles/index-C-MsxWtr.js";
 import { generateUtilityClasses, Tooltip, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.f77cc2ab.js";
+import { g as getComponentUtilityClass } from "../../utils/index-DiMrtgIu.js";
 import clsx from "clsx";
-import { T as Typography } from "../mui_extended/Typography/index.8c0801e4.js";
-import { I as Icon } from "../Icon/index.c06685f4.js";
+import { T as Typography } from "../mui_extended/Typography/index-W88rbpsJ.js";
+import { I as Icon } from "../Icon/index-CueLDD9j.js";
 const componentName = "M4LFieldLabel";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "label",
   "tooltip",
   "tooltipIcon",
   "containerIcon",
   "mandatory"
+  /* states or variants of elements */
 ]);
 const useUtilityClasses = () => {
   const slots = {

package/components/GridLayout/{index.dd291886.js → index-DUfp2sP_.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.10278655.js";
-import { G as GridLayoutRoot } from "../../styles/index.db9e7ddb.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index-DEi0Ai1D.js";
+import { G as GridLayoutRoot } from "../../styles/index-C-MsxWtr.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
 const COMPONENT_CLASS_NAME = "M4LGridLayout";
@@ -23,8 +23,7 @@ function bottom(layout, colapsedHeight, rowHeight) {
   let max = 0, bottomY;
   for (let i = 0, len = layout.length; i < len; i++) {
     bottomY = layout[i].y + getLayoutItemH(layout[i], colapsedHeight, rowHeight);
-    if (bottomY > max)
-      max = bottomY;
+    if (bottomY > max) max = bottomY;
   }
   return max;
 }
@@ -41,6 +40,7 @@ function cloneLayoutItem(layoutItem, layoutItemReplaceProps) {
     maxH: layoutItem.maxH,
     moved: Boolean(layoutItem.moved),
     static: Boolean(layoutItem.static),
+    // These can be null/undefined
     isDraggable: layoutItem.isDraggable,
     isResizable: layoutItem.isResizable,
     resizeHandles: layoutItem.resizeHandles,
@@ -59,16 +59,11 @@ function cloneLayout(layout, layoutItemReplaceProps) {
   return newLayout;
 }
 function collides(l1, l2, colapsedHeight, rowHeight) {
-  if (l1.i === l2.i)
-    return false;
-  if (l1.x + l1.w <= l2.x)
-    return false;
-  if (l1.x >= l2.x + l2.w)
-    return false;
-  if (l1.y + getLayoutItemH(l1, colapsedHeight, rowHeight) <= l2.y)
-    return false;
-  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight, rowHeight))
-    return false;
+  if (l1.i === l2.i) return false;
+  if (l1.x + l1.w <= l2.x) return false;
+  if (l1.x >= l2.x + l2.w) return false;
+  if (l1.y + getLayoutItemH(l1, colapsedHeight, rowHeight) <= l2.y) return false;
+  if (l1.y >= l2.y + getLayoutItemH(l2, colapsedHeight, rowHeight)) return false;
   return true;
 }
 function compactItem(compareWith, l, compactType, cols, fullLayout, colapsedHeight, rowHeight, allowOverlap) {
@@ -145,8 +140,7 @@ function compact(layout, compactType, cols, colapsedHeight, rowHeight, allowOver
 }
 function getLayoutItem(layout, id) {
   for (let i = 0, len = layout.length; i < len; i++) {
-    if (layout[i].i === id)
-      return layout[i];
+    if (layout[i].i === id) return layout[i];
   }
   return void 0;
 }
@@ -158,8 +152,7 @@ function getAllCollisions(layout, layoutItem, colapsedHeight, rowHeight) {
 }
 function getFirstCollision(layout, layoutItem, colapsedHeight, rowHeight) {
   for (let i = 0, len = layout.length; i < len; i++) {
-    if (collides(layout[i], layoutItem, colapsedHeight, rowHeight))
-      return layout[i];
+    if (collides(layout[i], layoutItem, colapsedHeight, rowHeight)) return layout[i];
   }
   return void 0;
 }
@@ -218,21 +211,16 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
   );
 }
 function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols, colapsedHeight, rowHeight, allowOverlap) {
-  if (l.static && l.isDraggable !== true)
-    return layout;
-  if (l.y === y && l.x === x)
-    return layout;
+  if (l.static && l.isDraggable !== true) return layout;
+  if (l.y === y && l.x === x) return layout;
   const oldX = l.x;
   const oldY = l.y;
-  if (typeof x === "number")
-    l.x = x;
-  if (typeof y === "number")
-    l.y = y;
+  if (typeof x === "number") l.x = x;
+  if (typeof y === "number") l.y = y;
   l.moved = true;
   let sorted = sortLayoutItems(layout, compactType);
   const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
-  if (movingUp)
-    sorted = sorted.reverse();
+  if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l, colapsedHeight, rowHeight);
   const hasCollisions = collisions.length > 0;
   if (hasCollisions && allowOverlap) {
@@ -245,8 +233,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
   }
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i];
-    if (collision.moved)
-      continue;
+    if (collision.moved) continue;
     if (collision.static) {
       layout = moveElementAwayFromCollision(
         layout,
@@ -283,10 +270,8 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHei
   }).indexOf(item.i);
   for (let i = itemIndex + 1; i < layout.length; i++) {
     const otherItem = layout[i];
-    if (otherItem.static)
-      continue;
-    if (otherItem.y > item.y + getLayoutItemH(item, colapsedHeight, rowHeight))
-      break;
+    if (otherItem.static) continue;
+    if (otherItem.y > item.y + getLayoutItemH(item, colapsedHeight, rowHeight)) break;
     if (collides(item, otherItem, colapsedHeight, rowHeight)) {
       resolveCompactionCollision(
         layout,
@@ -302,6 +287,11 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, colapsedHei
 }
 function setTransform({ top, left, width, height }) {
   return {
+    /*  transform: translate,
+        WebkitTransform: translate,
+        MozTransform: translate,
+        msTransform: translate,
+        OTransform: translate, */
     width: `${width}px`,
     height: `${height}px`,
     position: "absolute",
@@ -337,17 +327,13 @@ function sortLayoutItemsByColRow(layout) {
   });
 }
 function sortLayoutItems(layout, compactType) {
-  if (compactType === "horizontal")
-    return sortLayoutItemsByColRow(layout);
-  if (compactType === "vertical")
-    return sortLayoutItemsByRowCol(layout);
-  else
-    return layout;
+  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
+  else return layout;
 }
 function withLayoutItem(layout, itemKey, cb) {
   let item = getLayoutItem(layout, itemKey);
-  if (!item)
-    return [layout, void 0];
+  if (!item) return [layout, void 0];
   item = cb(cloneLayoutItem(item));
   layout = modifyLayout(layout, item);
   return [layout, item];
@@ -356,14 +342,12 @@ function correctBounds(layout, bounds, colapsedHeight, rowHeight) {
   const collidesWith = getStatics(layout);
   for (let i = 0, len = layout.length; i < len; i++) {
     const l = layout[i];
-    if (l.x + l.w > bounds.cols)
-      l.x = bounds.cols - l.w;
+    if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w;
     if (l.x < 0) {
       l.x = 0;
       l.w = bounds.cols;
     }
-    if (!l.static)
-      collidesWith.push(l);
+    if (!l.static) collidesWith.push(l);
     else {
       while (getFirstCollision(collidesWith, l, colapsedHeight, rowHeight)) {
         l.y++;
@@ -426,8 +410,7 @@ function calcGridColWidth(positionParams) {
   return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
 }
 function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
-  if (!Number.isFinite(gridUnits))
-    return gridUnits;
+  if (!Number.isFinite(gridUnits)) return gridUnits;
   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
 }
 function calcGridItemPosition(positionParams, x, y, w, h, maximize, state) {
@@ -486,11 +469,13 @@ function clamp(num, lowerBound, upperBound) {
   return Math.max(Math.min(num, upperBound), lowerBound);
 }
 const gridLayoutClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  /* elements */
   "root",
   "gridItemRoot",
   "gridItemType",
   "gridItemPlaceholder",
   "gridItemFreeMove",
+  /* states or variants of elements */
   "maximizeMe",
   "maximizeOther",
   "colapsed",
@@ -505,6 +490,7 @@ function GridLayout(props) {
   const {
     layoutItemRender,
     innerRef,
+    //Referencia requerida por el provedor WidthProvider para detectar los cambios de tamaño
     autoSize = true,
     cols = DEFAULT_COLS,
     containerPadding = DEFAULT_CONTAINER_PADDING,
@@ -519,6 +505,7 @@ function GridLayout(props) {
     draggableHandle = "",
     draggableCancel = "",
     maxRows = Infinity,
+    // infinite vertical growth
     layout = [],
     isBounded = false,
     isDraggable = true,
@@ -596,12 +583,12 @@ function GridLayout(props) {
       const { layout: layout2 } = refState.current;
       const { e, node } = gridDragEvent;
       const li = getLayoutItem(layout2, i);
-      if (!li)
-        return;
+      if (!li) return;
       refState.current = {
         ...refState.current,
         oldDragItem: cloneLayoutItem(li),
         oldLayout: layout2
+        //Punto de arranque, layout actual
       };
       if (li && li.freeMove) {
         onClickSetOnTopFreeMove(li.i, "onDragStart");
@@ -619,8 +606,7 @@ function GridLayout(props) {
       const { oldDragItem, layout: layout2 } = refState.current;
       const { e, node } = gridDragEvent;
       const li = getLayoutItem(layout2, i);
-      if (!li)
-        return;
+      if (!li) return;
       const newPlaceholder = {
         w: li.w,
         h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
@@ -689,8 +675,7 @@ function GridLayout(props) {
       }
       const { oldDragItem, layout: layout2, oldLayout } = refState.current;
       const li = getLayoutItem(layout2, i);
-      if (!li)
-        return;
+      if (!li) return;
       let newLayout;
       const isUserAction = true;
       if (!li.freeMove) {
@@ -745,12 +730,12 @@ function GridLayout(props) {
     (i, _w, _h, { e, node }) => {
       const { layout: layout2 } = refState.current;
       const li = getLayoutItem(layout2, i);
-      if (!li)
-        return;
+      if (!li) return;
       refState.current = {
         ...refState.current,
         oldResizeItem: cloneLayoutItem(li),
         oldLayout: refState.current.layout
+        //Punto de arranque, layout actual
       };
       onResizeStart(layout2, li, li, void 0, e, node);
       if (li && li.freeMove) {
@@ -778,15 +763,11 @@ function GridLayout(props) {
             if (hasCollisions) {
               let leastX = Infinity, leastY = Infinity;
               collisions.forEach((layoutItem) => {
-                if (layoutItem.x > cbLi.x)
-                  leastX = Math.min(leastX, layoutItem.x);
-                if (layoutItem.y > cbLi.y)
-                  leastY = Math.min(leastY, layoutItem.y);
+                if (layoutItem.x > cbLi.x) leastX = Math.min(leastX, layoutItem.x);
+                if (layoutItem.y > cbLi.y) leastY = Math.min(leastY, layoutItem.y);
               });
-              if (Number.isFinite(leastX))
-                cbLi.w = leastX - cbLi.x;
-              if (Number.isFinite(leastY))
-                cbLi.h = leastY - cbLi.y;
+              if (Number.isFinite(leastX)) cbLi.w = leastX - cbLi.x;
+              if (Number.isFinite(leastY)) cbLi.h = leastY - cbLi.y;
             }
           }
           if (!hasCollisions) {
@@ -806,8 +787,7 @@ function GridLayout(props) {
           li.h = h;
         }
       }
-      if (!li)
-        return;
+      if (!li) return;
       const newPlaceholder = {
         w: li.w,
         h: li.h,
@@ -851,6 +831,7 @@ function GridLayout(props) {
       const l = getLayoutItem(layout2, i);
       refState.current = {
         ...refState.current,
+        // layout: finalLayout,
         oldResizeItem: void 0,
         oldLayout: void 0,
         activeDrag: void 0
@@ -881,8 +862,7 @@ function GridLayout(props) {
   }, []);
   const placeholder = () => {
     const { activeDrag } = currentState;
-    if (!activeDrag)
-      return null;
+    if (!activeDrag) return null;
     return /* @__PURE__ */ jsx(
       MemonizedGridItem,
       {
@@ -1007,8 +987,7 @@ function GridLayout(props) {
     ]
   );
   const containerAutoSizeHeight = useCallback(() => {
-    if (!autoSize)
-      return;
+    if (!autoSize) return;
     const nbRow = bottom(finalLayoutRender, colapsedHeight, rowHeight);
     const containerPaddingY = containerPadding ? containerPadding[1] : margin[1];
     return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
@@ -1031,7 +1010,7 @@ function GridLayout(props) {
   );
 }
 export {
-  isEqualLayouts as A,
+  noop as A,
   COMPONENT_CLASS_NAME as C,
   DEFAULT_COLS as D,
   GridLayout as G,
@@ -1061,5 +1040,5 @@ export {
   isEqualLayout as w,
   DEFAULT_RESPONSIVE_BREAKPOINTS as x,
   DEFAULT_RESPONSIVE_COLS as y,
-  noop as z
+  isEqualLayouts as z
 };

package/components/GridLayout/subcomponents/Griditem/{index.10278655.js → index-DEi0Ai1D.js}

@@ -1,8 +1,8 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { D as DraggableCore_1 } from "../../../../react-draggable.079122b0.js";
-import { R as Resizable } from "../../../../react-resizable.330f1499.js";
-import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.dd291886.js";
+import { D as DraggableCore_1 } from "../../../../react-draggable-DsCPdgQP.js";
+import { R as Resizable } from "../../../../react-resizable-eBbFl2dX.js";
+import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index-DUfp2sP_.js";
 import clsx from "clsx";
 import { deepEqual } from "fast-equals";
 function GridItem(props) {
@@ -140,12 +140,10 @@ function GridItem(props) {
     return newStyle;
   };
   const gridItemOnDragStart = useCallback((e, { node }) => {
-    if (!onDragStart)
-      return;
+    if (!onDragStart) return;
     const newPosition = { top: 0, left: 0 };
     const { offsetParent } = node;
-    if (!offsetParent)
-      return;
+    if (!offsetParent) return;
     const parentRect = offsetParent.getBoundingClientRect();
     const clientRect = node.getBoundingClientRect();
     const cLeft = clientRect.left / transformScale;
@@ -171,8 +169,7 @@ function GridItem(props) {
   }, []);
   const gridItemOnDrag = useCallback(
     (e, { node, deltaX, deltaY }) => {
-      if (!onDrag)
-        return;
+      if (!onDrag) return;
       if (!refState.current.dragging) {
         return;
       }
@@ -212,8 +209,7 @@ function GridItem(props) {
     []
   );
   const gridItemOnDragStop = useCallback((e, { node }) => {
-    if (!onDragStop)
-      return;
+    if (!onDragStop) return;
     if (!refState.current.dragging) {
       return;
     }
@@ -271,8 +267,7 @@ function GridItem(props) {
     onResizeHandler(e, callbackData, "onResizeStart");
   }, []);
   const localFreeMoveOnClick = useCallback(() => {
-    if (!onFreeMoveClick)
-      return;
+    if (!onFreeMoveClick) return;
     onFreeMoveClick(i);
   }, []);
   const mixinResizable = useCallback(
@@ -367,10 +362,13 @@ function GridItem(props) {
     [gridLayoutClasses.invisible]: !visible,
     [gridLayoutClasses.cssTransforms]: useCSSTransforms,
     "react-draggable": isDraggable
+    //Requerido para el componente Draggable
+    // dropping: Boolean(droppingPosition),
   });
   const styleFinal = {
     ...style,
     ...createStyle(pos)
+    //TODO: Delegar el estilo en el ItemRender
   };
   const memoLayouItemRender = useMemo(() => {
     return /* @__PURE__ */ jsx(ComponentItemRender, { type, i });

package/components/GridLayout/subcomponents/Responsive/{index.24857a52.js → index-B7v5X9un.js}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, o as DEFAULT_COLAPSED_HEIGHT, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, i as DEFAULT_ROW_HEIGHT, z as noop, A as isEqualLayouts, G as GridLayout } from "../../index.dd291886.js";
+import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, o as DEFAULT_COLAPSED_HEIGHT, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, i as DEFAULT_ROW_HEIGHT, z as isEqualLayouts, G as GridLayout, A as noop } from "../../index-DUfp2sP_.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
 import { deepEqual } from "fast-equals";
@@ -8,8 +8,7 @@ function getBreakpointFromWidth(breakpoints, width) {
   let matching = sorted[0];
   for (let i = 1, len = sorted.length; i < len; i++) {
     const breakpointName = sorted[i];
-    if (width > breakpoints[breakpointName])
-      matching = breakpointName;
+    if (width > breakpoints[breakpointName]) matching = breakpointName;
   }
   return matching;
 }
@@ -76,13 +75,11 @@ function sortBreakpoints(breakpoints) {
   });
 }
 function getIndentationValue(param, breakpoint) {
-  if (!param)
-    return [0, 0];
+  if (!param) return [0, 0];
   return Array.isArray(param) ? param : param[breakpoint];
 }
 function addLayoutItemToBreakPointIfNoExists(layouts, breakpoint, layoutItem, cols, margin, containerPadding, rowHeight, containerHeight, currentBreakpoint) {
-  if (!layouts[breakpoint])
-    return;
+  if (!layouts[breakpoint]) return;
   if (layouts[breakpoint].findIndex((l) => l.i === layoutItem.i) === -1) {
     const l = cloneLayoutItem(layoutItem);
     const rowHeightBreakpoint = typeof rowHeight === "number" ? rowHeight : rowHeight[breakpoint];
@@ -207,6 +204,7 @@ function Responsive(props) {
     containerPadding = DEFAULT_CONTAINER_PADDING,
     containerMargin = DEFAULT_MARGIN,
     layouts = {},
+    // onBreakpointChange = noop,
     onLayoutChange = noop,
     onContainerChange = noop,
     colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
@@ -309,6 +307,8 @@ function Responsive(props) {
       onContainerChange({
         containerWidth,
         containerHeight,
+        // containerMargin: newContainerMargin,
+        // containerPadding: newContainerPadding,
         breakpoint: newBreakpoint,
         cols: newCols
       });

package/components/GridLayout/subcomponents/SizeProvider/{index.2f762118.js → index-BsKaLKRl.js}

@@ -3,7 +3,7 @@ import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import clsx from "clsx";
 import { throttle } from "lodash";
 import { useResizeObserver } from "@m4l/graphics";
-import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index.dd291886.js";
+import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index-DUfp2sP_.js";
 function withSizeProvider(ComposedComponent) {
   return (props) => {
     const { measureBeforeMount = true, ...rest } = props;
@@ -20,6 +20,7 @@ function withSizeProvider(ComposedComponent) {
           setCurrentState((prev) => ({
             ...prev,
             width: node.clientWidth,
+            //
             height: node.offsetHeight
           }));
         }
@@ -28,7 +29,9 @@ function withSizeProvider(ComposedComponent) {
     );
     const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
       leading: false,
+      // No enviar el primer evento de resizing
       trailing: true
+      // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad de resizing
     });
     const onResize = useCallback((_target) => {
       throttleResize();
@@ -49,14 +52,17 @@ function withSizeProvider(ComposedComponent) {
         }
       );
     }
-    return /* @__PURE__ */ jsx(
-      ComposedComponent,
-      {
-        innerRef: elementRef,
-        containerWidth: currentState.width,
-        containerHeight: currentState.height,
-        ...rest
-      }
+    return (
+      //@ts-expect-error
+      /* @__PURE__ */ jsx(
+        ComposedComponent,
+        {
+          innerRef: elementRef,
+          containerWidth: currentState.width,
+          containerHeight: currentState.height,
+          ...rest
+        }
+      )
     );
   };
 }

package/components/HelperText/{index.6818980e.js → index-DVV5Jfc8.js}

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { H as HelperTextRoot } from "../../styles/index.db9e7ddb.js";
+import { H as HelperTextRoot } from "../../styles/index-C-MsxWtr.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as Typography } from "../mui_extended/Typography/index.8c0801e4.js";
+import { T as Typography } from "../mui_extended/Typography/index-W88rbpsJ.js";
 const componentName = "M4LHelperText";
 const errorLabelClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root",
+  /* states or variants of elements */
   "variantInfo",
   "variantSuccess",
   "variantWarning",
@@ -35,7 +37,12 @@ const HelperText = (props) => {
     variant
   };
   const classes = useUtilityClasses(ownerSate);
-  return /* @__PURE__ */ jsx(HelperTextRoot, { className: classes.root, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth, skeletongHeight, children: message }) });
+  return (
+    /* ErrorLabelRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides
+        que provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros
+        componentes de la plataforna web. */
+    /* @__PURE__ */ jsx(HelperTextRoot, { className: classes.root, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth, skeletongHeight, children: message }) })
+  );
 };
 export {
   HelperText as H,

package/components/Icon/{index.c06685f4.js → index-CueLDD9j.js}

@@ -1,20 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { Marker } from "react-leaflet";
 import L__default from "leaflet";
-import { m as mapClasses, L as LABEL_BK_COLOR_DEFAULT, a as LABEL_COLOR_DEFAULT } from "../maps/components/Map/index.8c947175.js";
+import { m as mapClasses, L as LABEL_BK_COLOR_DEFAULT, a as LABEL_COLOR_DEFAULT } from "../maps/components/Map/index-BRrVIyA-.js";
 import clsx from "clsx";
 import { useEnvironment } from "@m4l/core";
-import { I as IconRoot, e as DivIcon, f as ArrowIconRoot } from "../../styles/index.db9e7ddb.js";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.990e8667.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { I as IconRoot, e as DivIcon, f as ArrowIconRoot } from "../../styles/index-C-MsxWtr.js";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index-Ddxe1VvL.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const componentName = "M4LIcon";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "icon",
   "variantSkeleton",
+  /* states or variants of elements */
   "sizeExtraSmall",
   "sizeSmall",
   "sizeMedium",
@@ -102,6 +104,7 @@ const FeatureDivIconLabel = (props) => {
   return L__default.divIcon({
     className: clsx(mapClasses.markerLayerRoot, ""),
     iconSize: [iconWidth, iconHeight],
+    // iconAnchor: [-width, height/2],
     html
   });
 };
@@ -112,8 +115,10 @@ const MarkerIconLabel = (props) => {
     iconSrc,
     iconRotate,
     iconScale: scale,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className,
     label,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     markerColor,
     labelBkColor: bkColor,
     labelColor: color,