From 59089551ef7860c3dbd781a2f8f57d49b51e114e Mon Sep 17 00:00:00 2001
From: Florent Schildknecht <florent.schildknecht@gmail.com>
Date: Fri, 23 Apr 2021 16:54:55 +0200
Subject: [PATCH] feat(theme-ui__components): remove theme-ui__components
 package

@theme-ui/components provides its own types as of v0.6.0
(https://github.com/system-ui/theme-ui/issues/1582))
---
 notNeededPackages.json                        |   4 +
 types/theme-ui__components/index.d.ts         | 354 ------------------
 types/theme-ui__components/package.json       |   7 -
 .../theme-ui__components-tests.tsx            | 349 -----------------
 types/theme-ui__components/tsconfig.json      |  29 --
 types/theme-ui__components/tslint.json        |   1 -
 6 files changed, 4 insertions(+), 740 deletions(-)
 delete mode 100644 types/theme-ui__components/index.d.ts
 delete mode 100644 types/theme-ui__components/package.json
 delete mode 100644 types/theme-ui__components/theme-ui__components-tests.tsx
 delete mode 100644 types/theme-ui__components/tsconfig.json
 delete mode 100644 types/theme-ui__components/tslint.json

diff --git a/notNeededPackages.json b/notNeededPackages.json
index 96fbb70383d412..c52ec2046fa5ce 100644
--- a/notNeededPackages.json
+++ b/notNeededPackages.json
@@ -3838,6 +3838,10 @@
             "libraryName": "theme-ui",
             "asOfVersion": "0.3.1"
         },
+        "theme-ui__components": {
+            "libraryName": "@theme-ui/components",
+            "asOfVersion": "0.6.0"
+        },
         "theming": {
             "libraryName": "theming",
             "asOfVersion": "2.0.0"
diff --git a/types/theme-ui__components/index.d.ts b/types/theme-ui__components/index.d.ts
deleted file mode 100644
index 4e8bf69a7db79e..00000000000000
--- a/types/theme-ui__components/index.d.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-// Type definitions for @theme-ui/components 0.3
-// Project: https://github.com/system-ui/theme-ui
-// Definitions by: Piotr Monwid-Olechnowicz <https://github.com/hasparus>
-//                 Kristóf Poduszló <https://github.com/kripod>
-//                 Jesús Jiménez Ballano <https://github.com/jjballano-qatium>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 3.5
-
-import * as React from 'react';
-import { StyledComponent } from '@emotion/styled';
-import { InterpolationWithTheme } from '@emotion/core';
-import { SxStyleProp } from 'theme-ui';
-import { SpaceProps, ColorProps, ResponsiveValue, MarginProps } from 'styled-system';
-
-export {};
-
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-
-type Assign<T, U> = {
-    [P in keyof (T & U)]: P extends keyof T ? T[P] : P extends keyof U ? U[P] : never;
-};
-
-type ForwardRef<T, P> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
-
-export interface BoxOwnProps extends SpaceProps, ColorProps {
-    as?: React.ElementType;
-    variant?: string;
-    sx?: SxStyleProp;
-    css?: InterpolationWithTheme<any>;
-}
-export interface BoxProps extends Assign<React.ComponentPropsWithRef<'div'>, BoxOwnProps> {}
-/**
- * Use the Box component as a layout primitive to add margin, padding, and colors to content.
- * @see https://theme-ui.com/components/box
- */
-export const Box: StyledComponent<React.ComponentPropsWithRef<'div'>, BoxOwnProps, {}>;
-
-export type FlexStyleProps = BoxOwnProps;
-export type FlexProps = BoxProps;
-/**
- * Use the Flex component to create flexbox layouts.
- * @see https://theme-ui.com/components/flex
- */
-export const Flex: StyledComponent<React.ComponentPropsWithRef<'div'>, FlexStyleProps, {}>;
-
-export interface GridProps extends BoxProps {
-    /**
-     * Minimum width of child elements
-     */
-    width?: ResponsiveValue<string | number>;
-    /**
-     *     Number of columns to use for the layout (cannot be used in conjunction with the width prop)
-     */
-    columns?: ResponsiveValue<string | number>;
-    /**
-     * Space between child elements
-     */
-    gap?: ResponsiveValue<string | number>;
-}
-/**
- * CSS grid layout component to arrange direct child elements in a tiled grid layout.
- * @see https://theme-ui.com/components/grid
- */
-export const Grid: ForwardRef<HTMLDivElement, GridProps>;
-
-export interface ButtonProps extends Assign<React.ComponentPropsWithRef<'button'>, BoxOwnProps> {}
-/**
- * Primitive button component with variants
- * @see https://theme-ui.com/components/button
- */
-export const Button: ForwardRef<HTMLButtonElement, ButtonProps>;
-
-export interface LinkProps extends Assign<React.ComponentPropsWithRef<'a'>, BoxOwnProps> {}
-/**
- * Link variants can be defined in the `theme.links` object.
- * By default the Link component will use styles defined in `theme.styles.a`.
- * @see https://theme-ui.com/components/link
- */
-export const Link: ForwardRef<HTMLAnchorElement, LinkProps>;
-
-export type TextProps = BoxProps;
-/**
- * Primitive typographic component.
- *
- * Text style variants can be defined in the theme.text object.
- * @see https://theme-ui.com/components/text
- */
-export const Text: ForwardRef<HTMLDivElement, BoxProps>;
-
-export interface HeadingProps extends Assign<React.ComponentPropsWithRef<'h2'>, BoxOwnProps> {}
-/**
- * Primitive heading component, defaults to <h2>.
- *
- * Text style variants can be defined in the theme.text object.
- * The Heading component uses theme.text.heading as its default variant style.
- * @see https://theme-ui.com/components/heading
- */
-export const Heading: ForwardRef<HTMLHeadingElement, HeadingProps>;
-
-export interface ImageProps extends Assign<React.ComponentPropsWithRef<'img'>, BoxOwnProps> {}
-/**
- * Image style variants can be defined in the theme.images object.
- * @see https://theme-ui.com/components/image/
- */
-export const Image: ForwardRef<HTMLImageElement, ImageProps>;
-
-export type CardProps = BoxProps;
-/**
- * Card style variants can be defined in the `theme.cards` object.
- * By default the Card component uses the `theme.cards.primary` variant.
- * @see https://theme-ui.com/components/card
- */
-export const Card: ForwardRef<HTMLDivElement, CardProps>;
-
-export interface LabelProps extends Assign<React.ComponentPropsWithRef<'label'>, BoxOwnProps> {}
-/**
- * Label variants can be defined in `theme.forms`
- * and the component uses the `theme.forms.label` variant by default.
- * @see https://theme-ui.com/components/label/
- */
-export const Label: ForwardRef<HTMLLabelElement, LabelProps>;
-
-export interface InputProps extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
-/**
- * Input variants can be defined in `theme.forms`
- * and the component uses the `theme.forms.input` variant by default.
- * @see https://theme-ui.com/components/input/
- */
-export const Input: ForwardRef<HTMLInputElement, InputProps>;
-
-export interface SelectProps extends Assign<React.ComponentPropsWithRef<'select'>, BoxOwnProps> {}
-/**
- * Select variants can be defined in `theme.forms`
- * and the component uses the `theme.forms.select` variant by default.
- * @see https://theme-ui.com/components/select/
- */
-export const Select: ForwardRef<HTMLSelectElement, SelectProps>;
-
-export interface TextareaProps extends Assign<React.ComponentPropsWithRef<'textarea'>, BoxOwnProps> {}
-/**
- * Form textarea component
- *
- * Textarea variants can be defined in `theme.forms`
- * and the component uses the `theme.forms.textarea` variant by default.
- * @see https://theme-ui.com/components/textarea/
- */
-export const Textarea: ForwardRef<HTMLTextAreaElement, TextareaProps>;
-
-export interface RadioProps extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
-/**
- * Form radio input component
- *
- * Radio variants can be defined in `theme.forms` and the
- * component uses the `theme.forms.radio variant` by default.
- * @see https://theme-ui.com/components/radio/
- */
-export const Radio: ForwardRef<HTMLInputElement, RadioProps>;
-
-export interface CheckboxProps extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
-/**
- * Form checkbox input component
- *
- * Checkbox variants can be defined in `theme.forms` and the
- * component uses the `theme.forms.checkbox` variant by default.
- * @see https://theme-ui.com/components/checkbox/
- */
-export const Checkbox: ForwardRef<HTMLInputElement, CheckboxProps>;
-
-export interface SliderProps extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {}
-/**
- * Range input element
- *
- * Slider variants can be defined in the `theme.forms` object.
- * The Slider component uses `theme.forms.slider` as its default variant style.
- * @see https://theme-ui.com/components/slider/
- */
-export const Slider: ForwardRef<HTMLInputElement, SliderProps>;
-
-export interface FieldOwnProps extends MarginProps {
-    /**
-     * Text for Label component
-     */
-    label: string;
-    /**
-     * Used for the for, id, and name attributes
-     */
-    name: string;
-}
-export type FieldProps<T extends React.ElementType> = FieldOwnProps &
-    Omit<React.ComponentPropsWithRef<T>, 'as' | keyof FieldOwnProps> & {
-        /**
-         * form control to render, default Input
-         */
-        as?: T;
-    };
-
-// `T` is far from unnecessary. We derive component props from it.
-// tslint:disable-next-line no-unnecessary-generics
-export function Field<T extends React.ElementType = React.ElementType<InputProps>>(props: FieldProps<T>): JSX.Element;
-
-export interface ProgressProps extends Assign<React.ComponentPropsWithRef<'progress'>, BoxOwnProps> {}
-/**
- * @see https://theme-ui.com/components/progress/
- */
-export const Progress: ForwardRef<HTMLProgressElement, ProgressProps>;
-
-export interface DonutProps
-    extends Assign<
-        Omit<React.ComponentPropsWithRef<'svg'>, 'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min'>,
-        BoxOwnProps
-    > {
-    value: number;
-    min?: number;
-    max?: number;
-    title?: string;
-    size?: string | number;
-}
-/**
- * Single value SVG donut chart
- * @see https://theme-ui.com/components/donut/
- */
-export const Donut: ForwardRef<SVGSVGElement, DonutProps>;
-
-export interface SpinnerProps
-    extends Assign<Omit<React.ComponentPropsWithRef<'svg'>, 'opacity' | 'color' | 'css' | 'sx'>, BoxOwnProps> {
-    size?: number | string;
-}
-export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps>;
-
-export interface AvatarProps extends ImageProps {
-    size?: number | string;
-}
-export const Avatar: ForwardRef<HTMLImageElement, AvatarProps>;
-
-export type BadgeProps = BoxProps;
-export const Badge: ForwardRef<HTMLDivElement, BadgeProps>;
-
-export interface CloseProps extends Omit<IconButtonProps, 'children'> {}
-/**
- * Button with close (×) icon.
- *
- * The Close component renders as a <button> element by default.
- * Pass any button attributes as props to the component.
- *
- * Close component variants can be defined in the theme.buttons object.
- * The Close component uses theme.buttons.close as its default variant style.
- */
-export const Close: ForwardRef<HTMLButtonElement, CloseProps>;
-
-export type AlertProps = BoxProps;
-/**
- * Component for displaying messages, notifications, or other application state.
- *
- * Alert variants can be defined in `theme.alerts`.
- * The Alert component uses `theme.alerts.primary` as its default variant.
- */
-export const Alert: ForwardRef<HTMLDivElement, AlertProps>;
-
-export type DividerProps = BoxProps;
-/**
- * The Divider component reuses styles from `theme.styles.hr` as its default variant.
- */
-export const Divider: ForwardRef<HTMLDivElement, DividerProps>;
-
-/**
- * EmbedProps are a bit tricky. It is a composite component that uses a <Box />
- * as the parent element which is what `props` are spread onto. The actual `ref`
- * however is a nested <Box as="iframe" /> element. To support these props we
- * need to use an intersection of the intrinsic attributes of HTMLDivElement,
- * with the ref attributes of HTMLIFrameElement.
- */
-export interface EmbedProps
-    extends Assign<React.ComponentProps<'div'> & React.RefAttributes<HTMLIFrameElement>, BoxOwnProps> {
-    ratio?: number;
-    src?: React.IframeHTMLAttributes<any>['src'];
-    frameBorder?: React.IframeHTMLAttributes<any>['frameBorder'];
-    allowFullScreen?: React.IframeHTMLAttributes<any>['allowFullScreen'];
-    allow?: React.IframeHTMLAttributes<any>['allow'];
-}
-/**
- * Responsive iframe for video embeds.
- *
- * Embed variants can be defined anywhere in the theme object.
- *
- * @see https://theme-ui.com/components/embed
- */
-export const Embed: ForwardRef<HTMLIFrameElement, EmbedProps>;
-
-export interface AspectRatioProps extends BoxProps {
-    ratio?: number;
-}
-/**
- * Component for maintaining a fluid-width aspect ratio
- * @see https://theme-ui.com/components/aspect-ratio
- */
-export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps>;
-
-export interface AspectImageProps extends ImageProps {
-    ratio?: number;
-}
-/**
- * Image component constrained by as aspect ratio.
- * @see https://theme-ui.com/components/aspect-image
- */
-export const AspectImage: ForwardRef<HTMLImageElement, AspectImageProps>;
-
-export type ContainerProps = BoxProps;
-/**
- * Centered, max-width layout component
- *
- * Container variants can be defined in the `theme.layout` object.
- * The Container component uses `theme.layout.container` as its default variant style.
- * @see https://theme-ui.com/components/container
- */
-export const Container: ForwardRef<HTMLDivElement, ContainerProps>;
-
-export type NavLinkProps = LinkProps;
-/**
- * Link component for use in navigation
- *
- * NavLink variants can be defined in the `theme.links` object.
- * By default the NavLink component will use styles defined in `theme.links.nav`.
- * @see https://theme-ui.com/components/nav-link
- */
-export const NavLink: ForwardRef<HTMLAnchorElement, NavLinkProps>;
-
-export type MessageProps = BoxProps;
-/**
- * Styled Box component for callouts and inline messages
- *
- * Message variants can be defined in the theme.messages object.
- * @see https://theme-ui.com/components/message
- */
-export const Message: ForwardRef<HTMLDivElement, MessageProps>;
-
-export interface IconButtonProps extends Assign<React.ComponentPropsWithRef<'button'>, BoxOwnProps> {}
-/**
- * Transparent button for SVG icons
- *
- * IconButton variants can be defined in the `theme.buttons` object.
- * By default the IconButton component will use styles defined in `theme.buttons.icon`.
- *
- * @see https://theme-ui.com/components/icon-button
- */
-export const IconButton: ForwardRef<HTMLButtonElement, IconButtonProps>;
-
-export type MenuButtonProps = IconButtonProps;
-/**
- * MenuButton variants can be defined in the `theme.buttons` object.
- * By default the MenuButton component will use styles defined in `theme.buttons.menu`.
- *
- * @see https://theme-ui.com/components/menu-button
- */
-export const MenuButton: ForwardRef<HTMLButtonElement, MenuButtonProps>;
diff --git a/types/theme-ui__components/package.json b/types/theme-ui__components/package.json
deleted file mode 100644
index 79bde8f52e8dc7..00000000000000
--- a/types/theme-ui__components/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "private": true,
-  "dependencies": {
-    "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0"
-  }
-}
diff --git a/types/theme-ui__components/theme-ui__components-tests.tsx b/types/theme-ui__components/theme-ui__components-tests.tsx
deleted file mode 100644
index 75601b3ae80bd5..00000000000000
--- a/types/theme-ui__components/theme-ui__components-tests.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-
-import {
-    Box,
-    BoxProps,
-    Flex,
-    FlexProps,
-    Grid,
-    GridProps,
-    Button,
-    ButtonProps,
-    Link,
-    LinkProps,
-    Text,
-    TextProps,
-    Heading,
-    HeadingProps,
-    Image,
-    ImageProps,
-    Card,
-    CardProps,
-    Label,
-    LabelProps,
-    Input,
-    InputProps,
-    Select,
-    SelectProps,
-    Textarea,
-    TextareaProps,
-    Radio,
-    RadioProps,
-    Checkbox,
-    CheckboxProps,
-    Slider,
-    SliderProps,
-    Field,
-    FieldProps,
-    Progress,
-    ProgressProps,
-    Donut,
-    DonutProps,
-    Spinner,
-    SpinnerProps,
-    Avatar,
-    AvatarProps,
-    Badge,
-    BadgeProps,
-    Close,
-    CloseProps,
-    Alert,
-    AlertProps,
-    Divider,
-    DividerProps,
-    Embed,
-    EmbedProps,
-    AspectRatio,
-    AspectRatioProps,
-    AspectImage,
-    AspectImageProps,
-    Container,
-    ContainerProps,
-    NavLink,
-    NavLinkProps,
-    Message,
-    MessageProps,
-    IconButton,
-    IconButtonProps,
-    MenuButton,
-    MenuButtonProps,
-} from '@theme-ui/components';
-
-const SectionBox = Box.withComponent('section');
-
-const _ = (
-    <SectionBox
-        css={{ background: '#eee' }}
-        sx={{ py: [1, 2, 3], paddingBlockStart: '2em' }}
-        px={[3, 2, 1]}
-        ref={ref => ref}
-    >
-        <Box
-            onPointerEnter={e => e.pointerType}
-            sx={{
-                ':first-of-type': {
-                    bg: 'red',
-                },
-            }}
-        />
-        <Flex />
-        <Grid width={[128, null, 192]} backgroundColor="#eee" ref={ref => ref}>
-            <Box bg="primary">Box</Box>
-            <Box bg="muted">Box</Box>
-            <Box bg="primary">Box</Box>
-            <Box bg="muted">Box</Box>
-        </Grid>
-        <Grid gap={2} columns={[2, null, 4]} color="#111">
-            <Box bg="primary">Box</Box>
-            <Box bg="muted">Box</Box>
-            <Box bg="primary">Box</Box>
-            <Box bg="muted">Box</Box>
-        </Grid>
-        <Button
-            ref={ref => ref}
-            sx={{
-                ':hover': {
-                    bg: ['red', 'green', 'blue'],
-                },
-            }}
-        />
-        <Link href="#" target="_self" bg="blue" ref={r => r} />
-        <Text backgroundColor="red" sx={{ py: 1 }} paddingX={[3, 2, 1]} />
-        <Heading contentEditable="true" m="1em" />
-        <Image />
-        <Card />
-        <Label />
-        <Input value="Hello" onChange={e => console.log(e.target.value)} />
-        <Select defaultValue="Hello">
-            <option>Hello</option>
-            <option>Hi</option>
-            <option>Beep</option>
-            <option>Boop</option>
-        </Select>
-        <Textarea defaultValue="Hello" rows={8} />
-        <Label>
-            <Radio name="dark-mode" value="true" defaultChecked={true} />
-            Dark Mode
-        </Label>
-        <Label>
-            <Radio name="dark-mode" value="false" />
-            Light Mode
-        </Label>
-        <Checkbox mx={[1, 2, 3]} defaultChecked={true} />
-        <Slider my={[1, 2, 3]} bg="gray" defaultValue={25} />
-        <Field
-            label="Email"
-            name="email"
-            defaultValue=""
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => console.log(e.target.value)}
-            mx={[1, 2, 3]}
-        />
-        <Field
-            as="textarea"
-            label="Message"
-            name="message"
-            rows={10}
-            placeholder="Say hello"
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => console.log(e.target.value)}
-            mx={[1, 2, 3]}
-        />
-        <Field
-            as={Textarea}
-            label="Complaint"
-            name="complaint"
-            rows={10}
-            placeholder="Complain here"
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => console.log(e.target.value)}
-            px={[1, 2, 3]}
-        />
-        <Box as="form" onSubmit={e => e.preventDefault()}>
-            <Label htmlFor="username">Username</Label>
-            <Input name="username" mb={3} />
-            <Label htmlFor="password">Password</Label>
-            <Input type="password" name="password" mb={3} />
-            <Box>
-                <Label mb={3}>
-                    <Checkbox />
-                    Remember me
-                </Label>
-            </Box>
-            <Label htmlFor="sound">Sound</Label>
-            <Select name="sound" mb={3}>
-                <option>Beep</option>
-                <option>Boop</option>
-                <option>Blip</option>
-            </Select>
-            <Label htmlFor="comment">Comment</Label>
-            <Textarea name="comment" rows={6} mb={3} />
-            <Flex mb={3}>
-                <Label>
-                    <Radio name="letter" /> Alpha
-                </Label>
-                <Label>
-                    <Radio name="letter" /> Bravo
-                </Label>
-                <Label>
-                    <Radio name="letter" /> Charlie
-                </Label>
-            </Flex>
-            <Label>Slider</Label>
-            <Slider mb={3} />
-            <Button>Submit</Button>
-        </Box>
-        <Progress max={1} value={1 / 2}>
-            50%
-        </Progress>{' '}
-        <Donut value={1 / 2} />
-        <Spinner size={100} />
-        <Avatar src="https://example.com/example.png" /> <Badge />
-        <Close />
-        <Alert>
-            Beep boop, this is an alert!
-            <Close ml="auto" mr={-2} />
-        </Alert>{' '}
-        <Divider />
-        <Embed src="https://www.youtube.com/embed/GNCd_ERZvZM" />{' '}
-        <AspectRatio
-            ratio={16 / 9}
-            sx={{
-                p: 4,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'background',
-                bg: 'primary',
-            }}
-        >
-            <Heading>Aspect Ratio</Heading>
-        </AspectRatio>
-        <AspectImage ratio={4 / 3} src="./example.png" />
-        <Container p={4} bg="muted">
-            Centered container
-        </Container>
-        <Flex as="nav">
-            <NavLink href="#!" p={2}>
-                Home
-            </NavLink>
-            <NavLink href="#!" p={2}>
-                Blog
-            </NavLink>
-            <NavLink href="#!" p={2}>
-                About
-            </NavLink>
-        </Flex>{' '}
-        <Message mt={1}>This is just a message for someone to read</Message>{' '}
-        <IconButton aria-label="Toggle dark mode" onClick={() => {}}>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentcolor">
-                <circle r={11} cx={12} cy={12} fill="none" stroke="currentcolor" strokeWidth={2} />
-            </svg>
-        </IconButton>
-        <MenuButton aria-label="Toggle Menu" />
-    </SectionBox>
-);
-
-{
-    // test: all components accept their own props
-
-    // Alert
-    ((props: AlertProps) => <Alert {...props} />)({});
-
-    // AspectImage
-    ((props: AspectImageProps) => <AspectImage {...props} />)({});
-
-    // AspectRatio
-    ((props: AspectRatioProps) => <AspectRatio {...props} />)({});
-
-    // Avatar
-    ((props: AvatarProps) => <Avatar {...props} />)({});
-
-    // Badge
-    ((props: BadgeProps) => <Badge {...props} />)({});
-
-    // Box
-    ((props: BoxProps) => <Box {...props} />)({});
-
-    // Button
-    ((props: ButtonProps) => <Button {...props} />)({});
-
-    // Card
-    ((props: CardProps) => <Card {...props} />)({});
-
-    // Checkbox
-    ((props: CheckboxProps) => <Checkbox {...props} />)({});
-
-    // Close
-    ((props: CloseProps) => <Close {...props} />)({});
-
-    // Container
-    ((props: ContainerProps) => <Container {...props} />)({});
-
-    // Divider
-    ((props: DividerProps) => <Divider {...props} />)({});
-
-    // Donut
-    ((props: DonutProps) => <Donut {...props} />)({ value: 50 });
-
-    // Embed
-    ((props: EmbedProps) => <Embed {...props} />)({});
-
-    // Field
-    ((props: FieldProps<'input'>) => <Field {...props} />)({
-        label: 'Email',
-        name: 'email',
-    });
-
-    // Flex
-    ((props: FlexProps) => <Flex {...props} />)({});
-
-    // Grid
-    ((props: GridProps) => <Grid {...props} />)({});
-
-    // Heading
-    ((props: HeadingProps) => <Heading {...props} />)({});
-
-    // IconButton
-    ((props: IconButtonProps) => <IconButton {...props} />)({});
-
-    // Image
-    ((props: ImageProps) => <Image {...props} />)({});
-
-    // Input
-    ((props: InputProps) => <Input {...props} />)({});
-
-    // Label
-    ((props: LabelProps) => <Label {...props} />)({});
-
-    // Link
-    ((props: LinkProps) => <Link {...props} />)({});
-
-    // MenuButton
-    ((props: MenuButtonProps) => <MenuButton {...props} />)({});
-
-    // Message
-    ((props: MessageProps) => <Message {...props} />)({});
-
-    // NavLink
-    ((props: NavLinkProps) => <NavLink {...props} />)({});
-
-    // Progress
-    ((props: ProgressProps) => <Progress {...props} />)({});
-
-    // Radio
-    ((props: RadioProps) => <Radio {...props} />)({});
-
-    // Select
-    ((props: SelectProps) => <Select {...props} />)({});
-
-    // Slider
-    ((props: SliderProps) => <Slider {...props} />)({});
-
-    // Spinner
-    ((props: SpinnerProps) => <Spinner {...props} />)({});
-
-    // Text
-    ((props: TextProps) => <Text {...props} />)({});
-
-    // Textarea
-    ((props: TextareaProps) => <Textarea {...props} />)({});
-}
diff --git a/types/theme-ui__components/tsconfig.json b/types/theme-ui__components/tsconfig.json
deleted file mode 100644
index 86686da52baf80..00000000000000
--- a/types/theme-ui__components/tsconfig.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "commonjs",
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "jsx": "react",
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "strictFunctionTypes": true,
-        "strictNullChecks": true,
-        "baseUrl": "../",
-        "typeRoots": [
-            "../"
-        ],
-        "paths": {
-            "@theme-ui/*": ["theme-ui__*"],
-            "@styled-system/*": ["styled-system__*"]
-        },
-        "types": [],
-        "noEmit": true,
-        "forceConsistentCasingInFileNames": true
-    },
-    "files": [
-        "index.d.ts",
-        "theme-ui__components-tests.tsx"
-    ]
-}
diff --git a/types/theme-ui__components/tslint.json b/types/theme-ui__components/tslint.json
deleted file mode 100644
index 3db14f85eaf7b9..00000000000000
--- a/types/theme-ui__components/tslint.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "extends": "dtslint/dt.json" }