@m4l/components 7.2.2 → 8.0.0

package/components/mui_extended/Typography/typography.styles.js

@@ -0,0 +1,332 @@
+const typographyStyles = {
+  /**
+   * Slot: root
+   * Componente extendido de MUI Typography, que permite personalizar los estilos del componente.
+   */
+  root: ({ ownerState, theme }) => ({
+    "&.M4lclassCssSpecificity": {
+      // Estilos generales 🌐
+      // skeleton spacing when multiple rows 🦴
+      fontFamily: theme.typography.fontFamily,
+      ...ownerState.typographyskeletonRows && ownerState.typographyskeletonRows > 1 && {
+        display: "flex",
+        flexDirection: "column"
+      },
+      // Override de estilos generales de MUI 🚫
+      // color text.primary 🎨
+      ...ownerState.typographyColor === "text.primary" && {
+        color: theme.vars.palette.text.primary
+      },
+      // color text.secondary 🎨
+      ...ownerState.typographyColor === "text.secondary" && {
+        color: theme.vars.palette.text.secondary
+      },
+      // color text.disabled 🎨
+      ...ownerState.typographyColor === "text.disabled" && {
+        color: theme.vars.palette.text.disabled
+      },
+      // Dispositivo »mobile 📱
+      ...theme.generalSettings.isMobile === true && {
+        // mobile - »small
+        ...ownerState.typographySize === "small" && {
+          // mobile - »small - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.mobile.small.h1.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h1.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h1.letterSpacing
+          },
+          // mobile - »small - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.mobile.small.h2.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h2.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h2.letterSpacing
+          },
+          // mobile - »small - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.mobile.small.h3.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h3.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h3.letterSpacing
+          },
+          // mobile - »small - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.mobile.small.h5.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.h5.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.h5.letterSpacing
+          },
+          // mobile - »small - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.mobile.small.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.subtitle.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.subtitle.letterSpacing
+          },
+          // mobile - »small - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.mobile.small.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.subtitleDens.letterSpacing
+          },
+          // mobile - »small - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.mobile.small.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.paragraph.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.paragraph.letterSpacing
+          },
+          // mobile - »small - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.mobile.small.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.paragraphDens.letterSpacing
+          },
+          // mobile - »small - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.small.body.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.body.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.body.letterSpacing
+          },
+          // mobile - »small - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.small.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.small.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.small.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.small.bodyDens.letterSpacing
+          }
+        },
+        // mobile - »medium - 👑 Predeterminado
+        ...ownerState.typographySize === "medium" && {
+          // mobile - medium - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h1.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h1.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h1.letterSpacing
+          },
+          // mobile - medium - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h2.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h2.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h2.letterSpacing
+          },
+          // mobile - medium - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h3.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h3.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h3.letterSpacing
+          },
+          // mobile - medium - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.mobile.medium.h5.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.h5.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.h5.letterSpacing
+          },
+          // mobile - medium - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.mobile.medium.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.subtitle.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.subtitle.letterSpacing
+          },
+          // mobile - medium - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.mobile.medium.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.subtitleDens.letterSpacing
+          },
+          // mobile - medium - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.mobile.medium.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.paragraph.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.paragraph.letterSpacing
+          },
+          // mobile - medium - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.mobile.medium.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.paragraphDens.letterSpacing
+          },
+          // mobile - medium - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.medium.body.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.body.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.body.letterSpacing
+          },
+          // mobile - medium - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.mobile.medium.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.mobile.medium.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.mobile.medium.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.mobile.medium.bodyDens.letterSpacing
+          }
+        }
+      },
+      // Dispositivo »desktop 💻
+      ...theme.generalSettings.isMobile === false && {
+        // desktop - »small
+        ...ownerState.typographySize === "small" && {
+          // desktop - »small - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.desktop.small.h1.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h1.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h1.letterSpacing
+          },
+          // desktop - »small - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.desktop.small.h2.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h2.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h2.letterSpacing
+          },
+          // desktop - »small - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.desktop.small.h3.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h3.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h3.letterSpacing
+          },
+          // desktop - »small - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.desktop.small.h5.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.h5.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.h5.letterSpacing
+          },
+          // desktop - »small - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.desktop.small.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.subtitle.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.subtitle.letterSpacing
+          },
+          // desktop - »small - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.subtitleDens.letterSpacing
+          },
+          // desktop - »small - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.desktop.small.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.paragraph.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.paragraph.letterSpacing
+          },
+          // desktop - »small - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.paragraphDens.letterSpacing
+          },
+          // desktop - »small - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.desktop.small.body.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.body.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.body.letterSpacing
+          },
+          // desktop - »small - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "bodyDens" && {
+            fontSize: theme.vars.size.typography.desktop.small.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.small.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.small.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.small.bodyDens.letterSpacing
+          }
+        },
+        // desktop - »medium - 👑 Predeterminado
+        ...ownerState.typographySize === "medium" && {
+          // desktop - medium - »variant (h1) 💅
+          ...ownerState.typographyVariant === "h1" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h1.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h1.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h1.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h1.letterSpacing
+          },
+          // desktop - medium - »variant (h2) 💅
+          ...ownerState.typographyVariant === "h2" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h2.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h2.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h2.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h2.letterSpacing
+          },
+          // desktop - medium - »variant (h3) 💅
+          ...ownerState.typographyVariant === "h3" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h3.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h3.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h3.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h3.letterSpacing
+          },
+          // desktop - medium - »variant(h5) 💅
+          ...ownerState.typographyVariant === "h5" && {
+            fontSize: theme.vars.size.typography.desktop.medium.h5.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.h5.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.h5.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.h5.letterSpacing
+          },
+          // desktop - medium - »variant (subtitle) 💅
+          ...ownerState.typographyVariant === "subtitle" && {
+            fontSize: theme.vars.size.typography.desktop.medium.subtitle.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.subtitle.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.subtitle.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.subtitle.letterSpacing
+          },
+          // desktop - medium - »variant (subtitleDens) 💅
+          ...ownerState.typographyVariant === "subtitleDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.subtitleDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.subtitleDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.subtitleDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.subtitleDens.letterSpacing
+          },
+          // desktop - medium - »variant (paragraph) 💅
+          ...ownerState.typographyVariant === "paragraph" && {
+            fontSize: theme.vars.size.typography.desktop.medium.paragraph.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.paragraph.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.paragraph.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.paragraph.letterSpacing
+          },
+          // desktop - medium - »variant (paragraphDens) 💅
+          ...ownerState.typographyVariant === "paragraphDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.paragraphDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.paragraphDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.paragraphDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.paragraphDens.letterSpacing
+          },
+          // desktop - medium - »variant (body) 💅
+          ...ownerState.typographyVariant === "body" && {
+            fontSize: theme.vars.size.typography.desktop.medium.body.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.body.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.body.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.body.letterSpacing
+          },
+          // desktop - medium - »variant (bodyDens) 💅
+          ...ownerState.typographyVariant === "bodyDens" && {
+            fontSize: theme.vars.size.typography.desktop.medium.bodyDens.fontSize,
+            fontWeight: theme.vars.size.typography.desktop.medium.bodyDens.weight,
+            lineHeight: theme.vars.size.typography.desktop.medium.bodyDens.lineHeight,
+            letterSpacing: theme.vars.size.typography.desktop.medium.bodyDens.letterSpacing
+          }
+        }
+      }
+    }
+  }),
+  skeleton: {}
+};
+export {
+  typographyStyles as t
+};

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.d.ts

@@ -3,9 +3,14 @@ import { PopupsStateWithActions, InitialPopupsStoreProps } from './types';
  * Crea el Store, por defecto inicia en estado 'init'
  * @param initProps propiedades iniciales del store
  * @returns
+ * @createdAt 2024-10-15 17:33:28 - automatic
  */
 /**
  * Crea el store de los popups
+ * @author Juan Escobar - automatic
+ * @updatedAt 2024-10-15 18:01:45 - automatic
+ * @updatedUser Juan Escobar - automatic
+ * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export declare const createPopupsStore: (initProps: InitialPopupsStoreProps) => Omit<Omit<import('zustand').StoreApi<PopupsStateWithActions>, "setState"> & {
     setState<A extends string | {

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -1,7 +1,7 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import cloneDeep from "lodash.clonedeep";
+import cloneDeep from "lodash-es/cloneDeep";
 const createPopupsStore = (initProps) => {
   const startProps = {
     currentZindex: initProps.baseZindex,
@@ -17,6 +17,42 @@ const createPopupsStore = (initProps) => {
         popupsActions: {
           /**
            * TODO: Documentar
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @createdAt 2024-10-15 17:33:28 - automatic
            */
           init: (initialPopups) => {
             set((state) => {

package/contexts/RealTimeContext/store.d.ts

@@ -3,9 +3,14 @@ import { RealTimeStateWithActions, InitialRealTimeStoreProps } from './types';
  * Crea el Store, por defecto inicia en estado 'init'
  * @param initProps propiedades iniciales del store
  * @returns
+ * @createdAt 2024-10-15 17:33:28 - automatic
  */
 /**
  * TODO: Documentar
+ * @author Juan Escobar - automatic
+ * @updatedAt 2024-10-15 18:01:45 - automatic
+ * @updatedUser Juan Escobar - automatic
+ * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export declare function createRealTimeStore(initProps: InitialRealTimeStoreProps): Omit<Omit<import('zustand').StoreApi<RealTimeStateWithActions>, "setState"> & {
     setState<A extends string | {

package/contexts/RealTimeContext/store.js

@@ -1,8 +1,8 @@
 import { createStore } from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import cloneDeep from "lodash.clonedeep";
-import merge from "lodash.merge";
+import cloneDeep from "lodash-es/cloneDeep";
+import merge from "lodash-es/merge";
 function createRealTimeStore(initProps) {
   const startProps = {
     status: "init",
@@ -15,6 +15,18 @@ function createRealTimeStore(initProps) {
         realTimeActions: {
           /**
            * TODO: Documentar
+           * @updatedUser Juan Escobar - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @createdAt 2024-10-15 18:01:45 - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @author Juan Escobar - automatic
+           * @updatedAt 2024-10-15 18:01:45 - automatic
+           * @updatedUser Juan Escobar - automatic
+           * @createdAt 2024-10-15 17:33:28 - automatic
            */
           init: () => {
             set((state) => {

package/hooks/useSizeContainer/index.d.ts

@@ -4,5 +4,9 @@ import { ContainerSize } from '../../utils/types';
  * TODO: Usar throttle para evitar llamadas innecesarias
  * @param containerElement
  * @returns un objeto con el ancho y alto del contenedor
+ * @author Juan Escobar - automatic
+ * @updatedAt 2024-10-15 17:33:28 - automatic
+ * @updatedUser Juan Escobar - automatic
+ * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export declare function useSizeContainer(containerElement?: HTMLElement | undefined | null): ContainerSize | undefined;

package/hooks/useSizeContainer/index.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { T as THROTTLE_RESIZE_TIMEOUT } from "./contants.js";
-import throttle from "lodash.throttle";
+import throttle from "lodash-es/throttle";
 function useSizeContainer(containerElement) {
   const [currentState, setCurrentState] = useState();
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "7.2.2",
+  "version": "8.0.0",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -24,6 +24,7 @@
     "leaflet": "^1.9.4",
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet.markercluster": "^1.5.3",
+    "lodash-es": "^4.0.0",
     "nprogress": "^0.2.0",
     "qrcode.react": "^3.1.0",
     "qs": "^6.0.0",
@@ -36,7 +37,7 @@
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.2",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.33.1",
     "react-intersection-observer": "^9.4.0",
     "react-leaflet": "^4.2.1",
@@ -51,40 +52,20 @@
     "zustand": "4.3.6"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.10",
+    "@m4l/core": "^2.0.12",
     "@m4l/graphics": "^7.0.2",
     "@m4l/styles": "^7.0.1",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "^5.15.19",
-    "@mui/x-date-pickers": "^6.11.1",
-    "lodash.clonedeep": "^4.0.0",
-    "lodash.debounce": "^4.0.0",
-    "lodash.isstring": "^4.0.0",
-    "lodash.merge": "^4.0.0",
-    "lodash.throttle": "^4.0.0"
-  },
-  "peerDependenciesMeta": {
-    "lodash.clonedeep": {
-      "optional": true
-    },
-    "lodash.debounce": {
-      "optional": true
-    },
-    "lodash.isstring": {
-      "optional": true
-    },
-    "lodash.merge": {
-      "optional": true
-    },
-    "lodash.throttle": {
-      "optional": true
-    }
+    "@mui/x-date-pickers": "^6.11.1"
   },
   "resolutions": {
     "react": "^18.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react-dom": "^18.0.0",
+    "storybook": "^8.3.4",
+    "attr-accept": "2.2.2",
     "@vitejs/plugin-react": "^4.0.0"
   },
   "overrides": {
@@ -93,7 +74,8 @@
     "react": "^18.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "attr-accept": "2.2.2"
   },
   "files": [
     "*"

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Circular/skeleton.defaultCircular.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante circular se utiliza para mostrar un marcador de posición redondo,
+ * ideal para elementos con formas circulares, como avatares, iconos o imágenes de perfil, mientras se cargan los datos reales.
+ * Esta variante ofrece una forma circular perfecta que se adapta a componentes que tienen proporciones iguales de altura y ancho.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Rectangular/skeleton.defaultRectangular.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante rectangular se utiliza para mostrar un marcador de posición con forma de rectángulo,
+ * ideal para simular la carga de elementos como contenedores, tarjetas, imágenes o cualquier contenido con proporciones rectangulares.
+ * Es una de las variantes más comunes para representar áreas de contenido mientras se carga la información.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Rounded/skeleton.defaultRounded.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton en Material UI se utiliza para mostrar un marcador de posición mientras se
+ * cargan los datos reales. Es ideal para mejorar la percepción de rendimiento al proporcionar una interfaz
+ * visible y estructurada durante la carga de contenido. La variante rounded agrega un borde suavemente redondeado al esqueleto,
+ * lo que lo hace más acorde con las interfaces modernas y suaves.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Skeleton/Colors/Default/Variants/Text/skeleton.defaultText.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../../../../../../../src/components/mui_extended/Skeleton';
+/**
+ *
+ */
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+/**
+ * El componente Skeleton de Material UI en su variante text se utiliza para simular la carga de texto,
+ * imitando líneas de texto o párrafos mientras los datos reales se están recuperando.
+ * Esta variante es ideal para mantener la estructura visual de bloques de texto, como encabezados, párrafos o listas,
+ * durante el tiempo de carga.
+ */
+export declare const Base: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/body/Estados/typography.body.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante body en typography establece estilos predeterminados para los textos del cuerpo,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante body.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante body.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante body.
+ */
+export declare const skeletonRows: Story;

package/storybook/components/extended/mui/Typography/PaletteColor/text.primary/Variantes/bodyDens/Estados/typography.bodyDens.estados.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../../../../../../../../src/components/mui_extended/Typography';
+/**
+ * La variante bodyDens en typography establece estilos predeterminados para los textos del cuerpo densos,
+ * incluyendo el tamaño de fuente, peso, espaciado de letra y márgenes, optimizados para resaltar títulos
+ * importantes en la interfaz. Es personalizable según los requisitos del tema para adaptarse a diferentes
+ * diseños y dispositivos.
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Estado enabled del componente Typography con la variante bodyDens.
+ */
+export declare const Base: Story;
+/**
+ * Estado skeleton de una sola linea del componente Typography con la variante bodyDens.
+ */
+export declare const Skeleton: Story;
+/**
+ * Estado skeleton de varias líneas del componente Typography con la variante bodyDens.
+ */
+export declare const skeletonRows: Story;