Merge branch 'main' into edge

apps/designer/.storybook/preview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { globalCss, darkTheme } from "../app/shared/design-system";
+import { globalCss, darkTheme } from "@webstudio-is/design-system";
 
 const globalStyles = globalCss({
   body: {

apps/designer/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { darkTheme, globalCss } from "~/shared/design-system";
+import { darkTheme, globalCss } from "@webstudio-is/design-system";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

apps/designer/app/auth/components/login-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Tooltip } from "~/shared/design-system";
+import { Button, Tooltip } from "@webstudio-is/design-system";
 import env from "~/shared/env";
 
 const isPreviewEnvironment = env.VERCEL_ENV === "preview";

apps/designer/app/auth/login.tsx

@@ -2,7 +2,13 @@ import { LinksFunction, MetaFunction } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
 import { useState } from "react";
 
-import { Card, Flex, Heading, Text, TextField } from "~/shared/design-system";
+import {
+  Card,
+  Flex,
+  Heading,
+  Text,
+  TextField,
+} from "@webstudio-is/design-system";
 import interStyles from "~/shared/font-faces/inter.css";
 
 import { GithubIcon, CommitIcon, GoogleIcon } from "@webstudio-is/icons";

apps/designer/app/canvas/features/wrapper-component/text-editor/example-text-editor.tsx

@@ -5,7 +5,7 @@ import {
   type Instance,
 } from "@webstudio-is/react-sdk";
 import { createInstance } from "~/shared/tree-utils";
-import { Box, Button } from "~/shared/design-system";
+import { Box, Button } from "@webstudio-is/design-system";
 import { LexicalComposer, ContentEditable } from "./lexical";
 import { TreeViewPlugin } from "./plugins/tree-view-plugin";
 import { config } from "./config";

apps/designer/app/critical-css.ts

@@ -2,7 +2,7 @@ import {
   insertCriticalCss as insert,
   getCssText as getCanvasCssText,
 } from "@webstudio-is/react-sdk";
-import { getCssText as getDesignerCssText } from "~/shared/design-system";
+import { getCssText as getDesignerCssText } from "@webstudio-is/design-system";
 import config from "./config";
 
 const getCssTextFunctions = {

apps/designer/app/dashboard/components/card.tsx

@@ -10,7 +10,7 @@ import {
   Button,
   Heading,
   Text,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 
 type SelectProjectProjectCardProps = {
   projects: Array<{ id: string; title: string }>;

apps/designer/app/dashboard/components/header.tsx

@@ -1,5 +1,5 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Avatar } from "~/shared/design-system/components/avatar";
+import { ChevronDownIcon } from "@webstudio-is/icons";
+import { Avatar } from "@webstudio-is/design-system";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -8,7 +8,7 @@ import {
   Button,
   Text,
   Flex,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { User } from "@webstudio-is/prisma-client";
 import { useNavigate } from "react-router-dom";
 

apps/designer/app/dashboard/dashboard.tsx

@@ -1,6 +1,6 @@
 import { useActionData } from "@remix-run/react";
 
-import { Flex } from "~/shared/design-system";
+import { Flex } from "@webstudio-is/design-system";
 import interStyles from "~/shared/font-faces/inter.css";
 import dashboardStyles from "./dashboard.css";
 import { User } from "@webstudio-is/prisma-client";

apps/designer/app/designer/designer.tsx

@@ -8,7 +8,7 @@ import type {
   HoveredInstanceData,
   SelectedInstanceData,
 } from "~/shared/canvas-components";
-import { Box, Flex, Grid, type CSS } from "~/shared/design-system";
+import { Box, Flex, Grid, type CSS } from "@webstudio-is/design-system";
 import interStyles from "~/shared/font-faces/inter.css";
 import { SidebarLeft } from "./features/sidebar-left";
 import { Inspector } from "./features/inspector";

apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@webstudio-is/icons";
-import { Button, Flex, Text, darkTheme } from "~/shared/design-system";
+import { Button, Flex, Text, darkTheme } from "@webstudio-is/design-system";
 import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path";
 import { type Publish, type Instance } from "@webstudio-is/react-sdk";
 import { useSelectedInstanceData } from "~/designer/shared/nano-states";

apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import useDebounce from "react-use/lib/useDebounce";
 import { type Breakpoint, type Publish } from "@webstudio-is/react-sdk";
-import { Button, TextField, Flex, Text } from "~/shared/design-system";
+import { Button, TextField, Flex, Text } from "@webstudio-is/design-system";
 import { PlusIcon, TrashIcon } from "@webstudio-is/icons";
 import ObjectId from "bson-objectid";
 import { useBreakpoints } from "~/shared/nano-states";

apps/designer/app/designer/features/breakpoints/breakpoints.tsx

@@ -14,7 +14,7 @@ import {
   DropdownMenuCheckboxItem,
   Text,
   Flex,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { sort } from "~/shared/breakpoints";
 import { useSelectedBreakpoint } from "../../shared/nano-states";
 import { BreakpointsEditor } from "./breakpoints-editor";

apps/designer/app/designer/features/breakpoints/confirmation-dialog.tsx

@@ -1,5 +1,5 @@
 import { type Breakpoint } from "@webstudio-is/react-sdk";
-import { Button, Flex, Text } from "~/shared/design-system";
+import { Button, Flex, Text } from "@webstudio-is/design-system";
 
 type ConfirmationDialogProps = {
   onAbort: () => void;

apps/designer/app/designer/features/breakpoints/preview.tsx

@@ -1,5 +1,5 @@
 import { type Breakpoint } from "@webstudio-is/react-sdk";
-import { Paragraph, Flex, Text } from "~/shared/design-system";
+import { Paragraph, Flex, Text } from "@webstudio-is/design-system";
 
 type PreviewProps = {
   breakpoint?: Breakpoint;

apps/designer/app/designer/features/breakpoints/trigger-button.tsx

@@ -6,7 +6,7 @@ import {
   useSelectedBreakpoint,
 } from "~/designer/shared/nano-states";
 import { willRender } from "~/designer/shared/breakpoints";
-import { Button, Text } from "~/shared/design-system";
+import { Button, Text } from "@webstudio-is/design-system";
 import {
   DesktopIcon,
   LaptopIcon,

apps/designer/app/designer/features/breakpoints/width-setting.tsx

@@ -3,7 +3,7 @@ import {
   useCanvasWidth,
   useSelectedBreakpoint,
 } from "~/designer/shared/nano-states";
-import { Slider, Text, Flex } from "~/shared/design-system";
+import { Slider, Text, Flex } from "@webstudio-is/design-system";
 import { sort } from "~/shared/breakpoints";
 import { useBreakpoints, useIsPreviewMode } from "~/shared/nano-states";
 

apps/designer/app/designer/features/breakpoints/zoom-setting.tsx

@@ -1,5 +1,5 @@
 import { useZoom } from "~/designer/shared/nano-states";
-import { Slider, Text, Flex } from "~/shared/design-system";
+import { Slider, Text, Flex } from "@webstudio-is/design-system";
 
 export const minZoom = 10;
 

apps/designer/app/designer/features/inspector/inspector.tsx

@@ -8,7 +8,7 @@ import {
   Card,
   Paragraph,
   Box,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { StylePanel } from "~/designer/features/style-panel";
 import { PropsPanel } from "~/designer/features/props-panel";
 import { useSelectedInstanceData } from "~/designer/shared/nano-states";

apps/designer/app/designer/features/props-panel/control.tsx

@@ -10,8 +10,8 @@ import {
   Switch,
   Text,
   TextField,
-} from "~/shared/design-system";
-import { Checkbox } from "~/shared/design-system/components/checkbox";
+} from "@webstudio-is/design-system";
+import { Checkbox } from "@webstudio-is/design-system";
 
 type BaseControlProps<T = UserProp["value"]> = {
   value?: T;

apps/designer/app/designer/features/props-panel/props-panel.tsx

@@ -15,7 +15,7 @@ import {
   ComboboxPopperContent,
   Grid,
   Tooltip,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import {
   PlusIcon,
   TrashIcon,

apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx

@@ -1,5 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { Flex, Grid, Heading } from "~/shared/design-system";
+import { Flex, Grid, Heading } from "@webstudio-is/design-system";
 import { useEffect, useState } from "react";
 import { useActionData } from "@remix-run/react";
 import { Asset } from "@webstudio-is/prisma-client";

apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx

@@ -2,7 +2,7 @@ import { Form, useSubmit } from "@remix-run/react";
 import { Asset } from "@webstudio-is/prisma-client";
 import ObjectID from "bson-objectid";
 import { ChangeEvent, useRef } from "react";
-import { Button } from "~/shared/design-system";
+import { Button } from "@webstudio-is/design-system";
 import { UploadingAsset } from "../../types";
 
 const readImages = async (fileList: FileList) => {

apps/designer/app/designer/features/sidebar-left/panels/components/component-thumb.tsx

@@ -1,6 +1,6 @@
 import { type Instance, components } from "@webstudio-is/react-sdk";
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
-import { Flex, Text, styled } from "~/shared/design-system";
+import { Flex, Text, styled } from "@webstudio-is/design-system";
 
 const Thumb = styled(Flex, {
   px: 5,

apps/designer/app/designer/features/sidebar-left/panels/components/components.tsx

@@ -6,7 +6,7 @@ import {
   type Publish,
   components,
 } from "@webstudio-is/react-sdk";
-import { Flex } from "~/shared/design-system";
+import { Flex } from "@webstudio-is/design-system";
 import { PlusIcon } from "@webstudio-is/icons";
 import { type DragData } from "~/shared/canvas-components";
 import { createInstance } from "~/shared/tree-utils";

apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Box, ProgressBar } from "~/shared/design-system";
+import { Box, ProgressBar } from "@webstudio-is/design-system";
 import { useInterval } from "react-use";
 import placeholderImage from "~/shared/images/image-placeholder.svg";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";

apps/designer/app/designer/features/sidebar-left/panels/tree.tsx

@@ -1,6 +1,6 @@
 import { type Instance, type Publish } from "@webstudio-is/react-sdk";
 import { ListNestedIcon } from "@webstudio-is/icons";
-import { Flex } from "~/shared/design-system";
+import { Flex } from "@webstudio-is/design-system";
 import { type SelectedInstanceData } from "~/shared/canvas-components";
 import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path";
 import { Tree } from "~/designer/shared/tree";

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -7,7 +7,7 @@ import {
   SidebarTabsContent,
   SidebarTabsList,
   SidebarTabsTrigger,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { useSelectedInstanceData } from "../../shared/nano-states";
 import { panels } from "./panels";
 import type { TabName } from "./types";

apps/designer/app/designer/features/style-panel/lib/color-picker.tsx

@@ -7,7 +7,7 @@ import {
   PopoverTrigger,
   PopoverContent,
   TextField,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 
 const stringifyRGBA = (color: RGBColor) => {
   const { r, g, b, a = 1 } = color;

apps/designer/app/designer/features/style-panel/lib/spacing-widget.tsx

@@ -4,7 +4,7 @@ import {
   type StyleProperty,
   type StyleValue,
 } from "@webstudio-is/react-sdk";
-import { Box } from "~/shared/design-system";
+import { Box } from "@webstudio-is/design-system";
 import { SetProperty } from "../use-style-data";
 import { useIsFromCurrentBreakpoint } from "./utils/use-is-from-current-breakpoint";
 import { propertyNameColorForSelectedBreakpoint } from "./constants";

apps/designer/app/designer/features/style-panel/render-property.tsx

@@ -6,7 +6,7 @@ import {
   Combobox,
   ComboboxTextField,
   ComboboxPopperContent,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import type { StyleConfig } from "~/shared/style-panel-configs";
 import {
   categories,

apps/designer/app/designer/features/style-panel/search.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { css, IconButton, TextField } from "~/shared/design-system";
+import { css, IconButton, TextField } from "@webstudio-is/design-system";
 import { Cross1Icon } from "@webstudio-is/icons";
 
 const formStyle = css({

apps/designer/app/designer/features/style-panel/settings.tsx

@@ -6,7 +6,7 @@ import {
   type Category,
   type Style,
 } from "@webstudio-is/react-sdk";
-import { Flex, Collapsible, Button } from "~/shared/design-system";
+import { Flex, Collapsible, Button } from "@webstudio-is/design-system";
 import { TriangleRightIcon, TriangleDownIcon } from "@webstudio-is/icons";
 import { styleConfigs, type StyleConfig } from "~/shared/style-panel-configs";
 import { CollapsibleSection } from "~/designer/shared/inspector";

apps/designer/app/designer/features/style-panel/style-panel.tsx

@@ -1,6 +1,6 @@
 import type { Publish } from "@webstudio-is/react-sdk";
 import { willRender } from "~/designer/shared/breakpoints";
-import { Box, Card, Paragraph } from "~/shared/design-system";
+import { Box, Card, Paragraph } from "@webstudio-is/design-system";
 import type { SelectedInstanceData } from "~/shared/canvas-components";
 import { useStyleData } from "./use-style-data";
 import { VisualSettings } from "./settings";

apps/designer/app/designer/features/topbar/menu/menu.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuSeparator,
   IconButton,
   Box,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { HamburgerMenuIcon, ChevronRightIcon } from "@webstudio-is/icons";
 import type { Config } from "~/config";
 import { ShortcutHint } from "./shortcut-hint";

apps/designer/app/designer/features/topbar/menu/shortcut-hint.tsx

@@ -1,4 +1,4 @@
-import { Text } from "~/shared/design-system";
+import { Text } from "@webstudio-is/design-system";
 
 const isMac =
   typeof navigator === "object" ? /mac/i.test(navigator.platform) : false;

apps/designer/app/designer/features/topbar/preview.tsx

@@ -1,6 +1,6 @@
 import { useSubscribe, type Publish } from "@webstudio-is/react-sdk";
 import { EyeOpenIcon } from "@webstudio-is/icons";
-import { SimpleToggle } from "~/shared/design-system";
+import { SimpleToggle } from "@webstudio-is/design-system";
 import { useIsPreviewMode } from "~/shared/nano-states";
 
 type PreviewButtonProps = {

apps/designer/app/designer/features/topbar/publish.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { useFetcher } from "@remix-run/react";
-import { useId } from "@radix-ui/react-id";
 import { RocketIcon, ExternalLinkIcon } from "@webstudio-is/icons";
 import { type Project } from "@webstudio-is/prisma-client";
 import {
@@ -13,7 +12,8 @@ import {
   Text,
   Label,
   Link,
-} from "~/shared/design-system";
+  useId,
+} from "@webstudio-is/design-system";
 import { useIsPublishDialogOpen } from "../../shared/nano-states";
 import env from "~/shared/env";
 

apps/designer/app/designer/features/topbar/share.tsx

@@ -6,7 +6,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   TextField,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { Share1Icon } from "@webstudio-is/icons";
 import { type Project } from "@webstudio-is/prisma-client";
 import { useIsShareDialogOpen } from "../../shared/nano-states";

apps/designer/app/designer/features/topbar/sync-status.tsx

@@ -4,7 +4,7 @@ import {
   AccessibleIcon,
   styled,
   Box,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { CheckIcon, DotsHorizontalIcon } from "@webstudio-is/icons";
 import { useSyncStatus } from "../../shared/nano-states";
 

apps/designer/app/designer/features/topbar/topbar.tsx

@@ -1,6 +1,6 @@
 import type { Publish } from "@webstudio-is/react-sdk";
 import type { Project } from "@webstudio-is/prisma-client";
-import { darkTheme, Flex, type CSS } from "~/shared/design-system";
+import { darkTheme, Flex, type CSS } from "@webstudio-is/design-system";
 import type { Config } from "~/config";
 import { PreviewButton } from "./preview";
 import { ShareButton } from "./share";

apps/designer/app/designer/features/tree-preview/tree-preview.tsx

@@ -3,7 +3,7 @@ import produce from "immer";
 import { useState } from "react";
 import { Tree } from "~/designer/shared/tree";
 import { type DragData, type DropData } from "~/shared/canvas-components";
-import { Flex } from "~/shared/design-system";
+import { Flex } from "@webstudio-is/design-system";
 import { useRootInstance } from "~/shared/nano-states";
 import {
   findInstanceById,

apps/designer/app/designer/features/workspace/canvas-iframe.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { CSS, css } from "~/shared/design-system";
+import { CSS, css } from "@webstudio-is/design-system";
 
 const iframeStyle = css({
   border: "none",

apps/designer/app/designer/features/workspace/canvas-tools/canvas-tools.tsx

@@ -1,5 +1,5 @@
 import { type Publish } from "@webstudio-is/react-sdk";
-import { Box } from "~/shared/design-system";
+import { Box } from "@webstudio-is/design-system";
 import {
   useIsPreviewMode,
   useIsScrolling,

apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { styled } from "~/shared/design-system";
+import { styled } from "@webstudio-is/design-system";
 import { type Instance, components } from "@webstudio-is/react-sdk";
 
 type LabelPosition = "top" | "inside" | "bottom";

apps/designer/app/designer/features/workspace/canvas-tools/outline/outline.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { styled } from "~/shared/design-system";
+import { styled } from "@webstudio-is/design-system";
 
 const OutlineContainer = styled("div", {
   position: "absolute",

apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx

@@ -4,7 +4,7 @@ import {
   useSelectedInstanceData,
   useSelectionRect,
 } from "~/designer/shared/nano-states";
-import { ToggleGroup, type CSS } from "~/shared/design-system";
+import { ToggleGroup, type CSS } from "@webstudio-is/design-system";
 import { FontBoldIcon, FontItalicIcon, Link2Icon } from "@webstudio-is/icons";
 import { createInstance } from "~/shared/tree-utils";
 

apps/designer/app/designer/features/workspace/workspace.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from "~/shared/design-system";
+import { Box, Flex } from "@webstudio-is/design-system";
 import { useCanvasWidth, useZoom } from "~/designer/shared/nano-states";
 import { CanvasTools } from "./canvas-tools";
 import { type Publish } from "@webstudio-is/react-sdk";

apps/designer/app/designer/shared/inspector/collapsible-section.tsx

@@ -1,5 +1,5 @@
 import { createValueContainer, useValue } from "react-nano-state";
-import { Box, Flex, Text, Collapsible } from "~/shared/design-system";
+import { Box, Flex, Text, Collapsible } from "@webstudio-is/design-system";
 import { ChevronDownIcon, ChevronRightIcon } from "@webstudio-is/icons";
 
 type CollapsibleSectionProps = {

apps/designer/app/designer/shared/inspector/component-info.tsx

@@ -1,5 +1,5 @@
 import { components } from "@webstudio-is/react-sdk";
-import { Flex, Text } from "~/shared/design-system";
+import { Flex, Text } from "@webstudio-is/design-system";
 import type { SelectedInstanceData } from "~/shared/canvas-components";
 
 export const ComponentInfo = ({

apps/designer/app/designer/shared/tree/tree.tsx

@@ -7,7 +7,7 @@ import {
   Button,
   keyframes,
   styled,
-} from "~/shared/design-system";
+} from "@webstudio-is/design-system";
 import { TriangleRightIcon, TriangleDownIcon } from "@webstudio-is/icons";
 import noop from "lodash.noop";
 

apps/designer/app/shared/theme/theme.ts

@@ -1,5 +1,5 @@
 import { useLoaderData } from "@remix-run/react";
-import { darkTheme } from "~/shared/design-system";
+import { darkTheme } from "@webstudio-is/design-system";
 import type { ColorScheme, ThemeSetting } from "./types";
 
 // User selected theme setting.

apps/designer/package.json

@@ -17,34 +17,6 @@
   },
   "dependencies": {
     "@lexical/react": "^0.3.5",
-    "@radix-ui/colors": "^0.1.8",
-    "@radix-ui/react-accessible-icon": "^0.1.4",
-    "@radix-ui/react-accordion": "^0.1.6",
-    "@radix-ui/react-alert-dialog": "^0.1.7",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-checkbox": "^0.1.5",
-    "@radix-ui/react-collapsible": "^0.1.6",
-    "@radix-ui/react-context-menu": "^0.1.6",
-    "@radix-ui/react-dialog": "^0.1.7",
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
-    "@radix-ui/react-icons": "^1.1.0",
-    "@radix-ui/react-id": "^0.1.5",
-    "@radix-ui/react-label": "^0.1.5",
-    "@radix-ui/react-menu": "^0.1.6",
-    "@radix-ui/react-popover": "^0.1.6",
-    "@radix-ui/react-popper": "^1.0.0",
-    "@radix-ui/react-portal": "^0.1.4",
-    "@radix-ui/react-progress": "^0.1.4",
-    "@radix-ui/react-radio-group": "^0.1.5",
-    "@radix-ui/react-select": "^0.1.1",
-    "@radix-ui/react-separator": "^0.1.4",
-    "@radix-ui/react-slider": "^0.1.4",
-    "@radix-ui/react-switch": "^0.1.5",
-    "@radix-ui/react-tabs": "^0.1.5",
-    "@radix-ui/react-toggle": "^0.1.4",
-    "@radix-ui/react-toggle-group": "^0.1.5",
-    "@radix-ui/react-tooltip": "^0.1.7",
-    "@radix-ui/react-use-layout-effect": "^0.1.0",
     "@react-aria/utils": "^3.13.1",
     "@remix-run/node": "^1.6.4",
     "@remix-run/react": "^1.6.4",
@@ -56,6 +28,8 @@
     "@webstudio-is/asset-uploader": "*",
     "@webstudio-is/react-sdk": "*",
     "@webstudio-is/prisma-client": "*",
+    "@webstudio-is/design-system": "*",
+    "@webstudio-is/icons": "*",
     "bson-objectid": "^2.0.2",
     "camelcase": "^6.3.0",
     "debug": "^4.3.4",

packages/asset-uploader/package.json

@@ -7,9 +7,10 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest",
-    "checks": "yarn typecheck && yarn test",
+    "checks": "yarn typecheck && yarn lint && yarn test",
     "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
-    "build": "rm -fr lib && tsc"
+    "build": "rm -fr lib && tsc",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.131.0",

packages/design-system/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Webstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/design-system/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@webstudio-is/design-system",
+  "version": "0.1.0",
+  "description": "Webstudio Design System",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "scripts": {
+    "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
+    "build": "rm -fr lib && tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "checks": "yarn typecheck && yarn lint"
+  },
+  "devDependencies": {
+    "tsup": "^6.1.3",
+    "typescript": "^4.6.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "@radix-ui/colors": "^0.1.8",
+    "@radix-ui/react-accessible-icon": "^0.1.4",
+    "@radix-ui/react-accordion": "^0.1.6",
+    "@radix-ui/react-alert-dialog": "^0.1.7",
+    "@radix-ui/react-avatar": "^0.1.4",
+    "@radix-ui/react-checkbox": "^0.1.5",
+    "@radix-ui/react-collapsible": "^0.1.6",
+    "@radix-ui/react-context-menu": "^0.1.6",
+    "@radix-ui/react-dialog": "^0.1.7",
+    "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "@radix-ui/react-id": "^0.1.5",
+    "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-menu": "^0.1.6",
+    "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-popper": "^1.0.0",
+    "@radix-ui/react-portal": "^0.1.4",
+    "@radix-ui/react-progress": "^0.1.4",
+    "@radix-ui/react-radio-group": "^0.1.5",
+    "@radix-ui/react-select": "^0.1.1",
+    "@radix-ui/react-separator": "^0.1.4",
+    "@radix-ui/react-slider": "^0.1.4",
+    "@radix-ui/react-switch": "^0.1.5",
+    "@radix-ui/react-tabs": "^0.1.5",
+    "@radix-ui/react-toggle": "^0.1.4",
+    "@radix-ui/react-toggle-group": "^0.1.5",
+    "@radix-ui/react-tooltip": "^0.1.7",
+    "@radix-ui/react-use-layout-effect": "^0.1.0",
+    "@webstudio-is/icons": "*"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/*",
+    "README.md",
+    "!*.test.*"
+  ],
+  "license": "MIT",
+  "private": false
+}