@lunit/oui 1.0.0-alpha.9 → 1.0.1-alpha.1

package/dist/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Close } from '../Icons';
+import { Close } from '../../icons';
 import BaseAlert from './Alert.styled';
 import { getAccentColor, getIcons } from './Alert.utils';
 import { Button } from '../Button';

package/dist/components/Alert/Alert.utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Success, Error, Information } from '../Icons';
+import { Success, Error, Information } from '../../icons';
 import theme from '../../theme';
 export const getIcons = (severity) => {
     switch (severity) {

package/dist/components/Chip/Chip.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 import StyledChip from './Chip.styled';
 import { presetMap } from './Chip.utils';
 function Chip({ preset, label, icon, onDelete, onClick, ...otherProps }) {

package/dist/components/Chip/Chip.utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Error16, StartT2 } from '../Icons';
+import { Error16, StartT2 } from '../../icons';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const presetMap = {
     default: {

package/dist/components/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from 'react';
-import { CloseSmall, ArrowLeft, ArrowRight } from '../Icons';
+import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
 import { StyledDatePicker } from './DatePicker.styled';
 import { Button } from '../Button';
 import theme from '../../theme';

package/dist/components/Dialog/Dialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 import { Box } from '@mui/material';
 import theme from '../../theme';
 import { Button } from '../Button';

package/dist/components/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown } from '../Icons';
+import { ArrowDown } from '../../icons';
 import { useState } from 'react';
 import { BaseDropdown, DropdownContainer, DropdownPlaceholder } from './Dropdown.styled';
 import { handlePlaceholder } from './Dropdown.utils';

package/dist/components/Dropdown/DropdownItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from '../Icons';
+import { Check } from '../../icons';
 import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
 import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';
 const DropdownItem = ({ checkIcon, customIcon, children, emptyIcon, asButton, value, keyboardShortcut, ...otherProps }) => {

package/dist/components/Dropdown/IconDropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ArrowDownXs } from '../Icons';
+import { ArrowDownXs } from '../../icons';
 import { BaseIconDropdown } from './IconDropdown.styled';
 import theme from '../../theme';
 const IconDropdown = ({ open, disabled, children, ...otherProps }) => {

package/dist/components/List/List.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useMemo } from 'react';
-import { ArrowDownSm, ArrowUpSm } from '../Icons';
+import { ArrowDownSm, ArrowUpSm } from '../../icons';
 import { Collapse } from '@mui/material';
 import { MuiList, MuiListSubheader } from './List.styled';
 export const ListContext = createContext({

package/dist/components/List/ListItem.styled.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItem, ListItemButton, ListItemIcon, ListItemText, styled, typographyClasses, } from '@mui/material';
-import { Check, Dummy } from '../Icons';
+import { Check, Dummy } from '../../icons';
 import getPadding from './List.utils';
 export const StyledListItem = styled(ListItem)({
     width: '100%',

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { ArrowDown } from '../../icons';
+import { Divider } from '../Divider';
+import { MenuItem, Menu } from '../Menu';
+import { PaperProps, PaginationBox, SidePageBox, SelectButton, ArrowButton, PAGE_SIZE_LIST, divider, } from './Pagination.styled';
+function Pagination({ count: itemCount, page: selectedPage = 1, perPage: selectedPerPage, totalPage, onPageChange, onPerPageChange, }) {
+    const [perPageAnchorEl, setPerPageAnchorEl] = useState(null);
+    const [pageAnchorEl, setPageAnchorEl] = useState(null);
+    const perPageOpen = Boolean(perPageAnchorEl);
+    const pageOpen = Boolean(pageAnchorEl);
+    const pages = useMemo(() => Array.from({ length: totalPage }, (_, index) => index + 1), [totalPage]);
+    const startItemNumber = selectedPerPage * (selectedPage - 1) + 1;
+    const endItemNumber = Math.min(startItemNumber + selectedPerPage - 1, itemCount);
+    const handlePerPageClick = (event) => {
+        setPerPageAnchorEl(event.currentTarget);
+    };
+    const handlePerPageClose = () => {
+        setPerPageAnchorEl(null);
+    };
+    const handlePageClick = (event) => {
+        setPageAnchorEl(event.currentTarget);
+    };
+    const handlePageClose = () => {
+        setPageAnchorEl(null);
+    };
+    useEffect(() => {
+        if (selectedPage > totalPage) {
+            onPageChange?.(null, totalPage);
+        }
+    }, [totalPage, selectedPage, onPageChange]);
+    return (_jsxs(PaginationBox, { children: [_jsxs(SidePageBox, { children: ["Items per page", _jsx(SelectButton, { endIcon: _jsx(ArrowDown, { style: {
+                                transform: perPageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                            } }), onClick: handlePerPageClick, children: selectedPerPage }), _jsx(Menu, { showCheck: true, anchorEl: perPageAnchorEl, anchorOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }, transformOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                        }, PaperProps: PaperProps, onClose: handlePerPageClose, open: perPageOpen, children: PAGE_SIZE_LIST.map((perPage) => (_jsx(MenuItem, { selected: perPage === selectedPerPage, onClick: (event) => {
+                                event.preventDefault();
+                                onPerPageChange?.(event, perPage);
+                                handlePerPageClose();
+                            }, label: perPage }, perPage))) }), _jsx(Divider, { orientation: "vertical", sx: divider }), startItemNumber, "-", endItemNumber, " of \u00A0", itemCount, " items"] }), _jsxs(SidePageBox, { children: ["This page", _jsx(SelectButton, { id: "selected-page", endIcon: _jsx(ArrowDown, { style: {
+                                transform: pageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                            } }), onClick: handlePageClick, children: selectedPage }), _jsx(Menu, { showCheck: true, anchorEl: pageAnchorEl, anchorOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }, transformOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                        }, PaperProps: PaperProps, onClose: handlePageClose, open: pageOpen, children: pages.map((page) => (_jsx(MenuItem, { selected: page === selectedPage, onClick: (event) => {
+                                event.preventDefault();
+                                onPageChange?.(event, page);
+                                handlePageClose();
+                            }, label: page }, page))) }), _jsx(Divider, { orientation: "vertical", sx: divider }), _jsx(ArrowButton, { id: "prev-button", disabled: selectedPage === 1, onClick: (event) => {
+                            event.preventDefault();
+                            onPageChange?.(event, selectedPage - 1);
+                        }, endIcon: _jsx(ArrowDown, { style: { transform: 'rotate(90deg)' } }) }), _jsx(ArrowButton, { id: "next-button", disabled: selectedPage === totalPage, onClick: (event) => {
+                            event.preventDefault();
+                            onPageChange?.(event, selectedPage + 1);
+                        }, endIcon: _jsx(ArrowDown, { style: { transform: 'rotate(-90deg)' } }) })] })] }));
+}
+export default Pagination;
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.styled.js

@@ -0,0 +1,64 @@
+import { Button, styled, Box } from '@mui/material';
+import { subScrollbarWidth } from '../../foundations';
+export const DEFAULT_PAGE_SIZE = 100;
+export const PAGE_SIZE_LIST = [25, 50, 75, 100];
+export const PaginationBox = styled(Box)(({ theme }) => ({
+    ...theme.typography.body5,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderTop: `1px solid ${theme.palette.neutralGrey[90]}`,
+    height: '48px',
+    padding: '14px 0',
+    color: theme.palette.neutralGrey[40],
+}));
+export const PaperProps = { style: { maxHeight: 378, width: 136 } };
+export const SidePageBox = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    height: '20px',
+});
+export const SelectButton = styled(Button)(({ theme }) => ({
+    justifyContent: 'flex-end',
+    border: '1px solid transparent',
+    minWidth: 'auto',
+    width: '58px',
+    height: '28px',
+    marginLeft: theme.spacing(3),
+    padding: '4px 4px 4px 8px',
+    color: theme.palette.neutralGrey[15],
+    '.MuiButton-endIcon': { margin: 0 },
+    '&:hover': {
+        background: 'transparent',
+        borderColor: theme.palette.neutralGrey[40],
+    },
+    '&:focus-visible': {
+        background: 'transparent',
+        borderColor: theme.palette.scope1,
+    },
+}));
+export const ArrowButton = styled(Button)(({ theme }) => ({
+    border: '1px solid transparent',
+    minWidth: 'auto',
+    height: '28px',
+    padding: theme.spacing(0.5),
+    color: theme.palette.neutralGrey[40],
+    '&:hover': {
+        background: theme.palette.neutralGrey[70],
+    },
+    '&:disabled': {
+        color: theme.palette.neutralGrey[40],
+        opacity: 0.4,
+    },
+    '.MuiButton-endIcon': {
+        margin: 0,
+    },
+}));
+export const PaginationContainer = styled('div')(({ theme }) => ({
+    padding: `0 ${subScrollbarWidth(theme.spacing(5))} 0 ${theme.spacing(5)}`,
+}));
+export const divider = {
+    borderWidth: '0',
+    margin: '0 12px',
+};
+//# sourceMappingURL=Pagination.styled.js.map

package/dist/components/Pagination/Pagination.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pagination.types.js.map

package/dist/components/Pagination/index.js

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+//# sourceMappingURL=index.js.map

package/dist/components/ProductLabel/ProductLabel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { LabelContainer, LabelContent, LabelCloseButton } from './ProductLabel.styled';
 import { Divider } from '../Divider';
-import { Close } from '../Icons';
+import { Close } from '../../icons';
 import { LunitScope } from '@lunit/design-system-logo';
 function ProductLabel({ open, onClose, children, footerStart, footerEnd }) {
     const handleClose = () => {

package/dist/components/TextField/components/Buttons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CloseSmall, HideSmall, ShowSmall } from '../../Icons';
+import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
 import { ButtonWrapper } from '../TextInput.styled';
 function ClearButton({ onClick }) {
     return (_jsx(ButtonWrapper, { onClick: onClick, children: _jsx(CloseSmall, { fontSize: "small" }) }));

package/dist/components/UploadManager/UploadManager.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grow, Typography, Box } from '@mui/material';
-import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../Icons';
+import { ArrowUp, Close, Success, Error16, RefreshLeft } from '../../icons';
 import { useState, Fragment, useMemo } from 'react';
 import { Divider } from '../Divider';
 import { Button } from '../Button';

package/dist/components/index.js

@@ -9,10 +9,10 @@ export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';
 export * from './FileDnDZone';
-export * from './Icons';
 export * from './List';
 export * from './LoadingIndicator';
 export * from './Menu';
+export * from './Pagination';
 export * from './ProductLabel';
 export * from './Progress';
 export * from './Radio';

package/dist/foundations/index.js

@@ -1,4 +1,5 @@
 export { default as palette } from './palette';
 export { default as typography } from './typography';
 export { default as spacing } from './spacing';
+export { subScrollbarWidth } from './styles';
 //# sourceMappingURL=index.js.map

package/dist/foundations/palette.js

@@ -200,6 +200,10 @@ const palette = {
         InvalidHover: '#A7A7A7',
         InvalidSelected: '#6E6E74',
     },
+    scope1: '#7292FD',
+    scope2: '#587EFC',
+    scope3: '#B0C0F4',
+    scope4: '#3A5DD9',
     info: { main: '#748FFC' },
     success: { main: '#00C9EA' },
     error: { main: '#FA4D56' },

package/dist/foundations/styles.js

@@ -0,0 +1,7 @@
+import { SMALL_SCROLLBAR_WIDTH } from '../systems';
+export function subScrollbarWidth(value) {
+    return typeof value === 'number'
+        ? value - SMALL_SCROLLBAR_WIDTH
+        : `calc(${value} - ${SMALL_SCROLLBAR_WIDTH}px)`;
+}
+//# sourceMappingURL=styles.js.map

package/dist/icons/BellNoti/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcBellNotiOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const BellNoti = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+BellNoti.displayName = 'BellNoti';
+BellNoti.variants = variants;
+export default BellNoti;
+//# sourceMappingURL=index.js.map

package/dist/icons/CloseLarge/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcCloseLargeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const CloseLarge = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+CloseLarge.displayName = 'CloseLarge';
+CloseLarge.variants = variants;
+export default CloseLarge;
+//# sourceMappingURL=index.js.map

package/dist/icons/CloseSmall/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcCloseSmallOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const CloseSmall = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+CloseSmall.displayName = 'CloseSmall';
+CloseSmall.variants = variants;
+export default CloseSmall;
+//# sourceMappingURL=index.js.map

package/dist/{components/Icons → icons}/DownloadPdf/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcDownloadPdfOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcDownloadPdfOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const DownloadPdf = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/icons/Ellipse/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcEllipseOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const Ellipse = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+Ellipse.displayName = 'Ellipse';
+Ellipse.variants = variants;
+export default Ellipse;
+//# sourceMappingURL=index.js.map

package/dist/icons/FilterNoti/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcFilterNotiOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const FilterNoti = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+FilterNoti.displayName = 'FilterNoti';
+FilterNoti.variants = variants;
+export default FilterNoti;
+//# sourceMappingURL=index.js.map

package/dist/icons/HideLarge/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcHideLargeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const HideLarge = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+HideLarge.displayName = 'HideLarge';
+HideLarge.variants = variants;
+export default HideLarge;
+//# sourceMappingURL=index.js.map

package/dist/icons/HideSmall/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcHideSmallOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const HideSmall = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+HideSmall.displayName = 'HideSmall';
+HideSmall.variants = variants;
+export default HideSmall;
+//# sourceMappingURL=index.js.map

package/dist/{components/Icons → icons}/InformationLarge/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcInformationLargeOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcInformationLargeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const InformationLarge = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/{components/Icons → icons}/InformationSmall/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcInformationSmallOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcInformationSmallOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const InformationSmall = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/{components/Icons → icons}/Manufacturer/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcManufacturerOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcManufacturerOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const Manufacturer = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/icons/Rectangle/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcRectangleOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const Rectangle = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+Rectangle.displayName = 'Rectangle';
+Rectangle.variants = variants;
+export default Rectangle;
+//# sourceMappingURL=index.js.map

package/dist/{components/Icons → icons}/RefreshLeft/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcRefreshLeftOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcRefreshLeftOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const RefreshLeft = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/{components/Icons → icons}/RefreshRight/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SvgIcon from "@mui/material/SvgIcon";
-import { IcRefreshRightOutlined20Px as outlined } from '../../../assets';
-const variants = ['outlined',];
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcRefreshRightOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
 const RefreshRight = ({ variant = 'outlined', ...rest }) => {
     if (variant === 'outlined') {
-        return _jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true });
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
     }
     return null;
 };

package/dist/icons/ShowLarge/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcShowLargeOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const ShowLarge = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+ShowLarge.displayName = 'ShowLarge';
+ShowLarge.variants = variants;
+export default ShowLarge;
+//# sourceMappingURL=index.js.map

package/dist/icons/ShowSmall/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SvgIcon from '@mui/material/SvgIcon';
+import { IcShowSmallOutlined20Px as outlined } from '../../assets';
+const variants = ['outlined'];
+const ShowSmall = ({ variant = 'outlined', ...rest }) => {
+    if (variant === 'outlined') {
+        return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
+    }
+    return null;
+};
+ShowSmall.displayName = 'ShowSmall';
+ShowSmall.variants = variants;
+export default ShowSmall;
+//# sourceMappingURL=index.js.map

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination.types';
+declare function Pagination({ count: itemCount, page: selectedPage, perPage: selectedPerPage, totalPage, onPageChange, onPerPageChange, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/types/components/Pagination/Pagination.styled.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const DEFAULT_PAGE_SIZE = 100;
+export declare const PAGE_SIZE_LIST: number[];
+export declare const PaginationBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PaperProps: {
+    style: {
+        maxHeight: number;
+        width: number;
+    };
+};
+export declare const SidePageBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "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;
+}, "color" | "disabled" | "size" | "style" | "fullWidth" | "classes" | "className" | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ArrowButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "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;
+}, "color" | "disabled" | "size" | "style" | "fullWidth" | "classes" | "className" | "children" | "sx" | "variant" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "href" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PaginationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const divider: {
+    readonly borderWidth: "0";
+    readonly margin: "0 12px";
+};

package/dist/types/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export interface PaginationProps {
+    count: number;
+    page?: number;
+    perPage: number;
+    totalPage: number;
+    onPageChange?: (event: React.MouseEvent<HTMLLIElement> | React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
+    onPerPageChange?: (event: React.MouseEvent<HTMLLIElement> | null, perPage: number) => void;
+}
+interface SortObject {
+    empty: boolean;
+    unsorted: boolean;
+    sorted: boolean;
+}
+interface Pageable {
+    offset: number;
+    sort: SortObject;
+    paged: boolean;
+    unpaged: boolean;
+    pageNumber: number;
+    pageSize: number;
+}
+export interface PaginationViewInfo {
+    totalElements: number;
+    totalPages: number;
+    size: number;
+    number: number;
+    sort: SortObject;
+    pageable: Pageable;
+    numberOfElements: number;
+    first: boolean;
+    last: boolean;
+    empty: boolean;
+}
+export {};