@webstudio-is/sdk-components-react 0.216.0 → 0.218.0

package/lib/bold.ws.js

@@ -1,20 +1,19 @@
-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";
-const p = {
-  b: e
+import { BoldIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { b as r } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/bold.props.js";
+const s = {
+  b: r
 }, l = {
-  type: "container",
   label: "Bold Text",
-  icon: t,
-  states: o,
-  presetStyle: p
-}, n = {
-  props: r,
+  icon: o,
+  states: t,
+  presetStyle: s
+}, c = {
+  props: e,
   initialProps: ["id", "className"]
 };
 export {
   l as meta,
-  n as propsMeta
+  c as propsMeta
 };

package/lib/box.ws.js

@@ -1,10 +1,9 @@
 import { BoxIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/sdk";
-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 { div as r, address as o, article as a, aside as i, figure as s, footer as n, header as d, main as p, nav as c, section as m } from "@webstudio-is/sdk/normalize.css";
 import { props as f } from "./__generated__/box.props.js";
 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,
@@ -15,9 +14,9 @@ const v = {
     aside: i,
     figure: s,
     footer: n,
-    header: p,
-    main: c,
-    nav: d,
+    header: d,
+    main: p,
+    nav: c,
     section: m
   },
   order: 0

package/lib/button.ws.js

@@ -4,20 +4,19 @@ import { button as o } from "@webstudio-is/sdk/normalize.css";
 import { props as a } from "./__generated__/button.props.js";
 const l = {
   button: o
-}, p = {
+}, m = {
   icon: t,
-  type: "container",
   presetStyle: l,
   states: [
     ...e,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
   ]
-}, m = {
+}, n = {
   props: a,
   initialProps: ["id", "className", "type", "aria-label"]
 };
 export {
-  p as meta,
-  m as propsMeta
+  m as meta,
+  n as propsMeta
 };

package/lib/form.ws.js

@@ -1,19 +1,18 @@
 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 { defaultStates as o } from "@webstudio-is/sdk";
+import { form as t } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/form.props.js";
 const s = {
   form: [
-    ...o,
+    ...t,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
 }, n = {
   category: "forms",
-  type: "container",
   label: "Form",
   description: "Create filters, surveys, searches and more.",
   icon: r,
-  states: t,
+  states: o,
   presetStyle: s,
   order: 0
 }, c = {

package/lib/fragment.ws.js

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

package/lib/head-slot.ws.js

@@ -1,9 +1,8 @@
 import { HeaderIcon as e } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/head.props.js";
+import { props as t } from "./__generated__/head-slot.props.js";
 const r = {
   icon: e,
-  type: "container",
   description: "Inserts children into the head of the document",
   contentModel: {
     category: "instance",

package/lib/head-title.ws.js

@@ -1,9 +1,7 @@
 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 = {
+const r = {
   icon: o,
-  type: "container",
   contentModel: {
     category: "none",
     children: ["text"]
@@ -12,6 +10,6 @@ const p = {
   props: t
 };
 export {
-  p as meta,
+  r as meta,
   c as propsMeta
 };

package/lib/heading.ws.js

@@ -3,7 +3,6 @@ import { defaultStates as o } from "@webstudio-is/sdk";
 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,
   states: o,

package/lib/html-embed.ws.js

@@ -3,7 +3,6 @@ import { descendantComponent as n } from "@webstudio-is/sdk";
 import { props as e } from "./__generated__/html-embed.props.js";
 const r = {
   category: "general",
-  type: "container",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: t,

package/lib/italic.ws.js

@@ -1,26 +1,25 @@
 import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { i as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { i as e } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/italic.props.js";
 const i = {
   i: [
-    ...o,
+    ...e,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
     }
   ]
-}, c = {
-  type: "container",
+}, m = {
   label: "Italic Text",
   icon: t,
-  states: e,
+  states: o,
   presetStyle: i
-}, m = {
+}, c = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  c as propsMeta
 };

package/lib/label.ws.js

@@ -1,23 +1,22 @@
 import { LabelIcon as t } from "@webstudio-is/icons/svg";
-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 = {
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { label as e } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/label.props.js";
+const r = {
   label: [
-    ...o,
+    ...e,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, m = {
-  type: "container",
+}, i = {
   label: "Input Label",
   icon: t,
-  states: e,
-  presetStyle: a
-}, n = {
-  props: r,
+  states: o,
+  presetStyle: r
+}, c = {
+  props: l,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  m as meta,
-  n as propsMeta
+  i as meta,
+  c as propsMeta
 };

package/lib/link.ws.js

@@ -11,7 +11,6 @@ const a = {
     }
   ]
 }, n = {
-  type: "container",
   placeholder: "Link",
   icon: e,
   presetStyle: a,

package/lib/list-item.ws.js

@@ -3,18 +3,17 @@ 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 a = {
-  type: "container",
   placeholder: "List item",
   icon: t,
   states: o,
   presetStyle: {
     li: e
   }
-}, c = {
+}, l = {
   props: r,
   initialProps: ["id", "className"]
 };
 export {
   a as meta,
-  c as propsMeta
+  l as propsMeta
 };

package/lib/list.ws.js

@@ -34,7 +34,6 @@ const a = {
     }
   ]
 }, d = {
-  type: "container",
   icon: e,
   states: t,
   presetStyle: a

package/lib/markdown-embed.ws.js

@@ -2,7 +2,6 @@ import { MarkdownEmbedIcon as e } from "@webstudio-is/icons/svg";
 import { descendantComponent as o } from "@webstudio-is/sdk";
 import { props as t } from "./__generated__/markdown-embed.props.js";
 const a = {
-  type: "container",
   icon: e,
   contentModel: {
     category: "instance",

package/lib/paragraph.ws.js

@@ -4,17 +4,16 @@ import { p as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/paragraph.props.js";
 const p = {
   p: r
-}, n = {
-  type: "container",
+}, c = {
   placeholder: "Paragraph",
   icon: t,
   states: o,
   presetStyle: p
-}, c = {
+}, l = {
   props: e,
   initialProps: ["id", "className"]
 };
 export {
-  n as meta,
-  c as propsMeta
+  c as meta,
+  l as propsMeta
 };

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

@@ -1,9 +1,6 @@
 import { meta as t, propsMeta as a } from "./link.ws.js";
-const o = {
-  ...t,
-  type: "container"
-}, p = a;
+const p = t, e = a;
 export {
-  o as meta,
-  p as propsMeta
+  p as meta,
+  e as propsMeta
 };

package/lib/select.ws.js

@@ -1,17 +1,16 @@
 import { SelectIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as l } from "@webstudio-is/sdk";
-import { select as t } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/select.props.js";
+import { select as o } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/select.props.js";
 const r = {
   select: [
-    ...t,
+    ...o,
     {
       property: "display",
       value: { type: "keyword", value: "block" }
     }
   ]
 }, c = {
-  type: "container",
   icon: e,
   presetStyle: r,
   states: [
@@ -23,7 +22,7 @@ const r = {
     { selector: ":optional", label: "Optional" }
   ]
 }, d = {
-  props: o,
+  props: t,
   initialProps: [
     "id",
     "className",

package/lib/slot.ws.js

@@ -1,9 +1,8 @@
-import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
+import { SlotComponentIcon as o } from "@webstudio-is/icons/svg";
 const e = {
   category: "general",
-  type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
-  icon: t,
+  icon: o,
   order: 5
 }, n = {
   props: {}

package/lib/span.ws.js

@@ -1,17 +1,16 @@
 import { PaintBrushIcon as t } from "@webstudio-is/icons/svg";
 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 = {
+import { props as s } from "./__generated__/span.props.js";
+const e = {
   span: r
 }, n = {
-  type: "container",
   label: "Text",
   icon: t,
   states: o,
-  presetStyle: s
+  presetStyle: e
 }, c = {
-  props: e,
+  props: s,
   initialProps: ["id", "className"]
 };
 export {

package/lib/subscript.ws.js

@@ -2,19 +2,18 @@ import { SubscriptIcon as t } from "@webstudio-is/icons/svg";
 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 = {
+const p = {
   sub: r
 }, c = {
-  type: "container",
   label: "Subscript Text",
   icon: t,
   states: o,
-  presetStyle: e
-}, n = {
+  presetStyle: p
+}, l = {
   props: s,
   initialProps: ["id", "className"]
 };
 export {
   c as meta,
-  n as propsMeta
+  l as propsMeta
 };

package/lib/superscript.ws.js

@@ -2,19 +2,18 @@ import { SuperscriptIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { sup as r } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/superscript.props.js";
-const e = {
+const s = {
   sup: r
 }, c = {
-  type: "container",
   label: "Superscript Text",
   icon: t,
   states: o,
-  presetStyle: e
-}, n = {
+  presetStyle: s
+}, l = {
   props: p,
   initialProps: ["id", "className"]
 };
 export {
   c as meta,
-  n as propsMeta
+  l as propsMeta
 };

package/lib/text.ws.js

@@ -1,14 +1,13 @@
 import { TextIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/text.props.js";
-const s = {
-  type: "container",
+const n = {
   icon: t,
-  states: e,
+  states: o,
   presetStyle: {
     div: [
-      ...o,
+      ...e,
       {
         property: "min-height",
         value: { type: "unit", unit: "em", value: 1 }
@@ -28,6 +27,6 @@ const s = {
   initialProps: ["tag", "id", "className"]
 };
 export {
-  s as meta,
+  n as meta,
   m as propsMeta
 };

package/lib/time.ws.js

@@ -6,16 +6,15 @@ const r = {
   time: a
 }, s = {
   category: "localization",
-  type: "container",
   description: "Converts machine-readable date and time to a human-readable format.",
   icon: t,
   states: e,
   presetStyle: r
-}, c = {
+}, l = {
   props: o,
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
 };
 export {
   s as meta,
-  c as propsMeta
+  l as propsMeta
 };

package/lib/types/head-title.ws.d.ts

@@ -1,3 +1,3 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/video.d.ts

@@ -4,4 +4,6 @@ export declare const Video: import("react").ForwardRefExoticComponent<Omit<impor
     $progress?: Atom<number | undefined>;
     $visible?: Atom<boolean>;
     $timeline?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

package/lib/video.js

@@ -1,46 +1,57 @@
-import { jsx as b } from "react/jsx-runtime";
-import { forwardRef as m, useId as V, useEffect as _ } from "react";
-const a = "data-ws-video-id", H = {
+import { jsx as _ } from "react/jsx-runtime";
+import { forwardRef as H, useId as N, useContext as v, useEffect as y } from "react";
+import { ReactSdkContext as D } from "@webstudio-is/react-sdk/runtime";
+const c = "data-ws-video-id", R = {
   HAVE_NOTHING: 0,
   HAVE_METADATA: 1,
   HAVE_CURRENT_DATA: 2,
   HAVE_FUTURE_DATA: 3,
   HAVE_ENOUGH_DATA: 4
-}, N = m(({ $progress: r, $visible: n, $timeline: f, children: d, ...c }, A) => {
-  const s = V(), l = {
-    [a]: s
-  };
-  return _(() => {
-    if (r === void 0 || n === void 0)
-      return;
-    const e = document.querySelector(`[${a}="${s}"]`);
-    if (e === null || !(e instanceof HTMLVideoElement))
-      return;
-    if (e.play().catch(() => {
-    }), e.pause(), f)
-      return r.subscribe((i) => {
-        if (e.readyState < H.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+}, I = H(
+  ({
+    $progress: n,
+    $visible: r,
+    $timeline: f,
+    $webstudio$canvasOnly$assetId: U,
+    children: l,
+    src: s,
+    ...A
+  }, T) => {
+    const a = N(), E = {
+      [c]: a
+    }, { assetBaseUrl: d } = v(D), b = s != null && s.startsWith(d) ? `/cgi/video/${s.slice(d.length)}` : s;
+    return y(() => {
+      if (n === void 0 || r === void 0)
+        return;
+      const e = document.querySelector(`[${c}="${a}"]`);
+      if (e === null || !(e instanceof HTMLVideoElement))
+        return;
+      if (e.play().catch(() => {
+      }), e.pause(), f)
+        return n.subscribe((t) => {
+          if (e.readyState < R.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+            return;
+          let u = e.duration;
+          Number.isNaN(u) || (Number.isFinite(u) || (u = 60), e.currentTime = (t ?? 0) * u);
+        });
+      let i = !1, o = !1;
+      const m = r.subscribe((t) => {
+        o = t, o === !1 && i === !1 && !e.loop && (e.currentTime = 0);
+      }), V = n.subscribe((t) => {
+        if (i && (t === void 0 || t === 0 || t === 1)) {
+          i = !1, e.pause(), o === !1 && i === !1 && !e.loop && (e.currentTime = 0);
           return;
-        let u = e.duration;
-        Number.isNaN(u) || (Number.isFinite(u) || (u = 60), e.currentTime = (i ?? 0) * u);
+        }
+        i || (i = !0, e.ended || e.play().catch(() => {
+        }));
       });
-    let t = !1, o = !1;
-    const T = n.subscribe((i) => {
-      o = i, o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
-    }), E = r.subscribe((i) => {
-      if (t && (i === void 0 || i === 0 || i === 1)) {
-        t = !1, e.pause(), o === !1 && t === !1 && !e.loop && (e.currentTime = 0);
-        return;
-      }
-      t || (t = !0, e.ended || e.play().catch(() => {
-      }));
-    });
-    return () => {
-      E(), T();
-    };
-  }, [r, f, n, s]), /* @__PURE__ */ b("video", { ...c, ...l, ref: A, children: d });
-});
-N.displayName = "Video";
+      return () => {
+        V(), m();
+      };
+    }, [n, f, r, a]), /* @__PURE__ */ _("video", { src: b, ...A, ...E, ref: T, children: l });
+  }
+);
+I.displayName = "Video";
 export {
-  N as Video
+  I as Video
 };

package/lib/video.ws.js

@@ -1,8 +1,8 @@
-import { VideoIcon as o } from "@webstudio-is/icons/svg";
+import { VideoIcon as e } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as t } from "./__generated__/video.props.js";
-const p = {
-  icon: o,
+import { props as o } from "./__generated__/video.props.js";
+const i = {
+  icon: e,
   contentModel: {
     category: "instance",
     children: []
@@ -15,8 +15,18 @@ const p = {
       }
     ]
   }
-}, n = {
-  props: t,
+}, l = {
+  props: {
+    ...o,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1,
+      accept: ".mp4,.webm,.mpg,.mpeg,.mov"
+    }
+  },
   initialProps: [
     "id",
     "className",
@@ -32,6 +42,6 @@ const p = {
   ]
 };
 export {
-  p as meta,
-  n as propsMeta
+  i as meta,
+  l as propsMeta
 };