@m4l/components 9.3.28 → 9.3.30-JA.beta-1

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -12,7 +12,7 @@ import { A as AreasAdminRootStyled, a as AreasAdminContentStyled, b as AreasCont
 import { useIsMobile } from "@m4l/graphics";
 import { A as AREAS_ADMIN_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 { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { M as MenuActions } from "../../../MenuActions/MenuActions.js";

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/AreaChip.js

@@ -12,8 +12,9 @@ import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../dic
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "../../constants.js";
 import { g as getComponentClasses } from "../../../../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../hook-form/RHFormProvider/schema.js";
 import { A as AreasAdminSlots } from "../../slots/AreasAdminEnum.js";
-import { R as RHFormProvider } from "../../../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { T as Typography } from "../../../../../mui_extended/Typography/Typography.js";
 import { R as RHFTextField } from "../../../../../hook-form/RHFTextField/RHFTextField.js";
 import { A as ActionsContainer } from "../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
@@ -56,11 +57,11 @@ const AreaChip = (props) => {
     inputEditArea: areaName
   };
   const validationSchema = useMemo(
-    () => Yup.object().shape({
+    () => createValidationSchema(createValidationFullObject(createValidationPartialObject({
       inputEditArea: Yup.string().required(
         getLabel(getAreasDictionary(AREAS_DICCTIONARY.validation_edit_area))
       )
-    }),
+    }))),
     [getLabel]
   );
   const handlerOnClick = (e) => {

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -9,9 +9,10 @@ import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../
 import { I as ICONS } from "../../../../../../icons.js";
 import { C as ChipActionsMobile } from "../../../AreaChip/subcomponents/ChipActionsMobile/ChipActionsMobile.js";
 import { l as ChipMobileRootStyled, m as ChipMobileContentStyled, N as NameChipMobileStyled, n as EditAreaChipMobileContainerStyled } from "../../../../slots/AreasAdminSlots.js";
-import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
+import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormProvider/RHFormProvider.js";
 import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { c as createValidationSchema, a as createValidationFullObject, b as createValidationPartialObject } from "../../../../../../../hook-form/RHFormProvider/schema.js";
 import { M as MenuActions } from "../../../../../../../MenuActions/MenuActions.js";
 import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover.js";
 import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField.js";
@@ -44,11 +45,11 @@ const ChipMobile = (props) => {
     inputEditArea: areaName
   };
   const validationSchema = useMemo(
-    () => Yup.object().shape({
+    () => createValidationSchema(createValidationFullObject(createValidationPartialObject({
       inputEditArea: Yup.string().required(
         getLabel(getAreasDictionary(AREAS_DICCTIONARY.validation_edit_area))
       )
-    }),
+    }))),
     [getLabel]
   );
   const handlerOnClick = (e) => {

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/areas/contexts/AreasContext/store.js

@@ -441,8 +441,8 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
                   bounds: {
                     left: MARGIN_GRIDLAYOUT,
                     top: MARGIN_GRIDLAYOUT,
-                    right: -MARGIN_GRIDLAYOUT,
-                    bottom: -MARGIN_GRIDLAYOUT
+                    right: -10,
+                    bottom: -10
                   }
                 });
               }

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
+            }
+          )
         }
       )
     }