@webstudio-is/react-sdk 0.51.0 → 0.53.0

package/lib/components/blockquote.ws.js

@@ -1,41 +1,63 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
-  margin: {
-    type: "keyword",
-    value: "0"
-  },
-  marginBottom: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingTop: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingBottom: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "20px"
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "20px"
-  },
-  borderLeftWidth: {
-    type: "keyword",
-    value: "5px"
-  },
-  borderLeftStyle: {
-    type: "keyword",
-    value: "solid"
-  },
-  borderLeftColor: {
-    type: "keyword",
-    value: "#e2e2e2"
+  blockquote: {
+    marginTop: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    marginRight: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    marginBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    marginLeft: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    paddingTop: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    paddingBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    paddingLeft: {
+      type: "unit",
+      value: 20,
+      unit: "px"
+    },
+    paddingRight: {
+      type: "unit",
+      value: 20,
+      unit: "px"
+    },
+    borderLeftWidth: {
+      type: "unit",
+      value: 5,
+      unit: "px"
+    },
+    borderLeftStyle: {
+      type: "keyword",
+      value: "solid"
+    },
+    borderLeftColor: {
+      type: "rgb",
+      r: 226,
+      g: 226,
+      b: 226,
+      alpha: 1
+    }
   }
 };
 const meta = {

package/lib/components/body.js

@@ -4,5 +4,6 @@ const defaultTag = "body";
 const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", { ...props, ref }));
 Body.displayName = "Body";
 export {
-  Body
+  Body,
+  defaultTag
 };

package/lib/components/body.ws.js

@@ -1,52 +1,36 @@
 import { BodyIcon } from "@webstudio-is/icons";
+import { body } from "../css/normalize";
 import { props } from "./__generated__/body.props";
 const presetStyle = {
-  marginTop: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginRight: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginBottom: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginLeft: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  minHeight: {
-    type: "unit",
-    unit: "%",
-    value: 100
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "white"
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "Arial"
-  },
-  fontSize: {
-    type: "unit",
-    unit: "px",
-    value: 14
-  },
-  lineHeight: {
-    type: "unit",
-    unit: "number",
-    value: 1.5
-  },
-  color: {
-    type: "keyword",
-    value: "#232323"
+  body: {
+    ...body,
+    minHeight: {
+      type: "unit",
+      unit: "%",
+      value: 100
+    },
+    backgroundColor: {
+      type: "keyword",
+      value: "white"
+    },
+    fontFamily: {
+      type: "keyword",
+      value: "Arial"
+    },
+    fontSize: {
+      type: "unit",
+      unit: "px",
+      value: 14
+    },
+    lineHeight: {
+      type: "unit",
+      unit: "number",
+      value: 1.5
+    },
+    color: {
+      type: "keyword",
+      value: "#232323"
+    }
   }
 };
 const meta = {

package/lib/components/bold.js

@@ -4,5 +4,6 @@ const defaultTag = "b";
 const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", { ...props, ref }));
 Bold.displayName = "Bold";
 export {
-  Bold
+  Bold,
+  defaultTag
 };

package/lib/components/bold.ws.js

@@ -1,9 +1,14 @@
-import { FontBoldIcon } from "@webstudio-is/icons";
+import { BoldIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/bold.props";
+import { b } from "../css/normalize";
+const presetStyle = {
+  b
+};
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: FontBoldIcon
+  Icon: BoldIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/box.ws.js

@@ -1,10 +1,28 @@
 import { BoxIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/box.props";
+import {
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section
+} from "../css/normalize";
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  }
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section
 };
 const meta = {
   category: "general",

package/lib/components/button.js

@@ -11,5 +11,6 @@ const Button = forwardRef(
 );
 Button.displayName = "Button";
 export {
-  Button
+  Button,
+  defaultTag
 };

package/lib/components/button.ws.js

@@ -1,10 +1,15 @@
-import { ButtonIcon } from "@webstudio-is/icons";
+import { ButtonElementIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/button.props";
+import { button } from "../css/normalize";
+const presetStyle = {
+  button
+};
 const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: ButtonIcon
+  Icon: ButtonElementIcon,
+  presetStyle
 };
 const propsMeta = {
   props,

package/lib/components/code.js

@@ -17,5 +17,6 @@ const Code = forwardRef(
 Code.displayName = "Code";
 export {
   Code,
+  defaultTag,
   displayVarNamespace
 };

package/lib/components/code.ws.js

@@ -1,32 +1,38 @@
 import { CodeIcon } from "@webstudio-is/icons";
 import { displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
+import { code } from "../css/normalize";
+const display = {
+  type: "var",
+  value: displayVarNamespace,
+  fallbacks: [
+    {
+      type: "keyword",
+      value: "inline-block"
+    }
+  ]
+};
 const presetStyle = {
-  display: {
-    type: "var",
-    value: displayVarNamespace,
-    fallbacks: [
-      {
-        type: "keyword",
-        value: "inline-block"
-      }
-    ]
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "0.2em"
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "0.2em"
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "#eee"
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "monospace"
+  code: {
+    ...code,
+    display,
+    paddingLeft: {
+      type: "unit",
+      value: 0.2,
+      unit: "em"
+    },
+    paddingRight: {
+      type: "unit",
+      value: 0.2,
+      unit: "em"
+    },
+    backgroundColor: {
+      type: "rgb",
+      r: 238,
+      g: 238,
+      b: 238,
+      alpha: 1
+    }
   }
 };
 const meta = {

package/lib/components/form.js

@@ -4,5 +4,6 @@ const defaultTag = "form";
 const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", { ...props, ref }));
 Form.displayName = "Form";
 export {
-  Form
+  Form,
+  defaultTag
 };

package/lib/components/form.ws.js

@@ -1,14 +1,14 @@
 import { FormIcon } from "@webstudio-is/icons";
+import { form } from "../css/normalize";
 import { props } from "./__generated__/form.props";
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "px",
-    value: 20
-  },
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
+  form: {
+    ...form,
+    minHeight: {
+      type: "unit",
+      unit: "px",
+      value: 20
+    }
   }
 };
 const meta = {

package/lib/components/heading.ws.js

@@ -1,11 +1,21 @@
 import { HeadingIcon } from "@webstudio-is/icons";
+import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import { props } from "./__generated__/heading.props";
+const presetStyle = {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"]
+  children: ["Heading you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props,

package/lib/components/image.js

@@ -44,5 +44,6 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   />
 </svg>`)}`;
 export {
-  Image
+  Image,
+  defaultTag
 };

package/lib/components/image.ws.js

@@ -1,17 +1,21 @@
 import { ImageIcon } from "@webstudio-is/icons";
+import { img } from "../css/normalize";
 import { props } from "./__generated__/image.props";
 const presetStyle = {
-  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-  maxWidth: {
-    type: "unit",
-    unit: "%",
-    value: 100
-  },
-  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
-  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-  display: {
-    type: "keyword",
-    value: "block"
+  img: {
+    ...img,
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    maxWidth: {
+      type: "unit",
+      unit: "%",
+      value: 100
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    display: {
+      type: "keyword",
+      value: "block"
+    }
   }
 };
 const meta = {

package/lib/components/input.js

@@ -4,5 +4,6 @@ const defaultTag = "input";
 const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, ref }));
 Input.displayName = "Input";
 export {
-  Input
+  Input,
+  defaultTag
 };

package/lib/components/input.ws.js

@@ -1,10 +1,15 @@
-import { InputIcon } from "@webstudio-is/icons";
+import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { input } from "../css/normalize";
 import { props } from "./__generated__/input.props";
+const presetStyle = {
+  input
+};
 const meta = {
   category: "forms",
   type: "control",
   label: "Input",
-  Icon: InputIcon
+  Icon: FormTextFieldIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/italic.js

@@ -4,5 +4,6 @@ const defaultTag = "i";
 const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", { ...props, ref }));
 Italic.displayName = "Italic";
 export {
-  Italic
+  Italic,
+  defaultTag
 };

package/lib/components/italic.ws.js

@@ -1,15 +1,19 @@
-import { FontItalicIcon } from "@webstudio-is/icons";
+import { TextItalicIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/italic.props";
+import { i } from "../css/normalize";
 const presetStyle = {
-  fontStyle: {
-    type: "keyword",
-    value: "italic"
+  i: {
+    ...i,
+    fontStyle: {
+      type: "keyword",
+      value: "italic"
+    }
   }
 };
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: FontItalicIcon,
+  Icon: TextItalicIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/link-block.js

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Link } from "./link";
+import { defaultTag } from "./link";
 const LinkBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";
 export {
-  LinkBlock
+  LinkBlock,
+  defaultTag
 };

package/lib/components/link-block.ws.js

@@ -1,14 +1,14 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
 import { propsMeta as linkPropsMeta } from "./link.ws";
+import { a } from "../css/normalize";
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...a,
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {

package/lib/components/link.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+const defaultTag = "a";
 const Link = forwardRef((props, ref) => {
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
   return /* @__PURE__ */ jsx(
@@ -14,5 +15,6 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 export {
-  Link
+  Link,
+  defaultTag
 };

package/lib/components/link.ws.js

@@ -1,21 +1,25 @@
-import { Link2Icon } from "@webstudio-is/icons";
+import { LinkIcon } from "@webstudio-is/icons";
+import { a } from "../css/normalize";
 import { props } from "./__generated__/link.props";
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...a,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1
+    },
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: Link2Icon,
+  Icon: LinkIcon,
   presetStyle,
   children: ["Link text you can edit"]
 };

package/lib/components/list-item.js

@@ -10,5 +10,6 @@ const ListItem = forwardRef(
 );
 ListItem.displayName = "ListItem";
 export {
-  ListItem
+  ListItem,
+  defaultTag
 };

package/lib/components/list-item.ws.js

@@ -1,11 +1,16 @@
 import { ListItemIcon } from "@webstudio-is/icons";
+import { li } from "../css/normalize";
 import { props } from "./__generated__/list-item.props";
+const presetStyle = {
+  li
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"]
+  children: ["List Item you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props