@m4l/components 9.3.2-B11082025-beta.1 → 9.3.2-B11082025-beta.2

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -264,7 +264,9 @@ const dynamicFilterStyles = {
   /**
    * popoverFilterActions: Estilos del contenedor de acciones del menú emergente de filtro.
    */
-  popoverFilterActions: {},
+  popoverFilterActions: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp6
+  }),
   /**
    * inputSortInputSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */
@@ -290,7 +292,7 @@ const dynamicFilterStyles = {
   popoverFilterContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp6
+    gap: theme.vars.size.baseSpacings.sp3
   })
 };
 export {

package/components/DynamicSort/DynamicSort.styles.js

@@ -267,12 +267,14 @@ const dynamicSortStyles = {
   popoverSortContainerFields: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp6
+    gap: theme.vars.size.baseSpacings.sp3
   }),
   /**
    * popoverSortActions: Estilos del contenedor de acciones del menú emergente de ordenamiento.
    */
-  popoverSortActions: {},
+  popoverSortActions: ({ theme }) => ({
+    paddingTop: theme.vars.size.baseSpacings.sp6
+  }),
   /**
    * inputSortSkeleton: Estilos del esqueleto del campo de entrada de ordenamiento.
    */

package/components/ObjectLogs/subcomponents/DetailDialog/index.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
-import { useHostTheme } from "@m4l/graphics";
-import ReactJson from "@microlink/react-json-view";
 import { a as OBJECT_LOGS_M4L_END_POINT, b as OBJECT_LOGS_OTHERS_END_POINT } from "../../constants.js";
+import { R as ReactJsonViewer } from "../../../extended/React-Json-Viewer/ReactJsonViewer.js";
 function DetailDialog(props) {
-  const { logId, theme, type } = props;
+  const { logId, type } = props;
   const { networkOperation } = useNetwork();
-  const { hostThemeOptions } = useHostTheme();
   const [detail, setDetail] = useState({});
   useEffect(() => {
     let mounted = true;
@@ -27,12 +25,9 @@ function DetailDialog(props) {
       mounted = false;
     };
   }, []);
-  const modeTheme = hostThemeOptions.palette?.mode;
-  const appliedTheme = theme || (modeTheme === "dark" ? "summerfruit" : "rjv-default");
   return /* @__PURE__ */ jsx(
-    ReactJson,
+    ReactJsonViewer,
     {
-      theme: appliedTheme,
       name: null,
       sortKeys: true,
       displayDataTypes: false,

package/components/ObjectLogs/types.d.ts

@@ -1,5 +1,4 @@
 import { Maybe } from '@m4l/core';
-import { ThemeKeys, ThemeObject } from '@microlink/react-json-view';
 import { Theme } from '@mui/material';
 import { ObjectLogsSlots } from './slots/ObjectLogsEnum';
 import { OBJECT_LOGS_KEY_COMPONENT } from './constants';
@@ -35,7 +34,6 @@ export interface ObjectLogsQueryParams {
 export interface DetailDialogProps {
     type: 'm4l' | 'other';
     logId: number | string;
-    theme?: ThemeKeys | ThemeObject;
 }
 export type ObjectLogsSlotsType = keyof typeof ObjectLogsSlots;
 export type ObjectLogsOwnerState = {};

package/components/extended/React-Json-Viewer/ReactJsonViewer.d.ts

@@ -0,0 +1,7 @@
+import { ReactJsonViewerProps } from './types';
+/**
+ * Componente para visualizar datos en formato JSON.
+ * @param props - Props del componente.
+ * @returns Componente ReactJsonViewer.
+ */
+export declare const ReactJsonViewer: (props: ReactJsonViewerProps) => import("react/jsx-runtime").JSX.Element;

package/components/extended/React-Json-Viewer/ReactJsonViewer.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import ReactJson from "@microlink/react-json-view";
+import { R as ReactJsonViewerRootStyled } from "./slots/ReactJsonViewerSlots.js";
+import { R as REACT_JSON_VIEWER_CLASSES } from "./constants.js";
+import { useTheme } from "@mui/material";
+import { g as getReactJsonViewerTheme } from "./helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js";
+const ReactJsonViewer = (props) => {
+  const { className, dataTestId, ...others } = props;
+  const muiTheme = useTheme();
+  const theme = getReactJsonViewerTheme(muiTheme);
+  return /* @__PURE__ */ jsx(
+    ReactJsonViewerRootStyled,
+    {
+      className: clsx(REACT_JSON_VIEWER_CLASSES.root, className),
+      dataTestId,
+      role: "application",
+      "aria-label": "JSON data viewer",
+      children: /* @__PURE__ */ jsx(
+        ReactJson,
+        {
+          theme,
+          ...others
+        }
+      )
+    }
+  );
+};
+export {
+  ReactJsonViewer as R
+};

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.d.ts

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

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.js

@@ -0,0 +1,12 @@
+const reactJsonViewerStyles = {
+  /**
+   * Estilos del componente ReactJson.
+   */
+  root: () => ({
+    width: "100%",
+    height: "100%"
+  })
+};
+export {
+  reactJsonViewerStyles as r
+};

package/components/extended/React-Json-Viewer/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+export declare const REACT_JSON_VIEWER_CLASSES: Record<string, string>;

package/components/extended/React-Json-Viewer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as ReactJsonViewerSlots } from "./slots/ReactJsonViewerEnum.js";
+const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+const REACT_JSON_VIEWER_CLASSES = getComponentClasses(REACT_JSON_VIEWER_KEY_COMPONENT, ReactJsonViewerSlots);
+export {
+  REACT_JSON_VIEWER_CLASSES as R,
+  REACT_JSON_VIEWER_KEY_COMPONENT as a
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.d.ts

@@ -0,0 +1,8 @@
+import { ThemeObject } from '@microlink/react-json-view';
+import { Theme } from '@mui/material';
+/**
+ * Función para obtener los colores del tema de MUI.
+ * @param muiTheme - Tema de MUI.
+ * @returns Colores del tema.
+ */
+export declare const getReactJsonViewerTheme: (muiTheme: Theme) => ThemeObject;

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js

@@ -0,0 +1,23 @@
+const getReactJsonViewerTheme = (muiTheme) => {
+  return {
+    base00: muiTheme?.vars?.palette?.background?.default,
+    base01: muiTheme?.vars?.palette?.background?.base,
+    base02: muiTheme?.vars?.palette?.background?.neutral,
+    base03: muiTheme?.vars?.palette?.text?.disabled,
+    base04: muiTheme?.vars?.palette?.text?.secondary,
+    base05: muiTheme?.vars?.palette?.text?.primary,
+    base06: muiTheme?.vars?.palette?.text?.primary,
+    base07: muiTheme?.vars?.palette?.text?.primary,
+    base08: muiTheme?.vars?.palette?.chips?.error?.outlined?.colorTone,
+    base09: muiTheme?.vars?.palette?.chips?.orange?.outlined?.color,
+    base0A: muiTheme?.vars?.palette?.chips?.warning?.outlined?.colorTone,
+    base0B: muiTheme?.vars?.palette?.chips?.forest?.outlined?.color,
+    base0C: muiTheme?.vars?.palette?.chips?.aqua?.outlined?.colorTone,
+    base0D: muiTheme?.vars?.palette?.chips?.info?.outlined?.colorTone,
+    base0E: muiTheme?.vars?.palette?.chips?.pink?.outlined?.colorTone,
+    base0F: muiTheme?.vars?.palette?.chips?.persianGreen?.outlined?.colorTone
+  };
+};
+export {
+  getReactJsonViewerTheme as g
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/index.d.ts

@@ -0,0 +1 @@
+export { getReactJsonViewerTheme } from './getReactJsonViewerTheme';

package/components/extended/React-Json-Viewer/index.d.ts

@@ -0,0 +1 @@
+export { ReactJsonViewer } from './ReactJsonViewer';

package/components/extended/React-Json-Viewer/index.js

@@ -0,0 +1 @@
+

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ReactJsonViewerSlots {
+    root = "root"
+}

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.js

@@ -0,0 +1,7 @@
+var ReactJsonViewerSlots = /* @__PURE__ */ ((ReactJsonViewerSlots2) => {
+  ReactJsonViewerSlots2["root"] = "root";
+  return ReactJsonViewerSlots2;
+})(ReactJsonViewerSlots || {});
+export {
+  ReactJsonViewerSlots as R
+};

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.d.ts

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

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { a as REACT_JSON_VIEWER_KEY_COMPONENT } from "../constants.js";
+import { R as ReactJsonViewerSlots } from "./ReactJsonViewerEnum.js";
+import { r as reactJsonViewerStyles } from "../ReactJsonViewer.styles.js";
+const ReactJsonViewerRootStyled = styled("div", {
+  name: REACT_JSON_VIEWER_KEY_COMPONENT,
+  slot: ReactJsonViewerSlots.root
+})(reactJsonViewerStyles?.root);
+export {
+  ReactJsonViewerRootStyled as R
+};

package/components/extended/React-Json-Viewer/test/ReactJsonViewer.test.d.ts

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

package/components/extended/React-Json-Viewer/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactJsonViewProps } from '@microlink/react-json-view';
+import { ReactJsonViewerSlots } from './slots/ReactJsonViewerEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { REACT_JSON_VIEWER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export interface ReactJsonViewerProps extends Omit<ReactJsonViewProps, 'theme'> {
+    className?: string;
+    dataTestId?: string;
+}
+export type ReactJsonViewerOwnerState = {};
+export type ReactJsonViewerSlotsType = keyof typeof ReactJsonViewerSlots;
+export type ReactJsonViewerStyles = M4LOverridesStyleRules<ReactJsonViewerSlotsType, typeof REACT_JSON_VIEWER_KEY_COMPONENT, Theme>;

package/components/extended/index.d.ts

@@ -2,3 +2,4 @@ export * from './React-Resizable';
 export * from './React-resizable-panels';
 export * from './React-Spinners';
 export * from './React-Window';
+export * from './React-Json-Viewer';

package/components/mui_extended/Tab/Tab.styles.js

@@ -49,10 +49,10 @@ const tabStyles = {
     },
     //Default
     "&:not(.Mui-selected)": {
-      ".M4LTab-icon div": {
-        backgroundColor: theme.vars.palette.text.secondary
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
       },
-      ".M4LTab-tipography": {
+      "& .M4LTab-tipography": {
         color: theme.vars.palette.text.secondary
       }
     },

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

@@ -24,6 +24,7 @@ const tabContentStyles = {
     zIndex: "0",
     top: "-1px",
     ...ownerState?.hasBackground ? {
+      backgroundColor: theme.vars.palette?.background.base,
       paddingLeft: theme.vars.size.baseSpacings.sp2,
       paddingRight: theme.vars.size.baseSpacings.sp2,
       paddingBottom: theme.vars.size.baseSpacings.sp2

package/components/mui_extended/TextField/TextField.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import clsx from "clsx";
-import { S as SkeletonStyled, T as TextFieldRootStyled, L as LimitContainerStyled, a as LimitTextFirstStyled, b as LimitTextSecondStyled } from "./slots/TextFieldSlots.js";
+import { S as SkeletonStyled, T as TextFieldRootStyled, L as LimitContainerStyled, a as LimitTextFirstStyled, b as LimitTextSeparatorStyled, c as LimitTextSecondStyled } from "./slots/TextFieldSlots.js";
 import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { T as TEXT_FIELD_CLASSES, a as TEXT_FIELD_KEY_COMPONENT } from "./constants.js";
 import { T as TextFieldSlots } from "./slots/TextFieldEnum.js";
 import { useTheme } from "@mui/material";
 import { forwardRef } from "react";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { T as Typography } from "../Typography/Typography.js";
 const TextField = forwardRef(function TextField2(props, ref) {
   const {
     value,
@@ -28,6 +27,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const theme = useTheme();
   const paletteColor = error && theme.vars.palette.error || theme.vars.palette.primary;
+  const percent = maxLength ? value.length / maxLength * 100 : 0;
   const ownerState = {
     size: adjustedSize,
     disabled,
@@ -70,9 +70,9 @@ const TextField = forwardRef(function TextField2(props, ref) {
         ...InputProps,
         ...maxLength && {
           endAdornment: /* @__PURE__ */ jsxs(LimitContainerStyled, { children: [
-            /* @__PURE__ */ jsx(LimitTextFirstStyled, { role: "text", "aria-label": "current characters", variant: "body", color: "text.secondary", ownerState: { percent: value.length / maxLength * 100 }, children: value.length }),
-            /* @__PURE__ */ jsx(Typography, { variant: "body", color: "text.secondary", children: "/" }),
-            /* @__PURE__ */ jsx(LimitTextSecondStyled, { role: "text", "aria-label": "limit characters", variant: "body", color: "text.secondary", children: maxLength }),
+            /* @__PURE__ */ jsx(LimitTextFirstStyled, { role: "text", "aria-label": "current characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: value.length }),
+            /* @__PURE__ */ jsx(LimitTextSeparatorStyled, { variant: "body", color: "text.secondary", ownerState: { percent }, children: "/" }),
+            /* @__PURE__ */ jsx(LimitTextSecondStyled, { role: "text", "aria-label": "limit characters", variant: "body", color: "text.secondary", ownerState: { percent }, children: maxLength }),
             InputProps?.endAdornment
           ] })
         },

package/components/mui_extended/TextField/TextField.styles.js

@@ -1,6 +1,15 @@
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 import { a as getHeightSizeStyles, g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { T as TEXT_FIELD_CLASSES } from "./constants.js";
+const getLimitTextColor = (percent, theme) => {
+  if (percent && percent > 79 && percent < 100) {
+    return theme.vars.palette.warning.semanticText;
+  }
+  if (percent === 100) {
+    return theme.vars.palette.chips.forest.outlined.colorTone;
+  }
+  return theme.vars.palette.text.secondary;
+};
 const textFieldStyles = {
   /**
    * Estilos personalizados para el componente TextField.
@@ -163,13 +172,24 @@ const textFieldStyles = {
     paddingLeft: theme.vars.size.baseSpacings.sp1,
     paddingRight: theme.vars.size.baseSpacings.sp1
   }),
+  /**
+   * Estilos personalizados para el texto de limite de caracteres.
+   */
   limitTextFirst: ({ ownerState, theme }) => ({
-    color: ownerState?.percent && ownerState?.percent > 79 && ownerState?.percent < 100 ? theme.vars.palette.warning.semanticText : theme.vars.palette.text.secondary
+    color: getLimitTextColor(ownerState?.percent || 0, theme)
+  }),
+  /**
+   * Estilos personalizados para el texto de limite de caracteres.
+   */
+  limitTextSeparator: ({ ownerState, theme }) => ({
+    color: getLimitTextColor(ownerState?.percent || 0, theme)
   }),
   /**
    * Estilos personalizados para el texto de limite de caracteres.
    */
-  limitTextSecond: {}
+  limitTextSecond: ({ ownerState, theme }) => ({
+    color: getLimitTextColor(ownerState?.percent || 0, theme)
+  })
 };
 export {
   textFieldStyles as t

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

@@ -9,6 +9,7 @@ export declare const COMBINATED_TEXTFIELD_ENUMS: {
     skeleton: TextFieldSlots.skeleton;
     limitContainer: TextFieldSlots.limitContainer;
     limitTextFirst: TextFieldSlots.limitTextFirst;
+    limitTextSeparator: TextFieldSlots.limitTextSeparator;
     limitTextSecond: TextFieldSlots.limitTextSecond;
 };
 /**

package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts

@@ -3,6 +3,7 @@ export declare enum TextFieldSlots {
     skeleton = "skeleton",
     limitContainer = "limitContainer",
     limitTextFirst = "limitTextFirst",
+    limitTextSeparator = "limitTextSeparator",
     limitTextSecond = "limitTextSecond"
 }
 export declare enum TextFieldComplementaryClasses {

package/components/mui_extended/TextField/slots/TextFieldEnum.js

@@ -3,6 +3,7 @@ var TextFieldSlots = /* @__PURE__ */ ((TextFieldSlots2) => {
   TextFieldSlots2["skeleton"] = "skeleton";
   TextFieldSlots2["limitContainer"] = "limitContainer";
   TextFieldSlots2["limitTextFirst"] = "limitTextFirst";
+  TextFieldSlots2["limitTextSeparator"] = "limitTextSeparator";
   TextFieldSlots2["limitTextSecond"] = "limitTextSecond";
   return TextFieldSlots2;
 })(TextFieldSlots || {});

package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts

@@ -14,6 +14,11 @@ export declare const LimitTextFirstStyled: import('@emotion/styled').StyledCompo
 }, "children" | "zIndex" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "color" | "left" | "right" | "bottom" | "top" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping">, "children" | "ref" | "title" | "zIndex" | "id" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "content" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
+export declare const LimitTextSeparatorStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "zIndex" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "color" | "left" | "right" | "bottom" | "top" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping">, "children" | "ref" | "title" | "zIndex" | "id" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "content" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
 export declare const LimitTextSecondStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
 }, "children" | "zIndex" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "color" | "left" | "right" | "bottom" | "top" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping">, "children" | "ref" | "title" | "zIndex" | "id" | "paragraph" | "border" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontSize" | "textTransform" | "fontFamily" | "typography" | "flex" | "hidden" | "color" | "left" | "right" | "bottom" | "top" | "content" | "style" | "position" | "padding" | "variant" | "borderRadius" | "width" | "display" | "borderColor" | "height" | "gap" | "minHeight" | "margin" | "overflow" | "boxShadow" | "minWidth" | "justifyContent" | "alignItems" | "paddingLeft" | "borderLeft" | "borderTop" | "maxWidth" | "flexDirection" | "paddingRight" | "borderRight" | "flexGrow" | "marginLeft" | "textOverflow" | "borderBottom" | "gridTemplateColumns" | "marginBottom" | "alignContent" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateRows" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginRight" | "marginTop" | "maxHeight" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingTop" | "rowGap" | "textAlign" | "translate" | "visibility" | "whiteSpace" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "className" | "classes" | "sx" | "p" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {

package/components/mui_extended/TextField/slots/TextFieldSlots.js

@@ -20,6 +20,10 @@ const LimitTextFirstStyled = styled(Typography, {
   name: TEXT_FIELD_KEY_COMPONENT,
   slot: TextFieldSlots.limitTextFirst
 })(textFieldStyles?.limitTextFirst);
+const LimitTextSeparatorStyled = styled(Typography, {
+  name: TEXT_FIELD_KEY_COMPONENT,
+  slot: TextFieldSlots.limitTextSeparator
+})(textFieldStyles?.limitTextSeparator);
 const LimitTextSecondStyled = styled(Typography, {
   name: TEXT_FIELD_KEY_COMPONENT,
   slot: TextFieldSlots.limitTextSecond
@@ -29,5 +33,6 @@ export {
   SkeletonStyled as S,
   TextFieldRootStyled as T,
   LimitTextFirstStyled as a,
-  LimitTextSecondStyled as b
+  LimitTextSeparatorStyled as b,
+  LimitTextSecondStyled as c
 };

package/hooks/useIsVisible/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MIN_HEIGHT_THRESHOLD = 55;

package/hooks/useIsVisible/constants.js

@@ -0,0 +1,4 @@
+const DEFAULT_MIN_HEIGHT_THRESHOLD = 55;
+export {
+  DEFAULT_MIN_HEIGHT_THRESHOLD as D
+};

package/hooks/useIsVisible/useIsVisible.d.ts

@@ -1,8 +1,28 @@
 /**
  * Custom hook para verificar si el contenedor debería ser visible en la pantalla.
  * Cada vez que el contenedor cambia de tamaño, el hook revisa si su altura es al menos de 55 píxeles o mayor (o el valor que se le pasa como argumento).
- * Si es lo suficientemente alta, dice “sí, está visible” (true), si no, dice “no, está demasiado pequeña” (false).
+ * Si es lo suficientemente alta, dice "sí, está visible" (true), si no, dice "no, está demasiado pequeña" (false).
+ * El hook useIsVisible es esencial ya que tanto las consultas de contenedor (container queries) como las consultas de medios (media queries) en css
+ * solo responden a cambios en el eje X del contenedor. No obstante, en este escenario de desarrollo, necesitamos evaluar también el eje Y.
  * @param containerRef - Referencia al contenedor del componente.
+ * @param minHeightThreshold - Umbral mínimo de altura en píxeles para considerar el contenedor como visible (por defecto: 55).
  * @returns true si el contenedor debería ser visible, false en caso contrario.
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const isVisible = useIsVisible(containerRef, 100); // Visible solo si altura >= 100px
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {isVisible ? (
+ *         <img src="large-image.jpg" alt="Imagen grande" />
+ *       ) : (
+ *         <div>Contenedor demasiado pequeño para mostrar imagen</div>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
  */
 export declare const useIsVisible: (containerRef: React.RefObject<HTMLDivElement>, minHeightThreshold?: number) => boolean;

package/hooks/useIsVisible/useIsVisible.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
-const useIsVisible = (containerRef, minHeightThreshold = 55) => {
+import { D as DEFAULT_MIN_HEIGHT_THRESHOLD } from "./constants.js";
+const useIsVisible = (containerRef, minHeightThreshold = DEFAULT_MIN_HEIGHT_THRESHOLD) => {
   const [isVisible, setIsVisible] = useState(true);
   useEffect(() => {
     const observer = new ResizeObserver((entries) => {

package/index.js

@@ -73,6 +73,7 @@ import { S as S3 } from "./components/extended/React-resizable-panels/SplitLayou
 import { P } from "./components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 import { F } from "./components/extended/React-Window/FixedSizeList/FixedSizeList.js";
 import { V } from "./components/extended/React-Window/VariableSizeList/VariableSizeList.js";
+import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer.js";
 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";
@@ -122,34 +123,34 @@ import { g as g17 } from "./components/formatters/DistanceToNowFormatter/diction
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R3 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R4 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c2, e as e2, d as d3 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
 import { H as H3 } from "./components/HelperError/HelperError.js";
-import { R as R4 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { R as R5 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
 import { g as g19 } from "./components/hook-form/RHFAutocomplete/dictionary.js";
-import { R as R5 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
+import { R as R6 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
 import { g as g20 } from "./components/hook-form/RHFAutocompleteAsync/dictionary.js";
-import { R as R6 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
-import { R as R7 } from "./components/hook-form/RHFMultiCheckbox/index.js";
-import { R as R8 } from "./components/hook-form/RHFSelect/RHFSelect.js";
-import { R as R9 } from "./components/hook-form/RHFHelperError/index.js";
-import { R as R10 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R11 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
-import { R as R12 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R13 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R14 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R15 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R7 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
+import { R as R8 } from "./components/hook-form/RHFMultiCheckbox/index.js";
+import { R as R9 } from "./components/hook-form/RHFSelect/RHFSelect.js";
+import { R as R10 } from "./components/hook-form/RHFHelperError/index.js";
+import { R as R11 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
+import { R as R12 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
+import { R as R13 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R14 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R15 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R16 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { g as g21 } from "./components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js";
 import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
-import { R as R16 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R17 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R18 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { N as N3, P as P6, R as R19, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
-import { R as R20 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R21 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R17 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R18 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R19 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { N as N3, P as P6, R as R20, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { R as R21 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R22 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { I as I4 } from "./components/Icon/Icon.js";
 import { I as I5 } from "./components/Image/Image.js";
 import { L as L6 } from "./components/Label/Label.js";
@@ -192,7 +193,7 @@ import { a as a14, g as g28 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
 import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { F as F2, R as R22, u as u16 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F2, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g29 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u17 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
@@ -334,28 +335,29 @@ export {
   P11 as PrintingSystem,
   P as PropagateLoaderSpinner,
   P12 as PropertyValue,
-  R4 as RHFAutocomplete,
-  R5 as RHFAutocompleteAsync,
-  R13 as RHFCheckbox,
-  R12 as RHFColorPicker,
-  R6 as RHFDateTime,
-  R9 as RHFHelperError,
-  R7 as RHFMultiCheckbox,
-  R20 as RHFNumberInput,
-  R16 as RHFPeriod,
-  R19 as RHFPeriodRootStyled,
-  R18 as RHFPeriodSlots,
-  R10 as RHFRadioGroup,
-  R8 as RHFSelect,
-  R14 as RHFTextField,
-  R15 as RHFTextFieldPassword,
-  R21 as RHFUploadImage,
-  R11 as RHFUploadSingleFile,
-  R17 as RHF_PERIOD_KEY_COMPONENT,
-  R22 as RHFormProvider,
+  R5 as RHFAutocomplete,
+  R6 as RHFAutocompleteAsync,
+  R14 as RHFCheckbox,
+  R13 as RHFColorPicker,
+  R7 as RHFDateTime,
+  R10 as RHFHelperError,
+  R8 as RHFMultiCheckbox,
+  R21 as RHFNumberInput,
+  R17 as RHFPeriod,
+  R20 as RHFPeriodRootStyled,
+  R19 as RHFPeriodSlots,
+  R11 as RHFRadioGroup,
+  R9 as RHFSelect,
+  R15 as RHFTextField,
+  R16 as RHFTextFieldPassword,
+  R22 as RHFUploadImage,
+  R12 as RHFUploadSingleFile,
+  R18 as RHF_PERIOD_KEY_COMPONENT,
+  R23 as RHFormProvider,
+  R3 as ReactJsonViewer,
   R as Resizable,
   R2 as ResizableBox,
-  R3 as Responsive,
+  R4 as Responsive,
   S11 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.2-B11082025-beta.1",
+  "version": "9.3.2-B11082025-beta.2",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.4-B11082025-beta.1",
-    "@m4l/styles": "7.1.31-B11082025-beta.1",
+    "@m4l/graphics": "^7.0.0",
+    "@m4l/styles": "^7.0.0",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/storybook/components/extended/React-Json-Viewer/ReactJsonViewer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactJsonViewer } from '../../../../src/components/extended/React-Json-Viewer';
+declare const meta: Meta<typeof ReactJsonViewer>;
+export default meta;
+type Story = StoryObj<typeof ReactJsonViewer>;
+/**
+ * ReactJsonViewer historia por defecto.
+ */
+export declare const ReactJsonViewerDefault: Story;