@m4l/components 3.0.0 → 3.0.2

package/components/SideBar/{index.990e8667.js → index-Ddxe1VvL.js}

@@ -1,23 +1,24 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { O as NavItemMainRoot, Q as NavSubItemContentRoot, T as NavListSubItemRoot, U as ContainerListSubItem, V as ContentGroupsRoot, X as WrapperGroup, Y as WrapperGroupTitle, Z as CollapseButtonRoot, _ as WrapperContentMobile, $ as SideBarRoot } from "../../styles/index.db9e7ddb.js";
+import { O as NavItemMainRoot, Q as NavSubItemContentRoot, T as NavListSubItemRoot, U as ContainerListSubItem, V as ContentGroupsRoot, X as WrapperGroup, Y as WrapperGroupTitle, Z as CollapseButtonRoot, _ as WrapperContentMobile, $ as SideBarRoot } from "../../styles/index-C-MsxWtr.js";
 import { createContext, useState, useContext, useEffect } from "react";
 import { generateUtilityClasses, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.f77cc2ab.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import { g as getComponentUtilityClass } from "../../utils/index-DiMrtgIu.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.c06685f4.js";
-import { T as Typography } from "../mui_extended/Typography/index.8c0801e4.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index-CueLDD9j.js";
+import { T as Typography } from "../mui_extended/Typography/index-W88rbpsJ.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
-import { I as Image } from "../Image/index.ae542f70.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.7b6c1ee3.js";
+import { I as Image } from "../Image/index-By5vsRzf.js";
+import { I as IconButton } from "../mui_extended/IconButton/index-OMq0pPK0.js";
 import { useResponsive } from "@m4l/styles";
 const componentName = "M4LSideBar";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root",
     "containerSideBarLogo",
     "contentDesktop",
@@ -54,6 +55,7 @@ generateUtilityClasses(
     "drawer",
     "popover",
     "wrapperLogoFooter",
+    /* states or variants of elements */
     "collapsed",
     "visible",
     "subItemActive",
@@ -62,6 +64,12 @@ generateUtilityClasses(
     "variantComercial",
     "overlapping"
   ]
+  /*  returna un objeto igual a:
+      {
+          root: 'M4LSideBar-root',
+  
+      } 
+      */
 );
 const getSideBarClassesByState = (ownerState) => {
   const slots = {
@@ -122,6 +130,13 @@ const getSideBarClassesByState = (ownerState) => {
   const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
   return {
     ...composedClasses
+    /* retorna un objeto para una variante de tipo = 'password':
+        {
+            input : "M4LRHFTextField-input"
+            root: "M4LRHFTextField-root M4LRHFTextField-variantPassword"
+            skeleton: "M4LRHFTextField-skeleton"
+        };
+        */
   };
 };
 const initialState = {
@@ -141,6 +156,7 @@ const initialState = {
   },
   isItemActive: () => false,
   expandedWidth: "",
+  // Obtener las clases iniciales para la barra lateral
   classes: getSideBarClassesByState({ collapsed: false, visible: true }),
   companyName: ""
 };
@@ -165,31 +181,33 @@ const SideBarProvider = (props) => {
     classes,
     companyName
   } = value;
-  return /* @__PURE__ */ jsx(
-    SideBarContext.Provider,
-    {
-      value: {
-        collapsed,
-        visible,
-        onToggleCollapse,
-        onToggleVisible,
-        menuData,
-        onClick,
-        companyLogoNormalUrl,
-        companyLogoSmallUrl,
-        isItemActive,
-        expandedWidth,
-        classes,
-        companyName,
-        onToggleOverlay,
-        overlay
-      },
-      children
-    }
+  return (
+    // Proporcionar el contexto con las propiedades desestructuradas
+    /* @__PURE__ */ jsx(
+      SideBarContext.Provider,
+      {
+        value: {
+          collapsed,
+          visible,
+          onToggleCollapse,
+          onToggleVisible,
+          menuData,
+          onClick,
+          companyLogoNormalUrl,
+          companyLogoSmallUrl,
+          isItemActive,
+          expandedWidth,
+          classes,
+          companyName,
+          onToggleOverlay,
+          overlay
+        },
+        children
+      }
+    )
   );
 };
 const useSideBar = () => useContext(SideBarContext);
-const useSideBar$1 = useSideBar;
 const SIDEBAR_PREFIX = "M4LSideBar";
 const getNameDataTestId = (KEY) => {
   return `${SIDEBAR_PREFIX}-${KEY}`;
@@ -198,7 +216,7 @@ const NavItemMainContent = (props) => {
   const { item, onClick, handlerOpen, changeVisible, open } = props;
   const { title, icon_url: icon, children } = item;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useSideBar$1();
+  const { classes } = useSideBar();
   const isDesktop = useResponsiveDesktop();
   const handlerClick = (event) => {
     onClick && onClick(item);
@@ -231,7 +249,7 @@ const NavItemMainContent = (props) => {
 function NavItemMain(props) {
   const { item, setOpen, open } = props;
   const { children } = item;
-  const { onClick, isItemActive, onToggleVisible, classes } = useSideBar$1();
+  const { onClick, isItemActive, onToggleVisible, classes } = useSideBar();
   const active = isItemActive(item);
   if (children) {
     return /* @__PURE__ */ jsx(
@@ -267,7 +285,7 @@ const NavSubItemContent = (props) => {
   const { item, onClick, closePopover = () => {
   }, setOpenSub, openSub } = props;
   const { title, icon_url } = item;
-  const { isItemActive, onToggleVisible, classes } = useSideBar$1();
+  const { isItemActive, onToggleVisible, classes } = useSideBar();
   const active = isItemActive(item);
   const isDesktop = useResponsiveDesktop();
   const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
@@ -308,7 +326,7 @@ const NavSubItemContent = (props) => {
 };
 function NavSubItem(props) {
   const { item, closePopover, setOpenSub, openSub } = props;
-  const { onClick } = useSideBar$1();
+  const { onClick } = useSideBar();
   return /* @__PURE__ */ jsx(
     NavSubItemContent,
     {
@@ -325,7 +343,7 @@ function NavListSubItem(props) {
   } } = props;
   const { setAncestorActive } = useBase();
   const [internalItemActive, setInternalItemActive] = useState(false);
-  const { classes, isItemActive } = useSideBar$1();
+  const { classes, isItemActive } = useSideBar();
   const active = isItemActive(list);
   const [openSub, setOpenSub] = useState(false);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
@@ -386,7 +404,7 @@ function NavListSubItem(props) {
 }
 function ItemListMain(props) {
   const { list } = props;
-  const { isItemActive, classes } = useSideBar$1();
+  const { isItemActive, classes } = useSideBar();
   const location = useLocation();
   const [internalItemActive, setInternalItemActive] = useState(false);
   const [active, setActive] = useState(false);
@@ -465,7 +483,7 @@ function ItemListMain(props) {
   );
 }
 const ContentGroups = () => {
-  const { menuData, classes } = useSideBar$1();
+  const { menuData, classes } = useSideBar();
   const [itemMainActive, setItemMainActive] = useState(-1);
   if (menuData && menuData.length > 0) {
     return /* @__PURE__ */ jsxs(
@@ -509,7 +527,7 @@ const ContentGroups = () => {
   );
 };
 function FooterSidebar(_props) {
-  const { classes, companyLogoNormalUrl } = useSideBar$1();
+  const { classes, companyLogoNormalUrl } = useSideBar();
   return /* @__PURE__ */ jsx(
     CollapseButtonRoot,
     {
@@ -531,7 +549,7 @@ function FooterSidebar(_props) {
 const MENU_COLLAPSED_SIZE = "14px";
 const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
 const ContentComponent = () => {
-  const { collapsed, onToggleCollapse, classes, onToggleOverlay, overlay } = useSideBar$1();
+  const { collapsed, onToggleCollapse, classes, onToggleOverlay, overlay } = useSideBar();
   const handlerOnMouseEnter = () => {
     if (collapsed) {
       onToggleOverlay(true);
@@ -592,7 +610,7 @@ const ContentComponent = () => {
   );
 };
 const ContentDesktop = () => {
-  const { classes, collapsed, expandedWidth, overlay } = useSideBar$1();
+  const { classes, collapsed, expandedWidth, overlay } = useSideBar();
   const areaExpandMenuSize = collapsed ? !overlay ? MENU_COLLAPSED_SIZE : expandedWidth : expandedWidth;
   return /* @__PURE__ */ jsx("div", { className: classes.areaExpandMenu, style: { width: areaExpandMenuSize }, children: /* @__PURE__ */ jsx(ContentComponent, {}) });
 };
@@ -609,7 +627,7 @@ const ContentMobile = () => {
     collapsed,
     classes,
     companyName
-  } = useSideBar$1();
+  } = useSideBar();
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Drawer,
@@ -690,43 +708,51 @@ const SideBar = (props) => {
     variantStyle
   };
   const classes = getSideBarClassesByState(ownerState);
-  return /* @__PURE__ */ jsx(
-    SideBarRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        SideBarProvider,
-        {
-          value: {
-            collapsed,
-            visible,
-            onToggleCollapse,
-            onToggleVisible,
-            menuData,
-            onClick,
-            companyLogoNormalUrl,
-            companyLogoSmallUrl,
-            isItemActive,
-            expandedWidth,
-            classes,
-            companyName
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classes.wrapperSideBar,
-              style: { width: collapsed ? MENU_COLLAPSED_SIZE : expandedWidth },
-              children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
-            }
-          )
-        }
-      )
-    }
+  return (
+    /**
+     * Componente SideBarRoot.
+     * Este componente representa la raíz de la barra lateral.
+     *
+     */
+    /* @__PURE__ */ jsx(
+      SideBarRoot,
+      {
+        className: classes.root,
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+        children: /* @__PURE__ */ jsx(
+          SideBarProvider,
+          {
+            value: {
+              // Propiedades y funciones proporcionadas a través del contexto
+              collapsed,
+              visible,
+              onToggleCollapse,
+              onToggleVisible,
+              menuData,
+              onClick,
+              companyLogoNormalUrl,
+              companyLogoSmallUrl,
+              isItemActive,
+              expandedWidth,
+              classes,
+              companyName
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.wrapperSideBar,
+                style: { width: collapsed ? MENU_COLLAPSED_SIZE : expandedWidth },
+                children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
+              }
+            )
+          }
+        )
+      }
+    )
   );
 };
 export {
   SideBar as S,
   getNameDataTestId as g,
-  useSideBar$1 as u
+  useSideBar as u
 };

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavListSub/subcomponents/NavItemSub/subcomponents/NavItemSubContent/styles.d.ts

@@ -2,5 +2,5 @@
 import { DotIconProps } from './types';
 export declare const NavSubItemContentRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "disabled" | "children" | "tabIndex" | "className" | "action" | "alignItems" | "divider" | "dense" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "style" | "disabled" | "children" | "tabIndex" | "className" | "action" | "alignItems" | "divider" | "dense" | "sx" | "classes" | "autoFocus" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const DotIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & DotIconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/components/SplitLayout/{index.b247de95.js → index-CwmZT1x6.js}

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a0 as SplitLayoutRoot, a1 as SplitMaster, a2 as SplitDetail } from "../../styles/index.db9e7ddb.js";
+import { a0 as SplitLayoutRoot, a1 as SplitMaster, a2 as SplitDetail } from "../../styles/index-C-MsxWtr.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { S as SplitterLayout } from "../../react-splitter-layout.8b1655c8.js";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
+import { S as SplitterLayout } from "../../react-splitter-layout-C-JTsNGs.js";
 const componentName = "M4LSplitLayout";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "firstPart",
   "secondPart",
+  /* states or variants of elements */
   "stateVertical",
   "stateHorizontal"
 ]);

package/components/ToastContainer/{index.c1657bde.js → index-DN3ZHpBT.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { ToastContainer as ToastContainer$1, toast } from "react-toastify";
-import { a as getPropDataTestId } from "../../test/getNameDataTestId.0faeade8.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId-BaBTWhBr.js";
 import "react-toastify/dist/ReactToastify.min.css";
 import { useState } from "react";
 import { useEnvironment } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { a3 as toastStyles } from "../../styles/index.db9e7ddb.js";
-import { I as Icon } from "../Icon/index.c06685f4.js";
+import { a3 as toastStyles } from "../../styles/index-C-MsxWtr.js";
+import { I as Icon } from "../Icon/index-CueLDD9j.js";
 var ToastContainerSlots = /* @__PURE__ */ ((ToastContainerSlots2) => {
   ToastContainerSlots2["root"] = "root";
   ToastContainerSlots2["messageRoot"] = "messageRoot";

package/components/animate/LoadingScreen/{index.36a63311.js → index-CcjW-mkl.js}

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { alpha } from "@mui/material/styles";
 import { Box } from "@mui/material";
-import { a4 as RootStyle } from "../../../styles/index.db9e7ddb.js";
+import { a4 as RootStyle } from "../../../styles/index-C-MsxWtr.js";
 function LoadingScreen(props) {
   const { isDashboard, variant = "fullpage", ...other } = props;
   return /* @__PURE__ */ jsx(Fragment, { children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, { variant, ...other, children: [

package/components/animate/MotionContainer/{index.3032bd8f.js → index-eartnWyO.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { Box } from "@mui/material";
-import { v as varContainer } from "../variants/container.11f82b76.js";
+import { v as varContainer } from "../variants/container-Dmpr6tg5.js";
 function MotionContainer({ animate, action = false, children, ...other }) {
   if (action) {
     return /* @__PURE__ */ jsx(

package/components/animate/MotionLazyContainer/{index.d2902a6c.js → index-Be8osTiG.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { LazyMotion } from "framer-motion";
-const loadFeatures = () => import("../features.0fbf41e1.js").then((res) => res.default);
+const loadFeatures = () => import("../features-BbnE33u3.js").then((res) => res.default);
 function MotionLazyContainer({ children }) {
   return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children });
 }

package/components/animate/PropagateLoader/{index.a9da8d00.js → index-Bkq8V2SN.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { P as PropagateLoader$1 } from "../../../react-spinners.342a6578.js";
+import { P as PropagateLoader$1 } from "../../../react-spinners-TpKN9lZg.js";
 const WrapperPropageteLoader = styled("div")(({ theme }) => ({
   right: 0,
   bottom: 0,

package/components/animate/{index.ceb7669a.js → index-DsolrzTC.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef, useRef } from "react";
 import { IconButton, Box } from "@mui/material";
-import { a5 as AnimatedScrollRoot } from "../../styles/index.db9e7ddb.js";
+import { a5 as AnimatedScrollRoot } from "../../styles/index-C-MsxWtr.js";
 const varSmall = {
   hover: { scale: 1.1 },
   tap: { scale: 0.95 }

package/components/animate/variants/{bounce.784aaaaa.js → bounce-DanQqHAX.js}

@@ -1,10 +1,11 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.js";
+import { v as varTranEnter, a as varTranExit } from "./transition-B9W5SWTa.js";
 const varBounce = (props) => {
   const durationIn = props?.durationIn;
   const durationOut = props?.durationOut;
   const easeIn = props?.easeIn;
   const easeOut = props?.easeOut;
   return {
+    // IN
     in: {
       initial: {},
       animate: {
@@ -77,6 +78,7 @@ const varBounce = (props) => {
         transition: varTranExit({ durationOut, easeOut })
       }
     },
+    // OUT
     out: {
       animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }
     },

package/components/animate/variants/{fade.b561c0fc.js → fade-CAOJNn06.js}

@@ -1,4 +1,4 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.js";
+import { v as varTranEnter, a as varTranExit } from "./transition-B9W5SWTa.js";
 const varFade = (props) => {
   const distance = props?.distance || 120;
   const durationIn = props?.durationIn;
@@ -6,6 +6,7 @@ const varFade = (props) => {
   const easeIn = props?.easeIn;
   const easeOut = props?.easeOut;
   return {
+    // IN
     in: {
       initial: { opacity: 0 },
       animate: { opacity: 1, transition: varTranEnter },
@@ -31,6 +32,7 @@ const varFade = (props) => {
       animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
       exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
     },
+    // OUT
     out: {
       initial: { opacity: 1 },
       animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },

package/components/areas/components/AreasAdmin/{index.b232384d.js → index-Y6S0Q7TN.js}

@@ -1,35 +1,36 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index.5a57ab76.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index-D6DaWBIP.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import clsx from "clsx";
 import { generateUtilityClasses, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.f77cc2ab.js";
-import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
-import { I as ICONS } from "../../icons.01fa3bcc.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index.db9e7ddb.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
+import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants-rqODZNZe.js";
+import { I as ICONS } from "../../icons-CwFr-alN.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
+import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index-C-MsxWtr.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.11d777bb.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.f9d41b99.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.80b98b98.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.f674be30.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.e67885bc.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.e58eb0c4.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.7b6c1ee3.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.a7da93f1.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.8c0801e4.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.11feff65.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index-De7dpdBH.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index-Ct48jRjb.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index-BWZWPFn5.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index-ChW1FuFf.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index-D_42VfUR.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index-i5875EXe.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-OMq0pPK0.js";
+import { P as Popover } from "../../../mui_extended/Popover/index-BnKsmvtw.js";
+import { T as Typography } from "../../../mui_extended/Typography/index-W88rbpsJ.js";
+import { S as ScrollBar } from "../../../ScrollBar/index-P3SkjYOy.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.3d14e3e9.js";
-import { I as Icon } from "../../../Icon/index.c06685f4.js";
-import { u as useOnClickOutside } from "../../index.4cc6a221.js";
+import { B as Button } from "../../../mui_extended/Button/index-CksGG1B8.js";
+import { I as Icon } from "../../../Icon/index-CueLDD9j.js";
+import { u as useOnClickOutside } from "../../index-B_Odny9h.js";
 const areasAdminClasses = generateUtilityClasses(
   AREAS_ADMIN_CLASS_NAME,
   [
+    /* elements */
     "root",
     "rootContent",
     "areaChipRoot",
@@ -50,6 +51,7 @@ const areasAdminClasses = generateUtilityClasses(
     "areasPopoverListWindows",
     "areasPopoverListWindowsIcon",
     "areaContentChips",
+    /* states or variants of elements */
     "selected",
     "isMobile",
     "disabled",