@m4l/components 0.1.62 → 0.1.63

package/components/Image/{index.aa24e982.js → index.1a9c0327.js}

@@ -1,11 +1,16 @@
 import { useBase, useModuleSkeleton, BaseProvider } from "@m4l/core";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { styled, Skeleton as Skeleton$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 function isIntersectionObserverAvailable() {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window;
 }
+const IMAGE_PREFIX = "Image";
+const getNameDataTestId = (KEY) => {
+  return `${IMAGE_PREFIX}-${KEY}`;
+};
 const checkIntersections = (entries) => {
   entries.forEach((entry) => {
     if (entry.isIntersecting) {
@@ -27,6 +32,9 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     setIsVisible,
     threshold
   } = props;
+  const {
+    classes
+  } = useBase();
   const [observer] = useState(getObserver(threshold));
   const intersectComponentRef = useRef(null);
   useImperativeHandle(ref, () => intersectComponentRef.current);
@@ -52,9 +60,12 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     styleProp.minHeight = height;
   }
   return /* @__PURE__ */ jsx("span", {
+    className: classes.span,
     ref: intersectComponentRef,
     style: styleProp,
-    "data-testid": "spanObserved"
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("span")
+    } : {}
   });
 });
 BasicIntersectComponent.displayName = "IntersectComponent";
@@ -70,17 +81,14 @@ function LazyLoadComponent(props) {
   const {
     classes
   } = useBase();
-  if (isVisible) {
-    return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
-      className: classes.lazyLoad,
-      "data-testid": "WrapperLazyLoadComponent",
-      children
-    });
-  }
   return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
     className: classes.lazyLoad,
-    "data-testid": "WrapperLazyLoadComponent",
-    children: /* @__PURE__ */ jsx(BasicIntersectComponent, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("lazyLoad")
+    } : {},
+    children: isVisible ? /* @__PURE__ */ jsx(Fragment, {
+      children
+    }) : /* @__PURE__ */ jsx(BasicIntersectComponent, {
       useIntersectionObserver,
       setIsVisible,
       ...other
@@ -88,41 +96,10 @@ function LazyLoadComponent(props) {
   });
 }
 const ImageRoot = styled("div", {
-  shouldForwardProp: (props) => props !== "width" && props !== "height" && props !== "imageClasses"
+  shouldForwardProp: (props) => props !== "imageClasses"
 })(({
-  theme,
-  height,
-  width,
-  imageClasses: imageClasses2
+  theme
 }) => ({
-  position: "relative",
-  width,
-  height,
-  minHeight: height,
-  minWidth: width,
-  [`&.${imageClasses2.root}`]: {
-    [`.${imageClasses2.img}`]: {
-      opacity: 0,
-      position: "absolute",
-      inset: "0",
-      width: "100%",
-      height: "100%"
-    },
-    [`.${imageClasses2.loaded} .${imageClasses2.img}`]: {
-      opacity: 1,
-      transition: "opacity .5s"
-    },
-    [`.${imageClasses2.skeletonImage}, .${imageClasses2.skeletonCircle}`]: {
-      opacity: 1,
-      width,
-      height
-    },
-    [`.${imageClasses2.loaded} .${imageClasses2.skeletonImage},
-          .${imageClasses2.loaded} .${imageClasses2.skeletonCircle}`]: {
-      opacity: 0,
-      transition: "opacity .3s"
-    }
-  },
   ...theme.components?.M4LImage?.styleOverrides
 }));
 const WrapperSkeletonImage = styled("div")(() => ({
@@ -136,14 +113,22 @@ const WrapperSkeletonImage = styled("div")(() => ({
 }));
 const Skeleton = (props) => {
   const {
-    skeletonVariant
+    skeletonVariant,
+    width,
+    height
   } = props;
   const {
     classes
   } = useBase();
   return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
     className: classes.skeletonImage,
-    "data-testid": "skeletonImage",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("skeletonImage")
+    } : {},
+    style: {
+      width,
+      height
+    },
     children: /* @__PURE__ */ jsx(Skeleton$1, {
       variant: "rectangular",
       width: "100%",
@@ -154,7 +139,9 @@ const Skeleton = (props) => {
     width: "100%",
     height: "100%",
     className: classes.skeletonCircle,
-    "data-testid": "skeletonCircle"
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("skeletonCircle")
+    } : {}
   });
 };
 const componentName = "M4LImage";
@@ -162,6 +149,7 @@ const imageClasses = generateUtilityClasses(componentName, [
   "root",
   "lazyLoad",
   "img",
+  "span",
   "skeletonImage",
   "skeletonCircle",
   "loaded"
@@ -183,17 +171,80 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
+const ratioOptions = {
+  "1.168:1": {
+    width: 1.168,
+    height: 1
+  },
+  "16:9": {
+    width: 16,
+    height: 9
+  },
+  "1:1": {
+    width: 1,
+    height: 1
+  },
+  "1:1.168": {
+    width: 1,
+    height: 1.168
+  },
+  "2:1": {
+    width: 2,
+    height: 1
+  },
+  "2:3": {
+    width: 2,
+    height: 3
+  },
+  "3:1": {
+    width: 3,
+    height: 1
+  },
+  "3:2": {
+    width: 3,
+    height: 2
+  },
+  "3:4": {
+    width: 3,
+    height: 4
+  },
+  "4:3": {
+    width: 4,
+    height: 3
+  },
+  "5:2": {
+    width: 5,
+    height: 2
+  }
+};
+const getRatioValues = (ratio) => {
+  const numType = ratioOptions[ratio];
+  const numRef = numType.width / numType.height;
+  if (numRef >= 1) {
+    return {
+      width: "100%",
+      height: `${Math.trunc(numRef * 100)}%`
+    };
+  } else {
+    return {
+      width: `${Math.trunc(numRef * 100)}%`,
+      height: "100%"
+    };
+  }
+};
 function Image(props) {
   const {
     src,
     alt,
     useIntersectionObserver = true,
     threshold = 100,
+    skeletonVariant = "image",
+    testingProps,
     width,
     height,
-    skeletonVariant = "image",
-    testingProps
+    ratio = "1:1"
   } = props;
+  const ratioImage = getRatioValues(ratio);
   const isSKeleton = useModuleSkeleton();
   const [statusLoad, setStatusLoad] = useState(testingProps?.statusLoad || "initial");
   useEffect(() => {
@@ -219,25 +270,42 @@ function Image(props) {
   const classes = useUtilityClasses(ownerState);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(ImageRoot, {
-      width,
-      height,
       className: classes.root,
       imageClasses,
-      "data-testid": "ImageRoot",
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("root")
+      } : {},
+      ...width && height ? {
+        style: {
+          width,
+          height
+        }
+      } : {
+        sx: {
+          width: "100%",
+          height: "100%"
+        }
+      },
       children: /* @__PURE__ */ jsxs(LazyLoadComponent, {
-        width,
-        height,
+        width: "100%",
+        height: "100%",
         useIntersectionObserver,
         threshold,
         testingProps,
         children: [statusLoad !== "removed" ? /* @__PURE__ */ jsx(Skeleton, {
-          skeletonVariant
+          skeletonVariant,
+          width: !width ? "100%" : ratioImage.width,
+          height: !height ? "100%" : ratioImage.height
         }) : null, /* @__PURE__ */ jsx("img", {
           alt,
           src,
           onLoad,
           className: classes.img,
-          "data-testid": "img"
+          width: !width ? "100%" : ratioImage.width,
+          height: !height ? "100%" : ratioImage.height,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId("img")
+          } : {}
         })]
       })
     });

package/components/Image/styles.d.ts

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

package/components/Image/subcomponents/LazyLoadComponent/styles.d.ts

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

package/components/Image/subcomponents/Skeleton/styles.d.ts

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

package/components/Image/subcomponents/Skeleton/types.d.ts

@@ -1,4 +1,6 @@
 import { SkeletonVariant } from '../../types';
 export interface SkeletonProps {
     skeletonVariant: SkeletonVariant;
+    width: string;
+    height: string;
 }

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

@@ -0,0 +1 @@
+export declare const IMAGE_PREFIX = "Image";

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

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

package/components/Image/types.d.ts

@@ -13,10 +13,10 @@ export interface TestingProps {
     isVisible?: boolean;
 }
 export interface BaseImageProps {
-    width: string;
+    width?: string;
     height?: string;
 }
-export interface WrapperImageProps extends BaseImageProps {
+export interface WrapperImageProps {
     imageClasses: ImageClassesType;
 }
 export interface IntersectComponentProps extends BaseImageProps {
@@ -33,6 +33,11 @@ export interface LazyLoadComponentProps extends Pick<ImageProps, 'testingProps'>
     children: ReactNode;
 }
 export declare type SkeletonVariant = 'image' | 'circle';
+export declare type RatioOptions = '1.168:1' | '16:9' | '1:1' | '1:1.168' | '2:1' | '2:3' | '3:1' | '3:2' | '3:4' | '4:3' | '5:2';
+export interface ratioValues {
+    width: number;
+    height: number;
+}
 export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible' | 'threshold' | 'useIntersectionObserver'> {
     src: string;
     alt?: string;
@@ -40,6 +45,7 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     useIntersectionObserver?: boolean;
     skeletonVariant?: SkeletonVariant;
     testingProps?: TestingProps;
+    ratio?: RatioOptions;
 }
 export declare type StatusLoad = 'initial' | 'loaded' | 'removed';
 export interface OwnerState {
@@ -48,3 +54,4 @@ export interface OwnerState {
 export interface BaseProviderIamgeType {
     classes: any;
 }
+export declare const ratioOptions: Record<RatioOptions, ratioValues>;

package/components/Image/utils/classes/types.d.ts

@@ -2,6 +2,7 @@ export interface ImageClassesType {
     root: string;
     lazyLoad: string;
     img: string;
+    span: string;
     skeletonImage: string;
     skeletonCircle: string;
     loaded: string;

package/components/Image/utils/getRatioValues.d.ts

@@ -0,0 +1,5 @@
+import { RatioOptions } from "../types";
+export declare const getRatioValues: (ratio: RatioOptions) => {
+    width: string;
+    height: string;
+};

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

@@ -3,5 +3,6 @@ export interface LanguagePopoverClassesType {
     containerItems: string;
     containerProgress: string;
     labelItem: string;
+    imageButton: string;
 }
 export declare type LanguagePopoverClassesKey = keyof LanguagePopoverClassesType;

package/components/LanguagePopover/{index.df9b47a6.js → index.68de7176.js}

@@ -1,31 +1,32 @@
 import { useState, useEffect } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.aa24e982.js";
+import { I as Image } from "../Image/index.1a9c0327.js";
 import { useLocales } from "@m4l/graphics";
 import { useEnvironment, useNetwork } from "@m4l/core";
-import "../Icon/index.b29ff2d9.js";
-import "@mui/material/styles";
+import "../Icon/index.0f9b360e.js";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import "../mui_extended/IconButton/index.afa201a7.js";
-import "../mui_extended/Accordion/index.725a10af.js";
+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 { I as ImageButton } from "../mui_extended/Button/index.8406ed5b.js";
+import { I as ImageButton } from "../mui_extended/Button/index.d9e0ae2e.js";
+import "clsx";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
 import "@mui/lab";
-import { P as Popover } from "../mui_extended/Popover/index.8ed52492.js";
-import "../mui_extended/MenuActions/index.1affe51a.js";
-import "../mui_extended/Pager/index.d4d1a1a0.js";
+import "../mui_extended/Typography/index.41b60a6b.js";
+import { P as Popover } from "../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 "../mui_extended/Typography/index.be3a279a.js";
 import { unstable_composeClasses } from "@mui/base";
 const LanguagePopoverRoot = styled("div")(({
   theme
 }) => ({
   ...theme.components?.M4LanguagePopover?.styleOverrides
 }));
-const LabelItem = styled("span")(({
+const LabelItem = styled("div")(({
   theme
 }) => ({
   marginLeft: theme.spacing(1)
@@ -40,12 +41,19 @@ const ContainerMenuItems = styled("div")(() => ({
   display: "flex",
   flexDirection: "column"
 }));
+const ContainerImage = styled("div")(() => ({
+  display: "flex",
+  gap: "4px",
+  width: "16px",
+  height: "16px"
+}));
 const componentName = "M4LanguagePopover";
 generateUtilityClasses(componentName, [
   "root",
   "containerItems",
   "containerProgress",
-  "labelItem"
+  "labelItem",
+  "imageButton"
 ]);
 function getM4LanguagePopoverClassesUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -62,6 +70,10 @@ const useUtilityClasses = () => {
     ...composedClasses
   };
 };
+const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";
+const getNameDataTestId = (KEY) => {
+  return `${LANGUAGEPOPOVER_PREFIX}-${KEY}`;
+};
 function LanguagePopover(props) {
   const {
     testingProps
@@ -99,7 +111,7 @@ function LanguagePopover(props) {
       }
     }).then((response) => {
       if (mounted) {
-        setAllLocales(response.data);
+        !testingProps && setAllLocales(response.data);
       }
     }).finally(() => {
       setLoading(false);
@@ -111,12 +123,15 @@ function LanguagePopover(props) {
   const classes = useUtilityClasses();
   return /* @__PURE__ */ jsxs(LanguagePopoverRoot, {
     className: classes.root,
-    "data-testid": "LanguagePopoverRoot",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
     children: [/* @__PURE__ */ jsx(ImageButton, {
+      className: classes.imageButton,
       onClick: handleOpen,
       sx: {
-        width: 40,
-        height: 40,
+        width: 28,
+        height: 28,
         ...open && {
           bgcolor: "action.selected"
         }
@@ -126,7 +141,9 @@ function LanguagePopover(props) {
       width: "24px",
       height: "24px",
       skeletonVariant: "circle",
-      "data-testid": "ImageButton"
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("imageButton")
+      } : {}
     }), /* @__PURE__ */ jsx(Popover, {
       arrowType: "top-right",
       open: Boolean(open),
@@ -149,10 +166,14 @@ function LanguagePopover(props) {
       },
       children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
         className: classes.containerItems,
-        "data-testid": "ContainerMenuItems",
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId("containerItems")
+        } : {},
         children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
           className: classes.containerProgress,
-          "data-testid": "ContainerProgress",
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId("containerProgress")
+          } : {},
           children: /* @__PURE__ */ jsx(CircularProgress, {
             size: "20px"
           })
@@ -164,14 +185,17 @@ function LanguagePopover(props) {
               onChangeLocale(option);
               handleClose();
             },
-            children: [/* @__PURE__ */ jsx(Image, {
-              alt: option.name,
-              src: option.url_icon,
-              width: "24px",
-              height: "24px"
+            children: [/* @__PURE__ */ jsx(ContainerImage, {
+              children: /* @__PURE__ */ jsx(Image, {
+                alt: option.name,
+                src: option.url_icon,
+                ratio: "1:1"
+              })
             }), /* @__PURE__ */ jsx(LabelItem, {
               className: classes.labelItem,
-              "data-testid": "LabelItem",
+              ...process.env.NODE_ENV !== "production" ? {
+                [TEST_PROP_ID]: getNameDataTestId("labelItem")
+              } : {},
               children: option.name
             })]
           }, option.lang || option.script || option.region))

package/components/LanguagePopover/styles.d.ts

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

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

@@ -0,0 +1 @@
+export declare const LANGUAGEPOPOVER_PREFIX = "LanguagePopover";

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

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

package/components/ModalDialog/{index.dc7ebe06.js → index.3efe049b.js}

@@ -1,12 +1,12 @@
 import { Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.6471b07e.js";
-import { u as useModal } from "../../hooks/useModal/index.77b3415c.js";
+import { c as cjs } from "../../react-draggable.1aa81436.js";
+import { u as useModal } from "../../hooks/useModal/index.5c159ed2.js";
 import { styled } from "@mui/material/styles";
-import { b as getThemeVariantColor } from "../../utils/index.b6ae791a.js";
-import { R as ResizeableWindow } from "../Resizeable/index.04fa8de5.js";
+import { a as getThemeVariantColor } from "../../utils/index.e199226a.js";
+import { R as ResizeableWindow } from "../Resizeable/index.b5d42efb.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.6eb24c0b.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.433cd345.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",

package/components/NavLink/NavLink.d.ts

@@ -0,0 +1,2 @@
+import { NavLinkProps } from './types';
+export declare const NavLink: (props: NavLinkProps) => JSX.Element;

package/components/NavLink/classes/constant.d.ts

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

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

@@ -0,0 +1,6 @@
+import { NavLinkClassesType } from './types';
+export declare const navLinkClasses: NavLinkClassesType;
+export declare function getNavLinkClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+};

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

@@ -0,0 +1,4 @@
+export interface NavLinkClassesType {
+    root: string;
+}
+export declare type NavLinkClassesKey = keyof NavLinkClassesType;

package/components/NavLink/index.ae9f1cc9.js

@@ -0,0 +1,74 @@
+import { NavLink as NavLink$1 } from "react-router-dom";
+import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.0f9b360e.js";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { jsx, jsxs, Fragment } 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 "@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 componentName = "M4LNavLink";
+generateUtilityClasses(componentName, [
+  "root"
+]);
+function getNavLinkClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getNavLinkClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const NavLinkRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LNavLink?.styleOverrides
+}));
+const NAVLINK_PREFIX = "Navlink";
+const getNameDataTestId = (KEY) => {
+  return `${NAVLINK_PREFIX}-${KEY}`;
+};
+const NavLink = (props) => {
+  const {
+    children,
+    text,
+    skeletonWidth,
+    skeletongHeight,
+    ...others
+  } = props;
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsx(NavLinkRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: /* @__PURE__ */ jsxs(NavLink$1, {
+      ...others,
+      children: [/* @__PURE__ */ jsx(Typography, {
+        variant: "action",
+        skeletonWidth,
+        skeletongHeight,
+        children: text
+      }), /* @__PURE__ */ jsx(Fragment, {
+        children
+      })]
+    })
+  });
+};
+export {
+  NavLink as N
+};

package/components/NavLink/index.d.ts

@@ -0,0 +1 @@
+export { NavLink } from './NavLink';

package/components/NavLink/styles.d.ts

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