@m4l/components 9.1.53 → 9.1.55

package/components/Chip/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ChipSlots } from "./slots/ChipEnum.js";
+const CHIP_KEY_COMPONENT = "M4LChip";
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
+export {
+  CHIP_CLASSES as C,
+  CHIP_KEY_COMPONENT as a
+};

package/components/Chip/slots/ChipEnum.d.ts

@@ -1,7 +1,7 @@
-export declare const ChipSlots: {
-    chipRoot: string;
-    skeletonChip: string;
-    chipIcon: string;
-    textChip: string;
-    iconButton: string;
-};
+export declare enum ChipSlots {
+    root = "root",
+    skeletonChip = "skeleton",
+    chipIcon = "icon",
+    textChip = "text",
+    iconButton = "iconButton"
+}

package/components/Chip/slots/ChipEnum.js

@@ -0,0 +1,11 @@
+var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
+  ChipSlots2["root"] = "root";
+  ChipSlots2["skeletonChip"] = "skeleton";
+  ChipSlots2["chipIcon"] = "icon";
+  ChipSlots2["textChip"] = "text";
+  ChipSlots2["iconButton"] = "iconButton";
+  return ChipSlots2;
+})(ChipSlots || {});
+export {
+  ChipSlots as C
+};

package/components/Chip/slots/ChipSlots.js

@@ -0,0 +1,35 @@
+import { styled } from "@mui/material/styles";
+import { c as chipStyles } from "../ChipStyles.js";
+import { a as CHIP_KEY_COMPONENT } from "../constants.js";
+import { C as ChipSlots } from "./ChipEnum.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const ChipRootStyled = styled("div", {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.root
+})(chipStyles?.root);
+const SkeletonChipStyled = styled(Skeleton, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.skeletonChip
+})(chipStyles?.skeletonChip);
+const IconStyled = styled(Icon, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.chipIcon
+})(chipStyles?.chipIcon);
+const TextChipStyled = styled(Typography, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.textChip
+})(chipStyles?.textChip);
+const IconButtonStyled = styled(IconButton, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.iconButton
+})(chipStyles?.iconButton);
+export {
+  ChipRootStyled as C,
+  IconButtonStyled as I,
+  SkeletonChipStyled as S,
+  TextChipStyled as T,
+  IconStyled as a
+};

package/components/Chip/slots/index.js

@@ -0,0 +1 @@
+

package/components/Chip/types.d.ts

@@ -6,36 +6,66 @@ import { CHIP_KEY_COMPONENT } from './constants';
 import { ChipSlots } from './slots';
 type ChipVariants = 'contained' | 'outlined';
 /**
- * Props for the `Chip` component, extending the original properties of Material UI.
- * [startIcon] - Optional prop for the icon on the left in the `Chip`.
- * [endIcon] - Optional prop for the icon on the right in the `Chip`.
- * label - Text describing the `Chip`.
- * [componentPaletteColor] - Customization of the component's palette color.
- * [size] - Size of the `Chip` (default 'medium').
- * [error] - Indicates if the `Chip` is in an error state.
- * [variant] - Defines the variant of the `Chip` (default 'contained').
- * [color] - Defines the color of the `Chip`.
+ * Propiedades del componente `Chip`.
  * @createdAt 2024-12-06 11:17:21 - automatic
  */
 export interface ChipProps {
+    /**
+     * Optional prop for the icon on the left in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     startIcon?: ReactNode;
+    /**
+     * Optional prop for the icon on the right in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     endIcon?: ReactNode;
+    /**
+     * Size of the `Chip` (default 'medium').
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Text describing the `Chip`.
+     */
     label?: string;
+    /**
+     * Defines the variant of the `Chip` (default 'contained').
+     */
     variant?: ChipVariants;
+    /**
+     * Defines the color of the `Chip`.
+     */
     color?: Exclude<ComponentPalletColor, 'primary'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * OPtion prop to render the close icon
+     */
     hasIconClose?: boolean;
+    /**
+     * Opacity of the `Chip`.
+     */
     opacity?: boolean;
+    /**
+     * Function to be executed when the `Chip` is clicked.
+     */
     onClick?: () => void;
+    /**
+     * Function to be executed when the `Chip` is deleted.
+     */
     onDeleted?: EventHandler<any>;
+    /**
+     * Class name for the `Chip`.
+     */
+    className?: string;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'size' | 'variant' | 'color'> {
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
     opacity?: boolean;
     paletteColor: PaletteColor;
+    chipSize: ChipProps['size'];
 }
 /**
  * Defines the types of Slots available for the `Chip`.
@@ -44,5 +74,5 @@ export type ChipSlotsType = keyof typeof ChipSlots;
 /**
  * Styles applicable to the `Chip` using themes and custom slots.
  */
-export type ChipStyles = Partial<OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type ChipStyles = OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;
 export {};

package/components/DynamicFilter/types.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from '@mui/material/styles';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Maybe } from '@m4l/core';
-import { RHFAutocompleteAsyncProps } from '../hook-form/RHFAutocompleteAsync/types';
+import { RHFAutocompleteAsyncBaseProps } from '../hook-form/RHFAutocompleteAsync/types';
 import { DynamicFilterSlots } from './slots';
 export type FieldType = 'number' | 'string' | 'boolean' | 'datetime' | 'select';
 export type OperandType = number | string | boolean | Date | [] | object;
@@ -21,7 +21,7 @@ export type FormOperandSelect = Record<string, any>;
 export type OperandsArrayValues = Array<FormOperandSelect>;
 export type FieldTypeOperator<T extends FieldType> = T extends 'boolean' ? BooleanOperator : T extends 'datetime' ? DateTimeOperator : T extends 'number' ? NumberOperator : T extends 'select' ? SelectOperator : T extends 'string' ? StringOperator : T;
 export type FieldTypeOperand<T extends FieldType> = T extends 'boolean' ? boolean : T extends 'datetime' ? Date : T extends 'number' ? number : T extends 'string' ? string : T extends 'select' ? OperandsArrayValues : FieldType;
-type SelectOptions = Pick<RHFAutocompleteAsyncProps<{
+type SelectOptions = Pick<RHFAutocompleteAsyncBaseProps<{
     [key: string]: any;
 }>, 'type' | 'endPoint' | 'getOptionLabel' | 'isOptionEqualToValue' | 'multiple' | 'autoComplete' | 'autoCapitalize' | 'parms' | 'timeout'> & {
     getOptionId: (option: Record<string, any>) => string | number;

package/components/Label/Label.styles.js

@@ -13,9 +13,10 @@ const labelStyles = {
     flexWrap: "wrap",
     width: "100%",
     gap: theme.size.baseSpacings.sp1,
-    ...ownerState.disabled && {
-      color: theme.vars.palette?.text.disabled,
-      pointerEvents: "none"
+    "& .M4LLabelClassCss-root": {
+      ...ownerState.disabled === true && {
+        color: theme.vars.palette.text.disabled + "!important"
+      }
     },
     flexDirection: "row",
     [`& .${ownerState.label}`]: {
@@ -52,7 +53,8 @@ const labelStyles = {
     },
     "&.mandatoryAsterisk": {
       color: theme.vars.palette.text.primary
-    }
+    },
+    "& span": {}
   }),
   /**
    * Estilos para el mensaje obligatorio.
@@ -99,13 +101,31 @@ const labelStyles = {
    * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
-    // borderRadius:theme.vars.size.borderRadius.r1,
+    width: "100%",
+    padding: theme.vars.size.baseSpacings.sp2,
+    borderRadius: theme.vars.size.borderRadius.r1,
+    display: "flex",
+    alignItems: "center",
+    background: theme.vars.palette.skeleton.transition,
+    // Estilos específicos para el tamaño small
     ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.small.action } : { height: theme.vars.size.desktop.small.action }
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.action,
+        minHeight: theme.vars.size.mobile.small.action
+      } : {
+        height: theme.vars.size.desktop.small.action,
+        minHeight: theme.vars.size.desktop.small.action
+      }
     },
-    // Condiciones de tamaño Medium en el root
+    // Estilos específicos para el tamaño medium
     ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.medium.action } : { height: theme.vars.size.desktop.medium.action }
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.action,
+        minHeight: theme.vars.size.mobile.medium.action
+      } : {
+        height: theme.vars.size.desktop.medium.action,
+        minHeight: theme.vars.size.desktop.medium.action
+      }
     },
     ...ownerState.type === "helperMessage" && {
       borderRadius: theme.vars.size.borderRadius.r1

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../../../../utils/getHeightSizeStyles.js";
 import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**
@@ -12,34 +13,21 @@ const containerMenuItemsMainStyles = {
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings["sp0-5"],
-    "& .M4LMenuItem-menuItemContainer": {
-      // Estilos específicos para el tamaño small
-      ...ownerState.sidebarSize === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.sidebarSize === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.medium.action
-        } : {
-          minHeight: theme.vars.size.desktop.medium.action
-        }
-      }
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    ),
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.divider,
       "& span": {
         color: theme.vars.palette.text.primary
       }
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
       background: theme.vars.palette.text.primary
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_ACTIVE}"]`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.primary.main,
       "& span": {
         color: theme.vars.palette.primary.main

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

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

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

@@ -0,0 +1,24 @@
+const rhfAutocompleteSyles = {
+  /**
+   * Styles for the root component.
+   */
+  autocompleteRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Styles for the label component.
+   * @param {object} theme - The theme object.
+   * @param {object} ownerState - The state of the owner component.
+   * @returns {object} The styles for the label.
+   */
+  label: ({ theme, ownerState }) => ({
+    ...ownerState.disabled === true && {
+      theme: theme.palette.text.disabled
+    }
+  })
+};
+export {
+  rhfAutocompleteSyles as r
+};

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

@@ -1,9 +1,7 @@
 import { RHFAutocompleteProps } from './types';
 /**
- * TODO: Documentar
- * @author SebastianM - automatic
- * @createdAt 2024-11-21 10:33:47 - automatic
- * @updatedAt 2024-11-21 10:33:48 - automatic
- * @updatedUser SebastianM - automatic
+ * RHFAutocomplete component renders an autocomplete input field with various customization options.
+ * @param props - The properties for the RHFAutocomplete component.
+ * @returns The RHFAutocomplete component.
  */
 export declare function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,165 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { C as ComponentTypeImage } from "./subcomponents/ComponentTypeImage/index.js";
-import { C as ComponentTypeText } from "./subcomponents/ComponentTypeText/index.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useTheme } from "@mui/material";
+import { useState, useEffect } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
+import { A as AutocompleteRootStyled, L as LabelStyled } from "./slots/RHFAutocompleteSlots.js";
+import { A as Autocomplete } from "../../mui_extended/Autocomplete/Autocomplete.js";
+import { H as HelperError } from "../../HelperError/HelperError.js";
 function RHFAutocomplete(props) {
-  return /* @__PURE__ */ jsx(Fragment, { children: props.type === "image" ? /* @__PURE__ */ jsx(ComponentTypeImage, { ...props }) : /* @__PURE__ */ jsx(ComponentTypeText, { ...props }) });
+  const {
+    name: nameRHF,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label = "RHF Autocomplete",
+    color,
+    skeletonWidth = 100,
+    options,
+    disabled,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    mandatory,
+    mandatoryMessage,
+    multiple,
+    imageScale = true,
+    imageRepeat,
+    refresh
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    isFocus,
+    isTabSelected,
+    handlerFocus,
+    handlerOnKeyUp,
+    handlerOnBlur
+  } = useFormFocus();
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const isDesktop = useResponsiveDesktop();
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose) {
+      onClose(event, reason);
+    }
+  };
+  const onOpenLocal = (event) => {
+    setOpen((currentState) => !currentState);
+    if (onOpen) {
+      onOpen(event);
+    }
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(null);
+  useEffect(() => {
+    const hasError = errors[nameRHF];
+    if (hasError) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors, nameRHF, variant, control]);
+  const ownerState = {
+    size: !isDesktop ? "medium" : size,
+    isFocus: !isSkeleton ? isFocus : false,
+    isTabSelected: !isSkeleton ? isTabSelected : false,
+    semantics: currentVariant,
+    disabled,
+    multiple: Boolean(multiple),
+    imageScale: Boolean(imageScale),
+    imageRepeat: Boolean(imageRepeat),
+    autocompleteColor: color,
+    paletteColor
+  };
+  return /* @__PURE__ */ jsx(
+    AutocompleteRootStyled,
+    {
+      ownerState: { ...ownerState },
+      onFocus: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerOnKeyUp,
+      size,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: nameRHF,
+          control,
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const [inputValue, setInputValue] = useState(
+              getOptionLabelLocal(value)
+            );
+            useEffect(() => {
+              if (!open && value === null && inputValue !== "") {
+                setInputValue("");
+              }
+              if (!open && value !== null && options.length === 0) {
+                onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
+              }
+            }, [value, inputValue]);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              label && /* @__PURE__ */ jsx(
+                LabelStyled,
+                {
+                  ownerState: { ...ownerState },
+                  label,
+                  size,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage,
+                  htmlFor: `autocomplete-${nameRHF}`,
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Autocomplete,
+                {
+                  ...ownerState,
+                  id: `autocomplete-${nameRHF}`,
+                  options,
+                  getOptionLabel,
+                  isOptionEqualToValue,
+                  multiple: multiple ? true : void 0,
+                  onChange: (_e, newValue) => onChange(newValue),
+                  refresh,
+                  disabled,
+                  loading,
+                  onOpen: onOpenLocal,
+                  onClose: onCloseLocal,
+                  skeletonWidth,
+                  open,
+                  size,
+                  value
+                }
+              ),
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperError, { message: error?.message }) : null
+            ] });
+          }
+        }
+      )
+    }
+  );
 }
 export {
   RHFAutocomplete as R

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

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

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

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

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

@@ -0,0 +1,4 @@
+const RFHAUTOCOMPLETE_KEY_COMPONENT = "RHFM4LAutocomplete";
+export {
+  RFHAUTOCOMPLETE_KEY_COMPONENT as R
+};

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

@@ -0,0 +1,43 @@
+import { AutocompleteCloseReason, AutocompleteInputChangeReason, TextFieldProps } from '@mui/material';
+import { LabelProps } from '../../Label/types';
+export type GetOptionString<T> = (option: T | null) => string;
+export type RHFAutocompleteVariants = 'info' | 'success' | 'warning';
+export type ImageProps<T> = (RHFAutocompleteTypeImageProps<T> & {
+    imageScale?: boolean;
+    imageRepeat?: never;
+}) | (RHFAutocompleteTypeImageProps<T> & {
+    imageRepeat: boolean;
+    imageScale?: never;
+});
+export interface RHFAutocompleteBaseProps<T> extends Omit<TextFieldProps, 'label' | 'variant'>, Omit<LabelProps, 'label'> {
+    name: string;
+    options: Array<T>;
+    getOptionLabel: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    skeletonWidth?: string | number;
+    skeletonHeight?: string | number;
+    loading?: boolean;
+    refresh?: () => void;
+    label?: string;
+    variant?: RHFAutocompleteVariants;
+    helperMessage?: string;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+    onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+    multiple?: boolean;
+}
+export interface RHFAutocompleteTypeTextProps {
+    type: 'text';
+}
+export interface RHFAutocompleteTypeImageProps<T> {
+    type: 'image';
+    getOptionUrlImage: (option: T) => string;
+}
+export type RHFAutocompleteProps<T> = (RHFAutocompleteBaseProps<T> & ImageProps<T>) | (RHFAutocompleteBaseProps<T> & RHFAutocompleteTypeTextProps);
+export interface OwnerState extends Pick<RHFAutocompleteProps<any>, 'size' | 'disabled'>, Pick<ImageProps<any>, 'imageScale' | 'imageRepeat'> {
+    isFocus: boolean;
+    isTabSelected: boolean;
+    semantics: RHFAutocompleteVariants | 'error' | null;
+    variant?: 'withImage';
+    multiple: boolean;
+}

package/components/hook-form/RHFAutocomplete/slots/RHFAutocompleteEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum RFHAutocompleteSlots {
+    autocompleteRoot = "autocompleteRoot",
+    label = "label"
+}

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

@@ -0,0 +1,8 @@
+var RFHAutocompleteSlots = /* @__PURE__ */ ((RFHAutocompleteSlots2) => {
+  RFHAutocompleteSlots2["autocompleteRoot"] = "autocompleteRoot";
+  RFHAutocompleteSlots2["label"] = "label";
+  return RFHAutocompleteSlots2;
+})(RFHAutocompleteSlots || {});
+export {
+  RFHAutocompleteSlots as R
+};

package/components/hook-form/RHFAutocomplete/slots/RHFAutocompleteSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const AutocompleteRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFAutocompleteOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFAutocompleteOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFAutocompleteOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFAutocompleteOwnerState> & Record<string, unknown>;
+}, {}, {}>;

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

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material";
+import { r as rhfAutocompleteSyles } from "../RFHAutocompleteStyles.js";
+import { R as RFHAUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
+import { R as RFHAutocompleteSlots } from "./RHFAutocompleteEnum.js";
+import { L as Label } from "../../../Label/Label.js";
+const AutocompleteRootStyled = styled("div", {
+  name: RFHAUTOCOMPLETE_KEY_COMPONENT,
+  slot: RFHAutocompleteSlots.autocompleteRoot
+})(rhfAutocompleteSyles?.autocompleteRoot);
+const LabelStyled = styled(Label, {
+  name: RFHAUTOCOMPLETE_KEY_COMPONENT,
+  slot: RFHAutocompleteSlots.label
+})(rhfAutocompleteSyles?.label);
+export {
+  AutocompleteRootStyled as A,
+  LabelStyled as L
+};

package/components/hook-form/RHFAutocomplete/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RHFAutocompleteEnum';
+export * from './RHFAutocompleteSlots';

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

@@ -0,0 +1 @@
+