@m4l/components 9.2.62-B10072025beta.1 → 9.2.62-B10072025beta.2

package/components/SideBar/subcomponents/{FooterComponent → Promotion}/styles.js

@@ -6,16 +6,10 @@ const footerSideBarStyles = {
     height: "auto",
     display: "grid",
     placeItems: "center",
-    boxShadow: `0px -1px 0px 0px ${theme.vars.palette.border.disabled}`,
+    borderTop: `${theme.vars.size.baseSpacings["sp0-5"]} solid ${theme.vars.palette.border.secondary}`,
     borderWidth: ownerState?.anchored ? theme.vars.size.baseSpacings["sp0-5"] : theme.vars.size.baseSpacings.sp0,
     transition: "all 0.5s",
-    paddingBottom: theme.vars.size.baseSpacings.sp2,
-    marginLeft: theme.vars.size.baseSpacings.sp4,
-    marginRight: theme.vars.size.baseSpacings.sp4,
-    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-      transition: "all 0.5s",
-      visibility: "hidden"
-    }
+    paddingBottom: theme.vars.size.baseSpacings.sp2
   })
 };
 export {

package/components/SideBar/subcomponents/SideBarDesktop/index.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useFirstRender } from "@m4l/graphics";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { c as ContainerDesktopContentStyled, d as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
+import { e as ContainerDesktopContentStyled, f as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 import { useState, useEffect } from "react";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 const SideBarDesktop = () => {
-  const { anchored, expandedWidth, variant } = useSideBar();
+  const { anchored, expandedWidth } = useSideBar();
   const [eventAnchored, setEventAnchored] = useState(anchored);
   const isFirstRender = useFirstRender([anchored]);
   useEffect(() => {
@@ -18,8 +18,7 @@ const SideBarDesktop = () => {
   }, [anchored]);
   const ownerState = {
     anchored: eventAnchored,
-    expandedWidth,
-    variant
+    expandedWidth
   };
   const classRoot = getComponentSlotRoot(SIDEBAR_KEY_COMPONENT);
   return /* @__PURE__ */ jsx(

package/components/SideBar/subcomponents/SideBarDesktop/styles.js

@@ -5,7 +5,7 @@ const sideBarDesktopStyles = {
    * sin que se oculte por el overflow hidden que tiene el contenido del sidebar
    */
   containerDesktopContent: ({ theme, ownerState }) => {
-    const width = ownerState?.anchored ? ownerState?.expandedWidth : ownerState?.variant === "host" ? 0 : theme.vars.size.baseSpacings.sp10;
+    const width = ownerState?.anchored ? ownerState?.expandedWidth : theme.vars.size.baseSpacings.sp4;
     return {
       height: "100%",
       position: "relative",
@@ -17,14 +17,42 @@ const sideBarDesktopStyles = {
   /**
    * Styles applied to the root element of the `SideBar` component in desktop mode.
    */
-  containerDesktopRoot: ({ theme }) => ({
+  containerDesktopRoot: ({ ownerState, theme }) => ({
     height: "100%",
-    width: "100%",
+    width: "fit-content",
     overflow: "visible",
-    borderRight: `1px solid ${theme.vars.palette.border.secondary}`,
+    borderRight: `1px solid ${theme.vars.palette.border.default}`,
+    position: !ownerState?.anchored ? "absolute" : "relative",
     inset: 0,
     //add hover effect
     zIndex: 999
+  }),
+  /**
+   * Container button to achores the sidebar.
+   */
+  containerBtnAnchored: ({ theme, ownerState }) => ({
+    position: "absolute",
+    right: "-20px",
+    top: "20px",
+    zIndex: 1e3,
+    padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
+    "& .MuiButtonBase-root": {
+      ...!ownerState?.anchored && {
+        "&:before": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          backgroundColor: theme.vars.palette.background.default,
+          zIndex: -1
+        }
+      }
+    },
+    "&&& .M4LIconButton-root:hover": {
+      backgroundColor: theme.vars.palette.primary.enabled,
+      "& .M4LIcon-icon": {
+        backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
+      }
+    }
   })
 };
 export {

package/components/SideBar/subcomponents/SideBarMobile/index.js

@@ -4,7 +4,7 @@ import { u as useSideBar } from "../../hooks/useSideBar/index.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../tests/utils.js";
 import { D as Drawer } from "./subcomponents/Drawer.js";
-import { e as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
+import { g as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
 import { C as ContentComponent } from "../ContentComponent/index.js";
 const SideBarMobile = () => {
   const {

package/components/SideBar/subcomponents/TreeGroupItems/index.js

@@ -3,19 +3,18 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../tests/utils.js";
-import { f as ContainerTreeGroupItemsStyled, g as ContainerContentGroupsStyled, h as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
+import { h as ContainerTreeGroupItemsStyled, i as ContainerContentGroupsStyled, j as ContainerContentTitleStyled } from "../../slots/SideBarSlots.js";
 import { N as NodeMenuItemMain } from "./subcomponents/NodeMenuItemMain/NodeMenuItemMain.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../mui_extended/MenuItem/MenuItem.js";
 const TreeGroupItems = (contentGroupsProps) => {
-  const { menuData, anchored } = useSideBar();
+  const { menuData } = useSideBar();
   const { getLabel } = useModuleDictionary();
   const { size } = contentGroupsProps;
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    noItems: menuData.length === 0,
-    anchored
+    noItems: menuData.length === 0
   };
   const renderItemsDisabled = () => {
     return /* @__PURE__ */ jsx(ContainerContentTitleStyled, { ownerState: { disabled: true }, children: /* @__PURE__ */ jsx(

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -1,4 +1,3 @@
-import { g as getSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const contentGroupStyles = {
   /**
    * Container for the group items in the sidebar
@@ -10,17 +9,9 @@ const contentGroupStyles = {
     flex: 1,
     flexDirection: "column",
     overflowY: "auto",
+    padding: `${theme.vars.size.baseSpacings.sp3} 0px 0px 0px`,
     alignItems: "center",
-    justifyContent: ownerState?.noItems ? "center" : "flex-start",
-    transition: "all 0.5s",
-    paddingTop: theme.vars.size.baseSpacings.sp3,
-    paddingLeft: theme.vars.size.baseSpacings.sp4,
-    paddingRight: theme.vars.size.baseSpacings.sp4,
-    gap: theme.vars.size.baseSpacings.sp4,
-    ...!ownerState?.anchored && !theme.generalSettings.isMobile && {
-      transition: "all 0.5s",
-      visibility: "hidden"
-    }
+    justifyContent: ownerState?.noItems ? "center" : "flex-start"
   }),
   /**
    * Wrapper for every principal item group in the sidebar
@@ -37,7 +28,6 @@ const contentGroupStyles = {
   containerContentTitle: ({ theme, ownerState }) => ({
     padding: `${theme.vars.size.baseSpacings.sp3} ${theme.vars.size.baseSpacings.sp4} ${theme.vars.size.baseSpacings.sp1}`,
     color: theme.vars.palette.text.primary,
-    width: "100%",
     textAlign: "left",
     "& .MuiTypography-root": {
       color: !ownerState?.disabled ? theme.vars.palette.text.primary : `${theme.vars.palette.text.primary} !important`
@@ -72,84 +62,6 @@ const contentGroupStyles = {
     alignSelf: "center",
     lineHeight: 0,
     marginLeft: "auto"
-  }),
-  /**
-   * Styles applied to the container of the adornment icon in the header component
-   */
-  containerAdornmentIcon: ({ theme, ownerState }) => ({
-    overflow: "hidden",
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    width: "fit-content",
-    height: "fit-content",
-    padding: "1px",
-    "& .M4LIcon-root": {
-      width: "fit-content",
-      height: "fit-content",
-      padding: theme.vars.size.baseSpacings["sp0-5"],
-      "& .M4LIcon-icon": {
-        ...getSizeStyles(
-          theme,
-          ownerState?.size || "medium",
-          "case",
-          (sizeValue) => ({
-            width: `${sizeValue}!important`,
-            height: `${sizeValue}!important`,
-            minWidth: `${sizeValue}!important`,
-            minHeight: `${sizeValue}!important`
-          })
-        )
-      }
-    },
-    ...ownerState?.variant !== "itemActive" && ownerState?.variant !== "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.chips.persianGreen.contained.colorTone}!important`
-      }
-    },
-    ...ownerState?.variant === "normal" && {
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.text.secondary}!important`
-      }
-    },
-    ...ownerState?.variant === "main" && {
-      backgroundColor: theme.vars.palette.chips.persianGreen.contained.backgroundColorTone
-    },
-    ...ownerState?.variant === "root" && {
-      backgroundColor: theme.vars.palette.primary.enabled
-    },
-    ...ownerState?.variant === "itemActive" && {
-      boxShadow: theme.vars.customShadows.primary2,
-      background: `linear-gradient(to right, 
-      ${theme.vars.palette.primary.opacityGradient1}, 
-      ${theme.vars.palette.primary.opacityGradient2})`,
-      "& .M4LSideBar-backgroundAdornmentIcon": {
-        background: theme.vars.palette.background.default
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        inset: "1.4px",
-        background: theme.vars.palette.primary.enabledOpacity,
-        borderRadius: "5px"
-      },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${theme.vars.palette.primary.enabled}!important`
-      }
-    }
-  }),
-  /**
-   * Styles applied to the background of the adornment icon in the header component
-   */
-  backgroundAdornmentIcon: () => ({
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "5px"
   })
 };
 export {

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -6,14 +6,13 @@ import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { g as getNameDataTestId } from "../../../../tests/utils.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
 import { l as ContainerNodeMenuItemStyled } from "../../../../slots/SideBarSlots.js";
-import { a as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, b as CLASS_NAME_HAS_CHILDREN, c as CLASS_NAME_ITEM_CLOSED } from "../../../../constants.js";
+import { c as CLASS_NAME_MENU_ACTIVE, d as CLASS_NAME_ITEM_IN_TREE_ACTIVE, e as CLASS_NAME_HAS_CHILDREN } from "../../../../constants.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
 function NodeMenuItem(props) {
-  const { item, size, defaultOpen = false, className, isLastSibling = false, isRoot = false } = props;
+  const { item, size, defaultOpen = false, className, isLastSibling = false } = props;
   const { urlIconPrefix, classes } = useSideBar();
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const { currentSize } = useComponentSize(size);
@@ -41,12 +40,11 @@ function NodeMenuItem(props) {
               CLASS_NAME_ITEM_STATE,
               className,
               item.children && item.children.length > 0 && CLASS_NAME_HAS_CHILDREN,
-              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE,
-              !isOpen && CLASS_NAME_ITEM_CLOSED
+              item.itemInTreeActive && CLASS_NAME_ITEM_IN_TREE_ACTIVE
             ),
             label: item.title,
             selected: item.active,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
+            startIcon: `${urlIconPrefix}${item.iconUrl}`,
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/types.d.ts

@@ -6,5 +6,4 @@ export type NodeMenuItemProps = {
     size: Extract<Sizes, 'small' | 'medium'>;
     className?: string;
     isLastSibling?: boolean;
-    isRoot?: boolean;
 };

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItemMain/NodeMenuItemMain.js

@@ -5,16 +5,13 @@ import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
 import { A as ArrowIcon } from "../ArrowIcon/index.js";
 import { Collapse } from "@mui/material";
 import { N as NodeMenuItem } from "../NodeMenuItem/index.js";
-import { C as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
+import { b as CLASS_NAME_IS_ROOT } from "../../../../constants.js";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
-import { A as AdornmentIcon } from "../AdormentIcon/AdormentIcon.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
 import { u as useCollapse } from "../../../../hooks/useCollapse/useCollapse.js";
 const NodeMenuItemMain = (props) => {
   const { item, size, defaultOpen = false } = props;
-  const { urlIconPrefix } = useSideBar();
   const { currentSize } = useComponentSize(size);
   const { isOpen, handlerClick, hasChildren } = useCollapse(item, defaultOpen);
   const isSkeleton = useModuleSkeleton();
@@ -34,8 +31,7 @@ const NodeMenuItemMain = (props) => {
           MenuItemMainStyled,
           {
             label: item.title,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: "main" }),
-            endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
+            startIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize
           }
@@ -47,8 +43,7 @@ const NodeMenuItemMain = (props) => {
             size: currentSize,
             className: clsx(CLASS_NAME_IS_ROOT),
             defaultOpen: isSkeleton ? false : true,
-            isLastSibling: item.children?.length === index + 1,
-            isRoot: true
+            isLastSibling: item.children?.length === index + 1
           },
           child.title
         )) })

package/components/SideBar/types.d.ts

@@ -51,6 +51,10 @@ export interface SideBarProps {
      * Slogan de la empresa
      */
     companySlogan?: string;
+    /**
+     * Indica la variación de estilo del componente
+     */
+    variantStyle?: 'variantDefault' | 'variantComercial';
     moduleSelectedId?: string | undefined;
     onMenuItemClick: (item: MenuDataType) => void;
     /**
@@ -70,19 +74,10 @@ export interface SideBarProps {
      */
     urlIconPrefix?: string;
     /**
-     * Variación del componente, puede ser uno de los valores definidos en 'variantDefault' , 'variantComercial'
-     */
-    variant?: SidebarVariants;
-    /**
-     * Componente que se renderiza en el encabezado del sidebar
-     */
-    headerComponent?: ReactElement;
-    /**
-     * Componente que se renderiza en el pie de página del sidebar
+     * Promoción del sidebar, se renderiza en el footer del sidebar
      */
-    footerComponent?: ReactElement;
+    promotion?: ReactElement;
 }
-export type SidebarVariants = 'host' | 'microfrontend';
 /**
  * Interface que representa el estado de un elemento de menú en la barra lateral.
  */
@@ -101,7 +96,7 @@ export type SideBarOwnerState = Pick<IMenuDataWithState, 'active' | 'itemInTreeA
 export type SideBarStyles = M4LOverridesStyleRules<SideBarSlotsType, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarDesktopStyles = M4LOverridesStyleRules<SideBarDesktopSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentGroupsStyles = M4LOverridesStyleRules<ContentGroupsSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
-export type HeaderComponentStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
+export type HeaderSidebarStyles = M4LOverridesStyleRules<HeaderSidebarSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarFooterStyles = M4LOverridesStyleRules<SideBarFooterSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type SideBarMobileStyles = M4LOverridesStyleRules<SideBarMobileSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;
 export type ContentComponentStyles = M4LOverridesStyleRules<ContentComponentSlots, typeof SIDEBAR_KEY_COMPONENT, Theme>;

package/components/commercial/HamburgerMenu/HamburgerMenu.js

@@ -44,7 +44,8 @@ const HamburgerMenu = (props) => {
             onToggleVisible: handlerOnVisible,
             anchored: false,
             companyLogoSmallUrl: "",
-            companyName: ""
+            companyName: "",
+            variantStyle: "variantComercial"
           }
         )
       ]

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

@@ -6,7 +6,8 @@ const rhfcolorPickerStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: "100%"
   })
 };
 export {

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

@@ -5,7 +5,8 @@ const rhfDateTimeStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: "100%"
   })
 };
 export {

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

@@ -8,7 +8,8 @@ const rhfNumberInputStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
   })
 };
 export {

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

@@ -23,11 +23,8 @@ const rhfPeriodStyles = {
   /**
    * textField class
    */
-  textField: ({ theme }) => ({
-    borderRadius: "50px",
-    width: "43px !important",
-    border: theme.vars.palette.border.default,
-    color: theme.vars.palette.text.disabled
+  numberInput: () => ({
+    width: "43px !important"
   }),
   /**
    * select class

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

@@ -1,6 +1,6 @@
 export declare enum RHFPeriodSlots {
     root = "root",
     periodRoot = "periodRoot",
-    textField = "textField",
+    numberInput = "numberInput",
     select = "select"
 }

package/components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js

@@ -1,7 +1,7 @@
 var RHFPeriodSlots = /* @__PURE__ */ ((RHFPeriodSlots2) => {
   RHFPeriodSlots2["root"] = "root";
   RHFPeriodSlots2["periodRoot"] = "periodRoot";
-  RHFPeriodSlots2["textField"] = "textField";
+  RHFPeriodSlots2["numberInput"] = "numberInput";
   RHFPeriodSlots2["select"] = "select";
   return RHFPeriodSlots2;
 })(RHFPeriodSlots || {});

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').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<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').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "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" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dataTestId" | "autoComplete" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const NumberInputStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../NumberInput/types').NumberInputProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../NumberInput/types').NumberInputProps> & 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<string | number, boolean | undefined>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "onClose" | "title" | "name" | "error" | "input" | "options" | "rows" | "id" | "type" | "disabled" | "components" | "hidden" | "content" | "style" | "open" | "multiple" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "slots" | "slotProps" | "label" | "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" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "componentsProps" | "onOpen" | "dataTestId" | "autoComplete" | "placeholder" | "readOnly" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "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/RHFPeriod/slots/RHFPeriodSlots.js

@@ -2,7 +2,7 @@ import { styled } from "@mui/material/styles";
 import { R as RHF_PERIOD_KEY_COMPONENT } from "../constants.js";
 import { r as rhfPeriodStyles } from "../RHFPeriod.styles.js";
 import { R as RHFPeriodSlots } from "./RHFPeriodEnum.js";
-import { T as TextField } from "../../../mui_extended/TextField/TextField.js";
+import { N as NumberInput } from "../../../NumberInput/NumberInput.js";
 import { S as Select } from "../../../mui_extended/Select/Select.js";
 const RHFPeriodRootStyled = styled("div", {
   name: RHF_PERIOD_KEY_COMPONENT,
@@ -12,17 +12,17 @@ const PeriodRootStyled = styled("div", {
   name: RHF_PERIOD_KEY_COMPONENT,
   slot: RHFPeriodSlots.periodRoot
 })(rhfPeriodStyles?.periodRoot);
-const TextFieldStyled = styled(TextField, {
+const NumberInputStyled = styled(NumberInput, {
   name: RHF_PERIOD_KEY_COMPONENT,
-  slot: RHFPeriodSlots.textField
-})(rhfPeriodStyles?.textField);
+  slot: RHFPeriodSlots.numberInput
+})(rhfPeriodStyles?.numberInput);
 const SelectStyled = styled(Select, {
   name: RHF_PERIOD_KEY_COMPONENT,
   slot: RHFPeriodSlots.select
 })(rhfPeriodStyles?.select);
 export {
+  NumberInputStyled as N,
   PeriodRootStyled as P,
   RHFPeriodRootStyled as R,
-  SelectStyled as S,
-  TextFieldStyled as T
+  SelectStyled as S
 };

package/components/hook-form/RHFPeriod/subcomponents/Period/Period.js

@@ -4,7 +4,7 @@ import { E as ETimePeriods } from "./types.js";
 import { d as dictionary } from "./dictionary.js";
 import { useMemo } from "react";
 import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
-import { P as PeriodRootStyled, S as SelectStyled, T as TextFieldStyled } from "../../slots/RHFPeriodSlots.js";
+import { P as PeriodRootStyled, S as SelectStyled, N as NumberInputStyled } from "../../slots/RHFPeriodSlots.js";
 import { I as Icon } from "../../../../Icon/Icon.js";
 const Period = (props) => {
   const {
@@ -27,7 +27,7 @@ const Period = (props) => {
   );
   const getSingleValue = (period) => {
     if (!period) {
-      return "";
+      return null;
     }
     if (period.singleValue !== void 0) {
       return period.singleValue;
@@ -41,7 +41,7 @@ const Period = (props) => {
     if (period.days && period.days > 0) {
       return period.days;
     }
-    return "";
+    return null;
   };
   const getSelPeriodTime = (period) => {
     if (!period) {
@@ -68,7 +68,7 @@ const Period = (props) => {
       selPeriodTime: newPeriodTime,
       singleValue: newValue
     };
-    if (newValue !== "" && newValue > 0) {
+    if (newValue && newValue > 0) {
       newPeriod.years = 0;
       newPeriod.months = 0;
       newPeriod.days = 0;
@@ -117,13 +117,14 @@ const Period = (props) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      TextFieldStyled,
+      NumberInputStyled,
       {
         type: "number",
         variant: "outlined",
         value: singleValue,
-        onChange: (e) => {
-          onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
+        withDecimal: true,
+        onChange: (_event, newValue) => {
+          onTotalChange(selPeriodTime, newValue);
         }
       }
     )

package/components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js

@@ -1,12 +1,11 @@
 import { g as getCommonActionsDictionary } from "../../../../CommonActions/dictionary.js";
-const DICTIONARY_KEY = "rhf_period";
 const dictionary = {
-  LABEL_YEARS: `${DICTIONARY_KEY}.label_years`,
-  LABEL_MONTHS: `${DICTIONARY_KEY}.label_months`,
-  LABEL_DAYS: `${DICTIONARY_KEY}.label_days`
+  LABEL_YEARS: "period.label_years",
+  LABEL_MONTHS: "period.label_months",
+  LABEL_DAYS: "period.label_days"
 };
 function getPeriodComponetsDictionary() {
-  return [DICTIONARY_KEY].concat(getCommonActionsDictionary());
+  return ["period"].concat(getCommonActionsDictionary());
 }
 export {
   dictionary as d,

package/components/hook-form/RHFPeriod/subcomponents/Period/types.d.ts

@@ -9,8 +9,8 @@ export type PeriodTime = {
     label: string;
 };
 export type PeriodType = {
-    selPeriodTime: '' | ETimePeriods | undefined;
-    singleValue: number | '';
+    selPeriodTime: null | ETimePeriods | undefined;
+    singleValue: number | null;
     years?: number;
     months?: number;
     days?: number;

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

@@ -5,7 +5,8 @@ const rhfSelectStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
   }),
   /**
    * Estilos del Label.

package/components/mui_extended/MenuItem/MenuItem.js

@@ -94,7 +94,7 @@ const MenuItem = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, className: MENUITEM_CLASSES.menuItemContainer, children: [
+        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, children: [
           renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
           /* @__PURE__ */ jsx(
             MenuItemTypographyStyled,