Upgrade chakra to latest V2 (#207)

* Upgrade chakra to latest V2 Which is 2.10.4 as of writing this This also removes the custom Button implementation, since they fixed the chrome translation issue in version 2.9 if I don't recall wrong * Fix radio anatomy import * refs #2 Ensure proper ffjavascript version gets loaded for tests
vocdoni · Dec 4, 2024 · 111f447 · 111f447
1 parent 97fa626
commit 111f447
Show file tree

Hide file tree

Showing 50 changed files with 114 additions and 304 deletions.
diff --git a/jest.config.mjs b/jest.config.mjs
@@ -3,6 +3,9 @@ const config = {
   collectCoverageFrom: ['packages/**/*.{ts,tsx}'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   modulePathIgnorePatterns: ['<rootDir>/templates'],
+  moduleNameMapper: {
+    '^ffjavascript$': '<rootDir>/node_modules/ffjavascript/build/main.cjs',
+  },
   transform: {
     '^.+\\.(ts|tsx|js|jsx)?$': '@swc-node/jest',
   },

diff --git a/packages/chakra-components/package.json b/packages/chakra-components/package.json
@@ -32,27 +32,7 @@
     "@vocdoni/react-providers": "~0.5.1"
   },
   "peerDependencies": {
-    "@chakra-ui/alert": "^2.2.2",
-    "@chakra-ui/avatar": "^2.3.0",
-    "@chakra-ui/button": "^2.1.0",
-    "@chakra-ui/checkbox": "^2.3.2",
-    "@chakra-ui/form-control": "^2.2.0",
-    "@chakra-ui/image": "^2.1.0",
-    "@chakra-ui/input": "^2.1.2",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/modal": "^2.3.1",
-    "@chakra-ui/progress": "^2.2.0",
-    "@chakra-ui/radio": "^2.1.2",
-    "@chakra-ui/react-use-disclosure": "^2.1.0",
-    "@chakra-ui/react-use-merge-refs": "^2.1.0",
-    "@chakra-ui/shared-utils": "^2.0.4",
-    "@chakra-ui/spinner": "^2.1.0",
-    "@chakra-ui/system": "2.6.2",
-    "@chakra-ui/table": "^2.1.0",
-    "@chakra-ui/tag": "^3.1.1",
-    "@chakra-ui/theme": "^3.3.1",
-    "@chakra-ui/toast": "^7.0.2",
-    "@chakra-ui/tooltip": "^2.3.1",
+    "@chakra-ui/react": "^2.10.4",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/wallet": "^5.7.0",
     "@vocdoni/sdk": "~0.9.0",
@@ -63,27 +43,7 @@
     "remark-gfm": ">= 2.0.0"
   },
   "devDependencies": {
-    "@chakra-ui/alert": "^2.2.2",
-    "@chakra-ui/avatar": "^2.3.0",
-    "@chakra-ui/button": "^2.1.0",
-    "@chakra-ui/checkbox": "^2.3.2",
-    "@chakra-ui/form-control": "^2.2.0",
-    "@chakra-ui/image": "^2.1.0",
-    "@chakra-ui/input": "^2.1.2",
-    "@chakra-ui/layout": "^2.3.1",
-    "@chakra-ui/modal": "^2.3.1",
-    "@chakra-ui/progress": "^2.2.0",
-    "@chakra-ui/radio": "^2.1.2",
-    "@chakra-ui/react-use-disclosure": "^2.1.0",
-    "@chakra-ui/react-use-merge-refs": "^2.1.0",
-    "@chakra-ui/shared-utils": "^2.0.4",
-    "@chakra-ui/spinner": "^2.1.0",
-    "@chakra-ui/system": "2.6.2",
-    "@chakra-ui/table": "^2.1.0",
-    "@chakra-ui/tag": "^3.1.1",
-    "@chakra-ui/theme": "^3.3.1",
-    "@chakra-ui/toast": "^7.0.2",
-    "@chakra-ui/tooltip": "^2.3.1",
+    "@chakra-ui/react": "^2.10.4",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/wallet": "^5.7.0",
     "@types/react": "^18.0.30",

diff --git a/packages/chakra-components/src/client.tsx b/packages/chakra-components/src/client.tsx
@@ -1,4 +1,4 @@
-import { ToastProvider } from '@chakra-ui/toast'
+import { ToastProvider } from '@chakra-ui/react'
 import { ClientProviderComponentProps, ClientProvider as RPClientProvider } from '@vocdoni/react-providers'
 import merge from 'ts-deepmerge'
 import { ConfirmProvider } from './components'

diff --git a/packages/chakra-components/src/components/Account/Balance.tsx b/packages/chakra-components/src/components/Account/Balance.tsx
@@ -1,4 +1,4 @@
-import { Tag, TagProps } from '@chakra-ui/tag'
+import { Tag, TagProps } from '@chakra-ui/react'
 import { useClient } from '@vocdoni/react-providers'
 
 export const Balance = (props: TagProps) => {

diff --git a/packages/chakra-components/src/components/Election/Actions/Actions.tsx b/packages/chakra-components/src/components/Election/Actions/Actions.tsx
@@ -1,5 +1,4 @@
-import { ButtonGroup, IconButton } from '@chakra-ui/button'
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
+import { ButtonGroup, chakra, ChakraProps, IconButton, useMultiStyleConfig } from '@chakra-ui/react'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa'

diff --git a/packages/chakra-components/src/components/Election/Actions/Cancel.tsx b/packages/chakra-components/src/components/Election/Actions/Cancel.tsx
@@ -1,8 +1,7 @@
-import { IconButtonProps } from '@chakra-ui/button'
-import { forwardRef } from '@chakra-ui/system'
+import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react'
 import { useActions, useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
-import { Button, useConfirm } from '../../layout'
+import { useConfirm } from '../../layout'
 import { ConfirmActionModal } from './ConfirmActionModal'
 
 export const ActionCancel = forwardRef<IconButtonProps, 'button'>((props, ref) => {

diff --git a/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx b/packages/chakra-components/src/components/Election/Actions/ConfirmActionModal.tsx
@@ -1,9 +1,14 @@
-import { useMultiStyleConfig } from '@chakra-ui/system'
-import { useConfirm } from '../../layout'
+import {
+  Button,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+  Text,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
 import { useClient } from '@vocdoni/react-providers'
-import { ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@chakra-ui/modal'
-import { Text } from '@chakra-ui/layout'
-import { Button } from '@chakra-ui/button'
+import { useConfirm } from '../../layout'
 
 export type ConfirmActionModalProps = {
   title: string

diff --git a/packages/chakra-components/src/components/Election/Actions/Continue.tsx b/packages/chakra-components/src/components/Election/Actions/Continue.tsx
@@ -1,8 +1,6 @@
-import { IconButtonProps } from '@chakra-ui/button'
-import { forwardRef } from '@chakra-ui/system'
+import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react'
 import { useActions, useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
-import { Button } from '../../layout'
 
 export const ActionContinue = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   const { account, localize } = useClient()

diff --git a/packages/chakra-components/src/components/Election/Actions/End.tsx b/packages/chakra-components/src/components/Election/Actions/End.tsx
@@ -1,8 +1,7 @@
-import { IconButtonProps } from '@chakra-ui/button'
-import { forwardRef } from '@chakra-ui/system'
+import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react'
 import { useActions, useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
-import { Button, useConfirm } from '../../layout'
+import { useConfirm } from '../../layout'
 import { ConfirmActionModal } from './ConfirmActionModal'
 
 export const ActionEnd = forwardRef<IconButtonProps, 'button'>((props, ref) => {

diff --git a/packages/chakra-components/src/components/Election/Actions/Pause.tsx b/packages/chakra-components/src/components/Election/Actions/Pause.tsx
@@ -1,8 +1,6 @@
-import { IconButtonProps } from '@chakra-ui/button'
-import { forwardRef } from '@chakra-ui/system'
+import { Button, forwardRef, IconButtonProps } from '@chakra-ui/react'
 import { useActions, useClient, useElection } from '@vocdoni/react-providers'
 import { areEqualHexStrings, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
-import { Button } from '../../layout'
 
 export const ActionPause = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   const { account, localize } = useClient()

diff --git a/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts b/packages/chakra-components/src/components/Election/Actions/use-actions-toast.ts
@@ -1,4 +1,4 @@
-import { ToastId, useToast } from '@chakra-ui/toast'
+import { ToastId, useToast } from '@chakra-ui/react'
 import { useActions } from '@vocdoni/react-providers'
 import { useEffect, useRef } from 'react'
 

diff --git a/packages/chakra-components/src/components/Election/Description.tsx b/packages/chakra-components/src/components/Election/Description.tsx
@@ -1,4 +1,4 @@
-import { ChakraProps, useStyleConfig } from '@chakra-ui/system'
+import { ChakraProps, useStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'

diff --git a/packages/chakra-components/src/components/Election/Election.tsx b/packages/chakra-components/src/components/Election/Election.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/alert'
+import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react'
 import { ElectionProvider, ElectionProviderComponentProps, useElection } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 import { HR } from '../layout'

diff --git a/packages/chakra-components/src/components/Election/Envelope.tsx b/packages/chakra-components/src/components/Election/Envelope.tsx
@@ -1,5 +1,4 @@
-import { List, ListItem, Text } from '@chakra-ui/layout'
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
+import { chakra, ChakraProps, List, ListItem, Text, useMultiStyleConfig } from '@chakra-ui/react'
 import { useDatesLocale, useElection } from '@vocdoni/react-providers'
 import {
   ElectionResultsTypeNames,

diff --git a/packages/chakra-components/src/components/Election/Header.tsx b/packages/chakra-components/src/components/Election/Header.tsx
@@ -1,4 +1,4 @@
-import { useStyleConfig } from '@chakra-ui/system'
+import { useStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 import { Image, IPFSImageProps } from '../layout'

diff --git a/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx b/packages/chakra-components/src/components/Election/Questions/Confirmation.tsx
@@ -1,7 +1,15 @@
-import { Button } from '@chakra-ui/button'
-import { Box, Text } from '@chakra-ui/layout'
-import { ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from '@chakra-ui/modal'
-import { chakra, omitThemingProps, useMultiStyleConfig } from '@chakra-ui/system'
+import {
+  Box,
+  Button,
+  chakra,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+  omitThemingProps,
+  Text,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
 import { useClient } from '@vocdoni/react-providers'
 import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk'
 import { FieldValues } from 'react-hook-form'

diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx
@@ -1,8 +1,14 @@
-import { Checkbox } from '@chakra-ui/checkbox'
-import { FormControl, FormErrorMessage } from '@chakra-ui/form-control'
-import { Stack } from '@chakra-ui/layout'
-import { Radio, RadioGroup } from '@chakra-ui/radio'
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
+import {
+  chakra,
+  ChakraProps,
+  Checkbox,
+  FormControl,
+  FormErrorMessage,
+  Radio,
+  RadioGroup,
+  Stack,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionResultsTypeNames, ElectionStatus, IQuestion, PublishedElection } from '@vocdoni/sdk'
 import { Controller, useFormContext } from 'react-hook-form'

diff --git a/packages/chakra-components/src/components/Election/Questions/Questions.tsx b/packages/chakra-components/src/components/Election/Questions/Questions.tsx
@@ -1,5 +1,4 @@
-import { Alert, AlertIcon } from '@chakra-ui/alert'
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
+import { Alert, AlertIcon, chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { IQuestion, PublishedElection } from '@vocdoni/sdk'
 import { FieldValues, SubmitErrorHandler } from 'react-hook-form'

diff --git a/packages/chakra-components/src/components/Election/Questions/Tip.tsx b/packages/chakra-components/src/components/Election/Questions/Tip.tsx
@@ -1,4 +1,4 @@
-import { chakra, useMultiStyleConfig } from '@chakra-ui/system'
+import { chakra, useMultiStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk'
 

diff --git a/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx b/packages/chakra-components/src/components/Election/Questions/TypeBadge.tsx
@@ -1,5 +1,4 @@
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
-import { Tooltip } from '@chakra-ui/tooltip'
+import { chakra, ChakraProps, Tooltip, useMultiStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionResultsTypeNames, PublishedElection } from '@vocdoni/sdk'
 import type { HTMLAttributes } from 'react'

diff --git a/packages/chakra-components/src/components/Election/Questions/Voted.tsx b/packages/chakra-components/src/components/Election/Questions/Voted.tsx
@@ -1,6 +1,4 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/alert'
-import { Link } from '@chakra-ui/layout'
-import { useMultiStyleConfig } from '@chakra-ui/system'
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Link, useMultiStyleConfig } from '@chakra-ui/react'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import reactStringReplace from 'react-string-replace'
 import { environment } from '../../../environment'

diff --git a/packages/chakra-components/src/components/Election/Results.tsx b/packages/chakra-components/src/components/Election/Results.tsx
@@ -1,6 +1,4 @@
-import { Box, Flex, Text } from '@chakra-ui/layout'
-import { Progress } from '@chakra-ui/progress'
-import { chakra, ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
+import { Box, chakra, ChakraProps, Flex, Progress, Text, useMultiStyleConfig } from '@chakra-ui/react'
 import { useClient, useDatesLocale, useElection } from '@vocdoni/react-providers'
 import {
   ElectionResultsTypeNames,

diff --git a/packages/chakra-components/src/components/Election/Schedule.tsx b/packages/chakra-components/src/components/Election/Schedule.tsx
@@ -1,5 +1,4 @@
-import { HeadingProps } from '@chakra-ui/layout'
-import { chakra, forwardRef, useMultiStyleConfig } from '@chakra-ui/system'
+import { chakra, forwardRef, HeadingProps, useMultiStyleConfig } from '@chakra-ui/react'
 import { useDatesLocale, useElection, useLocalize } from '@vocdoni/react-providers'
 import { ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { format as dformat, formatDistance } from 'date-fns'

diff --git a/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx b/packages/chakra-components/src/components/Election/SpreadsheetAccess.tsx
@@ -1,23 +1,28 @@
-import { FormControl, FormErrorMessage, FormHelperText, FormLabel } from '@chakra-ui/form-control'
-import { Input, InputProps } from '@chakra-ui/input'
 import {
+  Button,
+  ChakraProps,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  InputProps,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from '@chakra-ui/modal'
-import { useDisclosure } from '@chakra-ui/react-use-disclosure'
-import { ChakraProps, useMultiStyleConfig } from '@chakra-ui/system'
-import { useToast } from '@chakra-ui/toast'
+  useDisclosure,
+  useMultiStyleConfig,
+  useToast,
+} from '@chakra-ui/react'
 import { Wallet } from '@ethersproject/wallet'
 import { errorToString, useClient, useElection, walletFromRow } from '@vocdoni/react-providers'
 import { dotobject, PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { RegisterOptions, useForm } from 'react-hook-form'
-import { Button } from '../layout/Button'
 
 type MetaSpecs = {
   [name: string]: {

diff --git a/packages/chakra-components/src/components/Election/StatusBadge.tsx b/packages/chakra-components/src/components/Election/StatusBadge.tsx
@@ -1,4 +1,4 @@
-import { Tag, TagProps } from '@chakra-ui/tag'
+import { Tag, TagProps } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk'
 

diff --git a/packages/chakra-components/src/components/Election/Title.tsx b/packages/chakra-components/src/components/Election/Title.tsx
@@ -1,5 +1,4 @@
-import { HeadingProps } from '@chakra-ui/layout'
-import { chakra, forwardRef, omitThemingProps, useStyleConfig } from '@chakra-ui/system'
+import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
 import { PublishedElection } from '@vocdoni/sdk'
 

diff --git a/packages/chakra-components/src/components/Election/VoteButton.tsx b/packages/chakra-components/src/components/Election/VoteButton.tsx
@@ -1,11 +1,8 @@
-import { ButtonProps } from '@chakra-ui/button'
-import { Text } from '@chakra-ui/layout'
-import { chakra, useMultiStyleConfig } from '@chakra-ui/system'
+import { Button, ButtonProps, chakra, Text, useMultiStyleConfig } from '@chakra-ui/react'
 import { Signer } from '@ethersproject/abstract-signer'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import { ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
-import { Button } from '../layout/Button'
 import { results } from './Results'
 
 export const VoteButton = (props: ButtonProps) => {

diff --git a/packages/chakra-components/src/components/Organization/Avatar.tsx b/packages/chakra-components/src/components/Organization/Avatar.tsx
@@ -1,4 +1,4 @@
-import { useStyleConfig } from '@chakra-ui/system'
+import { useStyleConfig } from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Avatar, Image, IPFSAvatarProps, IPFSImageProps } from '../layout'
 

diff --git a/packages/chakra-components/src/components/Organization/Description.tsx b/packages/chakra-components/src/components/Organization/Description.tsx
@@ -1,4 +1,4 @@
-import { ChakraProps, useStyleConfig } from '@chakra-ui/system'
+import { ChakraProps, useStyleConfig } from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'
 import { Markdown } from '../layout'

diff --git a/packages/chakra-components/src/components/Organization/Header.tsx b/packages/chakra-components/src/components/Organization/Header.tsx
@@ -1,4 +1,4 @@
-import { useStyleConfig } from '@chakra-ui/system'
+import { useStyleConfig } from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Image, IPFSImageProps } from '../layout'
 

diff --git a/packages/chakra-components/src/components/Organization/Name.tsx b/packages/chakra-components/src/components/Organization/Name.tsx
@@ -1,5 +1,4 @@
-import { HeadingProps } from '@chakra-ui/layout'
-import { chakra, forwardRef, omitThemingProps, useStyleConfig } from '@chakra-ui/system'
+import { chakra, forwardRef, HeadingProps, omitThemingProps, useStyleConfig } from '@chakra-ui/react'
 import { useOrganization } from '@vocdoni/react-providers'
 
 export const OrganizationName = forwardRef<HeadingProps, 'h1'>((props, ref) => {

diff --git a/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx b/packages/chakra-components/src/components/Pagination/EllipsisButton.tsx
@@ -1,6 +1,4 @@
-import { Button, ButtonProps } from '@chakra-ui/button'
-import { Input, InputProps } from '@chakra-ui/input'
-import { useStyleConfig } from '@chakra-ui/system'
+import { Button, ButtonProps, Input, InputProps, useStyleConfig } from '@chakra-ui/react'
 import { useState } from 'react'
 
 type EllipsisButtonProps = ButtonProps & {

diff --git a/packages/chakra-components/src/components/Pagination/Pagination.tsx b/packages/chakra-components/src/components/Pagination/Pagination.tsx
@@ -1,7 +1,12 @@
-import { ButtonGroup, ButtonGroupProps, ButtonProps } from '@chakra-ui/button'
-import { InputProps } from '@chakra-ui/input'
-import { Text } from '@chakra-ui/layout'
-import { chakra, useMultiStyleConfig } from '@chakra-ui/system'
+import {
+  ButtonGroup,
+  ButtonGroupProps,
+  ButtonProps,
+  chakra,
+  InputProps,
+  Text,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
 import { useLocalize, usePagination, useRoutedPagination } from '@vocdoni/react-providers'
 import { PaginationResponse } from '@vocdoni/sdk'
 import { ReactElement, useMemo } from 'react'

diff --git a/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx b/packages/chakra-components/src/components/Pagination/PaginatorButton.tsx
@@ -1,5 +1,4 @@
-import { Button, ButtonProps } from '@chakra-ui/button'
-import { forwardRef, useStyleConfig } from '@chakra-ui/system'
+import { Button, ButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react'
 
 export const PageButton = forwardRef<ButtonProps, 'div'>((props, ref) => {
   const styles = useStyleConfig('PageButton', props)