@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/lib/cjs/components/blockquote.ws.js

@@ -25,64 +25,52 @@ module.exports = __toCommonJS(blockquote_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_blockquote = require("./__generated__/blockquote.props");
 const presetStyle = {
-  blockquote: {
-    marginTop: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+  blockquote: [
+    {
+      property: "marginTop",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    marginRight: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+    {
+      property: "marginRight",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    marginBottom: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "marginBottom",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    marginLeft: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+    {
+      property: "marginLeft",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    paddingTop: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "paddingTop",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    paddingBottom: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "paddingBottom",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    paddingLeft: {
-      type: "unit",
-      value: 20,
-      unit: "px"
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 20, unit: "px" }
     },
-    paddingRight: {
-      type: "unit",
-      value: 20,
-      unit: "px"
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 20, unit: "px" }
     },
-    borderLeftWidth: {
-      type: "unit",
-      value: 5,
-      unit: "px"
+    {
+      property: "borderLeftWidth",
+      value: { type: "unit", value: 5, unit: "px" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "solid"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
     },
-    borderLeftColor: {
-      type: "rgb",
-      r: 226,
-      g: 226,
-      b: 226,
-      alpha: 1
+    {
+      property: "borderLeftColor",
+      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -90,7 +78,7 @@ const meta = {
   label: "Blockquote",
   Icon: import_icons.BlockquoteIcon,
   presetStyle,
-  children: ["Blockquote you can edit"]
+  children: [{ type: "text", value: "Blockquote you can edit" }]
 };
 const propsMeta = {
   props: import_blockquote.props

package/lib/cjs/components/body.ws.js

@@ -26,28 +26,31 @@ var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
 var import_body = require("./__generated__/body.props");
 const presetStyle = {
-  body: {
+  body: [
     ...import_normalize.body,
-    minHeight: {
-      type: "unit",
-      unit: "%",
-      value: 100
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "%", value: 100 }
     },
-    fontFamily: {
-      type: "keyword",
-      value: "Arial"
+    {
+      property: "fontFamily",
+      value: { type: "keyword", value: "Arial" }
     },
-    fontSize: {
-      type: "unit",
-      unit: "px",
-      value: 14
+    {
+      property: "fontSize",
+      value: { type: "unit", unit: "px", value: 14 }
     },
-    lineHeight: {
-      type: "unit",
-      unit: "number",
-      value: 1.5
+    {
+      property: "lineHeight",
+      value: { type: "unit", unit: "number", value: 1.5 }
+    },
+    // temporary set root color
+    // until builder start to fallback "inherit" to black
+    {
+      property: "color",
+      value: { type: "keyword", value: "black" }
     }
-  }
+  ]
 };
 const meta = {
   type: "container",

package/lib/cjs/components/button.ws.js

@@ -23,8 +23,8 @@ __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");
+var import_button = require("./__generated__/button.props");
 const presetStyle = {
   button: import_normalize.button
 };

package/lib/cjs/components/code.ws.js

@@ -26,38 +26,30 @@ 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 = {
-  code: {
+  code: [
     ...import_normalize.code,
-    display,
-    paddingLeft: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "display",
+      value: {
+        type: "var",
+        value: import_code.displayVarNamespace,
+        fallbacks: [{ type: "keyword", value: "inline-block" }]
+      }
     },
-    paddingRight: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" }
     },
-    backgroundColor: {
-      type: "rgb",
-      r: 238,
-      g: 238,
-      b: 238,
-      alpha: 1
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -65,7 +57,7 @@ const meta = {
   label: "Code",
   Icon: import_icons.CodeIcon,
   presetStyle,
-  children: ["Code you can edit"]
+  children: [{ type: "text", value: "Code you can edit" }]
 };
 const propsMeta = {
   props: import_code2.props,

package/lib/cjs/components/component-meta.js

@@ -24,6 +24,7 @@ __export(component_meta_exports, {
 module.exports = __toCommonJS(component_meta_exports);
 var import_zod = require("zod");
 var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
+var import_embed_template = require("../embed-template");
 const WsComponentPropsMeta = import_zod.z.object({
   props: import_zod.z.record(import_generate_arg_types.PropMeta),
   initialProps: import_zod.z.array(import_zod.z.string()).optional()
@@ -56,5 +57,5 @@ const WsComponentMeta = import_zod.z.object({
   Icon: import_zod.z.function(),
   presetStyle: import_zod.z.optional(import_zod.z.any()),
   states: import_zod.z.optional(import_zod.z.array(ComponentState)),
-  children: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))
+  children: import_zod.z.optional(import_embed_template.WsEmbedTemplate)
 });

package/lib/cjs/components/form.ws.js

@@ -26,21 +26,28 @@ var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
-  form: {
+  form: [
     ...import_normalize.form,
-    minHeight: {
-      type: "unit",
-      unit: "px",
-      value: 20
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "px", value: 20 }
     }
-  }
+  ]
 };
 const meta = {
   category: "forms",
   type: "container",
   label: "Form",
   Icon: import_icons.FormIcon,
-  presetStyle
+  presetStyle,
+  children: [
+    { type: "instance", component: "Input", children: [] },
+    {
+      type: "instance",
+      component: "Button",
+      children: [{ type: "text", value: "Submit" }]
+    }
+  ]
 };
 const propsMeta = {
   props: import_form.props

package/lib/cjs/components/heading.ws.js

@@ -38,7 +38,7 @@ const meta = {
   type: "rich-text",
   label: "Heading",
   Icon: import_icons.HeadingIcon,
-  children: ["Heading you can edit"],
+  children: [{ type: "text", value: "Heading you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/image.ws.js

@@ -26,21 +26,20 @@ var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
 var import_image = require("./__generated__/image.props");
 const presetStyle = {
-  img: {
+  img: [
     ...import_normalize.img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    maxWidth: {
-      type: "unit",
-      unit: "%",
-      value: 100
+    {
+      property: "maxWidth",
+      value: { 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"
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "media",

package/lib/cjs/components/italic.ws.js

@@ -26,13 +26,13 @@ var import_icons = require("@webstudio-is/icons");
 var import_italic = require("./__generated__/italic.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  i: {
+  i: [
     ...import_normalize.i,
-    fontStyle: {
-      type: "keyword",
-      value: "italic"
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" }
     }
-  }
+  ]
 };
 const meta = {
   type: "rich-text-child",

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

@@ -27,13 +27,13 @@ var import_link_block = require("./__generated__/link-block.props");
 var import_link = require("./link.ws");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  a: {
+  a: [
     ...import_normalize.a,
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/cjs/components/link.ws.js

@@ -26,18 +26,17 @@ var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
-  a: {
+  a: [
     ...import_normalize.a,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     },
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -46,7 +45,7 @@ const meta = {
   Icon: import_icons.LinkIcon,
   presetStyle,
   states: [{ selector: "[aria-current=page]", label: "Current page" }],
-  children: ["Link text you can edit"]
+  children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {
   props: {

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

@@ -33,7 +33,7 @@ const meta = {
   type: "rich-text",
   label: "List Item",
   Icon: import_icons.ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/list.ws.js

@@ -26,36 +26,36 @@ var import_icons = require("@webstudio-is/icons");
 var import_list = require("./__generated__/list.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  ol: {
+  ol: [
     ...import_normalize.ol,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  },
-  ul: {
+  ],
+  ul: [
     ...import_normalize.ul,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",

package/lib/cjs/components/paragraph.ws.js

@@ -33,7 +33,7 @@ const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/separator.ws.js

@@ -26,33 +26,33 @@ var import_icons = require("@webstudio-is/icons");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  hr: {
+  hr: [
     ...import_normalize.hr,
-    height: {
-      type: "keyword",
-      value: "1px"
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
     },
-    backgroundColor: {
-      type: "keyword",
-      value: "gray"
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
     },
-    borderTopStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/cjs/components/text-block.ws.js

@@ -26,14 +26,13 @@ var import_icons = require("@webstudio-is/icons");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
-  div: {
+  div: [
     ...import_normalize.div,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -41,7 +40,7 @@ const meta = {
   label: "Text Block",
   Icon: import_icons.TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props: import_text_block.props

package/lib/cjs/css/css.js

@@ -64,15 +64,12 @@ const generateCssText = (data, options) => {
   for (const component of (0, import_components_utils.getComponentNames)()) {
     const meta = (0, import_components.getComponentMeta)(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${import_tree.componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = (0, import_style_rules.getPresetStyleRules)(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);