up packages versions

package.json

@@ -27,13 +27,13 @@
     "test:jest:watch": "jest --watch"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.3.1",
-    "@chakra-ui/theme-tools": "^2.0.2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/react": "2.4.3",
+    "@chakra-ui/theme-tools": "^2.0.14",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@sentry/nextjs": "^7.12.1",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
+    "@sentry/react": "^7.24.0",
+    "@sentry/tracing": "^7.24.0",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
@@ -41,15 +41,15 @@
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "ethers": "^5.7.1",
-    "framer-motion": "^6",
+    "framer-motion": "^6.5.1",
     "lodash": "^4.0.0",
     "next": "12.2.5",
     "node-fetch": "^3.2.9",
     "phoenix": "^1.6.15",
     "pino-http": "^8.2.1",
     "pino-pretty": "^9.1.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.33.1",
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",

theme/components/Form.ts

 import { formAnatomy as parts } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-import { getColor, mode } from '@chakra-ui/theme-tools';
+import { getColor } from '@chakra-ui/theme-tools';
 
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 import FormLabel from './FormLabel';
@@ -13,7 +13,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunctionProps) {
   const { theme } = props;
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const { focusPlaceholderColor, errorColor } = getDefaultFormColors(props);
 
   const activeLabelStyles = {
     ...FormLabel.variants?.floating?.(props)._focusWithin,
@@ -62,7 +62,7 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
       'input[aria-invalid=true] + label, textarea[aria-invalid=true] + label': {
-        color: getColor(theme, ec),
+        color: getColor(theme, errorColor),
       },
 
       // input styles
@@ -78,20 +78,20 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
 
       // indicator styles
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
-        color: getColor(theme, fc),
+        color: getColor(theme, focusPlaceholderColor),
       },
       'input[aria-invalid=true] + label .chakra-form__required-indicator, textarea[aria-invalid=true] + label .chakra-form__required-indicator': {
-        color: getColor(theme, ec),
+        color: getColor(theme, errorColor),
       },
     },
   };
 }
 
-const baseStyle = definePartsStyle((props) => {
+const baseStyle = definePartsStyle(() => {
   return {
     requiredIndicator: {
       marginStart: 0,
-      color: mode('gray.500', 'whiteAlpha.400')(props),
+      color: 'gray.500',
     },
   };
 });

theme/components/FormLabel.ts

@@ -19,7 +19,7 @@ const baseStyle = defineStyle({
 
 const variantFloating = defineStyle((props) => {
   const { theme, backgroundColor } = props;
-  const { focusColor: fc } = getDefaultFormColors(props);
+  const { focusPlaceholderColor } = getDefaultFormColors(props);
   const bc = backgroundColor || mode('white', 'black')(props);
 
   return {
@@ -40,7 +40,7 @@ const variantFloating = defineStyle((props) => {
     textOverflow: 'ellipsis',
     _focusWithin: {
       backgroundColor: bc,
-      color: getColor(theme, fc),
+      color: getColor(theme, focusPlaceholderColor),
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',

theme/utils/getDefaultFormColors.ts

@@ -4,7 +4,8 @@ import { mode } from '@chakra-ui/theme-tools';
 export default function getDefaultFormColors(props: StyleFunctionProps) {
   const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
   return {
-    focusColor: fc || mode('brand.700', 'brand.300')(props),
+    focusBorderColor: fc || mode('blue.500', 'blue.300')(props),
+    focusPlaceholderColor: fc || 'gray.500',
     errorColor: ec || mode('red.400', 'red.300')(props),
     filledColor: flc || mode('gray.300', 'gray.600')(props),
   };

theme/utils/getOutlinedFieldStyles.ts

@@ -6,7 +6,7 @@ import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
   const { theme, borderColor } = props;
-  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+  const { focusBorderColor, errorColor } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
@@ -32,12 +32,12 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       },
     },
     _invalid: {
-      borderColor: getColor(theme, ec),
+      borderColor: getColor(theme, errorColor),
       boxShadow: `none`,
     },
     _focusVisible: {
       zIndex: 1,
-      borderColor: getColor(theme, fc),
+      borderColor: getColor(theme, focusBorderColor),
       boxShadow: 'md',
     },
     _placeholder: {