@webstudio-is/sdk-components-react 0.196.0 → 0.198.0

package/lib/list-item.ws.js

@@ -1,11 +1,10 @@
 import { ListItemIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { li as o } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/list-item.props.js";
-const n = {
-  li: o
+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 = {
-  category: "typography",
   type: "container",
   constraints: {
     // cannot use parent relation here
@@ -14,20 +13,11 @@ const n = {
     relation: "ancestor",
     component: { $eq: "List" }
   },
-  description: "Adds a new item to an existing list.",
   icon: t,
-  states: e,
-  presetStyle: n,
-  order: 5,
-  template: [
-    {
-      type: "instance",
-      component: "ListItem",
-      children: []
-    }
-  ]
+  states: o,
+  presetStyle: s
 }, c = {
-  props: i,
+  props: r,
   initialProps: ["id", "className"]
 };
 export {

package/lib/list.ws.js

@@ -1,5 +1,5 @@
 import { ListIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/react-sdk";
+import { defaultStates as r } from "@webstudio-is/sdk";
 import { ol as t, ul as o } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
 const a = {

package/lib/markdown-embed.js

@@ -1,14 +1,19 @@
 import { jsx as n } from "react/jsx-runtime";
 import { micromark as s } from "micromark";
-import { forwardRef as c, useMemo as d } from "react";
-const u = /* @__PURE__ */ c((r, e) => {
-  const { code: o, children: l, ...t } = r, m = d(
+import { gfmTable as l, gfmTableHtml as i } from "micromark-extension-gfm-table";
+import { forwardRef as a, useMemo as f } from "react";
+const h = /* @__PURE__ */ a((r, e) => {
+  const { code: o, children: c, ...t } = r, m = f(
     // support data uri protocol in images
-    () => s(o ?? "", { allowDangerousProtocol: !0 }),
+    () => s(o ?? "", {
+      allowDangerousProtocol: !0,
+      extensions: [l()],
+      htmlExtensions: [i()]
+    }),
     [o]
   );
   return /* @__PURE__ */ n("div", { ...t, ref: e, dangerouslySetInnerHTML: { __html: m } });
 });
 export {
-  u as MarkdownEmbed
+  h as MarkdownEmbed
 };

package/lib/markdown-embed.template.js

@@ -0,0 +1,75 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { $ as a, ws as l } from "@webstudio-is/template";
+import { imagePlaceholderDataUrl as s } from "@webstudio-is/image";
+const n = `
+# Styling Markdown with Markdown Embed
+
+Markdown Embed allows styling of Markdown, which primarily comes from external data.
+
+## How to Use Markdown Embed
+
+- Every element is shown in the Navigator.
+- Apply styles and Tokens to each element.
+- Adjustments to elements apply universally within this embed, ensuring consistency across your content.
+
+---
+
+## This sample text contains all the elements that can be styled.
+
+Any elements that were not used above are used below.
+
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+[Links](#) connect your content to relevant resources.
+
+**Bold text** makes your important points stand out.
+
+*Italic text* is great for emphasizing terms.
+
+1. First Step
+2. Second Step
+
+![Image placeholder](${s})
+
+> Capture attention with a powerful quote.
+
+Using \`console.log("Hello World");\` will log to the console.
+
+| Header 1   | Header 2   | Header 3   |
+|------------|------------|------------|
+| Cell 1.1   | Cell 1.2   | Cell 1.3   |
+| Cell 2.1   | Cell 2.2   | Cell 2.3   |
+| Cell 3.1   | Cell 3.2   | Cell 3.3   |
+`.trim(), c = {
+  category: "data",
+  description: "Used to add markdown code to the page",
+  order: 4,
+  template: /* @__PURE__ */ t(a.MarkdownEmbed, { code: n, children: [
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Paragraph", selector: " p" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 1", selector: " h1" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 2", selector: " h2" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 3", selector: " h3" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 4", selector: " h4" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 5", selector: " h5" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Heading 6", selector: " h6" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Bold", selector: " :where(strong, b)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Italic", selector: " :where(em, i)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Link", selector: " a" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Image", selector: " img" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Blockquote", selector: " blockquote" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Code Text", selector: " code" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "List", selector: " :where(ul, ol)" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "List Item", selector: " li" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Separator", selector: " hr" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table", selector: " table" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Row", selector: " tr" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Header Cell", selector: " th" }),
+    /* @__PURE__ */ e(l.descendant, { "ws:label": "Table Cell", selector: " td" })
+  ] })
+};
+export {
+  c as meta
+};

package/lib/markdown-embed.ws.js

@@ -1,54 +1,8 @@
-import { MarkdownEmbedIcon as n } from "@webstudio-is/icons/svg";
-import { imagePlaceholderDataUrl as a } from "@webstudio-is/image";
-import { descendantComponent as r } from "@webstudio-is/react-sdk";
-import { props as s } from "./__generated__/markdown-embed.props.js";
-const i = `
-# Styling Markdown with Markdown Embed
-
-Markdown Embed allows styling of Markdown, which primarily comes from external data.
-
-## How to Use Markdown Embed
-
-- Every element is shown in the Navigator.
-- Apply styles and Tokens to each element.
-- Adjustments to elements apply universally within this embed, ensuring consistency across your content.
-
----
-
-## This sample text contains all the elements that can be styled.
-
-Any elements that were not used above are used below.
-
-### Heading 3
-#### Heading 4
-##### Heading 5
-###### Heading 6
-
-[Links](#) connect your content to relevant resources.
-
-**Bold text** makes your important points stand out.
-
-*Italic text* is great for emphasizing terms.
-
-1. First Step
-2. Second Step
-
-![Image placeholder](${a})
-
-> Capture attention with a powerful quote.
-
-Using \`console.log("Hello World");\` will log to the console.
-`.trim(), e = (t, o) => ({
-  type: "instance",
-  component: r,
-  label: t,
-  props: [{ type: "string", name: "selector", value: ` ${o}` }],
-  children: []
-}), m = {
-  category: "data",
+import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
+import { props as o } from "./__generated__/markdown-embed.props.js";
+const t = {
   type: "embed",
-  description: "Used to add markdown code to the page",
-  icon: n,
+  icon: e,
   presetStyle: {
     div: [
       {
@@ -60,42 +14,10 @@ Using \`console.log("Hello World");\` will log to the console.
         value: { type: "keyword", value: "collapse" }
       }
     ]
-  },
-  order: 4,
-  template: [
-    {
-      type: "instance",
-      component: "MarkdownEmbed",
-      props: [
-        {
-          name: "code",
-          type: "string",
-          value: i
-        }
-      ],
-      children: [
-        e("Paragraph", "p"),
-        e("Heading 1", "h1"),
-        e("Heading 2", "h2"),
-        e("Heading 3", "h3"),
-        e("Heading 4", "h4"),
-        e("Heading 5", "h5"),
-        e("Heading 6", "h6"),
-        e("Bold", ":where(strong, b)"),
-        e("Italic", ":where(em, i)"),
-        e("Link", "a"),
-        e("Image", "img"),
-        e("Blockquote", "blockquote"),
-        e("Code Text", "code"),
-        e("List", ":where(ul, ol)"),
-        e("List Item", "li"),
-        e("Separator", "hr")
-      ]
-    }
-  ]
-}, g = {
+  }
+}, a = {
   props: {
-    ...s,
+    ...o,
     code: {
       required: !0,
       control: "code",
@@ -106,6 +28,6 @@ Using \`console.log("Hello World");\` will log to the console.
   initialProps: ["className"]
 };
 export {
-  m as meta,
-  g as propsMeta
+  t as meta,
+  a as propsMeta
 };

package/lib/metas.js

@@ -2,81 +2,81 @@ import { meta as o } from "./slot.ws.js";
 import { meta as a } 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 "./content-embed.ws.js";
-import { meta as d } from "./body.ws.js";
-import { meta as c } from "./box.ws.js";
-import { meta as B } from "./text.ws.js";
-import { meta as b } from "./heading.ws.js";
-import { meta as g } from "./paragraph.ws.js";
-import { meta as I } from "./link.ws.js";
-import { meta as V } from "./rich-text-link.ws.js";
-import { meta as C } from "./span.ws.js";
+import { meta as i } from "./body.ws.js";
+import { meta as l } from "./box.ws.js";
+import { meta as u } from "./text.ws.js";
+import { meta as B } from "./heading.ws.js";
+import { meta as T } from "./paragraph.ws.js";
+import { meta as g } from "./link.ws.js";
+import { meta as I } from "./rich-text-link.ws.js";
+import { meta as V } from "./span.ws.js";
 import { meta as F } from "./bold.ws.js";
 import { meta as R } from "./italic.ws.js";
 import { meta as y } from "./superscript.ws.js";
-import { meta as X } from "./subscript.ws.js";
-import { meta as v } from "./button.ws.js";
-import { meta as N } from "./input.ws.js";
-import { meta as j } from "./webhook-form.ws.js";
-import { meta as A } from "./form.ws.js";
-import { meta as G } from "./image.ws.js";
-import { meta as K } from "./blockquote.ws.js";
-import { meta as U } from "./list.ws.js";
-import { meta as Y } from "./list-item.ws.js";
-import { meta as _ } from "./separator.ws.js";
-import { meta as ee } from "./code-text.ws.js";
-import { meta as oe } from "./label.ws.js";
-import { meta as ae } from "./textarea.ws.js";
-import { meta as pe } from "./radio-button.ws.js";
-import { meta as se } from "./checkbox.ws.js";
-import { meta as ie } from "./vimeo.ws.js";
-import { meta as de } from "./vimeo-preview-image.ws.js";
-import { meta as ce } from "./vimeo-play-button.ws.js";
+import { meta as E } from "./subscript.ws.js";
+import { meta as X } from "./button.ws.js";
+import { meta as v } from "./input.ws.js";
+import { meta as N } from "./webhook-form.ws.js";
+import { meta as Y } from "./form.ws.js";
+import { meta as z } from "./image.ws.js";
+import { meta as D } from "./blockquote.ws.js";
+import { meta as J } from "./list.ws.js";
+import { meta as Q } from "./list-item.ws.js";
+import { meta as W } from "./separator.ws.js";
+import { meta as _ } from "./code-text.ws.js";
+import { meta as ee } from "./label.ws.js";
+import { meta as oe } from "./textarea.ws.js";
+import { meta as ae } 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 le } from "./vimeo-preview-image.ws.js";
+import { meta as ue } from "./vimeo-play-button.ws.js";
 import { meta as Be } from "./vimeo-spinner.ws.js";
-import { meta as be } from "./xml-node.ws.js";
+import { meta as Te } from "./xml-node.ws.js";
 import { meta as ge } from "./xml-time.ws.js";
 import { meta as Ie } from "./time.ws.js";
 import { meta as Ve } from "./select.ws.js";
-import { meta as Ce } from "./option.ws.js";
+import { meta as Fe } from "./option.ws.js";
 export {
-  K as Blockquote,
-  d as Body,
+  D as Blockquote,
+  i as Body,
   F as Bold,
-  c as Box,
-  v as Button,
-  se as Checkbox,
-  ee as CodeText,
-  i as ContentEmbed,
-  j as Form,
+  l as Box,
+  X as Button,
+  pe as Checkbox,
+  _ as CodeText,
+  N as Form,
   a as Fragment,
-  b as Heading,
+  B as Heading,
   p as HtmlEmbed,
-  G as Image,
-  N as Input,
+  z as Image,
+  v as Input,
   R as Italic,
-  oe as Label,
-  I as Link,
-  U as List,
-  Y as ListItem,
+  ee as Label,
+  g as Link,
+  J as List,
+  Q as ListItem,
   s as MarkdownEmbed,
-  Ce as Option,
-  g as Paragraph,
-  pe as RadioButton,
-  A as RemixForm,
-  V as RichTextLink,
+  Fe as Option,
+  T as Paragraph,
+  ae as RadioButton,
+  Y as RemixForm,
+  I as RichTextLink,
   Ve as Select,
-  _ as Separator,
+  W as Separator,
   o as Slot,
-  C as Span,
-  X as Subscript,
+  V as Span,
+  E as Subscript,
   y as Superscript,
-  B as Text,
-  ae as Textarea,
+  u as Text,
+  oe as Textarea,
   Ie as Time,
-  ie as Vimeo,
-  ce as VimeoPlayButton,
-  de as VimeoPreviewImage,
+  se as Vimeo,
+  ue as VimeoPlayButton,
+  le as VimeoPreviewImage,
   Be as VimeoSpinner,
-  be as XmlNode,
-  ge as XmlTime
+  Te as XmlNode,
+  ge as XmlTime,
+  ie as YouTube
 };

package/lib/option.ws.js

@@ -1,5 +1,4 @@
 import { ItemIcon as e } from "@webstudio-is/icons/svg";
-import "@webstudio-is/react-sdk";
 import { props as t } from "./__generated__/option.props.js";
 const o = {
   option: [
@@ -15,7 +14,7 @@ const o = {
       }
     }
   ]
-}, c = {
+}, r = {
   category: "hidden",
   constraints: {
     relation: "parent",
@@ -35,11 +34,11 @@ const o = {
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" }
   ]
-}, s = {
+}, c = {
   props: t,
   initialProps: ["label", "selected", "value", "label", "disabled"]
 };
 export {
-  c as meta,
-  s as propsMeta
+  r as meta,
+  c as propsMeta
 };

package/lib/paragraph.template.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { $ as t } from "@webstudio-is/template";
+const a = {
+  category: "typography",
+  description: "A container for multi-line text.",
+  order: 2,
+  template: /* @__PURE__ */ r(t.Paragraph, {})
+};
+export {
+  a as meta
+};

package/lib/paragraph.ws.js

@@ -1,33 +1,23 @@
 import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { p as e } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/paragraph.props.js";
+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 n = {
-  p: e
-}, c = {
-  category: "typography",
+  p: r
+}, m = {
   type: "container",
-  description: "A container for multi-line text.",
   icon: t,
   constraints: {
     relation: "ancestor",
     component: { $neq: "Paragraph" }
   },
   states: o,
-  presetStyle: n,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: []
-    }
-  ]
-}, m = {
-  props: r,
+  presetStyle: n
+}, c = {
+  props: e,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  c as propsMeta
 };

package/lib/props.js

@@ -5,7 +5,7 @@ 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 "./text.ws.js";
-import { propsMeta as u } from "./heading.ws.js";
+import { propsMeta as c } from "./heading.ws.js";
 import { propsMeta as S } from "./paragraph.ws.js";
 import { propsMeta as b } from "./link.ws.js";
 import { propsMeta as k } from "./rich-text-link.ws.js";
@@ -17,28 +17,29 @@ import { propsMeta as C } from "./subscript.ws.js";
 import { propsMeta as H } from "./button.ws.js";
 import { propsMeta as q } from "./input.ws.js";
 import { propsMeta as N } from "./webhook-form.ws.js";
-import { propsMeta as j } from "./form.ws.js";
-import { propsMeta as A } from "./image.ws.js";
-import { propsMeta as G } from "./blockquote.ws.js";
-import { propsMeta as K } from "./list.ws.js";
-import { propsMeta as U } from "./list-item.ws.js";
-import { propsMeta as Y } from "./separator.ws.js";
+import { propsMeta as Y } from "./form.ws.js";
+import { propsMeta as z } from "./image.ws.js";
+import { propsMeta as D } from "./blockquote.ws.js";
+import { propsMeta as J } from "./list.ws.js";
+import { propsMeta as Q } from "./list-item.ws.js";
+import { propsMeta as W } from "./separator.ws.js";
 import { propsMeta as _ } from "./code-text.ws.js";
 import { propsMeta as oo } from "./label.ws.js";
 import { propsMeta as po } from "./textarea.ws.js";
 import { propsMeta as to } from "./radio-button.ws.js";
 import { propsMeta as so } from "./checkbox.ws.js";
 import { propsMeta as xo } from "./vimeo.ws.js";
-import { propsMeta as fo } from "./vimeo-preview-image.ws.js";
-import { propsMeta as no } from "./vimeo-play-button.ws.js";
-import { propsMeta as co } from "./vimeo-spinner.ws.js";
-import { propsMeta as Bo } from "./xml-node.ws.js";
-import { propsMeta as To } from "./xml-time.ws.js";
-import { propsMeta as go } from "./time.ws.js";
-import { propsMeta as Io } from "./select.ws.js";
-import { propsMeta as Vo } from "./option.ws.js";
+import { propsMeta as fo } from "./youtube.ws.js";
+import { propsMeta as no } from "./vimeo-preview-image.ws.js";
+import { propsMeta as uo } from "./vimeo-play-button.ws.js";
+import { propsMeta as Bo } from "./vimeo-spinner.ws.js";
+import { propsMeta as To } from "./xml-node.ws.js";
+import { propsMeta as go } from "./xml-time.ws.js";
+import { propsMeta as Io } from "./time.ws.js";
+import { propsMeta as Vo } from "./select.ws.js";
+import { propsMeta as Fo } from "./option.ws.js";
 export {
-  G as Blockquote,
+  D as Blockquote,
   f as Body,
   h as Bold,
   n as Box,
@@ -47,34 +48,35 @@ export {
   _ as CodeText,
   N as Form,
   t as Fragment,
-  u as Heading,
+  c as Heading,
   s as HtmlEmbed,
-  A as Image,
+  z as Image,
   q as Input,
   P as Italic,
   oo as Label,
   b as Link,
-  K as List,
-  U as ListItem,
+  J as List,
+  Q as ListItem,
   x as MarkdownEmbed,
-  Vo as Option,
+  Fo as Option,
   S as Paragraph,
   to as RadioButton,
-  j as RemixForm,
+  Y as RemixForm,
   k as RichTextLink,
-  Io as Select,
-  Y as Separator,
+  Vo as Select,
+  W as Separator,
   p as Slot,
   L as Span,
   C as Subscript,
   w as Superscript,
   d as Text,
   po as Textarea,
-  go as Time,
+  Io as Time,
   xo as Vimeo,
-  no as VimeoPlayButton,
-  fo as VimeoPreviewImage,
-  co as VimeoSpinner,
-  Bo as XmlNode,
-  To as XmlTime
+  uo as VimeoPlayButton,
+  no as VimeoPreviewImage,
+  Bo as VimeoSpinner,
+  To as XmlNode,
+  go as XmlTime,
+  fo as YouTube
 };

package/lib/radio-button.template.js

@@ -0,0 +1,14 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { $ as e, PlaceholderValue as a } from "@webstudio-is/template";
+const r = {
+  category: "forms",
+  description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
+  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") })
+  ] })
+};
+export {
+  r as meta
+};