@weaverse/react 1.0.10 → 1.0.12

package/dist/index.js

@@ -44,8 +44,8 @@ module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
-var import_core2 = require("@weaverse/core");
-var import_react36 = require("react");
+var import_core = require("@weaverse/core");
+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 = {};
@@ -1664,7 +1664,7 @@ function Tooltip({ children }) {
 
 // src/components/slider/index.tsx
 var import_clsx3 = __toESM(require("clsx"));
-var import_react25 = require("keen-slider/react");
+var import_react25 = require("keen-slider/react.es");
 var import_react26 = __toESM(require("react"));
 
 // src/components/slider/arrows.tsx
@@ -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": {
@@ -2482,12 +2502,28 @@ var Elements = {
   }
 };
 
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new import_core.Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+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_react38 = __toESM(require("react"));
+
 // src/utils/uploadcare.ts
-var import_core = require("@weaverse/core");
+var import_core2 = require("@weaverse/core");
 function initUploadCareAdaptiveDelivery(baseUrl) {
   try {
     Promise.resolve().then(() => {
-      if (import_core.isBrowser && !window.Blinkloader) {
+      if (import_core2.isBrowser && !window.Blinkloader) {
         ;
         (function(src, cb) {
           let s = document.createElement("script");
@@ -2512,26 +2548,12 @@ function initUploadCareAdaptiveDelivery(baseUrl) {
   }
 }
 
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new import_core2.Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = (0, import_react36.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 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 +2564,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 +2598,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 +2607,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 +2616,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 +2627,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 = {};
@@ -1628,7 +1628,7 @@ function Tooltip({ children }) {
 
 // src/components/slider/index.tsx
 import clsx3 from "clsx";
-import { useKeenSlider } from "keen-slider/react";
+import { useKeenSlider } from "keen-slider/react.es";
 import React22, { useState as useState2 } from "react";
 
 // src/components/slider/arrows.tsx
@@ -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": {
@@ -2446,6 +2466,22 @@ var Elements = {
   }
 };
 
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+import { isBrowser as isBrowser2 } from "@weaverse/core";
+import React30, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState6 } from "react";
+
 // src/utils/uploadcare.ts
 import { isBrowser } from "@weaverse/core";
 function initUploadCareAdaptiveDelivery(baseUrl) {
@@ -2476,23 +2512,9 @@ function initUploadCareAdaptiveDelivery(baseUrl) {
   }
 }
 
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-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";
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = useState5(context.data);
+  let [, setData] = useState6(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
   useEffect5(() => {
@@ -2506,22 +2528,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 +2562,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 +2571,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 +2580,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "style",
     {
       id: "stitches",
@@ -2572,9 +2595,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.12",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,9 +32,9 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.0.3",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "1.0.10",
+    "@weaverse/core": "1.0.12",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }

package/dist/index.d.ts

@@ -1,333 +0,0 @@
-import { WeaverseType, Weaverse, WeaverseElement, ElementCSS, WeaverseItemStore } from '@weaverse/core';
-export * from '@weaverse/core';
-import * as React$1 from 'react';
-import React__default, { HTMLAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
-import * as keen_slider_react from 'keen-slider/react';
-import { KeenSliderPlugin } from 'keen-slider/react';
-import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
-import { DialogContentProps, DialogProps, DialogTitleProps, DialogCloseProps } from '@radix-ui/react-dialog';
-import { KeenSliderInstance } from 'keen-slider';
-
-declare let createRootContext: (configs: WeaverseType) => Weaverse;
-declare let WeaverseContext: React$1.Context<Weaverse>;
-declare let WeaverseContextProvider: React$1.Provider<Weaverse>;
-declare let WeaverseContextConsumer: React$1.Consumer<Weaverse>;
-
-declare let Circle: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let CircleNotch: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let X: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Minus: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Plus: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let CaretLeft: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let CaretRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let ArrowLeft: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let ArrowRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Image: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let ShoppingCart: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Storefront: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Package: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let HandBag: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Tag: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Backpack: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Newspaper: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-declare let Eye: (props: HTMLAttributes<SVGElement>) => JSX.Element;
-
-declare const PhosphorIcons_Circle: typeof Circle;
-declare const PhosphorIcons_CircleNotch: typeof CircleNotch;
-declare const PhosphorIcons_X: typeof X;
-declare const PhosphorIcons_Minus: typeof Minus;
-declare const PhosphorIcons_Plus: typeof Plus;
-declare const PhosphorIcons_CaretLeft: typeof CaretLeft;
-declare const PhosphorIcons_CaretRight: typeof CaretRight;
-declare const PhosphorIcons_ArrowLeft: typeof ArrowLeft;
-declare const PhosphorIcons_ArrowRight: typeof ArrowRight;
-declare const PhosphorIcons_Image: typeof Image;
-declare const PhosphorIcons_ShoppingCart: typeof ShoppingCart;
-declare const PhosphorIcons_Storefront: typeof Storefront;
-declare const PhosphorIcons_Package: typeof Package;
-declare const PhosphorIcons_HandBag: typeof HandBag;
-declare const PhosphorIcons_Tag: typeof Tag;
-declare const PhosphorIcons_Backpack: typeof Backpack;
-declare const PhosphorIcons_Newspaper: typeof Newspaper;
-declare const PhosphorIcons_Eye: typeof Eye;
-declare namespace PhosphorIcons {
-  export {
-    PhosphorIcons_Circle as Circle,
-    PhosphorIcons_CircleNotch as CircleNotch,
-    PhosphorIcons_X as X,
-    PhosphorIcons_Minus as Minus,
-    PhosphorIcons_Plus as Plus,
-    PhosphorIcons_CaretLeft as CaretLeft,
-    PhosphorIcons_CaretRight as CaretRight,
-    PhosphorIcons_ArrowLeft as ArrowLeft,
-    PhosphorIcons_ArrowRight as ArrowRight,
-    PhosphorIcons_Image as Image,
-    PhosphorIcons_ShoppingCart as ShoppingCart,
-    PhosphorIcons_Storefront as Storefront,
-    PhosphorIcons_Package as Package,
-    PhosphorIcons_HandBag as HandBag,
-    PhosphorIcons_Tag as Tag,
-    PhosphorIcons_Backpack as Backpack,
-    PhosphorIcons_Newspaper as Newspaper,
-    PhosphorIcons_Eye as Eye,
-  };
-}
-
-interface ModalContentProps extends DialogContentProps {
-    size?: 'auto' | 'fullscreen';
-    portal?: boolean;
-}
-type WeaverseIcon = keyof typeof PhosphorIcons;
-interface WeaverseIconProps extends HTMLAttributes<SVGElement> {
-    name: WeaverseIcon;
-}
-interface TooltipProps {
-    children: React.ReactNode;
-}
-interface SliderProps {
-    children: React.ReactNode;
-    className?: string;
-    gap?: number;
-    arrowOffset: number;
-    slidesPerView: number;
-}
-interface SliderArrowsProps {
-    currentSlide: number;
-    instanceRef: React.MutableRefObject<KeenSliderInstance | null>;
-    offset: number;
-    icon: 'caret' | 'arrow';
-    className?: string;
-}
-interface SliderDotsProps {
-    currentSlide: number;
-    instanceRef: React.MutableRefObject<KeenSliderInstance | null>;
-    className?: string;
-    absolute?: boolean;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    color: 'light' | 'dark';
-}
-interface OverlayProps {
-    enableOverlay: boolean;
-    overlayOpacity: number;
-    className?: string;
-}
-interface BackgroundProps {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    backgroundFit?: CSSProperties['objectFit'];
-    backgroundPosition?: CSSProperties['objectPosition'];
-    className?: string;
-}
-
-declare let Modal: (props: DialogProps) => JSX.Element;
-declare let ModalTrigger: React__default.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
-declare let ModalHeader: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
-declare let ModalContent: React__default.ForwardRefExoticComponent<ModalContentProps & React__default.RefAttributes<HTMLDivElement>>;
-declare let ModalClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const ModalComponents_Modal: typeof Modal;
-declare const ModalComponents_ModalTrigger: typeof ModalTrigger;
-declare const ModalComponents_ModalHeader: typeof ModalHeader;
-declare const ModalComponents_ModalContent: typeof ModalContent;
-declare const ModalComponents_ModalClose: typeof ModalClose;
-declare namespace ModalComponents {
-  export {
-    ModalComponents_Modal as Modal,
-    ModalComponents_ModalTrigger as ModalTrigger,
-    ModalComponents_ModalHeader as ModalHeader,
-    ModalComponents_ModalContent as ModalContent,
-    ModalComponents_ModalClose as ModalClose,
-  };
-}
-
-declare function Spinner(): JSX.Element;
-
-declare function Icon({ name, className, ...props }: WeaverseIconProps): JSX.Element;
-
-declare function Tooltip({ children }: TooltipProps): JSX.Element;
-
-declare function Slider(props: SliderProps): JSX.Element;
-
-declare function Background(props: BackgroundProps): JSX.Element | null;
-
-declare function Overlay(props: OverlayProps): JSX.Element | null;
-
-declare function Arrows(props: SliderArrowsProps): JSX.Element;
-
-declare function Dots(props: SliderDotsProps): JSX.Element;
-
-declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
-
-declare let Components: {
-    Background: typeof Background;
-    Icon: typeof Icon;
-    ModalComponents: typeof ModalComponents;
-    Overlay: typeof Overlay;
-    Placeholder: React$1.ForwardRefExoticComponent<PlaceholderProps & React$1.RefAttributes<HTMLDivElement>>;
-    Spinner: typeof Spinner;
-    Slider: typeof Slider;
-    Tooltip: typeof Tooltip;
-};
-declare let SliderComponents: {
-    Arrows: typeof Arrows;
-    Dots: typeof Dots;
-    ResizePlugin: keen_slider_react.KeenSliderPlugin<{}, {}, keen_slider_react.KeenSliderHooks>;
-    AutoplayPlugin: typeof AutoplayPlugin;
-};
-
-declare const Elements: Record<string, WeaverseElement>;
-
-interface WeaverseElementProps extends Partial<ReactElement> {
-    css?: ElementCSS;
-    children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
-    className?: string;
-    ['data-wv-id']?: string;
-}
-type WeaverseRootPropsType = {
-    context: Weaverse;
-};
-type ItemComponentProps = {
-    instance: InstanceType<typeof WeaverseItemStore>;
-};
-interface PlaceholderProps {
-    element: string;
-    children: ReactElement | ReactElement[] | ReactNode | ReactNode[];
-    style?: CSSProperties;
-    className?: string;
-}
-interface ButtonElementProps extends WeaverseElementProps {
-    type: 'button' | 'submit' | 'reset';
-    text: string;
-    clickAction: 'none' | 'openLink';
-    linkTo: string;
-    openInNewTab: boolean;
-}
-interface ContainerElementProps extends WeaverseElementProps {
-    [key: string]: any;
-}
-interface ImageElementProps extends WeaverseElementProps {
-    src: string;
-    alt: string;
-    objectFit: CSSProperties['objectFit'];
-    objectPosition: CSSProperties['objectPosition'];
-    clickAction: 'none' | 'openLightbox' | 'openLink';
-    linkTo?: string;
-    openLinkInNewTab?: boolean;
-}
-interface GridContentElementProps extends WeaverseElementProps {
-    rows: number;
-    columns: number;
-    gap: number;
-    rowSize: number;
-}
-interface BackgroundDataProps {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    objectFit?: CSSProperties['objectFit'];
-    objectPosition?: CSSProperties['objectPosition'];
-}
-interface LayoutElementProps extends BackgroundDataProps, WeaverseElementProps {
-    contentSize: number;
-    gridSize: number;
-    rows: number;
-    columns: number;
-    gap: number;
-    rowSize: number;
-    enableOverlay: boolean;
-    overlayOpacity: number;
-}
-interface LayoutBackgroundProps {
-    imgUrl?: string;
-    bgColor?: string;
-    objectFit?: CSSProperties['objectFit'];
-    objectPosition?: CSSProperties['objectPosition'];
-}
-interface MapElementProps extends WeaverseElementProps {
-    place: string;
-    zoom: number;
-}
-interface TextElementProps extends WeaverseElementProps {
-    value: string;
-}
-interface ScrollingTextElementProps extends WeaverseElementProps {
-    value: string;
-    gap: number;
-    speed: number;
-    pauseOnHover: boolean;
-}
-interface VideoCommonProps {
-    src: string;
-    type?: string;
-    poster: string;
-    loop: boolean;
-    controls: boolean;
-    autoPlay: boolean;
-    muted: boolean;
-}
-type VideoElementProps = VideoCommonProps & WeaverseElementProps;
-interface YoutubeElementProps extends VideoCommonProps {
-    youtubeId: string;
-}
-interface VimeoElementProps extends VideoCommonProps {
-    vimeoId: string;
-}
-type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
-type CountdownTimerType = 'fixed-time' | 'evergreen';
-interface CountdownElementProps extends WeaverseElementProps {
-    timerType: CountdownTimerType;
-    startTime: number;
-    endTime: number;
-    periods: number;
-    redirectWhenTimerStops: boolean;
-    redirectUrl: string;
-    openInNewTab: boolean;
-    showLabel: boolean;
-    showColon: boolean;
-}
-type TimerBlockProps = {
-    label: string;
-    value: string | number;
-};
-interface InstagramElementProps extends WeaverseElementProps {
-    token: string;
-    username: string;
-    numberOfImages: number;
-    imagesPerRow: number;
-    gap: number;
-}
-type InstagramMedia = {
-    id: string;
-    media_type: 'IMAGE' | 'CAROUSEL_ALBUM' | 'VIDEO';
-    media_url: string;
-    permalink: string;
-    caption: string;
-    thumbnail_url: string;
-};
-interface SlideshowProps extends WeaverseElementProps {
-    animation: 'slide' | 'fade';
-    slidesPerView: number;
-    spacing: number;
-    showArrows: boolean;
-    showArrowsOnHover: boolean;
-    arrowIcon: 'caret' | 'arrow';
-    arrowsColor: 'light' | 'dark';
-    showDots: boolean;
-    dotsPosition: 'top' | 'bottom' | 'left' | 'right';
-    dotsColor: 'light' | 'dark';
-    loop: boolean;
-    autoRotate: boolean;
-    changeSlidesEvery: number;
-}
-interface SlideProps extends WeaverseElementProps, BackgroundProps, OverlayProps {
-    contentPosition: string;
-    children: ReactElement[];
-}
-declare global {
-    interface Window {
-        weaverseSlideshowInstances: Record<string, KeenSliderInstance>;
-    }
-}
-
-declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
-
-export { BackgroundProps, ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, OverlayProps, PlaceholderProps, ScrollingTextElementProps, SlideProps, SliderArrowsProps, SliderComponents, SliderDotsProps, SliderProps, SlideshowProps, TextElementProps, TimerBlockProps, TooltipProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseIcon, WeaverseIconProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };