@m4l/components 0.1.62 → 0.1.63

package/components/DynamicFilter/{index.10f901c6.js → index.442bda79.js}

@@ -1,63 +1,64 @@
 import { shallow } from "zustand/shallow";
-import { S as ScrollBar } from "../ScrollBar/index.b77feabd.js";
+import { S as ScrollBar } from "../ScrollBar/index.bbe48f4d.js";
 import { useContext, useMemo, useEffect, createContext, useRef, createElement, useState, useCallback } from "react";
 import clsx from "clsx";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
 import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { I as IconButton } from "../mui_extended/IconButton/index.afa201a7.js";
-import { T as TEST_PROP_ID } from "../../vendor.29969396.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.be9c2ce5.js";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.1affe51a.js";
-import { P as Popover } from "../mui_extended/Popover/index.8ed52492.js";
-import { I as Icon } from "../Icon/index.b29ff2d9.js";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.3dc6e2f5.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.6eb24c0b.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.3f75a205.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.ec654122.js";
+import { P as Popover } from "../mui_extended/Popover/index.260aae81.js";
+import { I as Icon } from "../Icon/index.0f9b360e.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.a7511399.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.433cd345.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.2eb2c1e1.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.0d138cb3.js";
 import { useFormContext, useWatch } from "react-hook-form";
 import "@mui/material/Button";
-import "../mui_extended/Button/index.8406ed5b.js";
-import "../../contexts/ModalContext/index.b4114066.js";
-import "../../react-draggable.6471b07e.js";
-import "../ModalDialog/index.dc7ebe06.js";
-import "../Resizeable/index.04fa8de5.js";
-import "../modal/WindowConfirm.42ec4dcd.js";
-import "../modal/WindowBase.7828e042.js";
-import "../areas/components/index.9f62ca8e.js";
-import "../areas/components/AreasAdmin/index.645bd2c7.js";
+import "../mui_extended/Button/index.d9e0ae2e.js";
+import "../../contexts/ModalContext/index.ae8041f3.js";
+import "../../react-draggable.1aa81436.js";
+import "../ModalDialog/index.3efe049b.js";
+import "../Resizeable/index.b5d42efb.js";
+import "../modal/WindowConfirm.c1339cf8.js";
+import "../modal/WindowBase.59f50553.js";
+import "../areas/components/index.eace295a.js";
+import "../areas/components/AreasAdmin/index.51e28f63.js";
 import { useStore, createStore } from "zustand";
-import "../areas/contexts/AreasContext/index.f3d6e728.js";
-import "../areas/components/AreasContainer/index.3e74c849.js";
+import "../areas/contexts/AreasContext/index.0792a8d1.js";
+import "../areas/components/AreasContainer/index.1e5e6e91.js";
 import "react-grid-layout/css/styles.css";
-import "../../react-resizable.b620abed.js";
-import "../areas/contexts/index.3623b460.js";
+import "../../react-resizable.e86cb01e.js";
+import "../areas/contexts/index.2a915acf.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../mui_extended/Accordion/index.725a10af.js";
+import "../mui_extended/Typography/index.41b60a6b.js";
+import "../mui_extended/Accordion/index.b7487e37.js";
 import "../mui_extended/Avatar/index.fe06afd7.js";
 import "react-router-dom";
-import "../Image/index.aa24e982.js";
-import "../mui_extended/Pager/index.d4d1a1a0.js";
+import "../Image/index.1a9c0327.js";
+import "../mui_extended/Pager/index.9e123670.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
-import "../mui_extended/Typography/index.be3a279a.js";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.b6ae791a.js";
+import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.e199226a.js";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.bb6cb5df.js";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.083e23c1.js";
 import "lodash/debounce";
-import "../hook-form/RHFCheckbox/index.6e80f572.js";
-import { styled, alpha as alpha$1 } from "@mui/material/styles";
-import "../ErrorLabel/index.e140421c.js";
+import "../hook-form/RHFAutocompleteAsync/index.ba751be9.js";
+import "../hook-form/RHFCheckbox/index.c19393b1.js";
+import "../HelperText/index.3c07ca2a.js";
 import "@mui/x-date-pickers";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.6c129ce4.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.d3544fa3.js";
-import "../hook-form/RHFPeriod/index.c4944f9c.js";
-import "../Period/index.796b3af4.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.97485ff2.js";
+import "../hook-form/RHFPeriod/index.c0a80aeb.js";
+import "../Period/index.99feb99e.js";
 import "lodash/isString";
 import "react-dropzone";
-import "../hook-form/RHFUpload/index.7fdff30f.js";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
+import "../hook-form/RHFUpload/index.798eb11d.js";
 import * as Yup from "yup";
 import "@hookform/resolvers/yup";
 const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
@@ -1417,6 +1418,7 @@ function FilterButton() {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  console.log("FilterButton", isSkeleton);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
       className: classesFilterButton,
@@ -1429,7 +1431,6 @@ function FilterButton() {
   }
   return /* @__PURE__ */ jsx(IconButton, {
     className: classesFilterButton,
-    bgColor: "primary.main",
     dictionaryTooltip: getDynamicFilterDictionary(isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid),
     onClick: fireOnChangeFilters,
     "aria-label": "settings",

package/components/DynamicFilter/subcomponents/ApplyedFilters/styles.d.ts

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

package/components/DynamicFilter/subcomponents/ApplyedFilters/subcomponents/ApplyedFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/ClearFilters/styles.d.ts

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

package/components/DynamicFilter/subcomponents/FilterButton/styles.d.ts

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

package/components/DynamicFilter/subcomponents/InnerForHooks/styles.d.ts

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

package/components/DynamicFilter/subcomponents/InputFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/PopoverFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/fieldstypes/BooleanFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/fieldstypes/DateTimeFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/fieldstypes/NumberFilter/styles.d.ts

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

package/components/DynamicFilter/subcomponents/fieldstypes/StringFilter/styles.d.ts

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

package/components/HelperText/index.3c07ca2a.js

@@ -0,0 +1,70 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.0f9b360e.js";
+import { jsx } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.be9c2ce5.js";
+import "../mui_extended/Accordion/index.b7487e37.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.d9e0ae2e.js";
+import "clsx";
+import "../Image/index.1a9c0327.js";
+import "@mui/lab";
+import { T as Typography } from "../mui_extended/Typography/index.41b60a6b.js";
+import "../mui_extended/Popover/index.260aae81.js";
+import "../mui_extended/MenuActions/index.ec654122.js";
+import "../mui_extended/Pager/index.9e123670.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import { unstable_composeClasses } from "@mui/base";
+const HelperTextRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LErrorLabel?.styleOverrides
+}));
+const componentName = "M4LHelperText";
+const errorLabelClasses = generateUtilityClasses(componentName, [
+  "root",
+  "variantInfo",
+  "variantSuccess",
+  "variantWarning",
+  "variantError"
+]);
+function getHelperTextUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerSate) => {
+  const slots = {
+    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 {
+    ...composedClasses
+  };
+};
+const HelperText = (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
+    })
+  });
+};
+export {
+  HelperText as H,
+  errorLabelClasses as e
+};

package/components/HelperText/index.d.ts

@@ -0,0 +1,10 @@
+import { HelperTextProps } from './types';
+import { HelperTextClassesType } from './utils/Clases/types';
+/**
+ * Provee de un texto que posee los estilos gráficos de error.
+ * @param props
+ * @returns
+ */
+export { errorLabelClasses } from './utils/Clases/index';
+export declare type ErrorLabelClassesKey = HelperTextClassesType;
+export declare const HelperText: (props: HelperTextProps) => JSX.Element;

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>, {}>;

package/components/HelperText/types.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from '../mui_extended/Typography/types';
+declare type Variants = 'info' | 'success' | 'warning' | 'error';
+export interface HelperTextProps extends Pick<TypographyProps, 'skeletonWidth' | 'skeletongHeight'> {
+    message: string | undefined;
+    variant?: Variants;
+}
+export declare type OwnerState = Pick<HelperTextProps, 'variant'>;
+export {};

package/components/HelperText/utils/Clases/constant.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LHelperText";

package/components/HelperText/utils/Clases/index.d.ts

@@ -0,0 +1,7 @@
+import { HelperTextClassesType } from './types';
+import { OwnerState } from '../../types';
+export declare const errorLabelClasses: HelperTextClassesType;
+export declare function getHelperTextUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerSate: OwnerState) => {
+    root: string;
+};

package/components/HelperText/utils/Clases/types.d.ts

@@ -0,0 +1,7 @@
+export interface HelperTextClassesType {
+    root: string;
+    variantInfo: string;
+    variantSuccess: string;
+    variantWarning: string;
+    variantError: string;
+}

package/components/Icon/classes/index.d.ts

@@ -5,5 +5,5 @@ export declare function getIconClassesUtilityClass(slot: string): string;
 export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     icon: string;
-    placeHolder: string;
+    variantSkeleton: string;
 };

package/components/Icon/classes/types.d.ts

@@ -1,17 +1,12 @@
 export interface IconClassesType {
     root: string;
     icon: string;
-    placeHolder: string;
+    variantSkeleton: string;
     sizeExtraSmall: string;
     sizeSmall: string;
-    sizeNormal: string;
+    sizeMedium: string;
     sizeLarge: string;
-    colorInfo: string;
-    colorWarning: string;
-    colorError: string;
-    colorActive: string;
-    colorSelected: string;
-    colorDisabled: string;
+    sizeExtraLarge: string;
     rotationAngle: string;
 }
 export declare type IconClassesKey = keyof IconClassesType;

package/components/Icon/index.0f9b360e.js

@@ -0,0 +1,200 @@
+import { m } from "framer-motion";
+import { forwardRef, useState, useEffect } from "react";
+import { IconButton, Box, styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.011880b6.js";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { unstable_composeClasses } from "@mui/base";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+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('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMaskSize: "cover",
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  }
+}));
+const componentName = "M4LIcon";
+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 ICON_PREFIX = "Icon";
+const getNameDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function Icon(props) {
+  const {
+    src,
+    size = "small",
+    rotationAngle,
+    testingProps
+  } = props;
+  const [resource, setResource] = useState(testingProps?.resource || void 0);
+  useEffect(() => {
+    let mounted = true;
+    (async function networkOperation() {
+      await fetch(src).then((response) => {
+        return response.text() || "";
+      }).then((xml) => {
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
+        if (mounted) {
+          setResource(window.btoa(xml));
+        }
+      }).catch((_err) => {
+      });
+    })();
+    return function clenUp() {
+      mounted = false;
+    };
+  }, [src]);
+  const ownerState = {
+    size,
+    rotationAngle
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(IconRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      className: classes.icon,
+      src: resource,
+      rotationAngle,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("icon")
+      } : {}
+    }) : /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rectangular",
+      className: classes.variantSkeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("variantSkeleton")
+      } : {}
+    })
+  });
+}
+const ArrowIconRoot = styled("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+function ArrowIcon(props) {
+  const {
+    openState
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    classes
+  } = useSideBar();
+  return /* @__PURE__ */ jsx(ArrowIconRoot, {
+    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
+    })
+  });
+}
+export {
+  ArrowIcon as A,
+  Icon as I,
+  IconButtonAnimate as a
+};

package/components/Icon/styles.d.ts

@@ -0,0 +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>, {}>;

package/components/Icon/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "Icon";

package/components/Icon/tests/utils.d.ts

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

package/components/Icon/types.d.ts

@@ -1,16 +1,15 @@
-export declare type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+export declare type SizeIcon = 'small' | 'extraSmall' | 'medium' | 'large' | 'extraLarge';
 export interface TestingProps {
     resource: any;
 }
 export interface IconProps {
     src: string;
-    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
     size?: SizeIcon;
     rotationAngle?: number;
-    angleTransition?: number;
     testingProps?: TestingProps;
 }
+export declare type DivIconProps = Pick<IconProps, 'src' | 'rotationAngle'>;
 export declare type WrapperPlaceHolderProps = {
     size: string;
 };
-export declare type OwnerState = Pick<IconProps, 'bgColor' | 'size' | 'rotationAngle'>;
+export declare type OwnerState = Pick<IconProps, 'size' | 'rotationAngle'>;