@m4l/components 9.2.63 → 9.2.64

package/@types/types.d.ts

@@ -149,6 +149,7 @@ import { ScrollBarOwnerState, ScrollBarSlotsType } from '../components/ScrollBar
 import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 import { ObjectLogsOwnerState, ObjectLogsSlotsType } from '../components/ObjectLogs/types';
 import { LanguagePopoverOwnerState, LanguagePopoverSlotsType } from '../components/LanguagePopover/types';
+import { ContainerFlowOwnerState, ContainerFlowSlotsType } from '../components/ContainerFlow/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -228,6 +229,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: SplitLayoutOwnerState;
     M4LObjectLogs: ObjectLogsSlotsType;
     M4LLanguagePopover: LanguagePopoverSlotsType;
+    M4LContainerFlow: ContainerFlowSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -307,6 +309,7 @@ declare module '@mui/material/styles' {
     M4LSplitLayout: Partial<SplitLayoutOwnerState>;
     M4LObjectLogs: Partial<ObjectLogsOwnerState>;
     M4LLanguagePopover: Partial<LanguagePopoverOwnerState>;
+    M4LContainerFlow: Partial<ContainerFlowOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -699,5 +702,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LLanguagePopover'];
       variants?: ComponentsVariants['M4LLanguagePopover'];
     };
+    M4LContainerFlow?: {
+      defaultProps?: ComponentsPropsList['M4LContainerFlow'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LContainerFlow'];
+      variants?: ComponentsVariants['M4LContainerFlow'];
+    };
   }
 }

package/components/ContainerFlow/ContainerFlow.d.ts

@@ -0,0 +1,7 @@
+import { ContainerFlowProps } from './types';
+/**
+ * Componente que permite renderizar un contenedor de items en forma de flujo.
+ * @param props - Propiedades del componente.
+ * @returns Un componente de tipo div con los estilos del contenedor de items.
+ */
+export declare const ContainerFlow: (props: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/components/ContainerFlow/ContainerFlow.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { C as CONTAINER_FLOW_CLASSES } from "./constants.js";
+import { C as ContainerFlowWrapperItemStyled, a as ContainerFlowRootStyled } from "./slots/ContainerFlowSlots.js";
+import clsx from "clsx";
+const ContainerFlow = (props) => {
+  const { variant = "column-flex", size, children, minWidth, className, gap = "standard" } = props;
+  const isColumnFlex = variant === "column-flex";
+  const ownerState = {
+    variant,
+    size,
+    minWidth,
+    gap
+  };
+  const childrenArray = Array.isArray(children) ? children : children ? [children] : [];
+  let itemsToRender;
+  if (!isColumnFlex && children) {
+    itemsToRender = children;
+  } else if (childrenArray.length > 0) {
+    itemsToRender = childrenArray.map((child, index) => /* @__PURE__ */ jsx(ContainerFlowWrapperItemStyled, { role: "listitem", ownerState: { variant, size }, className: CONTAINER_FLOW_CLASSES.wrapperItem, children: child }, index));
+  }
+  return /* @__PURE__ */ jsx(ContainerFlowRootStyled, { role: "list", ownerState, className: clsx(CONTAINER_FLOW_CLASSES.root, className), children: itemsToRender });
+};
+export {
+  ContainerFlow as C
+};

package/components/ContainerFlow/ContainerFlow.styles.d.ts

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

package/components/ContainerFlow/ContainerFlow.styles.js

@@ -0,0 +1,46 @@
+import { g as getSpacingValue } from "./helpers/getSpacingValue/getSpacingValue.js";
+import { a as CONTAINER_FLOW_MIN_WIDTH_VALUES, b as CONTAINER_QUERY_NAME } from "./constants.js";
+const containerFlowStyles = {
+  /**
+   * Estilos para el contenedor raíz del componente.
+   */
+  root: ({ ownerState }) => ({
+    width: "100%",
+    height: "100%",
+    gap: getSpacingValue(ownerState?.gap ?? "standard"),
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    ...ownerState?.variant === "grid-layout" && {
+      display: "grid",
+      gridTemplateColumns: `repeat(auto-fill, minmax(${ownerState.minWidth ?? 200}px, 1fr))`,
+      height: "fit-content"
+    },
+    ...(ownerState?.variant === "column-flex" || ownerState?.variant === "flex-wrap") && {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      height: "fit-content",
+      "& > .M4LContainerFlow-wrapperItem": {
+        minWidth: ownerState?.minWidth ?? CONTAINER_FLOW_MIN_WIDTH_VALUES,
+        flex: 1
+      },
+      [`@container ${CONTAINER_QUERY_NAME} (max-width: ${ownerState?.minWidth ? ownerState?.minWidth - 1 : 200 - 1}px)`]: {
+        "& > .M4LContainerFlow-wrapperItem": {
+          minWidth: "100%",
+          maxWidth: "100%"
+        }
+      }
+    }
+  }),
+  /**
+   * Estilos para el contenedor de los items del componente.
+   */
+  wrapperItem: () => ({
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap"
+  })
+};
+export {
+  containerFlowStyles as c
+};

package/components/ContainerFlow/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
+export declare const CONTAINER_FLOW_CLASSES: Record<string, string>;
+export declare const CONTAINER_FLOW_GAP_VALUES: {
+    compact: number;
+    standard: number;
+    comfortable: number;
+};
+export declare const CONTAINER_QUERY_NAME = "container";
+export declare const CONTAINER_FLOW_MIN_WIDTH_VALUES = 280;

package/components/ContainerFlow/constants.js

@@ -0,0 +1,21 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ContainerFlowSlots } from "./slots/ContainerFlowEnum.js";
+const CONTAINER_FLOW_KEY_COMPONENT = "M4LContainerFlow";
+const CONTAINER_FLOW_CLASSES = getComponentClasses(
+  CONTAINER_FLOW_KEY_COMPONENT,
+  ContainerFlowSlots
+);
+const CONTAINER_FLOW_GAP_VALUES = {
+  compact: 8,
+  standard: 16,
+  comfortable: 24
+};
+const CONTAINER_QUERY_NAME = "container";
+const CONTAINER_FLOW_MIN_WIDTH_VALUES = 280;
+export {
+  CONTAINER_FLOW_CLASSES as C,
+  CONTAINER_FLOW_MIN_WIDTH_VALUES as a,
+  CONTAINER_QUERY_NAME as b,
+  CONTAINER_FLOW_GAP_VALUES as c,
+  CONTAINER_FLOW_KEY_COMPONENT as d
+};

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.d.ts

@@ -0,0 +1,7 @@
+import { SemanticSpacings } from '../../types';
+/**
+ * Función que retorna el valor del gap en función del tipo de gap recibido.
+ * @param gap - El gap a convertir.
+ * @returns El valor del gap en función del tipo de gap recibido.
+ */
+export declare const getSpacingValue: (gap: SemanticSpacings | number) => number;

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.js

@@ -0,0 +1,10 @@
+import { c as CONTAINER_FLOW_GAP_VALUES } from "../../constants.js";
+const getSpacingValue = (gap) => {
+  if (typeof gap === "number") {
+    return gap;
+  }
+  return CONTAINER_FLOW_GAP_VALUES[gap];
+};
+export {
+  getSpacingValue as g
+};

package/components/ContainerFlow/helpers/getSpacingValue/getSpacingValue.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/ContainerFlow/index.d.ts

@@ -0,0 +1,2 @@
+export { ContainerFlow } from './ContainerFlow';
+export type { ContainerFlowProps } from './types';

package/components/ContainerFlow/index.js

@@ -0,0 +1 @@
+

package/components/ContainerFlow/slots/ContainerFlowEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ContainerFlowSlots {
+    root = "root",
+    wrapperItem = "wrapperItem"
+}

package/components/ContainerFlow/slots/ContainerFlowEnum.js

@@ -0,0 +1,8 @@
+var ContainerFlowSlots = /* @__PURE__ */ ((ContainerFlowSlots2) => {
+  ContainerFlowSlots2["root"] = "root";
+  ContainerFlowSlots2["wrapperItem"] = "wrapperItem";
+  return ContainerFlowSlots2;
+})(ContainerFlowSlots || {});
+export {
+  ContainerFlowSlots as C
+};

package/components/ContainerFlow/slots/ContainerFlowSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const ContainerFlowRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerFlowWrapperItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').ContainerFlowOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/ContainerFlow/slots/ContainerFlowSlots.js

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material/styles";
+import { d as CONTAINER_FLOW_KEY_COMPONENT } from "../constants.js";
+import { C as ContainerFlowSlots } from "./ContainerFlowEnum.js";
+import { c as containerFlowStyles } from "../ContainerFlow.styles.js";
+const ContainerFlowRootStyled = styled("div", {
+  name: CONTAINER_FLOW_KEY_COMPONENT,
+  slot: ContainerFlowSlots.root
+})(containerFlowStyles?.root);
+const ContainerFlowWrapperItemStyled = styled("div", {
+  name: CONTAINER_FLOW_KEY_COMPONENT,
+  slot: ContainerFlowSlots.wrapperItem
+})(containerFlowStyles?.wrapperItem);
+export {
+  ContainerFlowWrapperItemStyled as C,
+  ContainerFlowRootStyled as a
+};

package/components/ContainerFlow/tests/ContainerFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/ContainerFlow/types.d.ts

@@ -0,0 +1,41 @@
+import { Sizes } from '@m4l/styles';
+import { ContainerFlowSlots } from './slots/ContainerFlowEnum';
+import { CONTAINER_FLOW_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export type ContainerFlowVariant = 'flex-wrap' | 'column-flex' | 'grid-layout';
+export type SemanticSpacings = 'compact' | 'comfortable' | 'standard';
+export type ContainerFlowProps = {
+    /**
+     * Variante del contenedor de items.
+     */
+    variant: ContainerFlowVariant;
+    /**
+     * Items del contenedor de items.
+     */
+    children: React.ReactNode;
+    /**
+     * Tamaño del contenedor de items.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Ancho mínimo de los items del contenedor de items.
+     */
+    minWidth?: number;
+    /**
+     * Clase del contenedor de items.
+     */
+    className?: string;
+    /**
+     * Espacio entre los items del contenedor de items.
+     */
+    gap?: SemanticSpacings | number;
+};
+export type ContainerFlowSlotsType = keyof typeof ContainerFlowSlots;
+export type ContainerFlowOwnerState = {
+    variant: ContainerFlowProps['variant'];
+    size: ContainerFlowProps['size'];
+    minWidth: ContainerFlowProps['minWidth'];
+    gap: ContainerFlowProps['gap'];
+};
+export type ContainerFlowStyles = M4LOverridesStyleRules<ContainerFlowSlots, typeof CONTAINER_FLOW_KEY_COMPONENT, Theme>;

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/Image/Image.js

@@ -13,12 +13,14 @@ function Image(props) {
     threshold = 100,
     dataTestId,
     className,
+    cover,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
   const ownerState = useMemo(() => ({
-    isSkeleton
-  }), [isSkeleton]);
+    isSkeleton,
+    cover
+  }), [cover, isSkeleton]);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(
       LazyLoadComponent,

package/components/Image/image.styles.js

@@ -2,11 +2,14 @@ const imageStyles = {
   /**
    * Estilos para Image.
    */
-  root: {
+  root: ({ ownerState }) => ({
     display: "flex",
     flexDirection: "column",
-    alignItems: "flex-start"
-  },
+    alignItems: "flex-start",
+    ...ownerState?.cover && {
+      objectFit: "cover"
+    }
+  }),
   /**
    * Estilos para el intersectComponente o para el 'span'
    */

package/components/Image/types.d.ts

@@ -31,9 +31,14 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     enableIntersectionObserver?: boolean;
     className?: string;
     dataTestId?: string;
+    /**
+     * Si es verdadero, la imagen se ajusta al contenedor y se recorta si es necesario.
+     */
+    cover?: boolean;
 }
 export type ImageSlotsType = keyof typeof ImageSlots;
 export interface ImageOwnerState {
     isSkeleton?: boolean;
+    cover?: boolean;
 }
 export type ImageStyles = M4LOverridesStyleRules<ImageSlots, typeof IMAGE_KEY_COMPONENT, Theme>;

package/components/NumberInput/hooks/useNumberInput/useNumberInput.js

@@ -56,9 +56,11 @@ const useNumberInput = (parameters) => {
     (event, field, fieldValue, reason) => {
       if (field === "value" && typeof fieldValue !== "string") {
         switch (reason) {
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:inputChange":
             onChange?.(event, fieldValue);
             break;
+          // only a blur event will dispatch `numberInput:clamp`
           case "numberInput:clamp":
             onChange?.(event, fieldValue);
             break;

package/components/PropertyValue/PropertyValue.styles.js

@@ -85,7 +85,7 @@ const propertyValueStyles = {
     width: "100%",
     display: "flex",
     justifyContent: "flex-start",
-    alignItems: "center",
+    alignItems: "flex-start",
     overflow: "hidden",
     height: ownerState?.valueHeight ? ownerState?.valueHeight : "auto",
     ...ownerState?.isForm && {

package/components/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -10,
-                    bottom: -10
+                    right: -MARGIN_GRIDLAYOUT,
+                    bottom: -MARGIN_GRIDLAYOUT
                   }
                 });
               }

package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js

@@ -65,6 +65,11 @@ const RHFAutocompleteAsyncReducer = (onChangeFilterParms) => (state, action) =>
         ...state,
         isOpen: false
       };
+    // case actionsType.SET_SELECTED_OPTIONS_TO_AUTOCOMPLETE:
+    //   return {
+    //     ...state,
+    //     selectedOptions: action.payload,
+    //   };
     default:
       return state;
   }

package/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './BaseModule';
 export * from './Chip';
 export * from './commercial';
 export * from './CommonActions/';
+export * from './ContainerFlow';
 export * from './CommonActions/dictionary';
 export * from './DataGrid';
 export * from './DragResizeWindowRND';

package/components/mui_extended/Accordion/styles.js

@@ -16,7 +16,8 @@ const accordionStyles = {
         borderRadius: "unset"
       },
       margin: "unset",
-      overflow: "visible"
+      overflow: "visible",
+      height: "min-content"
     }
   }),
   /**
@@ -102,10 +103,7 @@ const accordionStyles = {
    * **************************************************************
    */
   accordionDetails: ({ theme, ownerState }) => ({
-    paddingLeft: theme.vars.size.baseSpacings.sp3,
-    paddingRight: theme.vars.size.baseSpacings.sp3,
-    paddingTop: theme.vars.size.baseSpacings.sp1,
-    paddingBottom: theme.vars.size.baseSpacings.sp1,
+    padding: theme.vars.size.baseSpacings.sp4,
     background: theme.vars.palette.background.default,
     display: "flex",
     flexDirection: "column",

package/components/mui_extended/TabContent/TabContent.styles.js

@@ -1,3 +1,4 @@
+import { C as CONTAINER_QUERY_NAME } from "./constants.js";
 const tabContentStyles = {
   /**
    * Elemento root referencia a `TabContent`
@@ -9,6 +10,8 @@ const tabContentStyles = {
     paddingRight: 0,
     display: "flex",
     overflow: "auto",
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
     // height: '100%',
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp2,

package/components/mui_extended/TabContent/constants.d.ts

@@ -1 +1,2 @@
 export declare const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+export declare const CONTAINER_QUERY_NAME = "container";

package/components/mui_extended/TabContent/constants.js

@@ -1,4 +1,6 @@
 const TAB_CONTENT_KEY_COMPONENT = "M4LTabContent";
+const CONTAINER_QUERY_NAME = "container";
 export {
+  CONTAINER_QUERY_NAME as C,
   TAB_CONTENT_KEY_COMPONENT as T
 };

package/components/mui_extended/Typography/Typography.js

@@ -17,6 +17,7 @@ function Typography(props) {
     dataTestid,
     children,
     disabled,
+    ellipsis = false,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -28,7 +29,8 @@ function Typography(props) {
     size: adjustedSize,
     skeletonRows,
     variant,
-    skeleton: isSkeleton
+    skeleton: isSkeleton,
+    ellipsis
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

package/components/mui_extended/Typography/types.d.ts

@@ -43,6 +43,10 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     htmlFor?: string | undefined;
     /** Si esta disabled, el texto pasa a text.disabled */
     disabled?: boolean;
+    /**
+     * Si se activa, el texto se corta y se muestra un elipsis.
+     */
+    ellipsis?: boolean;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
@@ -54,6 +58,7 @@ export interface TypographyOwnerState {
     size: TypographyProps['size'];
     skeletonRows: TypographyProps['skeletonRows'];
     skeleton: boolean;
+    ellipsis: TypographyProps['ellipsis'];
 }
 /**
  * Agrupa la lista de slots del componente.

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

@@ -32,7 +32,13 @@ const typographyStyles = {
         theme.generalSettings.isMobile,
         ownerState?.size || "medium",
         ownerState?.variant || "body"
-      )
+      ),
+      // ellipsis 🔤
+      ...ownerState?.ellipsis && {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
     },
     ...ownerState?.skeleton ? {
       width: ownerState?.width ? ownerState?.width : "100%"

package/index.js

@@ -29,31 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
 import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
 import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
+import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
 import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
 import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
-import { C as C2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
+import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
-import { C as C3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
+import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
-import { C as C4 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
+import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
-import { C as C5 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { C as C6 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
+import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
 import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
-import { C as C7 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
+import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
 import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
-import { C as C8 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
+import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
 import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
-import { C as C9 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
+import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
 import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
-import { C as C10 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
+import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
 import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
-import { C as C11 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
+import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
 import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
-import { C as C12 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
+import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
@@ -74,7 +75,7 @@ import { V } from "./components/extended/React-Window/VariableSizeList/VariableS
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C13 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -84,7 +85,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C14 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Skeleton/Skeleton.js";
@@ -111,10 +112,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C15, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
-import { C as C16 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
@@ -241,22 +242,23 @@ export {
   B2 as BoxIcon,
   B3 as Breadcrumbs,
   B5 as Button,
-  C14 as CheckBox,
+  C15 as CheckBox,
   C as Chip,
-  C16 as ChipStatusFormatter,
-  C13 as CircularProgress,
-  C2 as ColumnBooleanFormatter,
-  C12 as ColumnChipStatusFormatter,
-  C3 as ColumnConcatenatedValueFormatter,
-  C4 as ColumnDateFormatter,
-  C5 as ColumnIconFormatter,
-  C6 as ColumnInteractiveCheckFormatter,
-  C7 as ColumnNestedValueFormatter,
-  C8 as ColumnPointsFormatter,
-  C9 as ColumnPriceFormatter,
-  C10 as ColumnSetCheckFormatter,
-  C11 as ColumnUncertaintyFormatter,
-  C15 as ConcatenatedFormatter,
+  C17 as ChipStatusFormatter,
+  C14 as CircularProgress,
+  C3 as ColumnBooleanFormatter,
+  C13 as ColumnChipStatusFormatter,
+  C4 as ColumnConcatenatedValueFormatter,
+  C5 as ColumnDateFormatter,
+  C6 as ColumnIconFormatter,
+  C7 as ColumnInteractiveCheckFormatter,
+  C8 as ColumnNestedValueFormatter,
+  C9 as ColumnPointsFormatter,
+  C10 as ColumnPriceFormatter,
+  C11 as ColumnSetCheckFormatter,
+  C12 as ColumnUncertaintyFormatter,
+  C16 as ConcatenatedFormatter,
+  C2 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
   e as DATAGRID_SEMANTIC_WIDTHS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.63",
+  "version": "9.2.64",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/ContainerFlow/ContainerFlow.stories.d.ts

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ContainerFlow } from '../../../src/components/ContainerFlow/ContainerFlow';
+/**
+ * Renderiza un chip para cada color
+ */
+declare const meta: Meta<typeof ContainerFlow>;
+type Story = StoryObj<typeof ContainerFlow>;
+/**
+ * FlexColumn
+ */
+export declare const H001_FlexColumn: Story;
+/**
+ * variante column-flex con 3 wrappers
+ */
+export declare const H002_FlexColumn3Wrappers: Story;
+/**
+ * variante column-flex con 2 wrappers
+ */
+export declare const H003_FlexColumn2Wrappers: Story;
+/**
+ * variante column-flex con 1 wrapper
+ */
+export declare const H004_FlexColumn1Wrappers: Story;
+/**
+ * variante flex-wrap
+ */
+export declare const H005_FlexWrap: Story;
+/**
+ * variante grid-layout
+ */
+export declare const H006_GridLayout: Story;
+export default meta;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn1Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn1Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn2Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn2Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexColumn3Wrappers/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexColumn3Wrappers: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderFlexWrap/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderFlexWrap: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/subcomponents/RenderGridLayout/index.d.ts

@@ -0,0 +1,5 @@
+import { ContainerFlowProps } from '../../../../../src/components/ContainerFlow/types';
+/**
+ * Renderiza el componente ContainerFlow con los props pasados.
+ */
+export declare const RenderGridLayout: (args: ContainerFlowProps) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/ContainerFlow/wrapperItems/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Componente que se encarga de envolver los items del contenedor de items.
+ * @param children - Los items del contenedor de items.
+ * @returns Un componente de tipo div con los estilos del contenedor de items.
+ */
+export declare const WrapperItems: ({ children, width, style }: {
+    children: React.ReactNode;
+    width?: string | number;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;