@m4l/components 9.1.5 → 9.1.7

package/@types/types.d.ts

@@ -52,10 +52,18 @@ import type {
 } from '../components/mui_extended/MenuItem/types';
 
 import { SelectOwnerState, SelectSlotsType } from '../components/mui_extended/Select/types';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { C } from 'vitest/dist/chunks/environment.CzISCQ7o';
+
+import { CheckBoxOwnerState, CheckBoxSlotsType } from '../components/mui_extended/CheckBox/types';
 import { RHFInputNumberSpinnerOwnerState, RHFInputNumberSpinnerSlotsType } from '../components/hook-form/RHFInputNumberSpinner/types';
 import { TabOwnerState, TabSlotsType } from '../components/mui_extended/Tab/types';
 
 
+import { ButtonOwnerState, ButtonSlotsType } from '../components/mui_extended/Button/types';
+import { ActionIntroOwnerState, ActionIntroSlotsType } from '../components/CommonActions/components/ActionIntro/types';
+import { ActionCancelOwnerState, ActionCancelSlotsType } from 'src/components/CommonActions/components/ActionCancel/types';
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -79,9 +87,12 @@ declare module '@mui/material/styles' {
     M4LSkeleton: SkeletonSlotsType;
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
+    M4LCheckBox: CheckBoxSlotsType;
     M4LRHFInputNumberSpinner: RHFInputNumberSpinnerSlotsType;
     M4LTab: TabSlotsType;
-
+    M4LButton: ButtonSlotsType;
+    M4LActionIntro: ActionIntroSlotsType;
+    M4LActionCancel: ActionCancelSlotsType;
   }
 
   interface ComponentsPropsList {
@@ -106,8 +117,12 @@ declare module '@mui/material/styles' {
     M4LSkeleton: Partial<SkeletonOwnerState>;
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
+    M4LCheckBox: Partial<CheckBoxOwnerState>;
     M4LRHFInputNumberSpinner:Partial<RHFInputNumberSpinnerOwnerState>
     M4LTab: Partial<TabOwnerState>;
+    M4LButton: Partial<ButtonOwnerState>;
+    M4LActionIntro: Partial<ActionIntroOwnerState>;
+    M4LActionCancel: Partial<ActionCancelOwnerState>;
 
   }
 
@@ -221,6 +236,116 @@ declare module '@mui/material/styles' {
         styleOverrides?: ComponentsOverrides<Theme>['M4LTab'];
         variants?: ComponentsVariants['M4LTab'];
       };
-    }
+      M4LButton?: {
+        defaultProps?: ComponentsPropsList['M4LButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LButton'];
+        variants?: ComponentsVariants['M4LButton'];
+      };
+    };
+    M4LActionIntro?: {
+      defaultProps?: ComponentsPropsList['M4LActionIntro'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LActionIntro'];
+      variants?: ComponentsVariants['M4LActionIntro'];
+    };
+    M4LDynamicSort?: {
+      defaultProps?: ComponentsPropsList['M4LDynamicSort'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDynamicSort'];
+      variants?: ComponentsVariants['M4LDynamicSort'];
+    };
+    M4LMenuActions?: {
+      defaultProps?: ComponentsPropsList['M4LMenuActions'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuActions'];
+      variants?: ComponentsVariants['M4LMenuActions'];
+    };
+    M4LInputNumberSpinner?: {
+      defaultProps?: ComponentsPropsList['M4LInputNumberSpinner'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LInputNumberSpinner'];
+      variants?: ComponentsVariants['M4LInputNumberSpinner'];
+    };
+    M4LPopupsViewer?: {
+      defaultProps?: ComponentsPropsList['M4LPopupsViewer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LPopupsViewer'];
+      variants?: ComponentsVariants['M4LPopupsViewer'];
+    };
+    M4LDragResizeWindow?: {
+      defaultProps?: ComponentsPropsList['M4LDragResizeWindow'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDragResizeWindow'];
+      variants?: ComponentsVariants['M4LDragResizeWindow'];
+    };
+    M4LToastContainer?: {
+      defaultProps?: ComponentsPropsList['M4LToastContainer'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LToastContainer'];
+      variants?: ComponentsVariants['M4LToastContainer'];
+    };
+    M4LHelperError?: {
+      defaultProps?: ComponentsPropsList['M4LHelperError'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LHelperError'];
+      variants?: ComponentsVariants['M4LHelperError'];
+    };
+    M4LLabel?: {
+      defaultProps?: ComponentsPropsList['M4LLabel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LLabel'];
+      variants?: ComponentsVariants['M4LLabel'];
+    };
+    M4LIcon?: {
+      defaultProps?: ComponentsPropsList['M4LIcon'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIcon'];
+      variants?: ComponentsVariants['M4LIcon'];
+    };
+    M4LTooltip?: {
+      defaultProps?: ComponentsPropsList['M4LTooltip'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTooltip'];
+      variants?: ComponentsVariants['M4LTooltip'];
+    };
+    M4LTextField?: {
+      defaultProps?: ComponentsPropsList['M4LTextField'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTextField'];
+      variants?: ComponentsVariants['M4LTextField'];
+    };
+    M4LIconButton?: {
+      defaultProps?: ComponentsPropsList['M4LIconButton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIconButton'];
+      variants?: ComponentsVariants['M4LIconButton'];
+    };
+    M4LBadge?: {
+      defaultProps?: ComponentsPropsList['M4LBadge'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
+      variants?: ComponentsVariants['M4LBadge'];
+    };
+    M4LControlIncrement?: {
+      defaultProps?: ComponentsPropsList['M4LControlIncrement'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LControlIncrement'];
+      variants?: ComponentsVariants['M4LControlIncrement'];
+    M4LMenuItem?: {
+      defaultProps?: ComponentsPropsList['M4LMenuItem'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMenuItem'];
+      variants?: ComponentsVariants['M4LMenuItem'];
+    };
+    M4LSkeleton?: {
+      defaultProps?: ComponentsPropsList['M4LSkeleton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
+      variants?: ComponentsVariants['M4LSkeleton'];
+    };
+    M4LSelect: {
+      defaultProps?: ComponentsPropsList['M4LSelect'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSelect'];
+      variants?: ComponentsVariants['M4LSelect'];
+    };
+    M4LTypography?: {
+      defaultProps?: ComponentsPropsList['M4LTypography'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
+      variants?: ComponentsVariants['M4LTypography'];
+    };
+    M4LCheckBox?: {
+      defaultProps?: ComponentsPropsList['M4LCheckBox'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
+      variants?: ComponentsVariants['M4LCheckBox'];
+    };
+    M4LActionCancel?: {
+      defaultProps?: ComponentsPropsList['M4LActionCancel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LActionCancel'];
+      variants?: ComponentsVariants['M4LActionCancel'];
+    };
   }
+}
 }

package/components/CommonActions/components/ActionCancel/ActionCancel.d.ts

@@ -0,0 +1,11 @@
+import { ActionCancelProps } from './types';
+/**
+ * This component renders a cancel button with a label from the module dictionary.
+ * Extends ButtonProps - The props for the button component.
+ * @param props
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-13 08:44:55 - automatic
+ * @updatedUser SebastianM - automatic
+ */
+export declare const ActionCancel: import('react').ForwardRefExoticComponent<Omit<Omit<ActionCancelProps, "label">, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/CommonActions/components/ActionCancel/ActionCancel.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { forwardRef } from "react";
+import { A as ActionCancelRootStyled } from "./slots/ActionsCancelSlots.js";
+const ActionCancel = forwardRef((props, ref) => {
+  const {
+    color,
+    className,
+    endIcon,
+    startIcon,
+    skeletonWidth = props.size === "small" ? "60px" : "80px",
+    dataTestid,
+    disabled = false,
+    size = "small",
+    variant = "outlined",
+    ...others
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const theme = useTheme();
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    size,
+    variant,
+    paletteColor
+  };
+  return /* @__PURE__ */ jsx(
+    ActionCancelRootStyled,
+    {
+      variant,
+      color: "default",
+      "data-testid": dataTestid,
+      disabled,
+      endIcon,
+      label: getLabel("common_actions.cancel"),
+      ownerState: { ...ownerState },
+      skeletonWidth,
+      startIcon,
+      size,
+      ref,
+      ...others
+    }
+  );
+});
+ActionCancel.displayName = "ActionCancel";
+export {
+  ActionCancel as A
+};

package/components/CommonActions/components/ActionCancel/ActionCancel.test.d.ts

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

package/components/CommonActions/components/ActionCancel/ActionCancelStyles.d.ts

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

package/components/CommonActions/components/ActionCancel/ActionCancelStyles.js

@@ -0,0 +1,6 @@
+const actionCancelStyles = {
+  actionsCancelRoot: {}
+};
+export {
+  actionCancelStyles as a
+};

package/components/CommonActions/components/ActionCancel/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clave de identificación del componente ActionCancel dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `ActionCancel` dentro del sistema de temas y estilos.
+ * @default 'M4LActionCancel'
+ */
+export declare const ACTIONCANCEL_KEY_COMPONENT = "M4LActionCancel";

package/components/CommonActions/components/ActionCancel/constants.js

@@ -0,0 +1,4 @@
+const ACTIONCANCEL_KEY_COMPONENT = "M4LActionCancel";
+export {
+  ACTIONCANCEL_KEY_COMPONENT as A
+};

package/components/CommonActions/components/ActionCancel/index.d.ts

@@ -1,5 +1,2 @@
-import { ButtonProps } from '../../../mui_extended/Button';
-/**
- * TODO: Documentar
- */
-export declare const ActionCancel: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export * from './ActionCancel';
+export * from './types';

package/components/CommonActions/components/ActionCancel/index.js

@@ -1,12 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/Button.js";
-import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
-const ActionCancel = (props) => {
-  const { getLabel } = useModuleDictionary();
-  const classes = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "inherit", ...props, className: classes.actionCancel, children: getLabel("common_actions.cancel") });
-};
-export {
-  ActionCancel as A
-};
+

package/components/CommonActions/components/ActionCancel/slots/ActionsCancelEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ActionCancelSlots {
+    actionsCancelRoot = "actionsCancelRoot"
+}

package/components/CommonActions/components/ActionCancel/slots/ActionsCancelEnum.js

@@ -0,0 +1,7 @@
+var ActionCancelSlots = /* @__PURE__ */ ((ActionCancelSlots2) => {
+  ActionCancelSlots2["actionsCancelRoot"] = "actionsCancelRoot";
+  return ActionCancelSlots2;
+})(ActionCancelSlots || {});
+export {
+  ActionCancelSlots as A
+};

package/components/CommonActions/components/ActionCancel/slots/ActionsCancelSlots.d.ts

@@ -0,0 +1,4 @@
+declare const ActionCancelRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "form" | "label" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "endIcon" | "skeletonWidth" | "disableElevation" | "fullWidth" | "startIcon" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ActionCancelOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ActionCancelOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export { ActionCancelRootStyled };

package/components/CommonActions/components/ActionCancel/slots/ActionsCancelSlots.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles";
+import { A as ACTIONCANCEL_KEY_COMPONENT } from "../constants.js";
+import { A as ActionCancelSlots } from "./ActionsCancelEnum.js";
+import { a as actionCancelStyles } from "../ActionCancelStyles.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+const ActionCancelRootStyled = styled(Button, {
+  name: ACTIONCANCEL_KEY_COMPONENT,
+  slot: ActionCancelSlots.actionsCancelRoot
+})(actionCancelStyles?.actionsCancelRoot);
+export {
+  ActionCancelRootStyled as A
+};

package/components/CommonActions/components/ActionCancel/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionsCancelEnum';
+export * from './ActionsCancelSlots';

package/components/CommonActions/components/ActionCancel/slots/index.js

@@ -0,0 +1 @@
+

package/components/CommonActions/components/ActionCancel/types.d.ts

@@ -0,0 +1,33 @@
+import { PaletteColor, Theme } from '@mui/material';
+import { ButtonProps } from '../../../mui_extended/Button/types';
+import { Sizes } from '@m4l/styles';
+import { ReactNode } from 'react';
+import { ACTIONCANCEL_KEY_COMPONENT } from './constants';
+import { ActionCancelSlots } from './slots';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+export type ActionCancelVariants = 'outlined';
+/**
+ * Properties of the `ActionCancel` component.
+ * The `ActionIntro` component renders a button with an optional icon and label.
+ * It supports different sizes, colors, and states such as disabled.
+ */
+export interface ActionCancelProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {
+    variant?: ActionCancelVariants;
+    color?: Extract<PaletteColor, 'default'>;
+    dataTestid?: 'string';
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+/**
+ * Owner state of the `ActionCancel` used to define internal style and behavior properties.
+ */
+export interface ActionCancelOwnerState extends Pick<ButtonProps, 'size' | 'variant' | 'color' | 'disabled'> {
+    disabled?: boolean;
+    paletteColor: PaletteColor;
+}
+export type ActionCancelSlotsType = keyof typeof ActionCancelSlots;
+/**
+ * Styles applicable to the `ActionCancel` using themes and custom slots.
+ */
+export type ActionCancelStyles = Partial<OverridesStyleRules<ActionCancelSlotsType, typeof ACTIONCANCEL_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/CommonActions/components/ActionCancel/types.js

@@ -0,0 +1 @@
+

package/components/CommonActions/components/ActionFormCancel/index.d.ts

@@ -1,4 +1,8 @@
 /**
  * TODO: Documentar
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 10:39:53 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare function ActionFormCancel(): import("react/jsx-runtime").JSX.Element;

package/components/CommonActions/components/ActionFormCancel/index.js

@@ -44,10 +44,10 @@ function ActionFormCancel() {
     Button,
     {
       variant: "outlined",
-      color: "inherit",
+      color: "default",
       onClick: onClickCancel,
       className: classes.actionFormCancel,
-      children: getLabel("common_actions.cancel")
+      label: getLabel("common_actions.cancel")
     }
   );
 }

package/components/CommonActions/components/ActionIntro/ActionIntro.d.ts

@@ -0,0 +1,12 @@
+import { ActionIntroProps } from './types';
+/**
+ * ActionIntro component renders a styled button with various props.
+ * It supports different sizes, colors, and states such as disabled.
+ * @param props
+ * @returns
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-08 10:59:45 - automatic
+ * @updatedAt 2024-11-13 09:11:08 - automatic
+ * @updatedUser SebastianM - automatic
+ */
+export declare const ActionIntro: import('react').ForwardRefExoticComponent<Omit<Omit<ActionIntroProps, "label">, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/CommonActions/components/ActionIntro/ActionIntro.integration.test.d.ts

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

package/components/CommonActions/components/ActionIntro/ActionIntro.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { forwardRef } from "react";
+import { A as ActionIntroRootStyled } from "./slots/ActionsIntroSlots.js";
+const ActionIntro = forwardRef((props, ref) => {
+  const {
+    color = "primary",
+    className,
+    endIcon,
+    skeletonWidth = props.size === "small" ? "80px" : "100px",
+    startIcon,
+    disabled = false,
+    size = "small",
+    variant = "contained",
+    ...others
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const theme = useTheme();
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    size,
+    variant,
+    paletteColor
+  };
+  return /* @__PURE__ */ jsx(
+    ActionIntroRootStyled,
+    {
+      variant,
+      type: "submit",
+      color,
+      disabled,
+      endIcon,
+      label: getLabel("common_actions.intro"),
+      ownerState: { ...ownerState },
+      skeletonWidth,
+      startIcon,
+      size,
+      ref,
+      ...others
+    }
+  );
+});
+ActionIntro.displayName = "ActionIntro";
+export {
+  ActionIntro as A
+};

package/components/CommonActions/components/ActionIntro/ActionIntro.test.d.ts

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

package/components/CommonActions/components/ActionIntro/ActionIntroStyles.d.ts

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

package/components/CommonActions/components/ActionIntro/ActionIntroStyles.js

@@ -0,0 +1,6 @@
+const actionIntroStyles = {
+  actionsIntroRoot: {}
+};
+export {
+  actionIntroStyles as a
+};

package/components/CommonActions/components/ActionIntro/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clave de identificación del componente ActionIntro dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `ActionIntro` dentro del sistema de temas y estilos.
+ * @default 'M4LActionIntro'
+ */
+export declare const ACTIONINTRO_KEY_COMPONENT = "M4LActionIntro";

package/components/CommonActions/components/ActionIntro/constants.js

@@ -0,0 +1,4 @@
+const ACTIONINTRO_KEY_COMPONENT = "M4LActionIntro";
+export {
+  ACTIONINTRO_KEY_COMPONENT as A
+};

package/components/CommonActions/components/ActionIntro/index.d.ts

@@ -1,5 +1,2 @@
-import { ButtonProps } from '../../../mui_extended/Button';
-/**
- * TODO: Documentar
- */
-export declare const ActionIntro: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export * from './ActionIntro';
+export * from './types';

package/components/CommonActions/components/ActionIntro/index.js

@@ -1,25 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { useModuleDictionary } from "@m4l/core";
-import { B as Button } from "../../../mui_extended/Button/Button.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { A as ACTIONINTRO_TEST_ID } from "./test/contants.js";
-import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
-const ActionIntro = (props) => {
-  const { getLabel } = useModuleDictionary();
-  const classes = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: ACTIONINTRO_TEST_ID } : {},
-      variant: "contained",
-      type: "submit",
-      color: "primary",
-      className: classes.actionIntro,
-      ...props,
-      children: getLabel("common_actions.intro")
-    }
-  );
-};
-export {
-  ActionIntro as A
-};
+

package/components/CommonActions/components/ActionIntro/slots/ActionsIntroEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ActionIntroSlots {
+    actionsIntroRoot = "actionsCancelRoot"
+}

package/components/CommonActions/components/ActionIntro/slots/ActionsIntroEnum.js

@@ -0,0 +1,7 @@
+var ActionIntroSlots = /* @__PURE__ */ ((ActionIntroSlots2) => {
+  ActionIntroSlots2["actionsIntroRoot"] = "actionsCancelRoot";
+  return ActionIntroSlots2;
+})(ActionIntroSlots || {});
+export {
+  ActionIntroSlots as A
+};

package/components/CommonActions/components/ActionIntro/slots/ActionsIntroSlots.d.ts

@@ -0,0 +1,4 @@
+declare const ActionIntroRootStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "form" | "label" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "endIcon" | "skeletonWidth" | "disableElevation" | "fullWidth" | "startIcon" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ActionIntroOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ActionIntroOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export { ActionIntroRootStyled };

package/components/CommonActions/components/ActionIntro/slots/ActionsIntroSlots.js

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles";
+import { A as ACTIONINTRO_KEY_COMPONENT } from "../constants.js";
+import { A as ActionIntroSlots } from "./ActionsIntroEnum.js";
+import { a as actionIntroStyles } from "../ActionIntroStyles.js";
+import { B as Button } from "../../../../mui_extended/Button/Button.js";
+const ActionIntroRootStyled = styled(Button, {
+  name: ACTIONINTRO_KEY_COMPONENT,
+  slot: ActionIntroSlots.actionsIntroRoot
+})(actionIntroStyles?.actionsIntroRoot);
+export {
+  ActionIntroRootStyled as A
+};

package/components/CommonActions/components/ActionIntro/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionsIntroEnum';
+export * from './ActionsIntroSlots';

package/components/CommonActions/components/ActionIntro/slots/index.js

@@ -0,0 +1 @@
+

package/components/CommonActions/components/ActionIntro/types.d.ts

@@ -0,0 +1,33 @@
+import { PaletteColor, Theme } from '@mui/material';
+import { ButtonProps } from '../../../mui_extended/Button/types';
+import { Sizes } from '@m4l/styles';
+import { ReactNode } from 'react';
+import { ACTIONINTRO_KEY_COMPONENT } from './constants';
+import { ActionIntroSlots } from './slots';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+export type ActionIntroVariants = 'contained';
+/**
+ * Properties of the `ActionIntro` component.
+ * The `ActionIntro` component renders a button with an optional icon and label.
+ * It supports different sizes, colors, and states such as disabled.
+ */
+export interface ActionIntroProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {
+    variant?: ActionIntroVariants;
+    color?: Extract<PaletteColor, 'primary'>;
+    dataTestid?: 'string';
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+/**
+ * Owner state of the `ActionIntro` used to define internal style and behavior properties.
+ */
+export interface ActionIntroOwnerState extends Pick<ButtonProps, 'size' | 'variant' | 'color' | 'disabled'> {
+    disabled?: boolean;
+    paletteColor: PaletteColor;
+}
+export type ActionIntroSlotsType = keyof typeof ActionIntroSlots;
+/**
+ * Styles applicable to the `ActionIntro` using themes and custom slots.
+ */
+export type ActionIntroStyles = Partial<OverridesStyleRules<ActionIntroSlotsType, typeof ACTIONINTRO_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/CommonActions/components/ActionIntro/types.js

@@ -0,0 +1 @@
+

package/components/CommonActions/components/ActionsContainer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionsContainer';
+export * from './types';