@webstudio-is/sdk-components-react 0.206.0 → 0.207.0

package/lib/types/vimeo.d.ts

@@ -66,6 +66,7 @@ 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;

package/lib/vimeo.js

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

package/lib/vimeo.ws.js

@@ -1,14 +1,14 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/vimeo.props.js";
-const n = {
-  div: r
+import { div as i } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/vimeo.props.js";
+const r = {
+  div: i
 }, c = {
   type: "container",
   icon: o,
   states: t,
-  presetStyle: n,
+  presetStyle: r,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
@@ -29,9 +29,10 @@ const n = {
   "showByline",
   "showTitle",
   "showControls",
-  "controlsColor"
+  "controlsColor",
+  "playsinline"
 ], m = {
-  props: i,
+  props: n,
   initialProps: e
 };
 export {

package/lib/webhook-form.ws.js

@@ -17,7 +17,15 @@ const n = {
     { selector: "[data-state=success]", label: "Success" }
   ]
 }, c = {
-  props: e,
+  props: {
+    ...e,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: !0
+    }
+  },
   initialProps: ["id", "className", "state", "action"]
 };
 export {

package/lib/youtube.js

@@ -1,137 +1,139 @@
-import { jsx as u, jsxs as R, Fragment as _ } from "react/jsx-runtime";
-import { forwardRef as L, useState as h, useContext as C, useEffect as y } from "react";
-import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext as E } from "./vimeo.js";
-const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
+import { jsx as m, jsxs as _, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as C, useState as p, useContext as I, useRef as E, useEffect as h } from "react";
+import { ReactSdkContext as O } from "@webstudio-is/react-sdk/runtime";
+import { VimeoContext as x, requestFullscreen as S } from "./vimeo.js";
+const T = "https://www.youtube-nocookie.com", j = "https://www.youtube.com", v = "https://img.youtube.com", R = (e) => {
   if (e)
     try {
-      const t = new URL(e);
-      return t.pathname === "/embed" ? void 0 : t.hostname === "youtu.be" ? t.pathname.slice(1) : t.searchParams.get("v") || t.pathname.split("/").pop();
+      const a = new URL(e);
+      return a.pathname === "/embed" ? void 0 : a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
     } catch {
       return e;
     }
-}, S = (e, t) => {
-  var n, i;
-  const l = k(e.url), r = new URL(t);
+}, A = (e, a) => {
+  var i, c;
+  const l = R(e.url), r = new URL(a);
   if (l)
     r.pathname = `/embed/${l}`;
   else if (e.url)
     try {
-      const c = new URL(e.url);
-      r.pathname = c.pathname, r.search = c.search;
+      const n = new URL(e.url);
+      r.pathname = n.pathname, r.search = n.search;
     } catch {
     }
-  const o = Object.keys(e), a = {};
-  for (const c of o)
-    switch (c) {
+  const o = Object.keys(e), t = {};
+  for (const n of o)
+    switch (n) {
       case "autoplay":
-        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
+        t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
         break;
       case "muted":
-        a.mute = e.muted ? "1" : "0";
+        t.mute = e.muted ? "1" : "0";
         break;
       case "showControls":
-        a.controls = e.showControls ? "1" : "0";
+        t.controls = e.showControls ? "1" : "0";
         break;
       case "showRelatedVideos":
-        a.rel = e.showRelatedVideos ? "1" : "0";
+        t.rel = e.showRelatedVideos ? "1" : "0";
         break;
       case "keyboard":
-        a.keyboard = e.keyboard ? "1" : "0";
+        t.keyboard = e.keyboard ? "1" : "0";
         break;
       case "loop":
-        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
+        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = l);
         break;
       case "inline":
-        a.playsinline = e.inline ? "1" : "0";
+        t.playsinline = e.inline ? "1" : "0";
         break;
       case "allowFullscreen":
-        a.fs = e.allowFullscreen ? "1" : "0";
+        t.fs = e.allowFullscreen ? "1" : "0";
         break;
       case "captionLanguage":
-        a.cc_lang_pref = e.captionLanguage;
+        t.cc_lang_pref = e.captionLanguage;
         break;
       case "showCaptions":
-        a.cc_load_policy = e.showCaptions ? "1" : "0";
+        t.cc_load_policy = e.showCaptions ? "1" : "0";
         break;
       case "showAnnotations":
-        a.iv_load_policy = e.showAnnotations ? "1" : "3";
+        t.iv_load_policy = e.showAnnotations ? "1" : "3";
         break;
       case "startTime":
-        a.start = (n = e.startTime) == null ? void 0 : n.toString();
+        t.start = (i = e.startTime) == null ? void 0 : i.toString();
         break;
       case "endTime":
-        a.end = (i = e.endTime) == null ? void 0 : i.toString();
+        t.end = (c = e.endTime) == null ? void 0 : c.toString();
         break;
       case "disableKeyboard":
-        a.disablekb = e.disableKeyboard ? "1" : "0";
+        t.disablekb = e.disableKeyboard ? "1" : "0";
         break;
       case "language":
-        a.hl = e.language;
+        t.hl = e.language;
         break;
       case "listId":
-        a.list = e.listId;
+        t.list = e.listId;
         break;
       case "listType":
-        a.listType = e.listType;
+        t.listType = e.listType;
         break;
       case "color":
-        a.color = e.color;
+        t.color = e.color;
         break;
       case "origin":
-        a.origin = e.origin;
+        t.origin = e.origin;
         break;
       case "referrer":
-        a.widget_referrer = e.referrer;
+        t.widget_referrer = e.referrer;
         break;
       case "playlist":
-        a.playlist = e.playlist;
+        t.playlist = e.playlist;
         break;
     }
-  return Object.entries(a).forEach(([c, s]) => {
-    s !== void 0 && r.searchParams.append(c, s.toString());
+  return Object.entries(t).forEach(([n, s]) => {
+    s !== void 0 && r.searchParams.append(n, s.toString());
   }), r.toString();
-}, p = (e) => {
-  const t = document.createElement("link");
-  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+}, w = (e) => {
+  const a = document.createElement("link");
+  a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
 };
-let g = !1;
-const T = (e) => {
-  if (!(g || window.matchMedia("(hover: none)").matches)) {
+let k = !1;
+const N = (e) => {
+  if (!(k || window.matchMedia("(hover: none)").matches)) {
     try {
-      const t = new URL(e);
-      p(t.origin);
+      const a = new URL(e);
+      w(a.origin);
     } catch {
     }
-    p(w), g = !0;
+    w(v), k = !0;
   }
-}, j = (e) => new URL(`${w}/vi/${e}/maxresdefault.jpg`), A = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), N = ({
+}, P = (e) => new URL(`${v}/vi/${e}/maxresdefault.jpg`), U = () => /* @__PURE__ */ m("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), V = ({
   title: e,
-  status: t,
+  status: a,
   loading: l,
   videoUrl: r,
   previewImageUrl: o,
-  autoplay: a,
-  renderer: n,
-  showPreview: i,
-  onStatusChange: c,
-  onPreviewImageUrlChange: s
+  autoplay: t,
+  inline: i,
+  renderer: c,
+  showPreview: n,
+  onStatusChange: s,
+  onPreviewImageUrlChange: u
 }) => {
-  const [m, b] = h(0);
-  return y(() => {
-    a && n !== "canvas" && t === "initial" && c("loading");
-  }, [a, t, n, c]), y(() => {
-    n !== "canvas" && T(r);
-  }, [n, r]), y(() => {
-    const d = k(r);
-    if (!d || !i) {
-      s(void 0);
+  const [b, f] = p(0), d = E(null);
+  return h(() => {
+    t && c !== "canvas" && a === "initial" && s("loading");
+  }, [t, a, c, s]), h(() => {
+    c !== "canvas" && N(r);
+  }, [c, r]), h(() => {
+    const y = R(r);
+    if (!y || !n) {
+      u(void 0);
       return;
     }
-    o || s(j(d));
-  }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
+    o || u(P(y));
+  }, [u, n, r, o]), c === "canvas" || a === "initial" ? null : /* @__PURE__ */ m(
     "iframe",
     {
+      ref: d,
       title: e,
       src: r,
       loading: l,
@@ -141,66 +143,69 @@ const T = (e) => {
         position: "absolute",
         width: "100%",
         height: "100%",
-        opacity: m,
+        opacity: b,
         transition: "opacity 1s",
         border: "none"
       },
       onLoad: () => {
-        c("ready"), b(1);
+        s("ready"), f(1), !i && !t && d.current && S(d.current);
       }
     }
   );
-}, P = L(
+}, D = C(
   ({
     url: e,
-    loading: t = "lazy",
+    loading: a = "lazy",
     autoplay: l,
     showPreview: r,
     children: o,
-    privacyEnhancedMode: a,
-    ...n
-  }, i) => {
-    const [c, s] = h("initial"), [m, b] = h(), { renderer: d } = C(I), v = a ?? !0 ? O : x, f = S(
+    privacyEnhancedMode: t,
+    inline: i = !1,
+    ...c
+  }, n) => {
+    const [s, u] = p("initial"), [b, f] = p(), { renderer: d } = I(O), y = t ?? !0 ? T : j, g = A(
       {
-        ...n,
+        ...c,
+        inline: i,
         url: e,
         autoplay: !0
       },
-      v
+      y
     );
-    return /* @__PURE__ */ u(
-      E.Provider,
+    return /* @__PURE__ */ m(
+      x.Provider,
       {
         value: {
-          status: c,
-          previewImageUrl: m,
+          status: s,
+          previewImageUrl: b,
           onInitPlayer() {
-            d !== "canvas" && s("loading");
+            d !== "canvas" && u("loading");
           }
         },
-        children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
+        children: /* @__PURE__ */ m("div", { ...c, ref: n, children: g ? /* @__PURE__ */ _(L, { children: [
           o,
-          /* @__PURE__ */ u(
-            N,
+          /* @__PURE__ */ m(
+            V,
             {
-              title: n.title,
+              title: c.title,
               autoplay: l,
-              videoUrl: f,
-              previewImageUrl: m,
-              loading: t,
+              videoUrl: g,
+              previewImageUrl: b,
+              loading: a,
+              inline: i,
               showPreview: r,
               renderer: d,
-              status: c,
-              onStatusChange: s,
-              onPreviewImageUrlChange: b
+              status: s,
+              onStatusChange: u,
+              onPreviewImageUrlChange: f
             }
           )
-        ] }) : /* @__PURE__ */ u(A, {}) })
+        ] }) : /* @__PURE__ */ m(U, {}) })
       }
     );
   }
 );
-P.displayName = "YouTube";
+D.displayName = "YouTube";
 export {
-  P as YouTube
+  D as YouTube
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.206.0",
+  "version": "0.207.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,21 +49,22 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.1",
     "micromark-extension-gfm-table": "^2.1.0",
-    "@webstudio-is/icons": "0.206.0",
-    "@webstudio-is/image": "0.206.0",
-    "@webstudio-is/react-sdk": "0.206.0",
-    "@webstudio-is/sdk": "0.206.0"
+    "@webstudio-is/icons": "0.207.0",
+    "@webstudio-is/react-sdk": "0.207.0",
+    "@webstudio-is/sdk": "0.207.0",
+    "@webstudio-is/image": "0.207.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.4",
+    "vitest": "^3.0.8",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.206.0",
+    "@webstudio-is/template": "0.207.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {