@m4l/components 9.3.28 → 9.3.29-JT19112025.beta.1

package/components/DataGrid/subcomponents/CheckboxCellAdapter/index.js

@@ -3,7 +3,7 @@ import { forwardRef, useContext } from "react";
 import { SelectCellFormatter } from "react-data-grid";
 import { C as CheckboxFormatter } from "../Table/subcomponents/CheckboxFormatter.js";
 import { a as DataGridContext } from "../../contexts/DataGridContext/index.js";
-import { l as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
+import { m as CheckboxCellWrapperStyled } from "../../slots/DataGridSlot.js";
 const CheckboxCellAdapter = forwardRef(function CheckboxCellAdapter2(props, ref) {
   const {
     value,

package/components/DataGrid/subcomponents/ControlNavigate/ControlNavigate.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
-import { m as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
+import { n as ControlNavigateStyled } from "../../slots/DataGridSlot.js";
 import { R as RowsCount } from "../HeaderActions/subcomponents/RowsCount/index.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as Pager } from "../../../Pager/Pager.js";

package/components/DataGrid/subcomponents/HeaderActions/index.js

@@ -6,7 +6,7 @@ import { V as ViewMode } from "./subcomponents/ViewMode/index.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
 import { useIsMobile } from "@m4l/graphics";
 import { M as MobileMenuActions } from "./subcomponents/MobileMenuActions/index.js";
-import { A as ActionsRootStyled, n as ActionsConfigContainerStyled, o as ContainerLeftActionsStyled, p as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
+import { A as ActionsRootStyled, o as ActionsConfigContainerStyled, p as ContainerLeftActionsStyled, q as ContainerRightActionsStyled } from "../../slots/DataGridSlot.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function HeaderActions(props) {
   const {
@@ -29,7 +29,7 @@ function HeaderActions(props) {
   ] }) : /* @__PURE__ */ jsxs(ActionsConfigContainerStyled, { ownerState: { withPager }, children: [
     /* @__PURE__ */ jsxs(ContainerLeftActionsStyled, { children: [
       leftActions,
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
+      typeof rowHeights !== "number" && viewMode !== "cards" && /* @__PURE__ */ jsx(Density, {}),
       withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
       withSettings && !(viewMode === "cards" && cardsViewConfig?.customRender) && /* @__PURE__ */ jsx(Settings, { ...settingsProps, columns }),
       cardsViewConfig !== void 0 && /* @__PURE__ */ jsx(ViewMode, {})

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/RowsCount/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { u as useDataGrid } from "../../../../hooks/useDataGrid.js";
-import { R as RowsCountRootStyled, q as RowsCountLabelStyled, r as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
+import { R as RowsCountRootStyled, r as RowsCountLabelStyled, s as RowsCountValueStyled } from "../../../../slots/DataGridSlot.js";
 function RowsCount() {
   const { rowsCount, size } = useDataGrid();
   const { getLabel } = useModuleDictionary();

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfig/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfig(columnsConfig, columns) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/Settings/subcomponents/ColumnsConfigCards/index.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import DataGrid from "react-data-grid";
 import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
 import { p as pathIcons } from "../../../../../../icons.js";
-import { s as ColumnsConfigWrapperStyled, t as ColumnsConfigDataGridStyled, u as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, v as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
+import { t as ColumnsConfigWrapperStyled, u as ColumnsConfigDataGridStyled, v as ColumnsConfigSelColumnsStyled, T as TableWrapperDataGridStyled, w as ColumnsConfigActiosStyled } from "../../../../../../slots/DataGridSlot.js";
 import { D as DICTIONARY } from "../../../../../../dictionary.js";
 import { C as ColumnInteractiveCheckFormatter } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
 function getRowsFromColumnsConfigCards(columnsConfigCards, columns) {

package/components/DataGrid/subcomponents/HeaderActions/subcomponents/ViewMode/index.js

@@ -6,7 +6,7 @@ import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButt
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { p as pathIcons } from "../../../../icons.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";
-import { w as ContainerToggleCardsStyled, x as CardToggleButtonStyled, y as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
+import { x as ContainerToggleCardsStyled, y as CardToggleButtonStyled, z as TextToggleCardButtonStyled } from "../../../../slots/DataGridSlot.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
 function ViewMode() {
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/DataGrid/subcomponents/Table/index.js

@@ -8,7 +8,7 @@ import { a as filterHeight } from "./subcomponents/SelectColumn.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows.js";
 import { u as useFilters } from "../../hooks/useFilters.js";
 import { u as useDataGrid } from "../../hooks/useDataGrid.js";
-import { z as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { B as TableContainerStyled, T as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
 function Table(props) {

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.js

@@ -12,6 +12,7 @@ const CheckboxFormatter = forwardRef(function CheckboxFormatter2({ onChange, che
       checked,
       size: "small",
       icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      disableRipple: true,
       checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
       indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
       onChange: handleChange,

package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.js

@@ -1,22 +1,47 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { SvgIcon } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import "@mui/material";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function CheckboxIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-unChecked", children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx("g", { "clip-path": "url(#clip0_13395_49048)", children: /* @__PURE__ */ jsx("path", { d: "M13.0156 2.5H3.01562C2.75041 2.5 2.49605 2.60536 2.30852 2.79289C2.12098 2.98043 2.01563 3.23478 2.01562 3.5V13.5C2.01563 13.7652 2.12098 14.0196 2.30852 14.2071C2.49605 14.3946 2.75041 14.5 3.01562 14.5H13.0156C13.2808 14.5 13.5352 14.3946 13.7227 14.2071C13.9103 14.0196 14.0156 13.7652 14.0156 13.5V3.5C14.0156 3.23478 13.9103 2.98043 13.7227 2.79289C13.5352 2.60536 13.2808 2.5 13.0156 2.5ZM3.01562 13.5V3.5H13.0156V13.5H3.01562Z", fill: "#323B3B" }) }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49048", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
-  ] }) });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const uncheckedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/unchecked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: uncheckedIconUrl,
+      size: "small",
+      color: "text.primary",
+      className: "checkbox-unChecked",
+      ...props
+    }
+  );
 }
 function CheckboxCheckedIcon(props) {
-  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, viewBox: "0 0 16 17", className: "checkbox-checked", children: [
-    /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_13395_49057)", children: [
-      /* @__PURE__ */ jsx("path", { d: "M13.4323 2H2.59896C2.31164 2 2.03609 2.11414 1.83293 2.3173C1.62976 2.52047 1.51563 2.79602 1.51562 3.08333V13.9167C1.51563 14.204 1.62976 14.4795 1.83293 14.6827C2.03609 14.8859 2.31164 15 2.59896 15H13.4323C13.7196 15 13.9952 14.8859 14.1983 14.6827C14.4015 14.4795 14.5156 14.204 14.5156 13.9167V3.08333C14.5156 2.79602 14.4015 2.52047 14.1983 2.3173C13.9952 2.11414 13.7196 2 13.4323 2Z", fill: "#323B3B" }),
-      /* @__PURE__ */ jsx("path", { d: "M6.92119 11.6245L4.10001 8.8274L4.99759 7.95696L6.92119 9.84467L11.1014 5.70001L11.9996 6.58993L6.92119 11.6245Z", fill: "#F3F5F7" })
-    ] }),
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_13395_49057", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0 0.5)" }) }) })
-  ] });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const checkedIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/checked.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: checkedIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      className: "checkbox-checked",
+      ...props
+    }
+  );
 }
 function CheckboxIndeterminateIcon(props) {
-  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const indeterminateIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/check_box/assets/icons/indeterminate.svg`;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: indeterminateIconUrl,
+      size: "small",
+      color: "primary.enabled",
+      ...props
+    }
+  );
 }
 export {
   CheckboxIndeterminateIcon as C,

package/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.js

@@ -5,7 +5,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { renderHeaderCell } from "react-data-grid";
 import { u as useFocusRef } from "../hooks/useFocusRef.js";
 import { u as useFilters } from "../../../hooks/useFilters.js";
-import { N as NameColumnIconStyled, B as NameColumnStyled, I as IconColumnStyled, F as DraggableHeaderRootStyled, G as ButtonHeaderActionsStyled, H as DraggableWrapperInputBaseStyled, J as IconSearchStyled, K as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
+import { N as NameColumnIconStyled, F as NameColumnStyled, G as IconColumnStyled, H as DraggableHeaderRootStyled, J as ButtonHeaderActionsStyled, K as DraggableWrapperInputBaseStyled, M as IconSearchStyled, O as HeaderInputBaseStyled } from "../../../slots/DataGridSlot.js";
 import { p as pathIcons } from "../../../icons.js";
 import { u as useDataGrid } from "../../../hooks/useDataGrid.js";
 import { I as Icon } from "../../../../Icon/Icon.js";

package/components/DataGrid/subcomponents/Table/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { M as MenuListStyled, O as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { P as MenuListStyled, Q as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { S as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/helpers/generators.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Generadores de datos aleatorios para el DataGrid
+ */
+/**
+ * Función para generar un estado aleatorio
+ */
+export declare const getStatus: (index: number) => string;
+/**
+ * Función para generar un tipo de usuario aleatorio
+ */
+export declare const getUserType: (index: number) => "superadmin" | "admin" | "user";
+/**
+ * Función para obtener código de carácter desde el índice
+ */
+export declare const getCharCode: (index: number) => string;
+/**
+ * Función para generar un color aleatorio en formato hexadecimal
+ */
+export declare const getRandomColor: (index: number) => string;
+/**
+ * Función para generar tags aleatorios
+ */
+export declare const getTags: (index: number) => {
+    label: string;
+    backgroundColor: string;
+}[];

package/components/DataGrid/tests/helpers/types.d.ts

@@ -28,6 +28,7 @@ export interface SeedProps {
     aligns?: Record<string, ColumnAlign>;
     names?: Record<string, string>;
     visibleColumns?: string[];
+    withColor?: boolean;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';
@@ -67,6 +68,7 @@ export interface RowType {
         label: string;
         currentStatus: 'superadmin' | 'admin' | 'user';
     };
+    color?: string;
 }
 interface RangesUncertainty {
     cmcMin: number;

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";

package/components/DynamicSort/subcomponents/AppliedSorts/AppliedSorts.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { D as DynamicSortSlots } from "../../slots/SlotsEnum.js";
 import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";

package/components/DynamicSort/subcomponents/DynamicSortBase/DynamicSortBase.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { D as DYNAMIC_SORT_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicSortBase } from "./useDynamicSortBase.js";

package/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { I as ICON_PREFIX, a as ICON_KEY_COMPONENT } from "./constants.js";
 import { g as getComponentClasses, a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";

package/components/Image/Image.js

@@ -4,7 +4,7 @@ import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
 import { L as LazyLoadComponent } from "./subcomponents/LazyLoadComponent/index.js";
 import { D as DivContainerSkeletonStyled, I as ImgSkeleton, a as ImgStyled } from "./slots/ImageSlots.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { s as svgDataUriSkeleton, I as IMAGE_CLASSES, a as IMAGE_KEY_COMPONENT } from "./constant.js";
 import { I as ImageSlots } from "./slots/ImageEnum.js";
 function Image(props) {

package/components/Image/subcomponents/IntersectComponent/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
 import { b as IntersectComponentStyled } from "../../slots/ImageSlots.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { a as IMAGE_KEY_COMPONENT } from "../../constant.js";
 import { I as ImageSlots } from "../../slots/ImageEnum.js";
 const checkIntersections = (entries) => {

package/components/ImageText/ImageText.js

@@ -4,7 +4,7 @@ import { I as ImageTextContainerRoot, a as ImageContainerStyled, b as ImgStyled,
 import { I as IMG_ALT, a as IMAGE_TEXT_CLASSES, b as IMAGE_TEXT_KEY_COMPONENT } from "./constants.js";
 import { clsx } from "clsx";
 import { useRef } from "react";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { u as useIsVisible } from "../../hooks/useIsVisible/useIsVisible.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 const ImageText = (props) => {

package/components/LanguagePopover/LanguagePopover.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useFirstRender, useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { I as Image } from "../Image/Image.js";
 import { L as LanguagePopoverRootStyled, P as PaperStyled } from "./slots/LanguagePopoverSlots.js";

package/components/LinearProgressIndeterminate/LinearProgressIndeterminate.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { L as LINEAR_PROGRESS_INDETERMINATE_KEY_COMPONENT } from "./constants.js";

package/components/LoadingError/LoadingError.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { L as LoadingErrorRootStyled, a as LoadingErrorStyled, b as LinearProgressIndeterminateStyled, c as LoadingErrorContainerStyled, d as LoadingErrorContentStyled, e as LoadingErrorImageStyled, f as LoadingErrorTextContainerStyled, g as LoadingErrorTitleDescriptionStyled, h as LoadingErrorDividerStyled, i as LoadingErrorButtonContainerStyled, j as LoadingErrorRecommendationTextStyled } from "./slots/LoadingErrorSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { L as LOADING_ERROR_KEY_COMPONENT } from "./constants.js";
 import clsx from "clsx";
 import { d as dictionary } from "./dictionary.js";

package/components/NumberInput/NumberInput.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
 import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { u as useNumberInput } from "./hooks/useNumberInput/useNumberInput.js";
 import { S as SkeletonStyled, R as RootStyled, I as InputStyled, C as ContainButtonsAdornmentStyled, a as ContainerButtonsStyled, b as IncrementButtonStyled, D as DecrementButtonStyled } from "./slots/NumberInputSlots.js";
 import { N as NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -6,7 +6,7 @@ import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots
 import { usePaginate } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByM4L(props) {

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -6,7 +6,7 @@ import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots
 import { useRows } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { b as OBJECT_LOGS_OTHERS_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByOthers(props) {

package/components/PDFViewer/PDFViewer.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { P as PDFViewerRootStyled, a as PreviewPDFStyled } from "./slots/PDFViewerSlots.js";
 import { P as PDFViewerSlots } from "./slots/PDFViewerEnum.js";
 import { P as PDF_VIEWER_KEY_COMPONENT } from "./constants.js";

package/components/PrintingSystem/PrintingSystem.js

@@ -7,7 +7,7 @@ import { P as PrintingSystemRootStyled } from "./slots/PrintingSystemSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { P as PRINTING_SYSTEM_KEY_COMPONENT } from "./constants.js";
 import { P as PrintingSystemSlots } from "./slots/PrintingSystemEnum.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import clsx from "clsx";
 const PrintingSystem = forwardRef((props, ref) => {
   const { templateData: nodeRoot, sourceData, size = "medium", variant = "body", className, dataTestId } = props;

package/components/PropertyValue/PropertyValue.js

@@ -3,7 +3,7 @@ import React, { useId } from "react";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
 import { T as TEST_PROPS_DATA, C as COMPONENT_PREFIX, P as PROPERTY_VALUE_KEY_COMPONENT } from "./constants.js";
-import { a as getNameDataTestId, g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { g as getNameDataTestId, a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { P as PropertyValueRootStyled, N as NameStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";

package/components/ToastContainer/ToastContainer.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer as ToastContainer$1 } from "react-toastify";
 import { D as DEFAULT_CLOSE_TIME, T as TOAST_KEY_COMPONENT } from "./constants.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { ModuleSkeletonProvider } from "@m4l/core";
 import { R as RootStyled } from "./slots/toastContainerSlots.js";
 import { T as ToastContainerSlots } from "./slots/ToastContainerEnum.js";

package/components/WindowBase/WindowBase.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { W as WINDOW_BASE_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";

package/components/WindowConfirm/WindowConfirm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useModal } from "../../hooks/useModal/index.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
 import { W as WINDOW_CONFIRM_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -12,7 +12,7 @@ import { A as AreasAdminRootStyled, a as AreasAdminContentStyled, b as AreasCont
 import { useIsMobile } from "@m4l/graphics";
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { M as MenuActions } from "../../../MenuActions/MenuActions.js";

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -4,7 +4,7 @@ import { u as useAreasStore } from "../../hooks/useAreas/index.js";
 import { A as AreaMemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
 import { shallow } from "zustand/shallow";
 import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
-import { a as getNameDataTestId, g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId, a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { A as AreasViewerRootStyled } from "./slots/AreasViewerSlots.js";

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -3,7 +3,7 @@ import React from "react";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../../../WindowBase/subcomponents/Component/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow.js";
 import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";

package/components/commercial/TopBar/TopBar.js

@@ -4,7 +4,7 @@ import { g as getTopBarClassesUtilityClass } from "./classes/index.js";
 import { C as ConteinItem } from "./component/ConteinItem/index.js";
 import { T as TopBarProvider } from "./context/index.js";
 import { T as TopBarRoot } from "./style.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { c as componentName } from "./classes/constants.js";
 const TopBar = (props) => {
   const { dataMenu: DataMenu, dataTestId } = props;

package/components/commercial/TopBar/component/ConteinItem/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { u as useTopBar } from "../../hook/topBarContext/index.js";
 import { N as NavItemRoot } from "./subcomponets/NavItem/index.js";
 import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../classes/constants.js";
 const ConteinItem = () => {
   const { dataMenu: DataMenu, classes, dataTestId } = useTopBar();

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { i as isActive } from "../../../../utils/isActive/index.js";
 import { T as TopBarClasses } from "../../../../classes/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../../../classes/constants.js";
 import { A as Accordion } from "../../../../../../mui_extended/Accordion/Accordion.js";
 import { B as Button } from "../../../../../../mui_extended/Button/Button.js";

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js

@@ -3,7 +3,7 @@ import { useTheme } from "@mui/material";
 import { P as PropagateLoaderSpinnerStyled, L as LoaderStyled } from "./slots/PropagateLoaderSpinnerSlots.js";
 import { P as PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import clsx from "clsx";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as PropagateLoaderSpinnerSlots } from "./slots/PropagateLoaderSpinnerEnum.js";

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { S as SPLIT_LAYOUT_KEY_COMPONENT, a as SPLIT_LAYOUT_ICONS } from "./constants.js";
 import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -5,7 +5,7 @@ import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE,
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterIconCheckFalseStyled, c as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function getFormatBoolean(presentationType, value = false, getLabel) {

package/components/formatters/ColorFormatter/ColorFormatter.d.ts

@@ -0,0 +1,18 @@
+import { ColorFormatterProps } from './types';
+/**
+ * ColorFormatter
+ * Componente para formatear y mostrar colores en diferentes contextos (tablas, listas, etc.)
+ * @param {ColorFormatterProps} props - Las propiedades del componente.
+ * @param {string} [props.value] - El valor del color en formato hexadecimal
+ * @param {string} [props.size] - Tamaño del componente ('small' | 'medium')
+ * @param {string} [props.dataTestId] - ID para pruebas
+ * @param {string} [props.className] - Clases CSS personalizadas
+ * @example
+ * <ColorFormatter value="#FF0000" />
+ * // Renderiza un cuadrado con el color rojo
+ *
+ * <ColorFormatter value={null} />
+ * // Renderiza el ícono "out_of" cuando no hay valor
+ * @returns JSX.Element
+ */
+export declare function ColorFormatter(props: ColorFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/ColorFormatter/ColorFormatter.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { C as ColorFormatterRootStyled } from "./slots/ColorFormatterSlots.js";
+import { C as ColorFormatterSlots } from "./slots/ColorFormatterEnum.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { C as COLOR_FORMATTER_KEY_COMPONENT } from "./constants.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { C as Color } from "../../Color/Color.js";
+function ColorFormatter(props) {
+  const { value, dataTestId, className, size = "medium" } = props;
+  const ownerState = { value };
+  const colorComponent = useMemo(() => {
+    return /* @__PURE__ */ jsx(Color, { value, size });
+  }, [value, size]);
+  return /* @__PURE__ */ jsx(
+    ColorFormatterRootStyled,
+    {
+      className: clsx(
+        getComponentSlotRoot(COLOR_FORMATTER_KEY_COMPONENT),
+        className
+      ),
+      ...getPropDataTestId(
+        COLOR_FORMATTER_KEY_COMPONENT,
+        ColorFormatterSlots.root,
+        dataTestId
+      ),
+      ownerState,
+      children: colorComponent
+    }
+  );
+}
+export {
+  ColorFormatter as C
+};

package/components/formatters/ColorFormatter/ColorFormatter.styles.d.ts

@@ -0,0 +1,2 @@
+import { ColorFormatterStyles } from './types';
+export declare const colorFormatterStyles: ColorFormatterStyles;