@m4l/components 4.1.8 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "4.1.8",
+  "version": "4.2.0",
   "license": "UNLICENSED",
   "lint-staged": {
     "src/**/*.{js,ts,jsx,tsx}": "eslint --max-warnings=0 --fix",
@@ -16,17 +16,8 @@
     "@mui/lab": "5.0.0-alpha.89",
     "@mui/material": "5.15.19",
     "@mui/x-date-pickers": "6.11.1",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/addon-onboarding": "8.2.9",
-    "@storybook/blocks": "8.2.9",
-    "@storybook/react": "8.2.9",
-    "@storybook/react-vite": "8.2.9",
-    "@storybook/test": "8.2.9",
     "chart.js": "^4.4.0",
     "chartjs-chart-error-bars": "^4.3.3",
-    "esbuild": "^0.20.1",
     "date-fns": "^2.29.2",
     "eslint-plugin-storybook": "0.8.0",
     "fast-equals": "^5.0.1",

package/styles/Icon.styles-45ANn544.js

@@ -0,0 +1,69 @@
+import { getColorState } from "@m4l/styles";
+const iconStyles = {
+  root: ({ theme, ownerState }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "fit-content",
+    transition: "transform 0.5s ease-in-out",
+    borderRadius: ownerState.skeleton ? "4px" : void 0,
+    backgroundColor: ownerState.skeleton ? `${theme.vars.palette.skeleton.default} !important` : void 0,
+    padding: ownerState.securityArea ? "8px" : "0px"
+  }),
+  tooltip: () => ({}),
+  icon: ({ theme, ownerState }) => ({
+    maskPosition: "center",
+    maskRepeat: "no-repeat",
+    maskSize: "cover",
+    WebkitMaskRepeat: "no-repeat",
+    mask: `url(${ownerState.src})`,
+    WebkitMask: `url(${ownerState.src})`,
+    WebkitMaskSize: "cover",
+    ...ownerState.rotationAngle && {
+      transform: `rotate(${ownerState.rotationAngle}deg)`
+    },
+    backgroundColor: ownerState.skeleton ? void 0 : ownerState.color ? getColorState(ownerState.color, theme.vars.palette) : theme.vars?.palette.text.primary,
+    ...ownerState.size === "large" && {
+      ...theme.generalSettings.isMobile ? {
+        width: 28,
+        height: 28,
+        minWidth: 28,
+        minHeight: 28
+      } : {
+        width: 20,
+        height: 20,
+        minWidth: 20,
+        minHeight: 20
+      }
+    },
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: 24,
+        height: 24,
+        minWidth: 24,
+        minHeight: 24
+      } : {
+        width: 16,
+        height: 16,
+        minWidth: 16,
+        minHeight: 16
+      }
+    },
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: 20,
+        height: 20,
+        minWidth: 20,
+        minHeight: 20
+      } : {
+        width: 14,
+        height: 14,
+        minWidth: 14,
+        minHeight: 14
+      }
+    }
+  })
+};
+export {
+  iconStyles as i
+};

package/styles/Icon.styles.d.ts

@@ -0,0 +1,2 @@
+import { IconStyles } from '../components/Icon/types';
+export declare const iconStyles: IconStyles;

package/styles/{ToastContainer.styles-Ch0TgR5A.js → ToastContainer.styles-DyoHGY_x.js}

@@ -143,15 +143,7 @@ const toastStyles = {
     gap: "4px"
   },
   messageIconRoot: {},
-  messageIcon: ({ theme, ownerState }) => ({
-    "&.M4LIcon-root": {
-      height: "24px",
-      width: "24px",
-      "& > .M4LIcon-icon": {
-        backgroundColor: ownerState?.type === "info" ? theme.vars.palette.info.main : ownerState?.type === "success" ? theme.vars.palette.success.main : ownerState?.type === "warning" ? theme.vars.palette.warning.main : ownerState?.type === "error" ? theme.vars.palette.error.main : theme.vars.palette.info.main
-      }
-    }
-  }),
+  messageIcon: () => ({}),
   messageTitle: ({ theme }) => ({
     flex: 1,
     paddingLeft: "4px",

package/styles/Tooltip.styles-tydNwMWc.js

@@ -0,0 +1,62 @@
+const tooltipStyles = {
+  root: {},
+  popper: {
+    padding: "8px 12px"
+  },
+  tooltip: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    background: theme.vars.palette.background.default,
+    borderRadius: "2px",
+    boxShadow: theme.vars.customShadows.z3,
+    width: "fit-content",
+    color: theme.vars.palette.text.primary,
+    ...theme.colorSchemes.finalTheme.typography.body,
+    letterSpacing: "0.4px",
+    minHeight: "32px",
+    height: "32px",
+    padding: "8px 12px",
+    ...ownerState.size === "large" && {
+      ...theme.generalSettings.isMobile ? {
+        minHeight: "36px !important",
+        height: "36px  !important",
+        fontSize: "16px !important",
+        lineHeight: "28px  !important"
+      } : {
+        minHeight: "28px !important",
+        height: "28px  !important",
+        fontSize: "14px  !important",
+        lineHeight: "24px  !important"
+      }
+    },
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        minHeight: "32px !important",
+        height: "32px  !important",
+        fontSize: "14px  !important",
+        lineHeight: "17px !important"
+      } : {
+        minHeight: "24px !important",
+        height: "24px  !important",
+        fontSize: "11px !important",
+        lineHeight: "13px !important"
+      }
+    },
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        minHeight: "28px !important",
+        height: "28px  !important",
+        fontSize: "13px !important",
+        lineHeight: "16px !important"
+      } : {
+        minHeight: "20px !important",
+        height: "20px  !important",
+        fontSize: "10px !important",
+        lineHeight: "12px !important"
+      }
+    }
+  })
+};
+export {
+  tooltipStyles as t
+};

package/styles/Tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+import type { TooltipStyles } from '../components/mui_extended/Tooltip/types';
+export declare const tooltipStyles: TooltipStyles;

package/components/Icon/Icon-_wceDYwV.js

@@ -1,35 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { I as IconRoot, D as DivIcon } from "./styles-CYoc5wsG.js";
-import { u as useUtilityClasses } from "./classes/index-CpBgKs2U.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
-import { g as getNameDataTestId } from "./tests/utils-BUwmUA2N.js";
-import clsx from "clsx";
-import { useResponsiveDesktop } from "@m4l/graphics";
-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") } : {}
-        }
-      )
-    }
-  );
-}
-export {
-  Icon as I
-};

package/components/Icon/classes/constants-BzUJxCsS.js

@@ -1,4 +0,0 @@
-const componentName = "M4LIcon";
-export {
-  componentName as c
-};

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

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

package/components/Icon/classes/index-CpBgKs2U.js

@@ -1,48 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants-BzUJxCsS.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "icon",
-  "variantSkeleton",
-  /* states or variants of elements */
-  "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
-  };
-};
-export {
-  useUtilityClasses as u
-};

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

@@ -1,9 +0,0 @@
-import { IconClassesType } from './types';
-import { OwnerState } from '../types';
-export declare const IconClasses: IconClassesType;
-export declare function getIconClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: (ownerState: OwnerState) => {
-    root: string;
-    icon: string;
-    variantSkeleton: string;
-};

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

@@ -1,12 +0,0 @@
-export interface IconClassesType {
-    root: string;
-    icon: string;
-    variantSkeleton: string;
-    sizeExtraSmall: string;
-    sizeSmall: string;
-    sizeMedium: string;
-    sizeLarge: string;
-    sizeExtraLarge: string;
-    rotationAngle: string;
-}
-export declare type IconClassesKey = keyof IconClassesType;

package/components/Icon/styles-CYoc5wsG.js

@@ -1,26 +0,0 @@
-import { styled } from "@mui/material/styles";
-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)`
-  }
-  /*  ...(angleTransition &&
-        rotationAngle && {
-            transition: `transform ${angleTransition}s ease-in-out`,
-        }), */
-}));
-export {
-  DivIcon as D,
-  IconRoot as I
-};

package/components/Icon/styles.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { DivIconProps } from './types';
-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>, {}>;

package/components/Icon/tests/constants-C7QTHvgZ.js

@@ -1,4 +0,0 @@
-const ICON_PREFIX = "Icon";
-export {
-  ICON_PREFIX as I
-};

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

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

package/components/Icon/tests/utils-BUwmUA2N.js

@@ -1,7 +0,0 @@
-import { I as ICON_PREFIX } from "./constants-C7QTHvgZ.js";
-const getNameDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-export {
-  getNameDataTestId as g
-};

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

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

package/components/mui_extended/Tooltip/Tooltip-B88QZsCW.js

@@ -1,24 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme, Tooltip as Tooltip$1 } from "@mui/material";
-import clsx from "clsx";
-import { t as tooltipUtilityClasses } from "./classes/index-B5UQq91B.js";
-const Tooltip = (props) => {
-  const { children, className, ...others } = props;
-  const classes = tooltipUtilityClasses();
-  const theme = useTheme();
-  const stylesoverrides = theme.components?.M4LTooltip?.styleOverrides;
-  return /* @__PURE__ */ jsx(
-    Tooltip$1,
-    {
-      PopperProps: {
-        sx: { ...stylesoverrides },
-        className: clsx(classes.root, className)
-      },
-      ...others,
-      children
-    }
-  );
-};
-export {
-  Tooltip as T
-};

package/components/mui_extended/Tooltip/classes/constants-BpV-2w5k.js

@@ -1,4 +0,0 @@
-const componentName = "M4LTooltip";
-export {
-  componentName as c
-};

package/components/mui_extended/Tooltip/classes/constants.d.ts

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

package/components/mui_extended/Tooltip/classes/index-B5UQq91B.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants-BpV-2w5k.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getTooltipUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const tooltipUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTooltipUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  tooltipUtilityClasses as t
-};

package/components/mui_extended/Tooltip/classes/index.d.ts

@@ -1,6 +0,0 @@
-import { TooltipClassesType } from './types';
-export declare const TooltipClasses: TooltipClassesType;
-export declare function getTooltipUtilityClass(slot: string): string;
-export declare const tooltipUtilityClasses: () => {
-    root: string;
-};

package/components/mui_extended/Tooltip/classes/types.d.ts

@@ -1,6 +0,0 @@
-import { tooltipUtilityClasses } from '.';
-export interface TooltipClassesType {
-    root: string;
-}
-export declare type TooltipClassesKey = keyof TooltipClassesType;
-export declare type Classes = ReturnType<typeof tooltipUtilityClasses>;

package/components/LanguagePopover/{LanguagePopover-D84zk1E6.js → LanguagePopover-YmHJMFsY.js}

@@ -3,13 +3,13 @@ import { useState, useEffect } from "react";
 import { Stack, MenuItem } from "@mui/material";
 import { I as Image } from "../Image/Image-BjqOt3pz.js";
 import { useLocales } from "@m4l/graphics";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index-Bnnti_G6.js";
 import { L as LanguagePopoverRoot, C as ContainerMenuItems, a as ContainerProgress, b as ContainerImage, c as LabelItem } from "./styles-s7-3z7wM.js";
 import { I as ImageButton } from "../mui_extended/ImageButton/ImageButton-BhT8454W.js";
 import { useEnvironment, useNetwork } from "@m4l/core";
 import { u as useUtilityClasses } from "./classes/index-BK-vZgR3.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock-CF-669v-.js";
 import { g as getNameDataTestId } from "./tests/utils-Df2OFfOB.js";
-import { C as CircularProgress } from "../mui_extended/CircularProgress/index-Bnnti_G6.js";
 import { P as Popover } from "../mui_extended/Popover/Popover-B9KxhzxZ.js";
 function LanguagePopover(props) {
   const { testingProps } = props;

package/components/MFLoader/subcomponents/ProggessLoadingMF/{index-D8tU4EJM.js → index-B-TsTYTl.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { a as mfLoaderClasses } from "../../classes/index-C4jyh98a.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index-CGgW8jq2.js";
+import { a as mfLoaderClasses } from "../../classes/index-C4jyh98a.js";
 const ProggessLoadingMF = (props) => {
   try {
     const { loadingProgress } = props;

package/components/formatters/DistanceToNowFormatter/{DistanceToNowFormatter-D-KlZCzq.js → DistanceToNowFormatter-Cn7lTVkU.js}

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { D as DTNFRootStyled } from "./slots/DistanceToNowFormatterSlots-DMdMz6HD.js";
+import { u as useInterval } from "../../../hooks/useInterval/index-U86sMsvn.js";
 import { D as DTNF_DICCTIONARY } from "./dictionary-BsdfX7sF.js";
 import { f as formatDistanceToNow } from "../../../utils/formatDistanceToNow/formatDistanteToNow-DQkWpUUH.js";
-import { u as useInterval } from "../../../hooks/useInterval/index-U86sMsvn.js";
 const DistanceToNowFormatter = (props) => {
   const { presentationTime = "present", date, delay } = props;
   const { getLabel } = useModuleDictionary();