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

package/src/Chip/ChoiceChip.tsx

@@ -1,23 +1,27 @@
+import type { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { RadioButton, CheckBox } from '@basic-ui/core';
-import { ChipBaseProps, ChipBase } from './ChipBase';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
 import { Box } from '../Box';
-import { rem } from 'polished';
 
 export type ChoiceChipProps = ChipBaseProps<
   HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
+  InputHTMLAttributes<HTMLInputElement>
 > & {
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leftIcon?: 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,
@@ -30,21 +34,23 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
       defaultValue,
       disabled,
       onChange,
-      leftIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      __css,
       ...otherProps
     } = props;
 
     const theme = useTheme();
-    const sumOpacity = checked ? 0.12 : 0;
 
     return (
       <ChipBase
         as="label"
         disabled={disabled}
-        backgroundColor={'surface'}
-        color={checked ? color : 'on.surface'}
-        borderOpacity={checked ? 0.6 : 0.24}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
         {...otherProps}
       >
         <Box
@@ -56,12 +62,14 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
           }}
         >
           <RippleBox<
             RippleBoxProps<
               HTMLInputElement,
-              React.InputHTMLAttributes<HTMLInputElement>
+              InputHTMLAttributes<HTMLInputElement>
             >
           >
             as="input"
@@ -75,13 +83,13 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             theme={theme}
             disabled={disabled}
             rippleColor={color}
-            baseOpacity={0 + sumOpacity}
-            hoverOpacity={0.12 + sumOpacity}
-            focusOpacity={0.24 + sumOpacity}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
             name={name}
             ref={forwardedRef}
             __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
+              bg: 'transparent',
               top: 0,
               left: 0,
               width: '100%',
@@ -93,15 +101,11 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
               border: 'none',
               borderRadius: 0,
               position: 'absolute',
-              color: 'inherit',
             }}
           />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" pr={rem(12)}>
-            {children}
-          </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
         </Box>
       </ChipBase>
     );
@@ -112,9 +116,9 @@ export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function ChoiceChip(props, forwardedRef) {
     const { type = 'checkbox', ...otherProps } = props;
 
-    const Comp: React.FC<ChoiceChipProps> = (type === 'radio'
-      ? RadioButton
-      : CheckBox) as any;
+    const Comp: FC<ChoiceChipProps> = (
+      type === 'radio' ? RadioButton : CheckBox
+    ) as any;
 
     return (
       <Comp ref={forwardedRef} as={InnerInput} type={type} {...otherProps} />

package/src/ColorMode/ColorModeProvider.tsx

@@ -1,7 +1,9 @@
+import type { FC, ReactNode } from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import type * as React from 'react';
 import { Global } from '@emotion/react';
-import { ColorMode, ColorModeContext } from './color-mode';
+
+import type { ColorMode } from './color-mode';
+import { ColorModeContext } from './color-mode';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
@@ -9,7 +11,7 @@ import {
 } from './constants';
 
 interface ColorModeProviderProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   styles: Record<string, Record<string, string>>;
 }
 
@@ -33,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,6 @@
+import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
-import type * as React from 'react';
+
 import {
   Combobox,
   ComboboxOption,
@@ -33,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);
   };
 
@@ -91,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,32 +1,42 @@
-import { FC, forwardRef } from 'react';
-import type * as React from 'react';
+import type { FC, HTMLAttributes, RefAttributes } from 'react';
+import { forwardRef } from 'react';
+import type {
+  ComboboxProps as ComboboxPropsCore,
+  ComboboxInputProps as ComboboxInputPropsCore,
+  ComboboxLabelProps as ComboboxLabelPropsCore,
+  ComboboxListProps as ComboboxListPropsCore,
+  ComboboxOptionProps as ComboboxOptionPropsCore,
+  ComboboxPopoverProps as ComboboxPopoverPropsCore,
+  ComboboxButtonProps as ComboboxButtonPropsCore,
+  PopperProps as PopperCoreProps,
+} from '@basic-ui/core';
 import {
   Combobox as _ComboboxCore,
-  ComboboxProps as ComboboxPropsCore,
   ComboboxInput as _ComboboxInputCore,
-  ComboboxInputProps as ComboboxInputPropsCore,
   ComboboxLabel as _ComboboxLabelCore,
-  ComboboxLabelProps as ComboboxLabelPropsCore,
   ComboboxList as _ComboboxListCore,
-  ComboboxListProps as ComboboxListPropsCore,
   ComboboxOption as _ComboboxOptionCore,
-  ComboboxOptionProps as ComboboxOptionPropsCore,
   ComboboxPopover as _ComboboxPopoverCore,
-  ComboboxPopoverProps as ComboboxPopoverPropsCore,
   ComboboxButton as _ComboboxButtonCore,
-  ComboboxButtonProps as ComboboxButtonPropsCore,
   Popper as _PopperCore,
-  PopperProps as PopperCoreProps,
   useComboBoxContext,
 } from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
-import { TextField, TextFieldProps } from '../TextField';
-import { List, ListProps } from '../List';
-import { ListItem, ListItemProps } from '../ListItem';
-import { Text, TextProps } from '../Text';
-import { Button, ButtonProps } from '../Button';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { TextFieldProps } from '../TextField';
+import { TextField } from '../TextField';
+import type { ListProps } from '../List';
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { ListItem } from '../ListItem';
+import type { TextProps } from '../Text';
+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';
 
@@ -34,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;
@@ -63,7 +73,7 @@ export type ComboboxInputProps = Omit<
   ComboboxInputPropsCore & TextFieldProps,
   'ref'
 > &
-  React.RefAttributes<HTMLInputElement>;
+  RefAttributes<HTMLInputElement>;
 
 const ComboboxInputCore: FC<ComboboxInputProps> = _ComboboxInputCore as any;
 
@@ -85,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;
 
@@ -98,11 +108,12 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         ref={forwardedRef}
         innerAs={as}
         outlined={false}
-        elevation={8}
+        elevation={2}
+        darkThemeBackgroundOverlay={2}
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
-          borderRadius: 'default',
+          borderRadius: 'extra-small',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },
@@ -145,7 +156,8 @@ const ComboboxPopperBox = forwardRef<HTMLDivElement, PopperProps>(
 
 export type ComboboxPopoverProps = ComboboxPopoverPropsCore & ListProps;
 
-const ComboboxPopoverCore: FC<ComboboxPopoverProps> = _ComboboxPopoverCore as any;
+const ComboboxPopoverCore: FC<ComboboxPopoverProps> =
+  _ComboboxPopoverCore as any;
 
 export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(
   (props, forwardedRef) => {
@@ -168,7 +180,7 @@ export type ComboboxOptionProps = Omit<
   ComboboxOptionPropsCore & ListItemProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLIElement>;
+  RefAttributes<HTMLLIElement>;
 
 const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
 
@@ -193,7 +205,7 @@ export type ComboboxLabelProps = Omit<
   ComboboxLabelPropsCore & TextProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLabelElement>;
+  RefAttributes<HTMLLabelElement>;
 
 const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
 
@@ -236,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/Dialog.story.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { Dialog, DialogAnimationModes } from './';
+
+import type { DialogAnimationModes } from './';
+import { Dialog } from './';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Box } from '../Box';

package/src/Dialog/Dialog.tsx

@@ -1,10 +1,15 @@
 import { forwardRef } from 'react';
 import { Portal } from '@basic-ui/core';
-import { Scrim, ScrimProps } from './Scrim';
-import { DialogContainer, DialogContainerProps } from './DialogContainer';
-import { DialogSurface, DialogSurfaceProps } from './DialogSurface';
+
+import type { ScrimProps } from './Scrim';
+import { Scrim } from './Scrim';
+import type { DialogContainerProps } from './DialogContainer';
+import { DialogContainer } from './DialogContainer';
+import type { DialogSurfaceProps } from './DialogSurface';
+import { DialogSurface } from './DialogSurface';
 import { useDialogAnimation } from './useDialogAnimation';
-import { DialogBackdrop, DialogBackdropProps } from './DialogBackdrop';
+import type { DialogBackdropProps } from './DialogBackdrop';
+import { DialogBackdrop } from './DialogBackdrop';
 import type { DialogAnimationModes } from './useDialogAnimation';
 export type { DialogAnimationModes } from './useDialogAnimation';
 

package/src/Dialog/DialogBackdrop.tsx

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

package/src/Dialog/DialogContainer.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type DialogContainerProps = BoxProps;
 

package/src/Dialog/DialogSurface.tsx

@@ -1,36 +1,51 @@
+import type { FC, Ref } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Modal as _Modal, ModalProps } from '@basic-ui/core';
-import { Paper, PaperProps } from '../Paper';
-import { useTheme } from '../theme';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
+import { get, variant } from 'styled-system';
+
+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;
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
 
 export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
   function DialogSurface(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
+    const { __css, variant: variantProp = 'base', ...otherProps } = props;
     const theme = useTheme();
 
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
     return (
       <Modal
         ref={forwardedRef}
         as={Paper}
         theme={theme}
-        elevation={24}
+        elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
         __css={{
           position: 'relative',
-          bg: 'surface',
-          borderRadius: rem(8),
+          borderRadius: 'small',
           width: '100%',
           maxWidth: rem(600),
           maxHeight: '100%',
           overflow: 'auto',
           pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
           ...__css,
         }}
         {...otherProps}

package/src/Dialog/Scrim.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 
 export type ScrimProps = BoxProps;

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,11 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+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.story.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+
 import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/FloatingLabel/FloatingLabel.tsx

@@ -1,12 +1,14 @@
+import type { ComponentType, LabelHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text as _Text } from '../Text';
 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;
@@ -35,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;
@@ -49,7 +51,7 @@ export const FloatingLabel = forwardRef<HTMLLabelElement, FloatingLabelProps>(
     return (
       <Text
         as="label"
-        variant="subtitle1"
+        variant="body-large"
         ref={forwardedRef}
         __css={{
           position: 'absolute',
@@ -59,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

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+
 import { LineRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
@@ -28,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,14 +1,17 @@
-import { forwardRef, useState, useRef, useEffect, CSSProperties } from 'react';
-import type * as React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { rem } from 'polished';
+
 import { useTheme } from '../theme';
-import { Box, BoxProps } from '../Box';
+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>(
@@ -67,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,14 +1,13 @@
+import type { AnchorHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+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,11 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Paper, PaperProps } from '../Paper';
+
+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(
@@ -31,6 +33,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(function List(
       py={py}
       px={px}
       elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
       variant={variant}
       outlined={outlined}
       __css={{

package/src/ListItem/ListItem.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { ListItem, ListItemText } from './';
 import { List } from '../List';
 // import './styles.css';