@m4l/components 5.0.0 → 5.0.2

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

@@ -1,34 +0,0 @@
-import { styled } from "@mui/material/styles";
-styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column"
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  paddingRight: `${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    justifyContent: "flex-start"
-  }
-}));
-styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "grid",
-  gridTemplateColumns: "1fr auto",
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  height: `${theme.spacing(4.5)}`,
-  border: `1px solid ${theme.vars.palette.divider}`,
-  borderRadius: `${theme.spacing(1)}`,
-  padding: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    width: "100%"
-  }
-}));
-const RHFAutocompleteAsyncRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
-}));
-export {
-  RHFAutocompleteAsyncRoot as R
-};

package/components/hook-form/RHFAutocompleteAsync/subcomponents/ComponentTypeImage/index-Cwq3J-ce.js

@@ -1,103 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useNetwork, getPropertyByString } from "@m4l/core";
-import { useState, useCallback, useEffect } from "react";
-import debounce from "lodash/debounce";
-import { u as useUtilityClasses } from "../../classes/index-CaX9i9pu.js";
-import { R as RHFAutocompleteAsyncRoot } from "../../styles-DYrJNdlP.js";
-import { g as getNameDataTestId } from "../../tests/utils-8Tj-i2Qq.js";
-import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock-CF-669v-.js";
-import { R as RHFAutocomplete } from "../../../RHFAutocomplete/RHFAutocomplete-CJnpp5nw.js";
-function ComponentTypeImage(props) {
-  const {
-    name,
-    endPoint,
-    timeout = 5e3,
-    parms,
-    resultField = "data",
-    size,
-    isRemote = true,
-    onChangeFilterParms,
-    ...other
-  } = props;
-  const { networkOperation } = useNetwork();
-  const [options, setOptions] = useState([]);
-  const [firstOpen, setFirstOpen] = useState(0);
-  const [loading, setIsloading] = useState(false);
-  const [newRefresh, setNewRefresh] = useState(0);
-  const [canLoadOptions, setCanLoadOptions] = useState(true);
-  const [filterParms, setFilterParms] = useState({});
-  const refresh = () => {
-    setNewRefresh((current) => current + 1);
-    firstOpen === 0 && hanldeFirstOpen();
-  };
-  const debouncedFilter = useCallback(
-    debounce(
-      (newFilterParms) => {
-        setCanLoadOptions(true);
-        setFilterParms(newFilterParms);
-      },
-      300
-    ),
-    []
-  );
-  const onChangeFilterParmsLocal = (newValue) => {
-    if (onChangeFilterParms) {
-      debouncedFilter(onChangeFilterParms(newValue));
-    }
-  };
-  useEffect(() => {
-    setCanLoadOptions(true);
-  }, [parms, endPoint]);
-  const hanldeFirstOpen = () => {
-    if (firstOpen === 0) {
-      setFirstOpen(1);
-    }
-  };
-  useEffect(() => {
-    if (firstOpen === 1 && !loading && canLoadOptions) {
-      setIsloading(true);
-      setOptions([]);
-      setCanLoadOptions(false);
-      networkOperation({
-        method: "GET",
-        endPoint,
-        timeout,
-        parms: { ...parms, ...filterParms },
-        isRemote
-      }).then((response) => {
-        const valueMaybeArray = getPropertyByString(response, resultField);
-        const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
-        setOptions(newOptions);
-      }).finally(() => {
-        setIsloading(false);
-        setCanLoadOptions(true);
-      });
-    }
-    return () => {
-    };
-  }, [firstOpen, parms, filterParms, endPoint, newRefresh]);
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    RHFAutocompleteAsyncRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFAutocomplete,
-        {
-          name,
-          loading,
-          options,
-          onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
-          size,
-          refresh: () => refresh(),
-          onOpen: () => hanldeFirstOpen(),
-          ...other
-        }
-      )
-    }
-  );
-}
-export {
-  ComponentTypeImage as C
-};

package/components/hook-form/RHFAutocompleteAsync/subcomponents/ComponentTypeText/index-CpTJkG4o.js

@@ -1,103 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useNetwork, getPropertyByString } from "@m4l/core";
-import { useState, useCallback, useEffect } from "react";
-import debounce from "lodash/debounce";
-import { u as useUtilityClasses } from "../../classes/index-CaX9i9pu.js";
-import { R as RHFAutocompleteAsyncRoot } from "../../styles-DYrJNdlP.js";
-import { g as getNameDataTestId } from "../../tests/utils-8Tj-i2Qq.js";
-import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock-CF-669v-.js";
-import { R as RHFAutocomplete } from "../../../RHFAutocomplete/RHFAutocomplete-CJnpp5nw.js";
-function ComponentTypeText(props) {
-  const {
-    name,
-    endPoint,
-    timeout = 5e3,
-    parms,
-    resultField = "data",
-    size,
-    isRemote = true,
-    onChangeFilterParms,
-    ...other
-  } = props;
-  const { networkOperation } = useNetwork();
-  const [options, setOptions] = useState([]);
-  const [firstOpen, setFirstOpen] = useState(0);
-  const [loading, setIsloading] = useState(false);
-  const [newRefresh, setNewRefresh] = useState(0);
-  const [canLoadOptions, setCanLoadOptions] = useState(true);
-  const [filterParms, setFilterParms] = useState({});
-  const refresh = () => {
-    setNewRefresh((current) => current + 1);
-    firstOpen === 0 && hanldeFirstOpen();
-  };
-  const debouncedFilter = useCallback(
-    debounce(
-      (newFilterParms) => {
-        setCanLoadOptions(true);
-        setFilterParms(newFilterParms);
-      },
-      300
-    ),
-    []
-  );
-  const onChangeFilterParmsLocal = (newValue) => {
-    if (onChangeFilterParms) {
-      debouncedFilter(onChangeFilterParms(newValue));
-    }
-  };
-  useEffect(() => {
-    setCanLoadOptions(true);
-  }, [parms, endPoint]);
-  const hanldeFirstOpen = () => {
-    if (firstOpen === 0) {
-      setFirstOpen(1);
-    }
-  };
-  useEffect(() => {
-    if (firstOpen === 1 && !loading && canLoadOptions) {
-      setIsloading(true);
-      setOptions([]);
-      setCanLoadOptions(false);
-      networkOperation({
-        method: "GET",
-        endPoint,
-        timeout,
-        parms: { ...parms, ...filterParms },
-        isRemote
-      }).then((response) => {
-        const valueMaybeArray = getPropertyByString(response, resultField);
-        const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
-        setOptions(newOptions);
-      }).finally(() => {
-        setIsloading(false);
-        setCanLoadOptions(true);
-      });
-    }
-    return () => {
-    };
-  }, [firstOpen, parms, filterParms, endPoint, newRefresh]);
-  const classes = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    RHFAutocompleteAsyncRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFAutocomplete,
-        {
-          name,
-          loading,
-          options,
-          onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
-          size,
-          refresh: () => refresh(),
-          onOpen: () => hanldeFirstOpen(),
-          ...other
-        }
-      )
-    }
-  );
-}
-export {
-  ComponentTypeText as C
-};

package/components/hook-form/RHFAutocompleteAsync/tests/constants-RQuYFbii.js

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

package/components/hook-form/RHFAutocompleteAsync/tests/utils-8Tj-i2Qq.js

@@ -1,7 +0,0 @@
-import { R as RHFAUTOCOMPLETEASYNC_PREFIX } from "./constants-RQuYFbii.js";
-const getNameDataTestId = (KEY) => {
-  return `${RHFAUTOCOMPLETEASYNC_PREFIX}-${KEY}`;
-};
-export {
-  getNameDataTestId as g
-};

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

@@ -1,89 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormContext, Controller } from "react-hook-form";
-import { R as RHFCheckboxRoot, C as ContainerCheckTypography } from "./styles-BjwlDvb3.js";
-import { u as useUtilityClasses } from "./classes/index-jiQEHNY0.js";
-import { g as getNameDataTestId } from "./test/utils-BVQ6B9tx.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index-B1F2sySJ.js";
-import { useModuleSkeleton } from "@m4l/core";
-import { C as CheckBox } from "../../mui_extended/CheckBox/CheckBox-CSqbunYW.js";
-import { H as HelperError } from "../../HelperError/HelperError-C5G4oOos.js";
-function RHFCheckbox(props) {
-  const {
-    name,
-    sizeCheck = "small",
-    label,
-    disabled = false,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    sizeCheck: !isDesktop ? "medium" : sizeCheck,
-    disabled,
-    error: errors[name] ? true : false
-  };
-  const classes = useUtilityClasses(ownerState);
-  return (
-    /* ImageRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
-        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a otros componentes
-        de la plataforna web. */
-    /* @__PURE__ */ jsx(
-      RHFCheckboxRoot,
-      {
-        className: classes.root,
-        onFocus: handlerFocus,
-        onBlur: handlerOnBlur,
-        onKeyUp: handlerOnKeyUp,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root", name) } : {},
-        children: /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name,
-            control,
-            render: ({ field: { onChange, value }, fieldState: { error } }) => {
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  ContainerCheckTypography,
-                  {
-                    className: classes.checkTypography,
-                    ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("checkTypography", name) } : {},
-                    children: /* @__PURE__ */ jsx(
-                      CheckBox,
-                      {
-                        size: sizeCheck,
-                        onChange,
-                        checked: value,
-                        disabled: disabled ? true : false,
-                        disableRipple: true,
-                        label,
-                        mandatory,
-                        mandatoryMessage,
-                        helperMessage,
-                        htmlFor: name
-                      }
-                    )
-                  }
-                ),
-                error?.message && /* @__PURE__ */ jsx(HelperError, { message: error?.message + "" })
-              ] });
-            }
-          }
-        )
-      }
-    )
-  );
-}
-export {
-  RHFCheckbox as R
-};

package/components/hook-form/RHFCheckbox/classes/index-jiQEHNY0.js

@@ -1,44 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-generateUtilityClasses("M4LRHFCheckbox", [
-  /* elements */
-  "root",
-  "checkTypography",
-  "skeleton",
-  /* states or variants of elements */
-  "small",
-  "medium",
-  "stateDisabled",
-  "stateError",
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFCheckboxUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFCheckbox", slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.sizeCheck === "small" && "small",
-      ownerState.sizeCheck === "medium" && "medium",
-      ownerState.disabled && "stateDisabled",
-      ownerState.error && "stateError"
-    ],
-    skeleton: ["skeleton"],
-    checkTypography: [
-      "checkTypography",
-      ownerState.sizeCheck === "small" ? "small" : "medium",
-      ownerState.disabled && "stateDisabled"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  useUtilityClasses as u
-};

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

@@ -1,24 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Skeleton } from "@mui/material";
-const RHFCheckboxRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFCheckbox?.styleOverrides
-}));
-styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "8px"
-}));
-styled(Skeleton)(() => ({
-  width: "20px",
-  height: "20px",
-  borderRadius: "4px"
-}));
-const ContainerCheckTypography = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-export {
-  ContainerCheckTypography as C,
-  RHFCheckboxRoot as R
-};

package/components/hook-form/RHFCheckbox/test/constants-C1yRrJw-.js

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

package/components/hook-form/RHFCheckbox/test/utils-BVQ6B9tx.js

@@ -1,7 +0,0 @@
-import { R as RHFCHEKCBOX_PREFIX } from "./constants-C1yRrJw-.js";
-const getNameDataTestId = (KEY, NAME) => {
-  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
-};
-export {
-  getNameDataTestId as g
-};

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

@@ -1,138 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { useFormContext, useWatch, Controller } from "react-hook-form";
-import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
-import { SketchPicker } from "react-color";
-import { u as useUtilityClasses } from "./classes/index-RGuHpPSk.js";
-import { R as RHFColorPickerRoot } from "./styles-Drw8N4oO.js";
-import { useTheme } from "@mui/material/styles";
-import { R as RHFColorPickerSkeleton } from "./subcomponents/Skeleton/indext-BasQE4Nq.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index-B1F2sySJ.js";
-import { L as Label } from "../../Label/Label-3ew9PS6u.js";
-import { H as HelperError } from "../../HelperError/HelperError-C5G4oOos.js";
-import { I as Icon } from "../../Icon/Icon-1jxG9mYZ.js";
-import { P as Popover } from "../../mui_extended/Popover/Popover-B9KxhzxZ.js";
-import { B as Button } from "../../mui_extended/Button/Button-BdusSjEV.js";
-const RHFColorPicker = (props) => {
-  const { name, size = "small", label, mandatory, mandatoryMessage, helperMessage } = props;
-  const { control, setValue, trigger } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const theme = useTheme();
-  const currentColor = useWatch({
-    name,
-    control
-  });
-  const isDesktop = useResponsiveDesktop();
-  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
-  const [anchorEl, setAnchorEl] = useState(null);
-  const { getLabel } = useModuleDictionary();
-  const handleColorChange = (color) => {
-    setTempColor(color.hex);
-  };
-  const handleApprove = () => {
-    setAnchorEl(null);
-    if (tempColor !== currentColor) {
-      setValue(name, tempColor);
-      trigger(name);
-    }
-  };
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    size: isDesktop ? size : "medium"
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFColorPickerRoot,
-    {
-      className: classes.root,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name,
-          control,
-          defaultValue: "",
-          render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            label && /* @__PURE__ */ jsx(
-              Label,
-              {
-                label,
-                mandatory,
-                mandatoryMessage,
-                helperMessage
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                className: classes.containerFieldColor,
-                onClick: (event) => setAnchorEl(event.currentTarget),
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    setAnchorEl(event.currentTarget);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes.fieldColor,
-                      style: {
-                        backgroundColor: value
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
-                    }
-                  )
-                ]
-              }
-            ),
-            error?.message && /* @__PURE__ */ jsx(HelperError, { message: error?.message + "" }),
-            /* @__PURE__ */ jsx(
-              Popover,
-              {
-                open: Boolean(anchorEl),
-                arrowType: "top-center",
-                className: classes.popoverRoot,
-                anchorEl,
-                onClose: () => setAnchorEl(null),
-                anchorOrigin: {
-                  vertical: "bottom",
-                  horizontal: "center"
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "center"
-                },
-                sx: {
-                  mt: "12px",
-                  ml: -1.25,
-                  ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
-                },
-                children: /* @__PURE__ */ jsxs("div", { className: classes.containerPicker, children: [
-                  /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
-                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, children: getLabel("rhfcolorpicker.accept") })
-                ] })
-              }
-            )
-          ] })
-        }
-      ) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, { label })
-    }
-  );
-};
-export {
-  RHFColorPicker as R
-};

package/components/hook-form/RHFColorPicker/classes/constants-CyffuaRF.js

@@ -1,4 +0,0 @@
-const componentName = "M4LRHFColorPicker";
-export {
-  componentName as c
-};

package/components/hook-form/RHFColorPicker/classes/index-RGuHpPSk.js

@@ -1,44 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants-CyffuaRF.js";
-const colorPickerClasses = generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "popoverRoot",
-  "containerFieldColor",
-  "fieldColor",
-  "containerPicker",
-  "skeleton",
-  /* states or variants of elements */
-  "sizeSmall",
-  "sizeMedium",
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFColorPickerUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (owmerState) => {
-  const slots = {
-    root: [
-      "root",
-      owmerState.isFocus && "isFocus",
-      owmerState.isTabSelected && "isTabSelected",
-      owmerState.size === "small" && "sizeSmall",
-      owmerState.size === "medium" && "sizeMedium"
-    ],
-    popoverRoot: ["popoverRoot"],
-    containerFieldColor: ["containerFieldColor"],
-    fieldColor: ["boxColor"],
-    containerPicker: ["containerPicker"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  colorPickerClasses as c,
-  useUtilityClasses as u
-};

package/components/hook-form/RHFColorPicker/dictionary-D6kRH-6k.js

@@ -1,6 +0,0 @@
-function getRHFColorPickerComponentsDictionary() {
-  return ["rhfcolorpicker"];
-}
-export {
-  getRHFColorPickerComponentsDictionary as g
-};

package/components/hook-form/RHFColorPicker/index-l0sNRNKZ.js

@@ -1 +0,0 @@
-

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

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material";
-const RHFColorPickerRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFColorPicker?.styleOverrides
-}));
-export {
-  RHFColorPickerRoot as R
-};

package/components/hook-form/RHFColorPicker/subcomponents/Skeleton/indext-BasQE4Nq.js

@@ -1,21 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-import { c as colorPickerClasses } from "../../classes/index-RGuHpPSk.js";
-const RHFColorPickerSkeleton = (props) => {
-  const { label } = props;
-  return /* @__PURE__ */ jsxs("div", { className: colorPickerClasses.skeleton, children: [
-    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "14px" }),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        className: colorPickerClasses.skeleton,
-        variant: "rectangular",
-        width: 20,
-        height: 20
-      }
-    )
-  ] });
-};
-export {
-  RHFColorPickerSkeleton as R
-};