@webstudio-is/react-sdk 0.29.0 → 0.31.0

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

@@ -24,10 +24,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var body_ws_exports = {};
 __export(body_ws_exports, {
-  default: () => body_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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: {
@@ -82,7 +84,8 @@ const meta = {
   type: "body",
   label: "Body",
   Icon: import_icons.BodyIcon,
-  props: import_body_props.default,
   presetStyle
 };
-var body_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_body_props.default
+});

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

@@ -24,15 +24,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var bold_ws_exports = {};
 __export(bold_ws_exports, {
-  default: () => bold_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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,
-  props: import_bold_props.default
+  Icon: import_icons.FontBoldIcon
 };
-var bold_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_bold_props.default
+});

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

@@ -24,10 +24,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var box_ws_exports = {};
 __export(box_ws_exports, {
-  default: () => box_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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: {
@@ -39,7 +41,9 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: import_icons.SquareIcon,
-  presetStyle,
-  props: import_box_props.default
+  presetStyle
 };
-var box_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_box_props.default,
+  initialProps: ["tag"]
+});

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

@@ -24,16 +24,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var button_ws_exports = {};
 __export(button_ws_exports, {
-  default: () => button_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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",
   label: "Button",
   Icon: import_icons.ButtonIcon,
-  children: ["Button text you can edit"],
-  props: import_button_props.default
+  children: ["Button text you can edit"]
 };
-var button_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_button_props.default,
+  initialProps: ["type"]
+});

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

@@ -18,62 +18,27 @@ 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
+  WsComponentMeta: () => WsComponentMeta,
+  WsComponentPropsMeta: () => WsComponentPropsMeta
 });
 module.exports = __toCommonJS(component_type_exports);
 var import_zod = require("zod");
-const Props = import_zod.z.record(
-  import_zod.z.union([
-    import_zod.z.object({
-      type: import_zod.z.literal("number"),
-      required: import_zod.z.boolean(),
-      defaultValue: import_zod.z.number().nullable()
-    }),
-    import_zod.z.object({
-      type: import_zod.z.literal("text"),
-      required: import_zod.z.boolean(),
-      defaultValue: import_zod.z.string().nullable()
-    }),
-    import_zod.z.object({
-      type: import_zod.z.literal("color"),
-      required: import_zod.z.boolean(),
-      defaultValue: import_zod.z.string().nullable()
-    }),
-    import_zod.z.object({
-      type: import_zod.z.literal("boolean"),
-      required: import_zod.z.boolean(),
-      defaultValue: import_zod.z.boolean().nullable()
-    }),
-    import_zod.z.object({
-      type: import_zod.z.enum([
-        "radio",
-        "inline-radio",
-        "check",
-        "inline-check",
-        "multi-select",
-        "select"
-      ]),
-      required: import_zod.z.boolean(),
-      options: import_zod.z.array(import_zod.z.string()),
-      defaultValue: import_zod.z.string().nullable()
-    })
-  ])
-);
-const WsComponentMeta = import_zod.z.lazy(
-  () => import_zod.z.object({
-    type: import_zod.z.enum([
-      "body",
-      "container",
-      "control",
-      "embed",
-      "rich-text",
-      "rich-text-child"
-    ]),
-    label: import_zod.z.string(),
-    Icon: import_zod.z.any(),
-    presetStyle: import_zod.z.optional(import_zod.z.any()),
-    children: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
-    props: Props,
-    initialProps: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))
-  })
-);
+var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
+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()
+});
+const WsComponentMeta = import_zod.z.object({
+  type: import_zod.z.enum([
+    "body",
+    "container",
+    "control",
+    "embed",
+    "rich-text",
+    "rich-text-child"
+  ]),
+  label: import_zod.z.string(),
+  Icon: import_zod.z.any(),
+  presetStyle: import_zod.z.optional(import_zod.z.any()),
+  children: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))
+});

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

@@ -24,10 +24,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var form_ws_exports = {};
 __export(form_ws_exports, {
-  default: () => form_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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: {
@@ -44,7 +46,8 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: import_icons.FormIcon,
-  presetStyle,
-  props: import_form_props.default
+  presetStyle
 };
-var form_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_form_props.default
+});

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

@@ -24,16 +24,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var heading_ws_exports = {};
 __export(heading_ws_exports, {
-  default: () => heading_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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",
   label: "Heading",
   Icon: import_icons.HeadingIcon,
-  children: ["Heading you can edit"],
-  props: import_heading_props.default
+  children: ["Heading you can edit"]
 };
-var heading_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_heading_props.default,
+  initialProps: ["tag"]
+});

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

@@ -24,10 +24,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var image_ws_exports = {};
 __export(image_ws_exports, {
-  default: () => image_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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: {
@@ -44,8 +46,12 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: import_icons.ImageIcon,
-  presetStyle,
-  props: import_image_props.default,
-  initialProps: ["src", "width", "height", "alt", "loading"]
+  presetStyle
 };
-var image_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  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/index.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,92 +15,158 @@ 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 components_exports = {};
 __export(components_exports, {
   getComponent: () => getComponent,
   getComponentMeta: () => getComponentMeta,
-  getComponentMetaProps: () => getComponentMetaProps,
   getComponentNames: () => getComponentNames,
-  registerComponents: () => registerComponents,
-  registerComponentsMeta: () => registerComponentsMeta
+  getComponentPropsMeta: () => getComponentPropsMeta,
+  registerComponentMetas: () => registerComponentMetas,
+  registerComponentPropsMetas: () => registerComponentPropsMetas,
+  registerComponents: () => registerComponents
 });
 module.exports = __toCommonJS(components_exports);
-var import_body = __toESM(require("./body.ws"), 1);
-var import_box = __toESM(require("./box.ws"), 1);
-var import_text_block = __toESM(require("./text-block.ws"), 1);
-var import_heading = __toESM(require("./heading.ws"), 1);
-var import_paragraph = __toESM(require("./paragraph.ws"), 1);
-var import_link = __toESM(require("./link.ws"), 1);
-var import_rich_text_link = __toESM(require("./rich-text-link.ws"), 1);
-var import_span = __toESM(require("./span.ws"), 1);
-var import_bold = __toESM(require("./bold.ws"), 1);
-var import_italic = __toESM(require("./italic.ws"), 1);
-var import_superscript = __toESM(require("./superscript.ws"), 1);
-var import_subscript = __toESM(require("./subscript.ws"), 1);
-var import_button = __toESM(require("./button.ws"), 1);
-var import_input = __toESM(require("./input.ws"), 1);
-var import_form = __toESM(require("./form.ws"), 1);
-var import_image = __toESM(require("./image.ws"), 1);
-var import_body2 = require("./body");
-var import_box2 = require("./box");
-var import_text_block2 = require("./text-block");
-var import_heading2 = require("./heading");
-var import_paragraph2 = require("./paragraph");
-var import_link2 = require("./link");
-var import_rich_text_link2 = require("./rich-text-link");
-var import_span2 = require("./span");
-var import_bold2 = require("./bold");
-var import_italic2 = require("./italic");
-var import_superscript2 = require("./superscript");
-var import_subscript2 = require("./subscript");
-var import_button2 = require("./button");
-var import_input2 = require("./input");
-var import_form2 = require("./form");
-var import_image2 = require("./image");
-const meta = {
-  Box: import_box.default,
-  Body: import_body.default,
-  TextBlock: import_text_block.default,
-  Heading: import_heading.default,
-  Paragraph: import_paragraph.default,
-  Link: import_link.default,
-  RichTextLink: import_rich_text_link.default,
-  Span: import_span.default,
-  Bold: import_bold.default,
-  Italic: import_italic.default,
-  Superscript: import_superscript.default,
-  Subscript: import_subscript.default,
-  Button: import_button.default,
-  Input: import_input.default,
-  Form: import_form.default,
-  Image: import_image.default
+var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
+var import_body = require("./body.ws");
+var import_box = require("./box.ws");
+var import_text_block = require("./text-block.ws");
+var import_heading = require("./heading.ws");
+var import_paragraph = require("./paragraph.ws");
+var import_link = require("./link.ws");
+var import_rich_text_link = require("./rich-text-link.ws");
+var import_span = require("./span.ws");
+var import_bold = require("./bold.ws");
+var import_italic = require("./italic.ws");
+var import_superscript = require("./superscript.ws");
+var import_subscript = require("./subscript.ws");
+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_body2 = require("./body.ws");
+var import_box2 = require("./box.ws");
+var import_text_block2 = require("./text-block.ws");
+var import_heading2 = require("./heading.ws");
+var import_paragraph2 = require("./paragraph.ws");
+var import_link2 = require("./link.ws");
+var import_rich_text_link2 = require("./rich-text-link.ws");
+var import_span2 = require("./span.ws");
+var import_bold2 = require("./bold.ws");
+var import_italic2 = require("./italic.ws");
+var import_superscript2 = require("./superscript.ws");
+var import_subscript2 = require("./subscript.ws");
+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");
+const defaultMetas = {
+  Box: import_box.meta,
+  Body: import_body.meta,
+  TextBlock: import_text_block.meta,
+  Heading: import_heading.meta,
+  Paragraph: import_paragraph.meta,
+  Link: import_link.meta,
+  RichTextLink: import_rich_text_link.meta,
+  Span: import_span.meta,
+  Bold: import_bold.meta,
+  Italic: import_italic.meta,
+  Superscript: import_superscript.meta,
+  Subscript: import_subscript.meta,
+  Button: import_button.meta,
+  Input: import_input.meta,
+  Form: import_form.meta,
+  Image: import_image.meta
 };
-const components = {
-  Box: import_box2.Box,
-  Body: import_body2.Body,
-  TextBlock: import_text_block2.TextBlock,
-  Heading: import_heading2.Heading,
-  Paragraph: import_paragraph2.Paragraph,
-  Link: import_link2.Link,
-  RichTextLink: import_rich_text_link2.RichTextLink,
-  Span: import_span2.Span,
-  Bold: import_bold2.Bold,
-  Italic: import_italic2.Italic,
-  Superscript: import_superscript2.Superscript,
-  Subscript: import_subscript2.Subscript,
-  Button: import_button2.Button,
-  Input: import_input2.Input,
-  Form: import_form2.Form,
-  Image: import_image2.Image
+let currentMetas = defaultMetas;
+const getComponentMeta = (name) => {
+  return currentMetas[name];
+};
+const registerComponentMetas = (overrides) => {
+  const result = {};
+  for (const name of Object.keys(defaultMetas)) {
+    result[name] = { ...defaultMetas[name], ...overrides[name] };
+  }
+  currentMetas = result;
+};
+const defaultPropsMetas = {
+  Box: import_box2.propsMeta,
+  Body: import_body2.propsMeta,
+  TextBlock: import_text_block2.propsMeta,
+  Heading: import_heading2.propsMeta,
+  Paragraph: import_paragraph2.propsMeta,
+  Link: import_link2.propsMeta,
+  RichTextLink: import_rich_text_link2.propsMeta,
+  Span: import_span2.propsMeta,
+  Bold: import_bold2.propsMeta,
+  Italic: import_italic2.propsMeta,
+  Superscript: import_superscript2.propsMeta,
+  Subscript: import_subscript2.propsMeta,
+  Button: import_button2.propsMeta,
+  Input: import_input2.propsMeta,
+  Form: import_form2.propsMeta,
+  Image: import_image2.propsMeta
+};
+let registeredPropsMetas = {};
+let currentPropsMetas = void 0;
+const getComponentPropsMeta = (name) => {
+  if (currentPropsMetas === void 0) {
+    currentPropsMetas = {};
+    for (const name2 of Object.keys(defaultPropsMetas)) {
+      const props = computeProps(
+        defaultPropsMetas[name2],
+        registeredPropsMetas[name2] ?? {}
+      );
+      const initialProps = computeInitialProps(
+        props,
+        defaultPropsMetas[name2],
+        registeredPropsMetas[name2] ?? {}
+      );
+      currentPropsMetas[name2] = { props, initialProps };
+    }
+  }
+  return currentPropsMetas[name];
+};
+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;
-let registeredComponentsMeta = null;
-const componentNames = Object.keys(components);
+const componentNames = Object.keys(defaultComponents);
 const getComponentNames = () => {
   const uniqueNames = /* @__PURE__ */ new Set([
     ...componentNames,
@@ -110,43 +174,33 @@ const getComponentNames = () => {
   ]);
   return [...uniqueNames.values()];
 };
-const getComponentMeta = (name) => {
-  const componentMeta = meta[name];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return {
-      ...componentMeta,
-      ...registeredComponentsMeta[name]
-    };
-  }
-  return componentMeta;
-};
 const getComponent = (name) => {
-  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
+  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : defaultComponents[name];
+};
+const registerComponents = (components) => {
+  registeredComponents = components;
 };
-const getComponentMetaProps = (name) => {
-  const componentMeta = meta[name];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    const registeredComponentMeta = registeredComponentsMeta[name];
-    const allMetaPropKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(componentMeta?.props ?? {}),
-      ...Object.keys(registeredComponentMeta.props)
-    ]);
-    const props = {};
-    for (const key of allMetaPropKeys.values()) {
-      props[key] = {
-        ...componentMeta?.props[key],
-        ...registeredComponentMeta?.props?.[key],
-        defaultValue: registeredComponentMeta?.props?.[key]?.defaultValue ?? componentMeta?.props[key]?.defaultValue ?? null,
-        required: registeredComponentMeta?.props?.[key]?.required || componentMeta?.props[key]?.required
-      };
+const computeProps = (defaults, overrides) => {
+  if (overrides) {
+    const allNames = (/* @__PURE__ */ new Set([
+      ...Object.keys(defaults.props ?? {}),
+      ...Object.keys(overrides?.props ?? {})
+    ])).values();
+    const result = {};
+    for (const name of allNames) {
+      result[name] = import_generate_arg_types.PropMeta.parse({
+        ...defaults.props[name],
+        ...overrides?.props?.[name]
+      });
     }
-    return props;
+    return result;
   }
-  return componentMeta?.props;
-};
-const registerComponents = (components2) => {
-  registeredComponents = components2;
+  return defaults.props;
 };
-const registerComponentsMeta = (componentsMeta) => {
-  registeredComponentsMeta = componentsMeta;
+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
+  ).map(([name]) => name) : [];
+  return [...initialProps, ...requiredProps];
 };

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

@@ -24,15 +24,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var input_ws_exports = {};
 __export(input_ws_exports, {
-  default: () => input_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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,
-  props: import_input_props.default
+  Icon: import_icons.InputIcon
 };
-var input_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_input_props.default
+});

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

@@ -24,10 +24,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var italic_ws_exports = {};
 __export(italic_ws_exports, {
-  default: () => italic_ws_default
+  meta: () => meta,
+  propsMeta: () => propsMeta
 });
 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: {
@@ -39,7 +41,8 @@ const meta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: import_icons.FontItalicIcon,
-  presetStyle,
-  props: import_italic_props.default
+  presetStyle
 };
-var italic_ws_default = meta;
+const propsMeta = import_component_type.WsComponentPropsMeta.parse({
+  props: import_italic_props.default
+});