@m4l/components 0.1.62 → 0.1.63

package/components/hook-form/RHFCheckbox/classes/types.d.ts

@@ -1,5 +1,9 @@
 export interface RHFCheckboxClassesType {
     root: string;
+    checkTypography: string;
     skeleton: string;
+    small: string;
+    medium: string;
+    stateDisabled: string;
 }
 export declare type RHFCheckboxClassesKey = keyof RHFCheckboxClassesType;

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

@@ -0,0 +1,152 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, Checkbox } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { styled as styled$1 } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.41b60a6b.js";
+const WrapperSkeletonCheckBox = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "36px",
+  height: "36px"
+}));
+const SkeletonRHFCheckBoxRoot = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: "8px",
+  width: "100%"
+}));
+const RHFCHEKCBOX_PREFIX = "RHFCheckbox";
+const getNameDataTestId = (KEY) => {
+  return `${RHFCHEKCBOX_PREFIX}-${KEY}`;
+};
+const SkeletonRHFCheckBox = (props) => {
+  const {
+    classes,
+    hasLabel
+  } = props;
+  return /* @__PURE__ */ jsxs(SkeletonRHFCheckBoxRoot, {
+    children: [/* @__PURE__ */ jsx(WrapperSkeletonCheckBox, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("skeleton")
+      } : {},
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "rounded",
+        width: "18px",
+        height: "18px"
+      })
+    }), hasLabel && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "70px",
+      height: "18px"
+    })]
+  });
+};
+const RHFCheckboxRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFCheckbox?.styleOverrides
+}));
+styled$1("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+styled$1(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ContainerCheckTypography = styled$1("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+generateUtilityClasses("M4LRHFCheckbox", [
+  "root",
+  "checkTypography",
+  "skeleton",
+  "small",
+  "medium",
+  "stateDisabled"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFCheckbox", slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.sizeCheck === "small" && "small", ownerState.sizeCheck === "medium" && "medium", ownerState.disabled && "stateDisabled"],
+    skeleton: ["skeleton"],
+    checkTypography: ["checkTypography", ownerState.sizeCheck === "small" ? "small" : "medium", ownerState.disabled && "stateDisabled"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function RHFCheckbox(props) {
+  const {
+    name,
+    sizeCheck = "small",
+    label,
+    disabled = false
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    sizeCheck,
+    disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(RHFCheckboxRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState: {
+          error
+        }
+      }) => {
+        return !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsxs(ContainerCheckTypography, {
+            className: classes.checkTypography,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId("checkTypography")
+            } : {},
+            children: [/* @__PURE__ */ jsx(Checkbox, {
+              size: sizeCheck,
+              ...field,
+              checked: field.value,
+              disabled: disabled ? true : false,
+              disableRipple: true
+            }), /* @__PURE__ */ jsx(Typography, {
+              skeletonWidth: "80px",
+              children: label
+            })]
+          }), error?.message && /* @__PURE__ */ jsx(HelperText, {
+            message: error?.message + ""
+          })]
+        }) : /* @__PURE__ */ jsx(SkeletonRHFCheckBox, {
+          classes,
+          hasLabel: !!label
+        });
+      }
+    })
+  });
+}
+export {
+  RHFCheckbox as R
+};

package/components/hook-form/RHFCheckbox/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const RHFCheckboxRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperSKTRHFCheckbox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTCheckSkeleton: import("@emotion/styled").StyledComponent<{
+    animation?: false | "pulse" | "wave" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
+    height?: string | number | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "rectangular" | "rounded" | "circular" | undefined;
+    width?: string | number | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "width" | "height" | keyof import("@mui/material/OverridableComponent").CommonProps | "animation" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ContainerCheckTypography: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFCheckbox/subcomponents/Skeleton/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperSkeletonCheckBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonRHFCheckBoxRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFCheckbox/subcomponents/Skeleton/types.d.ts

@@ -1,3 +1,4 @@
 export interface SkeletonRHFCheckBoxProps {
     classes: any;
+    hasLabel: boolean;
 }

package/components/hook-form/RHFCheckbox/test/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const RHFCHEKCBOX_ROOT_TEST_ID = "root";
+export declare const RHFCHEKCBOX_CHECKTYPOGRAPHY_TEST_ID = "checkTypography";
+export declare const RHFCHEKCBOX_SKELETON_TEST_ID = "skeleton";
+export declare const RHFCHEKCBOX_PREFIX = "RHFCheckbox";

package/components/hook-form/RHFCheckbox/test/utils.d.ts

@@ -0,0 +1,2 @@
+import { RHFCheckboxClassesKey } from "../classes/types";
+export declare const getNameDataTestId: (KEY: RHFCheckboxClassesKey) => string;

package/components/hook-form/RHFCheckbox/types.d.ts

@@ -7,3 +7,4 @@ export interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'cont
     name: string;
     options: string[];
 }
+export declare type OwnerState = Pick<RHFCheckboxProps, 'sizeCheck' | 'disabled'>;

package/components/hook-form/RHFDateTime/subcomponents/Skeleton/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFPeriod/{index.c4944f9c.js → index.c0a80aeb.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
-import { E as ErrorLabel } from "../../ErrorLabel/index.e140421c.js";
-import { P as Period } from "../../Period/index.796b3af4.js";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+import { P as Period } from "../../Period/index.99feb99e.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div")(({
   theme
@@ -43,7 +43,7 @@ const RHFPeriod = (props) => {
           readOnly,
           skeletonWidth,
           skeletonHeight
-        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+        }), error && /* @__PURE__ */ jsx(HelperText, {
           message: error.message || ""
         })]
       });

package/components/hook-form/RHFPeriod/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -5,4 +5,4 @@ import { RHFTextFieldProps } from './types';
  * @param props
  * @returns
  */
-export declare const RHFTextField: import("react").ForwardRefExoticComponent<(Omit<RHFTextFieldProps & import("@mui/material").StandardTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<RHFTextFieldProps & import("@mui/material").OutlinedTextFieldProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RHFTextField: import("react").ForwardRefExoticComponent<Omit<RHFTextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/components/hook-form/RHFTextField/classes/index.d.ts

@@ -1,6 +1,8 @@
-import { RHFTextFieldClassesType, RHFTextFieldState } from './types';
+import { RHFTextFieldClassesType } from './types';
+import { RHFTextFieldState } from '../types';
 export declare const RHFTextFieldClasses: RHFTextFieldClassesType;
 export declare const getRHFTextFieldClassesByState: (ownerState: RHFTextFieldState) => {
+    label: string;
     root: string;
     skeleton: string;
 };

package/components/hook-form/RHFTextField/classes/types.d.ts

@@ -1,10 +1,16 @@
 export interface RHFTextFieldClassesType {
     root: string;
+    label: string;
     skeleton: string;
     variantText: string;
     variantPassword: string;
-}
-export interface RHFTextFieldState {
-    variant: 'password' | 'text';
+    variantInfo: string;
+    variantSuccess: string;
+    variantWarning: string;
+    variantError: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    isFocus: string;
+    isDisabled: string;
 }
 export declare type RHFTextFieldClassesKey = keyof RHFTextFieldClassesType;

package/components/hook-form/RHFTextField/index.97485ff2.js

@@ -0,0 +1,341 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, generateUtilityClasses, TextField, InputAdornment, generateUtilityClass } from "@mui/material";
+import { forwardRef, useState, useEffect } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.be9c2ce5.js";
+import { T as TEST_PROP_ID } from "../../../vendor.a15d263e.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "../../Icon/index.0f9b360e.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { styled as styled$1 } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass } from "../../../utils/index.e199226a.js";
+import { T as Typography } from "../../mui_extended/Typography/index.41b60a6b.js";
+import { H as HelperText } from "../../HelperText/index.3c07ca2a.js";
+const SkeletonTextFieldRoot = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+const WrapperSkeletonRHFTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1),
+  gap: "4px"
+}));
+const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
+const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
+const RHFTEXTFIELD_PREFIX = "RHFTextField";
+const getNameDataTestId$1 = (KEY) => {
+  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
+};
+const SkeletonTextField = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight,
+    ownerState,
+    classes,
+    hasLabel
+  } = props;
+  const {
+    type: variant
+  } = ownerState;
+  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, {
+    children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: "30%",
+      height: "16px"
+    }), /* @__PURE__ */ jsx(WrapperSkeletonRHFTextField, {
+      className: classes.skeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId$1("skeleton")
+      } : {},
+      children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: skeletonWidth,
+          height: skeletonHeight
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: "16px",
+          height: "16px"
+        })]
+      })
+    })]
+  });
+};
+const RHFTextFieldRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFTextField?.styleOverrides
+}));
+styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const componentName = "M4LRHFTextField";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "label",
+    "skeleton",
+    "variantText",
+    "variantPassword",
+    "variantInfo",
+    "isDisabled",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
+    "sizeSmall",
+    "sizeMedium",
+    "isFocus"
+  ]
+);
+const getRHFTextFieldClassesByState = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.type === "password" ? "variantPassword" : "variantText",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.focus && "isFocus",
+      ownerState.disabled && "isDisabled",
+      ownerState.variant === "info" && "variantInfo",
+      ownerState.variant === "success" && "variantSuccess",
+      ownerState.variant === "warning" && "variantWarning",
+      ownerState.variant === "error" && "variantError"
+    ],
+    label: ["label"],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTextField = forwardRef((props, ref) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    label,
+    size = "small",
+    startIcon,
+    endIcon,
+    variant,
+    helperMessage = "",
+    disabled,
+    ...other
+  } = props;
+  const {
+    control,
+    formState: {
+      errors
+    }
+  } = useFormContext();
+  const [isFocus, setIsFocus] = useState(false);
+  const [currentVariant, setCurrentVariant] = useState(null);
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
+  const handleFocus = () => {
+    setIsFocus(true);
+  };
+  const handleBlur = () => {
+    setIsFocus(false);
+  };
+  const ownerState = {
+    type: type === "password" ? "password" : "text",
+    size,
+    focus: isFocus,
+    variant: currentVariant,
+    disabled
+  };
+  const classes = getRHFTextFieldClassesByState(ownerState);
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(RHFTextFieldRoot, {
+    className: classes.root,
+    role: "textbox",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId$1("root")
+    } : {},
+    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
+      name: nameRHF,
+      control,
+      render: ({
+        field: {
+          onChange,
+          value,
+          name,
+          ref: inputRef
+        },
+        fieldState: {
+          error
+        }
+      }) => {
+        const onInternalChange = (event) => {
+          if (type === "number") {
+            if (event.target.value) {
+              onChange(Number(event.target.value));
+              return;
+            }
+          }
+          onChange(event);
+        };
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [label ? /* @__PURE__ */ jsx(Typography, {
+            variant: "body",
+            className: classes.label,
+            children: label
+          }) : null, /* @__PURE__ */ jsx(TextField, {
+            variant: "outlined",
+            disabled,
+            ref,
+            inputRef,
+            InputLabelProps: {
+              shrink: true
+            },
+            autoComplete,
+            onChange: onInternalChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            value: value || "",
+            name,
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}`
+            } : {},
+            fullWidth: true,
+            error: !!error,
+            type,
+            ...startIcon || endIcon ? {
+              InputProps: {
+                ...process.env.NODE_ENV !== "production" ? {
+                  [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
+                } : {},
+                ...{
+                  ...startIcon ? {
+                    startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+                      position: "start",
+                      children: startIcon
+                    })
+                  } : {},
+                  ...endIcon ? {
+                    endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+                      position: "end",
+                      children: endIcon
+                    })
+                  } : {}
+                }
+              }
+            } : {},
+            ...other
+          }), currentVariant ? /* @__PURE__ */ jsx(HelperText, {
+            variant: currentVariant,
+            message: currentVariant !== "error" ? helperMessage : error?.message
+          }) : null]
+        });
+      }
+    }) : /* @__PURE__ */ jsx(SkeletonTextField, {
+      classes,
+      skeletonWidth,
+      skeletonHeight,
+      ownerState,
+      hasLabel: label
+    })
+  });
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPasswordRoot = styled$1("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
+}));
+generateUtilityClasses("M4LRHFTextFieldPassword", [
+  "root"
+]);
+function getRHFTextFieldPasswordUtilityClass(slot) {
+  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const RHFTEXTFIELDPASSWORD_PREFIX = "RHFTextFieldPassword";
+const getNameDataTestId = (KEY) => {
+  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
+};
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight,
+    size
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const classes = useUtilityClasses();
+  console.log("label----", label);
+  return /* @__PURE__ */ jsx(RHFTextFieldPasswordRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsx(RHFTextField, {
+      name,
+      label,
+      type: showPassword ? "text" : "password",
+      autoComplete: "on",
+      skeletonWidth,
+      skeletonHeight,
+      size,
+      InputProps: {
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+          position: "end",
+          children: /* @__PURE__ */ jsx(IconButton, {
+            onClick: () => setShowPassword(!showPassword),
+            variant: "line",
+            src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+          })
+        })
+      }
+    })
+  });
+};
+export {
+  RHFTextField as R,
+  RHFTextFieldPassword as a
+};

package/components/hook-form/RHFTextField/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const RHFTextFieldRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTRHFWrapperTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFTextField/subcomponents/Skeleton/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SkeletonTextFieldRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperSkeletonRHFTextField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/hook-form/RHFTextField/subcomponents/Skeleton/types.d.ts

@@ -1,7 +1,7 @@
-import { RHFTextFieldState } from '../../classes/types';
-import { RHFTextFieldProps } from '../../types';
+import { RHFTextFieldProps, RHFTextFieldState } from '../../types';
 export interface SkeletonTextFieldProps extends Pick<RHFTextFieldProps, 'skeletonWidth' | 'skeletonHeight'> {
     ownerState: RHFTextFieldState;
     classes: any;
+    hasLabel?: string;
 }
 export declare type WrapperSkeletonRHFTextField = RHFTextFieldState;

package/components/hook-form/RHFTextField/tests/{contants.d.ts → constants.d.ts}

@@ -1,2 +1,3 @@
 export declare const RHFTEXTFIELD_ROOT_TEST_ID = "RHFTextFieldRoot";
 export declare const RHFTEXTFIELD_INPUT_TEST_ID = "RHFTextFieldInput";
+export declare const RHFTEXTFIELD_PREFIX = "RHFTextField";

package/components/hook-form/RHFTextField/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { RHFTextFieldClassesType } from "../classes/types";
+export declare const getNameDataTestId: (KEY: keyof RHFTextFieldClassesType) => string;

package/components/hook-form/RHFTextField/types.d.ts

@@ -1,5 +1,19 @@
-export interface RHFTextFieldProps {
+import { TextFieldProps } from '@mui/material';
+import { ReactElement } from 'react';
+export declare type RHFTextFieldVariants = 'info' | 'success' | 'warning';
+export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'variant' | 'label'> {
     skeletonWidth?: string | number;
     skeletonHeight?: string | number;
     name: string;
+    size?: 'small' | 'medium';
+    startIcon?: ReactElement;
+    endIcon?: ReactElement;
+    variant?: RHFTextFieldVariants;
+    helperMessage?: string;
+    label?: string;
+}
+export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
+    type: 'password' | 'text';
+    focus: boolean;
+    variant: RHFTextFieldVariants | 'error' | null;
 }

package/components/hook-form/RHFTextFieldPassword/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RHFTextFieldPasswordRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;