Remove unused components, deprecate components consistently (#683)

## Description

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

## Code Review

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

## Before requesting a review

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

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory

apps/designer/app/auth/login.tsx

@@ -4,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">

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}

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>

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

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} />}

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>
             )}
           </>

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>
   );
 };
 

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

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

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>

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>

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>
   );
 };

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} />

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

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

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

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

packages/design-system/src/components/accordion.tsx

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

packages/design-system/src/components/alert-dialog.tsx

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

packages/design-system/src/components/alert.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/app-bar.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/badge.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/banner.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/code.tsx

@@ -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",
-  },
-});

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>

packages/design-system/src/components/container.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/context-menu.tsx

@@ -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, {});

packages/design-system/src/components/control-group.tsx

@@ -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",
-      },
-    },
-  },
-});

packages/design-system/src/components/dialog.tsx

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

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>

packages/design-system/src/components/image.tsx

@@ -1,7 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Image = styled("img", {
-  // Reset
-  verticalAlign: "middle",
-  maxWidth: "100%",
-});

packages/design-system/src/components/kbd.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/overlay.tsx

@@ -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);

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 />

packages/design-system/src/components/progress-bar.tsx

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

packages/design-system/src/components/radio-card.tsx

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

packages/design-system/src/components/radio-grid.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/scrollbar.tsx

@@ -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>
-  );
-};

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",
 });
 

packages/design-system/src/components/section.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/sheet.tsx

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

packages/design-system/src/components/skeleton.tsx

@@ -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",
-  },
-});

packages/design-system/src/components/sub.tsx

@@ -1,8 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Sub = styled("sub", {
-  fontFeatureSettings: '"subs"',
-  fontSize: "100%",
-  lineHeight: "1",
-  verticalAlign: "baseline",
-});

packages/design-system/src/components/sup.tsx

@@ -1,8 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Sup = styled("sup", {
-  fontFeatureSettings: '"sups"',
-  fontSize: "100%",
-  lineHeight: "1",
-  verticalAlign: "baseline",
-});

packages/design-system/src/components/tab-link.tsx

@@ -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",
-        },
-      },
-    },
-  },
-});

packages/design-system/src/components/table.tsx

@@ -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",
-            },
-          },
-        },
-      },
-    },
-  },
-});

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}
     />

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`,

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

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,

packages/design-system/src/components/verified-badge.tsx

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

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