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

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
+};

package/lib/radio-button.ws.js

@@ -1,7 +1,7 @@
 import { RadioCheckedIcon 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 { radio as o } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/radio-button.props.js";
+import { props as r } from "./__generated__/radio-button.props.js";
 const i = {
   input: [
     ...o,
@@ -10,18 +10,15 @@ const i = {
       value: { type: "unit", unit: "em", value: 0.5 }
     }
   ]
-}, s = {
-  category: "forms",
+}, p = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
   type: "control",
   label: "Radio",
-  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.",
   icon: e,
   presetStyle: i,
-  order: 5,
   states: [
     ...t,
     { selector: ":checked", label: "Checked" },
@@ -32,29 +29,12 @@ const i = {
     //{ selector: ":enabled", label: "Enabled" },
     //{ selector: ":read-only", label: "Read Only" },
     //{ selector: ":read-write", label: "Read Write" },
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Radio Field",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Radio Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Radio", placeholder: !0 }]
-        }
-      ]
-    }
   ]
-}, c = {
-  props: a,
+}, s = {
+  props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {
-  s as meta,
-  c as propsMeta
+  p as meta,
+  s as propsMeta
 };

package/lib/rich-text-link.ws.js

@@ -1,11 +1,9 @@
 import { meta as t, propsMeta as e } from "./link.ws.js";
-const p = {
+const a = {
   ...t,
-  category: "hidden",
-  type: "rich-text-child",
-  template: []
+  type: "rich-text-child"
 }, o = e;
 export {
-  p as meta,
+  a as meta,
   o as propsMeta
 };

package/lib/select.template.js

@@ -0,0 +1,16 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { $ as e } from "@webstudio-is/template";
+const n = {
+  category: "forms",
+  description: "A drop-down menu for users to select a single option from a predefined list.",
+  order: 4,
+  template: /* @__PURE__ */ t(e.Select, { children: [
+    /* @__PURE__ */ o(e.Option, { label: "Please choose an option", value: "" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option A", value: "a" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option B", value: "b" }),
+    /* @__PURE__ */ o(e.Option, { label: "Option C", value: "c" })
+  ] })
+};
+export {
+  n as meta
+};

package/lib/select.ws.js

@@ -1,26 +1,23 @@
 import { SelectIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { select as n } from "@webstudio-is/sdk/normalize.css";
-import { props as l } from "./__generated__/select.props.js";
-const o = {
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { select as l } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/select.props.js";
+const r = {
   select: [
-    ...n,
+    ...l,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
-}, s = {
-  category: "forms",
+}, c = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
   type: "container",
-  description: "A drop-down menu for users to select a single option from a predefined list.",
   icon: e,
-  presetStyle: o,
-  order: 4,
+  presetStyle: r,
   states: [
     ...t,
     { selector: "::placeholder", label: "Placeholder" },
@@ -28,58 +25,9 @@ const o = {
     { selector: ":invalid", label: "Invalid" },
     { selector: ":required", label: "Required" },
     { selector: ":optional", label: "Optional" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Select",
-      label: "Select",
-      children: [
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Please choose an option" },
-            { type: "string", name: "value", value: "" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option A" },
-            { type: "string", name: "value", value: "a" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option B" },
-            { type: "string", name: "value", value: "b" }
-          ],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Option",
-          label: "Option",
-          props: [
-            { type: "string", name: "label", value: "Option C" },
-            { type: "string", name: "value", value: "c" }
-          ],
-          children: []
-        }
-      ]
-    }
   ]
-}, c = {
-  props: l,
+}, p = {
+  props: o,
   initialProps: [
     "id",
     "className",
@@ -91,6 +39,6 @@ const o = {
   ]
 };
 export {
-  s as meta,
-  c as propsMeta
+  c as meta,
+  p as propsMeta
 };

package/lib/separator.ws.js

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

package/lib/span.ws.js

@@ -1,5 +1,5 @@
 import { PaintBrushIcon 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 { span as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/span.props.js";
 const s = {

package/lib/subscript.ws.js

@@ -1,5 +1,5 @@
 import { SubscriptIcon 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 { sub as r } from "@webstudio-is/sdk/normalize.css";
 import { props as s } from "./__generated__/subscript.props.js";
 const e = {

package/lib/superscript.ws.js

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

package/lib/templates.js

@@ -0,0 +1,36 @@
+import { meta as o } from "./content-embed.template.js";
+import { meta as m } from "./markdown-embed.template.js";
+import { meta as s } from "./text.template.js";
+import { meta as p } from "./heading.template.js";
+import { meta as n } from "./paragraph.template.js";
+import { meta as b } from "./link.template.js";
+import { meta as u } from "./button.template.js";
+import { meta as L } from "./webhook-form.template.js";
+import { meta as l } from "./blockquote.template.js";
+import { meta as g } from "./list.template.js";
+import { meta as C } from "./list-item.template.js";
+import { meta as T } from "./label.template.js";
+import { meta as w } from "./radio-button.template.js";
+import { meta as H } from "./checkbox.template.js";
+import { meta as M } from "./vimeo.template.js";
+import { meta as R } from "./youtube.template.js";
+import { meta as V } from "./select.template.js";
+export {
+  l as Blockquote,
+  u as Button,
+  H as Checkbox,
+  o as ContentEmbed,
+  L as Form,
+  p as Heading,
+  T as Label,
+  b as Link,
+  g as List,
+  C as ListItem,
+  m as MarkdownEmbed,
+  n as Paragraph,
+  w as RadioButton,
+  V as Select,
+  s as Text,
+  M as Vimeo,
+  R as YouTube
+};

package/lib/text.template.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as t, PlaceholderValue as o } from "@webstudio-is/template";
+const a = {
+  category: "typography",
+  description: "A generic container for any text content that is not a heading or a link.",
+  order: 0,
+  template: /* @__PURE__ */ e(t.Text, { children: new o("The text you can edit") })
+};
+export {
+  a as meta
+};

package/lib/text.ws.js

@@ -1,7 +1,7 @@
 import { TextIcon 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 } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/text.props.js";
+import { props as i } from "./__generated__/text.props.js";
 const r = {
   div: [
     ...o,
@@ -10,32 +10,16 @@ const r = {
       value: { type: "unit", unit: "em", value: 1 }
     }
   ]
-}, s = {
-  category: "text",
+}, n = {
   type: "container",
-  description: "A generic container for any text content that is not a heading or a link.",
   icon: t,
   states: e,
-  presetStyle: r,
-  order: 0,
-  template: [
-    {
-      type: "instance",
-      component: "Text",
-      children: [
-        {
-          type: "text",
-          value: "The text you can edit",
-          placeholder: !0
-        }
-      ]
-    }
-  ]
-}, m = {
-  props: n,
+  presetStyle: r
+}, c = {
+  props: i,
   initialProps: ["id", "className", "tag"]
 };
 export {
-  s as meta,
-  m as propsMeta
+  n as meta,
+  c as propsMeta
 };

package/lib/textarea.ws.js

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

package/lib/time.ws.js

@@ -1,22 +1,21 @@
 import { CalendarIcon 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 { time as a } from "@webstudio-is/sdk/normalize.css";
 import { props as o } from "./__generated__/time.props.js";
 const r = {
   time: a
 }, s = {
-  category: "data",
+  category: "localization",
   type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: t,
   states: e,
-  presetStyle: r,
-  order: 5
-}, d = {
+  presetStyle: r
+}, c = {
   props: o,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 export {
   s as meta,
-  d as propsMeta
+  c as propsMeta
 };

package/lib/types/__generated__/blockquote.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/body.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/bold.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/box.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/button.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/checkbox.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/code-text.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/form.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/fragment.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/heading.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/html-embed.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/image.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/input.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/italic.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/label.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/link.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/list-item.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/list.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/markdown-embed.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/option.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/paragraph.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/radio-button.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/rich-text-link.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/select.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/separator.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/slot.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/span.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/subscript.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/superscript.props.d.ts

@@ -1,2 +1,2 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
+import type { PropMeta } from "@webstudio-is/sdk";
 export declare const props: Record<string, PropMeta>;