@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-73cd6ea

package/lib/body.ws.js

@@ -1,29 +1,10 @@
-import { BodyIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { body as e } from "@webstudio-is/sdk/normalize.css";
+import { body as o } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/body.props.js";
-const a = {
-  body: [
-    ...e,
-    {
-      property: "WebkitFontSmoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "MozOsxFontSmoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-}, m = {
-  type: "container",
-  icon: o,
-  states: t,
-  presetStyle: a
-}, y = {
-  props: r,
-  initialProps: ["id", "className"]
+const i = {
+  presetStyle: { body: o },
+  initialProps: ["id", "class"],
+  props: r
 };
 export {
-  m as meta,
-  y as propsMeta
+  i as meta
 };

package/lib/bold.ws.js

@@ -1,20 +1,11 @@
-import { BoldIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { b as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/bold.props.js";
+import { b as o } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/bold.props.js";
 const p = {
-  b: e
-}, l = {
-  type: "rich-text-child",
   label: "Bold Text",
-  icon: t,
-  states: o,
-  presetStyle: p
-}, c = {
-  props: r,
-  initialProps: ["id", "className"]
+  presetStyle: { b: o },
+  initialProps: ["id", "class"],
+  props: t
 };
 export {
-  l as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/box.js

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

package/lib/box.ws.js

@@ -1,31 +1,41 @@
-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 { props as f } from "./__generated__/box.props.js";
+import { section as e, nav as r, main as t, header as i, footer as a, figure as o, aside as s, article as d, address as n, div as p } from "@webstudio-is/sdk/normalize.css";
+import { props as c } 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 = {
-  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,
-  order: 0
-}, b = {
-  props: f,
-  initialProps: ["id", "className", "tag"]
+  presetStyle: {
+    div: p,
+    address: n,
+    article: d,
+    aside: s,
+    figure: o,
+    footer: a,
+    header: i,
+    main: t,
+    nav: r,
+    section: e
+  },
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...c,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: [
+        "div",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "section",
+        "article",
+        "aside",
+        "address",
+        "figure",
+        "span"
+      ]
+    }
+  }
 };
 export {
-  v as meta,
-  b as propsMeta
+  g as meta
 };

package/lib/button.ws.js

@@ -1,27 +1,10 @@
-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 = {
-  button: o
-}, p = {
-  icon: t,
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  presetStyle: a,
-  states: [
-    ...e,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ]
-}, c = {
-  props: n,
-  initialProps: ["id", "className", "type", "aria-label"]
+import { button as t } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/button.props.js";
+const e = {
+  presetStyle: { button: t },
+  initialProps: ["id", "class", "type", "aria-label"],
+  props: o
 };
 export {
-  p as meta,
-  c as propsMeta
+  e as meta
 };

package/lib/checkbox.ws.js

@@ -1,38 +1,20 @@
 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 { props as r } from "./__generated__/checkbox.props.js";
+const t = {
   input: [
     ...o,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s = {
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link"] }
-  },
-  type: "control",
+}, m = {
   icon: e,
-  presetStyle: r,
-  states: [
-    ...t,
-    { 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" }
-  ]
-}, p = {
-  props: l,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
+  presetStyle: t,
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: r
 };
 export {
-  s as meta,
-  p as propsMeta
+  m as meta
 };

package/lib/code-text.ws.js

@@ -1,59 +1,51 @@
 import { BracesIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { code as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/code-text.props.js";
-const p = {
+import { code as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/code-text.props.js";
+const o = {
   code: [
-    ...o,
+    ...r,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "preserve" }
     },
     {
-      property: "textWrapMode",
+      property: "text-wrap-mode",
       value: { type: "keyword", value: "wrap" }
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 0.2, unit: "em" }
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, s = {
-  category: "general",
-  type: "embed",
-  description: "Use this component when you want to display code as text on the page.",
+}, c = {
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "CodeText" }
+  contentModel: {
+    category: "instance",
+    children: []
   },
-  states: t,
-  presetStyle: p,
-  order: 5
-}, d = {
+  presetStyle: o,
+  initialProps: ["id", "class", "lang", "code"],
   props: {
-    ...r,
+    ...t,
     code: {
       required: !0,
       control: "codetext",
       type: "string"
     }
-  },
-  initialProps: ["id", "className", "lang", "code"]
+  }
 };
 export {
-  s as meta,
-  d as propsMeta
+  c as meta
 };

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,16 @@
-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 { props as e } from "./__generated__/form.props.js";
-const n = {
+import { form as t } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/form.props.js";
+const r = {
   form: [
-    ...r,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+    ...t,
+    { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, p = {
-  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,
-  order: 0
-}, c = {
-  props: e,
-  initialProps: ["id", "className", "action"]
+  presetStyle: r,
+  initialProps: ["id", "class", "action"],
+  props: o
 };
 export {
-  p as meta,
-  c as propsMeta
+  p as meta
 };

package/lib/fragment.ws.js

@@ -1,10 +1,4 @@
-const o = {
-  type: "container",
-  icon: ""
-}, t = {
-  props: {}
-};
+const t = {};
 export {
-  o as meta,
-  t as propsMeta
+  t as meta
 };

package/lib/head-link.ws.js

@@ -1,19 +1,14 @@
 import { ResourceIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head-link.props.js";
-const p = {
-  category: "hidden",
+import { props as e } from "./__generated__/head-link.props.js";
+const t = {
   icon: o,
-  type: "container",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
-  }
-}, a = {
-  props: t,
-  initialProps: ["rel", "hrefLang", "href", "type", "as"]
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: ["rel", "hrefLang", "href", "type", "as"],
+  props: e
 };
 export {
-  p as meta,
-  a as propsMeta
+  t as meta
 };

package/lib/head-meta.ws.js

@@ -1,19 +1,14 @@
 import { WindowInfoIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head-meta.props.js";
-const p = {
-  category: "hidden",
+import { props as n } from "./__generated__/head-meta.props.js";
+const e = {
   icon: o,
-  type: "container",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
-  }
-}, i = {
-  props: t,
-  initialProps: ["name", "property", "content"]
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  initialProps: ["name", "property", "content"],
+  props: n
 };
 export {
-  p as meta,
-  i as propsMeta
+  e as meta
 };

package/lib/head-slot.js

@@ -1,15 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
-import { ReactSdkContext as d, getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as s, useContext as i } from "react";
+import { ReactSdkContext as s, getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as d, useContext as i } from "react";
 import { XmlNode as c } from "./xml-node.js";
-const f = "head", p = s(({ children: a, ...t }, o) => {
-  const { renderer: e } = i(d);
+const f = "head", p = d(({ children: a, ...t }, o) => {
+  const { renderer: e } = i(s);
   return e === void 0 ? a : t["data-ws-expand"] !== !0 ? null : /* @__PURE__ */ n(
     "div",
     {
       ref: o,
       style: {
-        backgroundColor: "rgba(255,255,255,1)",
         padding: "8px",
         position: "fixed",
         top: 0,

package/lib/head-slot.template.js

@@ -3,7 +3,7 @@ import { $ as e } from "@webstudio-is/template";
 const l = {
   category: "general",
   description: "The Head Slot component lets you customize page-specific head elements (like canonical URLs), which merge with your site's global head settings, with Head Slot definitions taking priority over Page Settings. For site-wide head changes, use Project Settings instead.",
-  order: 6,
+  order: 5,
   template: /* @__PURE__ */ i(e.HeadSlot, { children: [
     /* @__PURE__ */ t(e.HeadTitle, { "ws:label": "Title", children: "Title" }),
     /* @__PURE__ */ t(e.HeadLink, { "ws:label": "Link", rel: "help", href: "/help" }),

package/lib/head-slot.ws.js

@@ -1,25 +1,14 @@
-import { HeaderIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head.props.js";
+import { HeaderIcon as e } from "@webstudio-is/icons/svg";
+import { props as t } from "./__generated__/head-slot.props.js";
 const r = {
-  icon: o,
-  type: "container",
+  icon: e,
   description: "Inserts children into the head of the document",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: ["HeadSlot"] }
-    },
-    {
-      relation: "child",
-      component: { $in: ["HeadLink", "HeadMeta", "HeadTitle"] }
-    }
-  ]
-}, a = {
-  props: t,
-  initialProps: []
+  contentModel: {
+    category: "instance",
+    children: ["HeadLink", "HeadMeta", "HeadTitle"]
+  },
+  props: t
 };
 export {
-  r as meta,
-  a as propsMeta
+  r as meta
 };

package/lib/head-title.ws.js

@@ -1,18 +1,13 @@
 import { WindowTitleIcon as o } from "@webstudio-is/icons/svg";
-import "@webstudio-is/sdk";
 import { props as t } from "./__generated__/head-title.props.js";
-const p = {
-  category: "hidden",
+const r = {
   icon: o,
-  type: "container",
-  constraints: {
-    relation: "parent",
-    component: { $eq: "HeadSlot" }
-  }
-}, i = {
+  contentModel: {
+    category: "none",
+    children: ["text"]
+  },
   props: t
 };
 export {
-  p as meta,
-  i as propsMeta
+  r as meta
 };

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,28 +1,25 @@
-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 s, h6 as i } from "@webstudio-is/sdk/normalize.css";
-import { props as p } from "./__generated__/heading.props.js";
+import { h6 as t, h5 as r, h4 as o, h3 as h, h2 as p, h1 as e } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/heading.props.js";
 const m = {
-  h1: e,
-  h2: n,
-  h3: r,
-  h4: a,
-  h5: s,
-  h6: i
-}, d = {
-  type: "container",
-  icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $neq: "Heading" }
+  presetStyle: {
+    h1: e,
+    h2: p,
+    h3: h,
+    h4: o,
+    h5: r,
+    h6: t
   },
-  states: o,
-  presetStyle: m
-}, g = {
-  props: p,
-  initialProps: ["id", "className", "tag"]
+  initialProps: ["tag", "id", "class"],
+  props: {
+    ...i,
+    tag: {
+      required: !0,
+      control: "tag",
+      type: "string",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"]
+    }
+  }
 };
 export {
-  d as meta,
-  g as propsMeta
+  m as meta
 };