@m4l/components 9.3.19-BE021025-beta.2 → 9.3.19-BE061025-beta.1

package/@types/types.d.ts

@@ -293,6 +293,7 @@ import {
   ImageTextSlotsType,
 } from '../components/ImageText/types';
 import { FormContainerOwnerState, FormContainerSlotsType } from '../components/FormContainer/types';
+import { EditLabelOwnerState, EditLabelSlotsType } from '../components/EditLabel/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -381,6 +382,7 @@ declare module '@mui/material/styles' {
     M4LStepper: StepperSlotsType;
     M4LImageText: ImageTextSlotsType;
     M4LFormContainer: FormContainerSlotsType;
+    M4LEditLabel: EditLabelSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -468,6 +470,7 @@ declare module '@mui/material/styles' {
     M4LStepper: Partial<StepperOwnerState>;
     M4LImageText: Partial<ImageTextOwnerState>;
     M4LFormContainer: Partial<FormContainerOwnerState>;
+    M4LEditLabel: Partial<EditLabelOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -900,5 +903,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LFormContainer'];
       variants?: ComponentsVariants['M4LFormContainer'];
     };
+    M4LEditLabel?: {
+      defaultProps?: ComponentsPropsList['M4LEditLabel'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LEditLabel'];
+      variants?: ComponentsVariants['M4LEditLabel'];
+    };
   }
 }

package/components/EditLabel/EditLabel.d.ts

@@ -0,0 +1,7 @@
+import { EditLabelProps } from './types';
+/**
+ * Componente de texto editable con funcionalidades avanzadas.
+ * @param props - Las propiedades del componente
+ * @returns El componente EditLabel renderizado
+ */
+export declare const EditLabel: (props: EditLabelProps) => import("react/jsx-runtime").JSX.Element;

package/components/EditLabel/EditLabel.styles.d.ts

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

package/components/EditLabel/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const EDIT_LABEL_KEY_COMPONENT = "M4LEditLabel";
+export declare const EDIT_LABEL_CLASSES: Record<string, string>;

package/components/EditLabel/hooks/useEditLabel.d.ts

@@ -0,0 +1,23 @@
+export interface UseEditLabelProps {
+    label: string;
+    onChange: (value: string) => void;
+}
+export interface UseEditLabelReturn {
+    inEdition: boolean;
+    value: string;
+    buttonSubmitRef: React.RefObject<HTMLButtonElement>;
+    buttonCancelRef: React.RefObject<HTMLButtonElement>;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSubmit: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    handleCancel: (event: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    handleEditStart: () => void;
+    handleInputClick: () => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Custom hook que maneja la lógica de estado y handlers para el componente EditLabel.
+ * @param props - Las propiedades del hook
+ * @returns El estado y handlers del EditLabel
+ */
+export declare const useEditLabel: ({ label, onChange, }: UseEditLabelProps) => UseEditLabelReturn;

package/components/EditLabel/icons.d.ts

@@ -0,0 +1,5 @@
+export declare const PATH_ICONS: {
+    EDIT: string;
+    ACCEPT: string;
+    CANCEL: string;
+};

package/components/EditLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { EditLabel } from './EditLabel';
+export type { EditLabelProps, EditLabelOwnerState } from './types';

package/components/EditLabel/slots/EditLabelEnum.d.ts

@@ -0,0 +1,7 @@
+export declare enum EditLabelSlots {
+    root = "root",
+    textField = "textField",
+    icon = "icon",
+    containerActions = "containerActions",
+    iconButton = "iconButton"
+}

package/components/EditLabel/slots/EditLabelSlots.d.ts

@@ -0,0 +1,15 @@
+export declare const EditLabelRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, 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" | "maxLength" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "inputProps" | "inputRef" | "multiline" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const ContainerActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').EditLabelOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/EditLabel/test/EditLabel.test.d.ts

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

package/components/EditLabel/types.d.ts

@@ -0,0 +1,43 @@
+import { Sizes } from '@m4l/styles';
+import { EditLabelSlots } from './slots/EditLabelEnum';
+import { EDIT_LABEL_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export interface EditLabelProps {
+    /**
+     * The label to display
+     */
+    label: string;
+    /**
+     * The function to call when the label is changed
+     */
+    onChange: (value: string) => void;
+    /**
+     * The size of the label
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * The width of the input
+     */
+    width?: string;
+}
+export interface EditLabelOwnerState {
+    /**
+     * The size of the label
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * The state of the edition
+     */
+    inEdition?: boolean;
+    /**
+     * The width of the input
+     */
+    width?: string;
+}
+export type EditLabelSlotsType = keyof typeof EditLabelSlots;
+export type EditLabelStyles = M4LOverridesStyleRules<EditLabelSlotsType, typeof EDIT_LABEL_KEY_COMPONENT, Theme>;

package/components/MFIsolationApp/MFIsolationApp.js

@@ -4,15 +4,18 @@ import { unstable_HistoryRouter } from "react-router-dom";
 import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
 import NProgress from "nprogress";
-import { DeviceTypeProvider, LocalesProvider, getLocaleFromNetwork } from "@m4l/graphics";
+import { DeviceTypeProvider, ThemeSettingsProvider, LocalesProvider, getLocaleFromNetwork } from "@m4l/graphics";
 import { EnvironmentProvider, HostToolsProvider, NetworkProvider, axiosOperation, AuthProvider } from "@m4l/core";
 import { A as AppearanceComponentProvider } from "../../contexts/AppearanceComponentContext/AppearanceComponentContext.js";
 import { c as createToaster } from "../ToastContainer/helpers/toaster.js";
 import { M as MFAuthApp } from "./subcomponents/MFAuthApp/MFAuthApp.js";
 import { B as BaseModule } from "../BaseModule/BaseModule.js";
+import { S as SettingsLayout } from "../SettingsLayout/SettingsLayout.js";
 import { T as ToastContainer } from "../ToastContainer/ToastContainer.js";
 import { P as PopupsProvider } from "../popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js";
 import { A as AreasProvider } from "../areas/contexts/AreasContext/index.js";
+import { S as Stack } from "../mui_extended/Stack/Stack.js";
+import { A as AppBarSettings } from "./subcomponents/AppBarSettings/AppBarSettings.js";
 const history = createBrowserHistory({ window });
 function MFIsolationApp(props) {
   const {
@@ -39,7 +42,8 @@ function MFIsolationApp(props) {
     moduleDictionaryLoaded,
     forcedDeviceType,
     areasStoreId,
-    areasStoreDevtoolsEnabled
+    areasStoreDevtoolsEnabled,
+    appBarSettings = false
   } = props;
   const eventEmitter = useMemo(() => new EventEmitter(), []);
   const events_add_listener = useCallback(
@@ -103,7 +107,7 @@ function MFIsolationApp(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(MFAuthApp, { user, pwd, children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { ...environment, children: /* @__PURE__ */ jsx(HostToolsProvider, { ...hostTools, children: /* @__PURE__ */ jsx(NetworkProvider, { axiosOperation, children: /* @__PURE__ */ jsx(unstable_HistoryRouter, { history, children: /* @__PURE__ */ jsx(DeviceTypeProvider, { forcedDeviceType, children: /* @__PURE__ */ jsx(AuthProvider, { children: /* @__PURE__ */ jsx(MFAuthApp, { user, pwd, children: /* @__PURE__ */ jsx(ThemeSettingsProvider, { children: /* @__PURE__ */ jsx(LocalesProvider, { isMicroFrontEnd: false, getLocaleFromNetwork, children: /* @__PURE__ */ jsx(
     BaseModule,
     {
       moduleId,
@@ -113,6 +117,7 @@ function MFIsolationApp(props) {
       moduleNameField,
       moduleDictionaryLoaded,
       children: /* @__PURE__ */ jsxs(AppearanceComponentProvider, { children: [
+        /* @__PURE__ */ jsx(SettingsLayout, {}),
         /* @__PURE__ */ jsx(ToastContainer, { containerId: toastContainerId }),
         " ",
         /* @__PURE__ */ jsx(
@@ -132,14 +137,17 @@ function MFIsolationApp(props) {
                 onSelectLayout: (modId) => {
                   console.log("onSelectLayout", modId);
                 },
-                children
+                children: /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "100%", flexDirection: "column", overflow: "hidden", position: "relative", children: [
+                  appBarSettings && /* @__PURE__ */ jsx(AppBarSettings, {}),
+                  /* @__PURE__ */ jsx(Stack, { width: "100%", flexGrow: 1, flexDirection: "column", overflow: "hidden", position: "relative", children })
+                ] })
               }
             )
           }
         )
       ] })
     }
-  ) }) }) }) }) }) }) }) });
+  ) }) }) }) }) }) }) }) }) });
 }
 export {
   MFIsolationApp as M

package/components/MFIsolationApp/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const PATH_ICONS: {
+    SETTINGS: string;
+};

package/components/MFIsolationApp/icons.js

@@ -0,0 +1,6 @@
+const PATH_ICONS = {
+  SETTINGS: "frontend/components/account_popover/assets/icons/configuration.svg"
+};
+export {
+  PATH_ICONS as P
+};

package/components/MFIsolationApp/subcomponents/AppBarSettings/AppBarSettings.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente base para la aplicación en modo de aislamiento
+ */
+export declare function AppBarSettings(): import("react/jsx-runtime").JSX.Element;

package/components/MFIsolationApp/subcomponents/AppBarSettings/AppBarSettings.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useThemeSettingsStore } from "@m4l/graphics";
+import { P as PATH_ICONS } from "../../icons.js";
+import { useEnvironment } from "@m4l/core";
+import { S as Stack } from "../../../mui_extended/Stack/Stack.js";
+import { L as LanguagePopover } from "../../../LanguagePopover/LanguagePopover.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+function AppBarSettings() {
+  const handleOpen = useThemeSettingsStore((state) => state.settingsActions.handleOpen);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsxs(Stack, { width: "100%", height: "40px", justifyContent: "space-between", flexDirection: "row", overflow: "hidden", position: "relative", padding: [0, 2], children: [
+    /* @__PURE__ */ jsx(Stack, { width: "100%", height: "100%" }),
+    /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", gap: 2, height: "100%", width: "auto", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(LanguagePopover, {}),
+      /* @__PURE__ */ jsx(IconButton, { src: `${host_static_assets}/${environment_assets}/${PATH_ICONS.SETTINGS}`, onClick: handleOpen })
+    ] })
+  ] });
+}
+export {
+  AppBarSettings as A
+};

package/components/MFIsolationApp/subcomponents/AppBarSettings/index.d.ts

@@ -0,0 +1 @@
+export { AppBarSettings } from './AppBarSettings';

package/components/MFIsolationApp/subcomponents/AppBarSettings/index.js

@@ -0,0 +1 @@
+

package/components/MFIsolationApp/types.d.ts

@@ -13,6 +13,7 @@ export type MFIsolationAppProps = BaseModuleProps & {
     onLoad: () => void;
     activeAreasNetwork?: boolean;
     activeCookiesFromNetwork?: boolean;
+    appBarSettings?: boolean;
     /**
      * Diccionario de componentes, se puede proporcionar ya el diccionario cargado, para evitar que se llame al endpoint nuevamente.
      */

package/components/ModalDialog/ModalDialog.js

@@ -81,6 +81,7 @@ const ModalDialog = () => {
       "aria-labelledby": "child-modal-title",
       PaperComponent: SelectedPaperComponent,
       disableEnforceFocus: true,
+      disableRestoreFocus: true,
       children: contentComponent
     }
   );

package/components/formatters/EditLabelFormatter/EditLabelFormatter.d.ts

@@ -0,0 +1,5 @@
+import { EditLabelFormatterProps } from './types';
+/**
+ * Formatter para mostrar un chip en función del estado determinado por el status
+ */
+export declare const EditLabelFormatter: (props: EditLabelFormatterProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/EditLabelFormatter/EditLabelFormatter.styles.d.ts

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

package/components/formatters/EditLabelFormatter/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clave del componente ChipStatusFormatter
+ */
+export declare const EDIT_LABEL_FORMATTER_KEY_COMPONENT = "M4LEditLabelFormatter";
+export declare const EDIT_LABEL_FORMATTER_CLASSES: Record<string, string>;

package/components/formatters/EditLabelFormatter/index.d.ts

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

package/components/formatters/EditLabelFormatter/slots/EditLabelFormatterEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum EditLabelFormatterSlots {
+    root = "root",
+    columnWrapper = "columnWrapper"
+}

package/components/formatters/EditLabelFormatter/slots/EditLabelFormatterSlots.d.ts

@@ -0,0 +1,4 @@
+/**
+ * componente root del ChipStatusFormatter
+ */
+export declare const EditLabelFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../EditLabel').EditLabelProps, keyof import('../../../EditLabel').EditLabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;

package/components/formatters/EditLabelFormatter/test/EditLabelFormatter.test.d.ts

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

package/components/formatters/EditLabelFormatter/types.d.ts

@@ -0,0 +1,23 @@
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { EDIT_LABEL_FORMATTER_KEY_COMPONENT } from './constants';
+import { EditLabelFormatterSlots as Slots } from './slots/EditLabelFormatterEnum';
+import { Theme } from '@mui/material';
+import { EditLabelProps } from '../../EditLabel/types';
+export type ChipStatusKey = string | number;
+export interface EditLabelFormatterProps extends Pick<EditLabelProps, 'label' | 'onChange' | 'size' | 'width' | 'className'> {
+    /**
+     * Componente personalizado
+     */
+    Component?: React.ElementType;
+    /**
+     * Clase CSS del componente root
+     */
+    className?: string;
+    /**
+     * ID de prueba del componente
+     */
+    dataTestid?: string;
+}
+export type EditLabelFormatterOwnerState = {};
+export type EditLabelFormatterSlotsType = keyof typeof Slots;
+export type EditLabelFormatterStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof EDIT_LABEL_FORMATTER_KEY_COMPONENT, Theme>;

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

@@ -21,7 +21,10 @@ function RHFAutocomplete(props) {
     mandatory,
     mandatoryMessage,
     multiple,
-    refresh
+    refresh,
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
     // onChange: onChangeRHF,
   } = props;
   const htmlForId = useId();
@@ -112,7 +115,10 @@ function RHFAutocomplete(props) {
                   onClose: onCloseLocal,
                   size,
                   value,
-                  htmlFor: htmlForId
+                  htmlFor: htmlForId,
+                  startAdornment,
+                  getOptionalStartAdornment: getOptionalStartAdornment ? (option) => getOptionalStartAdornment(option) : () => null,
+                  getOptionalEndAdornment: getOptionalEndAdornment ? (option) => getOptionalEndAdornment(option) : () => null
                 }
               ),
               error?.message ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null

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

@@ -5,6 +5,7 @@ import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { RFHAutocompleteSlots } from './slots';
 import { LabelProps } from '../../Label/types';
+import { AutocompleteProps } from 'src/components/mui_extended/Autocomplete/types';
 export type GetOptionString<T> = (option: T | null) => string;
 export type RHFAutocompleteVariants = 'outlined' | 'text';
 export type RHFAutocompleteType = 'text' | 'image';
@@ -46,6 +47,18 @@ export interface RHFAutocompleteProps<T = any, Multiple extends boolean | undefi
         message: string;
     };
     renderInput?: MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
+    /**
+     * Icono o adorno que se muestra al inicio del autocomplete.
+     */
+    startAdornment?: AutocompleteProps<T, Multiple>['startAdornment'];
+    /**
+     * Icono o adorno inicial que se muestra en cada opción del autocomplete.
+     */
+    getOptionalEndAdornment?: AutocompleteProps<T, Multiple>['getOptionalEndAdornment'];
+    /**
+     * Icono o adorno final que se muestra en cada opción del autocomplete.
+     */
+    getOptionalStartAdornment?: AutocompleteProps<T, Multiple>['getOptionalStartAdornment'];
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.

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

@@ -22,7 +22,10 @@ function RHFAutocompleteAsync(props) {
     multiple,
     disabled,
     skeletonWidth,
-    responseToCamelCase
+    responseToCamelCase,
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   } = props;
   const [state, dispatch] = useReducer(
     RHFAutocompleteAsyncReducer(onChangeFilterParms),
@@ -87,7 +90,10 @@ function RHFAutocompleteAsync(props) {
       multiple,
       disabled,
       onClose: onCloseLocal,
-      skeletonWidth
+      skeletonWidth,
+      startAdornment,
+      getOptionalStartAdornment,
+      getOptionalEndAdornment
     }
   );
 }

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

@@ -1,20 +1,120 @@
 import { FieldValues } from 'react-hook-form';
-import { CustomFormArguments, FormProviderCustomProps, FormProviderProps } from './types';
+import { CustomFormArguments, FormProviderProps, RHFormProviderRef } from './types';
 /**
- * TODO: Documentar
+ * Hook personalizado que configura y gestiona un formulario usando React Hook Form con validación Yup.
+ *
+ * Este hook encapsula la lógica de inicialización del formulario, incluyendo la configuración del resolver de Yup,
+ * valores por defecto, y la gestión de estados de carga para actualizar valores del formulario.
+ * @param validationSchema - Esquema de validación de Yup que define las reglas de validación del formulario
+ * @param values - Valores iniciales del formulario
+ * @param statusLoad - Estado de carga que determina cuándo actualizar los valores del formulario
+ * @param mode - Modo de validación del formulario (ej: 'onChange', 'onBlur', 'onSubmit')
+ * @returns Objeto con todos los métodos y propiedades de React Hook Form
+ * @example
+ * ```tsx
+ * const formMethods = useCustomForm({
+ *   validationSchema: myValidationSchema,
+ *   values: { name: '', email: '' },
+ *   statusLoad: 'ready',
+ *   mode: 'onChange'
+ * });
+ * ```
  */
 export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
- * TODO: Documentar
+ * Componente que proporciona el contexto de React Hook Form con funcionalidades adicionales.
+ *
+ * Este componente envuelve el `FormProvider` de React Hook Form y expone métodos del formulario
+ * a través de una ref usando `useImperativeHandle`. Permite acceso programático a métodos
+ * como submit, reset, setValue, etc.
+ * @param props - Propiedades del componente que incluyen los métodos de React Hook Form
+ * @param ref - Referencia que expone los métodos del formulario
+ * @returns JSX del FormProvider con el formulario envuelto
+ * @example
+ * ```tsx
+ * const formRef = useRef<RHFormProviderRef>(null);
+ *
+ * const handleReset = () => {
+ *   formRef.current?.reset();
+ * };
+ *
+ * return (
+ *   <FormProviderCustom
+ *     ref={formRef}
+ *     onSubmit={handleSubmit}
+ *     {...formMethods}
+ *   >
+ *     <input {...register('name')} />
+ *   </FormProviderCustom>
+ * );
+ * ```
  */
-export declare function FormProviderCustom(props: FormProviderCustomProps): import("react/jsx-runtime").JSX.Element;
+export declare const FormProviderCustom: import('react').ForwardRefExoticComponent<{
+    children: React.ReactNode | React.ReactNode[];
+} & import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues> & FormProviderProps & import('react').RefAttributes<RHFormProviderRef>>;
 /**
- * Componente que gestiona el `Provider` de `react-hook-form` y encapsula el formulario para la creación de formularios personalizados.
+ * Componente principal que gestiona el `Provider` de `react-hook-form` y encapsula el formulario para la creación de formularios personalizados.
+ *
+ * Este componente utiliza internamente `useForm` para inicializar todos los métodos necesarios para la manipulación del formulario,
+ * incluyendo validación con Yup, gestión de estados de carga, y exposición de métodos a través de refs.
  *
- * Este componente utiliza internamente `useForm` para inicializar todos los métodos necesarios para la manipulación del formulario.
+ * **Características principales:**
+ * - Integración completa con React Hook Form
+ * - Validación automática usando esquemas de Yup
+ * - Gestión de estados de carga para actualización de valores
+ * - Exposición de métodos del formulario a través de refs
+ * - Soporte para diferentes modos de validación
  *
- * Si necesitas acceder directamente a los métodos de `useForm`, puedes utilizar el `Provider` y el hook por separado mediante
+ * Si necesitas acceso directo a los métodos de `useForm`, puedes utilizar el `Provider` y el hook por separado mediante
  * `FormProviderCustom` y `useCustomForm`, respectivamente.
- * @param props
+ * @param props - Propiedades del componente
+ * @param props.children - Elementos hijos del formulario
+ * @param props.onSubmit - Función que se ejecuta al enviar el formulario
+ * @param props.values - Valores iniciales del formulario
+ * @param props.validationSchema - Esquema de validación de Yup
+ * @param props.statusLoad - Estado de carga del formulario (opcional, por defecto 'ready')
+ * @param props.className - Clases CSS adicionales (opcional)
+ * @param props.mode - Modo de validación del formulario (opcional)
+ * @param ref - Referencia que expone los métodos del formulario
+ * @returns JSX del formulario con contexto de React Hook Form
+ * @example
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { RHFormProvider, RHFormProviderRef } from './RHFormContext';
+ * import * as yup from 'yup';
+ *
+ * const schema = yup.object({
+ *   name: yup.string().required('El nombre es requerido'),
+ *   email: yup.string().email('Email inválido').required('El email es requerido')
+ * });
+ *
+ * const MyForm = () => {
+ *   const formRef = useRef<RHFormProviderRef>(null);
+ *
+ *   const handleSubmit = (data: any) => {
+ *     console.log('Datos del formulario:', data);
+ *   };
+ *
+ *   const handleReset = () => {
+ *     formRef.current?.reset();
+ *   };
+ *
+ *   return (
+ *     <RHFormProvider
+ *       ref={formRef}
+ *       onSubmit={handleSubmit}
+ *       values={{ name: '', email: '' }}
+ *       validationSchema={schema}
+ *       statusLoad="ready"
+ *       mode="onChange"
+ *     >
+ *       <input {...register('name')} placeholder="Nombre" />
+ *       <input {...register('email')} placeholder="Email" />
+ *       <button type="submit">Enviar</button>
+ *       <button type="button" onClick={handleReset}>Resetear</button>
+ *     </RHFormProvider>
+ *   );
+ * };
+ * ```
  */
-export declare function RHFormProvider(props: FormProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const RHFormProvider: import('react').ForwardRefExoticComponent<FormProviderProps & import('react').RefAttributes<RHFormProviderRef>>;

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { forwardRef, useImperativeHandle, useEffect } from "react";
 import clsx from "clsx";
 import { FormProvider, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -37,16 +37,30 @@ function useCustomForm({ validationSchema, values, statusLoad, mode }) {
   }, [statusLoad]);
   return formMethods;
 }
-function FormProviderCustom(props) {
-  const { children, onSubmit, className, handleSubmit } = props;
+const FormProviderCustom = forwardRef((props, ref) => {
+  const { children, onSubmit, className, handleSubmit, ...formMethods } = props;
+  useImperativeHandle(ref, () => ({
+    formMethods: { ...formMethods, handleSubmit },
+    submit: () => handleSubmit(onSubmit)(),
+    reset: formMethods.reset,
+    clearErrors: formMethods.clearErrors,
+    setValue: formMethods.setValue,
+    getValues: formMethods.getValues,
+    trigger: formMethods.trigger,
+    watch: formMethods.watch,
+    setError: formMethods.setError,
+    unregister: formMethods.unregister
+  }), [formMethods, handleSubmit, onSubmit]);
   return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
-}
-function RHFormProvider(props) {
+});
+FormProviderCustom.displayName = "FormProviderCustom";
+const RHFormProvider = forwardRef((props, ref) => {
   const { children, onSubmit, values, validationSchema, statusLoad = "ready", className, mode } = props;
   const formMethods = useCustomForm({ validationSchema, statusLoad, values, mode });
   return /* @__PURE__ */ jsx(
     FormProviderCustom,
     {
+      ref,
       className,
       values,
       validationSchema,
@@ -56,7 +70,8 @@ function RHFormProvider(props) {
       children
     }
   );
-}
+});
+RHFormProvider.displayName = "RHFormProvider";
 export {
   FormProviderCustom as F,
   RHFormProvider as R,

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

@@ -1,20 +1,83 @@
 import { ReactNode } from 'react';
-import { FieldValues, FormProviderProps as RHFormProviderProps, Mode } from 'react-hook-form';
+import { FieldValues, FormProviderProps as RHFormProviderProps, Mode, UseFormReturn } from 'react-hook-form';
+/**
+ * Estados de carga del formulario que determinan cuándo y cómo actualizar los valores.
+ *
+ * - `initial`: Estado inicial del formulario
+ * - `new`: Formulario para crear un nuevo elemento
+ * - `edit`: Formulario para editar un elemento existente
+ * - `reload_values_provider`: Estado que indica que se deben recargar los valores del proveedor
+ * - `ready`: Formulario listo para ser usado
+ * - `error`: Estado de error en el formulario
+ */
 export type FormStatusLoad = 'initial' | 'new' | 'edit' | 'reload_values_provider' | 'ready' | 'error';
+/**
+ * Tipo que define los valores iniciales del formulario.
+ * Extiende FieldValues de React Hook Form para mayor flexibilidad.
+ */
 export type FormInitialValues = FieldValues;
+/**
+ * Propiedades del componente principal RHFormProvider.
+ * Define la interfaz para crear formularios con React Hook Form y validación Yup.
+ */
 export interface FormProviderProps {
+    /** Elementos hijos del formulario */
     children: ReactNode;
+    /** Función que se ejecuta al enviar el formulario con los datos validados */
     onSubmit: (data: FieldValues) => void;
+    /** Valores iniciales del formulario */
     values: FormInitialValues;
+    /** Esquema de validación de Yup */
     validationSchema: any;
+    /** Estado de carga del formulario (opcional, por defecto 'ready') */
     statusLoad?: FormStatusLoad;
+    /** Clases CSS adicionales (opcional) */
     className?: string;
+    /** Modo de validación del formulario (opcional) */
     mode?: Mode;
 }
+/**
+ * Propiedades del componente FormProviderCustom.
+ * Combina las propiedades de React Hook Form con las propiedades personalizadas del formulario.
+ */
 export type FormProviderCustomProps = RHFormProviderProps & FormProviderProps;
+/**
+ * Argumentos para el hook useCustomForm.
+ * Define los parámetros necesarios para configurar un formulario personalizado.
+ */
 export interface CustomFormArguments {
+    /** Valores iniciales del formulario */
     values: FormInitialValues;
+    /** Esquema de validación de Yup */
     validationSchema: any;
+    /** Estado de carga del formulario (opcional) */
     statusLoad?: FormStatusLoad;
+    /** Modo de validación del formulario (opcional) */
     mode?: Mode;
 }
+/**
+ * Interfaz que define los métodos expuestos a través de la ref del RHFormProvider.
+ * Permite acceso programático a los métodos de React Hook Form desde componentes padre.
+ */
+export interface RHFormProviderRef {
+    /** Objeto completo con todos los métodos de React Hook Form */
+    formMethods: UseFormReturn<FieldValues>;
+    /** Ejecuta el submit del formulario */
+    submit: () => void;
+    /** Resetea el formulario a sus valores iniciales */
+    reset: () => void;
+    /** Limpia todos los errores del formulario */
+    clearErrors: () => void;
+    /** Establece un valor en un campo específico del formulario */
+    setValue: (name: string, value: any, options?: any) => void;
+    /** Obtiene los valores actuales del formulario o de campos específicos */
+    getValues: (payload?: string | string[]) => any;
+    /** Dispara la validación de campos específicos o de todo el formulario */
+    trigger: (name?: string | string[]) => Promise<boolean>;
+    /** Observa cambios en campos específicos o en todo el formulario */
+    watch: (name?: string | string[]) => any;
+    /** Establece un error en un campo específico */
+    setError: (name: string, error: any) => void;
+    /** Desregistra campos del formulario */
+    unregister: (name: string | string[]) => void;
+}

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -24,7 +24,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     htmlFor,
     readOnly = false,
     placeholder,
-    startAdornment
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   } = props;
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -62,7 +64,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     ownerState,
     handleDelete,
     disabled,
-    startAdornment
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   });
   const endAdornments = useEndAdornments({
     loading,

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.d.ts

@@ -6,6 +6,8 @@ export type UseAdornmentsProps<T> = {
     loading?: boolean;
     adjustedSize: 'small' | 'medium';
     getOptionLabelLocal: (option: T) => string;
+    getOptionalStartAdornment: (option: T) => React.ReactNode;
+    getOptionalEndAdornment: (option: T) => React.ReactNode;
     ownerState: AutocompleteOwnerState;
     handleDelete: (option: T) => void;
     getOptionUrlImage?: (option: T) => string;

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js

@@ -10,7 +10,9 @@ function useStartAdornments(props) {
     ownerState,
     handleDelete,
     disabled,
-    startAdornment
+    startAdornment,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   } = props;
   const startAdornmentClone = startAdornment ? React.cloneElement(startAdornment, {
     size: adjustedSize
@@ -27,7 +29,9 @@ function useStartAdornments(props) {
         opacity: true,
         onDeleted: () => handleDelete(option),
         disabledDeleteButton: disabled,
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState },
+        startIcon: getOptionalStartAdornment(option),
+        endIcon: getOptionalEndAdornment(option)
       },
       `${option}-${index}`
     )) }) });
@@ -38,7 +42,9 @@ function useStartAdornments(props) {
     getOptionLabelLocal,
     handleDelete,
     disabled,
-    ownerState
+    ownerState,
+    getOptionalStartAdornment,
+    getOptionalEndAdornment
   ]);
   if (startAdornmentClone && internalAdornments) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -50,6 +50,14 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined> exte
      * Function to get the label for a given option.
      */
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<false>) => string;
+    /**
+     * Function to get the start adornment for a given option.
+     */
+    getOptionalStartAdornment: (option: T) => React.ReactNode;
+    /**
+     * Function to get the end adornment for a given option.
+     */
+    getOptionalEndAdornment: (option: T) => React.ReactNode;
     /**
      * Function to compare if an option matches the selected value.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.19-BE021025-beta.2",
+  "version": "9.3.19-BE061025-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {