update pagenation

package.json

@@ -12,7 +12,8 @@
     "classnames": "^2.2.6",
     "core-js": "^3.3.4",
     "lodash": "^4.17.15",
-    "react-tooltip": "^4.2.21"
+    "react-tooltip": "^4.2.21",
+    "remixicon": "^2.0.0"
   },
   "engines": {
     "node": ">=10.x"
@@ -60,8 +61,7 @@
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "remixicon": "^2.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

src/components/Button/ButtonGroup.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'div'
 type Available = typeof defaultTag | 'span' | 'ul'
 
-export type ButtonGroupProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type ButtonGroupProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const ButtonGroup = <T extends Available>({
   className,

src/components/Card/Card.tsx

@@ -10,9 +10,8 @@ export { CardImageProps } from './CardImage'
 const defaultTag = 'div'
 type Available = 'div' | 'span' | 'a'
 
-export type CardProps<T extends Available = typeof defaultTag> = {} & BaseProps<
-  T
->
+export type CardProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const Card = Object.assign(
   <T extends Available>({ className, ...props }: CardProps<T>) => {

src/components/Card/CardContent.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'div'
 type Available = typeof defaultTag | 'a'
 
-export type CardContentProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type CardContentProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const CardContent = <T extends Available>({
   className,

src/components/Pagination/Pagination.mdx

@@ -6,7 +6,7 @@ route: /pagination
 
 import { Playground } from "docz"
 import { Pagination } from "./Pagination"
-
+import "remixicon/fonts/remixicon.css"
 
 # Pagination
 

src/components/Pagination/PaginationEllipsis.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'span'
 type Available = typeof defaultTag | 'li'
 
-export type PaginationEllipsisProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type PaginationEllipsisProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const PaginationEllipsis = <T extends Available>({
   className,

src/components/Pagination/PaginationList.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'ul'
 type Available = typeof defaultTag | 'div'
 
-export type PaginationListProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type PaginationListProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const PaginationList = <T extends Available>({
   className,

src/components/Pagination/_Pagination.scss

@@ -1,5 +1,5 @@
-$item-size: 44px;
-$prev-next-size: 72px;
+$item-size: 32px;
+$prev-next-size: 32px;
 
 .pl-pagination {
   display: flex;
@@ -11,14 +11,13 @@ $prev-next-size: 72px;
 .pl-pagination-previous,
 .pl-pagination-next {
   @include mq(small) {
-    height: 35px;
-    width: 35px;
+    height: 32px;
+    width: 32px;
   }
 
   &:hover,
   a:hover {
     text-decoration: none;
-
     &.is-disabled {
       cursor: default;
     }
@@ -27,21 +26,28 @@ $prev-next-size: 72px;
 
 .pl-pagination-previous,
 .pl-pagination-next {
-  background-color: $gray30;
+  background-color: none;
   height: $item-size;
   width: $prev-next-size;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 4px;
 
   i {
     color: $black10;
     font-size: 1.5rem;
     font-weight: bold;
   }
 
-  &.is-disabled {
+  &:not(.is-disabled) {
     background-color: transparent;
+    &:hover {
+      background-color: $gray30;
+    }
+  }
+  &.is-disabled {
+    cursor: default;
     i {
       color: $gray70;
     }
@@ -52,20 +58,23 @@ $prev-next-size: 72px;
   display: flex;
   align-items: center;
 
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 6px;
+  padding-right: 6px;
   margin: 0;
 }
 
 .pl-pagination-item {
-  font-size: 15px;
+  font-size: 14px;
+  line-height: 14px;
   color: $black10;
   font-family: Roboto;
   align-items: center;
   display: flex;
   justify-content: center;
-  margin-left: 5px;
-  margin-right: 5px;
+  margin-left: 2px;
+  margin-right: 2px;
+  border-radius: 4px;
+  border: 1px solid $border;
 
   > a,
   > div,
@@ -74,18 +83,18 @@ $prev-next-size: 72px;
     align-items: center;
     justify-content: center;
     color: $black10;
-    padding: 10px 18px; // almost 44x44 size
-    max-width: 44px;
+    padding: 8px 4px 8px 4px;
+    min-width: 32px;
   }
 
-  &:hover {
+  &:hover:not(.is-active) {
     cursor: pointer;
-    background-color: $gray40;
+    background-color: $gray30;
   }
 
   &.is-active {
     color: $white00;
-    background-color: $black20;
+    background-color: $black10;
     cursor: default;
 
     > a,

src/components/Tab/TabGroup.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'div'
 type Available = typeof defaultTag | 'span' | 'ul'
 
-export type TabGroupProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type TabGroupProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const TabGroup = <T extends Available>({
   className,

src/components/Tag/TagGroup.tsx

@@ -5,9 +5,8 @@ import { Base, BaseProps } from '../../internal/Base'
 const defaultTag = 'span'
 type Available = typeof defaultTag | 'div' | 'ul'
 
-export type TagGroupProps<
-  T extends Available = typeof defaultTag
-> = {} & BaseProps<T>
+export type TagGroupProps<T extends Available = typeof defaultTag> =
+  {} & BaseProps<T>
 
 export const TagGroup = <T extends Available>({
   className,