@m4l/components 0.2.35 → 1.0.0

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.bb23f651.js

@@ -0,0 +1,398 @@
+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.5331add7.js";
+import { R as Resizable } from "../../../../react-resizable.37bfb965.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, p as perc, s as setTransform, i as setTopLeft } from "../../index.bb3b7769.js";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+import { h as DEFAULT_COLS, f as DEFAULT_ROW_HEIGHT, l as DEFAULT_CONTAINER_WIDTH, m as DEFAULT_CONTAINER_HEIGHT, j as DEFAULT_MARGIN, i as DEFAULT_CONTAINER_PADDING, n as DEFAULT_TRANSFORM_SCALE, k as DEFAULT_COLAPSED_HEIGHT } from "../../../areas/constants.5387d83e.js";
+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.b8a2a121.js}

@@ -1,8 +1,9 @@
-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 { j as cloneLayoutItem, k as cloneLayout, l as compact, m as correctBounds, n as isEqualLayout, o as noop, q as isEqualLayouts, G as GridLayout } from "../../index.bb3b7769.js";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useFirstRender } from "@m4l/graphics";
+import { k as DEFAULT_COLAPSED_HEIGHT, o as DEFAULT_RESPONSIVE_BREAKPOINTS, i as DEFAULT_CONTAINER_PADDING, j as DEFAULT_MARGIN, p as DEFAULT_RESPONSIVE_COLS, f as DEFAULT_ROW_HEIGHT } from "../../../areas/constants.5387d83e.js";
 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 +170,6 @@ function generateInitialState(props) {
     initialColapsedHeight,
     initialrowHeight
   );
-  console.log("initialLayout", initialLayout);
   if (defaultLayouts[newBreakpoint]) {
     if (isEqualLayout(defaultLayouts[newBreakpoint], initialLayout)) {
       fireOnLoadLayoutChange = false;
@@ -214,7 +214,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 +231,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 +267,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 +279,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 +315,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.094bc6b5.js

@@ -0,0 +1,65 @@
+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 { l as DEFAULT_CONTAINER_WIDTH, m as DEFAULT_CONTAINER_HEIGHT, q as THROTTLE_RESIZE_TIMEOUT, g as COMPONENT_CLASS_NAME } from "../../../areas/constants.5387d83e.js";
+function withSizeProvider(ComposedComponent) {
+  return (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 throttleResize = throttle(onWindowResizeMemo, THROTTLE_RESIZE_TIMEOUT, {
+      leading: false,
+      trailing: true
+    });
+    const onResize = useCallback((_target) => {
+      throttleResize();
+    }, []);
+    const elementRef = useResizeObserver(onResize);
+    useEffect(() => {
+      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(
+      ComposedComponent,
+      {
+        innerRef: elementRef,
+        containerWidth: currentState.width,
+        containerHeight: currentState.height,
+        ...rest
+      }
+    );
+  };
+}
+export {
+  withSizeProvider as w
+};

package/components/HamburgerMenu/index.5997af31.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { r as componentName, H as HAMBURGER_MENU_PREFIX, T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
+import { useEnvironment } from "@m4l/core";
+import { S as SideBar } from "../SideBar/index.629ba840.js";
+import { a as IconButton } from "../Icon/index.d5fed418.js";
+const HamburgerMenuRoot = styled("header")(({ theme }) => ({
+  ...theme.components?.M4LHamburgerMenuCommercial?.styleOverrides
+}));
+generateUtilityClasses(componentName, ["root", "ImageLogo"]);
+function getHamburgerMenuComercialClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useHamburgerMenuComercialUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    ImageLogo: ["ImageLogo"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getHamburgerMenuComercialClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const getNameDataTestId = (KEY) => {
+  return `${HAMBURGER_MENU_PREFIX}-${KEY}`;
+};
+const HamburgerMenu = (props) => {
+  const { data, itemClick } = props;
+  const [visible, setVisible] = useState(false);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const handlerOnVisible = () => {
+    setVisible((val) => !val);
+  };
+  const handleCollapseToggle = () => {
+    if (visible) {
+      setVisible(false);
+    }
+  };
+  const classes = useHamburgerMenuComercialUtilityClasses();
+  const handlerItemActive = (item) => {
+    return window.location.pathname === item.path;
+  };
+  return /* @__PURE__ */ jsxs(
+    HamburgerMenuRoot,
+    {
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            src: `${host_static_assets}/${environment_assets}/frontend/web_comercial/menu.svg`,
+            className: classes.ImageLogo,
+            variant: "secondary",
+            onClick: () => handlerOnVisible()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SideBar,
+          {
+            menuData: data,
+            visible,
+            onClick: (item) => itemClick(item),
+            isItemActive: handlerItemActive,
+            onToggleCollapse: handleCollapseToggle,
+            onToggleVisible: handlerOnVisible,
+            collapsed: false,
+            companyLogoSmallUrl: "",
+            companyName: "",
+            variantStyle: "variantComercial"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HamburgerMenu as H
+};