@m4l/components 9.3.39 → 9.3.41

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

@@ -38,7 +38,7 @@ const RHFActionsGroup = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const currentValue = value ?? null;
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -60,7 +60,7 @@ const RHFActionsGroup = (props) => {
                   actions,
                   value: currentValue,
                   onChange,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   ariaLabel,
                   ariaLabelledBy,
                   size,

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

@@ -73,7 +73,7 @@ function RHFAutocomplete(props) {
         {
           name: nameRHF,
           control,
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
             const [inputValue, setInputValue] = useState(
               getOptionLabelLocal(value)
             );
@@ -113,7 +113,7 @@ function RHFAutocomplete(props) {
                   },
                   onChangeFilterParmsLocal,
                   refresh,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   loading,
                   onOpen: onOpenLocal,
                   onClose: onCloseLocal,

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

@@ -38,7 +38,7 @@ const RHFCheckbox = forwardRef(function RHFCheckbox2(props, ref) {
     {
       name,
       control,
-      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+      render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(
             LabelComponent,
@@ -59,7 +59,7 @@ const RHFCheckbox = forwardRef(function RHFCheckbox2(props, ref) {
               size: adjustedSize,
               onChange,
               checked: value,
-              disabled: disabled ? true : false,
+              disabled: disabled || isSubmitting,
               disableRipple: true,
               inlineText,
               htmlFor: finalId,

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

@@ -45,7 +45,7 @@ const RHFColorPicker = (props) => {
           name,
           control,
           defaultValue: "",
-          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => /* @__PURE__ */ jsx(
             ColorPickerField,
             {
               value,
@@ -56,7 +56,7 @@ const RHFColorPicker = (props) => {
               mandatory,
               mandatoryMessage,
               helperMessage,
-              disabled,
+              disabled: disabled || isSubmitting,
               isSkeleton,
               className,
               instaceDataTestId,

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

@@ -40,7 +40,7 @@ const RHFDatePicker = (props) => {
           name,
           control,
           defaultValue: null,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
             label && /* @__PURE__ */ jsx(
               Label,
               {
@@ -62,7 +62,7 @@ const RHFDatePicker = (props) => {
                 readOnly,
                 error,
                 size: currentSize,
-                disabled,
+                disabled: disabled || isSubmitting,
                 className
               }
             ),

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

@@ -43,7 +43,7 @@ function RHFDateTime(props) {
         {
           name: nameRHF,
           control,
-          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 Label,
@@ -62,7 +62,7 @@ function RHFDateTime(props) {
                 {
                   variant,
                   size: adjustedSize,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   inputRef: ref,
                   slotProps: {
                     field: {

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

@@ -42,7 +42,7 @@ const RHFNumberInput = (props) => {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const onChangeLocal = (_event, newValue) => {
               onChange(newValue);
             };
@@ -69,7 +69,7 @@ const RHFNumberInput = (props) => {
                   value,
                   onChange: onChangeLocal,
                   variant,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   startAdornment,
                   endAdornment,
                   error: !!error,

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

@@ -47,7 +47,7 @@ const RHFPeriod = (props) => {
           name: name || "",
           control,
           defaultValue: { selPeriodTime: "", singleValue: "" },
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value }, fieldState: { error }, formState: { isSubmitting } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 Label,
@@ -64,7 +64,7 @@ const RHFPeriod = (props) => {
                 {
                   name,
                   control,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   value,
                   onChange,
                   size

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

@@ -124,6 +124,7 @@ const Period = (props) => {
         variant: "outlined",
         value: singleValue,
         withDecimal: true,
+        disabled,
         onChange: (_event, newValue) => {
           onTotalChange(selPeriodTime, newValue);
         }

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

@@ -36,7 +36,7 @@ const RHFSelect = (props) => {
     {
       name,
       control,
-      render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+      render: ({ field: { value, onChange, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
         const onChangeLocal = (opt) => {
           if (!opt) {
             onChange(null);
@@ -75,7 +75,7 @@ const RHFSelect = (props) => {
               variant,
               value,
               onChange: onChangeLocal,
-              disabled,
+              disabled: disabled || isSubmitting,
               className: RHFSELECT_CLASSES.select,
               error: Boolean(error),
               placeholder,

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

@@ -60,7 +60,7 @@ const RHFTextField = forwardRef((props, ref) => {
         {
           name,
           control,
-          render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
+          render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error }, formState: { isSubmitting } }) => {
             const onInternalChange = (event) => {
               const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
               const stringValue = String(finalValue || "");
@@ -83,7 +83,7 @@ const RHFTextField = forwardRef((props, ref) => {
                 TextFieldStyled,
                 {
                   ownerState: { ...ownerState, error: !!error },
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   inputRef,
                   ref,
                   InputLabelProps: { shrink: true },

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

@@ -28,7 +28,7 @@ const RHFTextFieldPassword = (props) => {
     {
       name,
       control,
-      render: ({ field: { onChange, value, ref }, fieldState: { error } }) => {
+      render: ({ field: { onChange, value, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
         const onInternalChange = (event) => {
           const finalValue = other.maxLength ? getLimitCharacters({ limitCharacters: other.maxLength, value: event.target.value }) : event.target.value;
           const stringValue = String(finalValue || "");
@@ -56,7 +56,7 @@ const RHFTextFieldPassword = (props) => {
               type: showPassword ? "text" : "password",
               size,
               error: !!error,
-              disabled,
+              disabled: disabled || isSubmitting,
               inputProps: {
                 role: "textbox",
                 "aria-label": name,

package/components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js

@@ -15,6 +15,7 @@ function RHFUploadImage(props) {
     mandatoryMessage,
     maxSize,
     helperMessage,
+    disabled,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -25,7 +26,7 @@ function RHFUploadImage(props) {
     {
       name,
       control,
-      render: ({ field: { value, onChange }, fieldState: { error } }) => {
+      render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
         const checkError = !!error && !value;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(
@@ -56,6 +57,7 @@ function RHFUploadImage(props) {
                 onChange(null);
               },
               error: checkError,
+              disabled: disabled || isSubmitting,
               ...other,
               file: value,
               size: adjustedSize,

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/UploadImage.js

@@ -12,7 +12,7 @@ import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/
 import { g as getComponentClasses } from "../../../../../../utils/getComponentSlotRoot.js";
 import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
 const UploadImage = (props) => {
-  const { file, size, onDrop, onRemove, maxSize, dataTestId, error = false, multiple, ...other } = props;
+  const { file, size, onDrop, onRemove, maxSize, dataTestId, error = false, multiple, disabled, ...other } = props;
   const { currentSize } = useComponentSize(size);
   const { toast } = useHostTools();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
@@ -62,7 +62,8 @@ const UploadImage = (props) => {
                   variant: "contained",
                   icon: `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`,
                   onClick: onRemove,
-                  size: adjustedSize
+                  size: adjustedSize,
+                  disabled
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -100,7 +101,7 @@ const UploadImage = (props) => {
                 ] })
               ] })
             ] }),
-            !file ? /* @__PURE__ */ jsx(ButtonStyled, { variant: "contained", color: "primary", onClick: open, label: getLabel(getUploadImageDictionary(COMPONENTS_DICTIONARY_KEYS.click_button)), size: adjustedSize }) : null
+            !file ? /* @__PURE__ */ jsx(ButtonStyled, { variant: "contained", color: "primary", onClick: open, label: getLabel(getUploadImageDictionary(COMPONENTS_DICTIONARY_KEYS.click_button)), size: adjustedSize, disabled }) : null
           ]
         }
       )

package/components/hook-form/RHFUpload/RHFUploadImage/types.d.ts

@@ -6,6 +6,10 @@ import { UploadImageProps } from './subcomponents/UploadImage/types';
 import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export interface RHFUploadImageProps extends Omit<UploadImageProps, 'file' | 'onDrop' | 'onRemove'>, Omit<LabelProps, 'size' | 'error' | 'disabled' | 'children'> {
     name: string;
+    /**
+     * Si es true, el componente estará deshabilitado.
+     */
+    disabled?: boolean;
 }
 export type RHFUploadImageSlotsType = keyof typeof Slots;
 export type RHFUploadImageOwnerState = {

package/components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js

@@ -9,7 +9,7 @@ import { R as RHFUploadSingleFileSlots } from "./slots/RHFUploadSingleFileEnum.j
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 function RHFUploadSingleFile(props) {
   const { control } = useFormContext();
-  const { name, label, skeletonWidth, size, className, helperMessage, mandatory, mandatoryMessage, maxFileSize = DEFAULT_MAX_FILE_SIZE, dataTestId, accept = "*/*" } = props;
+  const { name, label, skeletonWidth, size, className, helperMessage, mandatory, mandatoryMessage, maxFileSize = DEFAULT_MAX_FILE_SIZE, dataTestId, accept = "*/*", disabled } = props;
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const acceptObj = {
@@ -28,7 +28,7 @@ function RHFUploadSingleFile(props) {
         {
           name,
           control,
-          render: ({ field: { value, onChange }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => {
             const errorUpload = !!error;
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
@@ -41,7 +41,8 @@ function RHFUploadSingleFile(props) {
                   mandatoryMessage,
                   helperMessage,
                   size: adjustedSize,
-                  skeletonWidth
+                  skeletonWidth,
+                  disabled
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -51,7 +52,8 @@ function RHFUploadSingleFile(props) {
                   accept: acceptObj,
                   file: value,
                   onChange,
-                  size: adjustedSize
+                  size: adjustedSize,
+                  disabled: disabled || isSubmitting
                 }
               ),
               errorUpload && /* @__PURE__ */ jsx(

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/Preview/Preview.js

@@ -4,7 +4,7 @@ import { d as ContainerPreviewStyled, e as ImagePreviewStyled, f as ContainerNam
 import { useEnvironment } from "@m4l/core";
 import { f as formatFileSize } from "../../helpers/formatFileSize.js";
 const Preview = (props) => {
-  const { file, onChange, onClose } = props;
+  const { file, onChange, onClose, disabled } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const icon = `${host_static_assets}/${environment_assets}/${FILES_ICONS[file.type] || FILES_ICONS["application/octet-stream"]}`;
   const closePreviewIcon = `${host_static_assets}/${environment_assets}/${CLOSE_PREVIEW_ICON}`;
@@ -25,7 +25,8 @@ const Preview = (props) => {
           e.stopPropagation();
           onChange && onChange(null);
           onClose();
-        }
+        },
+        disabled
       }
     )
   ] });

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/Preview/types.d.ts

@@ -1,5 +1,5 @@
 import { UploadSingleFileProps } from '../UploadSingleFile/types';
-export interface PreviewProps extends Pick<UploadSingleFileProps, 'onChange' | 'size'> {
+export interface PreviewProps extends Pick<UploadSingleFileProps, 'onChange' | 'size' | 'disabled'> {
     uploadProgress: number | null;
     file: File;
     onClose: () => void;

package/components/hook-form/RHFUpload/RHFUploadSingleFile/subcomponents/UploadSingleFile/index.js

@@ -11,7 +11,7 @@ import { u as uploadReducer } from "../../helpers/uploadReducer.js";
 import { f as formatFileSize } from "../../helpers/formatFileSize.js";
 import { g as getReadableFileType } from "../../helpers/getReadableFileType.js";
 function UploadSingleFile(props) {
-  const { file, accept, onChange, maxFileSize, size } = props;
+  const { file, accept, onChange, maxFileSize, size, disabled } = props;
   const { toast } = useHostTools();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
@@ -22,6 +22,7 @@ function UploadSingleFile(props) {
   });
   const { getRootProps, getInputProps } = useDropzone({
     multiple: false,
+    disabled,
     /**
      * Maneja el evento de drop del archivo
      */
@@ -60,9 +61,17 @@ function UploadSingleFile(props) {
       }
     }
   });
+  useEffect(() => {
+    if (!!file && !uploadState.validFile) {
+      dispatch({ type: "SET_VALID_FILE", payload: true });
+      dispatch({ type: "SET_PREVIEW", payload: true });
+    } else if (!file && uploadState.validFile) {
+      dispatch({ type: "RESET" });
+    }
+  }, [file, uploadState.validFile]);
   useEffect(() => {
     let interval;
-    if (uploadState.validFile && !!file) {
+    if (!!file && uploadState.validFile && !uploadState.preview) {
       interval = setInterval(() => {
         dispatch({ type: "SET_PROGRESS", payload: (uploadState.progress ?? 0) + 10 });
         if (uploadState.progress !== null && uploadState.progress >= 100) {
@@ -77,10 +86,10 @@ function UploadSingleFile(props) {
         clearInterval(interval);
       }
     };
-  }, [file, uploadState.progress, uploadState.validFile]);
+  }, [file, uploadState.progress, uploadState.validFile, uploadState.preview]);
   return /* @__PURE__ */ jsx(ContainerDropZoneStyled, { ownerState: {}, className: RHF_UPLOAD_SINGLE_FILE_CLASSES.containerDropZone, children: /* @__PURE__ */ jsxs(DropZoneStyled, { ...getRootProps(), ownerState: { isSkeleton }, className: RHF_UPLOAD_SINGLE_FILE_CLASSES.dropZone, children: [
     /* @__PURE__ */ jsx(BlockContent, { value: uploadState.progress, hidden: uploadState.preview, size }),
-    uploadState.preview && !!file && /* @__PURE__ */ jsx(Preview, { uploadProgress: uploadState.progress, file, onChange, onClose: () => dispatch({ type: "RESET" }), size }),
+    uploadState.preview && !!file && /* @__PURE__ */ jsx(Preview, { uploadProgress: uploadState.progress, file, onChange, onClose: () => dispatch({ type: "RESET" }), size, disabled }),
     !isSkeleton && /* @__PURE__ */ jsx("input", { role: "button", "aria-label": "button-upload-single-file", ...getInputProps() })
   ] }) });
 }

package/components/hook-form/RHFUpload/RHFUploadSingleFile/types.d.ts

@@ -33,6 +33,10 @@ export interface RHFUploadSingleFileProps extends Omit<LabelProps, 'size' | 'err
      * Tipos de archivos aceptados.
      */
     accept?: string;
+    /**
+     * Si es true, el componente estará deshabilitado.
+     */
+    disabled?: boolean;
 }
 export type RHFUploadSingleFileSlotsType = keyof typeof RHFUploadSingleFileSlots;
 export type RHFUploadSingleFileOwnerState = Pick<RHFUploadSingleFileProps, 'size' | 'variant'> & {

package/components/mui_extended/Tabs/Tabs.js

@@ -1,9 +1,55 @@
 import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/TabsSlots.js";
+import { useEnvironment } from "@m4l/core";
+import { T as TABS_ICONS } from "./icons.js";
+import React, { useMemo } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../IconButton/IconButton.js";
+const createScrollButtonIcon = (src, size) => {
+  const ScrollButtonIconComponent = React.forwardRef(
+    (props, _ref) => {
+      const { fontSize, ownerState, ...otherProps } = props;
+      const finalProps = {
+        src,
+        size,
+        ...otherProps
+      };
+      return /* @__PURE__ */ jsx(IconButton, { ...finalProps });
+    }
+  );
+  ScrollButtonIconComponent.displayName = "ScrollButtonIcon";
+  return ScrollButtonIconComponent;
+};
 const Tabs = (props) => {
-  const { children, className, ...others } = props;
+  const { children, className, size, ...others } = props;
   const ownerState = {};
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { ownerState }, ...others, children });
+  const { currentSize } = useComponentSize(size);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const leftIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_LEFT}`;
+  const rightIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_RIGHT}`;
+  const StartScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(leftIconSrc, currentSize),
+    [leftIconSrc, currentSize]
+  );
+  const EndScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(rightIconSrc, currentSize),
+    [rightIconSrc, currentSize]
+  );
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ...others,
+      scrollButtons: "auto",
+      ownerState: { ownerState },
+      variant: "scrollable",
+      className,
+      slots: {
+        StartScrollButtonIcon,
+        EndScrollButtonIcon
+      },
+      children
+    }
+  );
 };
 export {
   Tabs as T

package/components/mui_extended/Tabs/Tabs.styles.js

@@ -3,33 +3,59 @@ const tabsStyles = {
    * Elemento root referencia a `MuiTabs` de MUI
    */
   root: ({ theme }) => ({
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    overflow: "auto",
-    width: "100%",
-    height: "fit-content",
-    maxWidth: "fit-content",
-    minHeight: "fit-content",
-    background: theme.vars.palette.background.default,
-    paddingBottom: theme.vars.size.baseSpacings.sp0,
-    gap: theme.vars.size.baseSpacings.sp0,
-    borderRadius: theme.vars.size.borderRadius.r1,
-    borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
-    borderBottomRightRadius: theme.vars.size.borderRadius.r0,
-    marginBottom: "1px",
-    "& .MuiTabs-flexContainer": {
-      background: "transparent"
-    },
-    "& .MuiTabs-scroller": {
-      overflow: "visible !important"
-    },
-    "& .MuiTabs-indicator": {
-      display: "none"
-    },
-    "& .simplebar-content": {
+    "&&&": {
+      position: "relative",
+      zIndex: 1,
       display: "flex",
-      gap: theme.vars.size.baseSpacings.sp0
+      overflow: "auto",
+      alignItems: "center",
+      width: "100%",
+      height: "fit-content",
+      maxWidth: "fit-content",
+      minHeight: "fit-content",
+      gap: theme.vars.size.baseSpacings.sp4,
+      background: theme.vars.palette.background.default,
+      paddingBottom: theme.vars.size.baseSpacings.sp0,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
+      borderBottomRightRadius: theme.vars.size.borderRadius.r0,
+      marginBottom: "1px",
+      "& .MuiTabs-flexContainer": {
+        background: "transparent"
+      },
+      "& .MuiTabs-indicator": {
+        display: "none"
+      },
+      "& .simplebar-content": {
+        display: "flex",
+        gap: theme.vars.size.baseSpacings.sp0
+      },
+      "& .MuiTabScrollButton-root": {
+        width: "fit-content",
+        height: "fit-content",
+        padding: "0",
+        margin: "0",
+        border: "none",
+        borderRadius: "0",
+        "& .MuiTouchRipple-root": {
+          display: "none !important"
+        },
+        "& .MuiButtonBase-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-rippleVisible": {
+          display: "none !important"
+        },
+        "& .M4LIconButton-styledMUIIconButton, & .MuiSkeleton-root": {
+          width: theme.vars.size.baseSpacings.sp4,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.primary
+          }
+        }
+      }
     }
   })
 };

package/components/mui_extended/Tabs/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const TABS_ICONS: {
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+};

package/components/mui_extended/Tabs/icons.js

@@ -0,0 +1,7 @@
+const TABS_ICONS = {
+  ARROW_LEFT: "frontend/components/tabs/assets/icons/chevron_left.svg",
+  ARROW_RIGHT: "frontend/components/tabs/assets/icons/chevron_right.svg"
+};
+export {
+  TABS_ICONS as T
+};

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

@@ -3,10 +3,13 @@ import { TabsProps as MuiTabProps } from '@mui/material/Tabs';
 import { TabsSlots } from './slots/TabsEnum';
 import { TABS_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
 /**
  * Props for the tabs component.
  */
-export type TabsProps = MuiTabProps;
+export type TabsProps = MuiTabProps & {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+};
 /**
  * State for the tabs component.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.39",
+  "version": "9.3.41",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {