@webstudio-is/sdk-components-react 0.195.0 → 0.197.0

package/lib/blockquote.ws.js

@@ -1,5 +1,5 @@
-import { BlockquoteIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { BlockquoteIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
 import { props as p } from "./__generated__/blockquote.props.js";
 const r = {
   blockquote: [
@@ -49,26 +49,10 @@ const r = {
     }
   ]
 }, i = {
-  category: "text",
   type: "container",
-  description: "Use to style a quote from an external source like an article or book.",
-  icon: e,
-  states: t,
-  presetStyle: r,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "Blockquote",
-      children: [
-        {
-          type: "text",
-          value: "Blockquote text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
+  icon: t,
+  states: e,
+  presetStyle: r
 }, n = {
   props: p,
   initialProps: ["id", "className", "cite"]

package/lib/body.ws.js

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

package/lib/bold.ws.js

@@ -1,5 +1,5 @@
 import { BoldIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+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";
 const p = {

package/lib/box.ws.js

@@ -1,5 +1,5 @@
 import { BoxIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
+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";
 const g = {

package/lib/button.template.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as e } from "@webstudio-is/template";
+const n = {
+  category: "forms",
+  order: 2,
+  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
+  template: /* @__PURE__ */ t(o.Button, { children: new e("Button text you can edit") })
+};
+export {
+  n as meta
+};

package/lib/button.ws.js

@@ -1,37 +1,21 @@
 import { ButtonElementIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
+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 = {
-  category: "forms",
+  icon: t,
   type: "container",
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  icon: t,
   presetStyle: a,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [
-        {
-          type: "text",
-          value: "Button text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
   ]
 }, c = {
   props: n,

package/lib/checkbox.template.js

@@ -0,0 +1,14 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { $ as e, PlaceholderValue as c } from "@webstudio-is/template";
+const l = {
+  category: "forms",
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  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") })
+  ] })
+};
+export {
+  l as meta
+};

package/lib/checkbox.ws.js

@@ -1,8 +1,8 @@
 import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/checkbox.props.js";
-const a = {
+import { props as l } from "./__generated__/checkbox.props.js";
+const r = {
   input: [
     ...o,
     {
@@ -11,16 +11,13 @@ const a = {
     }
   ]
 }, s = {
-  category: "forms",
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
   type: "control",
-  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
   icon: e,
-  presetStyle: a,
-  order: 6,
+  presetStyle: r,
   states: [
     ...t,
     { selector: ":checked", label: "Checked" },
@@ -30,26 +27,9 @@ const a = {
     { selector: ":enabled", label: "Enabled" },
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Checkbox", placeholder: !0 }]
-        }
-      ]
-    }
   ]
 }, p = {
-  props: r,
+  props: l,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {

package/lib/code-text.ws.js

@@ -1,5 +1,5 @@
-import { CodeTextIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+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 = {
@@ -30,7 +30,7 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, d = {
+}, s = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -42,7 +42,7 @@ const p = {
   states: t,
   presetStyle: p,
   order: 9
-}, s = {
+}, d = {
   props: {
     ...r,
     code: {
@@ -54,6 +54,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  d as meta,
-  s as propsMeta
+  s as meta,
+  d as propsMeta
 };

package/lib/components.js

@@ -4,10 +4,10 @@ import { HtmlEmbed as x } from "./html-embed.js";
 import { MarkdownEmbed as i } from "./markdown-embed.js";
 import { Body as n } from "./body.js";
 import { Box as d } from "./box.js";
-import { Text as k } from "./text.js";
-import { Heading as u } from "./heading.js";
-import { Paragraph as S } from "./paragraph.js";
-import { Link as L, Link as T } from "./link.js";
+import { Text as b } from "./text.js";
+import { Heading as k } from "./heading.js";
+import { Paragraph as B } from "./paragraph.js";
+import { Link as T, Link as L } from "./link.js";
 import { Span as F } from "./span.js";
 import { Bold as h } from "./bold.js";
 import { Italic as P } from "./italic.js";
@@ -17,27 +17,28 @@ import { Button as H } from "./button.js";
 import { Input as q } from "./input.js";
 import { WebhookForm as M } from "./webhook-form.js";
 import { Form as O } from "./form.js";
-import { Image as j } from "./image.js";
-import { Blockquote as A } from "./blockquote.js";
-import { List as G } from "./list.js";
-import { ListItem as K } from "./list-item.js";
-import { Separator as U } from "./separator.js";
+import { Image as Y } from "./image.js";
+import { Blockquote as z } from "./blockquote.js";
+import { List as D } from "./list.js";
+import { ListItem as J } from "./list-item.js";
+import { Separator as Q } from "./separator.js";
 import { CodeText as Z } from "./code-text.js";
 import { Label as $ } from "./label.js";
 import { Textarea as ro } from "./textarea.js";
 import { RadioButton as to } from "./radio-button.js";
 import { Checkbox as po } from "./checkbox.js";
 import { Vimeo as fo } from "./vimeo.js";
-import { VimeoPreviewImage as ao } from "./vimeo-preview-image.js";
-import { VimeoPlayButton as lo } from "./vimeo-play-button.js";
+import { YouTube as ao } from "./youtube.js";
+import { VimeoPreviewImage as lo } from "./vimeo-preview-image.js";
+import { VimeoPlayButton as bo } from "./vimeo-play-button.js";
 import { VimeoSpinner as ko } from "./vimeo-spinner.js";
-import { XmlNode as uo } from "./xml-node.js";
-import { XmlTime as So } from "./xml-time.js";
-import { Time as Lo } from "./time.js";
-import { Select as go } from "./select.js";
-import { Option as Io } from "./option.js";
+import { XmlNode as Bo } from "./xml-node.js";
+import { XmlTime as To } from "./xml-time.js";
+import { Time as go } from "./time.js";
+import { Select as Io } from "./select.js";
+import { Option as Vo } from "./option.js";
 export {
-  A as Blockquote,
+  z as Blockquote,
   n as Body,
   h as Bold,
   d as Box,
@@ -46,34 +47,35 @@ export {
   Z as CodeText,
   M as Form,
   m as Fragment,
-  u as Heading,
+  k as Heading,
   x as HtmlEmbed,
-  j as Image,
+  Y as Image,
   q as Input,
   P as Italic,
   $ as Label,
-  L as Link,
-  G as List,
-  K as ListItem,
+  T as Link,
+  D as List,
+  J as ListItem,
   i as MarkdownEmbed,
-  Io as Option,
-  S as Paragraph,
+  Vo as Option,
+  B as Paragraph,
   to as RadioButton,
   O as RemixForm,
-  T as RichTextLink,
-  go as Select,
-  U as Separator,
+  L as RichTextLink,
+  Io as Select,
+  Q as Separator,
   e as Slot,
   F as Span,
   C as Subscript,
   w as Superscript,
-  k as Text,
+  b as Text,
   ro as Textarea,
-  Lo as Time,
+  go as Time,
   fo as Vimeo,
-  lo as VimeoPlayButton,
-  ao as VimeoPreviewImage,
+  bo as VimeoPlayButton,
+  lo as VimeoPreviewImage,
   ko as VimeoSpinner,
-  uo as XmlNode,
-  So as XmlTime
+  Bo as XmlNode,
+  To as XmlTime,
+  ao as YouTube
 };

package/lib/content-embed.template.js

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

package/lib/form.ws.js

@@ -1,5 +1,5 @@
 import { FormIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+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 = {

package/lib/heading.template.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as t } from "@webstudio-is/template";
+const n = {
+  category: "typography",
+  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
+  order: 1,
+  template: /* @__PURE__ */ e(t.Heading, {})
+};
+export {
+  n as meta
+};

package/lib/heading.ws.js

@@ -1,44 +1,28 @@
 import { HeadingIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { h1 as n, h2 as o, h3 as a, h4 as r, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
+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";
-const c = {
-  h1: n,
-  h2: o,
-  h3: a,
-  h4: r,
-  h5: i,
-  h6: s
-}, l = {
-  category: "text",
+const m = {
+  h1: e,
+  h2: n,
+  h3: r,
+  h4: a,
+  h5: s,
+  h6: i
+}, d = {
   type: "container",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
   icon: t,
   constraints: {
     relation: "ancestor",
     component: { $neq: "Heading" }
   },
-  states: e,
-  presetStyle: c,
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [
-        {
-          type: "text",
-          value: "Heading text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
-}, y = {
+  states: o,
+  presetStyle: m
+}, g = {
   props: p,
   initialProps: ["id", "className", "tag"]
 };
 export {
-  l as meta,
-  y as propsMeta
+  d as meta,
+  g as propsMeta
 };

package/lib/image.ws.js

@@ -1,10 +1,10 @@
-import { ImageIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as r } from "@webstudio-is/react-sdk";
-import { img as i } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/image.props.js";
+import { ImageIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { img as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/image.props.js";
 const a = {
   img: [
-    ...i,
+    ...o,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
       property: "maxWidth",
@@ -28,24 +28,20 @@ const a = {
   category: "media",
   type: "embed",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  icon: o,
-  states: r,
+  icon: e,
+  states: t,
   presetStyle: a,
   order: 0
-}, p = {
-  src: {
-    type: "string",
-    control: "file",
-    label: "Source",
-    required: !1
-  }
-}, t = e.optimize;
-t.description = "Optimize the image for enhanced performance.";
-const d = {
+}, d = {
   props: {
-    ...e,
-    ...p,
-    optimize: t
+    ...r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
   },
   initialProps: [
     "id",
@@ -60,6 +56,5 @@ const d = {
 };
 export {
   l as meta,
-  d as propsMeta,
-  p as propsOverrides
+  d as propsMeta
 };

package/lib/input.ws.js

@@ -1,5 +1,5 @@
 import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { input as o } from "@webstudio-is/sdk/normalize.css";
 import { props as l } from "./__generated__/input.props.js";
 const r = {

package/lib/italic.ws.js

@@ -1,5 +1,5 @@
 import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { defaultStates as e } from "@webstudio-is/sdk";
 import { i as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/italic.props.js";
 const r = {

package/lib/label.template.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as r, PlaceholderValue as o } from "@webstudio-is/template";
+const a = {
+  category: "forms",
+  order: 2,
+  template: /* @__PURE__ */ e(r.Label, { children: new o("Form Label") })
+};
+export {
+  a as meta
+};

package/lib/label.ws.js

@@ -1,42 +1,27 @@
-import { LabelIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { label as r } from "@webstudio-is/sdk/normalize.css";
-import { props as t } from "./__generated__/label.props.js";
-const l = {
+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 { props as r } from "./__generated__/label.props.js";
+const a = {
   label: [
-    ...r,
+    ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, m = {
-  category: "forms",
+}, i = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
   type: "container",
   label: "Input Label",
-  icon: e,
+  icon: t,
   states: o,
-  presetStyle: l,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Form Label", placeholder: !0 }]
-    }
-  ]
-}, i = {
-  props: {
-    ...t,
-    htmlFor: {
-      ...t.htmlFor,
-      label: "For"
-    }
-  },
+  presetStyle: a
+}, m = {
+  props: r,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  m as meta,
-  i as propsMeta
+  i as meta,
+  m as propsMeta
 };

package/lib/link.template.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as o } from "@webstudio-is/template";
+const n = {
+  category: "general",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
+  order: 1,
+  template: /* @__PURE__ */ e(o.Link, {})
+};
+export {
+  n as meta
+};