@webstudio-is/sdk-components-react 0.217.0 → 0.219.0

package/lib/list.ws.js

@@ -1,10 +1,10 @@
 import { ListIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
-import { ol as r, ul as o } from "@webstudio-is/sdk/normalize.css";
+import { ul as r, ol as o } from "@webstudio-is/sdk/normalize.css";
 import { props as p } from "./__generated__/list.props.js";
 const a = {
   ol: [
-    ...r,
+    ...o,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }
@@ -19,7 +19,7 @@ const a = {
     }
   ],
   ul: [
-    ...o,
+    ...r,
     {
       property: "margin-top",
       value: { type: "keyword", value: "0" }

package/lib/markdown-embed.js

@@ -1,14 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
 import { micromark as s } from "micromark";
-import { gfmTable as l, gfmTableHtml as i } from "micromark-extension-gfm-table";
+import { gfmTableHtml as l, gfmTable 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,
-      extensions: [l()],
-      htmlExtensions: [i()]
+      extensions: [i()],
+      htmlExtensions: [l()]
     }),
     [o]
   );

package/lib/shared/video.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const s = (t) => {
+  const e = "ontouchstart" in window;
+  (window.matchMedia("(max-width: 1024px)").matches || e) && t.requestFullscreen();
+}, c = o({
+  onInitPlayer: () => {
+  },
+  status: "initial"
+});
+export {
+  c as VideoContext,
+  s as requestFullscreen
+};

package/lib/types/link.d.ts

@@ -1,5 +1,5 @@
 export declare const defaultTag = "a";
-export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "download" | "target"> & {
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
     target?: "_self" | "_blank" | "_parent" | "_top";
     download?: boolean;
     prefetch?: "none" | "intent" | "render" | "viewport";

package/lib/types/shared/video.d.ts

@@ -0,0 +1,7 @@
+export declare const requestFullscreen: (element: HTMLIFrameElement) => void;
+export type PlayerStatus = "initial" | "loading" | "ready";
+export declare const VideoContext: import("react").Context<{
+    previewImageUrl?: URL;
+    onInitPlayer: () => void;
+    status: PlayerStatus;
+}>;

package/lib/types/vimeo.d.ts

@@ -66,13 +66,6 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
     /** Whether to display the video owner's portrait. Only works if either title or byline are also enabled */
     showPortrait?: VimeoPlayerOptions["portrait"];
 };
-export declare const requestFullscreen: (element: HTMLIFrameElement) => void;
-type PlayerStatus = "initial" | "loading" | "ready";
-export declare const VimeoContext: import("react").Context<{
-    previewImageUrl?: URL;
-    onInitPlayer: () => void;
-    status: PlayerStatus;
-}>;
 declare const defaultTag = "div";
 type Props = Omit<ComponentProps<typeof defaultTag>, keyof VimeoOptions> & VimeoOptions & {
     /**

package/lib/video.js

@@ -1,26 +1,22 @@
-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
-}, I = H(
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as V, useId as N, useContext as h, useEffect as x } from "react";
+import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
+const c = "data-ws-video-id", S = {
+  HAVE_METADATA: 1
+}, _ = V(
   ({
     $progress: n,
     $visible: r,
     $timeline: f,
-    $webstudio$canvasOnly$assetId: U,
+    $webstudio$canvasOnly$assetId: p,
     children: l,
     src: s,
-    ...A
-  }, T) => {
-    const a = N(), E = {
+    ...b
+  }, m) => {
+    const a = N(), A = {
       [c]: a
-    }, { assetBaseUrl: d } = v(D), b = s != null && s.startsWith(d) ? `/cgi/video/${s.slice(d.length)}` : s;
-    return y(() => {
+    }, { assetBaseUrl: d } = h(I), T = s != null && s.startsWith(d) ? `/cgi/video/${s.slice(d.length)}` : s;
+    return x(() => {
       if (n === void 0 || r === void 0)
         return;
       const e = document.querySelector(`[${c}="${a}"]`);
@@ -29,15 +25,15 @@ const c = "data-ws-video-id", R = {
       if (e.play().catch(() => {
       }), e.pause(), f)
         return n.subscribe((t) => {
-          if (e.readyState < R.HAVE_METADATA || (e.paused || e.pause(), e.seeking))
+          if (e.readyState < S.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) => {
+      const v = r.subscribe((t) => {
         o = t, o === !1 && i === !1 && !e.loop && (e.currentTime = 0);
-      }), V = n.subscribe((t) => {
+      }), E = 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;
@@ -46,12 +42,12 @@ const c = "data-ws-video-id", R = {
         }));
       });
       return () => {
-        V(), m();
+        E(), v();
       };
-    }, [n, f, r, a]), /* @__PURE__ */ _("video", { src: b, ...A, ...E, ref: T, children: l });
+    }, [n, f, r, a]), /* @__PURE__ */ y("video", { src: T, ...b, ...A, ref: m, children: l });
   }
 );
-I.displayName = "Video";
+_.displayName = "Video";
 export {
-  I as Video
+  _ as Video
 };

package/lib/vimeo-play-button.js

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as a, useCallback as m } from "react";
-import { VimeoContext as s } from "./vimeo.js";
+import s from "await-interaction-response";
 import { Button as l } from "./button.js";
-import c from "await-interaction-response";
+import { VideoContext as c } from "./shared/video.js";
 const f = r(
   (o, i) => {
-    const t = a(s), n = m(async () => {
-      await c(), t.onInitPlayer();
+    const t = a(c), n = m(async () => {
+      await s(), t.onInitPlayer();
     }, [t]);
     if (t.status === "initial")
       return /* @__PURE__ */ e(l, { ...o, onClick: n, ref: i });

package/lib/vimeo-preview-image.js

@@ -1,10 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as i, useContext as t } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m, useContext as t } from "react";
 import { Image as a } from "./image.js";
-import { VimeoContext as g } from "./vimeo.js";
-const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = i(({ src: A, ...e }, o) => {
+import { VideoContext as g } from "./shared/video.js";
+const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = m(({ src: A, ...e }, o) => {
   const r = t(g);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ i(
     a,
     {
       ...e,

package/lib/vimeo-spinner.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as r, useContext as i } from "react";
-import { VimeoContext as n } from "./vimeo.js";
+import { VideoContext as n } from "./shared/video.js";
 const m = r(
   (o, t) => {
     if (i(n).status === "loading")

package/lib/vimeo.js

@@ -1,19 +1,20 @@
-import { jsx as s, jsxs as q, Fragment as A } from "react/jsx-runtime";
-import { colord as B } from "colord";
-import { createContext as T, forwardRef as z, useState as y, useContext as G, useRef as H, useEffect as v } from "react";
-import { ReactSdkContext as Y } from "@webstudio-is/react-sdk/runtime";
-const J = (e) => {
-  if (e.url === void 0)
+import { jsx as i, jsxs as B, Fragment as D } from "react/jsx-runtime";
+import { colord as q } from "colord";
+import { forwardRef as z, useState as y, useContext as T, useRef as G, useEffect as v } from "react";
+import { ReactSdkContext as H } from "@webstudio-is/react-sdk/runtime";
+import { VideoContext as Y, requestFullscreen as J } from "./shared/video.js";
+const K = (t) => {
+  if (t.url === void 0)
     return;
-  let t;
+  let e;
   try {
-    const n = new URL(e.url);
-    t = new URL(M), t.pathname = `/video${n.pathname}`;
+    const o = new URL(t.url);
+    e = new URL(S), e.pathname = `/video${o.pathname}`;
   } catch {
   }
-  if (t === void 0)
+  if (e === void 0)
     return;
-  const r = {
+  const a = {
     showPortrait: "portrait",
     showByline: "byline",
     showTitle: "title",
@@ -23,36 +24,36 @@ const J = (e) => {
     backgroundMode: "background",
     doNotTrack: "dnt"
   };
-  let o;
-  for (o in e) {
-    const n = e[o];
-    if (o === "url" || n === void 0)
+  let r;
+  for (r in t) {
+    const o = t[r];
+    if (r === "url" || o === void 0)
       continue;
-    const i = r[o] ?? o;
-    t.searchParams.append(i, n.toString());
+    const s = a[r] ?? r;
+    e.searchParams.append(s, o.toString());
   }
-  if (t.searchParams.set("autoplay", "true"), typeof e.controlsColor == "string") {
-    const n = B(e.controlsColor).toHex().replace("#", "");
-    t.searchParams.set("color", n);
+  if (e.searchParams.set("autoplay", "true"), typeof t.controlsColor == "string") {
+    const o = q(t.controlsColor).toHex().replace("#", "");
+    e.searchParams.set("color", o);
   }
-  return e.showPortrait && t.searchParams.set("title", "true"), e.showByline && (t.searchParams.set("portrait", "true"), t.searchParams.set("title", "true")), t.toString();
-}, w = (e) => {
-  const t = document.createElement("link");
-  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+  return t.showPortrait && e.searchParams.set("title", "true"), t.showByline && (e.searchParams.set("portrait", "true"), e.searchParams.set("title", "true")), e.toString();
+}, w = (t) => {
+  const e = document.createElement("link");
+  e.rel = "preconnect", e.href = t, e.crossOrigin = "true", document.head.appendChild(e);
 };
 let U = !1;
-const K = "https://f.vimeocdn.com", M = "https://player.vimeo.com", S = "https://i.vimeocdn.com", Q = () => {
-  U || window.matchMedia("(hover: none)").matches || (w(K), w(M), w(S), U = !0);
-}, W = (e) => {
+const Q = "https://f.vimeocdn.com", S = "https://player.vimeo.com", L = "https://i.vimeocdn.com", W = () => {
+  U || window.matchMedia("(hover: none)").matches || (w(Q), w(S), w(L), U = !0);
+}, X = (t) => {
   try {
-    const r = new URL(e).pathname.split("/")[2];
-    return r === "" || r == null ? void 0 : r;
+    const a = new URL(t).pathname.split("/")[2];
+    return a === "" || a == null ? void 0 : a;
   } catch {
   }
-}, X = async (e) => {
-  const r = `https://vimeo.com/api/v2/video/${W(e)}.json`, n = (await (await fetch(r)).json())[0].thumbnail_large, i = n.substr(n.lastIndexOf("/") + 1).split("_")[0], a = new URL(S);
-  return a.pathname = `/video/${i}.webp`, a.searchParams.append("mw", "1100"), a.searchParams.append("mh", "619"), a.searchParams.append("q", "70"), a;
-}, Z = () => /* @__PURE__ */ s(
+}, Z = async (t) => {
+  const a = `https://vimeo.com/api/v2/video/${X(t)}.json`, o = (await (await fetch(a)).json())[0].thumbnail_large, s = o.substr(o.lastIndexOf("/") + 1).split("_")[0], n = new URL(L);
+  return n.pathname = `/video/${s}.webp`, n.searchParams.append("mw", "1100"), n.searchParams.append("mh", "619"), n.searchParams.append("q", "70"), n;
+}, ee = () => /* @__PURE__ */ i(
   "div",
   {
     style: {
@@ -65,147 +66,140 @@ const K = "https://f.vimeocdn.com", M = "https://player.vimeo.com", S = "https:/
     },
     children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
   }
-), tt = (e) => {
-  const t = "ontouchstart" in window;
-  (window.matchMedia("(max-width: 1024px)").matches || t) && e.requestFullscreen();
-}, et = ({
-  title: e,
-  status: t,
-  loading: r,
-  videoUrl: o,
-  previewImageUrl: n,
-  autoplay: i,
-  renderer: a,
-  showPreview: u,
+), te = ({
+  title: t,
+  status: e,
+  loading: a,
+  videoUrl: r,
+  previewImageUrl: o,
+  autoplay: s,
+  renderer: n,
+  showPreview: m,
   playsinline: f,
   onStatusChange: c,
   onPreviewImageUrlChange: l
 }) => {
-  const [m, h] = y(0), d = H(null);
+  const [u, h] = y(0), d = G(null);
   if (v(() => {
-    i && a !== "canvas" && t === "initial" && c("loading");
-  }, [i, t, a, c]), v(() => {
-    a !== "canvas" && Q();
-  }, [a]), v(() => {
-    if (o !== void 0) {
-      if (u === !1) {
+    s && n !== "canvas" && e === "initial" && c("loading");
+  }, [s, e, n, c]), v(() => {
+    n !== "canvas" && W();
+  }, [n]), v(() => {
+    if (r !== void 0) {
+      if (m === !1) {
         l(void 0);
         return;
       }
-      n === void 0 && X(o).then(l).catch(() => {
-        console.error(`Could not load preview image for ${o}`);
+      o === void 0 && Z(r).then(l).catch(() => {
+        console.error(`Could not load preview image for ${r}`);
       });
     }
-  }, [l, u, o, n]), !(a === "canvas" || t === "initial"))
-    return /* @__PURE__ */ s(
+  }, [l, m, r, o]), !(n === "canvas" || e === "initial"))
+    return /* @__PURE__ */ i(
       "iframe",
       {
         ref: d,
-        title: e,
-        src: o,
-        loading: r,
+        title: t,
+        src: r,
+        loading: a,
         allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
         allowFullScreen: !0,
         style: {
           position: "absolute",
           width: "100%",
           height: "100%",
-          opacity: m,
+          opacity: u,
           transition: "opacity 1s",
           border: "none"
         },
         onLoad: () => {
-          c("ready"), h(1), d.current && !f && !i && tt(d.current);
+          c("ready"), h(1), d.current && !f && !s && J(d.current);
         }
       }
     );
-}, ot = T({
-  onInitPlayer: () => {
-  },
-  status: "initial"
-}), rt = z(
+}, re = z(
   ({
-    url: e,
-    loading: t = "lazy",
-    autoplay: r = !1,
-    autopause: o = !0,
-    showByline: n = !1,
-    showControls: i = !0,
-    doNotTrack: a = !1,
-    keyboard: u = !0,
+    url: t,
+    loading: e = "lazy",
+    autoplay: a = !1,
+    autopause: r = !0,
+    showByline: o = !1,
+    showControls: s = !0,
+    doNotTrack: n = !1,
+    keyboard: m = !0,
     loop: f = !1,
     muted: c = !1,
     pip: l = !1,
-    playsinline: m = !1,
+    playsinline: u = !1,
     showPortrait: h = !0,
     quality: d = "auto",
-    responsive: L = !0,
-    speed: k = !1,
-    showTitle: E = !1,
-    transparent: _ = !0,
-    showPreview: j = !1,
-    autopip: F,
-    controlsColor: N,
-    interactiveParams: O,
-    texttrack: V,
-    children: D,
+    responsive: k = !0,
+    speed: E = !1,
+    showTitle: _ = !1,
+    transparent: j = !0,
+    showPreview: M = !1,
+    autopip: N,
+    controlsColor: O,
+    interactiveParams: V,
+    texttrack: F,
+    children: $,
     ...g
   }, p) => {
-    const [P, C] = y("initial"), [x, $] = y(), { renderer: R } = G(Y), b = J({
-      url: e,
-      autoplay: r,
-      autopause: o,
-      showControls: i,
-      controlsColor: N,
-      doNotTrack: a,
-      interactiveParams: O,
-      keyboard: u,
+    const [P, C] = y("initial"), [I, A] = y(), { renderer: R } = T(H), b = K({
+      url: t,
+      autoplay: a,
+      autopause: r,
+      showControls: s,
+      controlsColor: O,
+      doNotTrack: n,
+      interactiveParams: V,
+      keyboard: m,
       loop: f,
       muted: c,
       pip: l,
-      playsinline: m,
+      playsinline: u,
       quality: d,
-      responsive: L,
-      speed: k,
-      texttrack: V,
-      showTitle: E,
-      transparent: _,
+      responsive: k,
+      speed: E,
+      texttrack: F,
+      showTitle: _,
+      transparent: j,
       showPortrait: h,
-      autopip: F
+      autopip: N
     });
-    return /* @__PURE__ */ s(
-      ot.Provider,
+    return /* @__PURE__ */ i(
+      Y.Provider,
       {
         value: {
           status: P,
-          previewImageUrl: x,
+          previewImageUrl: I,
           onInitPlayer() {
             R !== "canvas" && C("loading");
           }
         },
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ i(
           "div",
           {
             ...g,
-            ref: (I) => {
-              p !== null && (typeof p == "function" ? p(I) : p.current = I);
+            ref: (x) => {
+              p !== null && (typeof p == "function" ? p(x) : p.current = x);
             },
-            children: b === void 0 ? /* @__PURE__ */ s(Z, {}) : /* @__PURE__ */ q(A, { children: [
-              D,
-              /* @__PURE__ */ s(
-                et,
+            children: b === void 0 ? /* @__PURE__ */ i(ee, {}) : /* @__PURE__ */ B(D, { children: [
+              $,
+              /* @__PURE__ */ i(
+                te,
                 {
                   title: g.title,
-                  autoplay: r,
-                  playsinline: m,
+                  autoplay: a,
+                  playsinline: u,
                   videoUrl: b,
-                  previewImageUrl: x,
-                  loading: t,
-                  showPreview: j,
+                  previewImageUrl: I,
+                  loading: e,
+                  showPreview: M,
                   renderer: R,
                   status: P,
                   onStatusChange: C,
-                  onPreviewImageUrlChange: $
+                  onPreviewImageUrlChange: A
                 }
               )
             ] })
@@ -215,9 +209,7 @@ const K = "https://f.vimeocdn.com", M = "https://player.vimeo.com", S = "https:/
     );
   }
 );
-rt.displayName = "Vimeo";
+re.displayName = "Vimeo";
 export {
-  rt as Vimeo,
-  ot as VimeoContext,
-  tt as requestFullscreen
+  re as Vimeo
 };

package/lib/webhook-form.template.js

@@ -1,26 +1,26 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { Variable as s, $ as e, expression as o, ActionValue as i, PlaceholderValue as a } from "@webstudio-is/template";
-const n = new s("formState", "initial"), w = {
+import { $ as e, ActionValue as s, PlaceholderValue as o, Variable as i, expression as a } from "@webstudio-is/template";
+const n = new i("formState", "initial"), w = {
   category: "data",
   order: 1,
   description: "Collect user data and send it to any webhook.",
   template: /* @__PURE__ */ r(
     e.Form,
     {
-      state: o`${n}`,
-      onStateChange: new i(["state"], o`${n} = state`),
+      state: a`${n}`,
+      onStateChange: new s(["state"], a`${n} = state`),
       children: [
         /* @__PURE__ */ r(
           e.Box,
           {
             "ws:label": "Form Content",
-            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            "ws:show": a`${n} === 'initial' || ${n} === 'error'`,
             children: [
-              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
+              /* @__PURE__ */ t(e.Label, { children: new o("Name") }),
               /* @__PURE__ */ t(e.Input, { name: "name" }),
-              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
+              /* @__PURE__ */ t(e.Label, { children: new o("Email") }),
               /* @__PURE__ */ t(e.Input, { name: "email" }),
-              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+              /* @__PURE__ */ t(e.Button, { children: new o("Submit") })
             ]
           }
         ),
@@ -28,16 +28,16 @@ const n = new s("formState", "initial"), w = {
           e.Box,
           {
             "ws:label": "Success Message",
-            "ws:show": o`${n} === 'success'`,
-            children: new a("Thank you for getting in touch!")
+            "ws:show": a`${n} === 'success'`,
+            children: new o("Thank you for getting in touch!")
           }
         ),
         /* @__PURE__ */ t(
           e.Box,
           {
             "ws:label": "Error Message",
-            "ws:show": o`${n} === 'error'`,
-            children: new a("Sorry, something went wrong.")
+            "ws:show": a`${n} === 'error'`,
+            children: new o("Sorry, something went wrong.")
           }
         )
       ]

package/lib/xml-node.js

@@ -1,14 +1,14 @@
 import { jsxs as t, jsx as r, Fragment as u } from "react/jsx-runtime";
 import { ReactSdkContext as g, xmlNodeTagSuffix as x } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as b, useContext as N, createElement as C, Children as F } from "react";
+import { forwardRef as b, useContext as C, createElement as N, Children as F } from "react";
 const j = b(
   ({ tag: c = "", children: l, ...i }, d) => {
-    const { renderer: p } = N(g), o = Object.entries(i).filter(
+    const { renderer: p } = C(g), o = Object.entries(i).filter(
       ([e]) => e.startsWith("data-") === !1 && e.startsWith("aria-") === !1
     ).filter(([e]) => e.toLowerCase() !== "tabindex").filter(([, e]) => typeof e != "function"), s = c.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "").trim();
     if (p === void 0) {
       const e = Object.fromEntries(o);
-      return C(
+      return N(
         `${s}${x}`,
         e,
         l
@@ -24,7 +24,7 @@ const j = b(
         '"'
       ] })
     ] }, y));
-    return /* @__PURE__ */ t("div", { ...i, children: [
+    return /* @__PURE__ */ t("div", { ...i, style: { backgroundColor: "rgba(255,255,255,1)" }, children: [
       /* @__PURE__ */ t("span", { children: [
         /* @__PURE__ */ t("span", { style: { color: "#800000" }, children: [
           "<",

package/lib/youtube.js

@@ -1,7 +1,7 @@
 import { jsx as u, jsxs as E, Fragment as O } from "react/jsx-runtime";
 import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as y } from "react";
 import { ReactSdkContext as A } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext as N, requestFullscreen as P } from "./vimeo.js";
+import { VideoContext as N, requestFullscreen as P } from "./shared/video.js";
 const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j = "https://img.youtube.com", L = (e) => {
   if (e)
     try {