@m4l/components 0.1.40 → 0.1.41

package/components/mui_extended/IconButton/index.82f16572.js

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+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",
+    width: "30px",
+    height: "30px"
+  });
+};
+function IconButton({
+  src,
+  tooltip,
+  size = "small",
+  dictionaryTooltip,
+  bgColor = "primary.active",
+  rotationAngle,
+  angleTransition,
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (other.disabled) {
+      return void 0;
+    }
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [dictionaryTooltip, getLabel, other.disabled]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonIconButton, {});
+  }
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: /* @__PURE__ */ jsx(IconButton$1, {
+      size,
+      ...other,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src,
+        bgColor: other.disabled ? "action.disabled" : bgColor,
+        rotationAngle
+      })
+    })
+  }) : /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: /* @__PURE__ */ jsx(Icon, {
+      src,
+      bgColor: other.disabled ? "action.disabled" : bgColor,
+      rotationAngle,
+      angleTransition
+    })
+  });
+}
+export {
+  IconButton as I
+};

package/components/mui_extended/IconButton/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { IconButtonProps } from './types';
+export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, rotationAngle, angleTransition, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;

package/components/mui_extended/IconButton/subcomponents/SkeletonIconButton/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonIconButton: () => JSX.Element;

package/components/mui_extended/IconButton/types.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '../../Icon/types';
+export interface IconButtonProps extends IconProps {
+    tooltip?: string;
+    dictionaryTooltip?: string;
+}

package/components/mui_extended/ImageButton/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ImageButtonProps } from './types';
+export declare function ImageButton({ src, width, height, className, useIntersectionObserver, skeletonVariant, tooltip, dictionaryTooltip, sx, ...other }: ImageButtonProps): JSX.Element;

package/components/mui_extended/ImageButton/types.d.ts

@@ -0,0 +1,7 @@
+import { ImageProps } from '../../Image/types';
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+export interface ImageButtonProps extends ImageProps, MUIIconButtonProps {
+    tooltip?: string;
+    className?: string;
+    dictionaryTooltip?: string;
+}

package/components/mui_extended/LinearProgress/index.c92b9ba9.js

@@ -0,0 +1,13 @@
+import { LinearProgress as LinearProgress$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const LinearProgress = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(LinearProgress$1, {
+    ...other
+  });
+};
+export {
+  LinearProgress as L
+};

package/components/mui_extended/LinearProgress/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LinearProgressProps } from '@mui/material';
+export declare const LinearProgress: (props: LinearProgressProps) => JSX.Element;

package/components/mui_extended/LinkWithRoute/index.16436ab8.js

@@ -0,0 +1,30 @@
+import { Link as Link$1 } from "react-router-dom";
+import { Skeleton, Link } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+const LinkWithRoute = (props) => {
+  const {
+    to,
+    children,
+    skeletonWidth = "100%",
+    skeletonHeight = "14px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Link, {
+    component: Link$1,
+    to,
+    ...other,
+    children
+  });
+};
+export {
+  LinkWithRoute as L
+};

package/components/mui_extended/LinkWithRoute/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LinkWithRouteProps } from './types';
+export declare const LinkWithRoute: (props: LinkWithRouteProps) => JSX.Element;

package/components/mui_extended/LinkWithRoute/types.d.ts

@@ -0,0 +1,7 @@
+import { LinkProps as MuiLinkProps } from '@mui/material';
+import { To } from 'history';
+export interface LinkWithRouteProps extends MuiLinkProps {
+    to: To;
+    skeletonWidth: string | number;
+    skeletonHeight: string | number;
+}

package/components/mui_extended/LoadingButton/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MuiLabLoadingButtonProps } from './types';
+export declare const LoadingButton: (props: MuiLabLoadingButtonProps) => JSX.Element;

package/components/mui_extended/LoadingButton/subcomponents/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonLoadingButton: () => JSX.Element;

package/components/mui_extended/LoadingButton/subcomponents/Skeleton/styles.d.ts

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

package/components/mui_extended/LoadingButton/types.d.ts

@@ -0,0 +1,5 @@
+import { LoadingButtonProps } from '@mui/lab';
+import { ReactNode } from 'react';
+export interface MuiLabLoadingButtonProps extends LoadingButtonProps {
+    children?: ReactNode;
+}

package/components/mui_extended/MenuActions/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MenuActionsProps } from './types';
+export declare function MenuActions(props: MenuActionsProps): JSX.Element;
+export default MenuActions;

package/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/components/mui_extended/MenuActions/styles.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "error" | "default" | "inherit" | "warning" | "info" | "primary" | "secondary" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "children" | "tabIndex" | "color" | "size" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/mui_extended/MenuActions/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { PopoverProps } from '../Popover/types';
+export interface ComponentActionProps {
+    description?: string;
+    onClick: (props?: any) => void;
+}
+export interface MenuAction {
+    urlIcon: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    label?: string;
+    dictionaryField: string;
+    onClick: (props?: any) => void;
+    disabled: boolean;
+    color?: string;
+    component?: (props: ComponentActionProps) => JSX.Element;
+}
+export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
+    objItem?: any;
+    url_icon?: string;
+    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
+    toolTip?: string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginRight?: number | string;
+    marginLeft?: number | string;
+    width?: number;
+}

package/components/mui_extended/Pager/components/PagerActions/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PagerActionsProps } from './types';
+export declare function PagerActions(props: PagerActionsProps): JSX.Element;

package/components/mui_extended/Pager/components/PagerActions/styles.d.ts

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

package/components/mui_extended/Pager/components/PagerActions/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PagerActionsProps {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
+}

package/components/mui_extended/Pager/dicctionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getPagerComponentsDictionary(): string[];
+export declare const defaultPagerDictionary: Dictionary;

package/components/mui_extended/Pager/index.74d3f5fc.js

@@ -0,0 +1,206 @@
+import { useMemo } from "react";
+import { Skeleton, TablePagination } from "@mui/material";
+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",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SKTWrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButtonContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButton = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const SKTWrapperRowsPerPage = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "auto auto",
+  gridGap: theme.spacing(1),
+  marginRight: theme.spacing(3)
+}));
+function Pager(props) {
+  const {
+    totalRecords,
+    rowsPerPageOptions = [5, 10, 2],
+    rowsPerPage = 25,
+    page,
+    onPageChange,
+    onRowsPerPageChange,
+    labelRows = "Rows per page",
+    labelOf = "Of",
+    isSkeleton = "false",
+    isDesktop
+  } = props;
+  const currentPage = useMemo(() => {
+    if (rowsPerPage * page > totalRecords) {
+      return Math.floor(totalRecords / rowsPerPage);
+    }
+    return page;
+  }, [page, rowsPerPage, totalRecords]);
+  const handleChangeRowsPerPage = (event) => {
+    onRowsPerPageChange(parseInt(event.target.value, 10));
+    onPageChange(0);
+  };
+  const handleChangePage = (_event, newPage) => {
+    onPageChange(newPage);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapperPagerActions, {
+      children: [/* @__PURE__ */ jsxs(SKTWrapperRowsPerPage, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "40px",
+          height: "16px"
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "20px",
+          height: "16px"
+        })]
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50px",
+        height: "16px"
+      }), /* @__PURE__ */ jsxs(SKTSvgIconButtonContainer, {
+        children: [/* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx(TablePagination, {
+    id: "TablePagination",
+    rowsPerPageOptions,
+    component: "div",
+    count: totalRecords,
+    rowsPerPage,
+    page: currentPage,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    labelDisplayedRows: isDesktop ? ({
+      from,
+      to,
+      count
+    }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
+    labelRowsPerPage: isDesktop ? labelRows : "",
+    ActionsComponent: PagerActions
+  });
+}
+function getPagerComponentsDictionary() {
+  return ["pager"];
+}
+const defaultPagerDictionary = {
+  pager: {
+    first: "First",
+    previous: "Previous",
+    before: "Before",
+    last: "Last",
+    of: "of"
+  }
+};
+export {
+  Pager as P,
+  defaultPagerDictionary as d,
+  getPagerComponentsDictionary as g
+};

package/components/mui_extended/Pager/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PagerProps } from './types';
+export declare function Pager(props: PagerProps): JSX.Element;
+export default Pager;

package/components/mui_extended/Pager/styles.d.ts

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