@m4l/components 9.1.53 → 9.1.55

package/components/mui_extended/MenuItem/slots/MenuItemSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { MenuItem } from "@mui/material";
-import { M as MENUITEM_KEY_COMPONENT } from "../constants.js";
+import { a as MENUITEM_KEY_COMPONENT } from "../constants.js";
 import { m as menuItemStyles } from "../MenuItem.styles.js";
 import { M as MenuItemSlots } from "./MenuItemEnum.js";
 import { T as Typography } from "../../Typography/Typography.js";
@@ -8,8 +8,8 @@ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 const MenuItemRootStyled = styled(MenuItem, {
   name: MENUITEM_KEY_COMPONENT,
-  slot: MenuItemSlots.menuItemRoot
-})(menuItemStyles?.menuItemRoot);
+  slot: MenuItemSlots.root
+})(menuItemStyles?.root);
 const MenuItemContainerStyled = styled("div", {
   name: MENUITEM_KEY_COMPONENT,
   slot: MenuItemSlots.menuItemContainer

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

@@ -5,27 +5,48 @@ import { MenuItemSlots } from './slots';
 import { MENUITEM_KEY_COMPONENT } from './constants';
 import { ReactNode } from 'react';
 /**
- * Props para el componente `MenuItem`, extendiendo las propiedades originales de Material UI.
- * Omit<MUIMenuItemProps, 'size' | 'color'>
- * [startIcon] - Prop opcional para el ícono a la izquierda en el `MenuItem`.
- * [endIcon] - Prop opcional para el ícono a la derecha en el `MenuItem`.
- * label - Texto que describe el `MenuItem`.
- * [selected] - Indica si el item está seleccionado.
- * [componentPaletteColor] - Personalización del color de la paleta del componente.
- * [color] - Define el color del `MenuItem` (solo 'primary' permitido).
- * [disabled] - Indica si el `MenuItem` está deshabilitado.
- * [size] - Tamaño del `MenuItem` (por defecto 'medium').
+ * Propiedades del componente `MenuItem`.
  */
 export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'> {
+    /**
+     * Prop opcional para el ícono a la izquierda en el `MenuItem`
+     */
     startIcon?: ReactNode;
+    /**
+     * Prop opcional para el ícono a la derecha en el `MenuItem`
+     */
     endIcon?: ReactNode;
+    /**
+     * Texto que describe el `MenuItem`
+     */
     label: string;
+    /**
+     * Indica si el item está seleccionado
+     */
     selected?: boolean;
+    /**
+     * Define el color del `MenuItem`
+     */
     color?: Extract<ComponentPalletColor, 'primary' | 'default' | 'error'>;
+    /**
+     * Personalización del color de la paleta del componente
+     */
     componentPaletteColor?: ComponentPalletColor;
+    /**
+     * Indica si el `MenuItem` está deshabilitado
+     */
     disabled?: boolean;
+    /**
+     * Define el tamaño del `MenuItem`
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * Define si el ícono de check está activo
+     */
     checked?: boolean;
 }
 /**
@@ -43,4 +64,4 @@ export type MenuItemSlotsType = keyof typeof MenuItemSlots;
 /**
  * Estilos aplicables al `MenuItem` utilizando temas y slots personalizados.
  */
-export type MenuItemStyles = Partial<OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type MenuItemStyles = OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme>;

package/components/mui_extended/Pager/classes/index.d.ts

@@ -7,7 +7,6 @@ export declare function getPagerUtilityClass(slot: string): string;
 export declare const pagerUtilityClasses: () => {
     select: string;
     root: string;
-    skeletonRoot: string;
     labelRowsPerPageContainer: string;
     labelRowsPager: string;
     selectMenuPopover: string;
@@ -19,6 +18,7 @@ export declare const pagerUtilityClasses: () => {
     actionIconPrevious: string;
     actionIconNextPage: string;
     actionIconLastPage: string;
+    skeletonRoot: string;
     skeletonRowsPerPage: string;
     skeletonButtonContainer: string;
     skeletonIconButton: string;

package/components/mui_extended/Popper/Popper.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { forwardRef, useRef } from "react";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { P as PopperRootStyled } from "./slots/PopperStlots.js";
+const Popper = forwardRef((props, ref) => {
+  const {
+    color = "default",
+    variant = "standard",
+    children,
+    anchorEl,
+    arrow = false,
+    placement,
+    initialPlacement = "top",
+    ...others
+  } = props;
+  const theme = useTheme();
+  const arrowRef = useRef(null);
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    paletteColor,
+    popperColor: color,
+    arrow
+  };
+  return /* @__PURE__ */ jsx(
+    PopperRootStyled,
+    {
+      "aria-label": props.placement,
+      placement: props.placement || initialPlacement,
+      "data-testid": "popper-root",
+      className: getComponentSlotRoot("M4LPopperClass"),
+      variant,
+      ownerState: { ...ownerState },
+      anchorEl,
+      color,
+      ref,
+      modifiers: [
+        {
+          name: "flip",
+          options: {
+            // Se implementan los fallback placements, ya que esto obligara a que el Popper se muestre siguiendo las posiciones establecidas y no se las salte.ninguna posicion al rehubicarse.
+            fallbackPlacements: [
+              "bottom-start",
+              "bottom",
+              "bottom-end",
+              "top-start",
+              "top",
+              "top-end",
+              "left",
+              "left-start",
+              "left-end",
+              "right",
+              "right-start",
+              "right-end"
+            ]
+          }
+        },
+        {
+          name: "arrow",
+          options: {
+            element: arrowRef.current,
+            padding: 8
+          }
+        }
+      ],
+      ...others,
+      children
+    }
+  );
+});
+Popper.displayName = "Popper";
+export {
+  Popper as P
+};

package/components/mui_extended/Popper/PopperStyles.js

@@ -0,0 +1,265 @@
+const popperStyles = {
+  /**
+   * Styles for the root element of the popper component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-06 10:20:25 - automatic
+   * @updatedAt 2024-12-23 10:04:43 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  popperRoot: ({ theme, ownerState }) => ({
+    position: "relative",
+    display: "flex",
+    backgroundColor: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    boxShadow: theme.vars.shadows[3],
+    ...ownerState.arrow && {
+      // Top-Center
+      '&[data-popper-placement="top"]': {
+        "&.M4LPopperClass-root": {
+          marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          bottom: -12,
+          left: "50%",
+          transform: "translateX(-50%)",
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
+        }
+      },
+      // Top-Start
+      '&[data-popper-placement="top-start"]': {
+        "&.M4LPopperClass-root": {
+          marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          bottom: -6,
+          left: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
+        }
+      },
+      // Top-End
+      '&[data-popper-placement="top-end"]': {
+        "&.M4LPopperClass-root": {
+          marginBottom: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          bottom: -6,
+          right: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(100% 100%, 100% 0, 0 100%)"
+        }
+      },
+      // Bottom-Center
+      '&[data-popper-placement="bottom"]': {
+        "&.M4LPopperClass-root": {
+          marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: "50%",
+          transform: "translateX(-50%)",
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      },
+      // Bottom-Start
+      '&[data-popper-placement="bottom-start"]': {
+        "&.M4LPopperClass-root": {
+          marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: -5,
+          left: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      },
+      // Bottom-End
+      '&[data-popper-placement="bottom-end"]': {
+        "&.M4LPopperClass-root": {
+          marginTop: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: -5,
+          right: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      },
+      // Left-Center
+      '&[data-popper-placement="left"]': {
+        "&.M4LPopperClass-root": {
+          marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          right: -0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
+        }
+      },
+      // Left-Start
+      '&[data-popper-placement="left-start"]': {
+        "&.M4LPopperClass-root": {
+          marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          right: -5,
+          top: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
+        }
+      },
+      // Left-end
+      '&[data-popper-placement="left-end"]': {
+        "&.M4LPopperClass-root": {
+          marginRight: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          right: -5,
+          bottom: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "45deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 100%, 100% 0)"
+        }
+      },
+      // Right-Center
+      '&[data-popper-placement="right"]': {
+        "&.M4LPopperClass-root": {
+          marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          left: -1,
+          top: "50%",
+          transform: "translateY(-50%)",
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "315deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      },
+      // Right-Start
+      '&[data-popper-placement="right-start"]': {
+        "&.M4LPopperClass-root": {
+          marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          left: -6,
+          top: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "315deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      },
+      // Right-End
+      '&[data-popper-placement="right-end"]': {
+        "&.M4LPopperClass-root": {
+          marginLeft: theme.vars.size.baseSpacings.sp2 + "!important"
+        },
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          left: -6,
+          bottom: 10,
+          borderRadius: theme.vars.size.baseSpacings.sp1,
+          zIndex: -1,
+          width: theme.vars.size.baseSpacings.sp4,
+          height: theme.vars.size.baseSpacings.sp4,
+          rotate: "315deg",
+          boxShadow: theme.vars.shadows[4],
+          backgroundColor: theme.vars.palette.background.default,
+          clipPath: "polygon(0 0, 100% 0, 0 100%)"
+        }
+      }
+    }
+  })
+};
+export {
+  popperStyles as p
+};

package/components/mui_extended/Popper/constants.js

@@ -0,0 +1,4 @@
+const POPPER_KEY_COMPONENT = "M4LPopper";
+export {
+  POPPER_KEY_COMPONENT as P
+};

package/components/mui_extended/Popper/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Popper/slots/PopperEnum.js

@@ -0,0 +1,6 @@
+const PopperSlots = {
+  popperRoot: "popperRoot"
+};
+export {
+  PopperSlots as P
+};

package/components/mui_extended/Popper/slots/PopperStlots.js

@@ -0,0 +1,12 @@
+import { Popper } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { P as POPPER_KEY_COMPONENT } from "../constants.js";
+import { p as popperStyles } from "../PopperStyles.js";
+import { P as PopperSlots } from "./PopperEnum.js";
+const PopperRootStyled = styled(Popper, {
+  name: POPPER_KEY_COMPONENT,
+  slot: PopperSlots.popperRoot
+})(popperStyles?.popperRoot);
+export {
+  PopperRootStyled as P
+};

package/components/mui_extended/Popper/slots/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Popper/types.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Select/slots/SelectSlots.d.ts

@@ -1,4 +1,4 @@
-export declare const SelectRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "children" | "value" | "ref" | "onClose" | "title" | "size" | "name" | "error" | "input" | "rows" | "id" | "type" | "components" | "hidden" | "color" | "content" | "style" | "open" | "multiple" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "componentsProps" | "onOpen" | "slotProps" | "slots" | "label" | "autoComplete" | "placeholder" | "readOnly" | "required" | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "native" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
+export declare const SelectRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SelectProps<unknown>, "children" | "value" | "ref" | "onClose" | "title" | "size" | "name" | "error" | "input" | "rows" | "id" | "type" | "components" | "hidden" | "color" | "content" | "style" | "open" | "multiple" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "componentsProps" | "onOpen" | "slotProps" | "slots" | "label" | "autoComplete" | "placeholder" | "readOnly" | "required" | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "renderSuffix" | "startAdornment" | "disableUnderline" | "autoWidth" | "defaultOpen" | "displayEmpty" | "IconComponent" | "labelId" | "MenuProps" | "native" | "renderValue" | "SelectDisplayProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('..').SelectOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').SelectOwnerState> & Record<string, unknown> & {

package/components/mui_extended/Select/slots/SelectSlots.js

@@ -4,9 +4,9 @@ import { S as SELECT_KEY_COMPONENT } from "../constants.js";
 import { s as selectStyles } from "../Select.styles.js";
 import { S as SelectSlots } from "./SelectEnum.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { T as Typography } from "../../Typography/Typography.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const SelectRootStyled = styled(Select, {
   name: SELECT_KEY_COMPONENT,
   slot: SelectSlots.selectRoot

package/components/mui_extended/TextField/TextField.js

@@ -1,20 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
-import { useTheme } from "@mui/material";
+import clsx from "clsx";
 import { S as SkeletonStyled, T as TextFieldRootStyled } from "./slots/TextFieldSlots.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { T as TEXT_FIELD_KEY_COMPONENT } from "./constants.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 { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import clsx from "clsx";
+import { useTheme } from "@mui/material";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const TextField = (props) => {
   const {
+    value,
     dataTestId,
     variant = "outlined",
     size = "medium",
     disabled = false,
-    color = "default",
     error,
     inputProps,
     autoComplete = "off",
@@ -24,12 +23,12 @@ const TextField = (props) => {
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const theme = useTheme();
-  const paletteColor = disabled && theme.palette.default || error && theme.palette.error || theme.palette[color] || theme.palette.default;
+  const paletteColor = error && theme.palette.error || theme.palette.primary;
   const ownerState = {
     size: adjustedSize,
     disabled,
     paletteColor,
-    variants: variant,
+    TextFieldvariant: variant,
     error
   };
   const isSkeleton = useModuleSkeleton();
@@ -37,22 +36,23 @@ const TextField = (props) => {
     return /* @__PURE__ */ jsx(
       SkeletonStyled,
       {
-        className: "M4lclassCssSpecificity",
+        className: TEXT_FIELD_CLASSES.skeleton,
         ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.skeleton, dataTestId),
         variant: "rounded",
-        ownerState: {}
+        ownerState: { size: adjustedSize }
       }
     );
   }
-  const classRoot = getComponentSlotRoot(TEXT_FIELD_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(
     TextFieldRootStyled,
     {
-      className: clsx(classRoot, className),
       ownerState: { ...ownerState },
+      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES.variant, className),
       ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
       autoComplete,
+      value,
       inputMode: "numeric",
+      disabled,
       inputProps: {
         ...inputProps,
         disabled,