@m4l/components 0.2.35 → 0.2.36

package/components/GridLayout/styles.d.ts

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

package/components/GridLayout/subcomponents/Griditem/index.69bc14e5.js

@@ -0,0 +1,397 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { D as DraggableCore_1 } from "../../../../react-draggable.79b4c69a.js";
+import { R as Resizable } from "../../../../react-resizable.af1f31c1.js";
+import { g as getH, c as calcXY, a as calcGridItemWHPx, b as calcGridColWidth, d as calcWH, e as clamp, f as calcGridItemPosition, h as gridLayoutClasses, D as DEFAULT_COLS, i as DEFAULT_ROW_HEIGHT, j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, l as DEFAULT_MARGIN, m as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, o as DEFAULT_COLAPSED_HEIGHT, p as perc, s as setTransform, q as setTopLeft } from "../../index.b9c47a4c.js";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+function GridItem(props) {
+  const {
+    layoutItemRender: ComponentItemRender,
+    type,
+    i,
+    x,
+    y,
+    w,
+    h,
+    cols = DEFAULT_COLS,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    containerWidth = DEFAULT_CONTAINER_WIDTH,
+    containerHeight = DEFAULT_CONTAINER_HEIGHT,
+    margin = DEFAULT_MARGIN,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    isBounded,
+    maxRows = Infinity,
+    className = "",
+    draggableCancel = "",
+    draggableHandle = "",
+    minH = 1,
+    minW = 1,
+    maxH = Infinity,
+    maxW = Infinity,
+    isResizable = true,
+    isDraggable = true,
+    resizeHandles,
+    resizeHandle,
+    useCSSTransforms = true,
+    usePercentages,
+    style,
+    freeMove,
+    maximize = "none",
+    colapsed,
+    visible = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onFreeMoveClick
+  } = props;
+  const refProps = useRef({
+    cols,
+    x,
+    y,
+    w,
+    h: getH(h, colapsedHeight, rowHeight, colapsed),
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed
+  });
+  useEffect(() => {
+    refProps.current = {
+      cols,
+      x,
+      y,
+      w,
+      h: getH(h, colapsedHeight, rowHeight, colapsed),
+      minW,
+      maxW,
+      minH,
+      maxH,
+      containerWidth,
+      containerHeight,
+      margin,
+      containerPadding,
+      rowHeight,
+      maxRows,
+      colapsed
+    };
+  }, [
+    cols,
+    x,
+    y,
+    w,
+    h,
+    minW,
+    maxW,
+    minH,
+    maxH,
+    containerWidth,
+    containerHeight,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    colapsed,
+    colapsedHeight
+  ]);
+  const [currentState, setCurrentState] = useState({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const refState = useRef({
+    resizing: void 0,
+    dragging: void 0
+  });
+  const elementRef = useRef(null);
+  const getPositionParams = useCallback(
+    (preferContainerWidth, preferContainerHeight) => {
+      return {
+        cols: refProps.current.cols,
+        containerPadding: refProps.current.containerPadding,
+        containerWidth: preferContainerWidth || refProps.current.containerWidth,
+        containerHeight: preferContainerHeight || refProps.current.containerHeight,
+        containerMargin: refProps.current.margin,
+        maxRows: refProps.current.maxRows,
+        rowHeight: refProps.current.rowHeight
+      };
+    },
+    []
+  );
+  const createStyle = (pos2) => {
+    let newStyle;
+    if (useCSSTransforms) {
+      newStyle = setTransform(pos2);
+    } else {
+      newStyle = setTopLeft(pos2);
+      if (usePercentages) {
+        newStyle.left = perc(pos2.left / containerWidth);
+        newStyle.width = perc(pos2.width / containerWidth);
+      }
+    }
+    return newStyle;
+  };
+  const gridItemOnDragStart = useCallback((e, { node }) => {
+    if (!onDragStart)
+      return;
+    const newPosition = { top: 0, left: 0 };
+    const { offsetParent } = node;
+    if (!offsetParent)
+      return;
+    const parentRect = offsetParent.getBoundingClientRect();
+    const clientRect = node.getBoundingClientRect();
+    const cLeft = clientRect.left / transformScale;
+    const pLeft = parentRect.left / transformScale;
+    const cTop = clientRect.top / transformScale;
+    const pTop = parentRect.top / transformScale;
+    newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+    newPosition.top = cTop - pTop + offsetParent.scrollTop;
+    refState.current.dragging = newPosition;
+    setCurrentState((prev) => ({ ...prev, dragging: newPosition }));
+    const { x: newX, y: newY } = calcXY(
+      getPositionParams(),
+      newPosition.top,
+      newPosition.left,
+      refProps.current.w,
+      refProps.current.h
+    );
+    onDragStart(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const gridItemOnDrag = useCallback(
+    (e, { node, deltaX, deltaY }) => {
+      if (!onDrag)
+        return;
+      if (!refState.current.dragging) {
+        return;
+      }
+      let top = refState.current.dragging.top + deltaY;
+      let left = refState.current.dragging.left + deltaX;
+      const positionParams = getPositionParams();
+      if (isBounded) {
+        const { offsetParent } = node;
+        if (offsetParent) {
+          const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(
+            refProps.current.h,
+            refProps.current.rowHeight,
+            refProps.current.margin[1]
+          );
+          top = clamp(top, 0, bottomBoundary);
+          const colWidth = calcGridColWidth(positionParams);
+          const rightBoundary = containerWidth - calcGridItemWHPx(refProps.current.w, colWidth, refProps.current.margin[0]);
+          left = clamp(left, 0, rightBoundary);
+        }
+      }
+      const newPosition = { top, left };
+      refState.current.dragging = newPosition;
+      setCurrentState((prev) => ({ ...prev, dragging: newPosition }));
+      const { x: newX, y: newY } = calcXY(
+        positionParams,
+        top,
+        left,
+        refProps.current.w,
+        refProps.current.h
+      );
+      onDrag(i, newX, newY, {
+        e,
+        node,
+        newPosition
+      });
+    },
+    []
+  );
+  const gridItemOnDragStop = useCallback((e, { node }) => {
+    if (!onDragStop)
+      return;
+    if (!refState.current.dragging) {
+      return;
+    }
+    const { left, top } = refState.current.dragging;
+    const newPosition = { top, left };
+    refState.current.dragging = void 0;
+    setCurrentState((prev) => ({ ...prev, dragging: void 0 }));
+    const { x: newX, y: newY } = calcXY(
+      getPositionParams(),
+      top,
+      left,
+      refProps.current.w,
+      refProps.current.h
+    );
+    return onDragStop(i, newX, newY, {
+      e,
+      node,
+      newPosition
+    });
+  }, []);
+  const onResizeHandler = useCallback(
+    (e, { node, size }, handlerName) => {
+      const handler = props[handlerName];
+      if (!handler) {
+        return;
+      }
+      if (refProps.current.colapsed) {
+        return;
+      }
+      let { w: newW, h: newH } = calcWH(
+        getPositionParams(),
+        size.width,
+        size.height,
+        refProps.current.x,
+        refProps.current.y
+      );
+      const newMinW = Math.max(refProps.current.minW, 1);
+      const newMaxW = Math.min(refProps.current.maxW, refProps.current.cols - refProps.current.x);
+      newW = clamp(newW, newMinW, newMaxW);
+      newH = clamp(newH, refProps.current.minH, refProps.current.maxH);
+      const resizing = handlerName === "onResizeStop" ? void 0 : size;
+      setCurrentState((prev) => ({
+        ...prev,
+        resizing
+      }));
+      refState.current.resizing = resizing;
+      handler(i, newW, newH, { e, node, size });
+    },
+    []
+  );
+  const localOnResizeStop = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStop");
+  }, []);
+  const localOnResizeStart = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStart");
+  }, []);
+  const localFreeMoveOnClick = useCallback(() => {
+    if (!onFreeMoveClick)
+      return;
+    onFreeMoveClick(i);
+  }, []);
+  const mixinResizable = useCallback(
+    (child, position, positionParams) => {
+      const maxWidth = calcGridItemPosition(positionParams, 0, 0, cols - x, 0, maximize).width;
+      const mins = calcGridItemPosition(positionParams, 0, 0, minW, minH, maximize);
+      const maxes = calcGridItemPosition(positionParams, 0, 0, maxW, maxH, maximize);
+      const minConstraints = [mins.width, mins.height];
+      const maxConstraints = [
+        Math.min(maxes.width, maxWidth),
+        Math.min(maxes.height, Infinity)
+      ];
+      return /* @__PURE__ */ jsx(
+        Resizable,
+        {
+          draggableOpts: {
+            disabled: !isResizable || maximize !== "none" || colapsed
+          },
+          className: isResizable ? void 0 : "react-resizable-hide",
+          width: position.width,
+          height: position.height,
+          minConstraints,
+          maxConstraints,
+          onResizeStop: localOnResizeStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          transformScale,
+          resizeHandles,
+          handle: resizeHandle,
+          children: child
+        }
+      );
+    },
+    [
+      cols,
+      x,
+      minW,
+      minH,
+      maxW,
+      maxH,
+      isResizable,
+      transformScale,
+      resizeHandles,
+      resizeHandle,
+      maximize,
+      colapsed
+    ]
+  );
+  const mixinDraggable = useCallback(
+    (child) => {
+      return /* @__PURE__ */ jsx(
+        DraggableCore_1,
+        {
+          disabled: !isDraggable || maximize !== "none",
+          onStart: gridItemOnDragStart,
+          onDrag: gridItemOnDrag,
+          onStop: gridItemOnDragStop,
+          handle: draggableHandle,
+          cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+          scale: transformScale,
+          nodeRef: elementRef,
+          children: child
+        }
+      );
+    },
+    [isDraggable, draggableHandle, transformScale, draggableCancel, maximize]
+  );
+  const localOnResize = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResize");
+  }, []);
+  const positionParms = getPositionParams(containerWidth, containerHeight);
+  const pos = calcGridItemPosition(
+    positionParms,
+    x,
+    y,
+    w,
+    getH(h, colapsedHeight, rowHeight, colapsed),
+    maximize,
+    currentState
+  );
+  const classNameFinal = clsx(gridLayoutClasses.gridItemRoot, className, {
+    [`${gridLayoutClasses.gridItemType}-${type}`]: true,
+    [gridLayoutClasses.static]: props.static,
+    [gridLayoutClasses.resizing]: Boolean(currentState.resizing),
+    [gridLayoutClasses.dragging]: Boolean(currentState.dragging),
+    [gridLayoutClasses.maximizeMe]: maximize === "maximize_me",
+    [gridLayoutClasses.maximizeOther]: maximize === "maximize_other",
+    [gridLayoutClasses.colapsed]: colapsed,
+    [`${gridLayoutClasses.colapsed}-${colapsedHeight}`]: colapsed,
+    [gridLayoutClasses.gridItemFreeMove]: freeMove,
+    [gridLayoutClasses.resizeHide]: colapsed,
+    [gridLayoutClasses.invisible]: !visible,
+    [gridLayoutClasses.cssTransforms]: useCSSTransforms,
+    "react-draggable": isDraggable
+  });
+  const styleFinal = {
+    ...style,
+    ...createStyle(pos)
+  };
+  const memoLayouItemRender = useMemo(() => {
+    return /* @__PURE__ */ jsx(ComponentItemRender, { type, i });
+  }, [type, i]);
+  const gridItemRoot = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNameFinal,
+      ref: elementRef,
+      style: styleFinal,
+      role: "none",
+      onClick: localFreeMoveOnClick,
+      children: memoLayouItemRender
+    }
+  );
+  const gridItem = mixinDraggable(mixinResizable(gridItemRoot, pos, getPositionParams()));
+  return /* @__PURE__ */ jsx(Fragment, { children: gridItem });
+}
+const MemonizedGridItem = React__default.memo(GridItem, (prevProps, nextProps) => {
+  return deepEqual(prevProps, nextProps);
+});
+export {
+  MemonizedGridItem as M
+};

package/components/GridLayout/subcomponents/Responsive/{index.5b3e0521.js → index.094c1d09.js}

@@ -1,8 +1,8 @@
-import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, o as DEFAULT_COLAPSED_HEIGHT, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, i as DEFAULT_ROW_HEIGHT, z as noop, A as isEqualLayouts, G as GridLayout } from "../../index.65470f01.js";
+import { jsx } from "react/jsx-runtime";
+import { r as cloneLayoutItem, t as cloneLayout, u as compact, v as correctBounds, w as isEqualLayout, o as DEFAULT_COLAPSED_HEIGHT, x as DEFAULT_RESPONSIVE_BREAKPOINTS, m as DEFAULT_CONTAINER_PADDING, l as DEFAULT_MARGIN, y as DEFAULT_RESPONSIVE_COLS, i as DEFAULT_ROW_HEIGHT, z as noop, A as isEqualLayouts, G as GridLayout } from "../../index.b9c47a4c.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
 import { deepEqual } from "fast-equals";
-import { jsx } from "react/jsx-runtime";
 function getBreakpointFromWidth(breakpoints, width) {
   const sorted = sortBreakpoints(breakpoints);
   let matching = sorted[0];
@@ -169,7 +169,6 @@ function generateInitialState(props) {
     initialColapsedHeight,
     initialrowHeight
   );
-  console.log("initialLayout", initialLayout);
   if (defaultLayouts[newBreakpoint]) {
     if (isEqualLayout(defaultLayouts[newBreakpoint], initialLayout)) {
       fireOnLoadLayoutChange = false;
@@ -214,7 +213,9 @@ function Responsive(props) {
     rowHeight = DEFAULT_ROW_HEIGHT,
     ...other
   } = props;
-  const [currentState, setCurrentState] = useState(() => generateInitialState(props));
+  const [currentState, setCurrentState] = useState(
+    () => generateInitialState(props)
+  );
   const refState = useRef({
     layouts: {
       ...layouts,
@@ -229,7 +230,14 @@ function Responsive(props) {
     colapsedHeight: currentState.colapsedHeight,
     rowHeight: currentState.rowHeight
   });
-  const isFirstRenderFull = useFirstRender([containerWidth, containerHeight, layouts, breakpoint, breakpoints, cols]);
+  const isFirstRenderFull = useFirstRender([
+    containerWidth,
+    containerHeight,
+    layouts,
+    breakpoint,
+    breakpoints,
+    cols
+  ]);
   const isFirstRenderBreakpointLayout = useFirstRender([currentState.breakpointLayout]);
   useEffect(() => {
     if (!isFirstRenderBreakpointLayout) {
@@ -258,9 +266,7 @@ function Responsive(props) {
     const lastBreakpointCols = refState.current.currentBreakpointCols;
     const newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, containerWidth);
     const newCols = getColsFromBreakpoint(newBreakpoint, cols);
-    const newLayouts = {
-      ...layouts
-    };
+    const newLayouts = { ...layouts };
     let newContainerMargin = currentState.contaierMargin;
     let newContainerPadding = currentState.contaierPadding;
     if (newBreakpoint !== lastBreakpoint || newCols !== lastBreakpointCols || !deepEqual(cols, refState.current.cols) || !deepEqual(breakpoints, refState.current.breakpoints) || !isEqualLayouts(layouts, refState.current.layouts)) {
@@ -272,7 +278,17 @@ function Responsive(props) {
         console.error("useEffect casi imposible", lastBreakpoint, newLayouts);
         newLayouts[lastBreakpoint] = cloneLayout(currentState.breakpointLayout);
       }
-      const layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType, cols, newColapsedHeight, newRowHeight);
+      const layout = findOrGenerateResponsiveLayout(
+        newLayouts,
+        breakpoints,
+        newBreakpoint,
+        lastBreakpoint,
+        newCols,
+        compactType,
+        cols,
+        newColapsedHeight,
+        newRowHeight
+      );
       newLayouts[newBreakpoint] = layout;
       refState.current.layouts = newLayouts;
       refState.current.breakpoints = breakpoints;
@@ -298,28 +314,31 @@ function Responsive(props) {
       });
     }
   }, [containerWidth, containerHeight, layouts, breakpoint, breakpoints, cols]);
-  const localOnLayoutChange = useCallback((newlayout) => {
-    const newLayoutClone = cloneLayout(newlayout);
-    refState.current.layouts[refState.current.currentBreakpoint] = newLayoutClone;
-    setCurrentState((prev) => ({
-      ...prev,
-      breakpointLayout: newLayoutClone
-    }));
-  }, [onLayoutChange]);
-  return /* @__PURE__ */ jsx(GridLayout, {
-    rowHeight: currentState.rowHeight,
-    containerWidth,
-    containerHeight,
-    colapsedHeight: currentState.colapsedHeight,
-    layoutItemRender,
-    margin: currentState.contaierMargin,
-    containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
-    onLayoutChange: localOnLayoutChange,
-    layout: currentState.breakpointLayout,
-    cols: currentState.cols,
-    compactType,
-    ...other
-  });
+  const localOnLayoutChange = useCallback(
+    (newlayout) => {
+      const newLayoutClone = cloneLayout(newlayout);
+      refState.current.layouts[refState.current.currentBreakpoint] = newLayoutClone;
+      setCurrentState((prev) => ({ ...prev, breakpointLayout: newLayoutClone }));
+    },
+    [onLayoutChange]
+  );
+  return /* @__PURE__ */ jsx(
+    GridLayout,
+    {
+      rowHeight: currentState.rowHeight,
+      containerWidth,
+      containerHeight,
+      colapsedHeight: currentState.colapsedHeight,
+      layoutItemRender,
+      margin: currentState.contaierMargin,
+      containerPadding: getIndentationValue(containerPadding, currentState.breakpoint),
+      onLayoutChange: localOnLayoutChange,
+      layout: currentState.breakpointLayout,
+      cols: currentState.cols,
+      compactType,
+      ...other
+    }
+  );
 }
 export {
   Responsive as R,

package/components/GridLayout/subcomponents/SizeProvider/{index.0328ad0a.js → index.e1d2df80.js}

@@ -1,31 +1,31 @@
+import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import clsx from "clsx";
 import { throttle } from "lodash";
 import { useResizeObserver } from "@m4l/graphics";
-import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index.65470f01.js";
-import { jsx } from "react/jsx-runtime";
+import { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index.b9c47a4c.js";
 function withSizeProvider(ComposedComponent) {
   return (props) => {
-    const {
-      measureBeforeMount = true,
-      ...rest
-    } = props;
+    const { measureBeforeMount = true, ...rest } = props;
     const refMounted = useRef(false);
     const [currentState, setCurrentState] = useState({
       mounted: false,
       width: DEFAULT_CONTAINER_WIDTH,
       height: DEFAULT_CONTAINER_HEIGHT
     });
-    const onWindowResizeMemo = useMemo(() => () => {
-      const node = elementRef.current;
-      if (node instanceof HTMLElement && node.clientWidth) {
-        setCurrentState((prev) => ({
-          ...prev,
-          width: node.clientWidth,
-          height: node.offsetHeight
-        }));
-      }
-    }, []);
+    const onWindowResizeMemo = useMemo(
+      () => () => {
+        const node = elementRef.current;
+        if (node instanceof HTMLElement && node.clientWidth) {
+          setCurrentState((prev) => ({
+            ...prev,
+            width: node.clientWidth,
+            height: node.offsetHeight
+          }));
+        }
+      },
+      []
+    );
     const throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
       leading: false,
       trailing: true
@@ -35,26 +35,29 @@ function withSizeProvider(ComposedComponent) {
     }, []);
     const elementRef = useResizeObserver(onResize);
     useEffect(() => {
-      setCurrentState((prev) => ({
-        ...prev,
-        mounted: true
-      }));
+      setCurrentState((prev) => ({ ...prev, mounted: true }));
       refMounted.current = true;
       onWindowResizeMemo();
     }, []);
     if (measureBeforeMount && !currentState.mounted) {
-      return /* @__PURE__ */ jsx("div", {
-        className: clsx(props.className, COMPONENT_CLASS_NAME),
-        style: props.style,
-        ref: elementRef
-      });
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(props.className, COMPONENT_CLASS_NAME),
+          style: props.style,
+          ref: elementRef
+        }
+      );
     }
-    return /* @__PURE__ */ jsx(ComposedComponent, {
-      innerRef: elementRef,
-      containerWidth: currentState.width,
-      containerHeight: currentState.height,
-      ...rest
-    });
+    return /* @__PURE__ */ jsx(
+      ComposedComponent,
+      {
+        innerRef: elementRef,
+        containerWidth: currentState.width,
+        containerHeight: currentState.height,
+        ...rest
+      }
+    );
   };
 }
 export {

package/components/HelperText/{index.7d2afdb3.js → index.81c5d349.js}

@@ -1,10 +1,8 @@
+import { jsx } from "react/jsx-runtime";
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx } from "react/jsx-runtime";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-const HelperTextRoot = styled("div")(({
-  theme
-}) => ({
+import { T as Typography } from "../mui_extended/Typography/index.a1e774a2.js";
+const HelperTextRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LErrorLabel?.styleOverrides
 }));
 const componentName = "M4LHelperText";
@@ -20,7 +18,13 @@ function getHelperTextUtilityClass(slot) {
 }
 const useUtilityClasses = (ownerSate) => {
   const slots = {
-    root: ["root", ownerSate.variant === "info" && "variantInfo", ownerSate.variant === "success" && "variantSuccess", ownerSate.variant === "warning" && "variantWarning", ownerSate.variant === "error" && "variantError"]
+    root: [
+      "root",
+      ownerSate.variant === "info" && "variantInfo",
+      ownerSate.variant === "success" && "variantSuccess",
+      ownerSate.variant === "warning" && "variantWarning",
+      ownerSate.variant === "error" && "variantError"
+    ]
   };
   const composedClasses = unstable_composeClasses(slots, getHelperTextUtilityClass, {});
   return {
@@ -28,25 +32,12 @@ const useUtilityClasses = (ownerSate) => {
   };
 };
 const HelperText = (props) => {
-  const {
-    message = "",
-    skeletonWidth,
-    skeletongHeight,
-    variant
-  } = props;
+  const { message = "", skeletonWidth, skeletongHeight, variant } = props;
   const ownerSate = {
     variant
   };
   const classes = useUtilityClasses(ownerSate);
-  return /* @__PURE__ */ jsx(HelperTextRoot, {
-    className: classes.root,
-    children: /* @__PURE__ */ jsx(Typography, {
-      variant: "body",
-      skeletonWidth,
-      skeletongHeight,
-      children: message
-    })
-  });
+  return /* @__PURE__ */ jsx(HelperTextRoot, { className: classes.root, children: /* @__PURE__ */ jsx(Typography, { variant: "body", skeletonWidth, skeletongHeight, children: message }) });
 };
 export {
   HelperText as H,

package/components/HelperText/styles.d.ts

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