@m4l/components 0.1.36 → 0.1.37

package/dist/components/areas/index.d1bf612c.js

@@ -0,0 +1,16 @@
+import "./components/index.7d6cd649.js";
+import "./components/AreasAdmin/index.6794b22f.js";
+import "react";
+import "@m4l/core";
+import "@mui/material";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import "react/jsx-runtime";
+import "./contexts/AreasContext/index.cd8e4bee.js";
+import "./components/AreasContainer/index.a2f8899b.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.1d00271d.js";
+const LABEL_NEW_AREA = "label_new_area";
+export {
+  LABEL_NEW_AREA as L
+};

package/dist/components/formatters/BooleanFormatter/{index.efc8ffc2.js → index.3a9b16c8.js}

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.1dbd3e58.js";
+import { I as Icon } from "../../Icon/index.8d754623.js";
 import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
 import { jsx } from "react/jsx-runtime";
 function BooleanFormatter(props) {

package/dist/components/formatters/{index.c3f4b687.js → index.0b5f95d0.js}

@@ -1,6 +1,6 @@
 import "react";
 import "@m4l/core";
-import "../Icon/index.1dbd3e58.js";
+import "../Icon/index.8d754623.js";
 import "@mui/material/styles";
 import "react/jsx-runtime";
 import "@m4l/graphics";

package/dist/components/hook-form/RHFPeriod/{index.2b8e63a2.js → index.3772295b.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material";
 import { useFormContext, Controller } from "react-hook-form";
 import { E as ErrorLabel } from "../../ErrorLabel/index.c8615f16.js";
-import { P as Period } from "../../Period/index.74f35862.js";
+import { P as Period } from "../../Period/index.abe445bd.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div")(({
   theme

package/dist/components/hook-form/RHFTextField/{index.7feaec71.js → index.b17d68f4.js}

@@ -1,7 +1,7 @@
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, TextField, InputAdornment } from "@mui/material";
 import { forwardRef, useState } from "react";
-import { I as IconButton } from "../../mui_extended/IconButton/index.e3adaa33.js";
+import { I as IconButton } from "../../mui_extended/IconButton/index.82f16572.js";
 import { useFormContext, Controller } from "react-hook-form";
 import { jsx, jsxs } from "react/jsx-runtime";
 const WrapperSkeletonRHFTextField = styled("div")(({

package/dist/components/modal/WindowBase.04439b8e.js

@@ -0,0 +1,120 @@
+import { useEnvironment } from "@m4l/core";
+import "react";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
+import { IconButton } from "@mui/material";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperWindowBase = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: getThemeVariantColor(theme, variant)
+  }
+}));
+const ModalTitle = styled("div")(({
+  theme,
+  variant
+}) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const Header = (props) => {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    variant,
+    title,
+    onClickCancel
+  } = props;
+  const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
+  const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
+  const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
+  return /* @__PURE__ */ jsxs(WrapperHeader, {
+    id: "Header",
+    className: "m4l_draggable_handle",
+    children: [/* @__PURE__ */ jsx(IconHeader, {
+      variant,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
+      })
+    }), /* @__PURE__ */ jsx(ModalTitle, {
+      variant,
+      children: title
+    }), /* @__PURE__ */ jsx(IconButton, {
+      onClick: onClickCancel,
+      "aria-label": "click",
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`
+      })
+    })]
+  });
+};
+const WindowBase = (props) => {
+  const {
+    variant,
+    title,
+    children,
+    onClickCancel
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WrapperWindowBase, {
+    id: "WrapperWindowBase",
+    children: [/* @__PURE__ */ jsx(Header, {
+      variant,
+      title,
+      onClickCancel: onCloseCancel
+    }), children]
+  });
+};
+export {
+  WindowBase as W
+};

package/dist/components/modal/WindowConfirm.0b8a6818.js

@@ -0,0 +1,115 @@
+import { useEnvironment } from "@m4l/core";
+import "react";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import { A as Actions } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
+import "react-hook-form";
+import { Typography } from "@mui/material";
+import "@mui/material/Button";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "@m4l/graphics";
+import { styled } from "@mui/material/styles";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import { b as getVariantColor } from "../../utils/index.899eb67b.js";
+import { W as WindowBase } from "./WindowBase.04439b8e.js";
+import "@mui/lab";
+const WrapperMessageIlustration = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+}));
+const ModalContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gridGap: theme.spacing(5),
+  flexGrow: 1,
+  [theme.breakpoints.up("sm")]: {
+    display: "grid",
+    flexDirection: "row",
+    gridTemplateColumns: "1fr 1fr"
+  }
+}));
+const IllustrationContainer = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
+  }
+}));
+const MessageContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const MessageIlustration = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperMessageIlustration, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          size: "230px"
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const WindowConfirm = (props) => {
+  const {
+    variant,
+    title,
+    onClickCancel,
+    onClickIntro
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WindowBase, {
+    title,
+    variant,
+    onClickCancel,
+    children: [/* @__PURE__ */ jsx(MessageIlustration, {}), /* @__PURE__ */ jsxs(Actions, {
+      children: [/* @__PURE__ */ jsx(ActionCancel, {
+        onClick: onCloseCancel
+      }), " ", /* @__PURE__ */ jsx(ActionIntro, {
+        onClick: onClickIntro,
+        color: getVariantColor(variant)
+      })]
+    })]
+  });
+};
+export {
+  WindowConfirm as W
+};

package/dist/components/modal/index.8387e90e.js

@@ -0,0 +1,18 @@
+import "@mui/material";
+import "../../react-draggable.84d6b038.js";
+import "react";
+import "../../contexts/ModalContext/index.b90eec94.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "react/jsx-runtime";
+import "@m4l/graphics";
+import "@m4l/core";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../CommonActions/components/Actions/index.d3e1f36e.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "./WindowBase.04439b8e.js";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import "@mui/lab";
+import "./WindowConfirm.0b8a6818.js";

package/dist/components/mui_extended/Accordion/{index.8e123c57.js → index.a541c71c.js}

@@ -1,7 +1,7 @@
 import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.e3adaa33.js";
+import { I as IconButton } from "../IconButton/index.82f16572.js";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.1dbd3e58.js";
+import { I as Icon } from "../../Icon/index.8d754623.js";
 import { styled } from "@mui/material/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
 styled("div")(({

package/dist/components/mui_extended/Button/index.86a155a2.js

@@ -0,0 +1,101 @@
+import { useModuleSkeleton, useModuleDictionary } from "@m4l/core";
+import { Skeleton, styled, IconButton, Tooltip } from "@mui/material";
+import MuiButton from "@mui/material/Button";
+import { jsx } from "react/jsx-runtime";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { useMemo } from "react";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+const Button = (props) => {
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      sx: {
+        borderRadius: 2
+      },
+      variant: "rectangular",
+      width: "100px",
+      height: "36px"
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButton, {
+    ...props
+  });
+};
+const WrapperSkeleton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SkeletonLoadingButton = () => /* @__PURE__ */ jsx(WrapperSkeleton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonLoadingButton, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingButton$1, {
+    ...other,
+    children
+  });
+};
+function ImageButton({
+  src,
+  width,
+  height,
+  className,
+  useIntersectionObserver,
+  skeletonVariant = "circle",
+  tooltip,
+  dictionaryTooltip,
+  sx = {
+    width: 40,
+    height: 40
+  },
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const finalTooltip = useMemo(() => {
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [tooltip, dictionaryTooltip, getLabel]);
+  const imageButton = useMemo(() => {
+    return /* @__PURE__ */ jsx(IconButton, {
+      sx,
+      className: `m4l_image_button ${className ? className : ""}`,
+      ...other,
+      children: /* @__PURE__ */ jsx(Image, {
+        src,
+        width,
+        height,
+        useIntersectionObserver,
+        skeletonVariant
+      })
+    });
+  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: imageButton
+  }) : imageButton;
+}
+export {
+  Button as B,
+  ImageButton as I,
+  LoadingButton as L
+};

package/dist/components/mui_extended/IconButton/{index.e3adaa33.js → index.82f16572.js}

@@ -1,64 +1,8 @@
-import { m } from "framer-motion";
-import { forwardRef, useMemo } from "react";
-import { IconButton as IconButton$1, Box, Skeleton, Tooltip } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.1dbd3e58.js";
-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$1, {
-    size,
-    ref,
-    ...other,
-    children
-  })
-}));
-IconButtonAnimate.displayName = "IconButtonAnimate";
+import { Skeleton, Tooltip, IconButton as IconButton$1 } from "@mui/material";
+import { I as Icon } from "../../Icon/index.8d754623.js";
+import { jsx } from "react/jsx-runtime";
 const SkeletonIconButton = () => {
   return /* @__PURE__ */ jsx(Skeleton, {
     variant: "circular",
@@ -115,6 +59,5 @@ function IconButton({
   });
 }
 export {
-  IconButton as I,
-  IconButtonAnimate as a
+  IconButton as I
 };

package/dist/components/mui_extended/MenuActions/index.ee17bddd.js

@@ -0,0 +1,112 @@
+import { useState, useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { IconButton, Tooltip, MenuItem } from "@mui/material";
+import { P as Popover } from "../Popover/index.53c77d23.js";
+import { styled } from "@mui/material/styles";
+import { I as Icon } from "../../Icon/index.8d754623.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const WrapperMenuActions = styled(IconButton)(() => ({}));
+const LabelMemuItem = styled("div")(({
+  theme
+}) => ({
+  height: "22px",
+  marginLeft: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "center"
+}));
+function MenuActions(props) {
+  const {
+    menuActions,
+    objItem = {},
+    url_icon: urlIcon,
+    toolTip = "",
+    marginTop = -1,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    width = 200,
+    arrowType: arrow = "right-top",
+    ...other
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [open, setOpen] = useState(null);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const urlFinalIcon = useMemo(() => {
+    if (urlIcon)
+      return urlIcon;
+    return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
+  }, [urlIcon, host_static_assets, environment_assets]);
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleClick = (menuAction) => {
+    setOpen(null);
+    menuAction.onClick();
+  };
+  const finalActions = useMemo(() => {
+    let ret;
+    if (typeof menuActions !== "function") {
+      ret = menuActions;
+    } else {
+      ret = menuActions(objItem);
+    }
+    return ret;
+  }, [menuActions, objItem]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Tooltip, {
+      title: toolTip,
+      children: /* @__PURE__ */ jsx(WrapperMenuActions, {
+        id: "WrapperMenuActions",
+        size: "small",
+        onClick: handleOpen,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlFinalIcon
+        })
+      })
+    }), /* @__PURE__ */ jsx(Popover, {
+      id: "Popover",
+      open: Boolean(open),
+      anchorEl: open,
+      onClose: handleClose,
+      arrowType: arrow,
+      sx: {
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        width,
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      ...other,
+      children: open && finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
+        dense: true,
+        onClick: () => handleClick(menuAction),
+        sx: {
+          color: menuAction.color ?? "text.main"
+        },
+        disabled: menuAction.disabled,
+        children: [/* @__PURE__ */ jsx(Icon, {
+          src: menuAction.urlIcon
+        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+          children: menuAction.label || getLabel(menuAction.dictionaryField)
+        })]
+      }, `menu_action_${index}`))
+    })]
+  });
+}
+export {
+  LabelMemuItem as L,
+  MenuActions as M
+};

package/dist/components/mui_extended/Pager/{index.d245f821.js → index.74d3f5fc.js}

@@ -1,8 +1,73 @@
 import { useMemo } from "react";
 import { Skeleton, TablePagination } from "@mui/material";
-import { P as PagerActions } from "../../CommonActions/components/Actions/index.ba86f72f.js";
 import { styled } from "@mui/material/styles";
+import { I as IconButton } from "../IconButton/index.82f16572.js";
+import { useEnvironment } from "@m4l/core";
 import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  justifyContent: "center",
+  display: "flex",
+  marginLeft: 0,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: theme.spacing(3)
+  }
+}));
+function PagerActions(props) {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /* @__PURE__ */ jsxs(WrapperPagerActions, {
+    id: "WrapperPagerActions",
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      id: "test_bruce",
+      dictionaryTooltip: "pager.first",
+      onClick: handleFirstPageButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.previous",
+      onClick: handleBackButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.next",
+      onClick: handleNextButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "next page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.last",
+      onClick: handleLastPageButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "last page",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
+    })]
+  });
+}
 styled("div")(() => ({
   display: "flex",
   flexDirection: "column",