@nulogy/components 16.0.0 → 16.0.2

package/dist/src/theme/NDSThemeProvider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import isPropValid from "@emotion/is-prop-valid";
 import { StyleSheetManager, ThemeProvider } from "styled-components";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
@@ -6,8 +6,7 @@ import { useNDSTheme } from "./useNDSTheme";
 export default function NDSThemeProvider({ customTheme, children }) {
     const variant = useComponentVariant();
     const theme = useNDSTheme(variant, customTheme);
-    return (React.createElement(StyleSheetManager, { enableVendorPrefixes: true, shouldForwardProp: shouldForwardProp },
-        React.createElement(ThemeProvider, { theme: theme }, children)));
+    return (_jsx(StyleSheetManager, { enableVendorPrefixes: true, shouldForwardProp: shouldForwardProp, children: _jsx(ThemeProvider, { theme: theme, children: children }) }));
 }
 function shouldForwardProp(propName, target) {
     if (typeof target === "string") {

package/dist/src/utils/DetectOutsideClick.d.ts

@@ -6,6 +6,6 @@ export default class DetectOutsideClick extends React.Component<any, any, any> {
     handleOutsideClick(e: any): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 import React from "react";

package/dist/src/utils/DetectOutsideClick.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 /**
  * @deprecated use `useClickOutside` instead
@@ -34,6 +35,6 @@ export default class DetectOutsideClick extends React.Component {
     }
     render() {
         const { children } = this.props;
-        return React.createElement(React.Fragment, null, children);
+        return _jsx(_Fragment, { children: children });
     }
 }

package/dist/src/utils/ScrollIndicators.d.ts

@@ -11,6 +11,6 @@ declare class ScrollIndicators extends React.Component<any, any, any> {
     componentDidMount(): void;
     contentHiddenBelow(): boolean;
     contentHiddenAbove(): boolean;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 import React from "react";

package/dist/src/utils/ScrollIndicators.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { position } from "styled-system";
@@ -14,12 +15,9 @@ const ScrollIndicatorWrapper = styled.div(({ theme }) => ({
     pointerEvents: "none",
 }), position);
 const ScrollIndicatorTop = () => {
-    return (React.createElement(ScrollIndicatorWrapper, { top: 0 },
-        React.createElement(Icon, { margin: "0 auto", display: "block", color: "darkGrey", icon: "upArrow" })));
+    return (_jsx(ScrollIndicatorWrapper, { top: 0, children: _jsx(Icon, { margin: "0 auto", display: "block", color: "darkGrey", icon: "upArrow" }) }));
 };
-const ScrollIndicatorBottom = () => (React.createElement(ScrollIndicatorWrapper, { bottom: 1 },
-    React.createElement(Icon, { display: "block", margin: "0 auto", color: "darkGrey", icon: "downArrow" })));
-/* eslint-disable react/destructuring-assignment */
+const ScrollIndicatorBottom = () => (_jsx(ScrollIndicatorWrapper, { bottom: 1, children: _jsx(Icon, { display: "block", margin: "0 auto", color: "darkGrey", icon: "downArrow" }) }));
 class ScrollIndicators extends React.Component {
     constructor() {
         super();
@@ -49,14 +47,10 @@ class ScrollIndicators extends React.Component {
         return this.state.scrollTop !== 0 && this.offsetHeight < this.scrollHeight;
     }
     render() {
-        return (React.createElement("div", { style: { position: "relative" } },
-            this.contentHiddenAbove() && React.createElement(ScrollIndicatorTop, null),
-            React.cloneElement(this.props.children, {
-                ref: this.menuRef,
-                onScroll: this.handleScroll,
-            }),
-            this.contentHiddenBelow() && React.createElement(ScrollIndicatorBottom, null)));
+        return (_jsxs("div", { style: { position: "relative" }, children: [this.contentHiddenAbove() && _jsx(ScrollIndicatorTop, {}), React.cloneElement(this.props.children, {
+                    ref: this.menuRef,
+                    onScroll: this.handleScroll,
+                }), this.contentHiddenBelow() && _jsx(ScrollIndicatorBottom, {})] }));
     }
 }
-/* eslint-enable react/destructuring-assignment */
 export default ScrollIndicators;

package/dist/src/utils/story/dashed.d.ts

@@ -4,6 +4,4 @@ import { ComponentType } from "react";
  * to highlight its boundaries. To be used in Storybook exclusively.
  * Do not export for production.
  */
-export declare const dashed: <P extends Record<string, unknown>>(component: ComponentType<P>) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("react").PropsWithoutRef<P> & import("react").RefAttributes<import("react").Component<P, any, any>>) | (import("react").PropsWithRef<P & {
-    children?: import("react").ReactNode | undefined;
-}> & import("styled-components/dist/types").BaseObject), import("styled-components/dist/types").BaseObject>> & (string & (Omit<import("react").ComponentClass<P, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<P>, keyof import("react").Component<any, {}, any>>));
+export declare const dashed: <P extends Record<string, unknown>>(component: ComponentType<P>) => import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("react").PropsWithoutRef<P> & import("react").RefAttributes<import("react").Component<P, any, any>>) | (import("react").PropsWithRef<P> & import("styled-components/dist/types").BaseObject), import("styled-components/dist/types").BaseObject>> & (string & (Omit<import("react").ComponentClass<P, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<P>, keyof import("react").Component<any, {}, any>>));

package/dist/src/utils/story/placeholder.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { BoxProps } from "../../Box";
 /**
  * A dialognaly striped and bordered rectangle that can be used as a placeholder for content.
  * To be used in Storybook exclusively. Do not export for production.
  */
-export declare function Placeholder(props: BoxProps): React.JSX.Element;
+export declare function Placeholder(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/utils/story/placeholder.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transparentize } from "polished";
-import React from "react";
 import { styled } from "styled-components";
 import { addStyledProps } from "../../StyledProps";
 const Contianer = styled.div(({ theme }) => ({
@@ -24,10 +24,5 @@ const Svg = styled.svg(({ theme }) => ({
  * To be used in Storybook exclusively. Do not export for production.
  */
 export function Placeholder(props) {
-    return (React.createElement(Contianer, { ...props },
-        React.createElement(Svg, { fill: "none" },
-            React.createElement("defs", null,
-                React.createElement("pattern", { id: "diagonal-stripes", x: "0", y: "0", width: "10", height: "10", patternUnits: "userSpaceOnUse" },
-                    React.createElement("path", { d: "M-3 13 15-5M-5 5l18-18M-1 21 17 3" }))),
-            React.createElement("rect", { stroke: "none", fill: "url(#diagonal-stripes)", width: "100%", height: "100%" }))));
+    return (_jsx(Contianer, { ...props, children: _jsxs(Svg, { fill: "none", children: [_jsx("defs", { children: _jsx("pattern", { id: "diagonal-stripes", x: "0", y: "0", width: "10", height: "10", patternUnits: "userSpaceOnUse", children: _jsx("path", { d: "M-3 13 15-5M-5 5l18-18M-1 21 17 3" }) }) }), _jsx("rect", { stroke: "none", fill: "url(#diagonal-stripes)", width: "100%", height: "100%" })] }) }));
 }

package/dist/src/utils/story/resizable.d.ts

@@ -5,15 +5,17 @@ interface ResizableProps {
     onResize?: (width: number) => void;
     showContainerOutline?: boolean;
 }
-export declare const Resizable: ({ children, containerWidth, onResize, showContainerOutline, }: ResizableProps) => React.JSX.Element;
-export declare const WidthText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+export declare const Resizable: ({ children, containerWidth, onResize, showContainerOutline, }: ResizableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WidthText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
     textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
-} & import("../..").StyledProps & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof React.HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
+} & import("../..").StyledProps & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement>, "ref"> & {
+    ref?: React.Ref<HTMLElement | SVGElement>;
+}, never>> & string & Omit<import("framer-motion").CustomDomComponent<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof React.HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("../..").StyledProps> & React.HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

package/dist/src/utils/story/resizable.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Resizable as ReResizable } from "re-resizable";
 import { styled } from "styled-components";
@@ -9,16 +10,12 @@ const CONTAINER_BORDER_WIDTH = 2 * 2; // 2px * 2 sides (left and right)
 export const Resizable = ({ children, containerWidth = "100%", onResize, showContainerOutline = false, }) => {
     const [width, setWidth] = useState(containerWidth);
     const [showWidth, setShowWidth] = useState(false);
-    const WidthIndicator = (React.createElement(AnimatePresence, null, showWidth && (React.createElement(WidthText, { fontSize: "sm", color: "midGrey", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, width))));
-    return (React.createElement(ReResizable, { enable: { right: true }, size: { width: width }, handleComponent: { right: React.createElement(ResizeHandle, null) }, onResizeStart: () => setShowWidth(true), onResizeStop: () => setShowWidth(false), onResize: (_, __, ref) => {
+    const WidthIndicator = (_jsx(AnimatePresence, { children: showWidth && (_jsx(WidthText, { fontSize: "sm", color: "midGrey", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: width })) }));
+    return (_jsx(ReResizable, { enable: { right: true }, size: { width: width }, handleComponent: { right: _jsx(ResizeHandle, {}) }, onResizeStart: () => setShowWidth(true), onResizeStop: () => setShowWidth(false), onResize: (_, __, ref) => {
             const width = Math.round(ref.getBoundingClientRect().width);
             setWidth(`${width - (showContainerOutline ? CONTAINER_BORDER_WIDTH : 0)}px`);
             onResize?.(width - (showContainerOutline ? CONTAINER_BORDER_WIDTH : 0));
-        } }, showContainerOutline ? (React.createElement(DashedBox, null,
-        children,
-        WidthIndicator)) : (React.createElement(Box, null,
-        children,
-        WidthIndicator))));
+        }, children: showContainerOutline ? (_jsxs(DashedBox, { children: [children, WidthIndicator] })) : (_jsxs(Box, { children: [children, WidthIndicator] })) }));
 };
 export const WidthText = styled(motion(Text)) `
   position: absolute;

package/dist/src/utils/ts/FocusManager.d.ts

@@ -13,5 +13,5 @@ type FocusManagerProps = {
     defaultFocusedIndex: number | null;
     children: (handlers: ChildrenHandlers) => ReactNode;
 };
-declare const FocusManager: React.FC<React.PropsWithChildren<FocusManagerProps>>;
+declare function FocusManager({ children, refs, defaultFocusedIndex }: FocusManagerProps): import("react/jsx-runtime").JSX.Element;
 export default FocusManager;

package/dist/src/utils/ts/FocusManager.js

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
-const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function FocusManager({ children, refs = undefined, defaultFocusedIndex }) {
     const [focusedIndex, setFocusedIndex] = useState(defaultFocusedIndex ?? 0);
     const prevFocusedIndex = useRef(focusedIndex);
     const focusPrevious = () => {
@@ -31,10 +32,10 @@ const FocusManager = ({ children, refs = undefined, defaultFocusedIndex, }) => {
             prevFocusedIndex.current = focusedIndex;
         }
     }, [focusedIndex, refs]);
-    return (React.createElement(React.Fragment, null, children({
-        focusedIndex,
-        setFocusedIndex,
-        handleArrowNavigation,
-    })));
-};
+    return (_jsx(_Fragment, { children: children({
+            focusedIndex,
+            setFocusedIndex,
+            handleArrowNavigation,
+        }) }));
+}
 export default FocusManager;

package/dist/src/utils/useWindowDimension.story.d.ts

@@ -2,5 +2,4 @@ declare namespace _default {
     let title: string;
 }
 export default _default;
-export function _UseWindowDimensions(): React.JSX.Element;
-import React from "react";
+export function _UseWindowDimensions(): import("react/jsx-runtime").JSX.Element;

package/dist/src/utils/useWindowDimension.story.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -8,18 +9,5 @@ export default {
 };
 export const _UseWindowDimensions = () => {
     const { width, height, widthBreakpoints } = useWindowDimensions();
-    return (React.createElement(Box, { width: "400px" },
-        React.createElement(Heading4, null, "Current window dimensions:"),
-        React.createElement(Flex, { fontSize: "large", justifyContent: "space-between", my: "half" },
-            React.createElement(Text, null, "width:"),
-            React.createElement(Text, null, String(width))),
-        React.createElement(Flex, { fontSize: "large", justifyContent: "space-between", my: "half" },
-            React.createElement(Text, null, "height:"),
-            React.createElement(Text, null, String(height))),
-        React.createElement("hr", null),
-        React.createElement(Box, { mt: "x1" }, Object.keys(widthBreakpoints).map((key) => (React.createElement(Flex, { justifyContent: "space-between", my: "half", key: key },
-            React.createElement(Text, null,
-                key,
-                ":"),
-            React.createElement(Text, null, String(widthBreakpoints[key]))))))));
+    return (_jsxs(Box, { width: "400px", children: [_jsx(Heading4, { children: "Current window dimensions:" }), _jsxs(Flex, { fontSize: "large", justifyContent: "space-between", my: "half", children: [_jsx(Text, { children: "width:" }), _jsx(Text, { children: String(width) })] }), _jsxs(Flex, { fontSize: "large", justifyContent: "space-between", my: "half", children: [_jsx(Text, { children: "height:" }), _jsx(Text, { children: String(height) })] }), _jsx("hr", {}), _jsx(Box, { mt: "x1", children: Object.keys(widthBreakpoints).map((key) => (_jsxs(Flex, { justifyContent: "space-between", my: "half", children: [_jsxs(Text, { children: [key, ":"] }), _jsx(Text, { children: String(widthBreakpoints[key]) })] }, key))) })] }));
 };

package/dist/src/utils/withMenuState.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { keyCodes } from "../constants";
 class MenuStateInt extends React.Component {
@@ -71,6 +72,6 @@ class MenuState extends MenuStateInt {
     }
 }
 function withMenuState(MenuComponent) {
-    return (props) => (React.createElement(MenuState, { showDelay: props.showDelay, hideDelay: props.hideDelay, defaultOpen: props.defaultOpen }, (menuComponentProps) => React.createElement(MenuComponent, { menuState: menuComponentProps, ...props })));
+    return (props) => (_jsx(MenuState, { showDelay: props.showDelay, hideDelay: props.hideDelay, defaultOpen: props.defaultOpen, children: (menuComponentProps) => _jsx(MenuComponent, { menuState: menuComponentProps, ...props }) }));
 }
 export default withMenuState;

package/dist/vite.config.js

@@ -18,6 +18,8 @@ const GLOBALS = {
     "path-to-regexp": "pathToRegexp",
     "react-is": "reactIs",
     "react-dom": "reactDom",
+    "react/jsx-runtime": "React",
+    "react/jsx-dev-runtime": "React",
 };
 const externals = Object.keys(GLOBALS);
 // External function - all peer dependencies are externalized

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "16.0.0",
+  "version": "16.0.2",
   "type": "module",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
@@ -66,12 +66,11 @@
     "react": ">=16.10.2 <19.0.0",
     "react-dom": ">=16.10.2 <19.0.0",
     "styled-components": "^6.0.0",
-    "typescript": "4.9.5"
+    "typescript": ">=4.9.5"
   },
   "devDependencies": {
     "@apollo/client": "^3.11.8",
     "@eslint/js": "^9.0.0",
-    "@nulogy/eslint-config-nulogy": "^1.0.0",
     "@nulogy/icons": "^4.37.2",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/commit-analyzer": "^9.0.2",
@@ -79,28 +78,25 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-docs": "8.6.14",
-    "@storybook/addon-storysource": "8.6.14",
-    "@storybook/addon-toolbars": "8.6.14",
-    "@storybook/addon-viewport": "8.6.14",
-    "@storybook/codemod": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
-    "@storybook/theming": "8.6.14",
-    "@testing-library/react": "^12.1.5",
+    "@storybook/addon-a11y": "~8.6.15",
+    "@storybook/addon-actions": "~8.6.15",
+    "@storybook/addon-docs": "~8.6.15",
+    "@storybook/addon-storysource": "~8.6.14",
+    "@storybook/addon-toolbars": "~8.6.15",
+    "@storybook/addon-viewport": "~8.6.15",
+    "@storybook/react": "~8.6.15",
+    "@storybook/react-vite": "~8.6.15",
+    "@storybook/theming": "~8.6.14",
+    "@testing-library/react": "^16.0.0",
     "@types/css-mediaquery": "^0.1.4",
     "@types/deep-equal": "^1.0.4",
-    "@types/node": "^24.0.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-router-dom": "5.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@types/node": "^24.10.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "typescript-eslint": "^8.0.0",
-    "@vitejs/plugin-react": "^4.7.0",
-    "chromatic": "^13.3.3",
+    "@vitejs/plugin-react": "^5.0.0",
+    "chromatic": "^13.3.4",
     "concurrently": "^9.2.0",
     "css-mediaquery": "^0.1.2",
     "cypress": "^13.17.0",
@@ -111,27 +107,28 @@
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-prettier": "^5.2.0",
     "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "globals": "^15.0.0",
-    "graphql": "15.8.0",
+    "graphql": "16.13.0",
     "http-server": "^14.0.0",
     "husky": "^9.1.7",
     "jsdom": "^27.2.0",
     "mockdate": "^3.0.5",
     "prettier": "^3.4.2",
     "re-resizable": "^6.10.3",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-color": "^2.18.1",
-    "react-dom": "17.0.2",
-    "react-router-dom": "^5.3.3",
+    "react-dom": "18.3.1",
+    "react-router-dom": "^6.0.0",
     "semantic-release": "^24.2.5",
-    "start-server-and-test": "^2.0.12",
-    "storybook": "8.6.14",
+    "start-server-and-test": "^2.1.3",
+    "storybook": "8.6.15",
     "styled-components": "^6.1.19",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.9.3",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0"
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.0.0",
+    "vitest": "^4.0.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
@@ -144,11 +141,11 @@
     "@types/react-window": "^1.8.8",
     "@types/styled-system": "5.1.25",
     "date-fns": "2.23.0",
-    "debounce": "^1.2.0",
+    "debounce": "^3.0.0",
     "deep-equal": "^2.2.1",
     "framer-motion": "6.5.1",
     "i18next": "^19.3.1",
-    "polished": "3.4.4",
+    "polished": "4.3.1",
     "react-datepicker": "^4.25.0",
     "react-fast-compare": "^3.2.0",
     "react-hot-toast": "^2.4.1",
@@ -164,8 +161,8 @@
   },
   "resolutions": {
     "@emotion/serialize": "1.1.3",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "csstype": "^3.2.3"
   }
 }