@webstudio-is/sdk-components-react 0.209.0 → 0.212.0

package/lib/box.ws.js

@@ -1,31 +1,51 @@
 import { BoxIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
-import { div as o, address as r, article as a, aside as i, figure as n, footer as s, header as c, main as p, nav as d, section as m } from "@webstudio-is/sdk/normalize.css";
+import { div as r, address as o, article as a, aside as i, figure as s, footer as n, header as p, main as c, nav as d, section as m } from "@webstudio-is/sdk/normalize.css";
 import { props as f } from "./__generated__/box.props.js";
-const g = {
-  div: o,
-  address: r,
-  article: a,
-  aside: i,
-  figure: n,
-  footer: s,
-  header: c,
-  main: p,
-  nav: d,
-  section: m
-}, v = {
+const v = {
   category: "general",
   type: "container",
   description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
   icon: t,
   states: e,
-  presetStyle: g,
+  presetStyle: {
+    div: r,
+    address: o,
+    article: a,
+    aside: i,
+    figure: s,
+    footer: n,
+    header: p,
+    main: c,
+    nav: d,
+    section: m
+  },
   order: 0
-}, b = {
-  props: f,
-  initialProps: ["id", "className", "tag"]
+}, y = {
+  props: {
+    ...f,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: [
+        "div",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "section",
+        "article",
+        "aside",
+        "address",
+        "figure",
+        "span"
+      ]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
   v as meta,
-  b as propsMeta
+  y as propsMeta
 };

package/lib/button.ws.js

@@ -1,27 +1,23 @@
 import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
 import { button as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/button.props.js";
-const a = {
+import { props as a } from "./__generated__/button.props.js";
+const l = {
   button: o
 }, p = {
   icon: t,
   type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a,
+  presetStyle: l,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
-}, c = {
-  props: n,
+}, m = {
+  props: a,
   initialProps: ["id", "className", "type", "aria-label"]
 };
 export {
   p as meta,
-  c as propsMeta
+  m as propsMeta
 };

package/lib/checkbox.template.js

@@ -6,7 +6,7 @@ const l = {
   order: 6,
   template: /* @__PURE__ */ r(e.Label, { "ws:label": "Checkbox Field", children: [
     /* @__PURE__ */ o(e.Checkbox, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Checkbox Label", tag: "span", children: new c("Checkbox") })
+    /* @__PURE__ */ o(e.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new c("Checkbox") })
   ] })
 };
 export {

package/lib/checkbox.ws.js

@@ -1,25 +1,21 @@
 import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/checkbox.props.js";
-const r = {
+import { defaultStates as l } from "@webstudio-is/sdk";
+import { checkbox as t } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/checkbox.props.js";
+const o = {
   input: [
-    ...o,
+    ...t,
     {
       property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, d = {
   type: "control",
   icon: e,
-  presetStyle: r,
+  presetStyle: o,
   states: [
-    ...t,
+    ...l,
     { selector: ":checked", label: "Checked" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" },
@@ -28,11 +24,11 @@ const r = {
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" }
   ]
-}, p = {
-  props: l,
+}, n = {
+  props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
-  s as meta,
-  p as propsMeta
+  d as meta,
+  n as propsMeta
 };

package/lib/code-text.ws.js

@@ -30,19 +30,15 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i = {
+}, d = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "CodeText" }
-  },
   states: t,
   presetStyle: p,
   order: 5
-}, c = {
+}, n = {
   props: {
     ...r,
     code: {
@@ -54,6 +50,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  i as meta,
-  c as propsMeta
+  d as meta,
+  n as propsMeta
 };

package/lib/components.js

@@ -10,7 +10,7 @@ import { Paragraph as c } from "./paragraph.js";
 import { Link as B, Link as L } from "./link.js";
 import { Span as g } from "./span.js";
 import { Bold as I } from "./bold.js";
-import { Italic as V } from "./italic.js";
+import { Italic as h } from "./italic.js";
 import { Superscript as R } from "./superscript.js";
 import { Subscript as y } from "./subscript.js";
 import { Button as E } from "./button.js";
@@ -36,11 +36,12 @@ import { XmlNode as co } from "./xml-node.js";
 import { XmlTime as Bo } from "./xml-time.js";
 import { Time as Ho } from "./time.js";
 import { Select as Fo } from "./select.js";
-import { Option as ho } from "./option.js";
+import { Option as Vo } from "./option.js";
 import { HeadSlot as Po } from "./head-slot.js";
 import { HeadLink as wo } from "./head-link.js";
 import { HeadMeta as Co } from "./head-meta.js";
 import { HeadTitle as Mo } from "./head-title.js";
+import { Video as qo } from "./video.js";
 export {
   z as Blockquote,
   n as Body,
@@ -59,13 +60,13 @@ export {
   x as HtmlEmbed,
   Y as Image,
   X as Input,
-  V as Italic,
+  h as Italic,
   $ as Label,
   B as Link,
   D as List,
   J as ListItem,
   a as MarkdownEmbed,
-  ho as Option,
+  Vo as Option,
   c as Paragraph,
   to as RadioButton,
   O as RemixForm,
@@ -79,6 +80,7 @@ export {
   k as Text,
   ro as Textarea,
   Ho as Time,
+  qo as Video,
   fo as Vimeo,
   ko as VimeoPlayButton,
   lo as VimeoPreviewImage,

package/lib/form.ws.js

@@ -1,30 +1,26 @@
-import { FormIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { form as r } from "@webstudio-is/sdk/normalize.css";
+import { FormIcon as r } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { form as o } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/form.props.js";
-const n = {
+const s = {
   form: [
-    ...r,
+    ...o,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, p = {
+}, n = {
   category: "forms",
   type: "container",
   label: "Form",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   description: "Create filters, surveys, searches and more.",
-  icon: t,
-  states: o,
-  presetStyle: n,
+  icon: r,
+  states: t,
+  presetStyle: s,
   order: 0
 }, c = {
   props: e,
   initialProps: ["id", "className", "action"]
 };
 export {
-  p as meta,
+  n as meta,
   c as propsMeta
 };

package/lib/heading.js

@@ -1,9 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const d = "h1", f = n(
-  ({ tag: a = d, children: o, ...r }, t) => /* @__PURE__ */ e(a, { ...r, ref: t, children: o })
+import { forwardRef as o, createElement as g } from "react";
+import { getTagFromProps as m } from "@webstudio-is/sdk/runtime";
+const n = "h1", d = o(
+  ({ tag: e, ...t }, a) => {
+    const r = m(t) ?? e ?? n;
+    return g(r, { ...t, ref: a });
+  }
 );
-f.displayName = "Heading";
+d.displayName = "Heading";
 export {
-  f as Heading
+  d as Heading
 };

package/lib/heading.ws.js

@@ -1,29 +1,33 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
-import { h1 as e, h2 as n, h3 as r, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as p } from "./__generated__/heading.props.js";
-const c = {
-  h1: e,
-  h2: n,
-  h3: r,
-  h4: a,
-  h5: i,
-  h6: s
-}, f = {
+import { h1 as r, h2 as e, h3 as p, h4 as a, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
+import { props as h } from "./__generated__/heading.props.js";
+const d = {
   type: "container",
   placeholder: "Heading",
   icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Heading" }
-  },
   states: o,
-  presetStyle: c
+  presetStyle: {
+    h1: r,
+    h2: e,
+    h3: p,
+    h4: a,
+    h5: i,
+    h6: s
+  }
 }, g = {
-  props: p,
-  initialProps: ["id", "className", "tag"]
+  props: {
+    ...h,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"]
+    }
+  },
+  initialProps: ["tag", "id", "className"]
 };
 export {
-  f as meta,
+  d as meta,
   g as propsMeta
 };

package/lib/input.ws.js

@@ -1,7 +1,7 @@
 import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
+import { defaultStates as l } from "@webstudio-is/sdk";
 import { input as o } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/input.props.js";
+import { props as t } from "./__generated__/input.props.js";
 const r = {
   input: [
     ...o,
@@ -10,12 +10,8 @@ const r = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p = {
+}, c = {
   category: "forms",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   type: "control",
   label: "Text Input",
   description: "A single-line text input for collecting string data from your users.",
@@ -23,7 +19,7 @@ const r = {
   presetStyle: r,
   order: 3,
   states: [
-    ...t,
+    ...l,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },
@@ -35,8 +31,8 @@ const r = {
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
   ]
-}, c = {
-  props: l,
+}, n = {
+  props: t,
   initialProps: [
     "id",
     "className",
@@ -49,6 +45,6 @@ const r = {
   ]
 };
 export {
-  p as meta,
-  c as propsMeta
+  c as meta,
+  n as propsMeta
 };

package/lib/label.ws.js

@@ -1,27 +1,23 @@
 import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { label as e } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { label as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/label.props.js";
 const a = {
   label: [
-    ...e,
+    ...o,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
+}, m = {
   type: "container",
   label: "Input Label",
   icon: t,
-  states: o,
+  states: e,
   presetStyle: a
-}, m = {
+}, n = {
   props: r,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  i as meta,
-  m as propsMeta
+  m as meta,
+  n as propsMeta
 };

package/lib/link.ws.js

@@ -10,14 +10,10 @@ const a = {
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, l = {
+}, n = {
   type: "container",
   placeholder: "Link",
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
   presetStyle: a,
   states: [
     ...t,
@@ -43,6 +39,6 @@ const a = {
   initialProps: ["id", "className", "href", "target", "prefetch", "download"]
 };
 export {
-  l as meta,
+  n as meta,
   c as propsMeta
 };

package/lib/list-item.ws.js

@@ -2,26 +2,19 @@ import { ListItemIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { li as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/list-item.props.js";
-const s = {
-  li: e
-}, m = {
+const a = {
   type: "container",
   placeholder: "List item",
-  constraints: {
-    // cannot use parent relation here
-    // because list item can be put inside of collection or slot
-    // perhaps can be eventually fixed with tag matchers
-    relation: "ancestor",
-    component: { $eq: "List" }
-  },
   icon: t,
   states: o,
-  presetStyle: s
+  presetStyle: {
+    li: e
+  }
 }, c = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
+  a as meta,
   c as propsMeta
 };

package/lib/metas.js

@@ -3,7 +3,7 @@ import { meta as m } from "./fragment.ws.js";
 import { meta as p } from "./html-embed.ws.js";
 import { meta as s } from "./markdown-embed.ws.js";
 import { meta as i } from "./body.ws.js";
-import { meta as d } from "./box.ws.js";
+import { meta as n } from "./box.ws.js";
 import { meta as u } from "./text.ws.js";
 import { meta as T } from "./heading.ws.js";
 import { meta as B } from "./paragraph.ws.js";
@@ -30,7 +30,7 @@ import { meta as me } from "./radio-button.ws.js";
 import { meta as pe } from "./checkbox.ws.js";
 import { meta as se } from "./vimeo.ws.js";
 import { meta as ie } from "./youtube.ws.js";
-import { meta as de } from "./vimeo-preview-image.ws.js";
+import { meta as ne } from "./vimeo-preview-image.ws.js";
 import { meta as ue } from "./vimeo-play-button.ws.js";
 import { meta as Te } from "./vimeo-spinner.ws.js";
 import { meta as Be } from "./xml-node.ws.js";
@@ -42,11 +42,12 @@ import { meta as Pe } from "./head-slot.ws.js";
 import { meta as we } from "./head-link.ws.js";
 import { meta as Ce } from "./head-meta.ws.js";
 import { meta as Me } from "./head-title.ws.js";
+import { meta as qe } from "./video.ws.js";
 export {
   D as Blockquote,
   i as Body,
   h as Bold,
-  d as Box,
+  n as Box,
   M as Button,
   pe as Checkbox,
   _ as CodeText,
@@ -80,9 +81,10 @@ export {
   u as Text,
   oe as Textarea,
   Le as Time,
+  qe as Video,
   se as Vimeo,
   ue as VimeoPlayButton,
-  de as VimeoPreviewImage,
+  ne as VimeoPreviewImage,
   Te as VimeoSpinner,
   Be as XmlNode,
   ke as XmlTime,

package/lib/option.ws.js

@@ -1,6 +1,6 @@
 import { ItemIcon as e } from "@webstudio-is/icons/svg";
 import { props as t } from "./__generated__/option.props.js";
-const o = {
+const l = {
   option: [
     {
       property: "background-color",
@@ -16,14 +16,10 @@ const o = {
   ]
 }, r = {
   category: "hidden",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "Select" }
-  },
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: e,
-  presetStyle: o,
+  presetStyle: l,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },

package/lib/paragraph.ws.js

@@ -2,23 +2,19 @@ import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { p as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/paragraph.props.js";
-const a = {
+const p = {
   p: r
-}, c = {
+}, n = {
   type: "container",
   placeholder: "Paragraph",
   icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Paragraph" }
-  },
   states: o,
-  presetStyle: a
-}, m = {
+  presetStyle: p
+}, c = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  n as meta,
+  c as propsMeta
 };

package/lib/props.js

@@ -3,7 +3,7 @@ import { propsMeta as t } from "./fragment.ws.js";
 import { propsMeta as s } from "./html-embed.ws.js";
 import { propsMeta as x } from "./markdown-embed.ws.js";
 import { propsMeta as f } from "./body.ws.js";
-import { propsMeta as n } from "./box.ws.js";
+import { propsMeta as d } from "./box.ws.js";
 import { propsMeta as l } from "./text.ws.js";
 import { propsMeta as S } from "./heading.ws.js";
 import { propsMeta as c } from "./paragraph.ws.js";
@@ -42,11 +42,12 @@ import { propsMeta as Po } from "./head-slot.ws.js";
 import { propsMeta as wo } from "./head-link.ws.js";
 import { propsMeta as Co } from "./head-meta.ws.js";
 import { propsMeta as Xo } from "./head-title.ws.js";
+import { propsMeta as vo } from "./video.ws.js";
 export {
   D as Blockquote,
   f as Body,
   V as Bold,
-  n as Box,
+  d as Box,
   E as Button,
   so as Checkbox,
   _ as CodeText,
@@ -80,6 +81,7 @@ export {
   l as Text,
   po as Textarea,
   Lo as Time,
+  vo as Video,
   xo as Vimeo,
   uo as VimeoPlayButton,
   no as VimeoPreviewImage,

package/lib/radio-button.template.js

@@ -6,7 +6,7 @@ const r = {
   order: 5,
   template: /* @__PURE__ */ t(e.Label, { "ws:label": "Radio Field", children: [
     /* @__PURE__ */ o(e.RadioButton, {}),
-    /* @__PURE__ */ o(e.Text, { "ws:label": "Radio Label", tag: "span", children: new a("Radio") })
+    /* @__PURE__ */ o(e.Text, { "ws:label": "Radio Label", "ws:tag": "span", children: new a("Radio") })
   ] })
 };
 export {