@m4l/components 9.3.28 → 9.3.29-JT19112025.beta.2

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -4,7 +4,7 @@ import { u as useAreasStore } from "../../hooks/useAreas/index.js";
 import { A as AreaMemonizedWindowModal } from "./subcomponents/Area/subcomponents/WindowModal/WindowModal.js";
 import { shallow } from "zustand/shallow";
 import { L as LoadingError } from "../../../LoadingError/LoadingError.js";
-import { a as getNameDataTestId, g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId, a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../constants.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
 import { A as AreasViewerRootStyled } from "./slots/AreasViewerSlots.js";

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -3,7 +3,7 @@ import React from "react";
 import { M as MemonizedWindowBaseMicroFrontend } from "../../../../../../../WindowBase/subcomponents/MicroFrontend/MicroFrontend.js";
 import { W as WindowBaseComponent } from "../../../../../../../WindowBase/subcomponents/Component/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../../../test/getNameDataTestId.js";
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow.js";
 import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";

package/components/commercial/TopBar/TopBar.js

@@ -4,7 +4,7 @@ import { g as getTopBarClassesUtilityClass } from "./classes/index.js";
 import { C as ConteinItem } from "./component/ConteinItem/index.js";
 import { T as TopBarProvider } from "./context/index.js";
 import { T as TopBarRoot } from "./style.js";
-import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { c as componentName } from "./classes/constants.js";
 const TopBar = (props) => {
   const { dataMenu: DataMenu, dataTestId } = props;

package/components/commercial/TopBar/component/ConteinItem/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { u as useTopBar } from "../../hook/topBarContext/index.js";
 import { N as NavItemRoot } from "./subcomponets/NavItem/index.js";
 import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../classes/constants.js";
 const ConteinItem = () => {
   const { dataMenu: DataMenu, classes, dataTestId } = useTopBar();

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { i as isActive } from "../../../../utils/isActive/index.js";
 import { T as TopBarClasses } from "../../../../classes/index.js";
 import { T as TEST_PROP_ID } from "../../../../../../../test/constants_no_mock.js";
-import { a as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
+import { g as getNameDataTestId } from "../../../../../../../test/getNameDataTestId.js";
 import { c as componentName } from "../../../../classes/constants.js";
 import { A as Accordion } from "../../../../../../mui_extended/Accordion/Accordion.js";
 import { B as Button } from "../../../../../../mui_extended/Button/Button.js";

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js

@@ -3,7 +3,7 @@ import { useTheme } from "@mui/material";
 import { P as PropagateLoaderSpinnerStyled, L as LoaderStyled } from "./slots/PropagateLoaderSpinnerSlots.js";
 import { P as PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
 import clsx from "clsx";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { P as PropagateLoaderSpinnerSlots } from "./slots/PropagateLoaderSpinnerEnum.js";

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { S as SPLIT_LAYOUT_KEY_COMPONENT, a as SPLIT_LAYOUT_ICONS } from "./constants.js";
 import { S as SplitLayoutSlots } from "./slots/SplitLayoutEnum.js";

package/components/formatters/BooleanFormatter/BooleanFormatter.js

@@ -5,7 +5,7 @@ import { L as LABEL_BOOLEAN_YES, a as LABEL_BOOLEAN_NO, b as LABEL_BOOLEAN_TRUE,
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BOOLEAN_FORMATTER_KEY_COMPONENT } from "./constants.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { B as BooleanFormatterRootStyled, a as BooleanFormatterIconStyled, b as BooleanFormatterIconCheckFalseStyled, c as BooleanFormatterChipStyled } from "./slots/BooleanFormatterSlots.js";
 import { B as BooleanFormatterSlots } from "./slots/BooleanFormatterEnum.js";
 function getFormatBoolean(presentationType, value = false, getLabel) {

package/components/formatters/ColorFormatter/ColorFormatter.d.ts

@@ -0,0 +1,18 @@
+import { ColorFormatterProps } from './types';
+/**
+ * ColorFormatter
+ * Componente para formatear y mostrar colores en diferentes contextos (tablas, listas, etc.)
+ * @param {ColorFormatterProps} props - Las propiedades del componente.
+ * @param {string} [props.value] - El valor del color en formato hexadecimal
+ * @param {string} [props.size] - Tamaño del componente ('small' | 'medium')
+ * @param {string} [props.dataTestId] - ID para pruebas
+ * @param {string} [props.className] - Clases CSS personalizadas
+ * @example
+ * <ColorFormatter value="#FF0000" />
+ * // Renderiza un cuadrado con el color rojo
+ *
+ * <ColorFormatter value={null} />
+ * // Renderiza el ícono "out_of" cuando no hay valor
+ * @returns JSX.Element
+ */
+export declare function ColorFormatter(props: ColorFormatterProps): import("react/jsx-runtime").JSX.Element;

package/components/formatters/ColorFormatter/ColorFormatter.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { C as ColorFormatterRootStyled } from "./slots/ColorFormatterSlots.js";
+import { C as ColorFormatterSlots } from "./slots/ColorFormatterEnum.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { C as COLOR_FORMATTER_KEY_COMPONENT } from "./constants.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { C as Color } from "../../Color/Color.js";
+function ColorFormatter(props) {
+  const { value, dataTestId, className, size = "medium" } = props;
+  const ownerState = { value };
+  const colorComponent = useMemo(() => {
+    return /* @__PURE__ */ jsx(Color, { value, size });
+  }, [value, size]);
+  return /* @__PURE__ */ jsx(
+    ColorFormatterRootStyled,
+    {
+      className: clsx(
+        getComponentSlotRoot(COLOR_FORMATTER_KEY_COMPONENT),
+        className
+      ),
+      ...getPropDataTestId(
+        COLOR_FORMATTER_KEY_COMPONENT,
+        ColorFormatterSlots.root,
+        dataTestId
+      ),
+      ownerState,
+      children: colorComponent
+    }
+  );
+}
+export {
+  ColorFormatter as C
+};

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

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

package/components/formatters/ColorFormatter/ColorFormatter.styles.js

@@ -0,0 +1,15 @@
+const colorFormatterStyles = {
+  /**
+   * Estilo base del componente ColorFormatter
+   */
+  root: () => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  })
+};
+export {
+  colorFormatterStyles as c
+};

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

@@ -0,0 +1 @@
+export declare const COLOR_FORMATTER_KEY_COMPONENT = "ColorFormatter";

package/components/formatters/ColorFormatter/constants.js

@@ -0,0 +1,4 @@
+const COLOR_FORMATTER_KEY_COMPONENT = "ColorFormatter";
+export {
+  COLOR_FORMATTER_KEY_COMPONENT as C
+};

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

@@ -0,0 +1,3 @@
+export { ColorFormatter } from './ColorFormatter';
+export * from './constants';
+export * from './types';

package/components/formatters/ColorFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/ColorFormatter/slots/ColorFormatterEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ColorFormatterSlots {
+    root = "root"
+}

package/components/formatters/ColorFormatter/slots/ColorFormatterEnum.js

@@ -0,0 +1,7 @@
+var ColorFormatterSlots = /* @__PURE__ */ ((ColorFormatterSlots2) => {
+  ColorFormatterSlots2["root"] = "root";
+  return ColorFormatterSlots2;
+})(ColorFormatterSlots || {});
+export {
+  ColorFormatterSlots as C
+};

package/components/formatters/ColorFormatter/slots/ColorFormatterSlots.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente raíz estilizado para el ColorFormatter
+ */
+export declare const ColorFormatterRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/formatters/ColorFormatter/slots/ColorFormatterSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { c as colorFormatterStyles } from "../ColorFormatter.styles.js";
+import { C as COLOR_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { C as ColorFormatterSlots } from "./ColorFormatterEnum.js";
+const ColorFormatterRootStyled = styled("div", {
+  name: COLOR_FORMATTER_KEY_COMPONENT,
+  slot: ColorFormatterSlots.root
+})(colorFormatterStyles?.root);
+export {
+  ColorFormatterRootStyled as C
+};

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

@@ -0,0 +1,24 @@
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+import { COLOR_FORMATTER_KEY_COMPONENT } from './constants';
+import { ColorFormatterSlots } from './slots/ColorFormatterEnum';
+/**
+ * Props para el componente ColorFormatter.
+ */
+export interface ColorFormatterProps {
+    value?: string | null;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    dataTestId?: string;
+    className?: string;
+}
+/**
+ * Props del estado del componente ColorFormatter.
+ */
+export interface ColorFormatterOwnerState {
+    value?: string | null;
+}
+/**
+ * Props para estilizar el componente ColorFormatter.
+ */
+export type ColorFormatterStyles = OverridesStyleRules<ColorFormatterSlots, typeof COLOR_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/ColorFormatter/types.js

@@ -0,0 +1 @@
+

package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import React, { useMemo } from "react";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { C as ConcatenatedFormatterRootStyled } from "./slots/ConcatenatedFormatterSlots.js";
 import { C as CONTATENATED_FORMATTER_KEY_COMPONENT } from "./constants.js";

package/components/formatters/DateFormatter/DateFormatter.js

@@ -5,7 +5,7 @@ import { D as DateFormatterRootStyled } from "./slots/DateFormatterSlots.js";
 import { D as DateFormatterSlots } from "./slots/DateFormatterEnum.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { D as DATE_FORMATTER_KEY_COMPONENT } from "./constants.js";
 function getFormatDate(presentationType, value, dateFormatter, format) {
   let finalFormat = format || dateFormatter.datetimeFormat;

package/components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import clsx from "clsx";
 import { R as RootStyled } from "./slots/DistanceToNowFormatterSlots.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { C as COMPONET_KEY_COMPONENT } from "./constants.js";
 import { D as DistanceToNowFormatterSlots } from "./slots/slots.js";
 import { u as useDistanceToNowFormatter } from "./hooks/useDistanceToNowFormatter.js";

package/components/formatters/PeriodFormatter/PeriodFormatter.js

@@ -4,7 +4,7 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { P as PERIOD_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { d as dictionary } from "./dictionary.js";
 import { P as PeriodFormatterRootStyled, a as PeriodFormatterSkeletonStyled } from "./slots/PeriodFormatterSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";

package/components/formatters/PointsFormatter/PointsFormatter.js

@@ -3,7 +3,7 @@ import { getPropertyByString } from "@m4l/core";
 import React, { useMemo } from "react";
 import { P as PointsFormatterRootStyled } from "./slots/ointsFormatterSlots.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import clsx from "clsx";
 import { P as POINTS_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { P as PointsFormatterSlots } from "./slots/PointsFormatterEnum.js";

package/components/formatters/PriceFormatter/PriceFormatter.js

@@ -4,7 +4,7 @@ import { clsx } from "clsx";
 import { getPropertyByString } from "@m4l/core";
 import { useFormatter } from "@m4l/graphics";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as PriceFormatterRootStyled } from "./slots/PriceFormatterSlots.js";
 import { P as PRICE_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { P as PriceFormatterSlots } from "./slots/PriceFormatterEnum.js";

package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.js

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import { clsx } from "clsx";
 import { getPropertyByString } from "@m4l/core";
 import { U as UncertaintyFormatterRootStyled } from "./slots/UncertaintyFormatterSlots.js";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { U as UNCERTAINTY_FORMATTER_KEY_COMPONENT } from "./constants.js";
 import { U as UncertaintyFormatterSlots } from "./slots/UncertaintyFormatterEnum.js";

package/components/formatters/index.d.ts

@@ -9,3 +9,4 @@ export { PriceFormatter, getFormatPrice, } from './PriceFormatter/PriceFormatter
 export * from './DistanceToNowFormatter';
 export type { UncertaintyRange } from './UncertaintyFormatter/types';
 export { TagsFormatter } from './TagsFormatter';
+export { ColorFormatter } from './ColorFormatter';

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

@@ -1,16 +1,14 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
 import { clsx } from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
 import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
-import { R as RootStyled } from "./slots/RHFColorPickerSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { L as Label } from "../../Label/Label.js";
-import { C as Color } from "../../Color/Color.js";
-import { H as HelperError } from "../../HelperError/HelperError.js";
+import { R as RootStyled } from "./slots/RHFColorPickerSlots.js";
+import { C as ColorPickerField } from "./subcomponents/ColorPickerField/ColorPickerField.js";
 const RHFColorPicker = (props) => {
   const {
     name,
@@ -35,7 +33,11 @@ const RHFColorPicker = (props) => {
     {
       className: clsx(className, classes.root),
       role: isSkeleton ? "presentation" : void 0,
-      ...getPropDataTestId(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots.root, instaceDataTestId),
+      ...getPropDataTestId(
+        RHFCOLOR_PICKER_KEY_COMPONENT,
+        RHFColorPickerSlots.root,
+        instaceDataTestId
+      ),
       ownerState: { ownerState },
       children: /* @__PURE__ */ jsx(
         Controller,
@@ -43,35 +45,25 @@ const RHFColorPicker = (props) => {
           name,
           control,
           defaultValue: "",
-          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            label && /* @__PURE__ */ jsx(
-              Label,
-              {
-                size,
-                label,
-                mandatory,
-                mandatoryMessage,
-                helperMessage
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Color,
-              {
-                size,
-                onChange,
-                value,
-                error: !!error,
-                disabled: isSkeleton ? true : disabled
-              }
-            ),
-            error?.message && /* @__PURE__ */ jsx(
-              HelperError,
-              {
-                size,
-                message: error?.message + ""
-              }
-            )
-          ] })
+          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsx(
+            ColorPickerField,
+            {
+              value,
+              onChange,
+              error,
+              size,
+              label,
+              mandatory,
+              mandatoryMessage,
+              helperMessage,
+              disabled,
+              isSkeleton,
+              className,
+              instaceDataTestId,
+              currentSize,
+              classes
+            }
+          )
         }
       )
     }

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

@@ -8,6 +8,162 @@ const rhfcolorPickerStyles = {
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings["sp0-5"],
     width: "100%"
+  }),
+  /**
+   * Estilos para el IconButton que abre el color picker
+   */
+  iconButton: ({ theme, ownerState }) => ({
+    // Estructura y layout básico
+    display: "flex",
+    justifyContent: "center",
+    width: "fit-content",
+    height: "fit-content",
+    cursor: ownerState?.disabled ? "not-allowed" : "pointer",
+    color: theme.vars.palette.text.primary,
+    pointerEvents: ownerState?.disabled ? "none" : "auto",
+    // Espaciado
+    padding: 0,
+    // Radio de borde
+    borderRadius: theme.size.borderRadius.r1,
+    border: ownerState?.error ? `1px solid ${theme.vars.palette.error.enabled}` : void 0,
+    // Pseudoclases
+    "&:hover": {
+      background: ownerState?.error ? theme.vars.palette.error.hoverOpacity : theme.vars.palette.default.hoverOpacity
+    },
+    "&:active": {
+      background: ownerState?.error ? theme.vars.palette.error.activeOpacity : theme.vars.palette.default.activeOpacity
+    },
+    "&:focus-visible": {
+      outline: `1px solid ${theme.vars.palette.primary.focusVisible}`,
+      outlineOffset: 2
+    },
+    // Sizes medium
+    ...ownerState?.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action,
+        height: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action,
+        height: theme.vars.size.desktop.medium.action
+      }
+    },
+    // Sizes small
+    ...ownerState?.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      }
+    }
+  }),
+  /**
+   * Popover
+   */
+  popover: ({ theme, ownerState }) => ({
+    "& .MuiPaper-root": {
+      padding: theme.vars.size.baseSpacings.sp3,
+      border: theme.vars.size.borderStroke.container,
+      borderColor: ownerState?.error ? theme.vars.palette.border.error : theme.vars.palette.border.secondary,
+      borderRadius: `${theme.vars.size.borderRadius.r3} !important`,
+      "& .MuiButtonBase-root": {
+        // Ajuste específico de estilo para el contenido de los botones
+        justifyContent: "center"
+      },
+      boxShadow: "0 8px 24px -10px rgba(95, 108, 125, 0.16), 0 20px 60px 0 rgba(109, 124, 146, 0.12)"
+    }
+  }),
+  /**
+   * estilos en picker
+   */
+  sketchPicker: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    boxShadow: "none !important",
+    background: `${theme.vars.palette.background.default} !important`,
+    padding: "0px !important",
+    "& > div": {
+      // Caja de selección de color
+      "&:nth-of-type(1)": {
+        borderRadius: `${theme.vars.size.borderRadius.r2} !important`
+      },
+      // Caja de selección horizontal de color
+      "&:nth-of-type(2)": {
+        display: "flex !important",
+        justifyContent: "center !important",
+        alignItems: "center !important",
+        gap: theme.vars.size.baseSpacings.sp3,
+        "& > div:nth-of-type(1)": {
+          padding: "0px !important",
+          "& > div:nth-of-type(1)": {
+            height: `${theme.vars.size.baseSpacings.sp3}!important`,
+            borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
+            "& > div > div > div > div": {
+              height: "10px !important"
+            }
+          }
+        },
+        "& > div:nth-of-type(2)": {
+          margin: "0px !important",
+          borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
+          height: `${theme.vars.size.desktop.medium.base} !important`,
+          width: `${theme.vars.size.desktop.medium.base} !important`,
+          "& div": {
+            borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
+            boxShadow: "none !important"
+          }
+        }
+      },
+      // Inputs para el cambio de color mediante a texto( hexadecimal o rgb )
+      "&:nth-of-type(3)": {
+        padding: "0px !important",
+        "& > div": {
+          // Estilos compartidos para las cajas de color
+          "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
+            padding: "0px !important",
+            "& div": {
+              display: "flex !important",
+              flexDirection: "column-reverse !important",
+              "& label": {
+                textAlign: "left !important",
+                color: `${theme.vars.palette.text.secondary} !important`,
+                textTransform: "uppercase !important",
+                padding: "0px !important"
+              },
+              "& input": {
+                outline: `1px solid ${theme.vars.palette.border.secondary}`,
+                borderRadius: theme.vars.size.borderRadius.r1,
+                background: theme.vars.palette.background.default,
+                color: theme.vars.palette.text.primary,
+                boxShadow: "none !important",
+                "&:hover": {
+                  background: theme.vars.palette.primary.hoverOpacity
+                },
+                "&:focus-visible": {
+                  outlineColor: theme.vars.palette.primary.focusVisible
+                },
+                "&:active": {
+                  outlineColor: theme.vars.palette.primary.active
+                }
+              }
+            }
+          }
+        }
+      },
+      //Colores en grid varios del componente de react-color
+      "&:nth-of-type(4)": {
+        paddingTop: "0px !important",
+        "& > div > span > div": {
+          borderRadius: `${theme.vars.size.borderRadius["r1-5"]} !important`,
+          borderColor: theme.vars.palette.border.secondary
+        }
+      }
+    },
+    "& .flexbox-fix": {
+      border: "0px !important"
+    }
   })
 };
 export {

package/components/hook-form/RHFColorPicker/hooks/useColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useColorPicker } from './useColorPicker';
+export * from './types';

package/components/hook-form/RHFColorPicker/hooks/useColorPicker/types.d.ts

@@ -0,0 +1,9 @@
+import { Sizes } from '@m4l/styles';
+export interface UseColorPickerProps {
+    value: string;
+    onChange: (value: string | null) => void;
+    error?: boolean;
+    disabled?: boolean;
+    isSkeleton?: boolean;
+    currentSize: Extract<Sizes, 'small' | 'medium'>;
+}

package/components/hook-form/RHFColorPicker/hooks/useColorPicker/useColorPicker.d.ts

@@ -0,0 +1,41 @@
+import { ColorResult } from 'react-color';
+import { UseColorPickerProps } from './types';
+/**
+ * Hook que gestiona la lógica del color picker
+ *
+ * Este hook encapsula toda la funcionalidad de selección de color, incluyendo:
+ * - Gestión del estado del popover (abrir/cerrar)
+ * - Confirmación o cancelación de cambios
+ * - Generación del ownerState para estilos
+ * @param {UseColorPickerProps} props - Propiedades del hook
+ * @param {string} props.value - Valor actual del color
+ * @param {function} props.onChange - Callback ejecutado al confirmar un color
+ * @param {boolean} [props.error] - Indica si hay error de validación
+ * @param {boolean} [props.disabled] - Indica si el picker está deshabilitado
+ * @param {boolean} [props.isSkeleton] - Indica si está en modo skeleton
+ * @param {('small'|'medium')} props.currentSize - Tamaño del componente
+ * @returns {object} Objeto con estados y handlers
+ * @returns {HTMLElement|null} anchorEl - Elemento ancla para el Popover
+ * @returns {string|undefined} tempColor - Color temporal antes de confirmar
+ * @returns {object} iconButtonOwnerState - Estado para estilos del botón
+ * @returns {function} handleOpenPicker - Handler para abrir el picker
+ * @returns {function} handleClosePicker - Handler para cerrar el picker
+ * @returns {function} handleColorChange - Handler para cambio de color
+ * @returns {function} handleConfirm - Handler para confirmar selección
+ * @returns {function} handleCancel - Handler para cancelar selección
+ */
+export declare const useColorPicker: (props: UseColorPickerProps) => {
+    anchorEl: HTMLElement | null;
+    tempColor: string | undefined;
+    iconButtonOwnerState: {
+        size: "small" | "medium";
+        disabled: boolean | undefined;
+        value: string;
+        error: boolean;
+    };
+    handleOpenPicker: (event: React.MouseEvent<HTMLElement>) => void;
+    handleClosePicker: () => void;
+    handleColorChange: (color: ColorResult) => void;
+    handleConfirm: () => void;
+    handleCancel: () => void;
+};