@basic-ui/material 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/Button/Button.story.tsx

@@ -17,6 +17,15 @@ const AppsIcon = (props) => (
   </svg>
 );
 
+const NavigationIcon = (props) => (
+  <svg height={48} width={48} viewBox="0 0 48 48" {...props}>
+    <path
+      fill="currentColor"
+      d="m26.35 42-5.7-14.65L6 21.65V19.5L42 6 28.5 42Zm.9-5.7 9.6-25.15-25.1 9.6 11.2 4.3Zm-4.3-11.25Z"
+    />
+  </svg>
+);
+
 const Example = (props) => {
   return (
     <Box bg="surface">
@@ -44,15 +53,18 @@ const Example = (props) => {
       </Box>
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="fab-mini" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab-large" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="36px" height="36px" />
         </Button>
         <Button variant="fab-extended" elevation="floating" {...props}>
+          <Box mr={2} lineHeight={0}>
+            <NavigationIcon width="24px" height="24px" />
+          </Box>
           Fab extended
         </Button>
       </Box>
@@ -87,7 +99,12 @@ export const DebugButtonClick = () => {
 
   return (
     <Box m={3}>
-      <Button onClick={() => setCount((c) => c + 1)} variant="filled">
+      <Button
+        onClick={() => setCount((c) => c + 1)}
+        variant="filled"
+        elevation="none"
+        color="surface"
+      >
         Click count: {count}
       </Button>
     </Box>

package/src/Button/Button.tsx

@@ -1,5 +1,5 @@
+import type { ComponentType, ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import * as TransparentButton from './TransparentButton';
 import * as FloatingActionButton from './FloatingActionButton';
@@ -46,8 +46,8 @@ const rippleMapping = {
 export type ButtonColors = 'primary' | 'secondary' | string;
 
 export interface ButtonProps extends BaseButtonProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   variant?: ButtonVariants;
   color?: ButtonColors;
   disabled?: boolean;
@@ -78,7 +78,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const theme = useTheme();
 
-    const Comp: React.ComponentType<any> = componentMapping[variant];
+    const Comp: ComponentType<any> = componentMapping[variant];
     const getRippleProperties = rippleMapping[variant];
 
     const rippleProps = useRippleSurface({

package/src/Button/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 import type { ButtonProps } from './Button';
 import type { ButtonGroupContextProps } from './context';

package/src/Button/FilledButton.tsx

@@ -4,7 +4,7 @@ import { get, css } from '@styled-system/css';
 
 import { BaseButton } from './BaseButton';
 import type { Theme } from '../theme';
-import { alpha, getBackgroundOverlay } from '../color';
+import { alpha, mixColor } from '../color';
 
 export const FilledButton = styled(BaseButton)(
   ({ color = 'primary', theme }) =>
@@ -29,14 +29,9 @@ export const FilledButton = styled(BaseButton)(
         outlineOffset: '2px',
       },
     }),
-  ({ color = 'primary', elevation = 'none', theme }) =>
-    color === 'surface' && {
-      ...getBackgroundOverlay(
-        theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),
-        'primary'
-      ),
-    },
+  ({ color = 'primary' }) =>
+    color === 'surface' &&
+    css({ background: mixColor('surface', 'primary', 0.05) }),
   ({ color = 'primary', theme, isGroupedButton = false }) =>
     isGroupedButton && {
       '[data-button-group=""] &': {

package/src/Button/SpinnerButton.story.tsx

@@ -70,7 +70,7 @@ const Example = ({ vertical = false }) => {
       >
         <RemoveIcon />
       </SpinnerButton>
-      <Text variant="body1" textAlign="center" width={size}>
+      <Text variant="body-medium" textAlign="center" width={size}>
         {value}
       </Text>
       <SpinnerButton

package/src/CheckBox/CheckBox.story.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { keyframes } from '@emotion/react';
 import type { Keyframes } from '@emotion/serialize';
 
-import { CheckBox, Box } from '../';
+import { CheckBox, Box, EASING_STANDARD } from '../';
 
 export default {
   title: 'components/CheckBox',
@@ -71,7 +71,7 @@ const HeartCheckBoxIcon = (props) => {
         opacity: props.opacity,
         color: props.borderColor,
         animation: animation.current
-          ? `${animation.current} .25s cubic-bezier(.4,0,.2,1)`
+          ? `${animation.current} .25s ${EASING_STANDARD}`
           : undefined,
         translate: 'scale(1)',
         '& > svg': {

package/src/CheckBox/CheckBox.tsx

@@ -1,6 +1,5 @@
-import type { InputHTMLAttributes } from 'react';
+import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';
 import { forwardRef, cloneElement } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 
@@ -16,20 +15,17 @@ import {
 } from '../SelectionControl';
 
 export interface CheckBoxProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
-  icon?: React.ReactElement<{ checked?: boolean; disabled?: boolean }>;
+  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;
 }
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   CheckBoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,18 +1,19 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { CheckPath } from './CheckPath';
 import { IndeterminatePath } from './IndeterminatePath';
+import { EASING_STANDARD } from '../motion';
 
 export interface CheckBoxIconProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
   indeterminate?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
@@ -45,8 +46,7 @@ export const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
           borderStyle: 'solid',
           width: rem(18),
           height: rem(18),
-          transition:
-            'background-color 90ms 0s cubic-bezier(0,0,.2,1), border-color 90ms 0s cubic-bezier(0,0,.2,1), opacity 90ms 0s cubic-bezier(0,0,.2,1)',
+          transition: `background-color 90ms 0s ${EASING_STANDARD}, border-color 90ms 0s ${EASING_STANDARD}, opacity 90ms 0s ${EASING_STANDARD}`,
           '& > svg': {
             display: 'block',
           },

package/src/Chip/ButtonChip.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { ChipBaseProps } from './ChipBase';
@@ -10,8 +10,8 @@ import { useTheme } from '../theme';
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
   disabled?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(

package/src/Chip/Chip.story.tsx

@@ -55,7 +55,7 @@ const Example = ({ variant, color = 'default' }) => {
 
   return (
     <Box>
-      <Text variant="h6" mb={2}>
+      <Text variant="title-small" mb={2}>
         Variant: {variant}, Color: {color}
       </Text>
       <Box my={2} display="flex" sx={{ gap: 2 }}>

package/src/Chip/ChipBase.tsx

@@ -1,5 +1,5 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { variant } from 'styled-system';
 import { rem } from 'polished';
 
@@ -15,7 +15,7 @@ import {
 
 export type ChipBaseProps<
   H = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & {
   variant?: 'filled' | 'outlined';
   backgroundColor?: string;

package/src/Chip/ChoiceChip.tsx

@@ -1,5 +1,5 @@
+import type { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { RadioButton, CheckBox } from '@basic-ui/core';
 import { rem } from 'polished';
 
@@ -12,16 +12,16 @@ import { Box } from '../Box';
 
 export type ChoiceChipProps = ChipBaseProps<
   HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
+  InputHTMLAttributes<HTMLInputElement>
 > & {
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
-const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
+const InnerInput: FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function InnerInput(props, forwardedRef) {
     const {
       type,
@@ -69,7 +69,7 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
           <RippleBox<
             RippleBoxProps<
               HTMLInputElement,
-              React.InputHTMLAttributes<HTMLInputElement>
+              InputHTMLAttributes<HTMLInputElement>
             >
           >
             as="input"
@@ -116,7 +116,7 @@ export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function ChoiceChip(props, forwardedRef) {
     const { type = 'checkbox', ...otherProps } = props;
 
-    const Comp: React.FC<ChoiceChipProps> = (
+    const Comp: FC<ChoiceChipProps> = (
       type === 'radio' ? RadioButton : CheckBox
     ) as any;
 

package/src/ColorMode/ColorModeProvider.tsx

@@ -1,5 +1,5 @@
+import type { FC, ReactNode } from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import * as React from 'react';
 import { Global } from '@emotion/react';
 
 import type { ColorMode } from './color-mode';
@@ -11,7 +11,7 @@ import {
 } from './constants';
 
 interface ColorModeProviderProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   styles: Record<string, Record<string, string>>;
 }
 
@@ -35,7 +35,7 @@ function saveColorMode(colorMode: ColorMode, saveToStorage = true) {
   document.body.classList.replace(remove, add);
 }
 
-export const ColorModeProvider: React.FC<ColorModeProviderProps> = (props) => {
+export const ColorModeProvider: FC<ColorModeProviderProps> = (props) => {
   const { children, styles } = props;
   const [colorMode, _setColorMode] = useState<ColorMode>();
 

package/src/Combobox/Combobox.story.tsx

@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
-import * as React from 'react';
 
 import {
   Combobox,
@@ -34,7 +34,7 @@ function UncontrolledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
   };
 
@@ -92,7 +92,7 @@ function ControlledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
     setSelected('');
   };

package/src/Combobox/Combobox.tsx

@@ -1,6 +1,5 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes, RefAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type {
   ComboboxProps as ComboboxPropsCore,
   ComboboxInputProps as ComboboxInputPropsCore,
@@ -37,6 +36,7 @@ import { Text } from '../Text';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 
 export { useComboBoxContext } from '@basic-ui/core';
 
@@ -44,7 +44,7 @@ export { useComboBoxContext } from '@basic-ui/core';
 // Combobox
 
 export type ComboboxProps = Omit<
-  BoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>,
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
   'onSelect'
 > &
   ComboboxPropsCore;
@@ -73,7 +73,7 @@ export type ComboboxInputProps = Omit<
   ComboboxInputPropsCore & TextFieldProps,
   'ref'
 > &
-  React.RefAttributes<HTMLInputElement>;
+  RefAttributes<HTMLInputElement>;
 
 const ComboboxInputCore: FC<ComboboxInputProps> = _ComboboxInputCore as any;
 
@@ -95,7 +95,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
 // ComboboxList
 
 export type ComboboxListProps = Omit<ComboboxListPropsCore & ListProps, 'ref'> &
-  React.RefAttributes<HTMLUListElement>;
+  RefAttributes<HTMLUListElement>;
 
 const ComboboxListCore: FC<ComboboxListProps> = _ComboboxListCore as any;
 
@@ -113,7 +113,7 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
-          borderRadius: 'default',
+          borderRadius: 'extra-small',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },
@@ -180,7 +180,7 @@ export type ComboboxOptionProps = Omit<
   ComboboxOptionPropsCore & ListItemProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLIElement>;
+  RefAttributes<HTMLLIElement>;
 
 const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
 
@@ -205,7 +205,7 @@ export type ComboboxLabelProps = Omit<
   ComboboxLabelPropsCore & TextProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLabelElement>;
+  RefAttributes<HTMLLabelElement>;
 
 const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
 
@@ -248,8 +248,7 @@ export const ComboboxButton = forwardRef<
         height: rem(40),
         px: 0,
         '& > svg': {
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         },
         '&[aria-expanded="false"] > svg': {
           color: alpha('on.surface', 0.54),

package/src/Dialog/DialogBackdrop.tsx

@@ -1,13 +1,13 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { ModalBackdropProps } from '@basic-ui/core';
 import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
-const ModalBackdrop = _ModalBackdrop as React.FC<
-  DialogBackdropProps & { ref?: React.Ref<HTMLDivElement> }
+const ModalBackdrop = _ModalBackdrop as FC<
+  DialogBackdropProps & { ref?: Ref<HTMLDivElement> }
 >;
 
 export type DialogBackdropProps = ModalBackdropProps &

package/src/Dialog/DialogSurface.tsx

@@ -1,5 +1,5 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { ModalProps } from '@basic-ui/core';
 import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -9,9 +9,7 @@ import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 import { useTheme } from '../theme';
 
-const Modal = _Modal as React.FC<
-  DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
->;
+const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
 
 export type DialogSurfaceProps = ModalProps &
   PaperProps & {

package/src/Dialog/useDialogAnimation.tsx

@@ -1,4 +1,5 @@
 import { useAnimation } from '../hooks/useAnimation';
+import { EASING_STANDARD } from '../motion';
 
 const styles = {
   slide: {
@@ -34,10 +35,8 @@ export function useDialogAnimation(opts: {
   });
   const scrimOpacity = state === 'open' ? 1 : 0;
 
-  const transition = `opacity ${timing}ms cubic-bezier(.4,0,.2,1),transform ${timing}ms cubic-bezier(.4,0,.2,1)`;
-  const scrimTransition = `opacity ${
-    (timing * 0.4) | 0
-  }ms cubic-bezier(.4,0,.2,1)`;
+  const transition = `opacity ${timing}ms ${EASING_STANDARD},transform ${timing}ms ${EASING_STANDARD}`;
+  const scrimTransition = `opacity ${(timing * 0.4) | 0}ms ${EASING_STANDARD}`;
 
   return {
     containerStyle: { ...style, transition },

package/src/Divider/Divider.tsx

@@ -1,5 +1,5 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
@@ -7,7 +7,7 @@ import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface DividerProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   direction?: 'vertical' | 'horizontal';
 }
 

package/src/FloatingLabel/FloatingLabel.tsx

@@ -1,13 +1,14 @@
+import type { ComponentType, LabelHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { Text as _Text } from '../Text';
 import { useNotchedOutlineContext } from '../NotchedOutline/context';
+import { EASING_STANDARD } from '../motion';
 
 export interface FloatingLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  children?: React.ReactNode;
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  children?: ReactNode;
   active?: boolean;
   offsetX?: number;
   height?: number;
@@ -36,7 +37,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
     const ctx = useNotchedOutlineContext();
     const notchStart = ctx ? ctx.notchStart : 0;
 
-    const Text: React.ComponentType<any> = _Text;
+    const Text: ComponentType<any> = _Text;
 
     const translateX =
       translateXProp !== undefined ? translateXProp : notchStart - offsetX;
@@ -50,7 +51,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
     return (
       <Text
         as="label"
-        variant="subtitle1"
+        variant="body-large"
         ref={forwardedRef}
         __css={{
           position: 'absolute',
@@ -60,7 +61,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
           left: rem(offsetX),
           height: typeof height === 'number' ? rem(height) : height,
           transformOrigin: 'left center',
-          transition: `transform ${transitionTime}ms cubic-bezier(.4,0,.2,1), color ${transitionTime}ms cubic-bezier(.4,0,.2,1)`,
+          transition: `transform ${transitionTime}ms ${EASING_STANDARD}, color ${transitionTime}ms ${EASING_STANDARD}`,
           pointerEvents: 'none',
         }}
         style={{

package/src/LineRipple/LineRipple.story.tsx

@@ -29,7 +29,7 @@ const Example = () => {
         bg="#eee"
         overflow="hidden"
       >
-        <Text variant="body1" style={{ zIndex: 1 }}>
+        <Text variant="body-medium" style={{ zIndex: 1 }}>
           Hello
         </Text>
         <LineRipple active={active} />

package/src/LineRipple/LineRipple.tsx

@@ -1,17 +1,17 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { useTheme } from '../theme';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export interface LineRippleProps extends BoxProps {
   active?: boolean;
   transitionDuration?: number;
   posx?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
@@ -70,7 +70,7 @@ export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
           zIndex: 1,
           transform: 'scaleX(0)',
           transformOrigin: 'center center',
-          transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
+          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
           opacity: 0,
           ...__css,
         }}

package/src/Link/Link.tsx

@@ -1,5 +1,5 @@
+import type { AnchorHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
@@ -7,10 +7,7 @@ import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface LinkProps
-  extends BoxProps<
-    HTMLAnchorElement,
-    React.AnchorHTMLAttributes<HTMLAnchorElement>
-  > {
+  extends BoxProps<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>> {
   color?: string;
   // ReachRouter Props
   to?: string;

package/src/List/List.tsx

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