@webstudio-is/react-sdk 0.35.0 → 0.36.0

package/lib/cjs/components/code.cjs

@@ -0,0 +1,38 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_exports = {};
+__export(code_exports, {
+  Code: () => Code,
+  displayVarNamespace: () => displayVarNamespace
+});
+module.exports = __toCommonJS(code_exports);
+var import_react = require("react");
+var import_css_vars = require("@webstudio-is/css-vars");
+const defaultTag = "code";
+const displayVarNamespace = import_css_vars.cssVars.unique("code-display");
+const blockStyle = {
+  [import_css_vars.cssVars.define(displayVarNamespace, true)]: "block"
+};
+const Code = (0, import_react.forwardRef)(
+  ({ inline = false, ...props }, ref) => {
+    const style = inline ? void 0 : blockStyle;
+    return (0, import_react.createElement)(defaultTag, { ...props, style, ref });
+  }
+);
+Code.displayName = "Code";

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

@@ -0,0 +1,66 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_ws_exports = {};
+__export(code_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+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");
+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"
+  }
+};
+const meta = {
+  type: "rich-text",
+  label: "Code",
+  Icon: import_icons.CodeIcon,
+  presetStyle,
+  children: ["Code you can edit"]
+};
+const propsMeta = {
+  props: import_code2.props,
+  initialProps: ["inline", "lang", "meta"]
+};

package/lib/cjs/components/components-utils.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var components_utils_exports = {};
+__export(components_utils_exports, {
+  createGetComponent: () => createGetComponent,
+  getComponent: () => getComponent,
+  getComponentNames: () => getComponentNames
+});
+module.exports = __toCommonJS(components_utils_exports);
+var components = __toESM(require("./components"), 1);
+var import_index = require("./index");
+const componentNames = Object.keys({
+  Box: 1,
+  Body: 1,
+  TextBlock: 1,
+  Heading: 1,
+  Paragraph: 1,
+  Link: 1,
+  RichTextLink: 1,
+  Span: 1,
+  Bold: 1,
+  Italic: 1,
+  Superscript: 1,
+  Subscript: 1,
+  Button: 1,
+  Input: 1,
+  Form: 1,
+  Image: 1,
+  Blockquote: 1,
+  List: 1,
+  ListItem: 1,
+  Separator: 1,
+  Code: 1
+});
+const getComponentNames = () => {
+  const uniqueNames = /* @__PURE__ */ new Set([
+    ...componentNames,
+    ...Object.keys(import_index.registeredComponents || {})
+  ]);
+  return Array.from(uniqueNames);
+};
+const getComponent = (name) => {
+  return import_index.registeredComponents != null && name in import_index.registeredComponents ? import_index.registeredComponents[name] : components[name];
+};
+const createGetComponent = (comps) => {
+  return (name) => {
+    return import_index.registeredComponents != null && name in import_index.registeredComponents ? import_index.registeredComponents[name] : comps[name];
+  };
+};

package/lib/cjs/components/components.cjs

@@ -0,0 +1,64 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var components_exports = {};
+__export(components_exports, {
+  Blockquote: () => import_blockquote.Blockquote,
+  Body: () => import_body.Body,
+  Bold: () => import_bold.Bold,
+  Box: () => import_box.Box,
+  Button: () => import_button.Button,
+  Code: () => import_code.Code,
+  Form: () => import_form.Form,
+  Heading: () => import_heading.Heading,
+  Image: () => import_image.Image,
+  Input: () => import_input.Input,
+  Italic: () => import_italic.Italic,
+  Link: () => import_link.Link,
+  List: () => import_list.List,
+  ListItem: () => import_list_item.ListItem,
+  Paragraph: () => import_paragraph.Paragraph,
+  RichTextLink: () => import_rich_text_link.RichTextLink,
+  Separator: () => import_separator.Separator,
+  Span: () => import_span.Span,
+  Subscript: () => import_subscript.Subscript,
+  Superscript: () => import_superscript.Superscript,
+  TextBlock: () => import_text_block.TextBlock
+});
+module.exports = __toCommonJS(components_exports);
+var import_body = require("./body");
+var import_box = require("./box");
+var import_text_block = require("./text-block");
+var import_heading = require("./heading");
+var import_paragraph = require("./paragraph");
+var import_link = require("./link");
+var import_rich_text_link = require("./rich-text-link");
+var import_span = require("./span");
+var import_bold = require("./bold");
+var import_italic = require("./italic");
+var import_superscript = require("./superscript");
+var import_subscript = require("./subscript");
+var import_button = require("./button");
+var import_input = require("./input");
+var import_form = require("./form");
+var import_image = require("./image");
+var import_blockquote = require("./blockquote");
+var import_list = require("./list");
+var import_list_item = require("./list-item");
+var import_separator = require("./separator");
+var import_code = require("./code");

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var form_ws_exports = {};
 __export(form_ws_exports, {
@@ -29,7 +23,7 @@ __export(form_ws_exports, {
 });
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_form_props = __toESM(require("./__generated__/form.props.json"), 1);
+var import_form = require("./__generated__/form.props");
 const presetStyle = {
   minHeight: {
     type: "unit",
@@ -48,5 +42,5 @@ const meta = {
   presetStyle
 };
 const propsMeta = {
-  props: import_form_props.default
+  props: import_form.props
 };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var heading_ws_exports = {};
 __export(heading_ws_exports, {
@@ -29,7 +23,7 @@ __export(heading_ws_exports, {
 });
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_heading_props = __toESM(require("./__generated__/heading.props.json"), 1);
+var import_heading = require("./__generated__/heading.props");
 const meta = {
   type: "rich-text",
   label: "Heading",
@@ -37,6 +31,6 @@ const meta = {
   children: ["Heading you can edit"]
 };
 const propsMeta = {
-  props: import_heading_props.default,
+  props: import_heading.props,
   initialProps: ["tag"]
 };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var image_ws_exports = {};
 __export(image_ws_exports, {
@@ -29,7 +23,7 @@ __export(image_ws_exports, {
 });
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_image_props = __toESM(require("./__generated__/image.props.json"), 1);
+var import_image = require("./__generated__/image.props");
 const presetStyle = {
   maxWidth: {
     type: "unit",
@@ -49,8 +43,13 @@ const meta = {
 };
 const propsMeta = {
   props: {
-    ...import_image_props.default,
-    src: { ...import_image_props.default.src, control: "file-image", name: "Source" }
+    ...import_image.props,
+    src: {
+      type: "string",
+      control: "file-image",
+      label: "Source",
+      required: false
+    }
   },
   initialProps: ["src", "width", "height", "alt", "loading"]
 };

package/lib/cjs/components/index.cjs

@@ -18,13 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_exports = {};
 __export(components_exports, {
-  getComponent: () => getComponent,
   getComponentMeta: () => getComponentMeta,
-  getComponentNames: () => getComponentNames,
   getComponentPropsMeta: () => getComponentPropsMeta,
   registerComponentMetas: () => registerComponentMetas,
   registerComponentPropsMetas: () => registerComponentPropsMetas,
-  registerComponents: () => registerComponents
+  registerComponents: () => registerComponents,
+  registeredComponents: () => registeredComponents
 });
 module.exports = __toCommonJS(components_exports);
 var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
@@ -44,6 +43,11 @@ var import_button = require("./button.ws");
 var import_input = require("./input.ws");
 var import_form = require("./form.ws");
 var import_image = require("./image.ws");
+var import_blockquote = require("./blockquote.ws");
+var import_list = require("./list.ws");
+var import_list_item = require("./list-item.ws");
+var import_separator = require("./separator.ws");
+var import_code = require("./code.ws");
 var import_body2 = require("./body.ws");
 var import_box2 = require("./box.ws");
 var import_text_block2 = require("./text-block.ws");
@@ -60,22 +64,11 @@ var import_button2 = require("./button.ws");
 var import_input2 = require("./input.ws");
 var import_form2 = require("./form.ws");
 var import_image2 = require("./image.ws");
-var import_body3 = require("./body");
-var import_box3 = require("./box");
-var import_text_block3 = require("./text-block");
-var import_heading3 = require("./heading");
-var import_paragraph3 = require("./paragraph");
-var import_link3 = require("./link");
-var import_rich_text_link3 = require("./rich-text-link");
-var import_span3 = require("./span");
-var import_bold3 = require("./bold");
-var import_italic3 = require("./italic");
-var import_superscript3 = require("./superscript");
-var import_subscript3 = require("./subscript");
-var import_button3 = require("./button");
-var import_input3 = require("./input");
-var import_form3 = require("./form");
-var import_image3 = require("./image");
+var import_blockquote2 = require("./blockquote.ws");
+var import_list2 = require("./list.ws");
+var import_list_item2 = require("./list-item.ws");
+var import_separator2 = require("./separator.ws");
+var import_code2 = require("./code.ws");
 const defaultMetas = {
   Box: import_box.meta,
   Body: import_body.meta,
@@ -92,7 +85,12 @@ const defaultMetas = {
   Button: import_button.meta,
   Input: import_input.meta,
   Form: import_form.meta,
-  Image: import_image.meta
+  Image: import_image.meta,
+  Blockquote: import_blockquote.meta,
+  List: import_list.meta,
+  ListItem: import_list_item.meta,
+  Separator: import_separator.meta,
+  Code: import_code.meta
 };
 let currentMetas = defaultMetas;
 const getComponentMeta = (name) => {
@@ -105,7 +103,7 @@ const registerComponentMetas = (overrides) => {
   }
   currentMetas = result;
 };
-const defaultPropsMetas = {
+const defaultPropsMetasRaw = {
   Box: import_box2.propsMeta,
   Body: import_body2.propsMeta,
   TextBlock: import_text_block2.propsMeta,
@@ -121,8 +119,14 @@ const defaultPropsMetas = {
   Button: import_button2.propsMeta,
   Input: import_input2.propsMeta,
   Form: import_form2.propsMeta,
-  Image: import_image2.propsMeta
+  Image: import_image2.propsMeta,
+  Blockquote: import_blockquote2.propsMeta,
+  List: import_list2.propsMeta,
+  ListItem: import_list_item2.propsMeta,
+  Separator: import_separator2.propsMeta,
+  Code: import_code2.propsMeta
 };
+const defaultPropsMetas = defaultPropsMetasRaw;
 let registeredPropsMetas = {};
 let currentPropsMetas = void 0;
 const getComponentPropsMeta = (name) => {
@@ -147,36 +151,7 @@ const registerComponentPropsMetas = (metas) => {
   registeredPropsMetas = metas;
   currentPropsMetas = void 0;
 };
-const defaultComponents = {
-  Box: import_box3.Box,
-  Body: import_body3.Body,
-  TextBlock: import_text_block3.TextBlock,
-  Heading: import_heading3.Heading,
-  Paragraph: import_paragraph3.Paragraph,
-  Link: import_link3.Link,
-  RichTextLink: import_rich_text_link3.RichTextLink,
-  Span: import_span3.Span,
-  Bold: import_bold3.Bold,
-  Italic: import_italic3.Italic,
-  Superscript: import_superscript3.Superscript,
-  Subscript: import_subscript3.Subscript,
-  Button: import_button3.Button,
-  Input: import_input3.Input,
-  Form: import_form3.Form,
-  Image: import_image3.Image
-};
-let registeredComponents = null;
-const componentNames = Object.keys(defaultComponents);
-const getComponentNames = () => {
-  const uniqueNames = /* @__PURE__ */ new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {})
-  ]);
-  return [...uniqueNames.values()];
-};
-const getComponent = (name) => {
-  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : defaultComponents[name];
-};
+let registeredComponents;
 const registerComponents = (components) => {
   registeredComponents = components;
 };
@@ -200,7 +175,7 @@ const computeProps = (defaults, overrides) => {
 const computeInitialProps = (props, defaults, overrides) => {
   const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
   const requiredProps = props ? Object.entries(props).filter(
-    ([name, value]) => value?.type.required && initialProps.includes(name) === false
+    ([name, value]) => value?.required && initialProps.includes(name) === false
   ).map(([name]) => name) : [];
   return [...initialProps, ...requiredProps];
 };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var input_ws_exports = {};
 __export(input_ws_exports, {
@@ -29,12 +23,12 @@ __export(input_ws_exports, {
 });
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_input_props = __toESM(require("./__generated__/input.props.json"), 1);
+var import_input = require("./__generated__/input.props");
 const meta = {
   type: "control",
   label: "Input",
   Icon: import_icons.InputIcon
 };
 const propsMeta = {
-  props: import_input_props.default
+  props: import_input.props
 };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var italic_ws_exports = {};
 __export(italic_ws_exports, {
@@ -29,7 +23,7 @@ __export(italic_ws_exports, {
 });
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_italic_props = __toESM(require("./__generated__/italic.props.json"), 1);
+var import_italic = require("./__generated__/italic.props");
 const presetStyle = {
   fontStyle: {
     type: "keyword",
@@ -43,5 +37,5 @@ const meta = {
   presetStyle
 };
 const propsMeta = {
-  props: import_italic_props.default
+  props: import_italic.props
 };

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var link_ws_exports = {};
 __export(link_ws_exports, {
@@ -29,7 +23,7 @@ __export(link_ws_exports, {
 });
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_link_props = __toESM(require("./__generated__/link.props.json"), 1);
+var import_link = require("./__generated__/link.props");
 const presetStyle = {
   minHeight: {
     type: "unit",
@@ -49,6 +43,6 @@ const meta = {
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props: import_link_props.default,
+  props: import_link.props,
   initialProps: ["href"]
 };

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

@@ -0,0 +1,31 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var list_item_exports = {};
+__export(list_item_exports, {
+  ListItem: () => ListItem
+});
+module.exports = __toCommonJS(list_item_exports);
+var import_react = require("react");
+const defaultTag = "li";
+const ListItem = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return (0, import_react.createElement)(defaultTag, { ...props, ref });
+  }
+);
+ListItem.displayName = "ListItem";

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

@@ -0,0 +1,35 @@
+"use strict";
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var list_item_ws_exports = {};
+__export(list_item_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(list_item_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_list_item = require("./__generated__/list-item.props");
+const meta = {
+  type: "rich-text",
+  label: "List Item",
+  Icon: import_icons.ListItemIcon,
+  children: ["List Item you can edit"]
+};
+const propsMeta = {
+  props: import_list_item.props
+};