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

package/dist/types/icons/index.d.ts

@@ -0,0 +1,179 @@
+export { default as BellNoti } from './BellNoti';
+export { default as CloseLarge } from './CloseLarge';
+export { default as CloseSmall } from './CloseSmall';
+export { default as DownloadPdf } from './DownloadPdf';
+export { default as Ellipse } from './Ellipse';
+export { default as FilterNoti } from './FilterNoti';
+export { default as HideLarge } from './HideLarge';
+export { default as HideSmall } from './HideSmall';
+export { default as InformationLarge } from './InformationLarge';
+export { default as InformationSmall } from './InformationSmall';
+export { default as Manufacturer } from './Manufacturer';
+export { default as Rectangle } from './Rectangle';
+export { default as RefreshLeft } from './RefreshLeft';
+export { default as RefreshRight } from './RefreshRight';
+export { default as ShowLarge } from './ShowLarge';
+export { default as ShowSmall } from './ShowSmall';
+export { Analyze } from '@lunit/design-system-icons';
+export { Annotation } from '@lunit/design-system-icons';
+export { Apps } from '@lunit/design-system-icons';
+export { ArrowDoubleDown } from '@lunit/design-system-icons';
+export { ArrowDoubleLeft } from '@lunit/design-system-icons';
+export { ArrowDoubleRight } from '@lunit/design-system-icons';
+export { ArrowDoubleUp } from '@lunit/design-system-icons';
+export { ArrowDown } from '@lunit/design-system-icons';
+export { ArrowDownSm } from '@lunit/design-system-icons';
+export { ArrowDownXs } from '@lunit/design-system-icons';
+export { ArrowDownward } from '@lunit/design-system-icons';
+export { ArrowExpand } from '@lunit/design-system-icons';
+export { ArrowLeft } from '@lunit/design-system-icons';
+export { ArrowMore } from '@lunit/design-system-icons';
+export { ArrowRight } from '@lunit/design-system-icons';
+export { ArrowUp } from '@lunit/design-system-icons';
+export { ArrowUpSm } from '@lunit/design-system-icons';
+export { ArrowUpXs } from '@lunit/design-system-icons';
+export { ArrowUpward } from '@lunit/design-system-icons';
+export { Avatar16 } from '@lunit/design-system-icons';
+export { Avatar } from '@lunit/design-system-icons';
+export { Avatar28 } from '@lunit/design-system-icons';
+export { Bell } from '@lunit/design-system-icons';
+export { Brightness } from '@lunit/design-system-icons';
+export { BrightnessPreset } from '@lunit/design-system-icons';
+export { Brush } from '@lunit/design-system-icons';
+export { Calendar } from '@lunit/design-system-icons';
+export { Check } from '@lunit/design-system-icons';
+export { Close16 } from '@lunit/design-system-icons';
+export { Close } from '@lunit/design-system-icons';
+export { CloudDownload } from '@lunit/design-system-icons';
+export { CloudUpload } from '@lunit/design-system-icons';
+export { Convert } from '@lunit/design-system-icons';
+export { Crop } from '@lunit/design-system-icons';
+export { Cursor } from '@lunit/design-system-icons';
+export { Dashboard } from '@lunit/design-system-icons';
+export { Delete } from '@lunit/design-system-icons';
+export { Demo } from '@lunit/design-system-icons';
+export { DownloadFolder } from '@lunit/design-system-icons';
+export { DownloadT1 } from '@lunit/design-system-icons';
+export { DownloadT2 } from '@lunit/design-system-icons';
+export { DownloadT3 } from '@lunit/design-system-icons';
+export { DownloadT4 } from '@lunit/design-system-icons';
+export { DrawArrow } from '@lunit/design-system-icons';
+export { DrawLine } from '@lunit/design-system-icons';
+export { Dummy16 } from '@lunit/design-system-icons';
+export { Dummy } from '@lunit/design-system-icons';
+export { Duplicate } from '@lunit/design-system-icons';
+export { Edit } from '@lunit/design-system-icons';
+export { EditTtr } from '@lunit/design-system-icons';
+export { EditType } from '@lunit/design-system-icons';
+export { Eraser } from '@lunit/design-system-icons';
+export { Error16 } from '@lunit/design-system-icons';
+export { Error } from '@lunit/design-system-icons';
+export { Exclude16 } from '@lunit/design-system-icons';
+export { Exclude } from '@lunit/design-system-icons';
+export { Feedback } from '@lunit/design-system-icons';
+export { File } from '@lunit/design-system-icons';
+export { Filter } from '@lunit/design-system-icons';
+export { FlipHorizontal } from '@lunit/design-system-icons';
+export { FlipVertical } from '@lunit/design-system-icons';
+export { FloodFill } from '@lunit/design-system-icons';
+export { Forward } from '@lunit/design-system-icons';
+export { Fullscreen } from '@lunit/design-system-icons';
+export { Hand } from '@lunit/design-system-icons';
+export { Help } from '@lunit/design-system-icons';
+export { Hide16 } from '@lunit/design-system-icons';
+export { Hide } from '@lunit/design-system-icons';
+export { History } from '@lunit/design-system-icons';
+export { Home } from '@lunit/design-system-icons';
+export { Include16 } from '@lunit/design-system-icons';
+export { Include } from '@lunit/design-system-icons';
+export { Information16 } from '@lunit/design-system-icons';
+export { Information } from '@lunit/design-system-icons';
+export { Invert } from '@lunit/design-system-icons';
+export { Label } from '@lunit/design-system-icons';
+export { Language } from '@lunit/design-system-icons';
+export { Layout1x1 } from '@lunit/design-system-icons';
+export { Layout1x2 } from '@lunit/design-system-icons';
+export { Layout1x4 } from '@lunit/design-system-icons';
+export { Layout2x1 } from '@lunit/design-system-icons';
+export { Layout2x2 } from '@lunit/design-system-icons';
+export { Lock } from '@lunit/design-system-icons';
+export { Logo16 } from '@lunit/design-system-icons';
+export { Logo } from '@lunit/design-system-icons';
+export { Logo32 } from '@lunit/design-system-icons';
+export { Logout } from '@lunit/design-system-icons';
+export { LunitLogo } from '@lunit/design-system-icons';
+export { Magnify } from '@lunit/design-system-icons';
+export { Menu as MenuIcon } from '@lunit/design-system-icons';
+export { MenuOpen } from '@lunit/design-system-icons';
+export { Minus } from '@lunit/design-system-icons';
+export { MoreHorizontal } from '@lunit/design-system-icons';
+export { MoreVertical } from '@lunit/design-system-icons';
+export { MoveDown } from '@lunit/design-system-icons';
+export { MoveLeft } from '@lunit/design-system-icons';
+export { MoveRight } from '@lunit/design-system-icons';
+export { MoveUp } from '@lunit/design-system-icons';
+export { Pan } from '@lunit/design-system-icons';
+export { Password } from '@lunit/design-system-icons';
+export { PathologySlides } from '@lunit/design-system-icons';
+export { PauseT1 } from '@lunit/design-system-icons';
+export { PauseT2 } from '@lunit/design-system-icons';
+export { PdfDownload } from '@lunit/design-system-icons';
+export { PdfUpload } from '@lunit/design-system-icons';
+export { Pen } from '@lunit/design-system-icons';
+export { Play } from '@lunit/design-system-icons';
+export { Plus } from '@lunit/design-system-icons';
+export { PolygonSelection } from '@lunit/design-system-icons';
+export { Project } from '@lunit/design-system-icons';
+export { Redo } from '@lunit/design-system-icons';
+export { Refresh } from '@lunit/design-system-icons';
+export { Removable16 } from '@lunit/design-system-icons';
+export { Removable } from '@lunit/design-system-icons';
+export { Reorder } from '@lunit/design-system-icons';
+export { Report } from '@lunit/design-system-icons';
+export { Reset } from '@lunit/design-system-icons';
+export { ResetText } from '@lunit/design-system-icons';
+export { ResetView } from '@lunit/design-system-icons';
+export { Review } from '@lunit/design-system-icons';
+export { Rewind } from '@lunit/design-system-icons';
+export { RotationLeft } from '@lunit/design-system-icons';
+export { RotationRight } from '@lunit/design-system-icons';
+export { RulerT1 } from '@lunit/design-system-icons';
+export { RulerT2 } from '@lunit/design-system-icons';
+export { RulerviewCircle } from '@lunit/design-system-icons';
+export { RulerviewLine } from '@lunit/design-system-icons';
+export { Save } from '@lunit/design-system-icons';
+export { SearchT1 } from '@lunit/design-system-icons';
+export { SearchT2 } from '@lunit/design-system-icons';
+export { SendEmail } from '@lunit/design-system-icons';
+export { Setting } from '@lunit/design-system-icons';
+export { Shortcut } from '@lunit/design-system-icons';
+export { Show16 } from '@lunit/design-system-icons';
+export { Show } from '@lunit/design-system-icons';
+export { Skip } from '@lunit/design-system-icons';
+export { StartT1 } from '@lunit/design-system-icons';
+export { StartT2 } from '@lunit/design-system-icons';
+export { Storage } from '@lunit/design-system-icons';
+export { Success16 } from '@lunit/design-system-icons';
+export { Success } from '@lunit/design-system-icons';
+export { TagT1 } from '@lunit/design-system-icons';
+export { TagT2 } from '@lunit/design-system-icons';
+export { TagT3 } from '@lunit/design-system-icons';
+export { Text } from '@lunit/design-system-icons';
+export { Toggle } from '@lunit/design-system-icons';
+export { Undo } from '@lunit/design-system-icons';
+export { Unlock } from '@lunit/design-system-icons';
+export { UploadFolder } from '@lunit/design-system-icons';
+export { UploadT1 } from '@lunit/design-system-icons';
+export { UploadT2 } from '@lunit/design-system-icons';
+export { UploadT3 } from '@lunit/design-system-icons';
+export { UploadT4 } from '@lunit/design-system-icons';
+export { User } from '@lunit/design-system-icons';
+export { ViewList } from '@lunit/design-system-icons';
+export { ViewModule } from '@lunit/design-system-icons';
+export { ViewfinderT1 } from '@lunit/design-system-icons';
+export { ViewfinderT2 } from '@lunit/design-system-icons';
+export { ViewfinderT3 } from '@lunit/design-system-icons';
+export { Warning16 } from '@lunit/design-system-icons';
+export { Warning } from '@lunit/design-system-icons';
+export { ZoomIn } from '@lunit/design-system-icons';
+export { ZoomOut } from '@lunit/design-system-icons';

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import theme from './theme';
+export { theme };
+export * from './components';

package/dist/types/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/types/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/systems/drawer.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ThemeOptions } from '@mui/material';
+declare module '@mui/material/styles' {
+    interface Theme {
+        leftDrawer: {
+            width: React.CSSProperties['width'];
+        };
+        rightDrawer: {
+            width: React.CSSProperties['width'];
+        };
+    }
+    interface ThemeOptions {
+        leftDrawer: {
+            width: React.CSSProperties['width'];
+        };
+        rightDrawer: {
+            width: React.CSSProperties['width'];
+        };
+    }
+}
+declare const drawer: ThemeOptions;
+export default drawer;

package/dist/types/systems/index.d.ts

@@ -0,0 +1,6 @@
+export declare const SCROLLBAR_WIDTH = 10;
+export declare const SMALL_SCROLLBAR_WIDTH = 6;
+export declare const DRAWER_WIDTH_OPEN = 280;
+export declare const DRAWER_WIDTH_CLOSE = 52;
+export declare const VIEWER_DRAWER_WIDTH_OPEN = 280;
+export { default as drawer } from './drawer';

package/dist/types/theme.d.ts

@@ -0,0 +1,2 @@
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.1-alpha.1",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"

package/src/components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { forwardRef } from 'react';
-import { Close } from '../Icons';
+import { Close } from '../../icons';
 import BaseAlert from './Alert.styled';
 import type { AlertProps } from './Alert.types';
 import { getAccentColor, getIcons } from './Alert.utils';

package/src/components/Alert/Alert.utils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AlertColor } from '@mui/material';
-import { Success, Error, Information } from '../Icons';
+import { Success, Error, Information } from '../../icons';
 import theme from '../../theme';
 
 export const getIcons = (severity: AlertColor | undefined) => {

package/src/components/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 import StyledChip from './Chip.styled';
 import type { ChipProps } from './Chip.types';
 import { presetMap } from './Chip.utils';

package/src/components/Chip/Chip.utils.tsx

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

package/src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState, useMemo, useEffect } from 'react';
-import { CloseSmall, ArrowLeft, ArrowRight } from '../Icons';
+import { CloseSmall, ArrowLeft, ArrowRight } from '../../icons';
 
 import { StyledDatePicker } from './DatePicker.styled';
 import type { DatePickerProps } from './DatePicker.types';

package/src/components/Dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall } from '../Icons';
+import { CloseSmall } from '../../icons';
 
 import { Box } from '@mui/material';
 import theme from '../../theme';

package/src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowDown } from '../Icons';
+import { ArrowDown } from '../../icons';
 
 import type { SelectChangeEvent } from '@mui/material';
 import { useState } from 'react';

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Check } from '../Icons';
+import { Check } from '../../icons';
 import { BaseDropdownItem, KeyboardShortcut } from './DropdownItem.styled';
 import type { DropdownItemProps } from './DropdownItem.types';
 import { BUTTON_DROPDOWN_ITEM, shouldPadForEmptyIcon } from './DropdownItem.utils';

package/src/components/Dropdown/IconDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
-import { ArrowDownXs } from '../Icons';
+import { ArrowDownXs } from '../../icons';
 import { BaseIconDropdown } from './IconDropdown.styled';
 import theme from '../../theme';
 import type { IconDropdownProps } from './IconDropdown.types';

package/src/components/List/List.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 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';
 import type { ListProps, ListContextValue } from './List.types';

package/src/components/List/ListItem.styled.tsx

@@ -7,7 +7,7 @@ import {
   styled,
   typographyClasses,
 } from '@mui/material';
-import { Check, Dummy } from '../Icons';
+import { Check, Dummy } from '../../icons';
 import getPadding from './List.utils';
 import type { StyledListItemButtonProps } from './ListItem.types';
 

package/src/components/Pagination/Pagination.styled.tsx

@@ -0,0 +1,71 @@
+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',
+} as const;

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { useState, MouseEvent, useEffect, useMemo } from 'react';
+import { ArrowDown } from '../../icons';
+import { Divider } from '../Divider';
+import { MenuItem, Menu } from '../Menu';
+
+import { PaginationProps } from './Pagination.types';
+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,
+}: PaginationProps) {
+  const [perPageAnchorEl, setPerPageAnchorEl] = useState<null | HTMLElement>(null);
+  const [pageAnchorEl, setPageAnchorEl] = useState<null | HTMLElement>(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: MouseEvent<HTMLButtonElement>) => {
+    setPerPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePerPageClose = () => {
+    setPerPageAnchorEl(null);
+  };
+
+  const handlePageClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setPageAnchorEl(event.currentTarget);
+  };
+
+  const handlePageClose = () => {
+    setPageAnchorEl(null);
+  };
+
+  useEffect(() => {
+    if (selectedPage > totalPage) {
+      onPageChange?.(null, totalPage);
+    }
+  }, [totalPage, selectedPage, onPageChange]);
+
+  return (
+    <PaginationBox>
+      <SidePageBox>
+        Items per page
+        <SelectButton
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: perPageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePerPageClick}
+        >
+          {selectedPerPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={perPageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePerPageClose}
+          open={perPageOpen}
+        >
+          {PAGE_SIZE_LIST.map((perPage) => (
+            <MenuItem
+              key={perPage}
+              selected={perPage === selectedPerPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPerPageChange?.(event, perPage);
+                handlePerPageClose();
+              }}
+              label={perPage}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        {startItemNumber}-{endItemNumber} of &nbsp;{itemCount} items
+      </SidePageBox>
+      <SidePageBox>
+        This page
+        <SelectButton
+          id="selected-page"
+          endIcon={
+            <ArrowDown
+              style={{
+                transform: pageOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            />
+          }
+          onClick={handlePageClick}
+        >
+          {selectedPage}
+        </SelectButton>
+        <Menu
+          showCheck
+          anchorEl={pageAnchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          PaperProps={PaperProps}
+          onClose={handlePageClose}
+          open={pageOpen}
+        >
+          {pages.map((page) => (
+            <MenuItem
+              key={page}
+              selected={page === selectedPage}
+              onClick={(event) => {
+                event.preventDefault();
+                onPageChange?.(event, page);
+                handlePageClose();
+              }}
+              label={page}
+            />
+          ))}
+        </Menu>
+        <Divider
+          orientation="vertical"
+          sx={divider}
+        />
+        <ArrowButton
+          id="prev-button"
+          disabled={selectedPage === 1}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage - 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(90deg)' }} />}
+        />
+        <ArrowButton
+          id="next-button"
+          disabled={selectedPage === totalPage}
+          onClick={(event) => {
+            event.preventDefault();
+            onPageChange?.(event, selectedPage + 1);
+          }}
+          endIcon={<ArrowDown style={{ transform: 'rotate(-90deg)' }} />}
+        />
+      </SidePageBox>
+    </PaginationBox>
+  );
+}
+
+export default Pagination;

package/src/components/Pagination/Pagination.types.ts

@@ -0,0 +1,39 @@
+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;
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';

package/src/components/ProductLabel/ProductLabel.tsx

@@ -5,7 +5,7 @@ import { Box, Typography } from '@mui/material';
 import { LabelContainer, LabelContent, LabelCloseButton } from './ProductLabel.styled';
 import { ProductLabelProps } from './ProductLabel.types';
 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 }: ProductLabelProps) {

package/src/components/TextField/components/Buttons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseSmall, HideSmall, ShowSmall } from '../../Icons';
+import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
 import { ButtonWrapper } from '../TextInput.styled';
 
 function ClearButton({ onClick }: { onClick?: () => void }) {

package/src/components/UploadManager/UploadManager.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 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';