@m4l/components 0.2.36 → 1.0.0

package/components/GridLayout/{index.b9c47a4c.js → index.bb3b7769.js}

@@ -1,23 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
 import clsx from "clsx";
-import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.69bc14e5.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.5387d83e.js";
+import { M as MemonizedGridItem } from "./subcomponents/Griditem/index.bb23f651.js";
 import { styled, alpha } from "@mui/material/styles";
-import { r as react_resizable_css } from "../../react-resizable.af1f31c1.js";
 import { generateUtilityClasses } from "@mui/material";
 import "@mui/base";
-const COMPONENT_CLASS_NAME = "M4LGridLayout";
-const DEFAULT_COLS = 12;
-const DEFAULT_ROW_HEIGHT = 20;
-const DEFAULT_CONTAINER_WIDTH = 1280;
-const DEFAULT_CONTAINER_HEIGHT = 480;
-const DEFAULT_RESPONSIVE_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 };
-const DEFAULT_RESPONSIVE_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
-const DEFAULT_CONTAINER_PADDING = [10, 10];
-const DEFAULT_MARGIN = [10, 10];
-const DEFAULT_TRANSFORM_SCALE = 1;
-const DEFAULT_COLAPSED_HEIGHT = 35;
-const THROTTLE_RESIZE_TIMEOUT = 200;
 const noop = () => {
 };
 function bottom(layout, colapsedHeight, rowHeight) {
@@ -502,6 +490,7 @@ const gridLayoutClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "dragging",
   "static"
 ]);
+const react_resizable_css = {};
 const GridLayoutRoot = styled("div")`
   overflow: auto;
   position: relative;
@@ -543,7 +532,7 @@ const GridLayoutRoot = styled("div")`
   }
 
   .${gridLayoutClasses.gridItemRoot}.${gridLayoutClasses.gridItemPlaceholder} {
-    background: ${(props) => props.theme.palette.state.toneOp};
+    background: ${(props) => props.theme.vars.palette.state?.toneOp};
     opacity: 0.5;
     transition-duration: 100ms;
     z-index: 3000;
@@ -565,7 +554,7 @@ const GridLayoutRoot = styled("div")`
       height: 10px;
       min-width: 10px;
       min-height: 10px;
-      background-color: ${(props) => alpha(props.theme.palette.text.primary, 0.3)};
+      background-color: ${(props) => alpha(props.theme.colorSchemes.finalTheme.palette.text.primary, 0.3)};
     }
   }
 
@@ -582,7 +571,7 @@ const GridLayoutRoot = styled("div")`
 
   .react-resizable-hide > .react-resizable-handle {
     display: none;
-    border-color: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-color: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
   }
 
   .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-sw {
@@ -590,16 +579,16 @@ const GridLayoutRoot = styled("div")`
     left: 3px;
     cursor: sw-resize;
     transform: rotate(90deg);
-    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
     border-bottom-right-radius: 15%;
   }
   .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-se {
     bottom: 3px;
     right: 3px;
     cursor: se-resize;
-    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
     border-bottom-right-radius: 15%;
   }
   .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-nw {
@@ -607,8 +596,8 @@ const GridLayoutRoot = styled("div")`
     left: 3px;
     cursor: nw-resize;
     transform: rotate(180deg);
-    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
     border-bottom-right-radius: 15%;
   }
   .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-ne {
@@ -616,8 +605,8 @@ const GridLayoutRoot = styled("div")`
     right: 3px;
     cursor: ne-resize;
     transform: rotate(270deg);
-    border-right: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
-    border-bottom: ${(props) => `2px solid ${props.theme.palette.text.disabled}`};
+    border-right: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
+    border-bottom: ${(props) => `2px solid ${props.theme.vars.palette.text.disabled}`};
     border-bottom-right-radius: 15%;
   }
   .${gridLayoutClasses.gridItemRoot} > .react-resizable-handle.react-resizable-handle-w,
@@ -1189,11 +1178,7 @@ function GridLayout(props) {
   );
 }
 export {
-  isEqualLayouts as A,
-  COMPONENT_CLASS_NAME as C,
-  DEFAULT_COLS as D,
   GridLayout as G,
-  THROTTLE_RESIZE_TIMEOUT as T,
   calcGridItemWHPx as a,
   calcGridColWidth as b,
   calcXY as c,
@@ -1202,22 +1187,14 @@ export {
   calcGridItemPosition as f,
   getH as g,
   gridLayoutClasses as h,
-  DEFAULT_ROW_HEIGHT as i,
-  DEFAULT_CONTAINER_WIDTH as j,
-  DEFAULT_CONTAINER_HEIGHT as k,
-  DEFAULT_MARGIN as l,
-  DEFAULT_CONTAINER_PADDING as m,
-  DEFAULT_TRANSFORM_SCALE as n,
-  DEFAULT_COLAPSED_HEIGHT as o,
+  setTopLeft as i,
+  cloneLayoutItem as j,
+  cloneLayout as k,
+  compact as l,
+  correctBounds as m,
+  isEqualLayout as n,
+  noop as o,
   perc as p,
-  setTopLeft as q,
-  cloneLayoutItem as r,
-  setTransform as s,
-  cloneLayout as t,
-  compact as u,
-  correctBounds as v,
-  isEqualLayout as w,
-  DEFAULT_RESPONSIVE_BREAKPOINTS as x,
-  DEFAULT_RESPONSIVE_COLS as y,
-  noop as z
+  isEqualLayouts as q,
+  setTransform as s
 };

package/components/GridLayout/subcomponents/Griditem/{index.69bc14e5.js → index.bb23f651.js}

@@ -1,10 +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.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 { 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,

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

@@ -1,7 +1,8 @@
 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 { 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";
 function getBreakpointFromWidth(breakpoints, width) {
   const sorted = sortBreakpoints(breakpoints);

package/components/GridLayout/subcomponents/SizeProvider/{index.e1d2df80.js → index.094bc6b5.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 { j as DEFAULT_CONTAINER_WIDTH, k as DEFAULT_CONTAINER_HEIGHT, T as THROTTLE_RESIZE_TIMEOUT, C as COMPONENT_CLASS_NAME } from "../../index.b9c47a4c.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.5387d83e.js";
 function withSizeProvider(ComposedComponent) {
   return (props) => {
     const { measureBeforeMount = true, ...rest } = props;

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

@@ -1,16 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { styled } from "@mui/material/";
+import { styled } from "@mui/material/styles";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+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.5d1f4a23.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.b0ee4965.js";
+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
 }));
-const componentName = "M4LHamburgerMenuCommercial";
 generateUtilityClasses(componentName, ["root", "ImageLogo"]);
 function getHamburgerMenuComercialClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -25,7 +24,6 @@ const useHamburgerMenuComercialUtilityClasses = () => {
     ...composedClasses
   };
 };
-const HAMBURGER_MENU_PREFIX = "M4LHamburgerMenu";
 const getNameDataTestId = (KEY) => {
   return `${HAMBURGER_MENU_PREFIX}-${KEY}`;
 };

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

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

package/components/HelperText/styles.d.ts

@@ -1,2 +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>, {}>;
+export declare const HelperTextRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Icon/index.d5fed418.js

@@ -0,0 +1,420 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, Tooltip, IconButton as IconButton$1, Box, styled as styled$1, SvgIcon } from "@mui/material";
+import clsx from "clsx";
+import { unstable_composeClasses } from "@mui/base";
+import { s as componentName, I as ICON_PREFIX, T as TEST_PROP_ID, t as componentName$1, L as LABEL_BK_COLOR_DEFAULT, u as LABEL_COLOR_DEFAULT } from "../areas/constants.5387d83e.js";
+import { w as withToggle } from "../../hocs/withToggle/index.548aeace.js";
+import { useMemo, useState } from "react";
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { Marker } from "react-leaflet";
+import L__default from "leaflet";
+import { m as mapClasses } from "../maps/index.8ec46ce4.js";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.629ba840.js";
+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$1 = (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$1(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 SkeletonIconButton = (props) => {
+  const { classes } = props;
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "rectangular",
+      className: classes.skeleton,
+      "data-testid": "SkeletonIconButton"
+    }
+  );
+};
+const IconButtonRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LIconButton?.styleOverrides
+}));
+const iconButtonClasses = generateUtilityClasses(componentName$1, [
+  "root",
+  "skeleton",
+  "sizemSall",
+  "sizeMedium",
+  "variantPrimary",
+  "variantSecondary",
+  "variantLine",
+  "isFocus",
+  "isDisabled",
+  "togglePressed",
+  "toggleNotPressed"
+]);
+function getIconButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary",
+      ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary",
+      ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine",
+      ownerState.isFocus && !ownerState.isDisabled && "isFocus",
+      ownerState.isDisabled && "isDisabled"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const IconButton = (props) => {
+  const {
+    src,
+    tooltip,
+    size = "small",
+    dictionaryTooltipId,
+    rotationAngle,
+    variant = "line",
+    disabled,
+    className,
+    onClick,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (disabled) {
+      return void 0;
+    }
+    if (tooltip && tooltip !== "") {
+      return tooltip;
+    }
+    if (dictionaryTooltipId && getLabel) {
+      return getLabel(dictionaryTooltipId);
+    }
+    return void 0;
+  }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
+  const [isfocus] = useState(false);
+  const ownerState = {
+    variant,
+    size: isDesktop ? size : "medium",
+    isSkeleton,
+    isFocus: disabled ? false : isfocus,
+    isDisabled: disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(IconButtonRoot, { className: clsx(classes.root, className), "data-testid": "IconButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, { children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      ...other,
+      onClick,
+      disableRipple: true,
+      disabled,
+      children: /* @__PURE__ */ jsx(Icon, { src, size })
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      ...other,
+      onClick,
+      disableRipple: true,
+      disabled,
+      children: /* @__PURE__ */ jsx(Icon, { src, size: isDesktop ? size : "medium", rotationAngle })
+    }
+  ) }) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes }) });
+};
+function BoxIcon({ src, sx }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        width: 20,
+        height: 20,
+        display: "inline-block",
+        bgcolor: "currentColor",
+        mask: `url(${src}) no-repeat center / contain`,
+        WebkitMask: `url(${src}) no-repeat center / contain`,
+        ...sx
+      }
+    }
+  );
+}
+const ArrowStyle = styled$1("span")(({ arrowType, theme }) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.vars.palette.state.borderDens}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.vars.palette.background.default
+    },
+    ...arrowType === "top-left" && { ...topStyle, left: 20 },
+    ...arrowType === "top-center" && { ...topStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "top-right" && { ...topStyle, right: 20 },
+    ...arrowType === "bottom-left" && { ...bottomStyle, left: 20 },
+    ...arrowType === "bottom-center" && { ...bottomStyle, left: 0, right: 0, margin: "auto" },
+    ...arrowType === "bottom-right" && { ...bottomStyle, right: 20 },
+    ...arrowType === "left-top" && { ...leftStyle, top: 20 },
+    ...arrowType === "left-center" && { ...leftStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "left-bottom" && { ...leftStyle, bottom: 20 },
+    ...arrowType === "right-top" && { ...rightStyle, top: 20 },
+    ...arrowType === "right-center" && { ...rightStyle, top: 0, bottom: 0, margin: "auto" },
+    ...arrowType === "right-bottom" && { ...rightStyle, bottom: 20 }
+  };
+});
+const ToggleAbleIconButton = ({
+  onToggle,
+  isToggled,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onToggle,
+      ...props,
+      className: clsx(
+        onToggle ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed
+      )
+    }
+  );
+};
+const ToggleIconButton = withToggle(ToggleAbleIconButton);
+function CheckboxIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" }) });
+}
+function CheckboxCheckedIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" }) });
+}
+function CheckboxIndeterminateIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
+}
+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,
+  BoxIcon as B,
+  CheckboxIcon as C,
+  Icon as I,
+  MarkerIconLabel as M,
+  ToggleIconButton as T,
+  IconButton as a,
+  ArrowStyle as b,
+  CheckboxCheckedIcon as c,
+  CheckboxIndeterminateIcon as d,
+  ArrowIcon as e
+};

package/components/Icon/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DivIconProps } from './types';
-export declare const IconRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & DivIconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & DivIconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;