@m4l/components 9.1.70 → 9.1.72

package/@types/types.d.ts

@@ -141,6 +141,7 @@ import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../componen
 import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '../components/extended/React-Spinners/PropagateLoaderSpinner/types';
 import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType } from '../components/LinearProgressIndeterminate/types';
 import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
+import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -198,6 +199,7 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: RHFTextFieldPasswordType;
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
+    M4LRHFSelect: RHFSelectSlotsType;
   }
 
   interface ComponentsPropsList {
@@ -255,6 +257,7 @@ declare module '@mui/material/styles' {
     M4LRHFTextFieldPassword: Partial<RHFTextFieldPasswordOwnerState>;
     M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
+    M4LRHFSelect: Partial<RHFSelectOwnerState>;
   }
 
   interface Components {
@@ -522,6 +525,11 @@ declare module '@mui/material/styles' {
         defaultProps?: ComponentsPropsList['M4LMenuDivider'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
         variants?: ComponentsVariants['M4LMenuDivider'];
-      };
+    };
+    M4LRHFSelect?: {
+        defaultProps?: ComponentsPropsList['M4LRHFSelect'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
+        variants?: ComponentsVariants['M4LRHFSelect'];
+    };
  }
 }

package/components/Image/Image.js

@@ -1,16 +1,18 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useModuleSkeleton } from "@m4l/core";
 import { useMemo } from "react";
+import { useModuleSkeleton } from "@m4l/core";
+import clsx from "clsx";
 import { L as LazyLoadComponent } from "./subcomponents/LazyLoadComponent/index.js";
 import { D as DivContainerSkeletonStyled, I as ImgSkeleton, a as ImgStyled } from "./slots/ImageSlots.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
-import { s as svgDataUriSkeleton, I as IMAGE_KEY_COMPONENT } from "./constant.js";
+import { s as svgDataUriSkeleton, I as IMAGE_KEY_COMPONENT, a as IMAGE_CLASSES } from "./constant.js";
 import { I as ImageSlots } from "./slots/ImageEnum.js";
 function Image(props) {
   const {
     enableIntersectionObserver = true,
     threshold = 100,
     dataTestId,
+    className,
     ...others
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -35,13 +37,14 @@ function Image(props) {
           ImgStyled,
           {
             ownerState: { ...ownerState },
-            ...getPropDataTestId(IMAGE_KEY_COMPONENT, ImageSlots.img, dataTestId),
-            ...others
+            ...getPropDataTestId(IMAGE_KEY_COMPONENT, ImageSlots.root, dataTestId),
+            ...others,
+            className: clsx(IMAGE_CLASSES.root, className)
           }
         ) })
       }
     );
-  }, [dataTestId, enableIntersectionObserver, others, ownerState, threshold]);
+  }, [dataTestId, enableIntersectionObserver, others, ownerState, threshold, className]);
   return lazyLoadComponent;
 }
 export {

package/components/Image/constant.d.ts

@@ -1,2 +1,6 @@
 export declare const IMAGE_KEY_COMPONENT = "M4LImage";
 export declare const svgDataUriSkeleton = "data:image/svg+xml,%3Csvg width='36' height='37' viewBox='0 0 36 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Union'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.0001 14.7416C24.26 15.2361 23.39 15.5 22.5 15.5C21.3065 15.5 20.1619 15.0259 19.318 14.182C18.4741 13.3381 18 12.1935 18 11C18 10.11 18.2639 9.23996 18.7584 8.49994C19.2529 7.75992 19.9557 7.18314 20.7779 6.84254C21.6002 6.50195 22.505 6.41283 23.3779 6.58647C24.2508 6.7601 25.0526 7.18868 25.682 7.81802C26.3113 8.44736 26.7399 9.24918 26.9135 10.1221C27.0872 10.995 26.9981 11.8998 26.6575 12.7221C26.3169 13.5443 25.7401 14.2471 25.0001 14.7416ZM23.3334 9.7528C23.0867 9.58798 22.7967 9.5 22.5 9.5C22.1022 9.5 21.7206 9.65804 21.4393 9.93934C21.158 10.2206 21 10.6022 21 11C21 11.2967 21.088 11.5867 21.2528 11.8334C21.4176 12.08 21.6519 12.2723 21.926 12.3858C22.2001 12.4994 22.5017 12.5291 22.7926 12.4712C23.0836 12.4133 23.3509 12.2704 23.5607 12.0607C23.7704 11.8509 23.9133 11.5836 23.9712 11.2926C24.0291 11.0017 23.9994 10.7001 23.8858 10.426C23.7723 10.1519 23.58 9.91762 23.3334 9.7528Z' fill='%23091E42' fill-opacity='0.08'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0.5H33C33.7957 0.5 34.5587 0.81607 35.1213 1.37868C35.6839 1.94129 36 2.70435 36 3.5V33.5C36 34.2957 35.6839 35.0587 35.1213 35.6213C34.5587 36.1839 33.7957 36.5 33 36.5H3C2.20435 36.5 1.44129 36.1839 0.87868 35.6213C0.31607 35.0587 0 34.2957 0 33.5V3.5C0 2.70435 0.31607 1.94129 0.87868 1.37868C1.44129 0.81607 2.20435 0.5 3 0.5ZM3 24.5V33.5H33V30.5L25.5 23L23.115 25.385C22.5529 25.9438 21.7926 26.2574 21 26.2574C20.2074 26.2574 19.4471 25.9438 18.885 25.385L10.5 17L3 24.5ZM27.615 20.87L33 26.255V3.5H3V20.255L8.385 14.87C8.94709 14.3112 9.70744 13.9976 10.5 13.9976C11.2926 13.9976 12.0529 14.3112 12.615 14.87L21 23.255L23.385 20.87C23.9471 20.3112 24.7074 19.9976 25.5 19.9976C26.2926 19.9976 27.0529 20.3112 27.615 20.87Z' fill='%23091E42' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E%0A";
+/**
+ * Clases de los slots del componente Image
+ */
+export declare const IMAGE_CLASSES: Record<string, string>;

package/components/Image/constant.js

@@ -1,6 +1,10 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { I as ImageSlots } from "./slots/ImageEnum.js";
 const IMAGE_KEY_COMPONENT = "M4LImage";
 const svgDataUriSkeleton = `data:image/svg+xml,%3Csvg width='36' height='37' viewBox='0 0 36 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Union'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.0001 14.7416C24.26 15.2361 23.39 15.5 22.5 15.5C21.3065 15.5 20.1619 15.0259 19.318 14.182C18.4741 13.3381 18 12.1935 18 11C18 10.11 18.2639 9.23996 18.7584 8.49994C19.2529 7.75992 19.9557 7.18314 20.7779 6.84254C21.6002 6.50195 22.505 6.41283 23.3779 6.58647C24.2508 6.7601 25.0526 7.18868 25.682 7.81802C26.3113 8.44736 26.7399 9.24918 26.9135 10.1221C27.0872 10.995 26.9981 11.8998 26.6575 12.7221C26.3169 13.5443 25.7401 14.2471 25.0001 14.7416ZM23.3334 9.7528C23.0867 9.58798 22.7967 9.5 22.5 9.5C22.1022 9.5 21.7206 9.65804 21.4393 9.93934C21.158 10.2206 21 10.6022 21 11C21 11.2967 21.088 11.5867 21.2528 11.8334C21.4176 12.08 21.6519 12.2723 21.926 12.3858C22.2001 12.4994 22.5017 12.5291 22.7926 12.4712C23.0836 12.4133 23.3509 12.2704 23.5607 12.0607C23.7704 11.8509 23.9133 11.5836 23.9712 11.2926C24.0291 11.0017 23.9994 10.7001 23.8858 10.426C23.7723 10.1519 23.58 9.91762 23.3334 9.7528Z' fill='%23091E42' fill-opacity='0.08'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0.5H33C33.7957 0.5 34.5587 0.81607 35.1213 1.37868C35.6839 1.94129 36 2.70435 36 3.5V33.5C36 34.2957 35.6839 35.0587 35.1213 35.6213C34.5587 36.1839 33.7957 36.5 33 36.5H3C2.20435 36.5 1.44129 36.1839 0.87868 35.6213C0.31607 35.0587 0 34.2957 0 33.5V3.5C0 2.70435 0.31607 1.94129 0.87868 1.37868C1.44129 0.81607 2.20435 0.5 3 0.5ZM3 24.5V33.5H33V30.5L25.5 23L23.115 25.385C22.5529 25.9438 21.7926 26.2574 21 26.2574C20.2074 26.2574 19.4471 25.9438 18.885 25.385L10.5 17L3 24.5ZM27.615 20.87L33 26.255V3.5H3V20.255L8.385 14.87C8.94709 14.3112 9.70744 13.9976 10.5 13.9976C11.2926 13.9976 12.0529 14.3112 12.615 14.87L21 23.255L23.385 20.87C23.9471 20.3112 24.7074 19.9976 25.5 19.9976C26.2926 19.9976 27.0529 20.3112 27.615 20.87Z' fill='%23091E42' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E%0A`;
+const IMAGE_CLASSES = getComponentClasses(IMAGE_KEY_COMPONENT, ImageSlots);
 export {
   IMAGE_KEY_COMPONENT as I,
+  IMAGE_CLASSES as a,
   svgDataUriSkeleton as s
 };

package/components/Image/image.styles.js

@@ -3,7 +3,7 @@ const imageStyles = {
    * Estilos para Image.
    * @createdAt 2024-12-27 08:27:30 - automatic
    */
-  img: {
+  root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start"

package/components/Image/slots/ImageEnum.d.ts

@@ -1,5 +1,5 @@
 export declare enum ImageSlots {
-    img = "img",
+    root = "root",
     intersectComponent = "intersectComponent",
     scrollIntersectRoot = "scrollIntersectRoot",
     skeletonComponent = "skeletonComponent",

package/components/Image/slots/ImageEnum.js

@@ -1,5 +1,5 @@
 var ImageSlots = /* @__PURE__ */ ((ImageSlots2) => {
-  ImageSlots2["img"] = "img";
+  ImageSlots2["root"] = "root";
   ImageSlots2["intersectComponent"] = "intersectComponent";
   ImageSlots2["scrollIntersectRoot"] = "scrollIntersectRoot";
   ImageSlots2["skeletonComponent"] = "skeletonComponent";

package/components/Image/slots/ImageSlots.js

@@ -5,8 +5,8 @@ import { i as imageStyles } from "../image.styles.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 const ImgStyled = styled("img", {
   name: IMAGE_KEY_COMPONENT,
-  slot: ImageSlots.img
-})(imageStyles?.img);
+  slot: ImageSlots.root
+})(imageStyles?.root);
 const ImgSkeleton = styled("img", {
   name: IMAGE_KEY_COMPONENT,
   slot: ImageSlots.imgSkeleton

package/components/Image/types.d.ts

@@ -29,6 +29,7 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     alt?: string;
     threshold?: number;
     enableIntersectionObserver?: boolean;
+    className?: string;
     dataTestId?: string;
 }
 export type ImageSlotsType = keyof typeof ImageSlots;

package/components/Label/types.d.ts

@@ -3,8 +3,9 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Theme } from '@mui/material';
 import { LABEL_KEY_COMPONENT } from './constants';
 import { Sizes } from '@m4l/styles';
+import { TypographyProps } from '../mui_extended/Typography/types';
 export type LabelVariants = 'standard';
-export interface LabelProps {
+export interface LabelProps extends Pick<TypographyProps, 'skeletonWidth'> {
     /**  Mesanje de ayuda opcional que se visualiza cuando se interactua con el tooltip del Icono de informacion */
     helperMessage?: string | undefined;
     /** Es la etiqueta de texto principal del componente.*/

package/components/hook-form/RHFPeriod/slots/RHFPeriodSlots.d.ts

@@ -1,4 +1,4 @@
 export declare const RHFPeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const PeriodRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "value" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "content" | "style" | "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" | "label" | keyof import('react').RefAttributes<HTMLDivElement> | "autoComplete" | "placeholder" | "required" | "dataTestId" | "maxRows" | "fullWidth" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
-export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Select').SelectProps, keyof import('../../../mui_extended/Select').SelectProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/Select').SelectProps<any>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "value" | "onClose" | "title" | "size" | "name" | "error" | "input" | "options" | "rows" | "id" | "type" | "components" | "hidden" | "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" | keyof import('react').RefAttributes<HTMLDivElement> | "autoComplete" | "placeholder" | "readOnly" | "required" | "dataTestId" | "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/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFSelect/RHFSelect.d.ts

@@ -0,0 +1,23 @@
+import { RHFSelectProps } from './types';
+/**
+ * RHFSelect is a custom select component integrated with React Hook Form.
+ * It renders a select input with optional label, helper text, and error message.
+ * @template T - The type of the options.
+ * @param {RHFSelectProps<T>} props - The properties for the RHFSelect component.
+ * @param {string} props.name - The name of the field.
+ * @param {Array} props.options - The options to be displayed in the select input.
+ * @param {string} [props.label] - The label for the select input.
+ * @param {number} [props.labelSkeletonWidth] - The width of the skeleton for the label.
+ * @param {number} [props.helperErrorSkeletonWidth] - The width of the skeleton for the helper error message.
+ * @param {string} [props.helperMessage] - The helper message to be displayed.
+ * @param {string} [props.helperText] - The helper text to be displayed.
+ * @param {boolean} [props.mandatory] - Whether the field is mandatory.
+ * @param {string} [props.mandatoryMessage] - The message to be displayed if the field is mandatory.
+ * @param {boolean} [props.disabled] - Whether the select input is disabled.
+ * @param {string} [props.size] - The size of the select input.
+ * @param {string} [props.variant] - The variant of the select input.
+ * @param {string} [props.className] - Additional class names for the root element.
+ * @param {string} [props.dataTestId] - The data test ID for the select input.
+ * @returns {JSX.Element} The rendered RHFSelect component.
+ */
+export declare const RHFSelect: <T>(props: RHFSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFSelect/RHFSelect.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { R as RHFSELECT_CLASSES, a as RHFSELECT_COMPONENT_KEY } from "./constants.js";
+import { R as RHFSelectEnum } from "./slots/RHFSelectEnum.js";
+import { R as RootStyled, L as LabelStyled, S as SelectStyled, H as HelperErrorStyled } from "./slots/RHFSlots.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const RHFSelect = (props) => {
+  const {
+    name,
+    options,
+    label,
+    labelSkeletonWidth,
+    helperErrorSkeletonWidth,
+    helperMessage,
+    helperText,
+    mandatory,
+    mandatoryMessage,
+    placeholder,
+    disabled,
+    size = "medium",
+    variant = "outlined",
+    className,
+    dataTestId
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(RootStyled, { ownerState: {}, className: clsx(RHFSELECT_CLASSES.root, className), children: /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            LabelStyled,
+            {
+              htmlFor: name,
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              helperText,
+              size: adjustedSize,
+              skeletonWidth: labelSkeletonWidth,
+              error: Boolean(error),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectStyled,
+            {
+              ref,
+              options,
+              id: name,
+              size: adjustedSize,
+              variant,
+              value,
+              onChange: (opt) => onChange(opt.id),
+              disabled,
+              className: RHFSELECT_CLASSES.select,
+              error: Boolean(error),
+              placeholder,
+              ...getPropDataTestId(RHFSELECT_COMPONENT_KEY, RHFSelectEnum.select, dataTestId)
+            }
+          ),
+          error?.message && /* @__PURE__ */ jsx(HelperErrorStyled, { size: adjustedSize, message: error.message, skeletonWidth: helperErrorSkeletonWidth })
+        ] });
+      }
+    }
+  ) });
+};
+export {
+  RHFSelect as R
+};

package/components/hook-form/RHFSelect/RHFSelect.styles.d.ts

@@ -0,0 +1,5 @@
+import { RHFSelectStyles } from './types';
+/**
+ * Conjunto de estilos para el componente `RHFSelect`.
+ */
+export declare const rhfSelectStyles: RHFSelectStyles;

package/components/hook-form/RHFSelect/RHFSelect.styles.js

@@ -0,0 +1,25 @@
+const rhfSelectStyles = {
+  /**
+   * Estilos para el contenedor principal del componente.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Estilos del Label.
+   */
+  label: {},
+  /**
+   * Estilos del Select.
+   */
+  select: {},
+  /**
+   * Estilos del HelperError.
+   */
+  helperError: {}
+};
+export {
+  rhfSelectStyles as r
+};

package/components/hook-form/RHFSelect/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Key del componente RHFSelect usado para identificar el componente en el registro de componentes.
+ */
+export declare const RHFSELECT_COMPONENT_KEY = "RHFSelect";
+/**
+ * Clases CSS generadas dinámicamente para el componente RHFSelect.
+ */
+export declare const RHFSELECT_CLASSES: Record<string, string>;

package/components/hook-form/RHFSelect/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RHFSelectEnum } from "./slots/RHFSelectEnum.js";
+const RHFSELECT_COMPONENT_KEY = "RHFSelect";
+const RHFSELECT_CLASSES = getComponentClasses(RHFSELECT_COMPONENT_KEY, RHFSelectEnum);
+export {
+  RHFSELECT_CLASSES as R,
+  RHFSELECT_COMPONENT_KEY as a
+};

package/components/hook-form/RHFSelect/index.d.ts

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

package/components/hook-form/RHFSelect/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFSelect/slots/RHFSelectEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum RHFSelectEnum {
+    root = "root",
+    label = "label",
+    select = "select",
+    helperError = "helperError"
+}

package/components/hook-form/RHFSelect/slots/RHFSelectEnum.js

@@ -0,0 +1,10 @@
+var RHFSelectEnum = /* @__PURE__ */ ((RHFSelectEnum2) => {
+  RHFSelectEnum2["root"] = "root";
+  RHFSelectEnum2["label"] = "label";
+  RHFSelectEnum2["select"] = "select";
+  RHFSelectEnum2["helperError"] = "helperError";
+  return RHFSelectEnum2;
+})(RHFSelectEnum || {});
+export {
+  RHFSelectEnum as R
+};

package/components/hook-form/RHFSelect/slots/RHFSlots.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Elemento div de react construido a través de styled,
+ * sirve para agrupar el contenido del componente `RHFSelect`
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+/**
+ * Elemento Label construido a través de styled,
+ * sirve para mostrar el label del componente `RHFSelect`
+ */
+export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+/**
+ * Elemento HelperError construido a través de styled,
+ * sirve para mostrar el mensaje de error del componente `RHFSelect`
+ */
+export declare const SelectStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/Select').SelectProps<any>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "value" | "onClose" | "title" | "size" | "name" | "error" | "input" | "options" | "rows" | "id" | "type" | "components" | "hidden" | "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" | keyof import('react').RefAttributes<HTMLDivElement> | "autoComplete" | "placeholder" | "readOnly" | "required" | "dataTestId" | "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> & Record<string, unknown>, {}, {}>;
+/**
+ * Elemento HelperError construido a través de styled,
+ * sirve para mostrar el mensaje de error del componente `RHFSelect`
+ */
+export declare const HelperErrorStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../HelperError').HelperErrorProps, keyof import('../../../HelperError').HelperErrorProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/hook-form/RHFSelect/slots/RHFSlots.js

@@ -0,0 +1,29 @@
+import { styled } from "@mui/material";
+import { a as RHFSELECT_COMPONENT_KEY } from "../constants.js";
+import { R as RHFSelectEnum } from "./RHFSelectEnum.js";
+import { r as rhfSelectStyles } from "../RHFSelect.styles.js";
+import { L as Label } from "../../../Label/Label.js";
+import { S as Select } from "../../../mui_extended/Select/Select.js";
+import { H as HelperError } from "../../../HelperError/HelperError.js";
+const RootStyled = styled("div", {
+  name: RHFSELECT_COMPONENT_KEY,
+  slot: RHFSelectEnum.root
+})(rhfSelectStyles?.root);
+const LabelStyled = styled(Label, {
+  name: RHFSELECT_COMPONENT_KEY,
+  slot: RHFSelectEnum.label
+})(rhfSelectStyles?.label);
+const SelectStyled = styled(Select, {
+  name: RHFSELECT_COMPONENT_KEY,
+  slot: RHFSelectEnum.select
+})(rhfSelectStyles?.select);
+const HelperErrorStyled = styled(HelperError, {
+  name: RHFSELECT_COMPONENT_KEY,
+  slot: RHFSelectEnum.helperError
+})(rhfSelectStyles?.helperError);
+export {
+  HelperErrorStyled as H,
+  LabelStyled as L,
+  RootStyled as R,
+  SelectStyled as S
+};

package/components/hook-form/RHFSelect/types.d.ts

@@ -0,0 +1,60 @@
+import { HelperErrorProps } from 'src/components/HelperError';
+import { LabelProps } from '../../Label/types';
+import { SelectProps } from '../../mui_extended/Select/types';
+import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from 'src/@types/augmentations';
+import { RHFSelectEnum } from './slots/RHFSelectEnum';
+import { RHFSELECT_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material';
+/**
+ * Props para el componente RHFSelect, incluye las propedades esceciales del Select, Label,
+ * así como las propiedades requeridas por react hook form.
+ */
+export interface RHFSelectProps<T> extends Pick<SelectProps<T>, 'options' | 'placeholder' | 'variant'>, Omit<LabelProps, 'dataTestId' | 'error' | 'children' | 'id' | 'className' | 'disabled' | 'size' | 'skeletonWidth'> {
+    /**
+     * Identificador para el manejo de campos en react hook form.
+     */
+    name: string;
+    /**
+     * Tamaño del componente
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Propiedad que deshabilita la interacción del componente.
+     */
+    disabled?: boolean;
+    /**
+     * Nombre de clase CSS personalizada que se aplicará al componente.
+     */
+    className?: string;
+    /**
+     * Propiedad usada para facilitar la identificación del componente en las pruebas.
+     */
+    dataTestId?: string;
+    /**
+     * medida de anchura para el esqueleto del label
+     */
+    labelSkeletonWidth?: LabelProps['skeletonWidth'];
+    /**
+     * medida de anchura para el esqueleto del helperError
+     */
+    helperErrorSkeletonWidth?: HelperErrorProps['skeletonWidth'];
+}
+/**
+ * Define el estado del componente `RHFSelect`.
+ */
+export interface RHFSelectOwnerState {
+}
+/**
+ * Define las claves del objeto `RHFSelectSlotsType`, que se utilizan para
+ * hacer referencia a los diferentes slots disponibles para estilizar el componente
+ * `RHFSelect`.
+ */
+export type RHFNumberInputSlotsType = keyof typeof RHFSelectEnum;
+/**
+ * Define los estilos del componente `RHFNumberInputStyles`. Permite la personalización parcial
+ * de las reglas de estilo mediante `OverridesStyleRules`.
+ *
+ * Puede ser parcial o estar indefinido.
+ */
+export type RHFSelectStyles = M4LOverridesStyleRules<RHFSelectEnum, typeof RHFSELECT_COMPONENT_KEY, Theme>;

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -2,49 +2,22 @@ import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js"
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
-   * <<<<<<< HEAD
    * @updatedUser Andrés Quintero - automatic
    * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2025-01-08 10:36:40 - automatic
    * @author Andrés Quintero - automatic
-   * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @createdAt 2025-01-03 11:42:11 - automatic
-   * @author Andrés Quintero - automatic
-   * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @createdAt 2024-12-31 11:23:51 - automatic
-   * @author Andrés Quintero - automatic
-   * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @createdAt 2024-12-30 14:36:06 - automatic
-   * @author Andrés Quintero - automatic
-   * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * =======
-   * @updatedUser cesar - automatic
-   * @updatedAt 2025-01-10 16:51:28 - automatic
-   * @createdAt 2025-01-10 16:51:28 - automatic
-   * @author cesar - automatic
-   * @updatedUser cesar - automatic
-   * @updatedAt 2025-01-10 16:51:28 - automatic
-   * @createdAt 2024-12-31 11:23:51 - automatic
-   * @author Andrés Quintero - automatic
-   * @updatedUser cesar - automatic
-   * @updatedAt 2025-01-10 16:51:28 - automatic
-   * @createdAt 2024-12-30 14:36:06 - automatic
-   * @author Andrés Quintero - automatic
-   * @updatedUser cesar - automatic
-   * @updatedAt 2025-01-10 16:51:28 - automatic
-   * >>>>>>> c15c4888 (Add checkable prop to MenuItem and update checked icon visibility logic)
-   * @createdAt 2024-12-27 08:28:33 - automatic
-   * @author Andrés Quintero - automatic
    */
   root: ({ theme, ownerState }) => ({
     width: "100%",
     gap: theme.vars.size.baseSpacings.sp3,
-    padding: theme.vars.size.baseSpacings.sp1,
+    paddingTop: theme.vars.size.baseSpacings.sp1,
+    paddingBottom: theme.vars.size.baseSpacings.sp1,
+    paddingLeft: theme.vars.size.baseSpacings.sp4,
+    paddingRight: theme.vars.size.baseSpacings.sp4,
     borderRadius: theme.vars.size.borderRadius.r0,
+    "& .M4LTypography-root": {
+      paddingLeft: theme.vars.size.baseSpacings.sp1
+    },
     ...ownerState.selected && {
       borderLeft: theme.vars.size.borderStroke.container,
       borderColor: ownerState.paletteColor?.main,
@@ -108,6 +81,19 @@ const menuItemStyles = {
         backgroundColor: theme.vars.palette.text.disabled
       }
     },
+    "& .M4LImage-root": {
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "base",
+        (val) => {
+          return {
+            height: val,
+            width: val
+          };
+        }
+      )
+    },
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState.size || "medium",

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

@@ -8,4 +8,4 @@ import { SelectProps } from './types';
  * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
-export declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: import('react').ForwardRefExoticComponent<Omit<SelectProps<any>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;