@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/Box/Box.tsx

@@ -1,5 +1,5 @@
+import type { ElementType, FC, HTMLAttributes, RefAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { CSSObject } from '@emotion/react';
 import styled from '@emotion/styled';
 import type {
@@ -51,7 +51,7 @@ export type SxStyleProp =
     >;
 
 export interface BaseProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   sx?: SxStyleProp;
   // css?: CSSObject | ((props: { theme: Theme }) => CSSObject);
   __css?: SxStyleProp;
@@ -85,12 +85,10 @@ type KnownBoxProps = BaseProps &
 
 export type BoxProps<
   H = HTMLDivElement,
-  Attr extends React.HTMLAttributes<H> = React.HTMLAttributes<H>
-> = Omit<Attr, keyof KnownBoxProps> &
-  Partial<KnownBoxProps> &
-  React.RefAttributes<H>;
+  Attr extends HTMLAttributes<H> = HTMLAttributes<H>
+> = Omit<Attr, keyof KnownBoxProps> & Partial<KnownBoxProps> & RefAttributes<H>;
 
-const BoxBase = styled('div' as unknown as React.FC, {
+const BoxBase = styled('div' as unknown as FC, {
   shouldForwardProp,
 })<BoxProps<HTMLDivElement>>(
   {
@@ -117,7 +115,7 @@ const BoxBase = styled('div' as unknown as React.FC, {
 );
 
 export const Box: <
-  Props = BoxProps<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>
+  Props = BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
 >(
   props: Props
 ) => JSX.Element = forwardRef<HTMLDivElement, BoxProps<HTMLDivElement>>(

package/src/Button/BaseButton.tsx

@@ -1,5 +1,5 @@
+import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import { variant } from 'styled-system';
 
@@ -7,10 +7,7 @@ import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
 export interface BaseButtonProps
-  extends BoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > {
+  extends BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>> {
   elevation?: string;
   isGroupedButton?: boolean;
 }
@@ -21,12 +18,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const { __css, variant: variantProp, elevation, ...otherProps } = props;
 
     return (
-      <Box<
-        BoxProps<
-          HTMLButtonElement,
-          React.ButtonHTMLAttributes<HTMLButtonElement>
-        >
-      >
+      <Box<BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>>
         as="button"
         ref={ref}
         __css={{
@@ -46,6 +38,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           touchAction: 'manipulation',
           userSelect: 'none',
           minWidth: 'auto',
+          whiteSpace: 'nowrap',
           '&::-moz-focus-inner': {
             border: 0,
           },

package/src/Button/Button.story.tsx

@@ -29,6 +29,10 @@ const NavigationIcon = (props) => (
 const Example = (props) => {
   return (
     <Box bg="surface">
+      <div className="bg-primary w-16 h-16 text-body-medium">Hello</div>
+      <div className="bg-primary-container w-16 h-16" />
+      <div className="bg-on-primary-container w-16 h-16" />
+      <div className="bg-ss-container-high w-16 h-16" />
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="filled" {...props}>
           Filled
@@ -99,7 +103,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/OutlinedButton.tsx

@@ -17,7 +17,7 @@ export const OutlinedButton = styled(TransparentButton)(
     },
     '&:disabled': {
       color: alpha('on.surface', 0.38),
-      borderColor: alpha('on.surface', 0.12),
+      borderColor: alpha('outline', 0.12),
       cursor: 'default',
     },
   }),

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': {
@@ -86,22 +86,23 @@ const HeartCheckBoxIcon = (props) => {
 
 function ThreeStates() {
   const [state, setState] = useState<boolean | 'mixed'>(false);
+  const prevState = useRef(false);
 
   function onChange() {
-    console.log('here', state);
     switch (state) {
       case false:
+        prevState.current = false;
         setState('mixed');
         break;
       case 'mixed':
-        setState(true);
+        setState(prevState.current ? false : true);
         break;
       case true:
-        setState(false);
+        prevState.current = true;
+        setState('mixed');
         break;
     }
   }
-  console.log({ state });
 
   return (
     <CheckBox

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/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,
@@ -31,12 +30,13 @@ import { TextField } from '../TextField';
 import type { ListProps } from '../List';
 import { List } from '../List';
 import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
+import { listItemStyle } 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';
 
@@ -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,13 +113,16 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
-          borderRadius: 'default',
+          borderRadius: 'extra-small',
           '[data-popper-placement="top"] &': {
             transformOrigin: 'bottom center',
           },
           '[data-popper-placement="bottom"] &': {
             transformOrigin: 'top center',
           },
+          '& [data-reach-combobox-option=""]': {
+            ...listItemStyle('primary'),
+          },
           ...__css,
         }}
         {...otherProps}
@@ -180,7 +183,7 @@ export type ComboboxOptionProps = Omit<
   ComboboxOptionPropsCore & ListItemProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLIElement>;
+  RefAttributes<HTMLLIElement>;
 
 const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
 
@@ -189,7 +192,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
     const { as = 'li', ...otherProps } = props;
     return (
       <ComboboxOptionCore
-        as={ListItem}
+        as={Box}
         ref={forwardedRef}
         innerAs={as}
         {...otherProps}
@@ -205,7 +208,7 @@ export type ComboboxLabelProps = Omit<
   ComboboxLabelPropsCore & TextProps,
   'ref'
 > &
-  React.RefAttributes<HTMLLabelElement>;
+  RefAttributes<HTMLLabelElement>;
 
 const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
 
@@ -248,8 +251,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,13 +1,12 @@
+import type { ElementType } 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 { alpha } from '../color';
 
 export interface DividerProps extends BoxProps {
-  as?: React.ElementType<any>;
+  as?: ElementType<any>;
   direction?: 'vertical' | 'horizontal';
 }
 
@@ -33,13 +32,13 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
             height: 0,
             borderBottomWidth: rem(1),
             borderBottomStyle: 'solid',
-            borderBottomColor: alpha('on.surface', 0.12),
+            borderBottomColor: 'outline-variant',
           }),
           ...(direction === 'vertical' && {
             width: 0,
             borderRightWidth: rem(1),
             borderRightStyle: 'solid',
-            borderRightColor: alpha('on.surface', 0.12),
+            borderRightColor: 'outline-variant',
           }),
           ...__css,
         }}

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} />