From 27dc15e63e960a42eebcd2c06fa872e14d0c96fa Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 23 Dec 2022 14:27:51 +0000
Subject: [PATCH] Remove unused components, deprecate components consistently
 (#683)

## Description

1. Remove unused components, some of which will be reintroduced once we
start using them with designed styles, right now its confusing because
they were copied from modulz example repo and never adjusted with our
design system
2. Deprecated consistently

## Code Review

- [ ] hi @istarkov  , I need you to do
  - conceptual review (architecture, feature-correctness)

## Before requesting a review

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
---
 apps/designer/app/auth/login.tsx              |   4 +-
 .../app/dashboard/components/card.tsx         |   6 +-
 .../features/props-panel/props-panel.tsx      |   6 +-
 .../features/sidebar-left/lib/header.tsx      |   6 +-
 .../sidebar-left/panels/pages/pages.tsx       |   8 +-
 .../sidebar-left/panels/pages/settings.tsx    |  14 +-
 .../controls/toggle/toggle-control.tsx        |   6 +-
 .../sections/layout/shared/flex-grid.tsx      |   6 +-
 .../sections/layout/shared/lock.tsx           |   6 +-
 .../sections/typography/typography.tsx        |   6 +-
 .../designer/features/topbar/menu/menu.tsx    |   6 +-
 .../app/designer/features/topbar/preview.tsx  |   6 +-
 .../app/designer/features/topbar/share.tsx    |   6 +-
 .../design-tokens-manager/item-menu.tsx       |   4 +-
 .../shared/fonts-manager/item-menu.tsx        |   4 +-
 .../{ => __DEPRECATED__}/heading.tsx          |   8 +-
 .../icon-button.tsx}                          |   4 +-
 .../src/components/accordion.tsx              | 102 ----
 .../src/components/alert-dialog.tsx           |  53 --
 .../design-system/src/components/alert.tsx    |  49 --
 .../design-system/src/components/app-bar.tsx  |  97 ----
 .../design-system/src/components/badge.tsx    | 456 ------------------
 .../design-system/src/components/banner.tsx   |  80 ---
 .../design-system/src/components/code.tsx     |  24 -
 .../design-system/src/components/combobox.tsx |   6 +-
 .../src/components/container.tsx              |  32 --
 .../src/components/context-menu.tsx           | 102 ----
 .../src/components/control-group.tsx          | 103 ----
 .../design-system/src/components/dialog.tsx   |  82 ----
 .../src/components/icon-button-with-menu.tsx  |   6 +-
 .../design-system/src/components/image.tsx    |   7 -
 packages/design-system/src/components/kbd.tsx |  87 ----
 .../design-system/src/components/overlay.tsx  |   7 -
 .../design-system/src/components/popover.tsx  |   6 +-
 .../src/components/progress-bar.tsx           |  98 ----
 .../src/components/radio-card.tsx             |  74 ---
 .../src/components/radio-grid.tsx             |  36 --
 .../src/components/scrollbar.tsx              | 209 --------
 .../src/components/search-field.tsx           |   4 +-
 .../design-system/src/components/section.tsx  |  32 --
 .../design-system/src/components/sheet.tsx    | 142 ------
 .../design-system/src/components/skeleton.tsx |  80 ---
 packages/design-system/src/components/sub.tsx |   8 -
 packages/design-system/src/components/sup.tsx |   8 -
 .../design-system/src/components/tab-link.tsx |  43 --
 .../design-system/src/components/table.tsx    | 108 -----
 .../src/components/text-field.stories.tsx     |  22 +-
 .../src/components/toggle-group.tsx           |   2 +-
 .../{simple-toggle.tsx => toggle.tsx}         |   2 +-
 .../design-system/src/components/tooltip.tsx  |  90 ++--
 .../src/components/verified-badge.tsx         |  30 --
 packages/design-system/src/index.ts           |  12 +-
 52 files changed, 127 insertions(+), 2278 deletions(-)
 rename packages/design-system/src/components/{ => __DEPRECATED__}/heading.tsx (89%)
 rename packages/design-system/src/components/{icon-button-deprecated.tsx => __DEPRECATED__/icon-button.tsx} (93%)
 delete mode 100644 packages/design-system/src/components/accordion.tsx
 delete mode 100644 packages/design-system/src/components/alert-dialog.tsx
 delete mode 100644 packages/design-system/src/components/alert.tsx
 delete mode 100644 packages/design-system/src/components/app-bar.tsx
 delete mode 100644 packages/design-system/src/components/badge.tsx
 delete mode 100644 packages/design-system/src/components/banner.tsx
 delete mode 100644 packages/design-system/src/components/code.tsx
 delete mode 100644 packages/design-system/src/components/container.tsx
 delete mode 100644 packages/design-system/src/components/context-menu.tsx
 delete mode 100644 packages/design-system/src/components/control-group.tsx
 delete mode 100644 packages/design-system/src/components/dialog.tsx
 delete mode 100644 packages/design-system/src/components/image.tsx
 delete mode 100644 packages/design-system/src/components/kbd.tsx
 delete mode 100644 packages/design-system/src/components/overlay.tsx
 delete mode 100644 packages/design-system/src/components/progress-bar.tsx
 delete mode 100644 packages/design-system/src/components/radio-card.tsx
 delete mode 100644 packages/design-system/src/components/radio-grid.tsx
 delete mode 100644 packages/design-system/src/components/scrollbar.tsx
 delete mode 100644 packages/design-system/src/components/section.tsx
 delete mode 100644 packages/design-system/src/components/sheet.tsx
 delete mode 100644 packages/design-system/src/components/skeleton.tsx
 delete mode 100644 packages/design-system/src/components/sub.tsx
 delete mode 100644 packages/design-system/src/components/sup.tsx
 delete mode 100644 packages/design-system/src/components/tab-link.tsx
 delete mode 100644 packages/design-system/src/components/table.tsx
 rename packages/design-system/src/components/{simple-toggle.tsx => toggle.tsx} (95%)
 delete mode 100644 packages/design-system/src/components/verified-badge.tsx

diff --git a/apps/designer/app/auth/login.tsx b/apps/designer/app/auth/login.tsx
index aa4153222c..f376d1b5c7 100644
--- a/apps/designer/app/auth/login.tsx
+++ b/apps/designer/app/auth/login.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import {
   Card,
   Flex,
-  Heading,
+  DeprecatedHeading,
   Button,
   Text,
   TextField,
@@ -45,7 +45,7 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
     >
       <Card size={2}>
         <Flex direction="column" align="center" gap="3">
-          <Heading size="2">Login</Heading>
+          <DeprecatedHeading size="2">Login</DeprecatedHeading>
           <Flex direction="column" gap="4">
             {errorMessage.length ? (
               <Text align="center" color="error">
diff --git a/apps/designer/app/dashboard/components/card.tsx b/apps/designer/app/dashboard/components/card.tsx
index 8c8aed83a8..b86f478740 100644
--- a/apps/designer/app/dashboard/components/card.tsx
+++ b/apps/designer/app/dashboard/components/card.tsx
@@ -7,7 +7,7 @@ import {
   Select,
   TextField,
   Button,
-  Heading,
+  DeprecatedHeading,
   Text,
 } from "@webstudio-is/design-system";
 import { designerPath } from "~/shared/router-utils";
@@ -35,9 +35,9 @@ export const SelectProjectCard = ({
   return (
     <Card size={2}>
       <Flex direction="column" gap="4">
-        <Heading size="2" css={{ textAlign: "center" }}>
+        <DeprecatedHeading size="2" css={{ textAlign: "center" }}>
           Select a project
-        </Heading>
+        </DeprecatedHeading>
         <Select
           name="project"
           options={options}
diff --git a/apps/designer/app/designer/features/props-panel/props-panel.tsx b/apps/designer/app/designer/features/props-panel/props-panel.tsx
index c5038ca9cb..5d39234634 100644
--- a/apps/designer/app/designer/features/props-panel/props-panel.tsx
+++ b/apps/designer/app/designer/features/props-panel/props-panel.tsx
@@ -20,7 +20,7 @@ import {
   ComboboxPopperAnchor,
   ComboboxListbox,
   ComboboxListboxItem,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
 } from "@webstudio-is/design-system";
 import {
   PlusIcon,
@@ -90,9 +90,9 @@ const Combobox = ({
             readOnly={isReadonly}
             state={isInvalid ? "invalid" : undefined}
             suffix={
-              <IconButtonDeprecated {...getToggleButtonProps()}>
+              <DeprecatedIconButton {...getToggleButtonProps()}>
                 <ChevronDownIcon />
-              </IconButtonDeprecated>
+              </DeprecatedIconButton>
             }
           />
         </ComboboxPopperAnchor>
diff --git a/apps/designer/app/designer/features/sidebar-left/lib/header.tsx b/apps/designer/app/designer/features/sidebar-left/lib/header.tsx
index ec0cac83b8..7ff2823c2d 100644
--- a/apps/designer/app/designer/features/sidebar-left/lib/header.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/lib/header.tsx
@@ -1,6 +1,6 @@
 import {
   Flex,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Text,
   Tooltip,
 } from "@webstudio-is/design-system";
@@ -30,8 +30,8 @@ export const Header = ({ title, suffix }: HeaderProps) => {
 
 export const CloseButton = ({ onClick }: { onClick: () => void }) => (
   <Tooltip content="Close panel" side="bottom">
-    <IconButtonDeprecated onClick={onClick} size="2" aria-label="Close panel">
+    <DeprecatedIconButton onClick={onClick} size="2" aria-label="Close panel">
       <CrossIcon />
-    </IconButtonDeprecated>
+    </DeprecatedIconButton>
   </Tooltip>
 );
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx b/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
index 15c2d909e9..91bb6c16b1 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/pages/pages.tsx
@@ -1,5 +1,5 @@
 import {
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   TreeItemLabel,
   TreeItemBody,
   TreeNode,
@@ -72,7 +72,7 @@ const staticTreeProps = {
   },
 };
 
-const MenuButton = styled(IconButtonDeprecated, {
+const MenuButton = styled(DeprecatedIconButton, {
   color: "$hint",
   "&:hover, &:focus-visible": { color: "$hiContrast" },
   variants: {
@@ -203,13 +203,13 @@ const PagesPanel = ({
           <>
             {onCreateNewPage && (
               <Tooltip content="New page" side="bottom">
-                <IconButtonDeprecated
+                <DeprecatedIconButton
                   size="2"
                   onClick={() => onCreateNewPage()}
                   aria-label="New page"
                 >
                   <NewPageIcon />
-                </IconButtonDeprecated>
+                </DeprecatedIconButton>
               </Tooltip>
             )}
             {onClose && <CloseButton onClick={onClose} />}
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx b/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx
index f0a99c7d7b..afc17b6776 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx
@@ -1,5 +1,5 @@
 import {
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Button,
   Box,
   Label,
@@ -276,7 +276,7 @@ const NewPageSettingsView = ({
           <>
             {onClose && (
               <Tooltip content="Cancel" side="bottom">
-                <IconButtonDeprecated
+                <DeprecatedIconButton
                   size="2"
                   onClick={onClose}
                   aria-label="Cancel"
@@ -285,7 +285,7 @@ const NewPageSettingsView = ({
                   tabIndex={3}
                 >
                   <ChevronDoubleLeftIcon />
-                </IconButtonDeprecated>
+                </DeprecatedIconButton>
               </Tooltip>
             )}
             <ButtonContainer>
@@ -460,26 +460,26 @@ const PageSettingsView = ({
           <>
             {isHomePage === false && (
               <Tooltip content="Delete page" side="bottom">
-                <IconButtonDeprecated
+                <DeprecatedIconButton
                   size="2"
                   onClick={onDelete}
                   aria-label="Delete page"
                   tabIndex={2}
                 >
                   <TrashIcon />
-                </IconButtonDeprecated>
+                </DeprecatedIconButton>
               </Tooltip>
             )}
             {onClose && (
               <Tooltip content="Close page settings" side="bottom">
-                <IconButtonDeprecated
+                <DeprecatedIconButton
                   size="2"
                   onClick={onClose}
                   aria-label="Close page settings"
                   tabIndex={2}
                 >
                   <ChevronDoubleLeftIcon />
-                </IconButtonDeprecated>
+                </DeprecatedIconButton>
               </Tooltip>
             )}
           </>
diff --git a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx
index 51c3dc2d74..0f32a1f3f9 100644
--- a/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx
+++ b/apps/designer/app/designer/features/style-panel/controls/toggle/toggle-control.tsx
@@ -2,7 +2,7 @@ import {
   styled,
   Flex,
   Tooltip,
-  ToggleGroupRoot,
+  ToggleGroup,
   ToggleGroupItem,
 } from "@webstudio-is/design-system";
 import type { StyleProperty } from "@webstudio-is/css-data";
@@ -23,7 +23,7 @@ export const ToggleGroupControl = ({
 }: ToggleGroupControlProps) => {
   const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
   return (
-    <ToggleGroupRoot
+    <ToggleGroup
       type="single"
       value={value}
       onValueChange={onValueChange}
@@ -42,7 +42,7 @@ export const ToggleGroupControl = ({
           </ToggleGroupControlItem>
         );
       })}
-    </ToggleGroupRoot>
+    </ToggleGroup>
   );
 };
 
diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx
index 7527c565ed..6fa36944ef 100644
--- a/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx
@@ -1,4 +1,4 @@
-import { Flex, Grid, IconButtonDeprecated } from "@webstudio-is/design-system";
+import { Flex, Grid, DeprecatedIconButton } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
 import { DotFilledIcon } from "@webstudio-is/icons";
 import { useIsFromCurrentBreakpoint } from "../../../shared/use-is-from-current-breakpoint";
@@ -88,7 +88,7 @@ export const FlexGrid = ({
             height: "100%",
           }}
         >
-          <IconButtonDeprecated
+          <DeprecatedIconButton
             css={{
               width: "100%",
               height: "100%",
@@ -113,7 +113,7 @@ export const FlexGrid = ({
             }}
           >
             <DotFilledIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         </Flex>
       ))}
       <Flex
diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx
index 2d6b1df892..4825fb6879 100644
--- a/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/layout/shared/lock.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import {
   Flex,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Tooltip,
 } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
@@ -52,9 +52,9 @@ export const Lock = ({
           justifyContent: "center",
         }}
       >
-        <IconButtonDeprecated onClick={() => setIsPaired((value) => !value)}>
+        <DeprecatedIconButton onClick={() => setIsPaired((value) => !value)}>
           {isPaired ? <LockCloseIcon /> : <LockOpenIcon />}
-        </IconButtonDeprecated>
+        </DeprecatedIconButton>
       </Flex>
     </Tooltip>
   );
diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
index 462a6a302f..ba295c7364 100644
--- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
@@ -2,7 +2,7 @@ import type { RenderCategoryProps } from "../../style-sections";
 import {
   Flex,
   Grid,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Tooltip,
 } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
@@ -343,9 +343,9 @@ export const TypographySectionAdvancedPopover = (
     >
       <Flex>
         <Tooltip content="More typography options" delayDuration={0}>
-          <IconButtonDeprecated>
+          <DeprecatedIconButton>
             <EllipsesIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         </Tooltip>
       </Flex>
     </FloatingPanel>
diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index b2c07f7690..94b6babd77 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -11,7 +11,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuSeparator,
   DropdownMenuPortal,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Box,
 } from "@webstudio-is/design-system";
 import { HamburgerMenuIcon, ChevronRightIcon } from "@webstudio-is/icons";
@@ -127,9 +127,9 @@ export const Menu = ({ publish }: MenuProps) => {
             },
           }}
         >
-          <IconButtonDeprecated aria-label="Menu Button">
+          <DeprecatedIconButton aria-label="Menu Button">
             <HamburgerMenuIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         </Box>
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
diff --git a/apps/designer/app/designer/features/topbar/preview.tsx b/apps/designer/app/designer/features/topbar/preview.tsx
index a51df4d722..56c0077889 100644
--- a/apps/designer/app/designer/features/topbar/preview.tsx
+++ b/apps/designer/app/designer/features/topbar/preview.tsx
@@ -1,6 +1,6 @@
 import { useSubscribe, type Publish } from "~/shared/pubsub";
 import { EyeOpenIcon } from "@webstudio-is/icons";
-import { SimpleToggle } from "@webstudio-is/design-system";
+import { Toggle } from "@webstudio-is/design-system";
 import { useIsPreviewMode } from "~/shared/nano-states";
 
 declare module "~/shared/pubsub" {
@@ -29,12 +29,12 @@ export const PreviewButton = ({ publish }: PreviewButtonProps) => {
   });
 
   return (
-    <SimpleToggle
+    <Toggle
       onPressedChange={setValue}
       pressed={isPreviewMode}
       aria-label="Toggle Preview"
     >
       <EyeOpenIcon />
-    </SimpleToggle>
+    </Toggle>
   );
 };
diff --git a/apps/designer/app/designer/features/topbar/share.tsx b/apps/designer/app/designer/features/topbar/share.tsx
index 7696d90c1e..ae17095228 100644
--- a/apps/designer/app/designer/features/topbar/share.tsx
+++ b/apps/designer/app/designer/features/topbar/share.tsx
@@ -1,7 +1,7 @@
 import {
   Button,
   Flex,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   Popover,
   PopoverContent,
   PopoverPortal,
@@ -57,9 +57,9 @@ export const ShareButton = (props: ShareButtonProps) => {
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild aria-label="Share project">
-        <IconButtonDeprecated>
+        <DeprecatedIconButton>
           <Share1Icon />
-        </IconButtonDeprecated>
+        </DeprecatedIconButton>
       </PopoverTrigger>
       <PopoverPortal>
         <Content {...props} />
diff --git a/apps/designer/app/designer/shared/design-tokens-manager/item-menu.tsx b/apps/designer/app/designer/shared/design-tokens-manager/item-menu.tsx
index 0042590cfd..a3654cd710 100644
--- a/apps/designer/app/designer/shared/design-tokens-manager/item-menu.tsx
+++ b/apps/designer/app/designer/shared/design-tokens-manager/item-menu.tsx
@@ -1,7 +1,7 @@
 import {
   DropdownMenu,
   DropdownMenuTrigger,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   DropdownMenuContent,
   DropdownMenuItem,
   Text,
@@ -22,7 +22,7 @@ const stopPropagation: MouseEventHandler = (event) => {
   event.stopPropagation();
 };
 
-const MenuButton = styled(IconButtonDeprecated, {
+const MenuButton = styled(DeprecatedIconButton, {
   color: "$hint",
   "&:hover, &:focus-visible": {
     color: "$hiContrast",
diff --git a/apps/designer/app/designer/shared/fonts-manager/item-menu.tsx b/apps/designer/app/designer/shared/fonts-manager/item-menu.tsx
index b75abb50dd..308e92b309 100644
--- a/apps/designer/app/designer/shared/fonts-manager/item-menu.tsx
+++ b/apps/designer/app/designer/shared/fonts-manager/item-menu.tsx
@@ -1,7 +1,7 @@
 import {
   DropdownMenu,
   DropdownMenuTrigger,
-  IconButtonDeprecated,
+  DeprecatedIconButton,
   DropdownMenuContent,
   DropdownMenuItem,
   Text,
@@ -11,7 +11,7 @@ import {
 import { MenuIcon } from "@webstudio-is/icons";
 import { type FocusEventHandler, useState, useRef, useEffect } from "react";
 
-const MenuButton = styled(IconButtonDeprecated, {
+const MenuButton = styled(DeprecatedIconButton, {
   color: "$hint",
   "&:hover, &:focus-visible": {
     color: "$hiContrast",
diff --git a/packages/design-system/src/components/heading.tsx b/packages/design-system/src/components/__DEPRECATED__/heading.tsx
similarity index 89%
rename from packages/design-system/src/components/heading.tsx
rename to packages/design-system/src/components/__DEPRECATED__/heading.tsx
index b6f621f15c..c62e762363 100644
--- a/packages/design-system/src/components/heading.tsx
+++ b/packages/design-system/src/components/__DEPRECATED__/heading.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { DeprecatedText } from "./__DEPRECATED__/text";
-import { VariantProps, CSS } from "../stitches.config";
+import { DeprecatedText } from "./text";
+import { VariantProps, CSS } from "../../stitches.config";
 import merge from "lodash.merge";
 
 const DEFAULT_TAG = "h1";
@@ -14,7 +14,7 @@ type HeadingVariants = { size?: HeadingSizeVariants } & Omit<
 type HeadingProps = React.ComponentProps<typeof DEFAULT_TAG> &
   HeadingVariants & { css?: CSS; as?: string };
 
-export const Heading = React.forwardRef<
+export const DeprecatedHeading = React.forwardRef<
   React.ElementRef<typeof DEFAULT_TAG>,
   HeadingProps
 >((props, forwardedRef) => {
@@ -54,4 +54,4 @@ export const Heading = React.forwardRef<
   );
 });
 
-Heading.displayName = "Heading";
+DeprecatedHeading.displayName = "DeprecatedHeading";
diff --git a/packages/design-system/src/components/icon-button-deprecated.tsx b/packages/design-system/src/components/__DEPRECATED__/icon-button.tsx
similarity index 93%
rename from packages/design-system/src/components/icon-button-deprecated.tsx
rename to packages/design-system/src/components/__DEPRECATED__/icon-button.tsx
index ce66e07386..6ac071da70 100644
--- a/packages/design-system/src/components/icon-button-deprecated.tsx
+++ b/packages/design-system/src/components/__DEPRECATED__/icon-button.tsx
@@ -1,6 +1,6 @@
-import { styled } from "../stitches.config";
+import { styled } from "../../stitches.config";
 
-export const IconButtonDeprecated = styled("button", {
+export const DeprecatedIconButton = styled("button", {
   // Reset
   alignItems: "center",
   appearance: "none",
diff --git a/packages/design-system/src/components/accordion.tsx b/packages/design-system/src/components/accordion.tsx
deleted file mode 100644
index a54bebb0c0..0000000000
--- a/packages/design-system/src/components/accordion.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { styled, CSS } from "../stitches.config";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@webstudio-is/icons";
-
-const StyledAccordion = styled(AccordionPrimitive.Root, {});
-
-type AccordionPrimitiveProps = React.ComponentProps<
-  typeof AccordionPrimitive.Root
->;
-type AccordionProps = AccordionPrimitiveProps & { css?: CSS };
-
-export const Accordion = React.forwardRef<
-  React.ElementRef<typeof StyledAccordion>,
-  AccordionProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledAccordion
-    ref={forwardedRef}
-    {...props}
-    {...(props.type === "single" ? { collapsible: true } : {})}
-  >
-    {children}
-  </StyledAccordion>
-));
-Accordion.displayName = "Accordion";
-
-const StyledItem = styled(AccordionPrimitive.Item, {
-  borderTop: "$spacing$1 solid $colors$slate6",
-
-  "&:last-of-type": {
-    borderBottom: "$spacing$1 solid $colors$slate6",
-  },
-});
-
-const StyledHeader = styled(AccordionPrimitive.Header, {
-  all: "unset",
-});
-
-const StyledTrigger = styled(AccordionPrimitive.Trigger, {
-  all: "unset",
-  boxSizing: "border-box",
-  userSelect: "none",
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  p: "$spacing$5",
-  color: "$hiContrast",
-  width: "100%",
-
-  "@hover": {
-    "&:hover": {
-      backgroundColor: "$slate2",
-    },
-  },
-
-  "&:focus": {
-    outline: "none",
-    boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-  },
-
-  svg: {
-    transition: "transform 175ms cubic-bezier(0.65, 0, 0.35, 1)",
-  },
-
-  '&[data-state="open"]': {
-    svg: {
-      transform: "rotate(180deg)",
-    },
-  },
-});
-
-type AccordionTriggerPrimitiveProps = React.ComponentProps<
-  typeof AccordionPrimitive.Trigger
->;
-type AccordionTriggerProps = AccordionTriggerPrimitiveProps & { css?: CSS };
-
-export const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof StyledTrigger>,
-  AccordionTriggerProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledHeader>
-    <StyledTrigger {...props} ref={forwardedRef}>
-      {children}
-      <ChevronDownIcon />
-    </StyledTrigger>
-  </StyledHeader>
-));
-AccordionTrigger.displayName = "AccordionTrigger";
-
-const StyledContent = styled(AccordionPrimitive.Content, {
-  p: "$spacing$5",
-});
-
-export const AccordionItem = StyledItem;
-export const AccordionContent = StyledContent;
diff --git a/packages/design-system/src/components/alert-dialog.tsx b/packages/design-system/src/components/alert-dialog.tsx
deleted file mode 100644
index 673c388702..0000000000
--- a/packages/design-system/src/components/alert-dialog.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import { styled } from "../stitches.config";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { overlayStyles } from "./overlay";
-import { panelStyles } from "./panel";
-
-type AlertDialogProps = React.ComponentProps<
-  typeof AlertDialogPrimitive.Root
-> & {
-  children: React.ReactNode;
-};
-
-const StyledOverlay = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-});
-
-export const AlertDialog = ({ children, ...props }: AlertDialogProps) => {
-  return (
-    <AlertDialogPrimitive.Root {...props}>
-      <StyledOverlay />
-      {children}
-    </AlertDialogPrimitive.Root>
-  );
-};
-
-export const AlertDialogContent = styled(
-  AlertDialogPrimitive.Content,
-  panelStyles,
-  {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    minWidth: 200,
-    maxHeight: "85vh",
-    padding: "$spacing$10",
-    marginTop: "-5vh",
-
-    "&:focus": {
-      outline: "none",
-    },
-  }
-);
-
-export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-export const AlertDialogTitle = AlertDialogPrimitive.Title;
-export const AlertDialogDescription = AlertDialogPrimitive.Description;
-export const AlertDialogAction = AlertDialogPrimitive.Action;
-export const AlertDialogCancel = AlertDialogPrimitive.Cancel;
diff --git a/packages/design-system/src/components/alert.tsx b/packages/design-system/src/components/alert.tsx
deleted file mode 100644
index 50bf4c0471..0000000000
--- a/packages/design-system/src/components/alert.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Alert = styled("div", {
-  // Reset
-  boxSizing: "border-box",
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-
-  border: "1px solid",
-  borderRadius: "$borderRadius$6",
-
-  variants: {
-    size: {
-      "1": {
-        p: "$spacing$9",
-      },
-    },
-    variant: {
-      loContrast: {
-        backgroundColor: "$loContrast",
-        borderColor: "$slate6",
-      },
-      gray: {
-        backgroundColor: "$slate2",
-        borderColor: "$slate6",
-      },
-      blue: {
-        backgroundColor: "$blue2",
-        borderColor: "$blue6",
-      },
-      green: {
-        backgroundColor: "$green2",
-        borderColor: "$green6",
-      },
-      red: {
-        backgroundColor: "$red2",
-        borderColor: "$red6",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "1",
-    variant: "gray",
-  },
-});
diff --git a/packages/design-system/src/components/app-bar.tsx b/packages/design-system/src/components/app-bar.tsx
deleted file mode 100644
index a92f9b1f8d..0000000000
--- a/packages/design-system/src/components/app-bar.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const AppBar = styled("div", {
-  boxSizing: "border-box",
-  zIndex: "1",
-
-  variants: {
-    size: {
-      1: {
-        py: "$spacing$3",
-      },
-      2: {
-        py: "$spacing$5",
-      },
-      3: {
-        py: "$spacing$9",
-      },
-    },
-    sticky: {
-      true: {
-        position: "sticky",
-        width: "100%",
-        top: 0,
-        left: 0,
-      },
-    },
-    glass: {
-      true: {
-        backdropFilter: "blur(12px) saturate(160%)",
-      },
-    },
-    border: {
-      true: {
-        borderBottom: "$spacing$1 solid",
-      },
-    },
-    color: {
-      loContrast: {
-        backgroundColor: "$loContrast",
-      },
-      plain: {
-        backgroundColor: "$gray2",
-      },
-      accent: {
-        backgroundColor: "$blue9",
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      glass: "true",
-      color: "plain",
-      css: {
-        opacity: ".9",
-      },
-    },
-    {
-      glass: "true",
-      color: "accent",
-      css: {
-        opacity: ".9",
-      },
-    },
-    {
-      glass: "true",
-      color: "loContrast",
-      css: {
-        opacity: ".9",
-      },
-    },
-    {
-      border: "true",
-      color: "plain",
-      css: {
-        borderColor: "$slate6",
-      },
-    },
-    {
-      border: "true",
-      color: "accent",
-      css: {
-        borderColor: "$blue11",
-      },
-    },
-    {
-      border: "true",
-      color: "loContrast",
-      css: {
-        borderColor: "$slate6",
-      },
-    },
-  ],
-  defaultVariants: {
-    size: "1",
-    color: "loContrast",
-  },
-});
diff --git a/packages/design-system/src/components/badge.tsx b/packages/design-system/src/components/badge.tsx
deleted file mode 100644
index f9d5bb0136..0000000000
--- a/packages/design-system/src/components/badge.tsx
+++ /dev/null
@@ -1,456 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Badge = styled("span", {
-  // Reset
-  alignItems: "center",
-  appearance: "none",
-  borderWidth: "0",
-  boxSizing: "border-box",
-  display: "inline-flex",
-  flexShrink: 0,
-  fontFamily: "inherit",
-  justifyContent: "center",
-  lineHeight: "1",
-  verticalAlign: "middle",
-  outline: "none",
-  padding: "0",
-  textDecoration: "none",
-  userSelect: "none",
-  WebkitTapHighlightColor: "rgba(0,0,0,0)",
-  "&:disabled": {
-    backgroundColor: "$slate3",
-    pointerEvents: "none",
-    color: "$slate8",
-  },
-  "&::before": {
-    boxSizing: "border-box",
-    content: '""',
-  },
-  "&::after": {
-    boxSizing: "border-box",
-    content: '""',
-  },
-
-  // Custom
-  backgroundColor: "$slate3",
-  borderRadius: "$borderRadius$pill",
-  color: "$slate11",
-  whiteSpace: "nowrap",
-  fontVariantNumeric: "tabular-nums",
-
-  variants: {
-    size: {
-      "1": {
-        height: "$spacing$10",
-        px: "$spacing$3",
-        fontSize: "$fontSize$3",
-      },
-      "2": {
-        height: "$spacing$11",
-        px: "$spacing$5",
-        fontSize: "$fontSize$3",
-      },
-    },
-    variant: {
-      gray: {
-        backgroundColor: "$slate3",
-        color: "$slate11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-        },
-      },
-      red: {
-        backgroundColor: "$red3",
-        color: "$red11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8",
-        },
-      },
-      crimson: {
-        backgroundColor: "$crimson3",
-        color: "$crimson11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$crimson8, 0 0 0 1px $colors$crimson8",
-        },
-      },
-      pink: {
-        backgroundColor: "$pink3",
-        color: "$pink11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$pink8, 0 0 0 1px $colors$pink8",
-        },
-      },
-      purple: {
-        backgroundColor: "$purple3",
-        color: "$purple11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$purple8, 0 0 0 1px $colors$purple8",
-        },
-      },
-      violet: {
-        backgroundColor: "$violet3",
-        color: "$violet11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$violet8, 0 0 0 1px $colors$violet8",
-        },
-      },
-      indigo: {
-        backgroundColor: "$indigo3",
-        color: "$indigo11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$indigo8, 0 0 0 1px $colors$indigo8",
-        },
-      },
-      blue: {
-        backgroundColor: "$blue3",
-        color: "$blue11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8",
-        },
-      },
-      cyan: {
-        backgroundColor: "$cyan3",
-        color: "$cyan11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$cyan8, 0 0 0 1px $colors$cyan8",
-        },
-      },
-      teal: {
-        backgroundColor: "$teal3",
-        color: "$teal11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$teal8, 0 0 0 1px $colors$teal8",
-        },
-      },
-      green: {
-        backgroundColor: "$green3",
-        color: "$green11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8",
-        },
-      },
-      lime: {
-        backgroundColor: "$lime3",
-        color: "$lime11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$lime8, 0 0 0 1px $colors$lime8",
-        },
-      },
-      yellow: {
-        backgroundColor: "$yellow3",
-        color: "$yellow11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$yellow8, 0 0 0 1px $colors$yellow8",
-        },
-      },
-      orange: {
-        backgroundColor: "$orange3",
-        color: "$orange11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$orange8, 0 0 0 1px $colors$orange8",
-        },
-      },
-      gold: {
-        backgroundColor: "$gold3",
-        color: "$gold11",
-        "&:focus": {
-          boxShadow: "inset 0 0 0 1px $colors$gold8, 0 0 0 1px $colors$gold8",
-        },
-      },
-      bronze: {
-        backgroundColor: "$bronze3",
-        color: "$bronze11",
-        "&:focus": {
-          boxShadow:
-            "inset 0 0 0 1px $colors$bronze8, 0 0 0 1px $colors$bronze8",
-        },
-      },
-    },
-    interactive: {
-      true: {},
-    },
-  },
-
-  compoundVariants: [
-    {
-      interactive: true,
-      variant: "red",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$red4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$red5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$red5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "crimson",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$crimson4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$crimson5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$crimson5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "pink",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$pink4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$pink5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$pink5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "purple",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$purple4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$purple5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$purple5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "violet",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$violet4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$violet5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$violet5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "indigo",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$indigo4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$indigo5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$indigo5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "blue",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$blue4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$blue5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$blue5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "cyan",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$cyan4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$cyan5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$cyan5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "teal",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$teal4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$teal5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$teal5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "green",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$green4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$green5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$green5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "lime",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$lime4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$lime5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$lime5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "yellow",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$yellow4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$yellow5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$yellow5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "orange",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$orange4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$orange5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$orange5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "gold",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$gold4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$gold5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$gold5",
-          },
-      },
-    },
-    {
-      interactive: true,
-      variant: "bronze",
-      css: {
-        "@hover": {
-          "&:hover": {
-            backgroundColor: "$bronze4",
-          },
-        },
-        "&:active": {
-          backgroundColor: "$bronze5",
-        },
-        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
-          {
-            backgroundColor: "$bronze5",
-          },
-      },
-    },
-  ],
-  defaultVariants: {
-    size: "1",
-    variant: "gray",
-  },
-});
diff --git a/packages/design-system/src/components/banner.tsx b/packages/design-system/src/components/banner.tsx
deleted file mode 100644
index e80f4e41d2..0000000000
--- a/packages/design-system/src/components/banner.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Banner = styled("div", {
-  // Reset
-  boxSizing: "border-box",
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "$spacing$9",
-
-  variants: {
-    size: {
-      "1": {
-        py: "$spacing$3",
-        px: "$spacing$10",
-      },
-    },
-    variant: {
-      loContrast: {
-        backgroundColor: "$loContrast",
-      },
-      gray: {
-        backgroundColor: "$slate3",
-      },
-      blue: {
-        backgroundColor: "$blue3",
-      },
-      green: {
-        backgroundColor: "$green3",
-      },
-      red: {
-        backgroundColor: "$red3",
-      },
-    },
-    rounded: {
-      true: {
-        borderRadius: "$borderRadius$pill",
-      },
-    },
-    border: {
-      true: {
-        borderRadius: "$borderRadius$pill",
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      border: "true",
-      variant: "gray",
-      css: {
-        borderColor: "$slate6",
-      },
-    },
-    {
-      border: "true",
-      variant: "blue",
-      css: {
-        borderColor: "$blue11",
-      },
-    },
-    {
-      border: "true",
-      variant: "loContrast",
-      css: {
-        borderColor: "$slate6",
-      },
-    },
-  ],
-  defaultVariants: {
-    size: "1",
-    variant: "gray",
-  },
-});
diff --git a/packages/design-system/src/components/code.tsx b/packages/design-system/src/components/code.tsx
deleted file mode 100644
index 3601284681..0000000000
--- a/packages/design-system/src/components/code.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Code = styled("code", {
-  fontFamily: "$mono",
-  fontSize: "max(12px, 85%)",
-  whiteSpace: "nowrap",
-  padding: "0 $spacing$2 $spacing$2 $spacing$2",
-
-  variants: {
-    variant: {
-      gray: {
-        backgroundColor: "$slate3",
-        color: "$slate11",
-      },
-      violet: {
-        backgroundColor: "$violet3",
-        color: "$violet11",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "violet",
-  },
-});
diff --git a/packages/design-system/src/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx
index d180a4a661..6080a3de1e 100644
--- a/packages/design-system/src/components/combobox.tsx
+++ b/packages/design-system/src/components/combobox.tsx
@@ -17,7 +17,7 @@ import {
 } from "downshift";
 import { matchSorter } from "match-sorter";
 import { styled } from "../stitches.config";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
+import { DeprecatedIconButton } from "./__DEPRECATED__/icon-button";
 import { itemCss } from "./menu";
 import { panelStyles } from "./panel";
 import { TextField } from "./text-field";
@@ -305,9 +305,9 @@ export const Combobox = <Item,>({
               placeholder,
             })}
             suffix={
-              <IconButtonDeprecated {...getToggleButtonProps()}>
+              <DeprecatedIconButton {...getToggleButtonProps()}>
                 <ChevronDownIcon />
-              </IconButtonDeprecated>
+              </DeprecatedIconButton>
             }
           />
         </PopperAnchor>
diff --git a/packages/design-system/src/components/container.tsx b/packages/design-system/src/components/container.tsx
deleted file mode 100644
index 35ad2bb7bb..0000000000
--- a/packages/design-system/src/components/container.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Container = styled("div", {
-  // Reset
-  boxSizing: "border-box",
-  flexShrink: 0,
-
-  // Custom
-  ml: "auto",
-  mr: "auto",
-  px: "$spacing$11",
-
-  variants: {
-    size: {
-      "1": {
-        maxWidth: "430px",
-      },
-      "2": {
-        maxWidth: "715px",
-      },
-      "3": {
-        maxWidth: "1145px",
-      },
-      "4": {
-        maxWidth: "none",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "4",
-  },
-});
diff --git a/packages/design-system/src/components/context-menu.tsx b/packages/design-system/src/components/context-menu.tsx
deleted file mode 100644
index c7fba995a4..0000000000
--- a/packages/design-system/src/components/context-menu.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import { CheckIcon } from "@webstudio-is/icons";
-import { styled, CSS } from "../stitches.config";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { menuCss, separatorCss, itemCss, labelCss } from "./menu";
-import { Box } from "./box";
-import { Flex } from "./flex";
-import { panelStyles } from "./panel";
-
-export const ContextMenu = ContextMenuPrimitive.Root;
-export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-export const ContextMenuContent = styled(
-  ContextMenuPrimitive.Content,
-  menuCss,
-  panelStyles
-);
-
-export const ContextMenuSeparator = styled(
-  ContextMenuPrimitive.Separator,
-  separatorCss
-);
-
-export const ContextMenuItem = styled(ContextMenuPrimitive.Item, itemCss);
-
-const StyledContextMenuRadioItem = styled(
-  ContextMenuPrimitive.RadioItem,
-  itemCss
-);
-
-type ContextMenuRadioItemPrimitiveProps = React.ComponentProps<
-  typeof ContextMenuPrimitive.RadioItem
->;
-type ContextMenuRadioItemProps = ContextMenuRadioItemPrimitiveProps & {
-  css?: CSS;
-};
-
-export const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof StyledContextMenuRadioItem>,
-  ContextMenuRadioItemProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledContextMenuRadioItem {...props} ref={forwardedRef}>
-    <Box as="span" css={{ position: "absolute", left: "$spacing$3" }}>
-      <ContextMenuPrimitive.ItemIndicator>
-        <Flex
-          css={{
-            width: "$spacing$9",
-            height: "$spacing$9",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <Box
-            css={{
-              width: "$spacing$3",
-              height: "$spacing$3",
-              backgroundColor: "currentColor",
-              borderRadius: "$borderRadius$round",
-            }}
-          />
-        </Flex>
-      </ContextMenuPrimitive.ItemIndicator>
-    </Box>
-    {children}
-  </StyledContextMenuRadioItem>
-));
-ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
-
-const StyledContextMenuCheckboxItem = styled(
-  ContextMenuPrimitive.CheckboxItem,
-  itemCss
-);
-
-type ContextMenuCheckboxItemPrimitiveProps = React.ComponentProps<
-  typeof ContextMenuPrimitive.CheckboxItem
->;
-type ContextMenuCheckboxItemProps = ContextMenuCheckboxItemPrimitiveProps & {
-  css?: CSS;
-};
-
-export const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof StyledContextMenuCheckboxItem>,
-  ContextMenuCheckboxItemProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledContextMenuCheckboxItem {...props} ref={forwardedRef}>
-    <Box as="span" css={{ position: "absolute", left: "$spacing$3" }}>
-      <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon />
-      </ContextMenuPrimitive.ItemIndicator>
-    </Box>
-    {children}
-  </StyledContextMenuCheckboxItem>
-));
-
-ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
-
-export const ContextMenuLabel = styled(ContextMenuPrimitive.Label, labelCss);
-export const ContextMenuRadioGroup = styled(
-  ContextMenuPrimitive.RadioGroup,
-  {}
-);
-export const ContextMenuGroup = styled(ContextMenuPrimitive.Group, {});
diff --git a/packages/design-system/src/components/control-group.tsx b/packages/design-system/src/components/control-group.tsx
deleted file mode 100644
index 5d5bcef7d7..0000000000
--- a/packages/design-system/src/components/control-group.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { styled } from "../stitches.config";
-import { Button } from "./button";
-import { TextField } from "./text-field";
-import { Select } from "./select";
-
-export const ControlGroup = styled("div", {
-  display: "flex",
-
-  // Make sure ControlGroup and its children don't affect normal stacking order
-  position: "relative",
-  zIndex: 0,
-
-  [`& ${Button}`]: {
-    borderRadius: 0,
-    boxShadow:
-      "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-    "&:hover": {
-      boxShadow:
-        "-1px 0 $colors$slate8, inset 0 1px $colors$slate8, inset -1px 0 $colors$slate8, inset 0 -1px $colors$slate8",
-    },
-    "&:focus": {
-      zIndex: 1,
-      boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-    },
-    "&:first-child": {
-      borderTopLeftRadius: "$1",
-      borderBottomLeftRadius: "$1",
-      boxShadow: "inset 0 0 0 1px $colors$slate7",
-      "&:hover": {
-        boxShadow: "inset 0 0 0 1px $colors$slate8",
-      },
-      "&:focus": {
-        boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-      },
-    },
-    "&:last-child": {
-      borderTopRightRadius: "$1",
-      borderBottomRightRadius: "$1",
-      boxShadow:
-        "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-      "&:focus": {
-        boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-      },
-    },
-  },
-  [`& ${TextField}`]: {
-    borderRadius: 0,
-    boxShadow:
-      "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-    "&:focus": {
-      zIndex: 1,
-      boxShadow:
-        "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-    },
-    "&:first-child": {
-      borderTopLeftRadius: "$1",
-      borderBottomLeftRadius: "$1",
-      boxShadow: "inset 0 0 0 1px $colors$slate7",
-      "&:focus": {
-        boxShadow:
-          "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-      },
-    },
-    "&:last-child": {
-      borderTopRightRadius: "$1",
-      borderBottomRightRadius: "$1",
-      boxShadow:
-        "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-      "&:focus": {
-        boxShadow:
-          "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-      },
-    },
-  },
-  [`& ${Select}`]: {
-    borderRadius: 0,
-    boxShadow:
-      "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-    "&:focus-within": {
-      boxShadow:
-        "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-    },
-    "&:first-child": {
-      borderTopLeftRadius: "$1",
-      borderBottomLeftRadius: "$1",
-      boxShadow: "inset 0 0 0 1px $colors$slate7",
-      "&:focus-within": {
-        boxShadow:
-          "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-      },
-    },
-    "&:last-child": {
-      borderTopRightRadius: "$1",
-      borderBottomRightRadius: "$1",
-      boxShadow:
-        "inset 0 1px $colors$slate7, inset -1px 0 $colors$slate7, inset 0 -1px $colors$slate7",
-      "&:focus-within": {
-        boxShadow:
-          "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
-      },
-    },
-  },
-});
diff --git a/packages/design-system/src/components/dialog.tsx b/packages/design-system/src/components/dialog.tsx
deleted file mode 100644
index 51c4761f47..0000000000
--- a/packages/design-system/src/components/dialog.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from "react";
-import { styled, CSS } from "../stitches.config";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { CrossIcon } from "@webstudio-is/icons";
-import { overlayStyles } from "./overlay";
-import { panelStyles } from "./panel";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
-
-type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {
-  children: React.ReactNode;
-};
-
-const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  zIndex: "$1",
-});
-
-export const Dialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <DialogPrimitive.Root {...props}>
-      <StyledOverlay />
-      {children}
-    </DialogPrimitive.Root>
-  );
-};
-
-const StyledContent = styled(DialogPrimitive.Content, panelStyles, {
-  position: "fixed",
-  zIndex: "$1",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  minWidth: 200,
-  maxHeight: "85vh",
-  padding: "$spacing$10",
-  marginTop: "-5vh",
-  // animation: `${fadeIn} 125ms linear, ${moveDown} 125ms cubic-bezier(0.22, 1, 0.36, 1)`,
-
-  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
-  // Affects animated and non-animated dialogs alike.
-  willChange: "transform",
-
-  "&:focus": {
-    outline: "none",
-  },
-});
-
-const StyledCloseButton = styled(DialogPrimitive.Close, {
-  position: "absolute",
-  top: "$spacing$5",
-  right: "$spacing$5",
-});
-
-type DialogContentPrimitiveProps = React.ComponentProps<
-  typeof DialogPrimitive.Content
->;
-type DialogContentProps = DialogContentPrimitiveProps & { css?: CSS };
-
-export const DialogContent = React.forwardRef<
-  React.ElementRef<typeof StyledContent>,
-  DialogContentProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledContent {...props} ref={forwardedRef}>
-    {children}
-    <StyledCloseButton asChild>
-      <IconButtonDeprecated>
-        <CrossIcon />
-      </IconButtonDeprecated>
-    </StyledCloseButton>
-  </StyledContent>
-));
-DialogContent.displayName = "DialogContent";
-
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.Close;
-export const DialogTitle = DialogPrimitive.Title;
-export const DialogDescription = DialogPrimitive.Description;
-export const DialogPortal = DialogPrimitive.Portal;
diff --git a/packages/design-system/src/components/icon-button-with-menu.tsx b/packages/design-system/src/components/icon-button-with-menu.tsx
index e8292c216e..ba2ff5a226 100644
--- a/packages/design-system/src/components/icon-button-with-menu.tsx
+++ b/packages/design-system/src/components/icon-button-with-menu.tsx
@@ -2,7 +2,7 @@ import { CheckIcon, IconComponent } from "@webstudio-is/icons";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { styled } from "../stitches.config";
 import { Tooltip } from "./tooltip";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
+import { DeprecatedIconButton } from "./__DEPRECATED__/icon-button";
 
 const StyledContent = styled(DropdownMenuPrimitive.Content, {
   width: 192,
@@ -114,14 +114,14 @@ export const IconButtonWithMenu = ({
         disableHoverableContent={true}
       >
         <DropdownMenuPrimitive.Trigger asChild>
-          <IconButtonDeprecated
+          <DeprecatedIconButton
             css={{
               ...iconButtonStyle,
               ...(isActive && iconButtonActiveStyle),
             }}
           >
             {Icon}
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         </DropdownMenuPrimitive.Trigger>
       </Tooltip>
       <DropdownMenuPrimitive.Portal>
diff --git a/packages/design-system/src/components/image.tsx b/packages/design-system/src/components/image.tsx
deleted file mode 100644
index 48a8480850..0000000000
--- a/packages/design-system/src/components/image.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Image = styled("img", {
-  // Reset
-  verticalAlign: "middle",
-  maxWidth: "100%",
-});
diff --git a/packages/design-system/src/components/kbd.tsx b/packages/design-system/src/components/kbd.tsx
deleted file mode 100644
index c591d75993..0000000000
--- a/packages/design-system/src/components/kbd.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Kbd = styled("kbd", {
-  boxSizing: "border-box",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "$loContrast",
-  flexShrink: 0,
-  color: "$hiContrast",
-  userSelect: "none",
-  cursor: "default",
-  whiteSpace: "nowrap",
-  boxShadow: `
-    inset 0 0.5px rgba(255, 255, 255, 0.1),
-    inset 0 1px 5px $colors$slate2,
-    0px 0px 0px 0.5px $colors$slate8,
-    0px 2px 1px -1px $colors$slate8,
-    0 1px $colors$slate8`,
-  textShadow: "0 0 1px rgba(255, 255, 255, 0.5)",
-  fontFamily: "inherit",
-  fontWeight: 400,
-  lineHeight: "1.5",
-  mx: "$spacing$2",
-
-  variants: {
-    size: {
-      "1": {
-        borderRadius: "$borderRadius$4",
-        px: "0.3em",
-        height: "$spacing$9",
-        minWidth: "1.6em",
-        fontSize: "$fontSize$3",
-        lineHeight: "$spaces$3",
-      },
-      "2": {
-        borderRadius: "$borderRadius$6",
-        px: "0.5em",
-        height: "$spacing$11",
-        minWidth: "2em",
-        fontSize: "$fontSize$3",
-        lineHeight: "$spaces$5",
-      },
-    },
-    width: {
-      shift: {
-        width: "4em",
-        justifyContent: "flex-start",
-      },
-      command: {
-        width: "3em",
-        justifyContent: "flex-end",
-      },
-      space: {
-        width: "8em",
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      size: "1",
-      width: "shift",
-      css: {
-        width: "3em",
-      },
-    },
-    {
-      size: "1",
-      width: "command",
-      css: {
-        width: "2.5em",
-      },
-    },
-    {
-      size: "1",
-      width: "space",
-      css: {
-        width: "5em",
-      },
-    },
-  ],
-
-  defaultVariants: {
-    size: "2",
-  },
-});
diff --git a/packages/design-system/src/components/overlay.tsx b/packages/design-system/src/components/overlay.tsx
deleted file mode 100644
index ddfac6c1bc..0000000000
--- a/packages/design-system/src/components/overlay.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { styled, css } from "../stitches.config";
-
-export const overlayStyles = css({
-  backgroundColor: "rgba(0, 0, 0, .15)",
-});
-
-export const Overlay = styled("div", overlayStyles);
diff --git a/packages/design-system/src/components/popover.tsx b/packages/design-system/src/components/popover.tsx
index 970ba842ef..7d29b41a15 100644
--- a/packages/design-system/src/components/popover.tsx
+++ b/packages/design-system/src/components/popover.tsx
@@ -4,7 +4,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Box } from "./box";
 import { panelStyles } from "./panel";
 import { Flex } from "./flex";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
+import { DeprecatedIconButton } from "./__DEPRECATED__/icon-button";
 import { Text } from "./text";
 import { Separator } from "./separator";
 import { styled, CSS } from "../stitches.config";
@@ -77,7 +77,7 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => {
       >
         <Text variant="title">{title}</Text>
         <PopoverClose asChild>
-          <IconButtonDeprecated
+          <DeprecatedIconButton
             size="2"
             css={{
               marginRight: "$spacing$5",
@@ -85,7 +85,7 @@ export const PopoverHeader = ({ title }: PopoverHeaderProps) => {
             aria-label="Close"
           >
             <CrossLargeIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         </PopoverClose>
       </Flex>
       <Separator />
diff --git a/packages/design-system/src/components/progress-bar.tsx b/packages/design-system/src/components/progress-bar.tsx
deleted file mode 100644
index 8a1224ceee..0000000000
--- a/packages/design-system/src/components/progress-bar.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from "react";
-import { styled, keyframes, CSS, VariantProps } from "../stitches.config";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-const indeterminateProgress = keyframes({
-  "0%": {
-    transform: "scaleX(1) translateX(-100%)",
-    transformOrigin: "left",
-  },
-  "50%": {
-    transform: "scaleX(1) translateX(1000%)",
-    transformOrigin: "left",
-  },
-  "100%": {
-    transform: "scaleX(1) translateX(2000%)",
-    transformOrigin: "left",
-  },
-});
-
-const StyledProgressBar = styled(ProgressPrimitive.Root, {
-  boxSizing: "border-box",
-  position: "relative",
-  height: "$spacing$3",
-  overflow: "hidden",
-  borderRadius: "$borderRadius$pill",
-
-  '&[data-state="indeterminate"]': {
-    backgroundColor: "$slate4",
-    "&::after": {
-      animationName: indeterminateProgress,
-      animationDuration: "1500ms",
-      animationIterationCount: "infinite",
-      animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
-      backgroundColor: "$slate7",
-      boxSizing: "border-box",
-      borderRadius: "$borderRadius$pill",
-      content: '""',
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      width: "5%",
-    },
-  },
-
-  variants: {
-    variant: {
-      gray: {
-        background: "$slate8",
-      },
-      blue: {
-        backgroundColor: "$blue9",
-      },
-      gradient: {
-        backgroundImage:
-          "linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "gray",
-  },
-});
-
-const ProgressBarIndicator = styled(ProgressPrimitive.Indicator, {
-  boxSizing: "border-box",
-  position: "absolute",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  width: "100%",
-  backgroundColor: "$slate4",
-  transition: "transform 150ms cubic-bezier(0.65, 0, 0.35, 1)",
-});
-
-type ProgressBarVariants = VariantProps<typeof StyledProgressBar>;
-type ProgressBarPrimitiveProps = React.ComponentProps<
-  typeof ProgressPrimitive.Root
->;
-type ProgressBarProps = ProgressBarPrimitiveProps &
-  ProgressBarVariants & { css?: CSS };
-
-export const ProgressBar = React.forwardRef<
-  React.ElementRef<typeof StyledProgressBar>,
-  ProgressBarProps
->(({ value, max = 100, ...props }, forwardedRef) => {
-  const percentage = value != null ? Math.round((value / max) * 100) : null;
-
-  return (
-    <StyledProgressBar {...props} ref={forwardedRef} value={value} max={max}>
-      <ProgressBarIndicator
-        style={{ transform: `translateX(${percentage}%)` }}
-      />
-    </StyledProgressBar>
-  );
-});
-ProgressBar.displayName = "ProgressBar";
diff --git a/packages/design-system/src/components/radio-card.tsx b/packages/design-system/src/components/radio-card.tsx
deleted file mode 100644
index 8c1cf56f62..0000000000
--- a/packages/design-system/src/components/radio-card.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import { styled, CSS } from "../stitches.config";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-
-export const RadioCardGroup = styled(RadioGroupPrimitive.Root, {
-  display: "block",
-});
-
-const StyledRadioButton = styled("div", {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "$borderRadius$round",
-  width: 25,
-  height: 25,
-  boxShadow: "inset 0 0 0 1px $colors$slate7",
-  flexShrink: 0,
-  mr: "$spacing$9",
-});
-
-const StyledRadioIndicator = styled("div", {
-  borderRadius: "$borderRadius$round",
-  width: 15,
-  height: 15,
-  backgroundColor: "$blue9",
-  transform: "scale(0)",
-});
-
-const StyledRadio = styled(RadioGroupPrimitive.Item, {
-  all: "unset",
-  boxSizing: "border-box",
-  userSelect: "none",
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-  display: "flex",
-  alignItems: "center",
-  borderRadius: "$borderRadius$6",
-  boxShadow: "inset 0 0 0 1px $colors$slate7",
-  p: "$spacing$9",
-  "@hover": {
-    "&:hover": {
-      boxShadow: "inset 0 0 0 1px $colors$slate8",
-    },
-  },
-  '&[data-state="checked"]': {
-    boxShadow:
-      "inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8 !important",
-    [`& ${StyledRadioIndicator}`]: {
-      transform: "scale(1)",
-    },
-  },
-});
-
-type RadioGroupItemPrimitiveProps = React.ComponentProps<
-  typeof RadioGroupPrimitive.Item
->;
-type RadioCardProps = RadioGroupItemPrimitiveProps & { css?: CSS };
-
-export const RadioCard = React.forwardRef<
-  React.ElementRef<typeof StyledRadio>,
-  RadioCardProps
->((props, forwardedRef) => (
-  <StyledRadio {...props} ref={forwardedRef}>
-    <StyledRadioButton>
-      <StyledRadioIndicator />
-    </StyledRadioButton>
-    {props.children}
-  </StyledRadio>
-));
-RadioCard.displayName = "RadioCard";
diff --git a/packages/design-system/src/components/radio-grid.tsx b/packages/design-system/src/components/radio-grid.tsx
deleted file mode 100644
index b3a4ce4ec2..0000000000
--- a/packages/design-system/src/components/radio-grid.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { styled } from "../stitches.config";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-
-export const RadioGridGroup = styled(RadioGroupPrimitive.Root, {
-  display: "grid",
-  gap: "$spacing$3",
-  gridTemplateColumns: "repeat(5, 1fr)",
-});
-
-export const RadioGrid = styled(RadioGroupPrimitive.Item, {
-  all: "unset",
-  boxSizing: "border-box",
-  userSelect: "none",
-  textAlign: "center",
-  "&::before": {
-    boxSizing: "border-box",
-  },
-  "&::after": {
-    boxSizing: "border-box",
-  },
-  borderRadius: "$borderRadius$6",
-  boxShadow: "inset 0 0 0 1px $colors$slate7",
-  px: "$spacing$3",
-  height: "$spacing$13",
-  lineHeight: "$sizes$6",
-  fontSize: "$fontSize$4",
-  "@hover": {
-    "&:hover": {
-      boxShadow: "inset 0 0 0 1px $colors$slate8",
-    },
-  },
-  '&[data-state="checked"]': {
-    boxShadow: "inset 0 0 0 1px $colors$slate8",
-    backgroundColor: "$slate4",
-  },
-});
diff --git a/packages/design-system/src/components/scrollbar.tsx b/packages/design-system/src/components/scrollbar.tsx
deleted file mode 100644
index be533b04bb..0000000000
--- a/packages/design-system/src/components/scrollbar.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import React from "react";
-import { Flex } from "./flex";
-import { Box } from "./box";
-import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
-
-type Point = {
-  x: number;
-  y: number;
-};
-
-type Vector = {
-  dx: number;
-  dy: number;
-};
-
-type ScrollAreaProps = {
-  children: JSX.Element;
-};
-
-export const ScrollArea = (props: ScrollAreaProps) => {
-  const thumbRef = React.useRef<HTMLDivElement>(null);
-  const wrapperRef = React.useRef<HTMLDivElement>(null);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-  const frameUpdateRef = React.useRef<number>(0);
-  const lastDragPos = React.useRef<Point>({ x: 0, y: 0 });
-  const originalBodyPointerEvents = React.useRef(
-    typeof document === "undefined" ? "" : document.body.style.pointerEvents
-  );
-
-  useLayoutEffect(() => {
-    const wrapperEl = wrapperRef.current;
-    const contentEl = contentRef.current;
-    const thumbEl = thumbRef.current;
-
-    /** The total height of the scrollable content */
-    let totalHeight = 0;
-    /** The visible height of the scrollable content */
-    let visibleHeight = 0;
-    /** The current scrollTop */
-    let scrollPos = 0;
-    /** How far we've scrolled on a scale of 0 to 1 */
-    let scrollPosRatio = 0;
-    /** The ratio of scroll of visible area to total area on a scale of 0 to 1: */
-    let visibleToTotalRatio = 0;
-
-    /** Keeps the thumb the right size and in the right position */
-    const updateThumb = () => {
-      if (contentEl && thumbEl && wrapperEl) {
-        // Update our cached values:
-        totalHeight = contentEl.scrollHeight;
-        visibleHeight = contentEl.clientHeight;
-        scrollPos = contentEl.scrollTop;
-        // Update calculated values:
-        scrollPosRatio = scrollPos / totalHeight;
-        visibleToTotalRatio = visibleHeight / totalHeight;
-
-        if (visibleToTotalRatio >= 1) {
-          // We're at 100% visible area, no need to show the scroll thumb:
-          thumbEl.style.height = "0px";
-        } else {
-          // Set the thumb top to the scroll percent:
-          thumbEl.style.top = scrollPosRatio * 100 + "%";
-          // Set the thumb size based on the scroll ratio:
-          thumbEl.style.height = Math.max(visibleToTotalRatio * 100, 10) + "%";
-        }
-      }
-
-      // Keep the updates coming:
-      frameUpdateRef.current = requestAnimationFrame(updateThumb);
-    };
-
-    /** Caches a starting mouse position, wires up listeners for drag */
-    const onDragStart = (e: MouseEvent) => {
-      if (contentEl && thumbEl && wrapperEl) {
-        // Prevent default text selection
-        e.preventDefault();
-        // Grab the starting mouse pos:
-        lastDragPos.current = { x: e.clientX, y: e.clientY };
-        // Add the dragging class to keep the thumb visible
-        wrapperEl.classList.add("is-dragging");
-        // Add event listeners for drag and end:
-        window.addEventListener("mousemove", onDragMove);
-        window.addEventListener("mouseup", onDragEnd);
-        // Remember current body style so overrides can be restored later
-        originalBodyPointerEvents.current = document.body.style.pointerEvents;
-        // Disable pointer events so element hovers aren't visible while dragging
-        document.body.style.pointerEvents = "none";
-      }
-    };
-
-    /** Calculates the mouse move to scroll amount and applies it */
-    const onDragMove = (e: MouseEvent) => {
-      if (contentEl && thumbEl && wrapperEl) {
-        // How much did we move?
-        const delta: Vector = {
-          dx: lastDragPos.current.x - e.clientX,
-          dy: lastDragPos.current.y - e.clientY,
-        };
-        // Cache the new mouse position:
-        lastDragPos.current = { x: e.clientX, y: e.clientY };
-
-        // Update the scroll position of the content, amplifying the mouse movement by the amount of content hidden:
-        contentEl.scrollTop -= Math.round(delta.dy / visibleToTotalRatio);
-      }
-    };
-
-    /** Unwires the mouse listeners and pops the dragging class off the wrapper */
-    const onDragEnd = () => {
-      if (contentEl && thumbEl && wrapperEl) {
-        // Add the dragging class to keep the thumb visible
-        wrapperEl.classList.remove("is-dragging");
-        // Get rid of our drag move and end event listeners:
-        window.removeEventListener("mousemove", onDragMove);
-        window.removeEventListener("mouseup", onDragEnd);
-        // Restore body pointer events style
-        document.body.style.pointerEvents = originalBodyPointerEvents.current;
-      }
-    };
-
-    // Listen for mousedown on the thumb:
-    thumbRef.current?.addEventListener("mousedown", onDragStart);
-
-    // Start updates every frame:
-    frameUpdateRef.current = requestAnimationFrame(updateThumb);
-
-    // Cancel the requestAnimationFrame and unbind potential listeners before leaving
-    return () => {
-      cancelAnimationFrame(frameUpdateRef.current);
-      thumbEl?.removeEventListener("mousedown", onDragStart);
-      window.removeEventListener("mousemove", onDragMove);
-      window.removeEventListener("mouseup", onDragEnd);
-    };
-  }, []);
-
-  return (
-    <Flex
-      ref={wrapperRef}
-      css={{
-        display: "flex",
-        flex: 1,
-        flexDirection: "column",
-        minHeight: 0,
-        maxHeight: "100%",
-        position: "relative",
-        // This bit shows the thumb when you hover the wrapper
-        "&:hover": {
-          "[data-scroll-thumb]": {
-            opacity: 1,
-          },
-        },
-        "&.is-dragging": {
-          // Need to keep pointer events when scrolling so thumb isn't hidden immediately after scroll
-          pointerEvents: "auto",
-          // But still remove pointer events from content
-          "[data-scroll-content]": {
-            pointerEvents: "none",
-          },
-          // Need to always keep the thumb visible when scrolling, even if the mouse leaves the wrapper
-          "[data-scroll-thumb]": {
-            opacity: 1,
-          },
-        },
-      }}
-    >
-      {/* Lock the content into its own zIndex */}
-      <Box
-        data-scroll-content
-        ref={contentRef}
-        css={{
-          position: "relative",
-          overflow: "scroll",
-          scrollbarWidth: "none",
-          zIndex: 1,
-          "&::-webkit-scrollbar": { display: "none" },
-        }}
-        style={{
-          WebkitOverflowScrolling: "touch",
-        }}
-      >
-        {props.children}
-      </Box>
-      {/* Create the thumb on a higher zIndex */}
-      <Box
-        ref={thumbRef}
-        data-scroll-thumb
-        css={{
-          opacity: 0,
-          zIndex: 2,
-          position: "absolute",
-          top: 0,
-          right: 0,
-          width: "$spacing$5",
-          // Fill in the thumb color
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            top: "$spacing$2",
-            left: "$spacing$2",
-            width: "calc(100% - 4px)",
-            height: "calc(100% - 4px)",
-            // Match Radix hue on grays
-            backgroundColor: "hsla(206, 5%, 50%, 0.3)",
-            borderRadius: "9999px",
-          },
-        }}
-      />
-    </Flex>
-  );
-};
diff --git a/packages/design-system/src/components/search-field.tsx b/packages/design-system/src/components/search-field.tsx
index d9328686e6..c723bcbad6 100644
--- a/packages/design-system/src/components/search-field.tsx
+++ b/packages/design-system/src/components/search-field.tsx
@@ -11,7 +11,7 @@ import {
   MagnifyingGlassIcon,
 } from "@webstudio-is/icons";
 import { TextField } from "./text-field";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
+import { DeprecatedIconButton } from "./__DEPRECATED__/icon-button";
 import { styled } from "../stitches.config";
 
 const SearchIcon = styled(MagnifyingGlassIcon, {
@@ -19,7 +19,7 @@ const SearchIcon = styled(MagnifyingGlassIcon, {
   padding: "$spacing$3",
 });
 
-const AbortButton = styled(IconButtonDeprecated, {
+const AbortButton = styled(DeprecatedIconButton, {
   marginRight: "$spacing$3",
 });
 
diff --git a/packages/design-system/src/components/section.tsx b/packages/design-system/src/components/section.tsx
deleted file mode 100644
index e6a65a85e5..0000000000
--- a/packages/design-system/src/components/section.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Section = styled("section", {
-  // Reset
-  boxSizing: "border-box",
-  flexShrink: 0,
-  "&::before": {
-    boxSizing: "border-box",
-    content: '""',
-  },
-  "&::after": {
-    boxSizing: "border-box",
-    content: '""',
-  },
-
-  variants: {
-    size: {
-      "1": {
-        py: "$spacing$9",
-      },
-      "2": {
-        py: "$spacing$11",
-      },
-      "3": {
-        py: "$spacing$20",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "3",
-  },
-});
diff --git a/packages/design-system/src/components/sheet.tsx b/packages/design-system/src/components/sheet.tsx
deleted file mode 100644
index d7bef496f7..0000000000
--- a/packages/design-system/src/components/sheet.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import * as React from "react";
-import { styled, keyframes, VariantProps, CSS } from "../stitches.config";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { CrossIcon } from "@webstudio-is/icons";
-import { overlayStyles } from "./overlay";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
-
-const fadeIn = keyframes({
-  from: { opacity: "0" },
-  to: { opacity: "1" },
-});
-
-const fadeOut = keyframes({
-  from: { opacity: "1" },
-  to: { opacity: "0" },
-});
-
-const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
-  position: "fixed",
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-
-  '&[data-state="open"]': {
-    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-
-  '&[data-state="closed"]': {
-    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-});
-
-type SheetProps = React.ComponentProps<typeof DialogPrimitive.Root>;
-
-export const Sheet = ({ children, ...props }: SheetProps) => {
-  return (
-    <DialogPrimitive.Root {...props}>
-      <StyledOverlay />
-      {children}
-    </DialogPrimitive.Root>
-  );
-};
-
-const slideIn = keyframes({
-  from: { transform: "$transformValue" },
-  to: { transform: "translate3d(0,0,0)" },
-});
-
-const slideOut = keyframes({
-  from: { transform: "translate3d(0,0,0)" },
-  to: { transform: "$transformValue" },
-});
-
-const StyledContent = styled(DialogPrimitive.Content, {
-  backgroundColor: "$panel",
-  boxShadow:
-    "$colors$shadowLight 0 0 38px -10px, $colors$shadowDark 0 0 35px -15px",
-  position: "fixed",
-  top: 0,
-  bottom: 0,
-  width: 250,
-
-  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
-  // Affects animated and non-animated dialogs alike.
-  willChange: "transform",
-
-  // '&:focus': {
-  //   outline: 'none',
-  // },
-
-  '&[data-state="open"]': {
-    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-
-  '&[data-state="closed"]': {
-    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-
-  variants: {
-    side: {
-      top: {
-        $$transformValue: "translate3d(0,-100%,0)",
-        width: "100%",
-        height: 300,
-        bottom: "auto",
-      },
-      right: {
-        $$transformValue: "translate3d(100%,0,0)",
-        right: 0,
-      },
-      bottom: {
-        $$transformValue: "translate3d(0,100%,0)",
-        width: "100%",
-        height: 300,
-        bottom: 0,
-        top: "auto",
-      },
-      left: {
-        $$transformValue: "translate3d(-100%,0,0)",
-        left: 0,
-      },
-    },
-  },
-
-  defaultVariants: {
-    side: "right",
-  },
-});
-
-const StyledCloseButton = styled(DialogPrimitive.Close, {
-  position: "absolute",
-  top: "$spacing$5",
-  right: "$spacing$5",
-});
-
-type SheetContentVariants = VariantProps<typeof StyledContent>;
-type DialogContentPrimitiveProps = React.ComponentProps<
-  typeof DialogPrimitive.Content
->;
-type SheetContentProps = DialogContentPrimitiveProps &
-  SheetContentVariants & { css?: CSS };
-
-export const SheetContent = React.forwardRef<
-  React.ElementRef<typeof StyledContent>,
-  SheetContentProps
->(({ children, ...props }, forwardedRef) => (
-  <StyledContent {...props} ref={forwardedRef}>
-    {children}
-    <StyledCloseButton asChild>
-      <IconButtonDeprecated>
-        <CrossIcon />
-      </IconButtonDeprecated>
-    </StyledCloseButton>
-  </StyledContent>
-));
-SheetContent.displayName = "SheetContent";
-
-export const SheetTrigger = DialogPrimitive.Trigger;
-export const SheetClose = DialogPrimitive.Close;
-export const SheetTitle = DialogPrimitive.Title;
-export const SheetDescription = DialogPrimitive.Description;
diff --git a/packages/design-system/src/components/skeleton.tsx b/packages/design-system/src/components/skeleton.tsx
deleted file mode 100644
index e32b69ddd2..0000000000
--- a/packages/design-system/src/components/skeleton.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { styled, keyframes } from "../stitches.config";
-
-const pulse = keyframes({
-  "0%": { opacity: 0 },
-  "100%": { opacity: "100%" },
-});
-
-export const Skeleton = styled("div", {
-  backgroundColor: "$slate4",
-  position: "relative",
-  overflow: "hidden",
-
-  "&::after": {
-    animationName: `${pulse}`,
-    animationDuration: "500ms",
-    animationDirection: "alternate",
-    animationIterationCount: "infinite",
-    animationTimingFunction: "ease-in-out",
-    backgroundColor: "$slate6",
-    borderRadius: "inherit",
-    bottom: 0,
-    content: '""',
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0,
-  },
-
-  variants: {
-    variant: {
-      avatar1: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$9",
-        width: "$spacing$9",
-      },
-      avatar2: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$11",
-        width: "$spacing$11",
-      },
-      avatar3: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$13",
-        width: "$spacing$13",
-      },
-      avatar4: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$17",
-        width: "$spacing$17",
-      },
-      avatar5: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$19",
-        width: "$spacing$19",
-      },
-      avatar6: {
-        borderRadius: "$borderRadius$round",
-        height: "$spacing$20",
-        width: "$spacing$20",
-      },
-      text: {
-        height: "$spacing$3",
-      },
-      title: {
-        height: "$spacing$11",
-      },
-      heading: {
-        height: "$spacing$9",
-      },
-      button: {
-        borderRadius: "$borderRadius$4",
-        height: "$spacing$11",
-        width: "$spacing$19",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "text",
-  },
-});
diff --git a/packages/design-system/src/components/sub.tsx b/packages/design-system/src/components/sub.tsx
deleted file mode 100644
index eca3d2342a..0000000000
--- a/packages/design-system/src/components/sub.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Sub = styled("sub", {
-  fontFeatureSettings: '"subs"',
-  fontSize: "100%",
-  lineHeight: "1",
-  verticalAlign: "baseline",
-});
diff --git a/packages/design-system/src/components/sup.tsx b/packages/design-system/src/components/sup.tsx
deleted file mode 100644
index e3e0a7c8c2..0000000000
--- a/packages/design-system/src/components/sup.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Sup = styled("sup", {
-  fontFeatureSettings: '"sups"',
-  fontSize: "100%",
-  lineHeight: "1",
-  verticalAlign: "baseline",
-});
diff --git a/packages/design-system/src/components/tab-link.tsx b/packages/design-system/src/components/tab-link.tsx
deleted file mode 100644
index 8815cde8e7..0000000000
--- a/packages/design-system/src/components/tab-link.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const TabLink = styled("a", {
-  position: "relative",
-  flexShrink: 0,
-  height: "$spacing$13",
-  display: "inline-flex",
-  lineHeight: 1,
-  fontSize: "$fontSize$3",
-  px: "$spacing$9",
-  userSelect: "none",
-  outline: "none",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "$slate11",
-  textDecoration: "none",
-  "@hover": {
-    "&:hover": {
-      color: "$hiContrast",
-    },
-  },
-  "&:focus": {
-    boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
-  },
-
-  variants: {
-    active: {
-      true: {
-        color: "$hiContrast",
-        cursor: "default",
-        "&::after": {
-          position: "absolute",
-          content: '""',
-          left: 0,
-          bottom: 0,
-          width: "100%",
-          height: 2,
-          backgroundColor: "$blue9",
-        },
-      },
-    },
-  },
-});
diff --git a/packages/design-system/src/components/table.tsx b/packages/design-system/src/components/table.tsx
deleted file mode 100644
index d39dc349b8..0000000000
--- a/packages/design-system/src/components/table.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Caption = styled("caption", {
-  textAlign: "start",
-  marginBottom: "$spacing$11",
-});
-
-export const Tbody = styled("tbody", {
-  width: "100%",
-});
-
-export const Tfoot = styled("tfoot", {});
-
-export const Tr = styled("tr", {});
-
-export const Th = styled("th", {
-  fontWeight: "unset",
-  textAlign: "start",
-  fontSize: "$fontSize$3",
-  py: "$spacing$5",
-  borderBottom: "$spacing$1 solid $gray4",
-  variants: {
-    align: {
-      start: {
-        textAlign: "start",
-      },
-      center: {
-        textAlign: "center",
-      },
-      end: {
-        textAlign: "end",
-      },
-    },
-    border: {
-      solid: {
-        borderBottom: "$spacing$1 solid $gray4",
-      },
-      dashed: {
-        borderBottom: "$spacing$1 dashed $gray8",
-      },
-    },
-  },
-  defaultVariants: {
-    align: "start",
-    border: "solid",
-  },
-});
-
-export const Td = styled("td", {
-  py: "$spacing$5",
-  borderBottom: "$spacing$1 solid $gray4",
-  fontSize: "$fontSize$3",
-  variants: {
-    align: {
-      start: {
-        textAlign: "start",
-      },
-      center: {
-        textAlign: "center",
-      },
-      end: {
-        textAlign: "end",
-      },
-    },
-    border: {
-      solid: {
-        borderBottom: "$spacing$1 solid $gray4",
-      },
-      dashed: {
-        borderBottom: "$spacing$1 dashed $gray8",
-      },
-    },
-  },
-  defaultVariants: {
-    align: "start",
-    border: "solid",
-  },
-});
-
-export const Thead = styled("thead", {
-  [`& ${Th}`]: {
-    fontSize: "$fontSize$3",
-    color: "$gray11",
-  },
-  [`& ${Td}`]: {
-    fontSize: "$fontSize$3",
-    color: "$gray11",
-  },
-});
-
-export const Table = styled("table", {
-  width: "100%",
-  tableLayout: "fixed",
-  borderSpacing: 0,
-  variants: {
-    striped: {
-      true: {
-        [`& ${Tbody}`]: {
-          [`& ${Tr}`]: {
-            "&:nth-child(odd)": {
-              bc: "$gray2",
-            },
-          },
-        },
-      },
-    },
-  },
-});
diff --git a/packages/design-system/src/components/text-field.stories.tsx b/packages/design-system/src/components/text-field.stories.tsx
index 84b93f1e16..ed9ec5a10c 100644
--- a/packages/design-system/src/components/text-field.stories.tsx
+++ b/packages/design-system/src/components/text-field.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentStory } from "@storybook/react";
 import { RowGapIcon, ChevronDownIcon } from "@webstudio-is/icons";
 import { Button } from "./button";
 import { Flex } from "./flex";
-import { IconButtonDeprecated } from "./icon-button-deprecated";
+import { DeprecatedIconButton } from "./__DEPRECATED__/icon-button";
 import { TextField } from "./text-field";
 import { Box } from "./box";
 import { Grid } from "./grid";
@@ -64,27 +64,27 @@ export const PrefixSuffix: ComponentStory<typeof TextField> = () => {
       <TextField
         prefix={<RowGapIcon />}
         suffix={
-          <IconButtonDeprecated>
+          <DeprecatedIconButton>
             <ChevronDownIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         }
       />
       <TextField
         state="invalid"
         prefix={<RowGapIcon />}
         suffix={
-          <IconButtonDeprecated>
+          <DeprecatedIconButton>
             <ChevronDownIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         }
       />
       <TextField
         disabled
         prefix={<RowGapIcon />}
         suffix={
-          <IconButtonDeprecated>
+          <DeprecatedIconButton>
             <ChevronDownIcon />
-          </IconButtonDeprecated>
+          </DeprecatedIconButton>
         }
       />
     </Flex>
@@ -99,9 +99,9 @@ export const Layout: ComponentStory<typeof TextField> = () => {
           value="Long content comes here and it doesn't wrap"
           prefix={<RowGapIcon />}
           suffix={
-            <IconButtonDeprecated>
+            <DeprecatedIconButton>
               <ChevronDownIcon />
-            </IconButtonDeprecated>
+            </DeprecatedIconButton>
           }
           css={{
             flexGrow: 1,
@@ -211,9 +211,9 @@ export const ClickCapture: ComponentStory<typeof TextField> = (args) => {
         </Flex>
       }
       suffix={
-        <IconButtonDeprecated>
+        <DeprecatedIconButton>
           <ChevronDownIcon />
-        </IconButtonDeprecated>
+        </DeprecatedIconButton>
       }
       {...args}
     />
diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx
index 674aec8c7c..a79a27231e 100644
--- a/packages/design-system/src/components/toggle-group.tsx
+++ b/packages/design-system/src/components/toggle-group.tsx
@@ -1,7 +1,7 @@
 import { styled } from "../stitches.config";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
-export const ToggleGroupRoot = styled(ToggleGroupPrimitive.Root, {
+export const ToggleGroup = styled(ToggleGroupPrimitive.Root, {
   display: "inline-flex",
   borderRadius: "$spacing$3",
   boxShadow: `0 0 0 $spacing$1 $colors$slate7`,
diff --git a/packages/design-system/src/components/simple-toggle.tsx b/packages/design-system/src/components/toggle.tsx
similarity index 95%
rename from packages/design-system/src/components/simple-toggle.tsx
rename to packages/design-system/src/components/toggle.tsx
index da05dc8cd9..c931155263 100644
--- a/packages/design-system/src/components/simple-toggle.tsx
+++ b/packages/design-system/src/components/toggle.tsx
@@ -1,7 +1,7 @@
 import { styled } from "../stitches.config";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 
-export const SimpleToggle = styled(TogglePrimitive.Root, {
+export const Toggle = styled(TogglePrimitive.Root, {
   // Reset
   alignItems: "center",
   appearance: "none",
diff --git a/packages/design-system/src/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx
index cb2bffa78c..eb45ade568 100644
--- a/packages/design-system/src/components/tooltip.tsx
+++ b/packages/design-system/src/components/tooltip.tsx
@@ -40,50 +40,54 @@ const Arrow = styled(TooltipPrimitive.Arrow, {
   marginTop: -0.5,
 });
 
-export const Tooltip = React.forwardRef(function TooltipWrapper(
-  {
-    children,
-    content,
-    open,
-    defaultOpen,
-    onOpenChange,
-    multiline,
-    delayDuration,
-    disableHoverableContent,
-    ...props
-  }: TooltipProps,
-  ref: Ref<HTMLDivElement>
-) {
-  if (!content) {
-    return children;
+export const Tooltip = React.forwardRef(
+  (
+    {
+      children,
+      content,
+      open,
+      defaultOpen,
+      onOpenChange,
+      multiline,
+      delayDuration,
+      disableHoverableContent,
+      ...props
+    }: TooltipProps,
+    ref: Ref<HTMLDivElement>
+  ) => {
+    if (!content) {
+      return children;
+    }
+    return (
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+      >
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <Content
+            ref={ref}
+            side="top"
+            align="center"
+            sideOffset={5}
+            {...props}
+            multiline={multiline}
+          >
+            <Paragraph>{content}</Paragraph>
+            <Box css={{ color: "$transparentExtreme" }}>
+              <Arrow offset={5} width={11} height={5} />
+            </Box>
+          </Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    );
   }
-  return (
-    <TooltipPrimitive.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      delayDuration={delayDuration}
-      disableHoverableContent={disableHoverableContent}
-    >
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal>
-        <Content
-          ref={ref}
-          side="top"
-          align="center"
-          sideOffset={5}
-          {...props}
-          multiline={multiline}
-        >
-          <Paragraph>{content}</Paragraph>
-          <Box css={{ color: "$transparentExtreme" }}>
-            <Arrow offset={5} width={11} height={5} />
-          </Box>
-        </Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  );
-});
+);
+
+Tooltip.displayName = "Tooltip";
 
 export const InputErrorsTooltip = ({
   errors,
diff --git a/packages/design-system/src/components/verified-badge.tsx b/packages/design-system/src/components/verified-badge.tsx
deleted file mode 100644
index e7bb4fe841..0000000000
--- a/packages/design-system/src/components/verified-badge.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { styled, CSS } from "../stitches.config";
-import { Flex } from "../components/flex";
-import { CheckIcon } from "@webstudio-is/icons";
-
-const StyledVerifiedBadge = styled("div", Flex, {
-  alignItems: "center",
-  backgroundColor: "$blue9",
-  borderRadius: "$borderRadius$round",
-  color: "white",
-  flexShrink: 0,
-  justifyContent: "center",
-  width: "$spacing$9",
-  height: "$spacing$9",
-});
-
-type VerifiedBadgeProps = React.ComponentProps<typeof StyledVerifiedBadge> & {
-  css?: CSS;
-};
-
-export const VerifiedBadge = React.forwardRef<
-  React.ElementRef<typeof StyledVerifiedBadge>,
-  VerifiedBadgeProps
->((props, forwardedRef) => (
-  <StyledVerifiedBadge {...props} ref={forwardedRef}>
-    <CheckIcon />
-  </StyledVerifiedBadge>
-));
-
-VerifiedBadge.displayName = "VerifiedBadge";
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 4a8e3263a0..40e451c727 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -5,7 +5,6 @@ export * as Collapsible from "@radix-ui/react-collapsible";
 export { AccessibleIcon } from "@radix-ui/react-accessible-icon";
 export * as Portal from "@radix-ui/react-portal";
 export * from "@radix-ui/react-id";
-export { Container } from "./components/container";
 export { Label } from "./components/label";
 export * from "./components/toggle-group";
 export * from "./components/progress-radial";
@@ -14,7 +13,6 @@ export * from "./components/text-field";
 export * from "./components/text-area";
 export { SearchField } from "./components/search-field";
 export { Flex } from "./components/flex";
-export { Image } from "./components/image";
 export { Grid } from "./components/grid";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs";
 export {
@@ -24,16 +22,14 @@ export {
   SidebarTabsTrigger,
 } from "./components/sidebar-tabs";
 export { Card } from "./components/card";
-export { SimpleToggle } from "./components/simple-toggle";
-export { ScrollArea } from "./components/scrollbar";
+export { Toggle } from "./components/toggle";
 export { Tooltip, InputErrorsTooltip } from "./components/tooltip";
 export { Button } from "./components/button";
-export { IconButtonDeprecated } from "./components/icon-button-deprecated";
+export { DeprecatedIconButton } from "./components/__DEPRECATED__/icon-button";
 export { IconButton } from "./components/icon-button";
 export { Box } from "./components/box";
-export { ProgressBar } from "./components/progress-bar";
 export * from "./components/popover";
-export { Heading } from "./components/heading";
+export { DeprecatedHeading } from "./components/__DEPRECATED__/heading";
 export { MenuContent, MenuItem, Menu, MenuAnchor } from "./components/menu";
 export { Paragraph } from "./components/paragraph";
 export { Link } from "./components/link";
@@ -41,7 +37,6 @@ export { Panel } from "./components/panel";
 export * from "./components/dropdown-menu";
 export * from "./components/switch";
 export * from "./components/slider";
-export * from "./components/control-group";
 export * from "./components/radio";
 export * from "./components/combobox";
 export * from "./components/checkbox";
@@ -53,5 +48,4 @@ export * from "./components/separator";
 export * from "./components/tree";
 export * from "./components/__DEPRECATED__/text";
 export * from "./components/text";
-export * from "./components/dialog";
 export * from "./components/list";