@basic-ui/core 0.0.40 → 0.0.41

package/src/ComboBox/Combobox.tsx

@@ -1,5 +1,5 @@
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
 import { forwardRef, useRef, useMemo, useId } from 'react';
-import * as React from 'react';
 
 import type { ActionTypes } from './hooks';
 import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
@@ -15,16 +15,13 @@ export type SelectEventHandler = (
   obj: any
 ) => void;
 
-export type ComboboxProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'onSelect'
-> & {
+export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
   onSelect?: SelectEventHandler;
   openOnFocus?: boolean;
   selectOnBlur?: boolean;
-  children?: React.ReactNode;
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  children?: ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
 };
 
 export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(

package/src/ComboBox/ComboboxButton.tsx

@@ -1,5 +1,11 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useComboBoxContext } from './context';
 import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
@@ -7,12 +13,12 @@ import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 
 export interface ComboboxButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-  children?: React.ReactNode;
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxButton = forwardRef<

package/src/ComboBox/ComboboxInput.tsx

@@ -1,5 +1,13 @@
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ElementType,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import * as React from 'react';
 
 import {
   useBlur,
@@ -16,7 +24,7 @@ import { assignMultipleRefs, wrapEvent } from '../utils';
 import { useComboBoxContext } from './context';
 
 export interface ComboboxInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends InputHTMLAttributes<HTMLInputElement> {
   // clear on ESC
   clearOnEscape?: boolean;
   // highlights all the text in the box on click when true
@@ -27,13 +35,13 @@ export interface ComboboxInputProps
   defaultValue?: string;
   // value for controlled mode
   value?: string;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 
@@ -96,7 +104,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
     // [*]... and when controlled, we don't trigger handleValueChange as the user
     // types, instead the developer controls it with the normal input onChange
     // prop
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       // After the user started typing, lets forget the defaultValue
       hasStartedInteracting.current = true;
 

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,12 +1,12 @@
+import type { ElementType, LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useComboBoxContext } from './context';
 
 export interface ComboboxLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 

package/src/ComboBox/ComboboxList.tsx

@@ -1,16 +1,15 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
 import { forwardRef, useRef, useEffect } from 'react';
-import * as React from 'react';
 
 import { useComboBoxContext } from './context';
 import { getScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 
-export interface ComboboxListProps
-  extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   persistSelection?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(

package/src/ComboBox/ComboboxOption.tsx

@@ -1,21 +1,25 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import type {
+  ElementType,
+  LiHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import * as React from 'react';
 
 import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useComboBoxContext } from './context';
 import { makeHash } from './makeHash';
 
-export interface ComboboxOptionProps
-  extends React.LiHTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id: string;
   value: any;
   text?: string;
-  onClick?: React.MouseEventHandler<HTMLLIElement>;
-  children?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLLIElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(

package/src/ComboBox/ComboboxPopover.tsx

@@ -1,18 +1,23 @@
+import type {
+  ElementType,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useKeyDown, useBlur } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useComboBoxContext } from './context';
 
-export interface ComboboxPopoverProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  onBlur?: React.FocusEventHandler<HTMLDivElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-  children?: React.ReactNode;
+export interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(

package/src/ComboBox/context.ts

@@ -1,3 +1,4 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { ActionTypes, StateTypes, ReducerState } from './hooks';
@@ -6,11 +7,11 @@ import type { Scope } from '../hooks';
 
 export interface ComboBoxContextProps {
   data: Omit<ReducerState, 'state'>;
-  inputRef: React.MutableRefObject<HTMLInputElement | null>;
-  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
-  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+  inputRef: MutableRefObject<HTMLInputElement | null>;
+  popoverRef: MutableRefObject<HTMLDivElement | null>;
+  buttonRef: MutableRefObject<HTMLButtonElement | null>;
   onSelect?: SelectEventHandler;
-  optionsRef: React.MutableRefObject<{
+  optionsRef: MutableRefObject<{
     [itemId: string]: {
       value: string | unknown;
       text: string;
@@ -19,11 +20,11 @@ export interface ComboBoxContextProps {
   listScope: Scope<HTMLElement>;
   state: StateTypes;
   transition: (action: ActionTypes, payload?: any) => void;
-  listboxIdRef: React.MutableRefObject<string | undefined>;
-  labelIdRef: React.MutableRefObject<string | undefined>;
-  autocompletePropRef: React.MutableRefObject<boolean>;
-  persistSelectionRef: React.MutableRefObject<boolean>;
-  clearOnEscapeRef: React.MutableRefObject<boolean>;
+  listboxIdRef: MutableRefObject<string | undefined>;
+  labelIdRef: MutableRefObject<string | undefined>;
+  autocompletePropRef: MutableRefObject<boolean>;
+  persistSelectionRef: MutableRefObject<boolean>;
+  clearOnEscapeRef: MutableRefObject<boolean>;
   isVisible: boolean;
   openOnFocus: boolean;
   selectOnBlur: boolean;

package/src/ComboBox/hooks.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable default-case */
+import type { KeyboardEvent, MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
 import type {
@@ -221,7 +222,7 @@ export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
 // the popup.
 export function useFocusManagement(
   lastActionType: ActionTypes,
-  inputRef: React.MutableRefObject<HTMLInputElement | null>
+  inputRef: MutableRefObject<HTMLInputElement | null>
 ) {
   // useEffect so that the cursor goes to the end of the input instead
   // of awkwardly at the beginning, unclear to me why ...
@@ -289,7 +290,7 @@ export function useKeyDown() {
     listScope,
   } = useComboBoxContext();
 
-  return function handleKeyDown(event: React.KeyboardEvent<any>) {
+  return function handleKeyDown(event: KeyboardEvent<any>) {
     const optionNodes = listScope.current.queryAllNodes(scopeQuery);
 
     switch (event.key) {

package/src/FocusLock/FocusLock.tsx

@@ -1,17 +1,23 @@
+import type {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+} from 'react';
 import { useRef } from 'react';
-import * as React from 'react';
 
 import { useFocusLock } from './useFocusLock';
 
-export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  childRef: React.MutableRefObject<HTMLElement | null>;
+export interface FocusLockProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  childRef: MutableRefObject<HTMLElement | null>;
   enabled?: boolean;
 }
 
-export const FocusLock: React.FC<FocusLockProps> = function FocusLock(props) {
+export const FocusLock: FC<FocusLockProps> = function FocusLock(props) {
   const {
     as: Comp = 'div',
     childRef,

package/src/FocusLock/useFocusLock.ts

@@ -1,16 +1,17 @@
+import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
 import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {
   enabled: boolean;
-  lockStartRef: React.MutableRefObject<HTMLElement | null>;
-  lockEndRef: React.MutableRefObject<HTMLElement | null>;
+  lockStartRef: MutableRefObject<HTMLElement | null>;
+  lockEndRef: MutableRefObject<HTMLElement | null>;
 }
 
 const focusLockStack: HTMLElement[] = [];
 export function useFocusLock(
-  ref: React.MutableRefObject<HTMLElement | null>,
+  ref: MutableRefObject<HTMLElement | null>,
   opts: FocusLockOptions
 ) {
   const { enabled = true, lockStartRef, lockEndRef } = opts;

package/src/List/List.tsx

@@ -1,10 +1,10 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
-export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const List = forwardRef<HTMLUListElement, ListProps>(function List(

package/src/List/ListItem.tsx

@@ -1,10 +1,10 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
-export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(

package/src/Menu/Menu.story.tsx

@@ -1,5 +1,5 @@
+import type { MouseEvent } from 'react';
 import { useState } from 'react';
-import * as React from 'react';
 import { animated, useSpring } from 'react-spring';
 
 import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
@@ -14,7 +14,7 @@ const noop = () => {
 };
 
 const Wrapper = ({ children }) => {
-  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
     console.log('Clicked ' + e.currentTarget.innerText);
     e.preventDefault();
   };

package/src/Menu/Menu.tsx

@@ -1,19 +1,25 @@
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent,
+  ReactNode,
+  ElementType,
+} from 'react';
 import { forwardRef, useRef, Fragment, useId } from 'react';
-import * as React from 'react';
 
 import type { MenuContextProps } from './context';
 import { MenuProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface MenuProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open?: boolean;

package/src/Menu/MenuButton.tsx

@@ -1,16 +1,19 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
 import { forwardRef, useId } from 'react';
-import * as React from 'react';
 
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrapEvent';
 
-export type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onClick?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
   ) => void;
 };
 
@@ -30,7 +33,7 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
     const buttonIdGenerated = useId();
     const buttonId = preferredId || buttonIdGenerated;
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
       if (disabled) {
         return;
       }
@@ -50,7 +53,7 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       }
     };
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (disabled) {
         return;
       }

package/src/Menu/MenuItem.tsx

@@ -1,15 +1,21 @@
+import type {
+  LiHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  KeyboardEvent,
+  KeyboardEventHandler,
+} from 'react';
 import { forwardRef, useRef, useId } from 'react';
-import * as React from 'react';
 
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils';
 
-export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onSelect?: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
   disabled?: boolean;
 }
@@ -35,16 +41,14 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
 
   const handleSelect = wrapEvent(
     onSelect,
-    (
-      e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>
-    ) => {
+    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
       onChange && onChange(e, false);
       buttonRef.current?.focus();
       e.preventDefault();
     }
   );
 
-  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {
+  const handleClick = (e: MouseEvent<HTMLLIElement>) => {
     if (!disabled) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       onNavigate && onNavigate(ref.current!);
@@ -52,7 +56,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
     }
   };
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement> = (e) => {
+  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
     switch (e.key) {
       case 'Enter':
       case ' ':

package/src/Menu/MenuList.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,7 +6,6 @@ import {
   useState,
   useLayoutEffect,
 } from 'react';
-import * as React from 'react';
 
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
@@ -17,9 +17,9 @@ import { getCircularIndex, wrapEvent } from '../utils';
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-export interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   defaultActiveItemValue?: string;
 }
 
@@ -101,7 +101,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       true
     );
 
-    function handleKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {
+    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
       switch (e.key) {
         case 'Escape':
         case 'Tab': {

package/src/Menu/MenuPopover.tsx

@@ -1,14 +1,14 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { PopperProps } from '../Popper';
 import { Popper } from '../Popper';
 import { useMenuContext } from './context';
 
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(

package/src/Menu/context.ts

@@ -1,4 +1,9 @@
-import type { MutableRefObject } from 'react';
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+} from 'react';
 import { createContext, useContext } from 'react';
 
 export type ItemObject = { text: string; value: any; id: string | undefined };
@@ -10,9 +15,9 @@ export interface MenuContextProps {
   openWithArrowKeyRef: MutableRefObject<string | null>;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open: boolean;

package/src/Modal/Modal.tsx

@@ -1,16 +1,20 @@
-import type { ReactNode } from 'react';
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef, useRef } from 'react';
-import * as React from 'react';
 
 import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
 import { FocusLock } from '../FocusLock';
 import { assignMultipleRefs } from '../utils';
 
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   children?: ReactNode;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   trapFocus?: boolean;
 }