chore: improve compatibility with modern module resolution (#719)

The modern "bundler" and "NodeNext" module resolution options do not support transitive dependencies properly, leading to errors such as "The inferred type of X cannot be named without reference to Y." A fix is possible by explicitly importing transitive types when they are re-exported.

react/.eslintrc

@@ -13,7 +13,10 @@
       "extends": ["plugin:@typescript-eslint/recommended"],
       "parser": "@typescript-eslint/parser",
       "rules": {
-        "@typescript-eslint/no-unused-vars": "warn"
+        "@typescript-eslint/no-unused-vars": ["warn", {
+          "varsIgnorePattern": "^_",
+          "argsIgnorePattern": "^_"
+        }]
       }
     },
     {

react/src/Attachment/AttachmentError.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { FileRejection } from 'react-dropzone'
 import {
   Button,
+  ComponentWithAs as _,
   Flex,
   forwardRef,
   Stack,

react/src/Attachment/AttachmentFileInfo.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import {
+  ComponentWithAs as _,
   Flex,
   forwardRef,
   Image,

react/src/Badge/Badge.tsx

@@ -1,6 +1,7 @@
 import {
   Badge as ChakraBadge,
   BadgeProps as ChakraBadgeProps,
+  ComponentWithAs as _,
   createStylesContext,
   forwardRef,
   Icon,

react/src/Button/Button.tsx

@@ -1,6 +1,7 @@
 import {
   Button as ChakraButton,
   ButtonProps as ChakraButtonProps,
+  ComponentWithAs as _,
   forwardRef,
   IconProps,
   ThemingProps,

react/src/Calendar/Calendar.tsx

@@ -1,4 +1,5 @@
 import {
+  ComponentWithAs as _,
   forwardRef,
   Stack,
   StackDivider,

react/src/Calendar/CalendarBase/CalendarPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import {
   chakra,
+  ComponentWithAs as _,
   forwardRef,
   Stack,
   Text,

react/src/Calendar/CalendarBase/DayOfMonth.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react'
 import {
   ButtonProps,
   chakra,
+  ComponentWithAs as _,
   Flex,
   forwardRef,
   Skeleton,

react/src/Calendar/RangeCalendar.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react'
 import {
+  ComponentWithAs as _,
   forwardRef,
   Stack,
   StackDivider,

react/src/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from '@chakra-ui/react'
+import { ComponentWithAs as _, forwardRef } from '@chakra-ui/react'
 
 import { CalendarProps } from '~/Calendar'
 

react/src/DatePicker/components/DatePickerInput.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import ReactInputMask from 'react-input-mask'
 import {
+  ComponentWithAs as _,
   forwardRef,
   InputGroup,
   InputRightAddon,

react/src/DateRangePicker/DateRangePicker.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from '@chakra-ui/react'
+import { ComponentWithAs as _, forwardRef } from '@chakra-ui/react'
 
 import { RangeCalendarProps } from '~/Calendar'
 import { DatePickerBaseProps } from '~/DatePicker'

react/src/DateRangePicker/components/DateRangePickerInput.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import ReactInputMask from 'react-input-mask'
 import {
+  ComponentWithAs as _,
   Flex,
   forwardRef,
   Stack,

react/src/DateRangePicker/components/DateRangePickerWrapper.tsx

@@ -1,4 +1,10 @@
-import { Flex, forwardRef, Popover, PopoverAnchor } from '@chakra-ui/react'
+import {
+  ComponentWithAs as _,
+  Flex,
+  forwardRef,
+  Popover,
+  PopoverAnchor,
+} from '@chakra-ui/react'
 
 import { useDateRangePicker } from '../DateRangePickerContext'
 

react/src/FormControl/FormLabel/FormLabel.tsx

@@ -2,6 +2,7 @@ import { FC, useMemo } from 'react'
 import {
   Box,
   chakra,
+  ComponentWithAs as _,
   FormHelperText,
   FormLabel as ChakraFormLabel,
   FormLabelProps as ChakraFormLabelProps,

react/src/IconButton/IconButton.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import {
+  ComponentWithAs as _,
   forwardRef,
   IconButton as ChakraIconButton,
   IconButtonProps as ChakraIconButtonProps,

react/src/Input/Input.tsx

@@ -1,4 +1,5 @@
 import {
+  ComponentWithAs as _,
   forwardRef,
   Icon,
   Input as ChakraInput,

react/src/Menu/Menu.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
-import { MenuVariant } from '~/theme/components/Menu'
+import { Menu as MenuVariant } from '~/theme/components/Menu'
 
 import { Menu, MenuButtonProps } from './Menu'
 
@@ -27,7 +27,7 @@ type MenuTemplateProps = MenuButtonProps & {
   size?: ThemingProps<'Menu'>['size']
 }
 type MenuGroupTemplateProps = {
-  variant: MenuVariant
+  variant: keyof NonNullable<(typeof MenuVariant)['variants']>
   size?: ThemingProps<'Menu'>['size']
 }
 

react/src/Menu/Menu.tsx

@@ -1,11 +1,15 @@
 import { FC, useMemo } from 'react'
 import {
+  ComponentWithAs as _,
   Icon,
   Menu as ChakraMenu,
   MenuButton as ChakraMenuButton,
   MenuDivider as ChakraMenuDivider,
+  MenuDividerProps,
   MenuItem as ChakraMenuItem,
+  MenuItemProps,
   MenuList as ChakraMenuList,
+  MenuListProps,
   MenuProps as ChakraMenuProps,
   ThemingProps,
   useMultiStyleConfig,

react/src/NumberInput/NumberInput.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react'
 import {
   Box,
   chakra,
+  ComponentWithAs as _,
   Divider,
   forwardRef,
   NumberInputProps as ChakraNumberInputProps,

react/src/PhoneNumberInput/IntlPhoneNumberInput.tsx

@@ -7,6 +7,7 @@
 import { ChangeEvent, FC, useCallback, useMemo } from 'react'
 import {
   chakra,
+  ComponentWithAs as _,
   createStylesContext,
   Flex,
   forwardRef,

react/src/PhoneNumberInput/PhoneNumberInput.tsx

@@ -4,7 +4,11 @@
  * https://www.npmjs.com/package/react-headless-phone-input but adapted for the
  * application's needs.
  */
-import { forwardRef, useControllableState } from '@chakra-ui/react'
+import {
+  ComponentWithAs as _,
+  forwardRef,
+  useControllableState,
+} from '@chakra-ui/react'
 import { CountryCode, NationalNumber } from 'libphonenumber-js/min'
 
 import { InputProps } from '~/Input'

react/src/PhoneNumberInput/SingleCountryPhoneNumberInput.tsx

@@ -1,4 +1,5 @@
 import {
+  ComponentWithAs as _,
   forwardRef,
   Icon,
   InputGroup,

react/src/PhoneNumberInput/utils/countrySelectUtils.ts

@@ -1,4 +1,4 @@
-import { CountryCode } from 'libphonenumber-js/types'
+import { CountryCode } from 'libphonenumber-js'
 
 /**
  * Simple mapping constant retrieved from

react/src/RestrictedGovtMasthead/RestrictedGovtMastheadIcon.tsx

@@ -1,4 +1,4 @@
-import { chakra } from '@chakra-ui/react'
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
 
 export const RestrictedGovtMastheadIcon = chakra(
   (props: React.SVGProps<SVGSVGElement>): JSX.Element => {

react/src/Searchbar/Searchbar.tsx

@@ -1,6 +1,7 @@
 import { KeyboardEvent, useCallback, useRef } from 'react'
 import {
   Box,
+  ComponentWithAs as _,
   forwardRef,
   Icon,
   Input,

react/src/Sidebar/SidebarHeader.tsx

@@ -1,4 +1,10 @@
-import { Box, chakra, forwardRef, Icon } from '@chakra-ui/react'
+import {
+  Box,
+  chakra,
+  ComponentWithAs as _,
+  forwardRef,
+  Icon,
+} from '@chakra-ui/react'
 
 import { useSidebarStyles } from './SidebarContext'
 import type { BaseSidebarItemProps } from './types'

react/src/Sidebar/SidebarItem.tsx

@@ -1,5 +1,11 @@
 import { useMemo } from 'react'
-import { Box, chakra, forwardRef, Icon } from '@chakra-ui/react'
+import {
+  Box,
+  chakra,
+  ComponentWithAs as _,
+  forwardRef,
+  Icon,
+} from '@chakra-ui/react'
 import { dataAttr, isFunction } from '@chakra-ui/utils'
 import { merge } from 'lodash'
 

react/src/Sidebar/SidebarList.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   chakra,
   Collapse,
+  ComponentWithAs as _,
   forwardRef,
   HTMLChakraProps,
   Icon,

react/src/SingleSelect/utils/itemUtils.ts

@@ -1,3 +1,5 @@
+import type { As as _ } from '@chakra-ui/react'
+
 import { ComboboxItem } from '../types'
 
 export const itemIsObject = (

react/src/Switch/Switch.tsx

@@ -6,7 +6,12 @@
 
 import { useMemo } from 'react'
 import { useCheckbox, UseCheckboxProps } from '@chakra-ui/checkbox'
-import { Icon, keyframes, usePrefersReducedMotion } from '@chakra-ui/react'
+import {
+  ComponentWithAs as _,
+  Icon,
+  keyframes,
+  usePrefersReducedMotion,
+} from '@chakra-ui/react'
 import {
   chakra,
   forwardRef,

react/src/Tag/Tag.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   chakra,
+  ComponentWithAs as _,
   createStylesContext,
   forwardRef,
   HTMLChakraProps,

react/src/TagInput/TagInput.tsx

@@ -8,6 +8,7 @@ import {
 import { RovingTabIndexProvider } from 'react-roving-tabindex'
 import {
   Box,
+  ComponentWithAs as _,
   forwardRef,
   useControllableState,
   useFormControl,

react/src/TagInput/TagInputInput.tsx

@@ -5,7 +5,12 @@ import {
   useRef,
 } from 'react'
 import { useFocusEffect, useRovingTabIndex } from 'react-roving-tabindex'
-import { chakra, forwardRef, useMergeRefs } from '@chakra-ui/react'
+import {
+  chakra,
+  ComponentWithAs as _,
+  forwardRef,
+  useMergeRefs,
+} from '@chakra-ui/react'
 
 import { InputProps } from '~/Input'
 

react/src/Textarea/Textarea.tsx

@@ -1,5 +1,6 @@
 import ResizeTextarea, { TextareaAutosizeProps } from 'react-textarea-autosize'
 import {
+  ComponentWithAs as _,
   forwardRef,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,

react/src/Toggle/Toggle.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useMemo } from 'react'
 import {
   Box,
+  ComponentWithAs as _,
   Flex,
   forwardRef,
   mergeThemeOverride,

react/src/icons/BxBulb.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-bulb | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxBulb = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxChevronDown.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-chevron-down | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxChevronDown = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxChevronUp.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-chevron-up | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxChevronUp = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxGitMerge.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-git-merge | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxGitMerge = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxLinkExternal.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-link-external | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxLinkExternal = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxLoader.tsx

@@ -1,7 +1,7 @@
-import { chakra } from '@chakra-ui/react'
-
 // icon:bx-loader | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxLoader = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

react/src/icons/BxMailSend.tsx

@@ -1,6 +1,6 @@
 // icon:bx-mail-send | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
-import { chakra } from '@chakra-ui/react'
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
 
 export const BxMailSend = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (

react/src/icons/BxMinus.tsx

@@ -1,6 +1,7 @@
-import { chakra } from '@chakra-ui/react'
 // icon:bx-minus | Boxicons https://boxicons.com/ | Atisa
 /** This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) */
+import { chakra, ChakraComponent as _ } from '@chakra-ui/react'
+
 export const BxMinus = chakra((props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg