@weaverse/react 0.7.64 → 0.7.66

package/dist/index.mjs

@@ -11,7 +11,7 @@ export * from "@weaverse/core";
 import { Weaverse } from "@weaverse/core";
 import { createContext } from "react";
 
-// src/elements/Button.tsx
+// src/elements/button.tsx
 import * as React from "react";
 import { useContext } from "react";
 var Button = React.forwardRef((props, ref) => {
@@ -56,9 +56,9 @@ var css = {
     }
   }
 };
-var Button_default = Button;
+var button_default = Button;
 
-// src/elements/Container.tsx
+// src/elements/container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2(
   (props, ref) => {
@@ -79,9 +79,9 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var Container_default = Container;
+var container_default = Container;
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
 
 // src/constant/index.ts
@@ -114,7 +114,7 @@ function getVimeoId(url) {
   return match ? match[1] : null;
 }
 
-// src/elements/Countdown/TimerBlock.tsx
+// src/elements/countdown/timer-block.tsx
 import React3 from "react";
 function TimerBlock({ value, label }) {
   return /* @__PURE__ */ React3.createElement("div", {
@@ -126,7 +126,7 @@ function TimerBlock({ value, label }) {
   }, label));
 }
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var Countdown = forwardRef3(
   (props, ref) => {
     const { isDesignMode } = useContext2(WeaverseContext);
@@ -239,9 +239,9 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var Countdown_default = Countdown;
+var countdown_default = Countdown;
 
-// src/elements/Image.tsx
+// src/elements/image.tsx
 import React5 from "react";
 var Image = React5.forwardRef(
   (props, ref) => {
@@ -264,16 +264,19 @@ var Image = React5.forwardRef(
       "data-blink-src": src
     });
     if (clickAction === "openLink" && linkTo) {
-      let target = openLinkInNewTab ? "_blank" : "_self";
       content = /* @__PURE__ */ React5.createElement("a", {
         href: linkTo,
-        target
-      }, content);
+        target: openLinkInNewTab ? "_blank" : "_self",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ React5.createElement("img", {
+        alt,
+        "data-blink-src": src
+      }));
     }
     return /* @__PURE__ */ React5.createElement("div", {
       ref,
-      ...rest,
-      style
+      style,
+      ...rest
     }, content);
   }
 );
@@ -281,6 +284,8 @@ var css4 = {
   "@desktop": {
     display: "flex",
     overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
     img: {
       width: "100%",
       height: "100%",
@@ -290,20 +295,20 @@ var css4 = {
   }
 };
 Image.defaultProps = {
-  src: "https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",
-  alt: "Image alt text",
+  src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
+  alt: "Alternative information",
   objectFit: "cover",
   objectPosition: "center center",
   clickAction: "none",
   openLinkInNewTab: false,
   linkTo: ""
 };
-var Image_default = Image;
+var image_default = Image;
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 import React8, { forwardRef as forwardRef4 } from "react";
 
-// src/elements/Layout/Background.tsx
+// src/elements/layout/Background.tsx
 import React6 from "react";
 function Background(props) {
   let { bgColor, imgUrl, objectFit, objectPosition } = props;
@@ -326,7 +331,7 @@ function Background(props) {
   return null;
 }
 
-// src/elements/Layout/Overlay.tsx
+// src/elements/layout/Overlay.tsx
 import React7 from "react";
 function Overlay(props) {
   let { enableOverlay, overlayOpacity } = props;
@@ -342,7 +347,7 @@ function Overlay(props) {
   return null;
 }
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var Layout = forwardRef4((props, ref) => {
   let {
     children,
@@ -437,9 +442,9 @@ Layout.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Layout_default = Layout;
+var layout_default = Layout;
 
-// src/elements/Map.tsx
+// src/elements/map.tsx
 import React9, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
   let { place, zoom, ...rest } = props;
@@ -471,9 +476,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var Map_default = Map;
+var map_default = Map;
 
-// src/elements/Text.tsx
+// src/elements/text.tsx
 import * as React10 from "react";
 var Text = React10.forwardRef(
   (props, ref) => {
@@ -502,12 +507,12 @@ var css7 = {
 Text.defaultProps = {
   value: "<p>The quick brown fox jumps over the lazy dog</p>"
 };
-var Text_default = Text;
+var text_default = Text;
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 import React14, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 
-// src/elements/Video/HTMLVideo.tsx
+// src/elements/video/html-video.tsx
 import React11 from "react";
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
@@ -527,7 +532,7 @@ function HTMLVideo(props) {
   }), "Your browser does not support the video tag.");
 }
 
-// src/elements/Video/Vimeo.tsx
+// src/elements/video/vimeo.tsx
 import React12 from "react";
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
@@ -541,7 +546,7 @@ function Vimeo(props) {
   });
 }
 
-// src/elements/Video/Youtube.tsx
+// src/elements/video/youtube.tsx
 import React13 from "react";
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
@@ -557,12 +562,11 @@ function Youtube(props) {
     src: youtubeSrc,
     width: "100%",
     height: "100%",
-    allowFullScreen: true,
     allow
   });
 }
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var Video = forwardRef7((props, ref) => {
   let { isDesignMode } = useContext3(WeaverseContext);
   let {
@@ -624,32 +628,35 @@ Video.defaultProps = {
   autoPlay: true,
   muted: true
 };
-var Video_default = Video;
+var video_default = Video;
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 import { css as stitchesCss } from "@stitches/react";
 import clsx5 from "clsx";
 import React20, { forwardRef as forwardRef8 } from "react";
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 import { styled } from "@stitches/react";
 import clsx2 from "clsx";
 import React17 from "react";
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 import React16 from "react";
 
-// src/components/Icons/Phosphor.tsx
-var Phosphor_exports = {};
-__export(Phosphor_exports, {
+// src/components/icons/phosphor.tsx
+var phosphor_exports = {};
+__export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
+  Backpack: () => Backpack,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
   Minus: () => Minus,
+  Package: () => Package,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
+  Storefront: () => Storefront,
   X: () => X
 });
 import React15 from "react";
@@ -851,6 +858,165 @@ var ShoppingCart = (props) => {
     strokeWidth: "16"
   }));
 };
+var Storefront = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M160,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M224,96v16a32,32,0,0,1-64,0V96",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Package = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M224,177.3V78.7a8.1,8.1,0,0,0-4.1-7l-88-49.5a7.8,7.8,0,0,0-7.8,0l-88,49.5a8.1,8.1,0,0,0-4.1,7v98.6a8.1,8.1,0,0,0,4.1,7l88,49.5a7.8,7.8,0,0,0,7.8,0l88-49.5A8.1,8.1,0,0,0,224,177.3Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("polyline", {
+    points: "177 152.5 177 100.5 80 47",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("polyline", {
+    points: "222.9 74.6 128.9 128 33.1 74.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "128.9",
+    y1: "128",
+    x2: "128",
+    y2: "234.8",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }));
+};
+var Backpack = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,48h64a48,48,0,0,1,48,48V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V96A48,48,0,0,1,96,48Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "112",
+    y1: "88",
+    x2: "144",
+    y2: "88",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "80",
+    y1: "168",
+    x2: "176",
+    y2: "168",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "144",
+    y1: "168",
+    x2: "144",
+    y2: "184",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
 var Eye = (props) => {
   return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -882,10 +1048,10 @@ var Eye = (props) => {
   }));
 };
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 import clsx from "clsx";
 function Icon({ name, className, ...props }) {
-  let WeaverseIcon = Phosphor_exports[name];
+  let WeaverseIcon = phosphor_exports[name];
   let cls = clsx("wv-icon", className);
   return /* @__PURE__ */ React16.createElement(WeaverseIcon, {
     className: cls,
@@ -893,7 +1059,7 @@ function Icon({ name, className, ...props }) {
   });
 }
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 function Arrows(props) {
   let { currentSlide, instanceRef, className, offset } = props;
   let isFirst = currentSlide === 0;
@@ -968,7 +1134,7 @@ var StyledArrows = styled("div", {
   }
 });
 
-// src/components/Slider/Dots.tsx
+// src/components/slider/dots.tsx
 import { styled as styled2 } from "@stitches/react";
 import clsx3 from "clsx";
 import React18 from "react";
@@ -1039,11 +1205,11 @@ var StyledDots = styled2("div", {
   }
 });
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 import { useKeenSlider } from "keen-slider/react";
 import React19, { useContext as useContext4, useEffect as useEffect2, useState } from "react";
 
-// src/components/Slider/AutoplayPlugin.ts
+// src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
     let timeout;
@@ -1076,7 +1242,7 @@ function AutoplayPlugin(changeSlidesEvery) {
   };
 }
 
-// src/components/Slider/ResizePlugin.ts
+// src/components/slider/resize-plugin.ts
 var ResizePlugin = (slider) => {
   let observer = new ResizeObserver(() => slider.update());
   slider.on("created", () => {
@@ -1135,7 +1301,7 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 function useSlideshowConfigs(props) {
   let {
     animation,
@@ -1208,7 +1374,7 @@ function useSlideshowConfigs(props) {
   };
 }
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var Slideshow = forwardRef8((props, ref) => {
   let {
     animation,
@@ -1289,12 +1455,12 @@ Slideshow.defaultProps = {
   autoRotate: false,
   changeSlidesEvery: 5
 };
-var Slideshow_default = Slideshow;
+var slideshow_default = Slideshow;
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 import React24, { forwardRef as forwardRef10 } from "react";
 
-// src/components/Background.tsx
+// src/components/background.tsx
 import { styled as styled3 } from "@stitches/react";
 import React21 from "react";
 function Background2(props) {
@@ -1334,7 +1500,7 @@ var StyledBackground = styled3("div", {
   }
 });
 
-// src/components/Overlay.tsx
+// src/components/overlay.tsx
 import { styled as styled4 } from "@stitches/react";
 import React22 from "react";
 function Overlay2(props) {
@@ -1354,7 +1520,7 @@ var StyledOverlay = styled4("div", {
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
-// src/components/Placeholder.tsx
+// src/components/placeholder.tsx
 import React23, { forwardRef as forwardRef9 } from "react";
 var Placeholder = forwardRef9(
   (props, ref) => {
@@ -1369,9 +1535,9 @@ var Placeholder = forwardRef9(
     }, element), /* @__PURE__ */ React23.createElement("div", null, children));
   }
 );
-var Placeholder_default = Placeholder;
+var placeholder_default = Placeholder;
 
-// src/elements/Slideshow/position.ts
+// src/elements/slideshow/position.ts
 var slidePositionMap = {
   "top left": {
     justifyContent: "flex-start",
@@ -1411,7 +1577,7 @@ var slidePositionMap = {
   }
 };
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var Slide = forwardRef10((props, ref) => {
   let {
     contentPosition,
@@ -1440,7 +1606,7 @@ var Slide = forwardRef10((props, ref) => {
     ref,
     style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : /* @__PURE__ */ React24.createElement(Placeholder_default, {
+  }, children?.length ? children : /* @__PURE__ */ React24.createElement(placeholder_default, {
     element: "Slide",
     className: "wv-slide-placeholder"
   }, "Drag and drop elements here")));
@@ -1468,57 +1634,57 @@ Slide.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Slide_default = Slide;
+var slide_default = Slide;
 
 // src/elements/index.ts
 var Elements = {
   Countdown: {
-    Component: Countdown_default,
+    Component: countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: Button_default,
+    Component: button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: Container_default,
+    Component: container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: Image_default,
+    Component: image_default,
     type: "image",
     defaultCss: css4
   },
   Layout: {
-    Component: Layout_default,
+    Component: layout_default,
     type: "layout",
     defaultCss: css5
   },
   Map: {
-    Component: Map_default,
+    Component: map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: Text_default,
+    Component: text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: Video_default,
+    Component: video_default,
     type: "video",
     defaultCss: css8
   },
   Slideshow: {
-    Component: Slideshow_default,
+    Component: slideshow_default,
     type: "slideshow",
     defaultCss: css9
   },
   Slide: {
-    Component: Slide_default,
+    Component: slide_default,
     type: "slide",
     defaultCss: css10
   }
@@ -1536,9 +1702,9 @@ var WeaverseContext = createContext({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
   Modal: () => Modal,
   ModalClose: () => ModalClose,
   ModalContent: () => ModalContent,
@@ -1548,7 +1714,7 @@ __export(Modal_exports, {
 import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
 import React25, { forwardRef as forwardRef11 } from "react";
 
-// src/components/Modal/styled.ts
+// src/components/modal/styled.ts
 import { Content, Overlay as Overlay3, Title } from "@radix-ui/react-dialog";
 import { keyframes, styled as styled5 } from "@stitches/react";
 var overlayShow = keyframes({
@@ -1631,7 +1797,7 @@ var StyledCloseIcon = styled5("button", {
   }
 });
 
-// src/components/Modal/useOpenChangeEffect.ts
+// src/components/modal/use-open-change-effect.ts
 import { useContext as useContext5, useEffect as useEffect3 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
@@ -1657,7 +1823,7 @@ function useOpenChangeEffect(props) {
   return handleOpenChange;
 }
 
-// src/components/Modal/index.tsx
+// src/components/modal/index.tsx
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
@@ -1715,7 +1881,7 @@ var ModalClose = forwardRef11(
   }
 );
 
-// src/components/Spinner.tsx
+// src/components/spinner.tsx
 import React26 from "react";
 function Spinner() {
   return /* @__PURE__ */ React26.createElement("span", {
@@ -1726,7 +1892,7 @@ function Spinner() {
   }));
 }
 
-// src/components/Tooltip.tsx
+// src/components/tooltip.tsx
 import React27 from "react";
 function Tooltip({ children }) {
   return /* @__PURE__ */ React27.createElement("span", {
@@ -1734,17 +1900,17 @@ function Tooltip({ children }) {
   }, children);
 }
 
-// src/components/Slider/index.tsx
+// src/components/slider/index.tsx
 import clsx6 from "clsx";
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
 import React28, { useState as useState2 } from "react";
 function Slider(props) {
-  let { children, className, gap, arrowOffset } = props;
+  let { children, className, gap, slidesPerView, arrowOffset } = props;
   let [currentSlide, setCurrentSlide] = useState2(0);
   let [created, setCreated] = useState2(false);
   let [ref, instanceRef] = useKeenSlider2(
     {
-      slides: { perView: 4, spacing: gap },
+      slides: { perView: slidesPerView, spacing: gap },
       breakpoints: {
         "(max-width: 1024px)": {
           slides: { perView: 3, spacing: gap }
@@ -1785,9 +1951,9 @@ function Slider(props) {
 var Components = {
   Background: Background2,
   Icon,
-  ModalComponents: Modal_exports,
+  ModalComponents: modal_exports,
   Overlay: Overlay2,
-  Placeholder: Placeholder_default,
+  Placeholder: placeholder_default,
   Spinner,
   Slider,
   Tooltip
@@ -1801,12 +1967,12 @@ var SliderComponents = {
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
+import React29, { useContext as useContext6, useEffect as useEffect4, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   let renderRoot = () => setData({});
-  useEffect5(() => {
+  useEffect4(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1832,7 +1998,7 @@ var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
   let [data, setData] = useState3(instance.data);
   let { id, type, childIds = [], css: css11, className, ...rest } = data;
-  useEffect5(() => {
+  useEffect4(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (isBrowser && !instance.ref.current) {