chore: bump deps, minor code migrations

lib/chakra-re-exports/index.ts

@@ -271,7 +271,7 @@ export type { UseOutsideClickProps } from '@chakra-ui/react';
 export { useOutsideClick } from '@chakra-ui/react';
 
 // Misc
-export type { As, ChakraProps, SystemStyleObject, ThemeTypings } from '@chakra-ui/react';
+export type { AsProps, ChakraProps, SystemStyleObject, ThemeTypings } from '@chakra-ui/react';
 export {
   chakra,
   ChakraProvider,

lib/components/context-menu/context-menu.tsx

@@ -175,7 +175,7 @@ export const ContextMenu = typedMemo(
       };
     }, [onPointerCancel, onPointerDown, onPointerMove, onPointerUp, withLongPress]);
 
-    useEventListener('contextmenu', onContextMenu);
+    useEventListener(window, 'contextmenu', onContextMenu);
 
     return (
       <>

lib/components/form/form-control-group-context.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+import type { FormControlProps } from './form-control';
+import type { FormLabelProps } from './form-label';
+
+export type FormControlGroupContext = {
+  formLabelProps?: FormLabelProps;
+  formControlProps?: FormControlProps;
+  isDisabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+};
+
+export const FormControlGroupContext = createContext<FormControlGroupContext>({});

lib/components/form/form-control-group.tsx

@@ -1,18 +1,7 @@
 import type { PropsWithChildren } from 'react';
-import { createContext } from 'react';
 
 import { typedMemo } from '../../util';
-import type { FormControlProps } from './form-control';
-import type { FormLabelProps } from './form-label';
-
-export type FormControlGroupContext = {
-  formLabelProps?: FormLabelProps;
-  formControlProps?: FormControlProps;
-  isDisabled?: boolean;
-  orientation?: 'horizontal' | 'vertical';
-};
-
-export const FormControlGroupContext = createContext<FormControlGroupContext>({});
+import { FormControlGroupContext } from './form-control-group-context';
 
 export type FormControlGroupProps = PropsWithChildren<FormControlGroupContext>;
 

lib/components/form/form-control.tsx

@@ -3,7 +3,7 @@ import { FormControl as ChakraFormControl, forwardRef } from '@chakra-ui/react';
 import { useContext, useMemo } from 'react';
 
 import { typedMemo } from '../../util';
-import { FormControlGroupContext } from './form-control-group';
+import { FormControlGroupContext } from './form-control-group-context';
 
 export type FormControlProps = ChakraFormControlProps;
 

lib/components/form/form-label.tsx

@@ -3,7 +3,7 @@ import { FormLabel as ChakraFormLabel, forwardRef } from '@chakra-ui/react';
 import { useContext } from 'react';
 
 import { typedMemo } from '../../util';
-import { FormControlGroupContext } from './form-control-group';
+import { FormControlGroupContext } from './form-control-group-context';
 
 export type FormLabelProps = ChakraFormLabelProps;
 

lib/theme/animations.ts

@@ -1,5 +1,5 @@
-import { keyframes } from '@chakra-ui/react';
 import type { Keyframes } from '@emotion/react';
+import { keyframes } from '@emotion/react';
 
 export const spinKeyframes: Keyframes = keyframes`
   from {

package.json

@@ -31,25 +31,25 @@
     "typescript": "tsc --p ./tsconfig-build.json --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/anatomy": "^2.2.2",
-    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/anatomy": "^2.3.4",
+    "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/layout": "^2.3.1",
     "@chakra-ui/portal": "^2.1.0",
-    "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/styled-system": "^2.9.2",
-    "@chakra-ui/theme-tools": "^2.1.2",
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
+    "@chakra-ui/react": "^2.10.4",
+    "@chakra-ui/styled-system": "^2.12.0",
+    "@chakra-ui/theme-tools": "^2.2.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@nanostores/react": "^0.7.3",
-    "chakra-react-select": "^4.9.1",
+    "chakra-react-select": "^4.10.1",
     "framer-motion": "^10.18.0",
     "lodash-es": "^4.17.21",
-    "nanostores": "^0.11.2",
+    "nanostores": "^0.11.3",
     "overlayscrollbars": "2.10.0",
     "overlayscrollbars-react": "^0.5.6",
-    "react-i18next": "^15.0.1",
-    "react-icons": "^5.2.1",
-    "react-select": "^5.8.0"
+    "react-i18next": "^15.4.0",
+    "react-icons": "^5.4.0",
+    "react-select": "^5.9.0"
   },
   "peerDependencies": {
     "@fontsource-variable/inter": "^5.0.16",
@@ -59,26 +59,26 @@
   "devDependencies": {
     "@invoke-ai/eslint-config-react": "^0.0.14",
     "@invoke-ai/prettier-config-react": "^0.0.7",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-interactions": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/addon-onboarding": "^8.2.8",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/react-vite": "^8.2.8",
-    "@storybook/test": "^8.2.8",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.2.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
-    "prettier": "^3.3.3",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.2.8",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0",
-    "vite-plugin-dts": "^4.0.2"
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^8.57.1",
+    "prettier": "^3.4.2",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.4.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [