@weaverse/react 0.7.26 → 0.7.27

package/dist/index.d.ts

@@ -75,15 +75,22 @@ interface MapElementProps extends WeaverseElementProps {
 interface TextElementProps extends WeaverseElementProps {
     value: string;
 }
-interface VideoElementProps extends WeaverseElementProps {
+interface VideoCommonProps {
     src: string;
+    type?: string;
     poster: string;
     loop: boolean;
-    type: string;
     controls: boolean;
     autoPlay: boolean;
     muted: boolean;
 }
+declare type VideoElementProps = VideoCommonProps & WeaverseElementProps;
+interface YoutubeElementProps extends VideoCommonProps {
+    youtubeId: string;
+}
+interface VimeoElementProps extends VideoCommonProps {
+    vimeoId: string;
+}
 declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
 declare type CountdownTimerType = 'fixed-time' | 'evergreen';
 interface CountdownElementProps extends WeaverseElementProps {
@@ -117,4 +124,4 @@ declare type InstagramMedia = {
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
-export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, PlaceholderProps, SharedComponents, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, PlaceholderProps, SharedComponents, TextElementProps, TimerBlockProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };

package/dist/index.js

@@ -470,28 +470,107 @@ Text.defaultProps = {
 };
 var text_default = Text;
 
-// src/elements/video.tsx
+// src/elements/video/index.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/elements/video/utils.ts
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
+}
+
+// src/elements/video/Youtube.tsx
 var import_react9 = __toESM(require("react"));
-var Video = (0, import_react9.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
-  let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ import_react9.default.createElement("video", {
-    controls: isDesignMode ? false : controls,
-    autoPlay: isDesignMode ? false : autoPlay,
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay ? 1 : 0}&controls=${controls ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${muted ? 1 : 0}`;
+  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?${params}`;
+  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
+  return /* @__PURE__ */ import_react9.default.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
+}
+
+// src/elements/video/vimeo.tsx
+var import_react10 = __toESM(require("react"));
+function Vimeo(props) {
+  let { vimeoId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
+  let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
+  return /* @__PURE__ */ import_react10.default.createElement("iframe", {
+    src: vimeoSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true
+  });
+}
+
+// src/elements/video/html-video.tsx
+var import_react11 = __toESM(require("react"));
+function HtmlVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ import_react11.default.createElement("video", {
+    controls,
+    autoPlay,
     loop,
-    muted: true,
+    muted,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react9.default.createElement("source", {
+  }, /* @__PURE__ */ import_react11.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), /* @__PURE__ */ import_react9.default.createElement("source", {
+  }), /* @__PURE__ */ import_react11.default.createElement("source", {
     src,
     type: "video/ogg"
-  }), "Your browser does not support the video tag."));
+  }), "Your browser does not support the video tag.");
+}
+
+// src/elements/video/index.tsx
+var Video = (0, import_react12.forwardRef)((props, ref) => {
+  let { isDesignMode } = (0, import_react12.useContext)(WeaverseContext);
+  let {
+    src,
+    controls,
+    poster,
+    autoPlay: originAutoPlay,
+    loop,
+    muted,
+    ...rest
+  } = props;
+  let autoPlay = !isDesignMode && originAutoPlay;
+  let videoProps = { src, controls, poster, autoPlay, loop, muted };
+  let content;
+  let youtubeId = getYoutubeEmbedId(src);
+  let vimeoId = getVimeoId(src);
+  if (youtubeId) {
+    content = /* @__PURE__ */ import_react12.default.createElement(Youtube, {
+      ...videoProps,
+      youtubeId
+    });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ import_react12.default.createElement(Vimeo, {
+      ...videoProps,
+      vimeoId
+    });
+  } else {
+    content = /* @__PURE__ */ import_react12.default.createElement(HtmlVideo, {
+      ...videoProps
+    });
+  }
+  return /* @__PURE__ */ import_react12.default.createElement("div", {
+    ref,
+    ...rest
+  }, content);
 });
 var css8 = {
   "@desktop": {
@@ -506,7 +585,6 @@ Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
   loop: false,
-  type: "video/mp4",
   controls: false,
   autoPlay: true,
   muted: true
@@ -514,32 +592,32 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/elements/shared/Placeholder.tsx
-var import_react10 = __toESM(require("react"));
-var Placeholder = (0, import_react10.forwardRef)(
+var import_react13 = __toESM(require("react"));
+var Placeholder = (0, import_react13.forwardRef)(
   (props, ref) => {
     let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       "data-wv-placeholder": true,
       ref,
       ...rest
-    }, /* @__PURE__ */ import_react10.default.createElement("div", {
+    }, /* @__PURE__ */ import_react13.default.createElement("div", {
       style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react10.default.createElement("div", null, children));
+    }, element), /* @__PURE__ */ import_react13.default.createElement("div", null, children));
   }
 );
 var Placeholder_default = Placeholder;
 
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = (0, import_react11.forwardRef)(
+var Instagram = (0, import_react14.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react11.useState)([]);
-    let [error, setError] = (0, import_react11.useState)(null);
-    (0, import_react11.useEffect)(() => {
+    let [media, setMedia] = (0, import_react14.useState)([]);
+    let [error, setError] = (0, import_react14.useState)(null);
+    (0, import_react14.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -556,10 +634,10 @@ var Instagram = (0, import_react11.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react11.default.createElement("div", {
+      return /* @__PURE__ */ import_react14.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react11.default.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ import_react14.default.createElement(Placeholder_default, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -567,27 +645,28 @@ var Instagram = (0, import_react11.forwardRef)(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ import_react11.default.createElement("div", {
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ import_react11.default.createElement("a", {
+      return /* @__PURE__ */ import_react14.default.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ import_react11.default.createElement("img", {
+      }, /* @__PURE__ */ import_react14.default.createElement("img", {
         alt: caption,
         src: media_url
       }));
     })));
   }
 );
-var css9 = {
+var css9 = {};
+var permanentCss2 = {
   "@desktop": {
     ".wv-ig-media-container": {
       overflow: "hidden",
@@ -597,9 +676,8 @@ var css9 = {
       gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
       gap: "var(--wv-ig-images-gap, 0px)",
       img: {
-        aspectRatio: "1 / 1",
-        width: "100%",
-        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
         objectFit: "cover"
       }
     }
@@ -642,7 +720,8 @@ var Elements = {
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css9
+    defaultCss: css9,
+    permanentCss: permanentCss2
   },
   Layout: {
     Component: layout_default,
@@ -669,7 +748,7 @@ var Elements = {
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react12 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/utils/index.ts
 function shortCssObject(css10) {
@@ -707,10 +786,10 @@ function generateItemClass(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react12.useState)(context.projectData);
-  let rootRef = (0, import_react12.useRef)();
+  let [, setData] = (0, import_react15.useState)(context.projectData);
+  let rootRef = (0, import_react15.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -720,23 +799,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react15.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react12.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react15.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react15.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react12.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react12.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react15.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react15.useState)(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -752,13 +831,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react12.default.createElement(Component, {
+    return /* @__PURE__ */ import_react15.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react15.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -768,15 +847,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react12.useContext)(WeaverseContext);
+  let context = (0, import_react15.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react15.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react12.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react15.default.createElement(ItemComponent, {
     key: id,
     instance
   });

package/dist/index.mjs

@@ -431,28 +431,107 @@ Text.defaultProps = {
 };
 var text_default = Text;
 
-// src/elements/video.tsx
-import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
-var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext3(WeaverseContext);
-  let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
-  return /* @__PURE__ */ React9.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ React9.createElement("video", {
-    controls: isDesignMode ? false : controls,
-    autoPlay: isDesignMode ? false : autoPlay,
+// src/elements/video/index.tsx
+import React12, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
+
+// src/elements/video/utils.ts
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
+}
+
+// src/elements/video/Youtube.tsx
+import React9 from "react";
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay ? 1 : 0}&controls=${controls ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${muted ? 1 : 0}`;
+  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?${params}`;
+  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
+  return /* @__PURE__ */ React9.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
+}
+
+// src/elements/video/vimeo.tsx
+import React10 from "react";
+function Vimeo(props) {
+  let { vimeoId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
+  let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
+  return /* @__PURE__ */ React10.createElement("iframe", {
+    src: vimeoSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true
+  });
+}
+
+// src/elements/video/html-video.tsx
+import React11 from "react";
+function HtmlVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ React11.createElement("video", {
+    controls,
+    autoPlay,
     loop,
-    muted: true,
+    muted,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ React9.createElement("source", {
+  }, /* @__PURE__ */ React11.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), /* @__PURE__ */ React9.createElement("source", {
+  }), /* @__PURE__ */ React11.createElement("source", {
     src,
     type: "video/ogg"
-  }), "Your browser does not support the video tag."));
+  }), "Your browser does not support the video tag.");
+}
+
+// src/elements/video/index.tsx
+var Video = forwardRef7((props, ref) => {
+  let { isDesignMode } = useContext3(WeaverseContext);
+  let {
+    src,
+    controls,
+    poster,
+    autoPlay: originAutoPlay,
+    loop,
+    muted,
+    ...rest
+  } = props;
+  let autoPlay = !isDesignMode && originAutoPlay;
+  let videoProps = { src, controls, poster, autoPlay, loop, muted };
+  let content;
+  let youtubeId = getYoutubeEmbedId(src);
+  let vimeoId = getVimeoId(src);
+  if (youtubeId) {
+    content = /* @__PURE__ */ React12.createElement(Youtube, {
+      ...videoProps,
+      youtubeId
+    });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ React12.createElement(Vimeo, {
+      ...videoProps,
+      vimeoId
+    });
+  } else {
+    content = /* @__PURE__ */ React12.createElement(HtmlVideo, {
+      ...videoProps
+    });
+  }
+  return /* @__PURE__ */ React12.createElement("div", {
+    ref,
+    ...rest
+  }, content);
 });
 var css8 = {
   "@desktop": {
@@ -467,7 +546,6 @@ Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
   loop: false,
-  type: "video/mp4",
   controls: false,
   autoPlay: true,
   muted: true
@@ -475,20 +553,20 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
+import React14, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
 
 // src/elements/shared/Placeholder.tsx
-import React10, { forwardRef as forwardRef8 } from "react";
+import React13, { forwardRef as forwardRef8 } from "react";
 var Placeholder = forwardRef8(
   (props, ref) => {
     let { element, children, ...rest } = props;
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React13.createElement("div", {
       "data-wv-placeholder": true,
       ref,
       ...rest
-    }, /* @__PURE__ */ React10.createElement("div", {
+    }, /* @__PURE__ */ React13.createElement("div", {
       style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ React10.createElement("div", null, children));
+    }, element), /* @__PURE__ */ React13.createElement("div", null, children));
   }
 );
 var Placeholder_default = Placeholder;
@@ -517,10 +595,10 @@ var Instagram = forwardRef9(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ React11.createElement("div", {
+      return /* @__PURE__ */ React14.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ React11.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ React14.createElement(Placeholder_default, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -528,27 +606,28 @@ var Instagram = forwardRef9(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ React11.createElement("div", {
+    return /* @__PURE__ */ React14.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ React11.createElement("div", {
+    }, /* @__PURE__ */ React14.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ React11.createElement("a", {
+      return /* @__PURE__ */ React14.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ React11.createElement("img", {
+      }, /* @__PURE__ */ React14.createElement("img", {
         alt: caption,
         src: media_url
       }));
     })));
   }
 );
-var css9 = {
+var css9 = {};
+var permanentCss2 = {
   "@desktop": {
     ".wv-ig-media-container": {
       overflow: "hidden",
@@ -558,9 +637,8 @@ var css9 = {
       gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
       gap: "var(--wv-ig-images-gap, 0px)",
       img: {
-        aspectRatio: "1 / 1",
-        width: "100%",
-        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
         objectFit: "cover"
       }
     }
@@ -603,7 +681,8 @@ var Elements = {
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css9
+    defaultCss: css9,
+    permanentCss: permanentCss2
   },
   Layout: {
     Component: layout_default,
@@ -630,7 +709,7 @@ var Elements = {
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React15, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
 function shortCssObject(css10) {
@@ -681,13 +760,13 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, /* @__PURE__ */ React15.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
@@ -713,13 +792,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React12.createElement(Component, {
+    return /* @__PURE__ */ React15.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -733,11 +812,11 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React12.createElement(ItemComponent, {
+  return /* @__PURE__ */ React15.createElement(ItemComponent, {
     key: id,
     instance
   });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.26",
+  "version": "0.7.27",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.7.26",
+    "@weaverse/core": "0.7.27",
     "nuka-carousel": "^5.4.0"
   }
 }