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

package/src/Select/styledComponents.tsx

@@ -1,12 +1,18 @@
+import type {
+  ElementType,
+  FC,
+  RefAttributes,
+  SelectHTMLAttributes,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { MenuButton as BaseMenuButton, MenuButtonProps } from '@basic-ui/core';
-import { Theme } from '../theme';
+import type { MenuButtonProps } from '@basic-ui/core';
+import { MenuButton as BaseMenuButton } from '@basic-ui/core';
+
+import type { Theme } from '../theme';
 import { Input } from '../TextField/Input';
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  as?: React.ElementType<any>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  as?: ElementType<any>;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
   theme: Theme;
@@ -15,9 +21,8 @@ export interface SelectProps
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ as: asProp = 'select', ...props }, forwardedRef) => {
-    const InputSelect: React.FC<
-      SelectProps & React.RefAttributes<HTMLSelectElement>
-    > = Input as any;
+    const InputSelect: FC<SelectProps & RefAttributes<HTMLSelectElement>> =
+      Input as any;
 
     return <InputSelect as={asProp} ref={forwardedRef} {...props} />;
   }
@@ -25,11 +30,10 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
-  SelectProps & { innerAs?: React.ElementType<any> }
+  SelectProps & { innerAs?: ElementType<any> }
 >(({ innerAs = 'div', ...props }, forwardedRef) => {
-  const InputButton: React.FC<
-    SelectProps & React.RefAttributes<HTMLButtonElement>
-  > = Input as any;
+  const InputButton: FC<SelectProps & RefAttributes<HTMLButtonElement>> =
+    Input as any;
 
   return (
     <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />

package/src/SelectItem/SelectItem.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { MenuItem, MenuItemProps } from '../Menu';
-import { useSelectContext } from '../Select/context';
 import { wrapEvent } from '@basic-ui/core';
 
+import type { MenuItemProps } from '../Menu';
+import { MenuItem } from '../Menu';
+import { useSelectContext } from '../Select/context';
+
 export type SelectItemProps = MenuItemProps;
 
 const ZERO_WIDTH_SPACE = '\u200b';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,14 +1,13 @@
-import { forwardRef, LabelHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface SelectionControlLabelProps
-  extends BoxProps<
-    HTMLLabelElement,
-    React.LabelHTMLAttributes<HTMLLabelElement>
-  > {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
+  as?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const SelectionControlLabel = forwardRef<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,11 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text, TextProps } from '../Text';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   disabled?: boolean;
 }
 

package/src/Skeleton/DelayAppearance.tsx

@@ -1,8 +1,10 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps, Box } from '../Box';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export const appearAnimation: Keyframes = keyframes({
   to: {
@@ -12,7 +14,7 @@ export const appearAnimation: Keyframes = keyframes({
 
 export interface DelayAppearanceProps extends BoxProps {
   timeoutInMilliseconds?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 /**

package/src/Skeleton/Skeleton.story.tsx

@@ -34,13 +34,13 @@ const Example = () => {
   return (
     <>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Pulse
         </Text>
         <Skeletons animation="pulse" />
       </Box>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Wave
         </Text>
         <Skeletons animation="wave" />

package/src/Skeleton/Skeleton.tsx

@@ -1,15 +1,17 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';
 
 export interface SkeletonProps
-  extends BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   animation?: 'pulse' | 'wave';
 }
 
@@ -19,7 +21,7 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
     const theme = useTheme();
 
     return (
-      <Box<BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>>
+      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
         ref={forwardedRef}
         as={as}
         __css={{

package/src/Skeleton/animation.ts

@@ -1,6 +1,7 @@
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
-import { SystemStyleObject } from '@styled-system/css';
+import type { Keyframes } from '@emotion/serialize';
+import type { SystemStyleObject } from '@styled-system/css';
+
 import { alpha } from '../color';
 
 export const pulseAnimation: Keyframes = keyframes({

package/src/Snackbar/Snackbar.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Snackbar } from './';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/Snackbar/Snackbar.tsx

@@ -1,19 +1,21 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
+import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
-import type * as React from 'react';
-import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
-} from '../ColorMode';
-import { Paper, PaperProps } from '../Paper';
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
 export interface SnackbarProps extends PaperProps {
-  action?: React.ReactElement;
+  action?: ReactElement;
   timeout?: number;
   dismissible?: boolean;
 }
@@ -40,7 +42,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
     return (
       <Paper
         elevation={4}
-        backgroundOverlay={4}
+        darkThemeBackgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }
@@ -66,7 +68,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
         }}
         {...otherProps}
       >
-        <Text variant="body2" as="span" py={2}>
+        <Text variant="body-medium" as="span" py={2}>
           {children}
         </Text>
         {action && (

package/src/Snackbar/Stack.tsx

@@ -1,8 +1,7 @@
-import { MutableRefObject, ReactElement, useLayoutEffect } from 'react';
-import type * as React from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 import {
+  useLayoutEffect,
   createContext,
-  FC,
   useContext,
   useEffect,
   useRef,
@@ -98,9 +97,7 @@ function StackContent({
   gap: number;
   placement: StackPlacement;
   maxSize: number;
-  onAddItemRef: React.MutableRefObject<
-    ((element: React.ReactElement) => void) | null
-  >;
+  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;
 }) {
   const id = useRef(0);
   const items = useRef<StackItem[]>([]);
@@ -110,7 +107,7 @@ function StackContent({
   }
 
   useEffect(() => {
-    onAddItemRef.current = (element: React.ReactElement) => {
+    onAddItemRef.current = (element: ReactElement) => {
       const itemId = String(++id.current);
 
       items.current.push({
@@ -200,7 +197,7 @@ interface StackItem {
 }
 
 export const StackProvider: FC<{
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
   gap?: number;
   placement?:
     | 'top-right'
@@ -211,8 +208,8 @@ export const StackProvider: FC<{
     | 'bottom-left';
   maxSize?: number;
 }> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
-  const onAddItemRef = useRef<(element: React.ReactElement) => void>(null);
-  function onAddItem(element: React.ReactElement) {
+  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
+  function onAddItem(element: ReactElement) {
     onAddItemRef.current?.(element);
   }
 

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,4 +1,7 @@
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;
@@ -98,7 +101,7 @@ export const placements = {
 const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
 
 function getTransition(timems: number) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {
@@ -108,7 +111,7 @@ const defaultAnimation = {
 };
 
 export function useSnackbarAnimation(
-  ref: React.MutableRefObject<HTMLDivElement | null>,
+  ref: MutableRefObject<HTMLDivElement | null>,
   timeout: number
 ): {
   style: CSSProperties;

package/src/Switch/Switch.tsx

@@ -1,27 +1,27 @@
-import { forwardRef, 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 } from 'react';
+import { forwardRef } from 'react';
 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 {
   SelectionControlLabel,
   SelectionControlText,
 } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   SwitchProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 
-interface SwitchProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+export interface SwitchProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
 }

package/src/Switch/styledComponents.tsx

@@ -1,5 +1,7 @@
 import { rem } from 'polished';
+
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 const BORDER_WIDTH = 2;
 const TRAIL_WIDTH = 52;
@@ -47,8 +49,7 @@ export const SwitchThumb = ({ checked = false, ...otherProps }) => (
         (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
       )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE,
@@ -77,17 +78,19 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
-        backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
-      },
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
-        height: checked
-          ? CIRCLE_SIZE_ACTIVE_CHECKED
-          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-        width: checked
-          ? CIRCLE_SIZE_ACTIVE_CHECKED
-          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-      },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
+        {
+          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+        },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
+        {
+          height: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+          width: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        },
       '[data-switch-thumb=""]:disabled ~ &': {
         opacity: checked ? 1 : 0.38,
         backgroundColor: checked ? 'surface' : 'on.surface',

package/src/Tab/Tab.tsx

@@ -1,8 +1,11 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import type * as React from 'react';
-import { Tab as TabCore, TabProps as TabPropsCore } from '@basic-ui/core';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { Text } from '../Text';
 import { Box } from '../Box';
@@ -10,10 +13,7 @@ import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
 
 export type TabProps = TabPropsCore &
-  RippleBoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  >;
+  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
 
 const TabInner = forwardRef<
   HTMLButtonElement,
@@ -23,7 +23,7 @@ const TabInner = forwardRef<
   const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
 
   return (
-    <Box position="relative" display="flex" flexGrow={1} flexDirection="column">
+    <Box position="relative" display="flex" flex={1} flexDirection="column">
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,
@@ -53,7 +53,7 @@ const TabInner = forwardRef<
       >
         <Text
           as="span"
-          variant="button"
+          variant="label-large"
           color="inherit"
           height="100%"
           textAlign="center"

package/src/Tab/TabList.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, useRef } from 'react';
-import {
-  TabList as TabListCore,
-  TabListProps as TabListPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import { TabList as TabListCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { TabIndicatorProvider } from '../TabIndicator';
 import { TabListProvider } from './context';
 

package/src/Tab/TabPanel.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import {
-  TabPanel as TabPanelCore,
-  TabPanelProps as TabPanelPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import { TabPanel as TabPanelCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TabPanelProps = TabPanelPropsCore & BoxProps;
 

package/src/TabIndicator/TabIndicator.tsx

@@ -1,9 +1,12 @@
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
-import { useTabIndicatorContext } from './context';
 import { assignMultipleRefs } from '@basic-ui/core';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
+
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
   color?: string;
@@ -22,7 +25,8 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
       if (selected && ref.current) {
         if (currentIndicator.current !== null) {
           // We are switching indicator, let's slide!
-          const previousClientRect = currentIndicator.current.getBoundingClientRect();
+          const previousClientRect =
+            currentIndicator.current.getBoundingClientRect();
           const currentClientRect = ref.current.getBoundingClientRect();
           const widthDelta = previousClientRect.width / currentClientRect.width;
           const xPosition = previousClientRect.left - currentClientRect.left;
@@ -56,7 +60,7 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
           transformOrigin: 'left',
-          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
         }}
         {...otherProps}

package/src/TabIndicator/context.ts

@@ -1,8 +1,9 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 // TabIndicator Component
 export interface TabIndicatorContextProps {
-  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
 }
 
 const TabIndicatorContext = createContext<TabIndicatorContextProps>({

package/src/Table/Table.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Paper, PaperProps } from '../Paper';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 
 export type TableProps = PaperProps;
 
@@ -14,6 +16,7 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       width="100%"
       flexDirection="column"
       elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
       {...rest}
     >
       {children}

package/src/Table/TableBody.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 TableBodyProps = BoxProps;
 

package/src/Table/TableCell.tsx

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

package/src/Table/TableHead.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
+import { rem } from 'polished';
+
 import { TableHeadProvider } from './context';
-import { TableBody, TableBodyProps } from './TableBody';
+import type { TableBodyProps } from './TableBody';
+import { TableBody } from './TableBody';
 import { alpha } from '../color';
-import { rem } from 'polished';
 
 export type TableHeadProps = TableBodyProps;
 

package/src/Table/TableRow.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { Text, TextProps } from '../Text';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import { alpha } from '../color';
+
 export type TableRowProps = TextProps;
 
 export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
@@ -17,7 +19,7 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         display="flex"
         flexDirection="row"
         width="100%"
-        variant="body1"
+        variant="body-medium"
         px={2}
         __css={{
           borderBottomStyle: 'solid',

package/src/Text/LoremIpsum.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import type { FC } from 'react';
+
 import { Text } from '.';
 
 const phrase =
@@ -8,7 +9,7 @@ export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(
-      <Text variant="body1" key={`p-${i}`} m={'1.2em'}>
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
         {phrase}
       </Text>
     );