@m4l/components 1.0.1 → 1.0.3

package/components/AccountPopover/{index.efc74d5c.js → index.ec031003.js}

@@ -3,9 +3,11 @@ import { useEnvironment, useModuleDictionary, useNetwork } from "@m4l/core";
 import { useState, useEffect } from "react";
 import { generateUtilityClasses, generateUtilityClass, styled, useTheme, ButtonBase } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
-import { A as Avatar, P as Popover, C as CircularProgress } from "../../vendor.a1ce6777.js";
-import { I as Icon } from "../Icon/index.d5fed418.js";
+import { T as TEST_PROP_ID } from "../areas/constants.630a4f42.js";
+import { A as Avatar } from "../mui_extended/Avatar/index.3ba36655.js";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.967e70b7.js";
+import { P as Popover } from "../mui_extended/Popover/index.8e5ac765.js";
+import { I as Icon } from "../Icon/index.2e8ec5a1.js";
 import clsx from "clsx";
 const componentName = "M4LAccountPopover";
 generateUtilityClasses(

package/components/AppBar/{index.fc126a22.js → index.1499770b.js}

@@ -2,12 +2,12 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
+import { T as TEST_PROP_ID } from "../areas/constants.630a4f42.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as Image } from "../Image/index.36a3d440.js";
-import { T as Typography } from "../../vendor.a1ce6777.js";
-import { a as IconButton } from "../Icon/index.d5fed418.js";
+import { I as Image } from "../Image/index.0d32558e.js";
+import { T as Typography } from "../mui_extended/Typography/index.2a1c68f8.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.87f4726c.js";
 const AppBarRoot = styled("header")(({ theme }) => ({
   ...theme.components?.M4LAppBar?.styleOverrides
 }));

package/components/DragResizeWindow/{index.46b380e1.js → index.5e316291.js}

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect, useMemo } from "react";
-import { D as DraggableCore_1 } from "../../react-draggable.5331add7.js";
+import { D as DraggableCore_1 } from "../../react-draggable.2df3b71a.js";
 import clsx from "clsx";
 import { styled, generateUtilityClasses } from "@mui/material";
-import { M as MAP_ZINDEX_OVER_MAP, C as COMPONENT_CLASS_NAME, D as DEFAULT_TRANSFORM_SCALE, a as MAP_ZINDEX_OVER_MAP$1 } from "../areas/constants.5387d83e.js";
+import { M as MAP_ZINDEX_OVER_MAP, C as COMPONENT_CLASS_NAME, D as DEFAULT_TRANSFORM_SCALE, a as MAP_ZINDEX_OVER_MAP$1 } from "../areas/constants.630a4f42.js";
 import "@mui/base";
-import { R as Resizable } from "../../react-resizable.37bfb965.js";
+import { R as Resizable } from "../../react-resizable.c60f3843.js";
 const WrapperWindowRoot = styled("div")`
   position: absolute;
   left: 0px;

package/components/DynamicFilter/{index.d9168c12.js → index.05e15fb8.js}

@@ -1,23 +1,28 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useContext, createContext, useRef, useEffect, useState } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
-import { useMemo, useContext, createContext, useRef, useEffect, useState, useCallback } from "react";
 import { useStore, createStore } from "zustand";
 import { shallow } from "zustand/shallow";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import * as Yup from "yup";
-import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.7e74022a.js";
-import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD, d as DYNAMIC_FILTER_KEY_COMPONENT } from "../areas/constants.5387d83e.js";
-import { R as RHFAutocomplete, a as RHFTextField, b as RHFDateTime, c as RHFAutocompleteAsync, P as Popover, T as Typography, d as Actions, e as ActionCancel, f as ActionIntro } from "../../vendor.a1ce6777.js";
-import { useFormContext, useWatch } from "react-hook-form";
-import { i as isValidDate, c as containerQuery } from "../../utils/index.9ee4c99a.js";
+import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.19b25583.js";
+import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD, d as DYNAMIC_FILTER_KEY_COMPONENT } from "../areas/constants.630a4f42.js";
+import { R as RHFAutocomplete, A as Actions } from "../../vendor.3eadfa16.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.2ae1f130.js";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.31a0537d.js";
+import { i as isValidDate, c as containerQuery } from "../../utils/index.0660ee9c.js";
+import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.ea3ba7a7.js";
 import { styled } from "@mui/material/styles";
 import { Skeleton, alpha, MenuItem } from "@mui/material";
-import { I as Icon, a as IconButton } from "../Icon/index.d5fed418.js";
+import { I as Icon } from "../Icon/index.2e8ec5a1.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.87f4726c.js";
+import { P as Popover, a as PopoverMenuFields, b as PopoverFilter } from "../mui_extended/Popover/index.8e5ac765.js";
+import { T as Typography } from "../mui_extended/Typography/index.2a1c68f8.js";
 import { g as getPropDataTestId } from "../../test/getNameDataTestId.aee44365.js";
-import { S as ScrollBar } from "../ScrollBar/index.adf0eade.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.dc955a09.js";
+import { S as ScrollBar } from "../ScrollBar/index.9bfcc74f.js";
 function BooleanFilter() {
   const { getLabel } = useModuleDictionary();
   const operators = useMemo(
@@ -1588,62 +1593,6 @@ const PopoverHeaderActionsStyled = styled(Actions, {
   name: DYNAMIC_FILTER_KEY_COMPONENT,
   slot: DynamicFilterSlots.popoverFilterActions
 })(dynamicFilterStyles?.popoverFilterActions);
-function usePopoverMenuFields() {
-  const { getLabel } = useModuleDictionary();
-  const fnAnchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
-  const { showPopoverFilterForAdd, closePopoverMenuFields } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  function handleOpenPopUpClickItem(_event, field) {
-    if (fnAnchorEl) {
-      showPopoverFilterForAdd(fnAnchorEl(), field);
-    }
-  }
-  function handleClosePopover() {
-    closePopoverMenuFields(false);
-  }
-  function getItemLabel(field) {
-    return field.label ?? getLabel(field.dictionaryId);
-  }
-  return {
-    fnAnchorEl,
-    getItemLabel,
-    handleClosePopover,
-    handleOpenPopUpClickItem
-  };
-}
-function PopoverMenuFields(props) {
-  const { fields, selectFieldIndex } = props;
-  const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
-  return /* @__PURE__ */ jsx(
-    PopoverMenuStyled,
-    {
-      disableAutoFocus: true,
-      disableRestoreFocus: true,
-      arrowType: "top-left",
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      open: Boolean(fnAnchorEl),
-      onClose: handleClosePopover,
-      anchorEl: fnAnchorEl?.(),
-      ownerState: {},
-      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
-        PopoverMenuItemStyled,
-        {
-          dense: true,
-          selected: index === selectFieldIndex,
-          onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {},
-          children: [
-            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
-            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
-          ]
-        },
-        `menu_action_${getItemLabel(field)}`
-      ))
-    }
-  );
-}
 const InputFilter = () => {
   const {
     iconUrl,
@@ -1823,97 +1772,6 @@ function FilterActions() {
     )
   ] });
 }
-function usePopoverFilter() {
-  let anchorEl;
-  let field;
-  let formFilter;
-  let filterFormValue;
-  let popupValidationSchema;
-  const { getLabel } = useModuleDictionary();
-  const popoverFilterData = useDynamicFilterStore((state) => state.popoverFilterData);
-  const { hidePopoverFilter, addFilter, updateFilter, getNewId } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  const refPreviousPopoverFilterData = useRef(popoverFilterData);
-  const statusLoad = useMemo(() => {
-    let returnStatus;
-    if (popoverFilterData && refPreviousPopoverFilterData.current === void 0) {
-      returnStatus = "ready";
-    } else if (!popoverFilterData) {
-      returnStatus = "initial";
-    } else {
-      returnStatus = "reload_values_provider";
-    }
-    refPreviousPopoverFilterData.current = popoverFilterData;
-    return returnStatus;
-  }, [popoverFilterData]);
-  if (popoverFilterData?.openFor === "add") {
-    anchorEl = popoverFilterData?.fnAnchorEl();
-    field = popoverFilterData.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    filterFormValue = helperField.getFormValue(field, getLabel);
-    formFilter = {
-      field,
-      id: getNewId(),
-      isSet: true,
-      fixed: false,
-      ...filterFormValue
-    };
-  } else if (popoverFilterData) {
-    anchorEl = popoverFilterData?.fnAnchorEl();
-    field = popoverFilterData?.filter.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    filterFormValue = helperField.getFormValue(field, getLabel, popoverFilterData.filter);
-    formFilter = { ...popoverFilterData?.filter, ...filterFormValue };
-  } else {
-    filterFormValue = {};
-    field = {};
-    formFilter = {};
-    anchorEl = {};
-  }
-  const onClose = useCallback(() => {
-    hidePopoverFilter(false);
-  }, []);
-  const handleKeyDownPopper = useCallback((event) => {
-    if (event.key === "Escape") {
-      onClose();
-    }
-  }, []);
-  function handleClosePopover() {
-    hidePopoverFilter(false);
-  }
-  async function onSubmit(dataFieldValues) {
-    const filterField = { ...filterFormValue, ...dataFieldValues };
-    const newFilter = {
-      ...formFilter,
-      ...fieldFactory(filterField.fieldType).getFilterFromFormValue(filterField),
-      isSet: true
-    };
-    if (popoverFilterData?.openFor === "add") {
-      addFilter(newFilter);
-    } else {
-      updateFilter(newFilter);
-    }
-    hidePopoverFilter(false);
-  }
-  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? "");
-  return {
-    field,
-    labelField,
-    canRender: Boolean(popoverFilterData),
-    anchorEl,
-    handleKeyDownPopper,
-    handleClosePopover,
-    onSubmit,
-    onClose,
-    filterFormValue,
-    formFilter,
-    popupValidationSchema,
-    statusLoad
-  };
-}
 function DataTypeComponent(props) {
   const { formFilter, statusLoad } = props;
   const { setFocus } = useFormContext();
@@ -1923,60 +1781,6 @@ function DataTypeComponent(props) {
   }, [statusLoad]);
   return /* @__PURE__ */ jsx(Component, {});
 }
-function PopoverFilter() {
-  const {
-    field,
-    labelField,
-    anchorEl,
-    handleKeyDownPopper,
-    handleClosePopover,
-    onSubmit,
-    onClose,
-    filterFormValue,
-    formFilter,
-    popupValidationSchema,
-    statusLoad,
-    canRender
-  } = usePopoverFilter();
-  if (!canRender) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    PopoverStyled,
-    {
-      open: true,
-      disableRestoreFocus: true,
-      transitionDuration: 0,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      arrowType: "top-left",
-      anchorEl,
-      onKeyDown: handleKeyDownPopper,
-      onClose: handleClosePopover,
-      ownerState: {},
-      children: /* @__PURE__ */ jsxs(
-        RHFormProvider,
-        {
-          onSubmit,
-          values: filterFormValue,
-          validationSchema: popupValidationSchema,
-          statusLoad,
-          children: [
-            /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
-            ] }),
-            /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formFilter, statusLoad }) }),
-            /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
 function DynamicFilterBase() {
   const { ownerState, dataTestId } = useDynamicFilterBase();
   return /* @__PURE__ */ jsx(
@@ -2008,5 +1812,18 @@ function DynamicFilter(props) {
   return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
 }
 export {
-  DynamicFilter as D
+  DynamicFilter as D,
+  PopoverMenuStyled as P,
+  PopoverMenuItemStyled as a,
+  PopoverMenuItemIconStyled as b,
+  PopoverMenuItemLabelStyled as c,
+  PopoverStyled as d,
+  PopoverHeaderStyled as e,
+  fieldFactory as f,
+  PopoverHeaderIconStyled as g,
+  PopoverHeaderTitleStyled as h,
+  PopoverContainerFieldsStyled as i,
+  DataTypeComponent as j,
+  PopoverHeaderActionsStyled as k,
+  useDynamicFilterStore as u
 };

package/components/FieldLabel/{index.f9cdcc27.js → index.400a46e0.js}

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
 import { styled, generateUtilityClasses, Tooltip, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { e as componentName } from "../areas/constants.5387d83e.js";
-import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
+import { e as componentName } from "../areas/constants.630a4f42.js";
+import { g as getComponentUtilityClass } from "../../utils/index.0660ee9c.js";
 import clsx from "clsx";
-import { T as Typography } from "../../vendor.a1ce6777.js";
-import { I as Icon } from "../Icon/index.d5fed418.js";
+import { T as Typography } from "../mui_extended/Typography/index.2a1c68f8.js";
+import { I as Icon } from "../Icon/index.2e8ec5a1.js";
 const FieldLabelRoot = styled("label")(({ theme }) => ({
   ...theme.components?.M4LFieldLabel?.styleOverrides
 }));

package/components/GridLayout/{index.bb3b7769.js → index.7156fbc9.js}

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
-import { f as DEFAULT_ROW_HEIGHT, g as COMPONENT_CLASS_NAME, h as DEFAULT_COLS, i as DEFAULT_CONTAINER_PADDING, j as DEFAULT_MARGIN, k as DEFAULT_COLAPSED_HEIGHT, l as DEFAULT_CONTAINER_WIDTH, m as DEFAULT_CONTAINER_HEIGHT, n as DEFAULT_TRANSFORM_SCALE } from "../areas/constants.5387d83e.js";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.bb23f651.js";
+import { f as DEFAULT_ROW_HEIGHT, g as COMPONENT_CLASS_NAME, h as DEFAULT_COLS, i as DEFAULT_CONTAINER_PADDING, j as DEFAULT_MARGIN, k as DEFAULT_COLAPSED_HEIGHT, l as DEFAULT_CONTAINER_WIDTH, m as DEFAULT_CONTAINER_HEIGHT, n as DEFAULT_TRANSFORM_SCALE } from "../areas/constants.630a4f42.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.8946f18e.js";
 import { styled, alpha } from "@mui/material/styles";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";

package/components/GridLayout/subcomponents/Griditem/{index.bb23f651.js → index.8946f18e.js}

@@ -1,11 +1,11 @@
 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 { D as DraggableCore_1 } from "../../../../react-draggable.2df3b71a.js";
+import { R as Resizable } from "../../../../react-resizable.c60f3843.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.7156fbc9.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";
+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.630a4f42.js";
 function GridItem(props) {
   const {
     layoutItemRender: ComponentItemRender,

package/components/GridLayout/subcomponents/Responsive/{index.b8a2a121.js → index.3c68f0cb.js}

@@ -1,8 +1,8 @@
 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 { 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.7156fbc9.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 { 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.630a4f42.js";
 import { deepEqual } from "fast-equals";
 function getBreakpointFromWidth(breakpoints, width) {
   const sorted = sortBreakpoints(breakpoints);

package/components/GridLayout/subcomponents/SizeProvider/{index.094bc6b5.js → index.a5b2190d.js}

@@ -3,7 +3,7 @@ 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";
+import { l as DEFAULT_CONTAINER_WIDTH, m as DEFAULT_CONTAINER_HEIGHT, q as THROTTLE_RESIZE_TIMEOUT, g as COMPONENT_CLASS_NAME } from "../../../areas/constants.630a4f42.js";
 function withSizeProvider(ComposedComponent) {
   return (props) => {
     const { measureBeforeMount = true, ...rest } = props;

package/components/HamburgerMenu/{index.5997af31.js → index.d57bca4c.js}

@@ -3,10 +3,10 @@ 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 { r as componentName, H as HAMBURGER_MENU_PREFIX, T as TEST_PROP_ID } from "../areas/constants.630a4f42.js";
 import { useEnvironment } from "@m4l/core";
-import { S as SideBar } from "../SideBar/index.629ba840.js";
-import { a as IconButton } from "../Icon/index.d5fed418.js";
+import { S as SideBar } from "../SideBar/index.004a2de1.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.87f4726c.js";
 const HamburgerMenuRoot = styled("header")(({ theme }) => ({
   ...theme.components?.M4LHamburgerMenuCommercial?.styleOverrides
 }));

package/components/HelperText/{index.be949cdf.js → index.651a9b4b.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as Typography } from "../../vendor.a1ce6777.js";
+import { T as Typography } from "../mui_extended/Typography/index.2a1c68f8.js";
 const HelperTextRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LErrorLabel?.styleOverrides
 }));

package/components/Icon/index.2e8ec5a1.js

@@ -0,0 +1,209 @@
+import { jsx } from "react/jsx-runtime";
+import { Marker } from "react-leaflet";
+import L__default from "leaflet";
+import { s as componentName, I as ICON_PREFIX, T as TEST_PROP_ID, L as LABEL_BK_COLOR_DEFAULT, t as LABEL_COLOR_DEFAULT } from "../areas/constants.630a4f42.js";
+import { m as mapClasses } from "../maps/index.ba1ccfad.js";
+import clsx from "clsx";
+import { useEnvironment } from "@m4l/core";
+import { generateUtilityClasses, generateUtilityClass, styled as styled$1 } from "@mui/material";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.004a2de1.js";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const IconRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LIcon?.styleOverrides
+}));
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
+})(({ src, rotationAngle }) => ({
+  maskPosition: "center",
+  maskRepeat: "no-repeat",
+  maskSize: "cover",
+  WebkitMaskRepeat: "no-repeat",
+  mask: `url(${src})`,
+  WebkitMask: `url(${src})`,
+  WebkitMaskSize: "cover",
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  }
+}));
+generateUtilityClasses(componentName, [
+  "root",
+  "icon",
+  "variantSkeleton",
+  "sizeExtraSmall",
+  "sizeSmall",
+  "sizeMedium",
+  "sizeLarge",
+  "sizeExtraLarge",
+  "rotationAngle"
+]);
+function getIconClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    icon: [
+      "icon",
+      ownerState.size === "extraSmall" && "sizeExtraSmall",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.size === "large" && "sizeLarge",
+      ownerState.size === "extraLarge" && "sizeExtraLarge",
+      ownerState.rotationAngle ? "rotationAngle" : ""
+    ],
+    variantSkeleton: [
+      "variantSkeleton",
+      ownerState.size === "extraSmall" && "sizeExtraSmall",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.size === "large" && "sizeLarge",
+      ownerState.size === "extraLarge" && "sizeExtraLarge"
+    ]
+  };
+  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const getNameDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function Icon(props) {
+  const { src, size = "small", rotationAngle, className } = props;
+  const isDesktop = useResponsiveDesktop();
+  const ownerState = {
+    size: isDesktop ? size : "medium",
+    rotationAngle
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(
+    IconRoot,
+    {
+      className: clsx(classes.root, className),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
+      children: /* @__PURE__ */ jsx(
+        DivIcon,
+        {
+          className: classes.icon,
+          src,
+          rotationAngle,
+          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("icon") } : {}
+        }
+      )
+    }
+  );
+}
+const FeatureDivIconLabel = (props) => {
+  const {
+    label,
+    iconSrc,
+    iconScale: scale = 1,
+    iconRotate,
+    labelBkColor: bkColor = LABEL_BK_COLOR_DEFAULT,
+    labelColor: color = LABEL_COLOR_DEFAULT,
+    iconWidth = 24,
+    iconHeight = 24,
+    offsetLeftTop = [24, 0]
+  } = props;
+  let html = label ? `<div class="${mapClasses.featureLabel}" 
+                style="background-color:${bkColor}; color:${color};left:${offsetLeftTop[0]}px;top:${offsetLeftTop[1]}px;">${label}</div>` : "";
+  if (iconSrc) {
+    html = `<div class="${mapClasses.markerLayerIcon}" style="transform: rotate(${iconRotate}deg) scale(${scale}); transform-origin: center center;">
+                    <img src=${iconSrc}></img>
+                </div>` + html;
+  }
+  return L__default.divIcon({
+    className: clsx(mapClasses.markerLayerRoot, ""),
+    iconSize: [iconWidth, iconHeight],
+    html
+  });
+};
+const MarkerIconLabel = (props) => {
+  const {
+    position,
+    draggable = true,
+    iconSrc,
+    iconRotate,
+    iconScale: scale,
+    className,
+    label,
+    markerColor,
+    labelBkColor: bkColor,
+    labelColor: color,
+    iconWidth,
+    iconHeight,
+    offsetLeftTop,
+    ...properties
+  } = props;
+  const makerIcon = FeatureDivIconLabel({
+    iconSrc,
+    iconRotate,
+    iconScale: scale,
+    label,
+    iconWidth,
+    iconHeight,
+    labelBkColor: bkColor,
+    labelColor: color,
+    offsetLeftTop
+  });
+  return /* @__PURE__ */ jsx(
+    Marker,
+    {
+      position,
+      draggable,
+      riseOnHover: true,
+      icon: makerIcon,
+      ...properties
+    },
+    Math.random()
+  );
+};
+const ArrowIconRoot$1 = styled$1("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+function ArrowIcon$1(props) {
+  const { openState } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { classes } = useSideBar();
+  return /* @__PURE__ */ jsx(
+    ArrowIconRoot$1,
+    {
+      className: classes.arrowIconRoot,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1("arrowIconRoot") } : {},
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
+          rotationAngle: openState ? 90 : 0
+        }
+      )
+    }
+  );
+}
+const ArrowIconRoot = styled$1("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+function ArrowIcon(props) {
+  const { openState } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  return /* @__PURE__ */ jsx(ArrowIconRoot, { className: "", children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
+      rotationAngle: openState ? 270 : 90,
+      size: "medium"
+    }
+  ) });
+}
+export {
+  ArrowIcon$1 as A,
+  Icon as I,
+  MarkerIconLabel as M,
+  ArrowIcon as a
+};