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

package/src/Switch/styledComponents.tsx

@@ -1,33 +1,59 @@
 import { rem } from 'polished';
+
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
+
+const BORDER_WIDTH = 2;
+const TRAIL_WIDTH = 52;
+const TRAIL_HEIGHT = 32;
+const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
+const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
 
-export const SwitchTrail = ({ checked = false, ...otherProps }) => (
+export const SwitchTrail = ({
+  checked = false,
+  disabled = false,
+  ...otherProps
+}) => (
   <Box
     __css={{
-      width: rem(32),
-      height: rem(14),
-      borderRadius: rem(7),
-      backgroundColor: checked ? 'primary' : 'on.surface',
-      opacity: checked ? 0.54 : 0.38,
+      width: rem(TRAIL_WIDTH),
+      height: rem(TRAIL_HEIGHT),
+      borderRadius: rem(TRAIL_HEIGHT / 2),
+      borderWidth: rem(BORDER_WIDTH),
+      borderStyle: 'solid',
+      backgroundColor: checked ? 'primary' : 'surface-variant',
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface',
+      }),
     }}
     {...otherProps}
   />
 );
 
+const THUMB_SIZE = 40;
 export const SwitchThumb = ({ checked = false, ...otherProps }) => (
   <Box
     position="absolute"
-    width={rem(54)}
-    height={rem(48)}
-    borderRadius={rem(24)}
-    left={rem(-21)}
-    top={rem(-17)}
+    width={rem(THUMB_SIZE)}
+    height={rem(THUMB_SIZE)}
+    borderRadius="full"
+    left={'50%'}
+    top={'50%'}
     __css={{
-      cursor: 'pointer',
-      transform: checked ? `translate(${rem(20)})` : 'none',
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(
+        (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)',
+      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,
+      },
     }}
     {...otherProps}
   />
@@ -37,22 +63,46 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
   <Box
     __css={{
       position: 'absolute',
-      width: rem(20),
-      height: rem(20),
-      boxShadow: 2,
+      width: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+      height: checked
+        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)
+        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
       boxSizing: 'border-box',
-      borderWidth: rem(10),
-      borderStyle: 'solid',
-      borderRadius: '50%',
+      borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
-      backgroundColor: checked ? 'primary' : '#fff',
-      borderColor: checked ? 'primary' : '#fff',
+      backgroundColor: checked ? 'on.primary' : 'outline',
       top: '50%',
       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=""]:disabled ~ &': {
+        opacity: checked ? 1 : 0.38,
+        backgroundColor: checked ? 'surface' : 'on.surface',
+        height: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+        width: checked
+          ? CIRCLE_SIZE_INACTIVE_CHECKED
+          : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      },
     }}
+    data-switch-circle=""
     role="presentation"
     aria-hidden="true"
     {...otherProps}

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,10 +1,12 @@
 import { forwardRef } from 'react';
-import { Paper, PaperProps } from '../Paper';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 
 export type TableProps = PaperProps;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
-  const { children, elevation = 4, ...rest } = props;
+  const { children, elevation = 1, ...rest } = props;
 
   return (
     <Paper
@@ -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>
     );

package/src/Text/Text.story.tsx

@@ -6,7 +6,46 @@ export default {
   title: 'components/Text',
 };
 
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
 const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
   const variantMapping = {
     h1: 'Heading 1',
     h2: 'Heading 2',
@@ -16,16 +55,14 @@ const Example = () => {
     h6: 'Heading 6',
     subtitle1: 'Subtitle 1',
     subtitle2: 'Subtitle 2',
-    body1:
-      'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.',
-    body2:
-      'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
     button: 'Button text',
     caption: 'Caption text',
     overline: 'Overline text',
   };
   const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
       {variantMapping[v]}
     </Text>
   ));
@@ -36,5 +73,3 @@ const Example = () => {
     </Box>
   );
 };
-
-export const AllVariants = () => <Example />;

package/src/Text/Text.tsx

@@ -1,8 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
 
-export type TextVariants =
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -17,11 +22,28 @@ export type TextVariants =
   | 'overline'
   | 'button';
 
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
 export interface TextProps extends BoxProps {
-  variant?: TextVariants;
+  variant?: LegacyTextVariants | TextVariants;
 }
 
-const mappings: { [key: string]: React.ElementType<any> } = {
+const mappings: { [key: string]: ElementType<any> } = {
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
@@ -41,7 +63,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
   props,
   forwardedRef
 ) {
-  const { as, variant = 'body1', ...otherProps } = props;
+  const { as, variant = 'body-medium', ...otherProps } = props;
   let Comp = as;
   if (!Comp) {
     Comp = mappings[variant] || 'p';

package/src/TextField/FilledContainer.tsx

@@ -1,12 +1,14 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 import { get } from '@styled-system/css';
+import { rem } from 'polished';
+
 import { useTheme } from '../theme';
 import { FloatingLabel } from '../FloatingLabel';
 import { LineRipple } from '../LineRipple';
-import { rem } from 'polished';
 import { alpha } from '../color';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -38,7 +40,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
         right: 0,
         backgroundColor: 'on.surface',
         pointerEvents: 'none',
-        opacity: 0.04,
+        opacity: 0,
         [makeSelector('hover:not([disabled]):not(:focus)')]: !forceActive && {
           opacity: get(theme, `buttons.overlays.filled.hover.opacity`),
         },
@@ -76,10 +78,10 @@ const BorderBottom = () => (
 );
 
 export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: React.ReactNode;
+  children?: ReactNode;
   color?: string;
   hasFocus?: boolean;
-  label?: React.ReactNode;
+  label?: ReactNode;
   labelIsFloating: boolean;
   inputId: string;
   error?: boolean;
@@ -120,14 +122,17 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
           position: 'relative',
           lineHeight: 0,
           width: '100%',
-          backgroundColor: 'surface',
+          backgroundColor: 'surface-variant',
           overflow: 'hidden',
           boxSizing: 'border-box',
           borderTopRightRadius: rem(4),
           borderTopLeftRadius: rem(4),
-          color: alpha('on.surface', 0.54),
-          ...(disabled && { color: alpha('on.surface', 0.38) }),
-          ...(active && { color: alpha('primary', 0.87) }),
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
         }}
         {...otherProps}
       >

package/src/TextField/HelperText.tsx

@@ -1,14 +1,15 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { alpha } from '../color';
-import { TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
-  children?: React.ReactNode;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
   error?: boolean;
   disabled?: boolean;
 }
@@ -45,7 +46,7 @@ export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
         display="flex"
         pt={1}
         color={color}
-        variant="caption"
+        variant="label-small"
         ref={forwardedRef}
         lineHeight="normal"
         __css={{

package/src/TextField/IconContainer.tsx

@@ -1,12 +1,12 @@
 import { rem } from 'polished';
-import { FC } from 'react';
-import type * as React from 'react';
+import type { FC, ReactNode } from 'react';
+
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
 export const IconContainer: FC<{
-  children?: React.ReactNode;
+  children?: ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
   <Box

package/src/TextField/Input.tsx

@@ -1,7 +1,11 @@
 import { rem } from 'polished';
-import { InputHTMLAttributes, forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -16,8 +20,8 @@ export interface InputProps
   multiline?: boolean;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 }
 
 export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
@@ -59,15 +63,17 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         display: 'flex',
         alignItems: 'center',
         ...(!multiline && {
-          lineHeight: 1,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
           textOverflow: 'ellipsis',
         }),
         '::placeholder': {
           opacity: 0,
-          color: alpha('on.surface', 0.54),
-          transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
+          color:
+            variant === 'filled'
+              ? alpha('on.surface-variant', 0.87)
+              : alpha('on.surface-variant', 0.6),
+          transition: `opacity .18s ${EASING_STANDARD}`,
         },
         ':disabled::placeholder': {
           color: alpha('on.surface', 0.38),

package/src/TextField/OutlinedContainer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,11 +6,12 @@ import {
   useState,
   useRef,
 } from 'react';
-import type * as React from 'react';
+
 import { NotchedOutline } from '../NotchedOutline';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -20,8 +22,8 @@ const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export interface OutlinedContainerProps extends BoxProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
+  children?: ReactNode;
+  label?: ReactNode;
   color?: string;
   error?: boolean;
   theme: Theme;