@webstudio-is/react-sdk 0.33.0 → 0.35.0

package/lib/app/custom-components/index.js

@@ -2,19 +2,18 @@ import { Image } from "./image";
 import { Link } from "./link";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
-import { WsComponentPropsMeta } from "../../components/component-type";
 const customComponents = {
   Image,
   Link,
   RichTextLink
 };
 const customComponentPropsMetas = {
-  Image: WsComponentPropsMeta.parse({
+  Image: {
     props: {
       ...imageProps,
       src: { ...imageProps.src, control: "file-image", name: "Source" }
     }
-  })
+  }
 };
 const customComponentMetas = {};
 export {

package/lib/cjs/app/custom-components/index.cjs

@@ -27,18 +27,17 @@ var import_image = require("./image");
 var import_link = require("./link");
 var import_rich_text_link = require("./rich-text-link");
 var import_image2 = require("@webstudio-is/image");
-var import_component_type = require("../../components/component-type");
 const customComponents = {
   Image: import_image.Image,
   Link: import_link.Link,
   RichTextLink: import_rich_text_link.RichTextLink
 };
 const customComponentPropsMetas = {
-  Image: import_component_type.WsComponentPropsMeta.parse({
+  Image: {
     props: {
       ...import_image2.imageProps,
       src: { ...import_image2.imageProps.src, control: "file-image", name: "Source" }
     }
-  })
+  }
 };
 const customComponentMetas = {};

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

@@ -29,7 +29,6 @@ __export(body_ws_exports, {
 });
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_body_props = __toESM(require("./__generated__/body.props.json"), 1);
 const presetStyle = {
   marginTop: {
@@ -86,6 +85,6 @@ const meta = {
   Icon: import_icons.BodyIcon,
   presetStyle
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_body_props.default
-});
+};

package/lib/cjs/components/bold.ws.cjs

@@ -29,13 +29,12 @@ __export(bold_ws_exports, {
 });
 module.exports = __toCommonJS(bold_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_bold_props = __toESM(require("./__generated__/bold.props.json"), 1);
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: import_icons.FontBoldIcon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_bold_props.default
-});
+};

package/lib/cjs/components/box.ws.cjs

@@ -29,7 +29,6 @@ __export(box_ws_exports, {
 });
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_box_props = __toESM(require("./__generated__/box.props.json"), 1);
 const presetStyle = {
   boxSizing: {
@@ -43,7 +42,7 @@ const meta = {
   Icon: import_icons.SquareIcon,
   presetStyle
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_box_props.default,
   initialProps: ["tag"]
-});
+};

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

@@ -29,7 +29,6 @@ __export(button_ws_exports, {
 });
 module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_button_props = __toESM(require("./__generated__/button.props.json"), 1);
 const meta = {
   type: "rich-text",
@@ -37,7 +36,7 @@ const meta = {
   Icon: import_icons.ButtonIcon,
   children: ["Button text you can edit"]
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_button_props.default,
   initialProps: ["type"]
-});
+};

package/lib/cjs/components/component-type.cjs

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -17,10 +13,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var component_type_exports = {};
-__export(component_type_exports, {
-  WsComponentMeta: () => WsComponentMeta,
-  WsComponentPropsMeta: () => WsComponentPropsMeta
-});
 module.exports = __toCommonJS(component_type_exports);
 var import_zod = require("zod");
 var import_generate_arg_types = require("@webstudio-is/generate-arg-types");

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

@@ -29,7 +29,6 @@ __export(form_ws_exports, {
 });
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_form_props = __toESM(require("./__generated__/form.props.json"), 1);
 const presetStyle = {
   minHeight: {
@@ -48,6 +47,6 @@ const meta = {
   Icon: import_icons.FormIcon,
   presetStyle
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_form_props.default
-});
+};

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

@@ -29,7 +29,6 @@ __export(heading_ws_exports, {
 });
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_heading_props = __toESM(require("./__generated__/heading.props.json"), 1);
 const meta = {
   type: "rich-text",
@@ -37,7 +36,7 @@ const meta = {
   Icon: import_icons.HeadingIcon,
   children: ["Heading you can edit"]
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_heading_props.default,
   initialProps: ["tag"]
-});
+};

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

@@ -29,7 +29,6 @@ __export(image_ws_exports, {
 });
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_image_props = __toESM(require("./__generated__/image.props.json"), 1);
 const presetStyle = {
   maxWidth: {
@@ -48,10 +47,10 @@ const meta = {
   Icon: import_icons.ImageIcon,
   presetStyle
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: {
     ...import_image_props.default,
     src: { ...import_image_props.default.src, control: "file-image", name: "Source" }
   },
   initialProps: ["src", "width", "height", "alt", "loading"]
-});
+};

package/lib/cjs/components/input.ws.cjs

@@ -29,13 +29,12 @@ __export(input_ws_exports, {
 });
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_input_props = __toESM(require("./__generated__/input.props.json"), 1);
 const meta = {
   type: "control",
   label: "Input",
   Icon: import_icons.InputIcon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_input_props.default
-});
+};

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

@@ -29,7 +29,6 @@ __export(italic_ws_exports, {
 });
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_italic_props = __toESM(require("./__generated__/italic.props.json"), 1);
 const presetStyle = {
   fontStyle: {
@@ -43,6 +42,6 @@ const meta = {
   Icon: import_icons.FontItalicIcon,
   presetStyle
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_italic_props.default
-});
+};

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

@@ -29,7 +29,6 @@ __export(link_ws_exports, {
 });
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_link_props = __toESM(require("./__generated__/link.props.json"), 1);
 const presetStyle = {
   minHeight: {
@@ -49,7 +48,7 @@ const meta = {
   presetStyle,
   children: ["Link text you can edit"]
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_link_props.default,
   initialProps: ["href"]
-});
+};

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

@@ -29,7 +29,6 @@ __export(paragraph_ws_exports, {
 });
 module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_paragraph_props = __toESM(require("./__generated__/paragraph.props.json"), 1);
 const meta = {
   type: "rich-text",
@@ -37,6 +36,6 @@ const meta = {
   Icon: import_icons.TextAlignLeftIcon,
   children: ["Pragraph you can edit"]
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_paragraph_props.default
-});
+};

package/lib/cjs/components/rich-text-link.ws.cjs

@@ -29,13 +29,12 @@ __export(rich_text_link_ws_exports, {
 });
 module.exports = __toCommonJS(rich_text_link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_rich_text_link_props = __toESM(require("./__generated__/rich-text-link.props.json"), 1);
 const meta = {
   type: "rich-text-child",
   label: "Link",
   Icon: import_icons.Link2Icon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_rich_text_link_props.default
-});
+};

package/lib/cjs/components/span.ws.cjs

@@ -29,13 +29,12 @@ __export(span_ws_exports, {
 });
 module.exports = __toCommonJS(span_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_span_props = __toESM(require("./__generated__/span.props.json"), 1);
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: import_icons.BrushIcon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_span_props.default
-});
+};

package/lib/cjs/components/subscript.ws.cjs

@@ -29,13 +29,12 @@ __export(subscript_ws_exports, {
 });
 module.exports = __toCommonJS(subscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_subscript_props = __toESM(require("./__generated__/subscript.props.json"), 1);
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: import_icons.SubscriptIcon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_subscript_props.default
-});
+};

package/lib/cjs/components/superscript.ws.cjs

@@ -29,13 +29,12 @@ __export(superscript_ws_exports, {
 });
 module.exports = __toCommonJS(superscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_superscript_props = __toESM(require("./__generated__/superscript.props.json"), 1);
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: import_icons.SuperscriptIcon
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_superscript_props.default
-});
+};

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

@@ -29,7 +29,6 @@ __export(text_block_ws_exports, {
 });
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_component_type = require("./component-type");
 var import_text_block_props = __toESM(require("./__generated__/text-block.props.json"), 1);
 const presetStyle = {
   minHeight: {
@@ -45,6 +44,6 @@ const meta = {
   presetStyle,
   children: ["Block of text you can edit"]
 };
-const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+const propsMeta = {
   props: import_text_block_props.default
-});
+};

package/lib/cjs/css/index.cjs

@@ -17,4 +17,3 @@ var css_exports = {};
 module.exports = __toCommonJS(css_exports);
 __reExport(css_exports, require("./get-browser-style"), module.exports);
 __reExport(css_exports, require("./categories"), module.exports);
-__reExport(css_exports, require("./breakpoints"), module.exports);

package/lib/cjs/tree/create-elements-tree.cjs

@@ -31,13 +31,11 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const children = createInstanceChildrenElements({
     Component,
-    children: instance.children,
-    onChangeChildren
+    children: instance.children
   });
   const body = createInstanceElement({
     Component,
@@ -60,8 +58,7 @@ const createElementsTree = ({
 };
 const createInstanceChildrenElements = ({
   children,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const elements = [];
   for (const child of children) {
@@ -71,13 +68,11 @@ const createInstanceChildrenElements = ({
     }
     const children2 = createInstanceChildrenElements({
       children: child.children,
-      Component,
-      onChangeChildren
+      Component
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children: children2
     });
     elements.push(element);
@@ -87,14 +82,12 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
-  children = [],
-  onChangeChildren
+  children = []
 }) => {
   const props = {
     instance,
     children,
-    key: instance.id,
-    onChangeChildren
+    key: instance.id
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props

package/lib/cjs/tree/wrapper-component.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var wrapper_component_exports = {};
 __export(wrapper_component_exports, {
   WrapperComponent: () => WrapperComponent,
+  collapsedAttribute: () => collapsedAttribute,
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
   renderWrapperComponentChildren: () => renderWrapperComponentChildren
@@ -47,7 +48,6 @@ const renderWrapperComponentChildren = (children) => {
 };
 const WrapperComponent = ({
   instance,
-  onChangeChildren,
   children,
   ...rest
 }) => {
@@ -69,3 +69,4 @@ const WrapperComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const collapsedAttribute = "data-ws-collapsed";

package/lib/components/body.ws.js

@@ -1,5 +1,4 @@
 import { BodyIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/body.props.json";
 const presetStyle = {
   marginTop: {
@@ -56,9 +55,9 @@ const meta = {
   Icon: BodyIcon,
   presetStyle
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/bold.ws.js

@@ -1,14 +1,13 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/bold.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: FontBoldIcon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/box.ws.js

@@ -1,5 +1,4 @@
 import { SquareIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/box.props.json";
 const presetStyle = {
   boxSizing: {
@@ -13,10 +12,10 @@ const meta = {
   Icon: SquareIcon,
   presetStyle
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props,
   initialProps: ["tag"]
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/button.ws.js

@@ -1,5 +1,4 @@
 import { ButtonIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/button.props.json";
 const meta = {
   type: "rich-text",
@@ -7,10 +6,10 @@ const meta = {
   Icon: ButtonIcon,
   children: ["Button text you can edit"]
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props,
   initialProps: ["type"]
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/component-type.js

@@ -18,7 +18,3 @@ const WsComponentMeta = z.object({
   presetStyle: z.optional(z.any()),
   children: z.optional(z.array(z.string()))
 });
-export {
-  WsComponentMeta,
-  WsComponentPropsMeta
-};

package/lib/components/form.ws.js

@@ -1,5 +1,4 @@
 import { FormIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/form.props.json";
 const presetStyle = {
   minHeight: {
@@ -18,9 +17,9 @@ const meta = {
   Icon: FormIcon,
   presetStyle
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/heading.ws.js

@@ -1,5 +1,4 @@
 import { HeadingIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/heading.props.json";
 const meta = {
   type: "rich-text",
@@ -7,10 +6,10 @@ const meta = {
   Icon: HeadingIcon,
   children: ["Heading you can edit"]
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props,
   initialProps: ["tag"]
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/image.ws.js

@@ -1,5 +1,4 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/image.props.json";
 const presetStyle = {
   maxWidth: {
@@ -18,13 +17,13 @@ const meta = {
   Icon: ImageIcon,
   presetStyle
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props: {
     ...props,
     src: { ...props.src, control: "file-image", name: "Source" }
   },
   initialProps: ["src", "width", "height", "alt", "loading"]
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/input.ws.js

@@ -1,14 +1,13 @@
 import { InputIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/input.props.json";
 const meta = {
   type: "control",
   label: "Input",
   Icon: InputIcon
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/italic.ws.js

@@ -1,5 +1,4 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/italic.props.json";
 const presetStyle = {
   fontStyle: {
@@ -13,9 +12,9 @@ const meta = {
   Icon: FontItalicIcon,
   presetStyle
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/link.ws.js

@@ -1,5 +1,4 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/link.props.json";
 const presetStyle = {
   minHeight: {
@@ -19,10 +18,10 @@ const meta = {
   presetStyle,
   children: ["Link text you can edit"]
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props,
   initialProps: ["href"]
-});
+};
 export {
   meta,
   propsMeta

package/lib/components/paragraph.ws.js

@@ -1,5 +1,4 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/paragraph.props.json";
 const meta = {
   type: "rich-text",
@@ -7,9 +6,9 @@ const meta = {
   Icon: TextAlignLeftIcon,
   children: ["Pragraph you can edit"]
 };
-const propsMeta = WsComponentPropsMeta.parse({
+const propsMeta = {
   props
-});
+};
 export {
   meta,
   propsMeta