@webstudio-is/react-sdk 0.62.0 → 0.64.0

package/lib/app/custom-components/__generated__/form.props.js

@@ -3,10 +3,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -404,6 +402,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

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

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
   forwardRef
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
 const onlyErrorMessage = (children) => Children.map(children, (child) => {
@@ -46,7 +49,15 @@ const withoutMessages = (children) => Children.map(children, (child) => {
   }
   return withoutMessages(child);
 });
-const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = getInstanceIdFromComponentProps(props);
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";
 export {
   Form,

package/lib/cjs/app/custom-components/__generated__/form.props.js

@@ -26,10 +26,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -427,6 +425,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

package/lib/cjs/app/custom-components/form.js

@@ -23,10 +23,13 @@ __export(form_exports, {
 });
 module.exports = __toCommonJS(form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = require("@remix-run/react");
+var import_form_handlers = require("@webstudio-is/form-handlers");
+var import_react2 = require("react");
+var import_props = require("../../props");
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
-const onlyErrorMessage = (children) => import_react.Children.map(children, (child) => {
+const onlyErrorMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -35,11 +38,11 @@ const onlyErrorMessage = (children) => import_react.Children.map(children, (chil
   }
   if ("props" in child) {
     const newChildren = onlyErrorMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlyErrorMessage(child);
 });
-const onlySuccessMessage = (children) => import_react.Children.map(children, (child) => {
+const onlySuccessMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -48,11 +51,11 @@ const onlySuccessMessage = (children) => import_react.Children.map(children, (ch
   }
   if ("props" in child) {
     const newChildren = onlySuccessMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlySuccessMessage(child);
 });
-const withoutMessages = (children) => import_react.Children.map(children, (child) => {
+const withoutMessages = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return child;
   }
@@ -60,11 +63,19 @@ const withoutMessages = (children) => import_react.Children.map(children, (child
     return null;
   }
   if ("props" in child) {
-    return (0, import_react.cloneElement)(child, {
+    return (0, import_react2.cloneElement)(child, {
       children: withoutMessages(child.props.children)
     });
   }
   return withoutMessages(child);
 });
-const Form = (0, import_react.forwardRef)(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = (0, import_react2.forwardRef)(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = (0, import_react.useFetcher)();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = (0, import_props.getInstanceIdFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: import_form_handlers.formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";

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

@@ -23,6 +23,7 @@ __export(blockquote_ws_exports, {
 });
 module.exports = __toCommonJS(blockquote_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_blockquote = require("./__generated__/blockquote.props");
 const presetStyle = {
   blockquote: [
@@ -77,6 +78,7 @@ const meta = {
   type: "rich-text",
   label: "Blockquote",
   Icon: import_icons.BlockquoteIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]
 };

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

@@ -24,6 +24,7 @@ __export(body_ws_exports, {
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_body = require("./__generated__/body.props");
 const presetStyle = {
   body: [
@@ -56,6 +57,7 @@ const meta = {
   type: "container",
   label: "Body",
   Icon: import_icons.BodyIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(bold_ws_exports, {
 });
 module.exports = __toCommonJS(bold_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_bold = require("./__generated__/bold.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: import_icons.BoldIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(box_ws_exports, {
 });
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_box = require("./__generated__/box.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -42,6 +43,7 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: import_icons.BoxIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(button_ws_exports, {
 module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_button = require("./__generated__/button.props");
 const presetStyle = {
   button: import_normalize.button
@@ -35,7 +36,7 @@ const meta = {
   Icon: import_icons.ButtonElementIcon,
   presetStyle,
   states: [
-    { selector: ":active", label: "Active" },
+    ...import_component_meta.defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]

package/lib/cjs/components/checkbox-field.ws.js

@@ -23,6 +23,7 @@ __export(checkbox_field_ws_exports, {
 });
 module.exports = __toCommonJS(checkbox_field_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_checkbox_field = require("./__generated__/checkbox-field.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Checkbox Field",
   Icon: import_icons.CheckboxCheckedIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "Checkbox", props: [], children: [] },

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

@@ -23,6 +23,7 @@ __export(checkbox_ws_exports, {
 });
 module.exports = __toCommonJS(checkbox_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_checkbox = require("./__generated__/checkbox.props");
 const presetStyle = {
@@ -40,6 +41,7 @@ const meta = {
   Icon: import_icons.CheckboxCheckedIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },

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

@@ -23,6 +23,7 @@ __export(code_ws_exports, {
 });
 module.exports = __toCommonJS(code_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_code = require("./code");
 var import_code2 = require("./__generated__/code.props");
 var import_normalize = require("../css/normalize");
@@ -56,6 +57,7 @@ const meta = {
   type: "rich-text",
   label: "Code",
   Icon: import_icons.CodeIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]
 };

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

@@ -19,7 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var component_meta_exports = {};
 __export(component_meta_exports, {
   ComponentState: () => ComponentState,
-  componentCategories: () => componentCategories
+  componentCategories: () => componentCategories,
+  defaultStates: () => defaultStates,
+  stateCategories: () => stateCategories
 });
 module.exports = __toCommonJS(component_meta_exports);
 var import_zod = require("zod");
@@ -35,10 +37,19 @@ const componentCategories = [
   "media",
   "forms"
 ];
+const stateCategories = ["states", "component-states"];
 const ComponentState = import_zod.z.object({
+  category: import_zod.z.enum(stateCategories).optional(),
   selector: import_zod.z.string(),
   label: import_zod.z.string()
 });
+const defaultStates = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" }
+];
 const WsComponentMeta = import_zod.z.object({
   category: import_zod.z.enum(componentCategories).optional(),
   // container - can accept other components with dnd

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

@@ -24,6 +24,7 @@ __export(form_ws_exports, {
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
   form: [
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: import_icons.FormIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     {

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

@@ -24,6 +24,7 @@ __export(heading_ws_exports, {
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_heading = require("./__generated__/heading.props");
 const presetStyle = {
   h1: import_normalize.h1,
@@ -39,6 +40,7 @@ const meta = {
   label: "Heading",
   Icon: import_icons.HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(image_ws_exports, {
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_image = require("./__generated__/image.props");
 const presetStyle = {
   img: [
@@ -46,6 +47,7 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: import_icons.ImageIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(input_ws_exports, {
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_input = require("./__generated__/input.props");
 const presetStyle = {
   input: import_normalize.input
@@ -35,6 +36,7 @@ const meta = {
   Icon: import_icons.FormTextFieldIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

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

@@ -23,6 +23,7 @@ __export(italic_ws_exports, {
 });
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_italic = require("./__generated__/italic.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -38,6 +39,7 @@ const meta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: import_icons.TextItalicIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(label_ws_exports, {
 });
 module.exports = __toCommonJS(label_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_label = require("./__generated__/label.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -36,6 +37,7 @@ const meta = {
   type: "rich-text",
   label: "Input Label",
   Icon: import_icons.TextBlockIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }]
 };

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

@@ -24,6 +24,7 @@ __export(link_ws_exports, {
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
   a: [
@@ -44,7 +45,18 @@ const meta = {
   label: "Link Text",
   Icon: import_icons.LinkIcon,
   presetStyle,
-  states: [{ selector: "[aria-current=page]", label: "Current page" }],
+  states: [
+    ...import_component_meta.defaultStates,
+    {
+      selector: ":visited",
+      label: "Visited"
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page"
+    }
+  ],
   children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(list_item_ws_exports, {
 module.exports = __toCommonJS(list_item_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_list_item = require("./__generated__/list-item.props");
 const presetStyle = {
   li: import_normalize.li
@@ -35,6 +36,7 @@ const meta = {
   label: "List Item",
   Icon: import_icons.ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(list_ws_exports, {
 });
 module.exports = __toCommonJS(list_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_list = require("./__generated__/list.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -62,6 +63,7 @@ const meta = {
   type: "container",
   label: "List",
   Icon: import_icons.ListIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: []
 };

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

@@ -24,6 +24,7 @@ __export(paragraph_ws_exports, {
 module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_paragraph = require("./__generated__/paragraph.props");
 const presetStyle = {
   p: import_normalize.p
@@ -34,6 +35,7 @@ const meta = {
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(radio_button_field_ws_exports, {
 });
 module.exports = __toCommonJS(radio_button_field_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_radio_button_field = require("./__generated__/radio-button-field.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -36,6 +37,7 @@ const meta = {
   type: "container",
   label: "Radio Button Field",
   Icon: import_icons.RadioCheckedIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [
     { type: "instance", component: "RadioButton", props: [], children: [] },

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

@@ -23,6 +23,7 @@ __export(radio_button_ws_exports, {
 });
 module.exports = __toCommonJS(radio_button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_radio_button = require("./__generated__/radio-button.props");
 const presetStyle = {
@@ -40,6 +41,7 @@ const meta = {
   Icon: import_icons.RadioCheckedIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },

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

@@ -23,6 +23,7 @@ __export(separator_ws_exports, {
 });
 module.exports = __toCommonJS(separator_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_separator = require("./__generated__/separator.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -59,6 +60,7 @@ const meta = {
   type: "embed",
   label: "Separator",
   Icon: import_icons.DashIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: []
 };

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

@@ -24,6 +24,7 @@ __export(span_ws_exports, {
 module.exports = __toCommonJS(span_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_span = require("./__generated__/span.props");
 const presetStyle = {
   span: import_normalize.span
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: import_icons.PaintBrushIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(subscript_ws_exports, {
 module.exports = __toCommonJS(subscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_subscript = require("./__generated__/subscript.props");
 const presetStyle = {
   sub: import_normalize.sub
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: import_icons.SubscriptIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -24,6 +24,7 @@ __export(superscript_ws_exports, {
 module.exports = __toCommonJS(superscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_superscript = require("./__generated__/superscript.props");
 const presetStyle = {
   sup: import_normalize.sup
@@ -32,6 +33,7 @@ const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: import_icons.SuperscriptIcon,
+  states: import_component_meta.defaultStates,
   presetStyle
 };
 const propsMeta = {

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

@@ -23,6 +23,7 @@ __export(text_block_ws_exports, {
 });
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_component_meta = require("./component-meta");
 var import_text_block = require("./__generated__/text-block.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -39,6 +40,7 @@ const meta = {
   type: "rich-text",
   label: "Text Block",
   Icon: import_icons.TextBlockIcon,
+  states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]
 };

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

@@ -24,6 +24,7 @@ __export(textarea_ws_exports, {
 module.exports = __toCommonJS(textarea_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_normalize = require("../css/normalize");
+var import_component_meta = require("./component-meta");
 var import_textarea = require("./__generated__/textarea.props");
 const presetStyle = {
   textarea: [
@@ -39,6 +40,7 @@ const meta = {
   Icon: import_icons.FormTextAreaIcon,
   presetStyle,
   states: [
+    ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

package/lib/cjs/index.js

@@ -22,7 +22,8 @@ __export(src_exports, {
   componentCategories: () => import_component_meta.componentCategories,
   customComponentMetas: () => import_custom_components.customComponentMetas,
   customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
-  customComponents: () => import_custom_components.customComponents
+  customComponents: () => import_custom_components.customComponents,
+  stateCategories: () => import_component_meta.stateCategories
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);

package/lib/components/blockquote.ws.js

@@ -1,4 +1,7 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
+import {
+  defaultStates
+} from "./component-meta";
 import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
   blockquote: [
@@ -53,6 +56,7 @@ const meta = {
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]
 };