[core] Remove additional React imports

apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/TableOfContents.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import { IconList } from '@tabler/icons-react';
 import { Box, rem, ScrollArea, Text } from '@mantine/core';

apps/help.mantine.dev/src/components/QuestionsList/QuestionsList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Container } from '@mantine/core';
 import { Frontmatter } from '@/types';
 import { getGroupedQuestions } from './get-grouped-questions';

apps/help.mantine.dev/src/components/QuestionsList/QuestionsListHeader/QuestionsListHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { IconSearch } from '@tabler/icons-react';
 import { CloseButton, Container, Text, TextInput, Title } from '@mantine/core';
 import classes from './QuestionsListHeader.module.css';

apps/help.mantine.dev/src/demos/ModalDoNotClose.demo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Button, Modal } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineDemo } from '@mantinex/demo';

apps/mantine.dev/src/app-shell-examples/AppShellPage/AppShellPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { getCodeFileIcon } from '@mantinex/dev-icons';
 import { CodeHighlightTabs } from '@mantinex/shiki';

apps/mantine.dev/src/combobox-examples/ComboboxShell/ComboboxNavbar/ComboboxLinksGroup/ComboboxLinksGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconChevronDown } from '@tabler/icons-react';

apps/mantine.dev/src/combobox-examples/ComboboxShell/ComboboxNavbar/ComboboxNavbar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { IconSearch } from '@tabler/icons-react';
 import { ScrollArea, Text, TextInput } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';

apps/mantine.dev/src/combobox-examples/ComboboxShell/ComboboxShell.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDirection } from '@mantine/core';
 import { Shell } from '@/components/Shell';
 import { ComboboxNavbar } from './ComboboxNavbar/ComboboxNavbar';

apps/mantine.dev/src/combobox-examples/examples/ActiveOptionsFilter/ActiveOptionsFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/AsyncAutocomplete/AsyncAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Combobox, Loader, TextInput, useCombobox } from '@mantine/core';
 
 const MOCKDATA = [

apps/mantine.dev/src/combobox-examples/examples/AutocompleteClearable/AutocompleteClearable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CloseButton, Combobox, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/AutocompleteDynamic/AutocompleteDynamic.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, TextInput, useCombobox } from '@mantine/core';
 
 export function AutocompleteDynamic() {

apps/mantine.dev/src/combobox-examples/examples/AutocompleteHighlight/AutocompleteHighlight.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Highlight, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/AutocompleteLimit/AutocompleteLimit.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, TextInput, useCombobox } from '@mantine/core';
 
 const MOCKDATA = Array(100000)

apps/mantine.dev/src/combobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Combobox, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/BasicAutocomplete/BasicAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/BasicButton/BasicButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Button, Combobox, Text, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/BasicMultiSelect/BasicMultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/BasicSelect/BasicSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/ButtonMultiSelect/ButtonMultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Button, CheckIcon, Combobox, Group, Text, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/ButtonSearch/ButtonSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Button, Combobox, Text, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownAnimation/DropdownAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownFooter/DropdownFooter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Anchor, Combobox, ScrollArea, Text, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownHeader/DropdownHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, ScrollArea, Text, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownOptionsAnimation/DropdownOptionsAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import cx from 'clsx';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 import classes from './DropdownOptionsAnimation.module.css';

apps/mantine.dev/src/combobox-examples/examples/DropdownPositionStyles/DropdownPositionStyles.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 import classes from './DropdownPositionStyles.module.css';
 

apps/mantine.dev/src/combobox-examples/examples/DropdownScroll/DropdownScroll.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownScrollArea/DropdownScrollArea.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, ScrollArea, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/DropdownSmoothScroll/DropdownSmoothScroll.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, ScrollArea, TextInput, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/MaxDisplayedItems/MaxDisplayedItems.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/MaxSelectedItems/MaxSelectedItems.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/MultiSelectCheckbox/MultiSelectCheckbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Checkbox, Combobox, Group, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/MultiSelectCreatable/MultiSelectCreatable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/MultiSelectValueRenderer/MultiSelectValueRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Input, Pill, PillsInput, useCombobox } from '@mantine/core';
 import { countriesData, flags } from './countries-data';
 import { CountryPill } from './CountryPill';

apps/mantine.dev/src/combobox-examples/examples/SearchableMultiSelect/SearchableMultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Pill, PillsInput, useCombobox } from '@mantine/core';
 
 const groceries = ['🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate'];

apps/mantine.dev/src/combobox-examples/examples/SearchableSelect/SearchableSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectActive/SelectActive.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CheckIcon, Combobox, Group, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectAsync/SelectAsync.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, Loader, useCombobox } from '@mantine/core';
 
 const MOCKDATA = [

apps/mantine.dev/src/combobox-examples/examples/SelectClearable/SelectClearable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { CloseButton, Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectCreatable/SelectCreatable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectDropdownSearch/SelectDropdownSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectGroups/SelectGroups.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 export function SelectGroups() {

apps/mantine.dev/src/combobox-examples/examples/SelectGroupsSearchable/SelectGroupsSearchable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectGroupsStyles/SelectGroupsStyles.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 import classes from './SelectGroupsStyles.module.css';
 

apps/mantine.dev/src/combobox-examples/examples/SelectLimit/SelectLimit.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, InputBase, useCombobox } from '@mantine/core';
 
 const MOCKDATA = Array(100000)

apps/mantine.dev/src/combobox-examples/examples/SelectList/SelectList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Checkbox, Combobox, Group, TextInput, useCombobox } from '@mantine/core';
 import classes from './SelectList.module.css';
 

apps/mantine.dev/src/combobox-examples/examples/SelectOptionComponent/SelectOptionComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Group, Input, InputBase, Text, useCombobox } from '@mantine/core';
 
 interface Item {

apps/mantine.dev/src/combobox-examples/examples/SelectOptionOnHover/SelectOptionOnHover.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 
 const groceries = [

apps/mantine.dev/src/combobox-examples/examples/SelectedAnimation/SelectedAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 import classes from './SelectedAnimation.module.css';
 

apps/mantine.dev/src/combobox-examples/examples/SelectedStyles/SelectedStyles.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Combobox, Input, InputBase, useCombobox } from '@mantine/core';
 import classes from './SelectedStyles.module.css';
 

apps/mantine.dev/src/combobox-examples/examples/TransferList/TransferList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { IconChevronRight } from '@tabler/icons-react';
 import { ActionIcon, Checkbox, Combobox, Group, TextInput, useCombobox } from '@mantine/core';
 import classes from './TransferList.module.css';

apps/mantine.dev/src/components/ColorsGenerator/ColorsGenerator.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { generateColorsMap } from '@mantine/colors-generator';
 import { useLocalStorage } from '@mantine/hooks';

apps/mantine.dev/src/components/ColorsGenerator/ColorsInput/ColorsInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import chroma from 'chroma-js';

apps/mantine.dev/src/components/HomePage/Components/demos/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Embla, useAnimationOffsetEffect } from '@mantine/carousel';
 import { CarouselCardsDemos } from '@docs/demos';
 

apps/mantine.dev/src/components/HomePage/Components/demos/Overlays.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { IconMessageCircle, IconPhoto, IconSettings } from '@tabler/icons-react';
 import {
   Box,

apps/mantine.dev/src/components/HomePage/DemoTabs/DemoTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { IconForms } from '@tabler/icons-react';
 import { Box, Container, Grid, rem, Text, UnstyledButton, useMantineTheme } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';

apps/mantine.dev/src/components/MdxProvider/MdxPackagesInstallation/MdxPackagesInstallation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Checkbox, Code, Table, Text } from '@mantine/core';
 import { MdxInstallScript } from '../MdxInstallScript/MdxInstallScript';
 import { MdxParagraph } from '../MdxTypography/MdxTypography';

apps/mantine.dev/src/components/MdxTabs/MdxTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { rem, Tabs } from '@mantine/core';
 import { MdxSiblings } from '@/components/MdxSiblings';

apps/mantine.dev/src/components/PropsTable/PropsTablesList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { IconSearch } from '@tabler/icons-react';
 import { TextInput, Title } from '@mantine/core';
 import { getComponentName } from './getComponentName';

apps/mantine.dev/src/components/Redirect/Redirect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { Box } from '@mantine/core';
 

apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconChevronDown } from '@tabler/icons-react';

apps/mantine.dev/src/components/TableOfContents/TableOfContents.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import { IconList } from '@tabler/icons-react';
 import { Box, rem, ScrollArea, Text } from '@mantine/core';

apps/mantine.dev/src/components/icons/ViteIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import { useId } from 'react';
 import { Box, rem } from '@mantine/core';
 import { IconProps } from './types';
 import classes from './icons.module.css';

apps/mantine.dev/src/pages/guides/storybook.mdx

@@ -89,7 +89,7 @@ the following content:
 // All packages except `@mantine/hooks` require styles imports
 import '@mantine/core/styles.css';
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import {

packages/@docs/demos/src/demos/carousel/Carousel.demo.animationOffset.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Carousel, Embla, useAnimationOffsetEffect } from '@mantine/carousel';
 import { Button, Modal, rem } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';

packages/@docs/demos/src/demos/carousel/Carousel.demo.autoplay.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import Autoplay from 'embla-carousel-autoplay';
 import { Carousel } from '@mantine/carousel';
 import { MantineDemo } from '@mantinex/demo';