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";