@webstudio-is/sdk-components-react 0.70.0

package/lib/cjs/paragraph.ws.js

@@ -0,0 +1,50 @@
+"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 paragraph_ws_exports = {};
+__export(paragraph_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(paragraph_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_paragraph = require("./__generated__/paragraph.props");
+const presetStyle = {
+  p: import_css_normalize.p
+};
+const meta = {
+  category: "text",
+  type: "rich-text",
+  label: "Paragraph",
+  icon: import_svg.TextAlignLeftIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }]
+    }
+  ],
+  order: 2
+};
+const propsMeta = {
+  props: import_paragraph.props
+};

package/lib/cjs/props.js

@@ -0,0 +1,88 @@
+"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 props_exports = {};
+__export(props_exports, {
+  Blockquote: () => import_blockquote.propsMeta,
+  Body: () => import_body.propsMeta,
+  Bold: () => import_bold.propsMeta,
+  Box: () => import_box.propsMeta,
+  Button: () => import_button.propsMeta,
+  Checkbox: () => import_checkbox.propsMeta,
+  CheckboxField: () => import_checkbox_field.propsMeta,
+  CodeText: () => import_code_text.propsMeta,
+  ErrorMessage: () => import_error_message.propsMeta,
+  Form: () => import_form.propsMeta,
+  Fragment: () => import_fragment.propsMeta,
+  Heading: () => import_heading.propsMeta,
+  HtmlEmbed: () => import_html_embed.propsMeta,
+  Image: () => import_image.propsMeta,
+  Input: () => import_input.propsMeta,
+  Italic: () => import_italic.propsMeta,
+  Label: () => import_label.propsMeta,
+  Link: () => import_link.propsMeta,
+  LinkBlock: () => import_link_block.propsMeta,
+  List: () => import_list.propsMeta,
+  ListItem: () => import_list_item.propsMeta,
+  Paragraph: () => import_paragraph.propsMeta,
+  RadioButton: () => import_radio_button.propsMeta,
+  RadioButtonField: () => import_radio_button_field.propsMeta,
+  RichTextLink: () => import_rich_text_link.propsMeta,
+  Separator: () => import_separator.propsMeta,
+  Slot: () => import_slot.propsMeta,
+  Span: () => import_span.propsMeta,
+  Subscript: () => import_subscript.propsMeta,
+  SuccessMessage: () => import_success_message.propsMeta,
+  Superscript: () => import_superscript.propsMeta,
+  TextBlock: () => import_text_block.propsMeta,
+  Textarea: () => import_textarea.propsMeta
+});
+module.exports = __toCommonJS(props_exports);
+var import_slot = require("./slot.ws");
+var import_fragment = require("./fragment.ws");
+var import_html_embed = require("./html-embed.ws");
+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_link_block = require("./link-block.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_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_text = require("./code-text.ws");
+var import_label = require("./label.ws");
+var import_success_message = require("./success-message.ws");
+var import_error_message = require("./error-message.ws");
+var import_textarea = require("./textarea.ws");
+var import_radio_button_field = require("./radio-button-field.ws");
+var import_radio_button = require("./radio-button.ws");
+var import_checkbox_field = require("./checkbox-field.ws");
+var import_checkbox = require("./checkbox.ws");

package/lib/cjs/radio-button-field.js

@@ -0,0 +1,29 @@
+"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 radio_button_field_exports = {};
+__export(radio_button_field_exports, {
+  RadioButtonField: () => RadioButtonField,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(radio_button_field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "label";
+const RadioButtonField = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, ref }));
+RadioButtonField.displayName = "RadioButtonField";

package/lib/cjs/radio-button-field.ws.js

@@ -0,0 +1,62 @@
+"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 radio_button_field_ws_exports = {};
+__export(radio_button_field_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(radio_button_field_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_radio_button_field = require("./__generated__/radio-button-field.props");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+const presetStyle = {
+  label: [
+    ...import_css_normalize.label,
+    { property: "display", value: { type: "keyword", value: "flex" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Radio",
+  icon: import_svg.RadioCheckedIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "RadioButtonField",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Radio Label",
+          props: [],
+          children: [{ type: "text", value: "Radio" }]
+        }
+      ]
+    }
+  ]
+};
+const propsMeta = {
+  props: import_radio_button_field.props,
+  initialProps: []
+};

package/lib/cjs/radio-button.js

@@ -0,0 +1,29 @@
+"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 radio_button_exports = {};
+__export(radio_button_exports, {
+  RadioButton: () => RadioButton,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(radio_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "input";
+const RadioButton = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...props, type: "radio", ref }));
+RadioButton.displayName = "RadioButton";

package/lib/cjs/radio-button.ws.js

@@ -0,0 +1,58 @@
+"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 radio_button_ws_exports = {};
+__export(radio_button_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(radio_button_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_radio_button = require("./__generated__/radio-button.props");
+const presetStyle = {
+  input: [
+    ...import_css_normalize.input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta = {
+  type: "control",
+  label: "Radio Input",
+  icon: import_svg.RadioCheckedIcon,
+  presetStyle,
+  order: 5,
+  states: [
+    ...import_react_sdk.defaultStates,
+    { selector: ":checked", label: "Checked" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+};
+const propsMeta = {
+  props: import_radio_button.props,
+  initialProps: ["name"]
+};

package/lib/cjs/rich-text-link.js

@@ -0,0 +1,28 @@
+"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 rich_text_link_exports = {};
+__export(rich_text_link_exports, {
+  RichTextLink: () => RichTextLink
+});
+module.exports = __toCommonJS(rich_text_link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_link = require("./link");
+const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
+RichTextLink.displayName = "RichTextLink";

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

@@ -0,0 +1,39 @@
+"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 rich_text_link_ws_exports = {};
+__export(rich_text_link_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(rich_text_link_ws_exports);
+var import_rich_text_link = require("./__generated__/rich-text-link.props");
+var import_link = require("./link.ws");
+const { category, ...linkMetaRest } = import_link.meta;
+const meta = {
+  ...linkMetaRest,
+  type: "rich-text-child",
+  template: []
+};
+const propsMeta = {
+  initialProps: import_link.propsMeta.initialProps,
+  props: {
+    ...import_rich_text_link.props,
+    href: import_link.propsMeta.props.href
+  }
+};

package/lib/cjs/separator.js

@@ -0,0 +1,32 @@
+"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 separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(separator_exports);
+var import_react = require("react");
+const defaultTag = "hr";
+const Separator = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return (0, import_react.createElement)(defaultTag, { ...props, ref });
+  }
+);
+Separator.displayName = "Separator";

package/lib/cjs/separator.ws.js

@@ -0,0 +1,70 @@
+"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 separator_ws_exports = {};
+__export(separator_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(separator_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_separator = require("./__generated__/separator.props");
+const presetStyle = {
+  hr: [
+    ...import_css_normalize.hr,
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
+    },
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
+    }
+  ]
+};
+const meta = {
+  category: "general",
+  type: "embed",
+  label: "Separator",
+  icon: import_svg.DashIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  order: 5
+};
+const propsMeta = {
+  props: import_separator.props,
+  initialProps: []
+};

package/lib/cjs/slot.js

@@ -0,0 +1,36 @@
+"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 slot_exports = {};
+__export(slot_exports, {
+  Slot: () => Slot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Slot = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      style: { display: props.children ? "contents" : "block" }
+    }
+  );
+});
+Slot.displayName = "Slot";

package/lib/cjs/slot.ws.js

@@ -0,0 +1,36 @@
+"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 slot_ws_exports = {};
+__export(slot_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(slot_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  icon: import_svg.SlotComponentIcon,
+  stylable: false,
+  order: 6
+};
+const propsMeta = {
+  props: {}
+};

package/lib/cjs/span.js

@@ -0,0 +1,29 @@
+"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 span_exports = {};
+__export(span_exports, {
+  Span: () => Span,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(span_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "span";
+const Span = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props, ref }));
+Span.displayName = "Span";

package/lib/cjs/span.ws.js

@@ -0,0 +1,41 @@
+"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 span_ws_exports = {};
+__export(span_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(span_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_span = require("./__generated__/span.props");
+const presetStyle = {
+  span: import_css_normalize.span
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Styled Text",
+  icon: import_svg.PaintBrushIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props: import_span.props
+};

package/lib/cjs/subscript.js

@@ -0,0 +1,29 @@
+"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 subscript_exports = {};
+__export(subscript_exports, {
+  Subscript: () => Subscript,
+  defaultTag: () => defaultTag
+});
+module.exports = __toCommonJS(subscript_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const defaultTag = "sub";
+const Subscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", { ...props, ref }));
+Subscript.displayName = "Subscript";