@webstudio-is/react-sdk 0.51.0 → 0.53.0

package/lib/cjs/components/{blockquote.cjs → blockquote.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var blockquote_exports = {};
 __export(blockquote_exports, {
-  Blockquote: () => Blockquote
+  Blockquote: () => Blockquote,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(blockquote_exports);
 var import_react = require("react");

package/lib/cjs/components/{blockquote.ws.cjs → blockquote.ws.js}

@@ -25,41 +25,63 @@ module.exports = __toCommonJS(blockquote_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_blockquote = require("./__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/cjs/components/{body.cjs → body.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var body_exports = {};
 __export(body_exports, {
-  Body: () => Body
+  Body: () => Body,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(body_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{body.ws.cjs → body.ws.js}

@@ -23,54 +23,38 @@ __export(body_ws_exports, {
 });
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_body = require("./__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: {
+    ...import_normalize.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/cjs/components/{bold.cjs → bold.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var bold_exports = {};
 __export(bold_exports, {
-  Bold: () => Bold
+  Bold: () => Bold,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(bold_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{bold.ws.cjs → bold.ws.js}

@@ -24,10 +24,15 @@ __export(bold_ws_exports, {
 module.exports = __toCommonJS(bold_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_bold = require("./__generated__/bold.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  b: import_normalize.b
+};
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: import_icons.FontBoldIcon
+  Icon: import_icons.BoldIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_bold.props

package/lib/cjs/components/{box.ws.cjs → box.ws.js}

@@ -24,11 +24,18 @@ __export(box_ws_exports, {
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_box = require("./__generated__/box.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  }
+  div: import_normalize.div,
+  address: import_normalize.address,
+  article: import_normalize.article,
+  aside: import_normalize.aside,
+  figure: import_normalize.figure,
+  footer: import_normalize.footer,
+  header: import_normalize.header,
+  main: import_normalize.main,
+  nav: import_normalize.nav,
+  section: import_normalize.section
 };
 const meta = {
   category: "general",

package/lib/cjs/components/{button.cjs → button.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var button_exports = {};
 __export(button_exports, {
-  Button: () => Button
+  Button: () => Button,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{button.ws.cjs → button.ws.js}

@@ -24,11 +24,16 @@ __export(button_ws_exports, {
 module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_button = require("./__generated__/button.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  button: import_normalize.button
+};
 const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: import_icons.ButtonIcon
+  Icon: import_icons.ButtonElementIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_button.props,

package/lib/cjs/components/{code.cjs → code.js}

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var code_exports = {};
 __export(code_exports, {
   Code: () => Code,
+  defaultTag: () => defaultTag,
   displayVarNamespace: () => displayVarNamespace
 });
 module.exports = __toCommonJS(code_exports);

package/lib/cjs/components/{code.ws.cjs → code.ws.js}

@@ -25,32 +25,38 @@ module.exports = __toCommonJS(code_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_code = require("./code");
 var import_code2 = require("./__generated__/code.props");
+var import_normalize = require("../css/normalize");
+const display = {
+  type: "var",
+  value: import_code.displayVarNamespace,
+  fallbacks: [
+    {
+      type: "keyword",
+      value: "inline-block"
+    }
+  ]
+};
 const presetStyle = {
-  display: {
-    type: "var",
-    value: import_code.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: {
+    ...import_normalize.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/cjs/components/{form.cjs → form.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var form_exports = {};
 __export(form_exports, {
-  Form: () => Form
+  Form: () => Form,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{form.ws.cjs → form.ws.js}

@@ -23,16 +23,16 @@ __export(form_ws_exports, {
 });
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "px",
-    value: 20
-  },
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
+  form: {
+    ...import_normalize.form,
+    minHeight: {
+      type: "unit",
+      unit: "px",
+      value: 20
+    }
   }
 };
 const meta = {

package/lib/cjs/components/{heading.ws.cjs → heading.ws.js}

@@ -23,13 +23,23 @@ __export(heading_ws_exports, {
 });
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_heading = require("./__generated__/heading.props");
+const presetStyle = {
+  h1: import_normalize.h1,
+  h2: import_normalize.h2,
+  h3: import_normalize.h3,
+  h4: import_normalize.h4,
+  h5: import_normalize.h5,
+  h6: import_normalize.h6
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: import_icons.HeadingIcon,
-  children: ["Heading you can edit"]
+  children: ["Heading you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props: import_heading.props,

package/lib/cjs/components/{image.cjs → image.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var image_exports = {};
 __export(image_exports, {
-  Image: () => Image
+  Image: () => Image,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(image_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{image.ws.cjs → image.ws.js}

@@ -23,19 +23,23 @@ __export(image_ws_exports, {
 });
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_image = require("./__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: {
+    ...import_normalize.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/cjs/components/{input.cjs → input.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var input_exports = {};
 __export(input_exports, {
-  Input: () => Input
+  Input: () => Input,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{input.ws.cjs → input.ws.js}

@@ -23,12 +23,17 @@ __export(input_ws_exports, {
 });
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_input = require("./__generated__/input.props");
+const presetStyle = {
+  input: import_normalize.input
+};
 const meta = {
   category: "forms",
   type: "control",
   label: "Input",
-  Icon: import_icons.InputIcon
+  Icon: import_icons.FormTextFieldIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_input.props

package/lib/cjs/components/{italic.cjs → italic.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var italic_exports = {};
 __export(italic_exports, {
-  Italic: () => Italic
+  Italic: () => Italic,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(italic_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{italic.ws.cjs → italic.ws.js}

@@ -24,16 +24,20 @@ __export(italic_ws_exports, {
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_italic = require("./__generated__/italic.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  fontStyle: {
-    type: "keyword",
-    value: "italic"
+  i: {
+    ...import_normalize.i,
+    fontStyle: {
+      type: "keyword",
+      value: "italic"
+    }
   }
 };
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: import_icons.FontItalicIcon,
+  Icon: import_icons.TextItalicIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/{link-block.cjs → link-block.js}

@@ -18,11 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var link_block_exports = {};
 __export(link_block_exports, {
-  LinkBlock: () => LinkBlock
+  LinkBlock: () => LinkBlock,
+  defaultTag: () => import_link2.defaultTag
 });
 module.exports = __toCommonJS(link_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
+var import_link2 = require("./link");
 const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";

package/lib/cjs/components/{link-block.ws.cjs → link-block.ws.js}

@@ -25,14 +25,14 @@ module.exports = __toCommonJS(link_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_link_block = require("./__generated__/link-block.props");
 var import_link = require("./link.ws");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...import_normalize.a,
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {

package/lib/cjs/components/{link.cjs → link.js}

@@ -18,12 +18,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var link_exports = {};
 __export(link_exports, {
-  Link: () => Link
+  Link: () => Link,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_props = require("../props");
+const defaultTag = "a";
 const Link = (0, import_react.forwardRef)((props, ref) => {
   const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/lib/cjs/components/{link.ws.cjs → link.ws.js}

@@ -23,23 +23,27 @@ __export(link_ws_exports, {
 });
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...import_normalize.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: import_icons.Link2Icon,
+  Icon: import_icons.LinkIcon,
   presetStyle,
   children: ["Link text you can edit"]
 };

package/lib/cjs/components/{list-item.cjs → list-item.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var list_item_exports = {};
 __export(list_item_exports, {
-  ListItem: () => ListItem
+  ListItem: () => ListItem,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(list_item_exports);
 var import_react = require("react");