@m4l/components 9.2.41 → 9.2.43

package/components/extended/React-resizable-panels/SplitLayout.d.ts

@@ -0,0 +1,14 @@
+import { SplitLayoutProps } from './types';
+/**
+ * Componente SplitLayout que permite dividir la pantalla en dos partes, la primera parte se muestra en el lado izquierdo y la segunda parte se muestra en el lado derecho.
+ * de la libreria de react-resizable-panels
+ *@example
+ * ```
+ * <SplitLayout
+ * splitPosition={isDesktop ? splitPosition : 'none'}
+ * firstPart={masterComponent}
+ * secondPart={detailComponent}
+ * />
+ * ```
+ */
+export declare const SplitLayout: (props: SplitLayoutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { S as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
+import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
+import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitResizeHandleStyled, c as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
+const SplitLayout = (props) => {
+  const { firstPart, secondPart, splitPosition, dataTestId } = props;
+  const classes = getComponentClasses(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots);
+  return /* @__PURE__ */ jsx(Fragment, { children: splitPosition === "none" ? void 0 : /* @__PURE__ */ jsxs(
+    SplitLayoutRootStyled,
+    {
+      ...getPropDataTestId(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots.root, dataTestId),
+      className: classes.root,
+      direction: splitPosition,
+      children: [
+        /* @__PURE__ */ jsx(
+          SplitMasterStyled,
+          {
+            ...getPropDataTestId(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots.splitMaster, dataTestId),
+            className: classes.master,
+            children: typeof firstPart === "function" ? firstPart() : firstPart
+          }
+        ),
+        /* @__PURE__ */ jsx(SplitResizeHandleStyled, { className: `${classes.splitResizeHandle}-${splitPosition}` }),
+        /* @__PURE__ */ jsx(
+          SplitDetailStyled,
+          {
+            ...getPropDataTestId(SPLIT_LAYOUT_KEY_COMPONENT, SplitLayoutSlots.splitDetail, dataTestId),
+            className: classes.splitDetail,
+            children: typeof secondPart === "function" ? secondPart() : secondPart
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  SplitLayout as S
+};

package/components/extended/React-resizable-panels/SplitLayout.styles.d.ts

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

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

@@ -0,0 +1,99 @@
+const splitLayoutStyles = {
+  /**
+   * Estilos para el root
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    height: "100%",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos para el splitMaster
+   */
+  splitMaster: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    "& .M4LStack-root": {
+      gap: "8px"
+    }
+  },
+  /**
+   * Estilos para el splitDetail
+   */
+  splitDetail: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    left: "0px",
+    right: "0px",
+    top: "0px",
+    bottom: "0px",
+    "& .M4LStack-root": {
+      overflow: "hidden"
+    }
+  },
+  /**
+   * Estilos para el splitResizeHandle
+   */
+  splitResizeHandle: ({ theme }) => ({
+    position: "relative",
+    "&.M4LSplitLayout-splitResizeHandle-horizontal": {
+      width: "2px",
+      margin: "1px 0px",
+      background: theme.vars.palette.border.default,
+      "&:before": {
+        position: "absolute",
+        display: "flex",
+        content: `""`,
+        width: "4px",
+        height: "56px",
+        left: "-1px",
+        top: "calc(50% - 30.5px)",
+        background: theme.vars.palette.primary.enabled,
+        borderRadius: theme.vars.size.borderRadius["r0-5"],
+        zIndex: "1"
+      },
+      "&:hover:before": {
+        background: theme.vars.palette.primary.hover
+      },
+      "&:active:before": {
+        background: theme.vars.palette.primary.hover
+      }
+    },
+    "&.M4LSplitLayout-splitResizeHandle-vertical": {
+      height: "2px",
+      margin: "0px 1px",
+      background: theme.vars.palette.border.default,
+      "&:before": {
+        position: "absolute",
+        display: "flex",
+        content: `""`,
+        width: "56px",
+        height: "4px",
+        top: "-1px",
+        left: "calc(50% - 22.5px)",
+        background: theme.vars.palette.primary.enabled,
+        borderRadius: theme.vars.size.borderRadius["r0-5"],
+        zIndex: "1"
+      },
+      "&:hover:before": {
+        background: theme.vars.palette.primary.hover
+      },
+      "&:active:before": {
+        background: theme.vars.palette.primary.hover
+      }
+    }
+  })
+};
+export {
+  splitLayoutStyles as s
+};

package/components/extended/React-resizable-panels/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Clave del componente SplitLayout
+ */
+export declare const SPLIT_LAYOUT_KEY_COMPONENT = "M4LSplitLayout";

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

@@ -0,0 +1,4 @@
+const SPLIT_LAYOUT_KEY_COMPONENT = "M4LSplitLayout";
+export {
+  SPLIT_LAYOUT_KEY_COMPONENT as S
+};

package/components/extended/React-resizable-panels/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SplitLayout';
+export type { SplitPosition } from './types';

package/components/extended/React-resizable-panels/slots/SplitLayoutEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum SplitLayoutSlots {
+    root = "root",
+    splitMaster = "splitMaster",
+    splitDetail = "splitDetail",
+    splitResizeHandle = "splitResizeHandle"
+}

package/components/extended/{React-Splitter-Layout → React-resizable-panels}/slots/SplitLayoutEnum.js

@@ -2,6 +2,7 @@ var SplitLayoutSlots = /* @__PURE__ */ ((SplitLayoutSlots2) => {
   SplitLayoutSlots2["root"] = "root";
   SplitLayoutSlots2["splitMaster"] = "splitMaster";
   SplitLayoutSlots2["splitDetail"] = "splitDetail";
+  SplitLayoutSlots2["splitResizeHandle"] = "splitResizeHandle";
   return SplitLayoutSlots2;
 })(SplitLayoutSlots || {});
 export {

package/components/extended/React-resizable-panels/slots/SplitLayoutSlots.d.ts

@@ -0,0 +1,65 @@
+export declare const SplitLayoutRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
+    autoSaveId?: string | null | undefined;
+    className?: string | undefined;
+    direction: import('react-resizable-panels/dist/declarations/src/types').Direction;
+    id?: string | null | undefined;
+    keyboardResizeBy?: number | null | undefined;
+    onLayout?: import('react-resizable-panels').PanelGroupOnLayout | null | undefined;
+    storage?: import('react-resizable-panels').PanelGroupStorage | undefined;
+    style?: import('react').CSSProperties | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+    dir?: "auto" | "ltr" | "rtl" | undefined;
+} & {
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<import('react-resizable-panels').ImperativePanelGroupHandle>, "children" | "title" | "storage" | "id" | "direction" | "hidden" | "color" | "content" | "style" | "translate" | "className" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "autoSaveId" | "keyboardResizeBy" | "onLayout" | "tagName" | keyof import('react').RefAttributes<import('react-resizable-panels').ImperativePanelGroupHandle>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SplitMasterStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLMeterElement | HTMLTextAreaElement | HTMLStyleElement | HTMLTableElement | HTMLEmbedElement | HTMLPreElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string | undefined;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: import('react-resizable-panels').PanelOnCollapse | undefined;
+    onExpand?: import('react-resizable-panels').PanelOnExpand | undefined;
+    onResize?: import('react-resizable-panels').PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>, "children" | "title" | "id" | "hidden" | "color" | "content" | "style" | "order" | "translate" | "className" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "defaultSize" | "minSize" | "maxSize" | "tagName" | "collapsedSize" | "collapsible" | "onCollapse" | "onExpand" | keyof import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SplitDetailStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLMeterElement | HTMLTextAreaElement | HTMLStyleElement | HTMLTableElement | HTMLEmbedElement | HTMLPreElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string | undefined;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: import('react-resizable-panels').PanelOnCollapse | undefined;
+    onExpand?: import('react-resizable-panels').PanelOnExpand | undefined;
+    onResize?: import('react-resizable-panels').PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import('react').ReactNode;
+} & import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>, "children" | "title" | "id" | "hidden" | "color" | "content" | "style" | "order" | "translate" | "className" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "defaultSize" | "minSize" | "maxSize" | "tagName" | "collapsedSize" | "collapsible" | "onCollapse" | "onExpand" | keyof import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SplitResizeHandleStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onFocus" | "onBlur" | "onClick" | "onPointerDown" | "onPointerUp"> & {
+    className?: string;
+    disabled?: boolean;
+    hitAreaMargins?: import('react-resizable-panels').PointerHitAreaMargins;
+    id?: string | null;
+    onBlur?: () => void;
+    onClick?: () => void;
+    onDragging?: import('react-resizable-panels').PanelResizeHandleOnDragging;
+    onFocus?: () => void;
+    onPointerDown?: () => void;
+    onPointerUp?: () => void;
+    style?: import('react').CSSProperties;
+    tabIndex?: number;
+    tagName?: keyof HTMLElementTagNameMap;
+} & {
+    children?: import('react').ReactNode | undefined;
+}, "children" | "title" | "id" | "disabled" | "hidden" | "color" | "content" | "style" | "translate" | "className" | "slot" | "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" | "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" | "onResize" | "onResizeCapture" | "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" | "tagName" | "hitAreaMargins" | "onDragging"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/extended/React-resizable-panels/slots/SplitLayoutSlots.js

@@ -0,0 +1,27 @@
+import { styled } from "@mui/material/styles";
+import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
+import { S as SPLIT_LAYOUT_KEY_COMPONENT } from "../constants.js";
+import { s as splitLayoutStyles } from "../SplitLayout.styles.js";
+import { S as SplitLayoutSlots } from "./SplitLayoutEnum.js";
+const SplitLayoutRootStyled = styled(PanelGroup, {
+  slot: SplitLayoutSlots.root,
+  name: SPLIT_LAYOUT_KEY_COMPONENT
+})(splitLayoutStyles.root);
+const SplitMasterStyled = styled(Panel, {
+  slot: SplitLayoutSlots.splitMaster,
+  name: SPLIT_LAYOUT_KEY_COMPONENT
+})(splitLayoutStyles.splitMaster);
+const SplitDetailStyled = styled(Panel, {
+  slot: SplitLayoutSlots.splitDetail,
+  name: SPLIT_LAYOUT_KEY_COMPONENT
+})(splitLayoutStyles.splitDetail);
+const SplitResizeHandleStyled = styled(PanelResizeHandle, {
+  slot: SplitLayoutSlots.splitResizeHandle,
+  name: SPLIT_LAYOUT_KEY_COMPONENT
+})(splitLayoutStyles.splitResizeHandle);
+export {
+  SplitLayoutRootStyled as S,
+  SplitMasterStyled as a,
+  SplitResizeHandleStyled as b,
+  SplitDetailStyled as c
+};

package/components/extended/React-resizable-panels/tests/SplitLayout.test.d.ts

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

package/components/extended/React-resizable-panels/types.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@mui/material';
+import { ReactNode } from 'react';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { SPLIT_LAYOUT_KEY_COMPONENT } from './constants';
+import { SplitLayoutSlots as slots } from './slots/SplitLayoutEnum';
+export type SplitPosition = 'vertical' | 'horizontal' | 'none';
+export interface SplitLayoutProps {
+    /**representa el contenido o componente que se mostrará en la primera parte de la interfaz de usuario. */
+    firstPart?: ((props?: any) => JSX.Element) | ReactNode;
+    /** representa el contenido o componente que se mostrará en la segunda parte de la interfaz de usuario,la parte sea de abajo o a la derecha*/
+    secondPart?: ((props?: any) => JSX.Element) | ReactNode;
+    /** determina la orientación de la división entre las dos partes de la interfaz de usuario. Puede tener tres valores: "vertical", "horizontal" o "none". */
+    splitPosition: SplitPosition;
+    /** se utiliza el `dataTestId` para las pruebas unitarias */
+    dataTestId?: string;
+}
+export type SplitLayoutStyles = M4LOverridesStyleRules<keyof typeof slots, typeof SPLIT_LAYOUT_KEY_COMPONENT, Theme>;

package/components/extended/index.d.ts

@@ -1,4 +1,4 @@
 export * from './React-Resizable';
-export * from './React-Splitter-Layout';
+export * from './React-resizable-panels';
 export * from './React-Spinners';
 export * from './React-Window';

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -1,4 +1,4 @@
-import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const autocompleteSyles = {
   /**
    * Styles for the root component.
@@ -17,7 +17,11 @@ const autocompleteSyles = {
   adorments: ({ theme }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0
   }),
   /**
    * Styles for the typography component.
@@ -48,10 +52,13 @@ const autocompleteSyles = {
   textField: ({ theme }) => ({
     // position: 'relative',
     height: "auto !important",
+    position: "relative",
     "& .MuiInputBase-root": {
-      padding: "unset !important",
+      padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp12} ${theme.vars.size.baseSpacings.sp1}  0!important`,
       gap: theme.vars.size.baseSpacings.sp1,
+      flexWrap: "wrap",
       "& > input": {
+        width: "100px",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         overflow: "hidden!important"
@@ -80,8 +87,8 @@ const autocompleteSyles = {
       background: theme.vars.palette.skeleton.transition,
       display: "flex",
       borderRadius: theme.vars.size.borderRadius.r1,
-      ...getHeightSizeStyles(
-        theme.generalSettings.isMobile,
+      ...getSizeStyles(
+        theme,
         ownerState?.size || "medium",
         "action",
         (height) => ({ minHeight: height })

package/index.js

@@ -65,7 +65,7 @@ import { S as S2 } from "./components/DynamicSort/helpers/frontEndHelpers.js";
 import { D as D5 } from "./components/DynamicSort/DynamicSort.js";
 import { R } from "./components/extended/React-Resizable/Resizable/Resizable.js";
 import { R as R2 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
-import { S as S3 } from "./components/extended/React-Splitter-Layout/SplitLayout.js";
+import { S as S3 } from "./components/extended/React-resizable-panels/SplitLayout.js";
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.41",
+  "version": "9.2.43",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"
@@ -48,6 +48,7 @@
     "react-intersection-observer": "^9.4.0",
     "react-leaflet": "^4.2.1",
     "react-resizable": "^3.0.4",
+    "react-resizable-panels": "^2.1.8",
     "react-rnd": "^10.5.2",
     "react-router-dom": "6.3.0",
     "react-spinners": "^0.13.8",

package/storybook/components/extended/React-resizable-panels/SplitLayout.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SplitLayout } from '../../../../src/components/extended/React-resizable-panels/SplitLayout';
+declare const meta: Meta<typeof SplitLayout>;
+export default meta;
+type Story = StoryObj<typeof SplitLayout>;
+/**
+ * Componente `SplitLayout` con historia por base
+ */
+export declare const Base: Story;
+/**
+ * Componente `SplitLayout` con las `props` `firstPart` y `secondPart`
+ */
+export declare const WithProps: Story;

package/commonjs/index.js

@@ -1,8 +0,0 @@
-import "prop-types";
-import "react";
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-export {
-  getDefaultExportFromCjs as g
-};

package/components/extended/React-Splitter-Layout/SplitLayout.js

@@ -1,53 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { S as SplitterLayout } from "../../../internal_libs/react-splitter-layout.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { S as SplitLayoutRootStyled, a as SplitMasterStyled, b as SplitDetailStyled } from "./slots/SplitLayoutSlots.js";
-import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";
-import { S as SPLIT_LAYOUT_PREFIX, a as SPLIT_LAYOUT_KEY_COMPONENT } from "./constants.js";
-const SplitLayout = (props) => {
-  const {
-    splitPosition,
-    firstPart,
-    secondPart,
-    secondParrtInitialSize = 50,
-    percentage = true,
-    dataTestId,
-    className
-  } = props;
-  return /* @__PURE__ */ jsx(
-    SplitLayoutRootStyled,
-    {
-      ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.root, dataTestId),
-      className: clsx(getComponentSlotRoot(SPLIT_LAYOUT_KEY_COMPONENT), className),
-      children: /* @__PURE__ */ jsxs(
-        SplitterLayout,
-        {
-          vertical: splitPosition === "vertical",
-          percentage,
-          secondaryInitialSize: secondParrtInitialSize,
-          children: [
-            /* @__PURE__ */ jsx(
-              SplitMasterStyled,
-              {
-                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitMaster, dataTestId),
-                children: typeof firstPart === "function" ? firstPart() : firstPart
-              }
-            ),
-            splitPosition !== "none" && /* @__PURE__ */ jsx(
-              SplitDetailStyled,
-              {
-                ...getPropDataTestId(SPLIT_LAYOUT_PREFIX, SplitLayoutSlots.splitDetail, dataTestId),
-                children: typeof secondPart === "function" ? secondPart() : secondPart
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  SplitLayout as S
-};

package/components/extended/React-Splitter-Layout/SplitLayout.styles.js

@@ -1,157 +0,0 @@
-const splitLayoutStyles = {
-  /**
-   * Estilos para root
-   */
-  root: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    position: "relative",
-    flexGrow: 1,
-    overflow: "hidden",
-    // Configuracion por defecto en horizontal
-    "& .splitter-layout": {
-      position: "absolute",
-      display: "flex",
-      flexDirection: "row",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      gap: theme.vars.size.baseSpacings.sp2
-    },
-    // Configuracion de ambos paneles a dividir
-    "& .splitter-layout .layout-pane": {
-      position: "relative",
-      flex: "0 0 auto",
-      overflow: "hidden"
-    },
-    // Configuración del panel principal
-    "& .splitter-layout .layout-pane.layout-pane-primary": {
-      flex: "1 1 auto"
-    },
-    // Configuración del cursor en horizontal
-    "& .splitter-layout.layout-changing": {
-      cursor: "col-resize"
-    },
-    // Configuración barran grande cuando es horizontal
-    "& .splitter-layout > .layout-splitter": {
-      display: "flex",
-      alignItems: "center",
-      backgroundColor: "none",
-      boxSizing: "border-box",
-      backgroundClip: "padding-box",
-      // Propiedades del horizontal
-      width: "8px",
-      margin: "0 0.5px",
-      borderLeft: "4px solid hsla(0, 0%, 5%, 0)",
-      borderRight: "4px solid hsla(0, 0%, 5%, 0)",
-      cursor: "col-resize",
-      justifyContent: "center",
-      height: "100%"
-    },
-    // Configuración divisorra interna posición horizontal del split
-    "& .splitter-layout .layout-splitter:before": {
-      content: `""`,
-      height: "56px",
-      width: "4px",
-      top: "calc(50% - 22.5px)",
-      position: "absolute",
-      background: theme.vars.palette.primary.enabled,
-      borderRadius: theme.vars.size.borderRadius["r0-5"],
-      margin: "1px 0px"
-    },
-    // Hover de la barra externa en posición horizontal
-    "& .splitter-layout > .layout-splitter:hover": {
-      borderRadius: "2px",
-      borderLeft: `2px`,
-      borderRight: `2px`
-    },
-    // Configuración del cursor en horizontal
-    "& .splitter-layout.splitter-layout-vertical.layout-changing": {
-      cursor: "row-resize"
-    },
-    // Barra divisora vertical del split
-    "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
-      height: theme.vars.size.baseSpacings.sp2,
-      width: "100% !important",
-      margin: "1px 0",
-      cursor: "row-resize"
-    },
-    // Configuración barra divisora interna vertical del split
-    "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
-      width: "56px !important",
-      height: "4px !important",
-      left: "calc(50% - 22.5px)",
-      top: "unset",
-      background: theme.vars.palette.primary.enabled,
-      borderRadius: "2px",
-      zIndex: "1"
-    },
-    // Color del hover y el arrastrando del splitter
-    "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
-      // barra interna vertical
-      background: theme.vars.palette.primary.hover
-    },
-    // Dirección flex cuando es vertical
-    "& .splitter-layout.splitter-layout-vertical": {
-      flexDirection: "column",
-      position: "relative",
-      "& .layout-splitter:after": {
-        content: `""`,
-        height: "2px",
-        left: "0",
-        right: "0",
-        /* top: 'calc(50% - 6px)', */
-        position: "absolute",
-        background: theme.vars.palette?.border.default
-      }
-    },
-    "& .splitter-layout:not(.splitter-layout-vertical)": {
-      "& .layout-splitter:after": {
-        content: `""`,
-        width: "2px",
-        top: "0",
-        bottom: "0",
-        position: "absolute",
-        background: theme.vars.palette?.border.default
-      }
-    }
-  }),
-  /**
-   * SplitMaster firstPart
-   */
-  splitMaster: () => ({
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    "& .M4LStack-root": {
-      gap: "8px"
-    }
-  }),
-  /**
-   * SplitMaster secondPart
-   */
-  splitDetail: () => ({
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    overflow: "hidden",
-    left: "0px",
-    right: "0px",
-    top: "0px",
-    bottom: "0px",
-    "& .M4LStack-root": {
-      //gap: '8px',
-      overflow: "hidden"
-    }
-  })
-};
-export {
-  splitLayoutStyles as s
-};

package/components/extended/React-Splitter-Layout/constants.js

@@ -1,6 +0,0 @@
-const SPLIT_LAYOUT_KEY_COMPONENT = "M4LSplitLayout";
-const SPLIT_LAYOUT_PREFIX = "M4LSplitLayout";
-export {
-  SPLIT_LAYOUT_PREFIX as S,
-  SPLIT_LAYOUT_KEY_COMPONENT as a
-};

package/components/extended/React-Splitter-Layout/slots/SplitLayoutSlots.js

@@ -1,21 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { s as splitLayoutStyles } from "../SplitLayout.styles.js";
-import { a as SPLIT_LAYOUT_KEY_COMPONENT } from "../constants.js";
-import { S as SplitLayoutSlots } from "./SplitLayoutEnum.js";
-const SplitLayoutRootStyled = styled("div", {
-  name: SPLIT_LAYOUT_KEY_COMPONENT,
-  slot: SplitLayoutSlots.root
-})(splitLayoutStyles.root);
-const SplitMasterStyled = styled("div", {
-  name: SPLIT_LAYOUT_KEY_COMPONENT,
-  slot: SplitLayoutSlots.splitMaster
-})(splitLayoutStyles.splitMaster);
-const SplitDetailStyled = styled("div", {
-  name: SPLIT_LAYOUT_KEY_COMPONENT,
-  slot: SplitLayoutSlots.splitDetail
-})(splitLayoutStyles.splitDetail);
-export {
-  SplitLayoutRootStyled as S,
-  SplitMasterStyled as a,
-  SplitDetailStyled as b
-};

package/internal_libs/react-splitter-layout.js

@@ -1,158 +0,0 @@
-import { g as getDefaultExportFromCjs } from "../commonjs/index.js";
-import require$$0 from "prop-types";
-import React from "react";
-var lib = { exports: {} };
-(function(module, exports) {
-  !function(e, t) {
-    module.exports = t(require$$0, React);
-  }(window, function(e, t) {
-    return function(e2) {
-      var t2 = {};
-      function n(o) {
-        if (t2[o]) return t2[o].exports;
-        var r = t2[o] = { i: o, l: false, exports: {} };
-        return e2[o].call(r.exports, r, r.exports, n), r.l = true, r.exports;
-      }
-      return n.m = e2, n.c = t2, n.d = function(e3, t3, o) {
-        n.o(e3, t3) || Object.defineProperty(e3, t3, { enumerable: true, get: o });
-      }, n.r = function(e3) {
-        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e3, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e3, "__esModule", { value: true });
-      }, n.t = function(e3, t3) {
-        if (1 & t3 && (e3 = n(e3)), 8 & t3) return e3;
-        if (4 & t3 && "object" == typeof e3 && e3 && e3.__esModule) return e3;
-        var o = /* @__PURE__ */ Object.create(null);
-        if (n.r(o), Object.defineProperty(o, "default", { enumerable: true, value: e3 }), 2 & t3 && "string" != typeof e3) for (var r in e3) n.d(o, r, function(t4) {
-          return e3[t4];
-        }.bind(null, r));
-        return o;
-      }, n.n = function(e3) {
-        var t3 = e3 && e3.__esModule ? function() {
-          return e3.default;
-        } : function() {
-          return e3;
-        };
-        return n.d(t3, "a", t3), t3;
-      }, n.o = function(e3, t3) {
-        return Object.prototype.hasOwnProperty.call(e3, t3);
-      }, n.p = "", n(n.s = 2);
-    }([function(t2, n) {
-      t2.exports = e;
-    }, function(e2, n) {
-      e2.exports = t;
-    }, function(e2, t2, n) {
-      e2.exports = n(3);
-    }, function(e2, t2, n) {
-      n.r(t2);
-      var o = n(1), r = n.n(o), i = n(0), a = n.n(i);
-      function s(e3) {
-        var t3 = e3.size || 0, n2 = e3.percentage ? "%" : "px", o2 = "layout-pane", i2 = {};
-        return e3.primary ? o2 += " layout-pane-primary" : e3.vertical ? i2.height = "".concat(t3).concat(n2) : i2.width = "".concat(t3).concat(n2), r.a.createElement("div", { className: o2, style: i2 }, e3.children);
-      }
-      s.propTypes = { vertical: a.a.bool, primary: a.a.bool, size: a.a.number, percentage: a.a.bool, children: a.a.oneOfType([a.a.arrayOf(a.a.node), a.a.node]) }, s.defaultProps = { vertical: false, primary: false, size: 0, percentage: false, children: [] };
-      var c = s;
-      function l(e3) {
-        return (l = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e4) {
-          return typeof e4;
-        } : function(e4) {
-          return e4 && "function" == typeof Symbol && e4.constructor === Symbol && e4 !== Symbol.prototype ? "symbol" : typeof e4;
-        })(e3);
-      }
-      function u(e3, t3) {
-        for (var n2 = 0; n2 < t3.length; n2++) {
-          var o2 = t3[n2];
-          o2.enumerable = o2.enumerable || false, o2.configurable = true, "value" in o2 && (o2.writable = true), Object.defineProperty(e3, o2.key, o2);
-        }
-      }
-      function p(e3) {
-        return (p = Object.setPrototypeOf ? Object.getPrototypeOf : function(e4) {
-          return e4.__proto__ || Object.getPrototypeOf(e4);
-        })(e3);
-      }
-      function d(e3, t3) {
-        return (d = Object.setPrototypeOf || function(e4, t4) {
-          return e4.__proto__ = t4, e4;
-        })(e3, t3);
-      }
-      function h(e3) {
-        if (void 0 === e3) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e3;
-      }
-      function f() {
-        if (document.body.createTextRange) {
-          var e3 = document.body.createTextRange();
-          e3.collapse(), e3.select();
-        } else window.getSelection ? window.getSelection().empty ? window.getSelection().empty() : window.getSelection().removeAllRanges && window.getSelection().removeAllRanges() : document.selection && document.selection.empty();
-      }
-      var y = function(e3) {
-        function t3(e4) {
-          var n3, o3, r2;
-          return function(e5, t4) {
-            if (!(e5 instanceof t4)) throw new TypeError("Cannot call a class as a function");
-          }(this, t3), o3 = this, (n3 = !(r2 = p(t3).call(this, e4)) || "object" !== l(r2) && "function" != typeof r2 ? h(o3) : r2).handleResize = n3.handleResize.bind(h(h(n3))), n3.handleMouseMove = n3.handleMouseMove.bind(h(h(n3))), n3.handleMouseUp = n3.handleMouseUp.bind(h(h(n3))), n3.handleTouchMove = n3.handleTouchMove.bind(h(h(n3))), n3.handleSplitterMouseDown = n3.handleSplitterMouseDown.bind(h(h(n3))), n3.state = { secondaryPaneSize: 0, resizing: false }, n3;
-        }
-        var n2, o2;
-        return function(e4, t4) {
-          if ("function" != typeof t4 && null !== t4) throw new TypeError("Super expression must either be null or a function");
-          e4.prototype = Object.create(t4 && t4.prototype, { constructor: { value: e4, writable: true, configurable: true } }), t4 && d(e4, t4);
-        }(t3, r.a.Component), n2 = t3, (o2 = [{ key: "componentDidMount", value: function() {
-          var e4;
-          if (window.addEventListener("resize", this.handleResize), document.addEventListener("mouseup", this.handleMouseUp), document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("touchend", this.handleMouseUp), document.addEventListener("touchmove", this.handleTouchMove), void 0 !== this.props.secondaryInitialSize) e4 = this.props.secondaryInitialSize;
-          else {
-            var t4, n3 = this.container.getBoundingClientRect();
-            t4 = this.splitter ? this.splitter.getBoundingClientRect() : { width: 4, height: 4 }, e4 = this.getSecondaryPaneSize(n3, t4, { left: n3.left + (n3.width - t4.width) / 2, top: n3.top + (n3.height - t4.height) / 2 }, false);
-          }
-          this.setState({ secondaryPaneSize: e4 });
-        } }, { key: "componentDidUpdate", value: function(e4, t4) {
-          t4.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange && this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize), t4.resizing !== this.state.resizing && (this.state.resizing ? this.props.onDragStart && this.props.onDragStart() : this.props.onDragEnd && this.props.onDragEnd());
-        } }, { key: "componentWillUnmount", value: function() {
-          window.removeEventListener("resize", this.handleResize), document.removeEventListener("mouseup", this.handleMouseUp), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("touchend", this.handleMouseUp), document.removeEventListener("touchmove", this.handleTouchMove);
-        } }, { key: "getSecondaryPaneSize", value: function(e4, t4, n3, o3) {
-          var r2, i2, a2, s2;
-          this.props.vertical ? (r2 = e4.height, i2 = t4.height, a2 = n3.top - e4.top) : (r2 = e4.width, i2 = t4.width, a2 = n3.left - e4.left), o3 && (a2 -= i2 / 2), a2 < 0 ? a2 = 0 : a2 > r2 - i2 && (a2 = r2 - i2);
-          var c2 = r2 - i2 - (s2 = 1 === this.props.primaryIndex ? a2 : r2 - i2 - a2);
-          return this.props.percentage && (s2 = 100 * s2 / r2, c2 = 100 * c2 / r2, i2 = 100 * i2 / r2, r2 = 100), c2 < this.props.primaryMinSize ? s2 = Math.max(s2 - (this.props.primaryMinSize - c2), 0) : s2 < this.props.secondaryMinSize && (s2 = Math.min(r2 - i2 - this.props.primaryMinSize, this.props.secondaryMinSize)), s2;
-        } }, { key: "handleResize", value: function() {
-          if (this.splitter && !this.props.percentage) {
-            var e4 = this.container.getBoundingClientRect(), t4 = this.splitter.getBoundingClientRect(), n3 = this.getSecondaryPaneSize(e4, t4, { left: t4.left, top: t4.top }, false);
-            this.setState({ secondaryPaneSize: n3 });
-          }
-        } }, { key: "handleMouseMove", value: function(e4) {
-          if (this.state.resizing) {
-            var t4 = this.container.getBoundingClientRect(), n3 = this.splitter.getBoundingClientRect(), o3 = this.getSecondaryPaneSize(t4, n3, { left: e4.clientX, top: e4.clientY }, true);
-            f(), this.setState({ secondaryPaneSize: o3 });
-          }
-        } }, { key: "handleTouchMove", value: function(e4) {
-          this.handleMouseMove(e4.changedTouches[0]);
-        } }, { key: "handleSplitterMouseDown", value: function() {
-          f(), this.setState({ resizing: true });
-        } }, { key: "handleMouseUp", value: function() {
-          this.setState(function(e4) {
-            return e4.resizing ? { resizing: false } : null;
-          });
-        } }, { key: "render", value: function() {
-          var e4 = this, t4 = "splitter-layout";
-          this.props.customClassName && (t4 += " ".concat(this.props.customClassName)), this.props.vertical && (t4 += " splitter-layout-vertical"), this.state.resizing && (t4 += " layout-changing");
-          var n3 = r.a.Children.toArray(this.props.children).slice(0, 2);
-          0 === n3.length && n3.push(r.a.createElement("div", null));
-          for (var o3 = [], i2 = 0 !== this.props.primaryIndex && 1 !== this.props.primaryIndex ? 0 : this.props.primaryIndex, a2 = 0; a2 < n3.length; ++a2) {
-            var s2 = true, l2 = null;
-            n3.length > 1 && a2 !== i2 && (s2 = false, l2 = this.state.secondaryPaneSize), o3.push(r.a.createElement(c, { vertical: this.props.vertical, percentage: this.props.percentage, primary: s2, size: l2 }, n3[a2]));
-          }
-          return r.a.createElement("div", { className: t4, ref: function(t5) {
-            e4.container = t5;
-          } }, o3[0], o3.length > 1 && r.a.createElement("div", { role: "separator", className: "layout-splitter", ref: function(t5) {
-            e4.splitter = t5;
-          }, onMouseDown: this.handleSplitterMouseDown, onTouchStart: this.handleSplitterMouseDown }), o3.length > 1 && o3[1]);
-        } }]) && u(n2.prototype, o2), t3;
-      }();
-      y.propTypes = { customClassName: a.a.string, vertical: a.a.bool, percentage: a.a.bool, primaryIndex: a.a.number, primaryMinSize: a.a.number, secondaryInitialSize: a.a.number, secondaryMinSize: a.a.number, onDragStart: a.a.func, onDragEnd: a.a.func, onSecondaryPaneSizeChange: a.a.func, children: a.a.arrayOf(a.a.node) }, y.defaultProps = { customClassName: "", vertical: false, percentage: false, primaryIndex: 0, primaryMinSize: 0, secondaryInitialSize: void 0, secondaryMinSize: 0, onDragStart: null, onDragEnd: null, onSecondaryPaneSizeChange: null, children: [] };
-      var m = y;
-      t2.default = m;
-    }]);
-  });
-})(lib);
-var libExports = lib.exports;
-const SplitterLayout = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
-export {
-  SplitterLayout as S
-};