@m4l/components 0.2.35 → 1.0.0

package/@types/types.d.ts

@@ -0,0 +1,25 @@
+import { ComponentsOverrides, ComponentsVariants, Theme as MuiTheme } from '@mui/material/styles';
+
+import { DynamicFilterSlotsType, DynamicFilterOwnerState } from '../components/DynamicFilter/types';
+
+type Theme = Omit<MuiTheme, 'components'>;
+
+declare module '@mui/material/styles' {
+  // Define the slots in the theme
+  interface ComponentNameToClassKey {
+    M4LDynamicFilter: DynamicFilterSlotsType;
+  }
+
+  interface ComponentsPropsList {
+    // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
+    M4LDynamicFilter: Partial<DynamicFilterOwnerState>;
+  }
+
+  interface Components {
+    M4LDynamicFilter?: {
+      defaultProps?: ComponentsPropsList['M4LDynamicFilter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDynamicFilter'];
+      variants?: ComponentsVariants['M4LDynamicFilter'];
+    };
+  }
+}

package/components/AccountPopover/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useAccountPopoverUtilityClasses } from ".";
+import { useAccountPopoverUtilityClasses } from '.';
 /**
  * Tipos de datos para las clases del componente AccountPopover.
  */

package/components/AccountPopover/index.efc74d5c.js

@@ -0,0 +1,330 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEnvironment, useModuleDictionary, useNetwork } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { generateUtilityClasses, generateUtilityClass, styled, useTheme, ButtonBase } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
+import { A as Avatar, P as Popover, C as CircularProgress } from "../../vendor.a1ce6777.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
+import clsx from "clsx";
+const componentName = "M4LAccountPopover";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "containerUserName",
+    "containerUserEmail",
+    "containerlogOut",
+    "containerUserInfo",
+    "containerSetting",
+    "labelUserName",
+    "labelUserEmail",
+    "labelVersion",
+    "containerAvatarPopover",
+    "myAvatar",
+    "popover",
+    "containerAppVersion",
+    "containerMenuItems",
+    "containerProgress",
+    "logOut",
+    "menuItem"
+  ]
+);
+function getAccountPopoverClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAccountPopoverUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerUserName: ["containerUserName"],
+    containerUserEmail: ["containerUserEmail"],
+    containerUserInfo: ["containerUserInfo"],
+    containerlogOut: ["containerlogOut"],
+    containerSetting: ["containerSetting"],
+    labelUserName: ["labelUserName"],
+    labelUserEmail: ["labelUserEmail"],
+    labelVersion: ["labelVersion"],
+    myAvatar: ["myAvatar"],
+    containerAvatarPopover: ["containerAvatarPopover"],
+    popover: ["popover"],
+    containerAppVersion: ["containerAppVersion"],
+    containerMenuItems: ["containerMenuItems"],
+    containerProgress: ["containerProgress"],
+    logOut: ["logOut"],
+    menuItem: ["menuItem"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAccountPopoverClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AcountPopOverRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LAccountPopover?.styleOverrides
+}));
+function MyAvatar(props) {
+  const { avatarUrl, firstName = "", lastName = "arreee", ...other } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      alt: "full_name",
+      color: "default",
+      ...avatarUrl ? {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/${avatarUrl}`
+      } : { children: `${firstName[0]}${lastName[0]}` },
+      ...other
+    }
+  );
+}
+const MenuPopOver = (props) => {
+  const {
+    data,
+    itemHandleClick,
+    version,
+    handleLogOut,
+    classes,
+    userData,
+    settingsHandleOpen: settingHandleOpen,
+    asyncState
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { avatar_url, first_name, last_name, email } = userData || {};
+  const { getLabel } = useModuleDictionary();
+  const [open2, setOpen] = useState(null);
+  const theme = useTheme();
+  const handleClick = (item) => {
+    itemHandleClick(item);
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "presentation",
+      className: classes.containerAvatarPopover,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAvatarPopover") } : {},
+      children: [
+        /* @__PURE__ */ jsx(ButtonBase, { children: /* @__PURE__ */ jsx(
+          MyAvatar,
+          {
+            className: classes.myAvatar,
+            avatarUrl: avatar_url,
+            firstName: first_name || "",
+            lastName: last_name || "",
+            onClick: handleOpen
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          Popover,
+          {
+            open: Boolean(open2),
+            anchorEl: open2,
+            onClose: handleClose,
+            className: classes.popover,
+            arrowType: "no-arrow",
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("popover") } : {},
+            sx: {
+              mt: "5px",
+              ...theme.components?.M4LAccountPopoverPopover?.styleOverrides
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classes.containerUserInfo,
+                  ...process.env.NODE_ENV !== "production" ? {
+                    [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerUserInfo")
+                  } : {},
+                  children: [
+                    " ",
+                    /* @__PURE__ */ jsxs("div", { className: classes.containerUserName, children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/users.svg`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: classes.labelUserName, children: `${first_name} ${last_name}` })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: classes.containerUserEmail, children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/email.svg`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: classes.labelUserEmail, children: email })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classes.containerAppVersion,
+                  ...process.env.NODE_ENV !== "production" ? {
+                    [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerAppVersion")
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/version.svg`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: classes.labelVersion, children: `${getLabel("account_popover.label_version")} ${version}` })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classes.containerMenuItems,
+                  ...process.env.NODE_ENV !== "production" ? {
+                    [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerMenuItems")
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        className: classes.containerSetting,
+                        onClick: () => {
+                          settingHandleOpen();
+                          handleClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/configuration.svg`
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: classes.menuItem, children: getLabel("account_popover.label_settings") })
+                        ]
+                      }
+                    ),
+                    asyncState === "loaded" ? data.map((option) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "presentation",
+                        onClick: () => handleClick(option),
+                        className: classes.menuItem,
+                        ...process.env.NODE_ENV !== "production" ? {
+                          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("menuItem")
+                        } : {},
+                        children: option.title
+                      },
+                      option.title
+                    )) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classes.containerProgress,
+                        ...process.env.NODE_ENV !== "production" ? {
+                          [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("containerProgress")
+                        } : {},
+                        children: /* @__PURE__ */ jsx(CircularProgress, { size: "20px" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { role: "button", tabIndex: 0, className: classes.containerlogOut, onClick: handleLogOut, children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    src: `${host_static_assets}/${environment_assets}/frontend/components/account_popover/assets/icons/sign_off.svg`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: classes.logOut,
+                    ...process.env.NODE_ENV !== "production" ? {
+                      [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("logOut")
+                    } : {},
+                    children: getLabel("account_popover.label_logout")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const AccountPopover = (props) => {
+  const {
+    itemHandleClick,
+    version,
+    handleLogOut,
+    userData,
+    className,
+    settingsHandleOpen: settingHandleOpen
+  } = props;
+  const [asyncState, setAsyncState] = useState("unLoad");
+  const [menuData, setMenuData] = useState([]);
+  const { networkOperation } = useNetwork();
+  useEffect(() => {
+    let mounted = true;
+    if (asyncState === "unLoad") {
+      setAsyncState("loading");
+      networkOperation({
+        method: "GET",
+        endPoint: `menus`,
+        parms: {
+          position: 1
+        }
+      }).then((response) => {
+        if (mounted) {
+          setAsyncState("loaded");
+          setMenuData(response.data);
+        }
+      }).catch((_error) => {
+        console.error("AccountData network request error - get menus", _error);
+        setMenuData([]);
+      });
+    }
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  const accountPopoverClasses = useAccountPopoverUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    AcountPopOverRoot,
+    {
+      className: clsx(accountPopoverClasses.root, className),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getAccountPopoverClassesUtilityClass("root") } : {},
+      children: /* @__PURE__ */ jsx(
+        MenuPopOver,
+        {
+          data: menuData,
+          asyncState,
+          itemHandleClick,
+          version,
+          handleLogOut,
+          classes: accountPopoverClasses,
+          userData,
+          settingsHandleOpen: settingHandleOpen
+        }
+      )
+    }
+  );
+};
+function getAccountPopoverDictionary() {
+  return ["account_popover"];
+}
+export {
+  AccountPopover as A,
+  getAccountPopoverDictionary as g
+};

package/components/AccountPopover/style.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AcountPopOverRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/AccountPopover/subcomponents/MyAvatar/types.d.ts

@@ -1,16 +1,16 @@
-import { Maybe } from "@m4l/core";
-import { AvatarProps } from "@mui/material";
+import { Maybe } from '@m4l/core';
+import { AvatarProps } from '@mui/material';
 /**
  * Propiedades del componente MyAvatar.
  */
 export interface MyAvatarProps extends AvatarProps {
     /**
-    * La URL del avatar.
-    */
+     * La URL del avatar.
+     */
     avatarUrl: Maybe<string>;
     /**
-   * El primer nombre del usuario.
-   */
+     * El primer nombre del usuario.
+     */
     firstName: string;
     /**
      * El apellido del usuario.

package/components/AccountPopover/subcomponents/PopOver/types.d.ts

@@ -1,5 +1,5 @@
-import { AccountPopoverClasses } from "../../classes/types";
-import { AccountPopoverProps, AsyncTypes, RightMenuData, UserAuth } from "../../types";
+import { AccountPopoverClasses } from '../../classes/types';
+import { AccountPopoverProps, AsyncTypes, RightMenuData, UserAuth } from '../../types';
 /**
  * Propiedades extendidas para el componente PopOver.
  */
@@ -9,15 +9,15 @@ export interface PopOverProps extends Omit<AccountPopoverProps, 'userData'> {
      */
     data: Array<RightMenuData> | [];
     /**
-   * Clases personalizadas para el componente.
-   */
+     * Clases personalizadas para el componente.
+     */
     classes: AccountPopoverClasses;
     /**
-    * Datos del usuario para el popover.
-    */
+     * Datos del usuario para el popover.
+     */
     userData: UserAuth | null | undefined;
     /**
-    * Estado de carga asíncrona.
-    */
+     * Estado de carga asíncrona.
+     */
     asyncState: AsyncTypes;
 }

package/components/AccountPopover/types.d.ts

@@ -1,4 +1,4 @@
-import type { DomainCountry, Maybe } from "@m4l/core";
+import type { DomainCountry, Maybe } from '@m4l/core';
 export interface RightMenuData {
     /** Esta propiedad hace referencia al título del módulo.
      * Tiene utilidades como:
@@ -11,7 +11,7 @@ export interface RightMenuData {
      * - Define a la aplicación web cual de todos los módulos disponibles debe agregar en la interfaz de la aplicación web.
      * - Permite almacenar información del usuario basado en la interacción del módulo tomando en cuenta el identificador.
      * ...
-    */
+     */
     module_id?: string;
     /**
      * Esta propiedad define la ubicación del icono representativo del módulo.
@@ -26,7 +26,7 @@ export interface RightMenuData {
 export declare type AsyncTypes = 'unLoad' | 'loading' | 'loaded';
 /** Colección de datos que representa el valor del menú de administrativo propio del usuario.
  * Para obtener el detalle de la información del tipo de dato RightMenuData, se debe validar en la documentación de la librería @m4l/core.
-*/
+ */
 export interface MenuDataProvider {
     value: RightMenuData;
 }

package/components/AppBar/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useAppBarUtilityClasses } from ".";
+import { useAppBarUtilityClasses } from '.';
 export interface AppBarClassesType {
     root: string;
     containerChilds: string;

package/components/AppBar/index.fc126a22.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useResponsiveContainerStore } from "@m4l/graphics";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { I as Image } from "../Image/index.36a3d440.js";
+import { T as Typography } from "../../vendor.a1ce6777.js";
+import { a as IconButton } from "../Icon/index.d5fed418.js";
+const AppBarRoot = styled("header")(({ theme }) => ({
+  ...theme.components?.M4LAppBar?.styleOverrides
+}));
+const APPBAR_PREFIX = "M4LAppBar";
+const getNameDataTestId = (KEY) => {
+  return `${APPBAR_PREFIX}-${KEY}`;
+};
+const componentName = "M4LAppBar";
+generateUtilityClasses(componentName, [
+  "root",
+  "containerChilds",
+  "containerIconMenuToggle",
+  "iconMenuToggle",
+  "containerLogo",
+  "containerImageTypography"
+]);
+function getAppBarClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useAppBarUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    containerChilds: ["containerChilds"],
+    containerIconMenuToggle: ["containerIconMenuToggle"],
+    iconMenuToggle: ["iconMenuToggle"],
+    containerLogo: ["containerLogo"],
+    containerImageTypography: ["containerImageTypography"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getAppBarClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const AppBar = (props) => {
+  const { onToggleVisible, children, companyLogo, companyName } = props;
+  const { isUpSm } = useResponsiveContainerStore((state) => state);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const classes = useAppBarUtilityClasses();
+  const { getLabel } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(
+    AppBarRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: [
+        companyLogo && isUpSm ? /* @__PURE__ */ jsx("div", { className: classes.containerLogo, children: /* @__PURE__ */ jsxs("div", { className: classes.containerImageTypography, children: [
+          /* @__PURE__ */ jsx(Image, { src: companyLogo, alt: "logo" }, "Logo"),
+          /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", skeletonWidth: "100px", children: companyName })
+        ] }) }) : null,
+        !isUpSm ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.containerIconMenuToggle,
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerIconMenuToggle") } : {},
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                tooltip: getLabel("appbar.tooltip_toogle_menu"),
+                className: classes.iconMenuToggle,
+                src: `${host_static_assets}/${environment_assets}/frontend/components/settings/assets/icons/options.svg`,
+                onClick: onToggleVisible
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.containerChilds,
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("containerChilds") } : {},
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+function getAppBarDictionary() {
+  return ["appbar"];
+}
+export {
+  AppBar as A,
+  getAppBarDictionary as g
+};

package/components/AppBar/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AppBarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/components/AppBar/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { AppBarClassesKey } from "../classes/types";
+import { AppBarClassesKey } from '../classes/types';
 export declare const getNameDataTestId: (KEY: AppBarClassesKey) => string;

package/components/AppBar/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 /**
  * Propiedades de estilo para el componente raíz de la barra de aplicaciones.
  */
@@ -12,19 +12,19 @@ export declare type RootStyleProps = {
 };
 export interface AppBarProps {
     /**
-    * Función que activa la visualización del menú de la aplicación en la vista móvil.
-    */
+     * Función que activa la visualización del menú de la aplicación en la vista móvil.
+     */
     onToggleVisible: VoidFunction;
     /**
-    * Puede ser cualquier cosa, desde un solo elemento hasta un array de elementos. Los elementos secundarios pueden ser componentes de React, elementos HTML, o incluso otros tipos de datos, como cadenas o números.
-    */
+     * Puede ser cualquier cosa, desde un solo elemento hasta un array de elementos. Los elementos secundarios pueden ser componentes de React, elementos HTML, o incluso otros tipos de datos, como cadenas o números.
+     */
     children: ReactNode;
     /**
-    * companyLogo: Enlace de acceso para el recurso gráfico de logo.
-    */
+     * companyLogo: Enlace de acceso para el recurso gráfico de logo.
+     */
     companyLogo?: string;
     /**
-    * companyName: Nombre de la compañía
-    */
+     * companyName: Nombre de la compañía
+     */
     companyName?: string;
 }

package/components/CommonActions/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useCommonActionsUtilityClasses } from ".";
+import { useCommonActionsUtilityClasses } from '.';
 export interface CommonActionsClassesType {
     root: string;
     actionCancel: string;

package/components/CommonActions/components/Actions/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { CommonActionsProps } from './types';
-export declare const Actions: (props: CommonActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Actions: import("react").ForwardRefExoticComponent<CommonActionsProps & import("react").RefAttributes<any>>;

package/components/CommonActions/components/Actions/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperStandarActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/CommonActions/components/Actions/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
-export interface CommonActionsProps {
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CommonActionsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }

package/components/CommonActions/tests/utils.d.ts

@@ -1,2 +1,2 @@
-import { CommonActionsClassesKey } from "../classes/types";
+import { CommonActionsClassesKey } from '../classes/types';
 export declare const getNameCommonActionsDataTestId: (KEY: CommonActionsClassesKey) => string;

package/components/DataGrid/assets/icons/datagrid.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 13H6C3.245 13 1 10.755 1 8C1 5.245 3.245 3 6 3H10C12.755 3 15 5.245 15 8C15 10.755 12.755 13 10 13ZM6 4C3.795 4 2 5.795 2 8C2 10.205 3.795 12 6 12H10C12.205 12 14 10.205 14 8C14 5.795 12.205 4 10 4H6Z" fill="#2F3737"/>
-<path d="M10 11C8.345 11 7 9.655 7 8C7 6.345 8.345 5 10 5C11.655 5 13 6.345 13 8C13 9.655 11.655 11 10 11ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" fill="#2F3737"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13H6C3.245 13 1 10.755 1 8C1 5.245 3.245 3 6 3H10C12.755 3 15 5.245 15 8C15 10.755 12.755 13 10 13ZM6 4C3.795 4 2 5.795 2 8C2 10.205 3.795 12 6 12H10C12.205 12 14 10.205 14 8C14 5.795 12.205 4 10 4H6Z" fill="#2F3737"/>
+<path d="M10 11C8.345 11 7 9.655 7 8C7 6.345 8.345 5 10 5C11.655 5 13 6.345 13 8C13 9.655 11.655 11 10 11ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" fill="#2F3737"/>
+</svg>

package/components/DataGrid/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { dataGridUtilityClasses } from ".";
+import { dataGridUtilityClasses } from '.';
 export interface DataGridClassesType {
     root: string;
     actions: string;

package/components/DataGrid/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DataGridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/subcomponents/Actions/subcomponents/Settings/subcomponents/ColumnsConfig/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const WrapperColumnsConfig: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivAll: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivSelColumns: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperDataGrid: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DialogActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperSkeleton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;