@weaverse/react 1.0.10 → 1.0.11

package/dist/index.d.ts

@@ -158,6 +158,10 @@ declare function Dots(props: SliderDotsProps): JSX.Element;
 
 declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
 
+declare function NoHydrate({ getHTML, ...rest }: {
+    getHTML?: () => string;
+} & JSX.IntrinsicElements['div']): JSX.Element;
+
 declare let Components: {
     Background: typeof Background;
     Icon: typeof Icon;
@@ -167,6 +171,7 @@ declare let Components: {
     Spinner: typeof Spinner;
     Slider: typeof Slider;
     Tooltip: typeof Tooltip;
+    NoHydrate: typeof NoHydrate;
 };
 declare let SliderComponents: {
     Arrows: typeof Arrows;

package/dist/index.js

@@ -45,7 +45,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core2 = require("@weaverse/core");
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -694,7 +694,7 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/components/modal/index.tsx
 var modal_exports = {};
@@ -1936,6 +1936,25 @@ var Placeholder = (0, import_react29.forwardRef)(
 );
 var placeholder_default = Placeholder;
 
+// src/components/no-hydrate.tsx
+var import_react30 = __toESM(require("react"));
+function NoHydrate({
+  getHTML,
+  ...rest
+}) {
+  let id = (0, import_react30.useId)();
+  let [html] = (0, import_react30.useState)(() => {
+    if (typeof document === "undefined") {
+      return getHTML?.() ?? "";
+    }
+    let el = document.getElementById(id);
+    if (!el)
+      return getHTML?.() ?? "";
+    return el.innerHTML;
+  });
+  return /* @__PURE__ */ import_react30.default.createElement("div", { ...rest, id, dangerouslySetInnerHTML: { __html: html } });
+}
+
 // src/components/index.ts
 var Components = {
   Background,
@@ -1945,7 +1964,8 @@ var Components = {
   Placeholder: placeholder_default,
   Spinner,
   Slider,
-  Tooltip
+  Tooltip,
+  NoHydrate
 };
 var SliderComponents = {
   Arrows,
@@ -1955,12 +1975,12 @@ var SliderComponents = {
 };
 
 // src/elements/instagram.tsx
-var Instagram = (0, import_react30.forwardRef)(
+var Instagram = (0, import_react31.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react30.useState)([]);
-    let [error, setError] = (0, import_react30.useState)(null);
-    (0, import_react30.useEffect)(() => {
+    let [media, setMedia] = (0, import_react31.useState)([]);
+    let [error, setError] = (0, import_react31.useState)(null);
+    (0, import_react31.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -1977,13 +1997,13 @@ var Instagram = (0, import_react30.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react30.default.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
+      return /* @__PURE__ */ import_react31.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react31.default.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
     let style = {
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react30.default.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
+    return /* @__PURE__ */ import_react31.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
       let {
         id,
         permalink,
@@ -1993,9 +2013,9 @@ var Instagram = (0, import_react30.forwardRef)(
         thumbnail_url
       } = item;
       if (media_type === "VIDEO") {
-        return /* @__PURE__ */ import_react30.default.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ import_react30.default.createElement("source", { src: media_url, type: "video/mp4" }));
+        return /* @__PURE__ */ import_react31.default.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ import_react31.default.createElement("source", { src: media_url, type: "video/mp4" }));
       }
-      return /* @__PURE__ */ import_react30.default.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ import_react30.default.createElement("img", { alt: caption, src: media_url }));
+      return /* @__PURE__ */ import_react31.default.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ import_react31.default.createElement("img", { alt: caption, src: media_url }));
     })));
   }
 );
@@ -2062,13 +2082,13 @@ Instagram.defaultProps = {
 var instagram_default = Instagram;
 
 // src/elements/slideshow/index.tsx
-var import_react33 = require("@stitches/react");
+var import_react34 = require("@stitches/react");
 var import_clsx6 = __toESM(require("clsx"));
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/elements/slideshow/use-slideshow-configs.ts
-var import_react31 = require("keen-slider/react");
-var import_react32 = __toESM(require("react"));
+var import_react32 = require("keen-slider/react");
+var import_react33 = __toESM(require("react"));
 
 // src/utils/css.ts
 var import_clsx5 = __toESM(require("clsx"));
@@ -2128,19 +2148,19 @@ function useSlideshowConfigs(props) {
     changeSlidesEvery,
     children
   } = props;
-  let { isDesignMode, isPreviewMode } = (0, import_react32.useContext)(WeaverseContext);
-  let [opacities, setOpacities] = import_react32.default.useState([]);
-  let [cssLoaded, setCssLoaded] = (0, import_react32.useState)(false);
-  let [created, setCreated] = (0, import_react32.useState)(false);
-  let [ready, setReady] = (0, import_react32.useState)(false);
-  let [currentSlide, setCurrentSlide] = (0, import_react32.useState)(0);
+  let { isDesignMode, isPreviewMode } = (0, import_react33.useContext)(WeaverseContext);
+  let [opacities, setOpacities] = import_react33.default.useState([]);
+  let [cssLoaded, setCssLoaded] = (0, import_react33.useState)(false);
+  let [created, setCreated] = (0, import_react33.useState)(false);
+  let [ready, setReady] = (0, import_react33.useState)(false);
+  let [currentSlide, setCurrentSlide] = (0, import_react33.useState)(0);
   let sliderPlugins = [ResizePlugin];
   if (autoRotate && (isPreviewMode || !isDesignMode)) {
     sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
   }
-  let [sliderRef, instanceRef] = (0, import_react31.useKeenSlider)(
+  let [sliderRef, instanceRef] = (0, import_react32.useKeenSlider)(
     {
-      slides: animation === "fade" ? import_react32.default.Children.count(children) : { perView: slidesPerView, number: import_react32.default.Children.count(children) },
+      slides: animation === "fade" ? import_react33.default.Children.count(children) : { perView: slidesPerView, number: import_react33.default.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -2170,13 +2190,13 @@ function useSlideshowConfigs(props) {
     },
     sliderPlugins
   );
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     loadCSS({
       rel: "stylesheet",
       href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
     }).then(() => setCssLoaded(true));
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (created && cssLoaded) {
       setReady(true);
     }
@@ -2192,7 +2212,7 @@ function useSlideshowConfigs(props) {
 }
 
 // src/elements/slideshow/index.tsx
-var Slideshow = (0, import_react34.forwardRef)((props, ref) => {
+var Slideshow = (0, import_react35.forwardRef)((props, ref) => {
   let {
     animation,
     showArrows,
@@ -2211,7 +2231,7 @@ var Slideshow = (0, import_react34.forwardRef)((props, ref) => {
   };
   let faderClass = "";
   if (animation === "fade") {
-    faderClass = (0, import_react33.css)({
+    faderClass = (0, import_react34.css)({
       ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
         acc[`&:nth-child(${index + 1})`] = {
           opacity
@@ -2229,7 +2249,7 @@ var Slideshow = (0, import_react34.forwardRef)((props, ref) => {
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  return /* @__PURE__ */ import_react34.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react34.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react35.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(
     Arrows,
     {
       instanceRef,
@@ -2238,7 +2258,7 @@ var Slideshow = (0, import_react34.forwardRef)((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react34.default.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(
     Dots,
     {
       instanceRef,
@@ -2319,7 +2339,7 @@ Slideshow.defaultProps = {
 var slideshow_default = Slideshow;
 
 // src/elements/slideshow/slide.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -2362,7 +2382,7 @@ var slidePositionMap = {
 };
 
 // src/elements/slideshow/slide.tsx
-var Slide = (0, import_react35.forwardRef)((props, ref) => {
+var Slide = (0, import_react36.forwardRef)((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -2374,7 +2394,7 @@ var Slide = (0, import_react35.forwardRef)((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react36.default.createElement(
     Background,
     {
       backgroundColor,
@@ -2383,14 +2403,14 @@ var Slide = (0, import_react35.forwardRef)((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react36.default.createElement(
     Overlay,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__PURE__ */ import_react35.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react35.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
+  ), /* @__PURE__ */ import_react36.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react36.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
 });
 var css12 = {
   "@desktop": {
@@ -2520,18 +2540,18 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react36.createContext)({});
+var WeaverseContext = (0, import_react37.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core3 = require("@weaverse/core");
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react37.useState)(context.data);
-  let rootRef = (0, import_react37.useRef)();
+  let [, setData] = (0, import_react38.useState)(context.data);
+  let rootRef = (0, import_react38.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     initUploadCareAdaptiveDelivery(context.weaverseHost);
@@ -2542,24 +2562,25 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.data?.rootId) {
-    return /* @__PURE__ */ import_react37.default.createElement(
+    return /* @__PURE__ */ import_react38.default.createElement(
       "div",
       {
         className: `weaverse-content-root ${themeClass}`,
         ...eventHandlers,
+        suppressHydrationWarning: true,
         ref: rootRef
       },
-      /* @__PURE__ */ import_react37.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react37.default.createElement(ItemInstance, { id: context.data.rootId })),
-      context.platformType === "react-ssr" ? /* @__PURE__ */ import_react37.default.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
+      /* @__PURE__ */ import_react38.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { id: context.data.rootId })),
+      context.platformType === "react-ssr" ? /* @__PURE__ */ import_react38.default.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
     );
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react37.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react37.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react38.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react38.useState)(instance.data);
   let { id, type, childIds = [], css: css13, className, ...rest } = data;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core3.isBrowser && !instance.ref.current) {
@@ -2575,7 +2596,7 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react37.default.createElement(
+    return /* @__PURE__ */ import_react38.default.createElement(
       Component,
       {
         key: id,
@@ -2584,7 +2605,7 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ import_react37.default.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((id2) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: id2, id: id2 }))
     );
   } else {
     console.log(`Unknown element: ${type}`);
@@ -2593,7 +2614,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     "style",
     {
       id: "stitches",
@@ -2604,13 +2625,13 @@ var StitchesSSR = ({ stitchesInstance }) => {
   );
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react37.useContext)(WeaverseContext);
+  let context = (0, import_react38.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react37.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
+    return /* @__PURE__ */ import_react38.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react37.default.createElement(ItemComponent, { key: id, instance });
+  return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, { key: id, instance });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -658,7 +658,7 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React25, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState3 } from "react";
+import React26, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/components/modal/index.tsx
 var modal_exports = {};
@@ -1900,6 +1900,25 @@ var Placeholder = forwardRef9(
 );
 var placeholder_default = Placeholder;
 
+// src/components/no-hydrate.tsx
+import React25, { useId, useState as useState3 } from "react";
+function NoHydrate({
+  getHTML,
+  ...rest
+}) {
+  let id = useId();
+  let [html] = useState3(() => {
+    if (typeof document === "undefined") {
+      return getHTML?.() ?? "";
+    }
+    let el = document.getElementById(id);
+    if (!el)
+      return getHTML?.() ?? "";
+    return el.innerHTML;
+  });
+  return /* @__PURE__ */ React25.createElement("div", { ...rest, id, dangerouslySetInnerHTML: { __html: html } });
+}
+
 // src/components/index.ts
 var Components = {
   Background,
@@ -1909,7 +1928,8 @@ var Components = {
   Placeholder: placeholder_default,
   Spinner,
   Slider,
-  Tooltip
+  Tooltip,
+  NoHydrate
 };
 var SliderComponents = {
   Arrows,
@@ -1922,8 +1942,8 @@ var SliderComponents = {
 var Instagram = forwardRef10(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = useState3([]);
-    let [error, setError] = useState3(null);
+    let [media, setMedia] = useState4([]);
+    let [error, setError] = useState4(null);
     useEffect3(() => {
       if (token) {
         let params = new URLSearchParams({
@@ -1941,13 +1961,13 @@ var Instagram = forwardRef10(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ React25.createElement("div", { ref, ...rest }, /* @__PURE__ */ React25.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
+      return /* @__PURE__ */ React26.createElement("div", { ref, ...rest }, /* @__PURE__ */ React26.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
     let style = {
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ React25.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React25.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
+    return /* @__PURE__ */ React26.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React26.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
       let {
         id,
         permalink,
@@ -1957,9 +1977,9 @@ var Instagram = forwardRef10(
         thumbnail_url
       } = item;
       if (media_type === "VIDEO") {
-        return /* @__PURE__ */ React25.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ React25.createElement("source", { src: media_url, type: "video/mp4" }));
+        return /* @__PURE__ */ React26.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ React26.createElement("source", { src: media_url, type: "video/mp4" }));
       }
-      return /* @__PURE__ */ React25.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React25.createElement("img", { alt: caption, src: media_url }));
+      return /* @__PURE__ */ React26.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React26.createElement("img", { alt: caption, src: media_url }));
     })));
   }
 );
@@ -2028,11 +2048,11 @@ var instagram_default = Instagram;
 // src/elements/slideshow/index.tsx
 import { css as stitchesCss } from "@stitches/react";
 import clsx6 from "clsx";
-import React27, { forwardRef as forwardRef11 } from "react";
+import React28, { forwardRef as forwardRef11 } from "react";
 
 // src/elements/slideshow/use-slideshow-configs.ts
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
-import React26, { useContext as useContext5, useEffect as useEffect4, useState as useState4 } from "react";
+import React27, { useContext as useContext5, useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/utils/css.ts
 import clsx5 from "clsx";
@@ -2093,18 +2113,18 @@ function useSlideshowConfigs(props) {
     children
   } = props;
   let { isDesignMode, isPreviewMode } = useContext5(WeaverseContext);
-  let [opacities, setOpacities] = React26.useState([]);
-  let [cssLoaded, setCssLoaded] = useState4(false);
-  let [created, setCreated] = useState4(false);
-  let [ready, setReady] = useState4(false);
-  let [currentSlide, setCurrentSlide] = useState4(0);
+  let [opacities, setOpacities] = React27.useState([]);
+  let [cssLoaded, setCssLoaded] = useState5(false);
+  let [created, setCreated] = useState5(false);
+  let [ready, setReady] = useState5(false);
+  let [currentSlide, setCurrentSlide] = useState5(0);
   let sliderPlugins = [ResizePlugin];
   if (autoRotate && (isPreviewMode || !isDesignMode)) {
     sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
   }
   let [sliderRef, instanceRef] = useKeenSlider2(
     {
-      slides: animation === "fade" ? React26.Children.count(children) : { perView: slidesPerView, number: React26.Children.count(children) },
+      slides: animation === "fade" ? React27.Children.count(children) : { perView: slidesPerView, number: React27.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -2193,7 +2213,7 @@ var Slideshow = forwardRef11((props, ref) => {
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  return /* @__PURE__ */ React27.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React27.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React28.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React28.createElement(
     Arrows,
     {
       instanceRef,
@@ -2202,7 +2222,7 @@ var Slideshow = forwardRef11((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React27.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React28.createElement(
     Dots,
     {
       instanceRef,
@@ -2283,7 +2303,7 @@ Slideshow.defaultProps = {
 var slideshow_default = Slideshow;
 
 // src/elements/slideshow/slide.tsx
-import React28, { forwardRef as forwardRef12 } from "react";
+import React29, { forwardRef as forwardRef12 } from "react";
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -2338,7 +2358,7 @@ var Slide = forwardRef12((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ React28.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React29.createElement(
     Background,
     {
       backgroundColor,
@@ -2347,14 +2367,14 @@ var Slide = forwardRef12((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ React28.createElement(
+  ), /* @__PURE__ */ React29.createElement(
     Overlay,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__PURE__ */ React28.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ React28.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
+  ), /* @__PURE__ */ React29.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ React29.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
 });
 var css12 = {
   "@desktop": {
@@ -2490,9 +2510,9 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser as isBrowser2 } from "@weaverse/core";
-import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState5 } from "react";
+import React30, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState6 } from "react";
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = useState5(context.data);
+  let [, setData] = useState6(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
   useEffect5(() => {
@@ -2506,22 +2526,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.data?.rootId) {
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       "div",
       {
         className: `weaverse-content-root ${themeClass}`,
         ...eventHandlers,
+        suppressHydrationWarning: true,
         ref: rootRef
       },
-      /* @__PURE__ */ React29.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ React29.createElement(ItemInstance, { id: context.data.rootId })),
-      context.platformType === "react-ssr" ? /* @__PURE__ */ React29.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
+      /* @__PURE__ */ React30.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ React30.createElement(ItemInstance, { id: context.data.rootId })),
+      context.platformType === "react-ssr" ? /* @__PURE__ */ React30.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
     );
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
-  let [data, setData] = useState5(instance.data);
+  let [data, setData] = useState6(instance.data);
   let { id, type, childIds = [], css: css13, className, ...rest } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
@@ -2539,7 +2560,7 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       Component,
       {
         key: id,
@@ -2548,7 +2569,7 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ React29.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((id2) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: id2, id: id2 }))
     );
   } else {
     console.log(`Unknown element: ${type}`);
@@ -2557,7 +2578,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "style",
     {
       id: "stitches",
@@ -2572,9 +2593,9 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React29.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
+    return /* @__PURE__ */ React30.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React29.createElement(ItemComponent, { key: id, instance });
+  return /* @__PURE__ */ React30.createElement(ItemComponent, { key: id, instance });
 };
 export {
   Components,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.10",
+  "version": "1.0.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "1.0.10",
+    "@weaverse/core": "1.0.11",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }