@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.11

package/src/CheckBox/CheckBox.tsx

@@ -1,10 +1,13 @@
-import { forwardRef, cloneElement, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
+import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';
+import { forwardRef, cloneElement } from 'react';
 import { rem } from 'polished';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import { CheckBoxIcon } from './CheckBoxIcon';
 import {
   SelectionControlLabel,
@@ -12,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,16 +1,19 @@
+import type { ElementType, ReactNode } 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 { 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>(
@@ -43,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,15 +1,17 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { ChipBaseProps, ChipBase } from './ChipBase';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
 import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { rem } from 'polished';
 
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
   disabled?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
@@ -21,7 +23,7 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
       leadingIcon,
       trailingIcon,
       children,
-      color = 'surface',
+      color,
       __css,
       ...otherProps
     } = props;

package/src/Chip/Chip.story.tsx

@@ -1,7 +1,6 @@
 import { Chip } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
-import { alpha } from '../color';
 import { RadioGroup } from '../RadioButton';
 import { ChoiceChip } from './ChoiceChip';
 import { LoremIpsum } from '../Text/LoremIpsum';
@@ -56,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,18 +1,21 @@
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
-import { Theme, useTheme } from '../theme';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 import {
   alpha,
   getDarkThemeBackgroundOverlay,
   getColorOverlay,
 } from '../color';
-import { rem } from 'polished';
 
 export type ChipBaseProps<
   H = HTMLDivElement,
-  Attr = React.HTMLAttributes<H>
+  Attr = HTMLAttributes<H>
 > = BoxProps<H, Attr> & {
   variant?: 'filled' | 'outlined';
   backgroundColor?: string;
@@ -32,7 +35,6 @@ function getFilledCSS(
       ? { bg }
       : {
           ...getColorOverlay(theme, 'surface', 'primary', 0.05),
-          ...getDarkThemeBackgroundOverlay(theme, 2),
         }),
     color,
     '&::before': {

package/src/Chip/ChoiceChip.tsx

@@ -1,24 +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';
-  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,
@@ -66,7 +69,7 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
           <RippleBox<
             RippleBoxProps<
               HTMLInputElement,
-              React.InputHTMLAttributes<HTMLInputElement>
+              InputHTMLAttributes<HTMLInputElement>
             >
           >
             as="input"
@@ -113,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/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;
 
@@ -99,10 +109,11 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         innerAs={as}
         outlined={false}
         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,15 +1,15 @@
+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 { getColorOverlay } from '../color';
 
-const Modal = _Modal as React.FC<
-  DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
->;
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+
+const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
 
 export type DialogSurfaceProps = ModalProps &
   PaperProps & {
@@ -30,8 +30,8 @@ export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
         as={Paper}
         theme={theme}
         elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
         __css={{
-          ...getColorOverlay(theme, 'surface', 'primary', overlayValue),
           position: 'relative',
           borderRadius: 'small',
           width: '100%',

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;