Merge pull request #119 from blockscout/up-chakra-version

Up-chakra-version

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.2",
-    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/react": "2.3.1",
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",

pages/[network_type]/[network_sub_type]/index.tsx

-/* eslint-disable max-len */
-import { Center, VStack, Box, chakra } from '@chakra-ui/react';
+import { Center, VStack, Box } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -15,13 +14,6 @@ const Home: NextPage = () => {
         <VStack gap={ 4 }>
           <Box>
             <p>home page for { router.query.network_type } { router.query.network_sub_type } network</p>
-            { /* for scroll demo purpose only */ }
-            <chakra.p mt={ 2 }>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at cursus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam sed nisi sit amet sem iaculis tempor. Vestibulum at risus lectus. Aliquam vitae tortor bibendum, molestie erat nec, dapibus lorem. Curabitur ac tristique dolor. Maecenas condimentum ac odio vitae hendrerit. Maecenas iaculis vitae mauris id tincidunt. Fusce ac nulla mi. Aenean quis purus vehicula, ultricies quam vel, suscipit turpis. Aliquam dignissim pharetra consequat. In at urna id orci ullamcorper iaculis. Vestibulum sed dolor eu augue elementum sodales. Duis lacus arcu, vulputate id tempus et, ultricies ut augue. Nunc sit amet mi eu massa maximus viverra at in leo.</chakra.p>
-            <chakra.p mt={ 2 }>Aliquam hendrerit nunc non metus sollicitudin, sit amet vehicula tellus interdum. Etiam molestie, odio at dapibus bibendum, velit ante gravida dui, et viverra nibh lorem vitae tellus. Pellentesque tristique orci vitae ipsum feugiat, sed elementum odio dictum. Curabitur maximus quis enim vel bibendum. Proin elementum arcu ligula, vitae elementum diam laoreet in. Etiam mollis scelerisque risus id facilisis. Nullam dapibus dignissim consequat. Praesent faucibus tincidunt metus, quis posuere tortor ullamcorper a. Fusce porttitor mollis dui a aliquam. Nunc congue tellus euismod elit aliquet, eget posuere purus gravida. Morbi ultrices pretium interdum. Phasellus ultricies felis euismod malesuada luctus.</chakra.p>
-            <chakra.p mt={ 2 }>Nulla eget accumsan mauris. Aliquam ultrices porta diam, a viverra dui aliquam quis. Praesent porttitor ultricies volutpat. Ut sem metus, venenatis in lacus placerat, rhoncus ornare dolor. In hac habitasse platea dictumst. Nullam ac ornare quam. Aenean sed congue nisl. Mauris malesuada egestas erat, a finibus purus consequat nec. Mauris congue scelerisque urna non faucibus. Sed vehicula vitae sem eu varius. In sit amet nunc non metus fermentum finibus.</chakra.p>
-            <chakra.p mt={ 2 }>Nulla sollicitudin fringilla mauris in ornare. Donec consectetur ultricies lorem ac rhoncus. Mauris dictum vestibulum sollicitudin. Cras in orci eget urna sollicitudin auctor. Suspendisse pellentesque eget purus nec facilisis. Nunc in vulputate odio. Aenean viverra malesuada consequat. Quisque eleifend faucibus aliquam. Aenean dui erat, ultricies quis iaculis sed, malesuada eleifend justo. Proin sollicitudin venenatis cursus. Mauris quis enim mollis, lacinia metus in, luctus ligula.</chakra.p>
-            <chakra.p mt={ 2 }>Vestibulum eget mollis arcu, sed malesuada massa. Nunc at est vel felis scelerisque sollicitudin. Vestibulum vulputate ipsum sapien, eu vestibulum nibh maximus tincidunt. Sed posuere fermentum leo nec bibendum. Cras tincidunt dui ullamcorper lectus luctus, vitae consequat velit scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eleifend imperdiet ultrices. Etiam ullamcorper mi semper interdum iaculis. Suspendisse urna lacus, egestas ut vehicula non, varius non diam. Nunc consequat eros in accumsan interdum. Morbi blandit risus sollicitudin, suscipit nisl at, malesuada est. Vestibulum eget molestie diam. Suspendisse potenti.</chakra.p>
-            <chakra.p mt={ 2 }>Pellentesque enim risus, elementum ut ornare id, faucibus in urna. Sed laoreet iaculis augue in fermentum. Morbi nec lacus pharetra, condimentum justo eget, commodo est. Donec nec auctor sapien, eget fringilla nisl. Aliquam ac ex rhoncus, tempor augue quis, aliquet sapien. Curabitur ullamcorper lacus orci, eget placerat velit sollicitudin non. Praesent imperdiet convallis tincidunt. Aliquam venenatis ultricies orci. Mauris accumsan volutpat magna vel condimentum. Donec et volutpat enim. Cras ac purus eget ex bibendum sollicitudin sed eget ligula. Nunc magna velit, feugiat in accumsan quis, aliquet posuere lorem. Proin dapibus leo sem, vitae dignissim odio malesuada eget. Donec venenatis pretium porta. In tempus eros at magna consectetur, id pellentesque magna iaculis.</chakra.p>
           </Box>
         </VStack>
       </Center>

theme/components/Alert.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-
-const Alert: ComponentStyleConfig = {
-  baseStyle: {
-    container: {
-      borderRadius: '12px',
-      px: 6,
-      py: 4,
-    },
+import { alertAnatomy as parts } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyle = definePartsStyle({
+  container: {
+    borderRadius: 'md',
+    px: 6,
+    py: 4,
   },
-};
+});
+
+const Alert = defineMultiStyleConfig({
+  baseStyle,
+});
 
 export default Alert;

theme/components/Button.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 
-const variantPrimary = {
+const variantPrimary = defineStyle({
   bg: 'blue.600',
   color: 'white',
   fontWeight: 600,
@@ -15,9 +14,9 @@ const variantPrimary = {
   _disabled: {
     opacity: 0.2,
   },
-};
+});
 
-const variantSecondary: SystemStyleFunction = (props) => {
+const variantSecondary = defineStyle((props) => {
   return {
     color: mode('blue.600', 'blue.300')(props),
     fontWeight: 600,
@@ -31,18 +30,18 @@ const variantSecondary: SystemStyleFunction = (props) => {
       opacity: 0.2,
     },
   };
-};
+});
 
-const variantIcon: SystemStyleFunction = (props) => {
+const variantIcon = defineStyle((props) => {
   return {
     color: mode('blue.600', 'blue.300')(props),
     _hover: {
       color: mode('blue.400', 'blue.200')(props),
     },
   };
-};
+});
 
-const variantIconBorder = {
+const variantIconBorder = defineStyle({
   color: 'blue.600',
   borderColor: 'blue.600',
   border: '2px solid',
@@ -53,7 +52,7 @@ const variantIconBorder = {
   _disabled: {
     opacity: 0.2,
   },
-};
+});
 
 const variants = {
   primary: variantPrimary,
@@ -62,38 +61,42 @@ const variants = {
   iconBorder: variantIconBorder,
 };
 
-const Button: ComponentStyleConfig = {
-  baseStyle: {
-    fontWeight: 'normal',
-    borderRadius: 'base',
-  },
-  variants,
-  sizes: {
-    lg: {
-      h: 12,
-      minW: 'unset',
-      fontSize: 'lg',
-      px: 6,
-    },
-    md: {
-      h: 10,
-      minW: 'unset',
-      fontSize: 'md',
-      px: 4,
-    },
-    sm: {
-      h: 8,
-      minW: 'unset',
-      fontSize: 'sm',
-      px: 3,
-    },
-    xs: {
-      h: 6,
-      minW: 'unset',
-      fontSize: 'xs',
-      px: 2,
-    },
-  },
+const baseStyle = defineStyle({
+  fontWeight: 'normal',
+  borderRadius: 'base',
+});
+
+const sizes = {
+  lg: defineStyle({
+    h: 12,
+    minW: 'unset',
+    fontSize: 'lg',
+    px: 6,
+  }),
+  md: defineStyle({
+    h: 10,
+    minW: 'unset',
+    fontSize: 'md',
+    px: 4,
+  }),
+  sm: defineStyle({
+    h: 8,
+    minW: 'unset',
+    fontSize: 'sm',
+    px: 3,
+  }),
+  xs: defineStyle({
+    h: 6,
+    minW: 'unset',
+    fontSize: 'xs',
+    px: 2,
+  }),
 };
 
+const Button = defineStyleConfig({
+  baseStyle,
+  variants,
+  sizes,
+});
+
 export default Button;

theme/components/Checkbox.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import { checkboxAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
 
-const baseStyleLabel: SystemStyleObject = {
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleLabel = defineStyle({
   _disabled: { opacity: 0.2 },
-};
+});
+
+const baseStyle = definePartsStyle({
+  label: baseStyleLabel,
+});
 
-const Checkbox: ComponentStyleConfig = {
-  baseStyle: {
-    label: baseStyleLabel,
-  },
-};
+const Checkbox = defineMultiStyleConfig({
+  baseStyle,
+});
 
 export default Checkbox;

theme/components/Drawer.ts

-import type { drawerAnatomy as parts } from '@chakra-ui/anatomy';
-import type { SystemStyleFunction, PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
+import { drawerAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+import { mode, runIfFn } from '@chakra-ui/theme-tools';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
 
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
+
 const transitionProps = getDefaultTransitionProps();
 
-const baseStyleOverlay: SystemStyleObject = {
+const baseStyleOverlay = defineStyle({
   ...transitionProps,
   bg: 'blackAlpha.800',
   zIndex: 'overlay',
-};
+});
 
-const baseStyleDialog: SystemStyleFunction = (props) => {
+const baseStyleDialog = defineStyle((props) => {
   const { isFullHeight } = props;
 
   return {
@@ -23,15 +30,15 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
     color: 'inherit',
     boxShadow: mode('lg', 'dark-lg')(props),
   };
-};
+});
 
-const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
+const baseStyle = definePartsStyle((props) => ({
   overlay: baseStyleOverlay,
-  dialog: baseStyleDialog(props),
-});
+  dialog: runIfFn(baseStyleDialog, props),
+}));
 
-const Drawer = {
+const Drawer = defineMultiStyleConfig({
   baseStyle,
-};
+});
 
 export default Drawer;

theme/components/Form.ts

-import type { formAnatomy as parts } from '@chakra-ui/anatomy';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { formAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+} from '@chakra-ui/styled-system';
 import { getColor, mode } from '@chakra-ui/theme-tools';
-import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
 import type { Dict } from '@chakra-ui/utils';
 
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
 const getActiveLabelStyles = (theme: Dict, fc: string, bc: string, size: 'md' | 'lg') => {
   const baseStyles = {
     backgroundColor: bc,
@@ -84,7 +88,7 @@ const getActiveInputStyles = (size: 'md' | 'lg') => {
   }
 };
 
-const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
+const variantFloating = definePartsStyle((props) => {
   const { theme, backgroundColor, size = 'md' } = props;
   const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
   const bc = backgroundColor || mode('white', 'black')(props);
@@ -151,12 +155,14 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
       color: mode('gray.500', 'whiteAlpha.400')(props),
     },
   };
-};
+});
 
-const Form: ComponentStyleConfig = {
-  variants: {
-    floating: variantFloating,
-  },
+const variants = {
+  floating: variantFloating,
 };
 
+const Form = defineMultiStyleConfig({
+  variants,
+});
+
 export default Form;

theme/components/Heading.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import type { SystemStyleInterpolation } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
@@ -10,24 +10,24 @@ const baseStyle: SystemStyleInterpolation = (props) => {
 };
 
 const sizes = {
-  lg: {
+  lg: defineStyle({
     fontSize: '32px',
     lineHeight: '40px',
     letterSpacing: '-0.5px',
-  },
-  md: {
+  }),
+  md: defineStyle({
     fontSize: '24px',
     lineHeight: '32px',
-  },
-  sm: {
+  }),
+  sm: defineStyle({
     fontSize: '18px',
     lineHeight: '24px',
-  },
+  }),
 };
 
-const Heading: ComponentStyleConfig = {
+const Heading = defineStyleConfig({
   sizes,
   baseStyle,
-};
+});
 
 export default Heading;

theme/components/Input.ts

-import type { inputAnatomy as parts } from '@chakra-ui/anatomy';
+import { inputAnatomy as parts } from '@chakra-ui/anatomy';
 import { Input as InputComponent } from '@chakra-ui/react';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
 
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-const sizes: Record<string, SystemStyleObject> = {
-  sm: {
+const size = {
+  sm: defineStyle({
     fontSize: 'md',
     lineHeight: '24px',
     px: '8px',
     py: '12px',
     h: '40px',
     borderRadius: 'base',
-  },
-  md: {
+  }),
+  md: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
     px: '20px',
     py: '20px',
     h: '60px',
     borderRadius: 'base',
-  },
-  lg: {
+  }),
+  lg: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
     px: '24px',
     py: '28px',
     h: '80px',
     borderRadius: 'base',
-  },
+  }),
 };
 
-const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
+const variantOutline = definePartsStyle((props) => {
   const transitionProps = getDefaultTransitionProps();
 
   return {
@@ -47,30 +52,34 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
       ...transitionProps,
     },
   };
+});
+
+const sizes = {
+  sm: definePartsStyle({
+    field: size.sm,
+    addon: size.sm,
+  }),
+  md: definePartsStyle({
+    field: size.md,
+    addon: size.md,
+  }),
+  lg: definePartsStyle({
+    field: size.lg,
+    addon: size.lg,
+  }),
 };
 
-const Input: ComponentStyleConfig = {
-  sizes: {
-    sm: {
-      field: sizes.sm,
-      addon: sizes.sm,
-    },
-    md: {
-      field: sizes.md,
-      addon: sizes.md,
-    },
-    lg: {
-      field: sizes.lg,
-      addon: sizes.lg,
-    },
-  },
+const variants = {
+  outline: variantOutline,
+};
+
+const Input = defineMultiStyleConfig({
+  sizes,
+  variants,
   defaultProps: {
     size: 'md',
   },
-  variants: {
-    outline: variantOutline,
-  },
-};
+});
 
 InputComponent.defaultProps = {
   ...InputComponent.defaultProps,

theme/components/Link.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleInterpolation } from '@chakra-ui/styled-system';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
-import type { SystemStyleFunction, SystemStyleInterpolation } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
-const baseStyle: SystemStyleInterpolation = {
-  ...getDefaultTransitionProps(),
-};
+const baseStyle = defineStyle(getDefaultTransitionProps());
 
-const variantPrimary: SystemStyleFunction = (props) => {
+const variantPrimary = defineStyle((props) => {
   return {
     color: mode('blue.600', 'blue.300')(props),
     _hover: {
       color: mode('blue.400', 'blue.200')(props),
     },
   };
-};
+});
 
-const variantSecondary: SystemStyleFunction = (props) => {
+const variantSecondary = defineStyle((props) => {
   return {
     color: mode('gray.500', 'gray.500')(props),
     _hover: {
       color: mode('gray.600', 'gray.400')(props),
     },
   };
-};
+});
 
-const variants = {
+const variants: Record<string, SystemStyleInterpolation> = {
   primary: variantPrimary,
   secondary: variantSecondary,
 };
@@ -35,10 +33,10 @@ const defaultProps = {
   variant: 'primary',
 };
 
-const Link: ComponentStyleConfig = {
+const Link = defineStyleConfig({
   variants,
   defaultProps,
   baseStyle,
-};
+});
 
 export default Link;

theme/components/Modal.ts

 import { modalAnatomy as parts } from '@chakra-ui/anatomy';
-import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
-import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
+import { Modal as ModalComponent } from '@chakra-ui/react';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+import { mode, runIfFn } from '@chakra-ui/theme-tools';
 
-const baseStyleDialog: SystemStyleFunction = (props) => {
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleDialog = defineStyle((props) => {
   return {
     padding: 8,
     borderRadius: 'lg',
     bg: mode('white', 'gray.900')(props),
     margin: 'auto',
   };
-};
+});
 
-const baseStyleDialogContainer = {
+const baseStyleDialogContainer = defineStyle({
   '::-webkit-scrollbar': { display: 'none' },
   'scrollbar-width': 'none',
   '@supports (height: -webkit-fill-available)': { height: '100vh' },
-};
+});
 
-const baseStyleHeader: SystemStyleFunction = (props) => ({
+const baseStyleHeader = defineStyle((props) => ({
   padding: 0,
   marginBottom: 8,
   fontSize: '2xl',
   lineHeight: 10,
   color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
-});
+}));
 
-const baseStyleBody = {
+const baseStyleBody = defineStyle({
   padding: 0,
   marginBottom: 8,
-};
+});
 
-const baseStyleFooter = {
+const baseStyleFooter = defineStyle({
   padding: 0,
   justifyContent: 'flex-start',
-};
+});
 
-const baseStyleCloseButton: SystemStyleFunction = (props) => {
+const baseStyleCloseButton = defineStyle((props) => {
   return {
     top: 8,
     right: 8,
@@ -46,35 +52,46 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => {
     _hover: { color: 'blue.400' },
     _active: { bg: 'none' },
   };
-};
-const baseStyleOverlay = {
+});
+
+const baseStyleOverlay = defineStyle({
   bg: 'blackAlpha.800',
-};
+});
 
-const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
-  dialog: baseStyleDialog(props),
+const baseStyle = definePartsStyle((props) => ({
+  dialog: runIfFn(baseStyleDialog, props),
   dialogContainer: baseStyleDialogContainer,
-  header: baseStyleHeader(props),
+  header: runIfFn(baseStyleHeader, props),
   body: baseStyleBody,
   footer: baseStyleFooter,
-  closeButton: baseStyleCloseButton(props),
+  closeButton: runIfFn(baseStyleCloseButton, props),
   overlay: baseStyleOverlay,
-});
+}));
 
 const sizes = {
-  md: {
+  md: definePartsStyle({
     dialog: {
       maxW: '760px',
     },
-  },
+  }),
+  full: definePartsStyle({
+    dialog: {
+      maxW: '100vw',
+      minH: '100vh',
+      my: '0',
+      borderRadius: '0',
+    },
+  }),
 };
 
-const Modal: ComponentMultiStyleConfig = {
-  parts: parts.keys,
+const Modal = defineMultiStyleConfig({
   sizes,
   baseStyle,
-};
-
-Modal.defaultProps = { isCentered: true };
+});
 
 export default Modal;
+
+ModalComponent.defaultProps = {
+  ...ModalComponent.defaultProps,
+  isCentered: true,
+};

theme/components/Popover.ts

 import { popoverAnatomy as parts } from '@chakra-ui/anatomy';
-import type { PartsStyleFunction, SystemStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
 import { cssVar, mode } from '@chakra-ui/theme-tools';
 
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
 const $popperBg = cssVar('popper-bg');
 
 const $arrowBg = cssVar('popper-arrow-bg');
 const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
 
-const baseStylePopper: SystemStyleObject = {
+const baseStylePopper = defineStyle({
   zIndex: 10,
-};
+});
 
-const baseStyleContent: SystemStyleFunction = (props) => {
+const baseStyleContent = defineStyle((props) => {
   const bg = mode('white', 'gray.900')(props);
   const shadowColor = mode('gray.200', 'whiteAlpha.300')(props);
 
@@ -31,34 +37,34 @@ const baseStyleContent: SystemStyleFunction = (props) => {
       boxShadow: '2xl',
     },
   };
-};
+});
 
-const baseStyleHeader: SystemStyleObject = {
+const baseStyleHeader = defineStyle({
   px: 3,
   py: 2,
   borderBottomWidth: '1px',
-};
+});
 
-const baseStyleBody: SystemStyleObject = {
+const baseStyleBody = defineStyle({
   px: 4,
   py: 4,
-};
+});
 
-const baseStyleFooter: SystemStyleObject = {
+const baseStyleFooter = defineStyle({
   px: 3,
   py: 2,
   borderTopWidth: '1px',
-};
+});
 
-const baseStyleCloseButton: SystemStyleObject = {
+const baseStyleCloseButton = defineStyle({
   position: 'absolute',
   borderRadius: 'md',
   top: 1,
   insetEnd: 2,
   padding: 2,
-};
+});
 
-const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
+const baseStyle = definePartsStyle((props) => ({
   popper: baseStylePopper,
   content: baseStyleContent(props),
   header: baseStyleHeader,
@@ -66,11 +72,10 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   footer: baseStyleFooter,
   arrow: {},
   closeButton: baseStyleCloseButton,
-});
+}));
 
-const Popover = {
-  parts: parts.keys,
+const Popover = defineMultiStyleConfig({
   baseStyle,
-};
+});
 
 export default Popover;

theme/components/Radio.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import { radioAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
 
-const baseStyleLabel: SystemStyleObject = {
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleLabel = defineStyle({
   _disabled: { opacity: 0.2 },
-};
+});
+
+const baseStyle = definePartsStyle({
+  label: baseStyleLabel,
+});
 
-const Radio: ComponentStyleConfig = {
-  baseStyle: {
-    label: baseStyleLabel,
-  },
-};
+const Radio = defineMultiStyleConfig({
+  baseStyle,
+});
 
 export default Radio;

theme/components/Skeleton.ts

 import { Skeleton as SkeletonComponent } from '@chakra-ui/react';
+import {
+  defineStyle,
+  defineStyleConfig,
+} from '@chakra-ui/styled-system';
 import { keyframes } from '@chakra-ui/system';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 import { getColor, mode } from '@chakra-ui/theme-tools';
 
 const shine = () =>
@@ -8,14 +11,13 @@ const shine = () =>
     to: { backgroundPositionX: '-200%' },
   });
 
-const baseStyle: SystemStyleFunction = (props) => {
+const baseStyle = defineStyle((props) => {
   const defaultStartColor = mode('blackAlpha.50', 'whiteAlpha.50')(props);
   const defaultEndColor = mode('blackAlpha.100', 'whiteAlpha.100')(props);
 
   const {
     startColor = defaultStartColor,
     endColor = defaultEndColor,
-    speed,
     theme,
   } = props;
 
@@ -28,17 +30,17 @@ const baseStyle: SystemStyleFunction = (props) => {
     borderColor: start,
     background: `linear-gradient(90deg, ${ start } 8%, ${ end } 18%, ${ start } 33%)`,
     backgroundSize: '200% 100%',
-    animation: `${ speed }s linear infinite ${ shine() }`,
   };
-};
+});
 
-const Skeleton = {
+const Skeleton = defineStyleConfig({
   baseStyle,
-};
+});
 
 export default Skeleton;
 
 SkeletonComponent.defaultProps = {
   ...SkeletonComponent.defaultProps,
   speed: 1,
+  animation: `1s linear infinite ${ shine() }`,
 };

theme/components/Table.ts

-import type { tableAnatomy as parts } from '@chakra-ui/anatomy';
-import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
+import { tableAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+} from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
-import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
-const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const variantSimple = definePartsStyle((props) => {
   const transitionProps = getDefaultTransitionProps();
 
   return {
@@ -23,49 +27,54 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
       ...transitionProps,
     },
   };
-};
+});
 
-const Table: ComponentMultiStyleConfig = {
-  parts: [ 'th', 'td', 'table', 'thead' ],
-  baseStyle: {
-    thead: {
-      backgroundColor: 'gray.50',
-    },
+const sizes = {
+  md: definePartsStyle({
     th: {
-      textTransform: 'none',
-      fontFamily: 'body',
-      fontWeight: '500',
-      overflow: 'hidden',
-      color: 'gray.500',
-      letterSpacing: 'none',
+      px: 4,
+      fontSize: 'sm',
     },
     td: {
-      fontSize: 'md',
-      verticalAlign: 'top',
-    },
-    table: {
-      tableLayout: 'fixed',
-      borderTopLeftRadius: 'base',
-      borderTopRightRadius: 'base',
-      overflow: 'hidden',
-      fontVariant: 'normal',
+      px: 4,
+      py: 6,
     },
+  }),
+};
+
+const variants = {
+  simple: variantSimple,
+};
+
+const baseStyle = definePartsStyle({
+  thead: {
+    backgroundColor: 'gray.50',
   },
-  sizes: {
-    md: {
-      th: {
-        px: 4,
-        fontSize: 'sm',
-      },
-      td: {
-        px: 4,
-        py: 6,
-      },
-    },
+  th: {
+    textTransform: 'none',
+    fontFamily: 'body',
+    fontWeight: '500',
+    overflow: 'hidden',
+    color: 'gray.500',
+    letterSpacing: 'none',
   },
-  variants: {
-    simple: variantSimple,
+  td: {
+    fontSize: 'md',
+    verticalAlign: 'top',
   },
-};
+  table: {
+    tableLayout: 'fixed',
+    borderTopLeftRadius: 'base',
+    borderTopRightRadius: 'base',
+    overflow: 'hidden',
+    fontVariant: 'normal',
+  },
+});
+
+const Table = defineMultiStyleConfig({
+  baseStyle,
+  sizes,
+  variants,
+});
 
 export default Table;

theme/components/Tabs.ts

-import type { tabsAnatomy as parts } from '@chakra-ui/anatomy';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type {
-  PartsStyleFunction,
-} from '@chakra-ui/theme-tools';
+import { tabsAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+} from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
 
-const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
+const variantSoftRounded = definePartsStyle((props) => {
   return {
     tab: {
       borderRadius: 'base',
@@ -23,12 +24,14 @@ const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
       },
     },
   };
-};
+});
 
-const Tabs: ComponentStyleConfig = {
-  variants: {
-    'soft-rounded': variantSoftRounded,
-  },
+const variants = {
+  'soft-rounded': variantSoftRounded,
 };
 
+const Tabs = defineMultiStyleConfig({
+  variants,
+});
+
 export default Tabs;

theme/components/Tag.ts

-import type { tagAnatomy as parts } from '@chakra-ui/anatomy';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { tagAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
-import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
 
 import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
-const variantGray: PartsStyleFunction<typeof parts> = (props) => {
+const variantGray = definePartsStyle((props) => {
   const transitionProps = getDefaultTransitionProps();
 
   return {
@@ -15,22 +20,26 @@ const variantGray: PartsStyleFunction<typeof parts> = (props) => {
       ...transitionProps,
     },
   };
-};
+});
 
 const variants = {
   gray: variantGray,
 };
 
-const Tag: ComponentStyleConfig = {
-  baseStyle: {
-    container: {
-      display: 'inline-block',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      borderRadius: 'sm',
-    },
-  },
+const baseStyleContainer = defineStyle({
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  borderRadius: 'sm',
+});
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+});
+
+const Tag = defineMultiStyleConfig({
+  baseStyle,
   variants,
-};
+});
 
 export default Tag;

theme/components/Text.ts

-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
+import type { SystemStyleInterpolation } from '@chakra-ui/styled-system';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
 
-const variantPrimary: SystemStyleFunction = (props) => ({
+const variantPrimary = defineStyle((props) => ({
   color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
-});
+}));
 
-const variantSecondary: SystemStyleFunction = (props) => ({
+const variantSecondary = defineStyle((props) => ({
   color: mode('gray.500', 'gray.400')(props),
-});
+}));
 
-const variantAlternate: SystemStyleFunction = (props) => ({
+const variantAlternate = defineStyle((props) => ({
   color: mode('blue.600', 'blue.300')(props),
-});
+}));
 
 const variantInherit = {
   color: 'inherit',
 };
 
-const variants = {
+const variants: Record<string, SystemStyleInterpolation> = {
   primary: variantPrimary,
   secondary: variantSecondary,
   alternate: variantAlternate,
@@ -29,9 +29,9 @@ const defaultProps = {
   variant: 'primary',
 };
 
-const Text: ComponentStyleConfig = {
+const Text = defineStyleConfig({
   defaultProps,
   variants,
-};
+});
 
 export default Text;

theme/components/Textarea.ts

 import { Textarea as TextareaComponent } from '@chakra-ui/react';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type {
-  SystemStyleObject,
-} from '@chakra-ui/theme-tools';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
-const sizes: Record<string, SystemStyleObject> = {
-  lg: {
+const sizes = {
+  lg: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',
     px: '24px',
     py: '28px',
     h: '160px',
     borderRadius: 'base',
-  },
+  }),
 };
 
-const Textarea: ComponentStyleConfig = {
+const Textarea = defineStyleConfig({
   sizes,
   variants: {
-    outline: (props) => getOutlinedFieldStyles(props),
+    outline: defineStyle(getOutlinedFieldStyles),
   },
   defaultProps: {
-    size: 'md',
     variant: 'outline',
   },
-};
+});
 
 TextareaComponent.defaultProps = {
   ...TextareaComponent.defaultProps,

theme/components/Tooltip.ts

 import { Tooltip as TooltipComponent } from '@chakra-ui/react';
-import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { mode, cssVar } from '@chakra-ui/theme-tools';
 
-const variantNav: SystemStyleFunction = (props) => {
+const $bg = cssVar('tooltip-bg');
+const $fg = cssVar('tooltip-fg');
+const $arrowBg = cssVar('popper-arrow-bg');
+
+const variantNav = defineStyle((props) => {
   return {
     bg: mode('blue.50', 'gray.800')(props),
     color: 'blue.400',
@@ -16,18 +19,30 @@ const variantNav: SystemStyleFunction = (props) => {
     boxShadow: 'none',
     fontWeight: '500',
   };
-};
+});
 
 const variants = {
   nav: variantNav,
 };
 
-const Tooltip: ComponentStyleConfig = {
-  variants,
-  baseStyle: {
+const baseStyle = defineStyle((props) => {
+  const bg = mode('gray.700', 'gray.200')(props);
+  const fg = mode('white', 'black')(props);
+
+  return {
+    bg: $bg.reference,
+    color: mode('white', 'black')(props),
+    [$bg.variable]: `colors.${ bg }`,
+    [$fg.reference]: `colors.${ fg }`,
+    [$arrowBg.variable]: $bg.reference,
     maxWidth: 'unset',
-  },
-};
+  };
+});
+
+const Tooltip = defineStyleConfig({
+  variants,
+  baseStyle,
+});
 
 TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true };
 

ui/blocks/navigation/NavFooter.tsx

@@ -43,6 +43,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
       paddingTop={ isMobile ? 6 : 8 }
       marginTop={ isMobile ? 6 : 20 }
       alignItems="flex-start"
+      alignSelf="center"
       color="gray.500"
       fontSize="xs"
       { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }

ui/blocks/navigation/NavigationDesktop.tsx

@@ -43,7 +43,7 @@ const NavigationDesktop = () => {
     <Flex
       position="relative"
       flexDirection="column"
-      alignItems="center"
+      alignItems="flex-start"
       borderRight="1px solid"
       borderColor={ containerBorderColor }
       px={ isCollapsed ? 4 : 6 }