@weaverse/react 0.7.57 → 0.7.58

package/dist/index.js

@@ -40,7 +40,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/elements/Button.tsx
 var React = __toESM(require("react"));
@@ -118,42 +118,6 @@ var import_react4 = __toESM(require("react"));
 // src/constant/index.ts
 var TIMES = ["days", "hours", "minutes", "seconds"];
 var COUNTDOWN_KEY = "wv-cd-evergreen-start";
-var INSTAGRAM_API = "https://graph.instagram.com";
-
-// src/utils/css.ts
-var import_clsx = __toESM(require("clsx"));
-function formatCSS(css10) {
-  return {
-    "@desktop": css10["@desktop"],
-    "@mobile": css10["@mobile"]
-  };
-}
-var permanentClasses = {};
-function generateItemClassName(instance, stitchesInstance) {
-  let { css: css10, type, className: cls = "" } = instance.data;
-  let className = "";
-  let permanentClass = "";
-  let perCss = instance.Element?.permanentCss;
-  if (perCss) {
-    if (type in permanentClasses) {
-      permanentClass = permanentClasses[type];
-    } else {
-      let { className: perCls } = stitchesInstance.css(perCss)();
-      Object.assign(permanentClasses, { [type]: perCls });
-      permanentClass = perCls;
-    }
-  }
-  className = permanentClass;
-  if (css10) {
-    let formattedCss = formatCSS(css10);
-    let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
-    let { stitchesClass } = instance;
-    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = (0, import_clsx.default)(permanentClass, cls, newStitchesClass, otherClass);
-    instance.stitchesClass = newStitchesClass;
-  }
-  return className;
-}
 
 // src/utils/index.ts
 function getTime(_seconds) {
@@ -270,7 +234,6 @@ var Countdown = (0, import_react4.forwardRef)(
 );
 var css3 = {
   "@desktop": {
-    fontFamily: "Inter",
     fontSize: "36px",
     fontWeight: 500,
     display: "flex",
@@ -693,39 +656,17 @@ Video.defaultProps = {
 };
 var Video_default = Video;
 
-// src/elements/Instagram.tsx
-var import_react25 = __toESM(require("react"));
-
-// src/components/Placeholder.tsx
-var import_react14 = __toESM(require("react"));
-var Placeholder = (0, import_react14.forwardRef)(
-  (props, ref) => {
-    let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      "data-wv-placeholder": true,
-      ref,
-      ...rest
-    }, /* @__PURE__ */ import_react14.default.createElement("div", {
-      style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react14.default.createElement("div", null, children));
-  }
-);
-var Placeholder_default = Placeholder;
+// src/elements/Slideshow/index.tsx
+var import_react20 = require("keen-slider/react");
+var import_react21 = __toESM(require("react"));
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
-  Modal: () => Modal,
-  ModalClose: () => ModalClose,
-  ModalContent: () => ModalContent,
-  ModalHeader: () => ModalHeader,
-  ModalTrigger: () => ModalTrigger
-});
-var import_react_dialog2 = require("@radix-ui/react-dialog");
-var import_react19 = __toESM(require("react"));
+// src/components/Slider/Arrows.tsx
+var import_react16 = require("@stitches/react");
+var import_clsx2 = __toESM(require("clsx"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/Icons/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/components/Icons/Phosphor.tsx
 var Phosphor_exports = {};
@@ -740,39 +681,39 @@ __export(Phosphor_exports, {
   ShoppingCart: () => ShoppingCart,
   X: () => X
 });
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var CircleNotch = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("circle", {
+  }, /* @__PURE__ */ import_react14.default.createElement("circle", {
     style: { opacity: ".25" },
     cx: "12",
     cy: "12",
     r: "10",
     stroke: "currentColor",
     strokeWidth: "4"
-  }), /* @__PURE__ */ import_react15.default.createElement("path", {
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
     style: { opacity: ".75" },
     fill: "currentColor",
     d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
   }));
 };
 var X = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "200",
     y1: "56",
     x2: "56",
@@ -782,7 +723,7 @@ var X = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "12"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "200",
     y1: "200",
     x2: "56",
@@ -795,7 +736,7 @@ var X = (props) => {
   }));
 };
 var Minus = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     width: "196",
     height: "196",
     fill: "currentColor",
@@ -803,12 +744,12 @@ var Minus = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("path", {
+  }, /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"
   }));
 };
 var Plus = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     width: "196",
     height: "196",
     fill: "currentColor",
@@ -816,23 +757,23 @@ var Plus = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("path", {
+  }, /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"
   }));
 };
 var ArrowLeft = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "216",
     y1: "128",
     x2: "40",
@@ -842,7 +783,7 @@ var ArrowLeft = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react14.default.createElement("polyline", {
     points: "112 56 40 128 112 200",
     fill: "none",
     stroke: "currentColor",
@@ -852,18 +793,18 @@ var ArrowLeft = (props) => {
   }));
 };
 var ArrowRight = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ import_react15.default.createElement("line", {
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
     x1: "40",
     y1: "128",
     x2: "216",
@@ -873,7 +814,7 @@ var ArrowRight = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ import_react15.default.createElement("polyline", {
+  }), /* @__PURE__ */ import_react14.default.createElement("polyline", {
     points: "144 56 216 128 144 200",
     fill: "none",
     stroke: "currentColor",
@@ -883,36 +824,36 @@ var ArrowRight = (props) => {
   }));
 };
 var Image2 = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
     fill: "currentColor",
     viewBox: "0 0 640 512",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("path", {
+  }, /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"
   }));
 };
 var ShoppingCart = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ import_react15.default.createElement("path", {
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ import_react15.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react14.default.createElement("circle", {
     cx: "80",
     cy: "204",
     r: "20",
@@ -921,7 +862,7 @@ var ShoppingCart = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ import_react15.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react14.default.createElement("circle", {
     cx: "184",
     cy: "204",
     r: "20",
@@ -930,7 +871,7 @@ var ShoppingCart = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ import_react15.default.createElement("path", {
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
     fill: "none",
     stroke: "currentColor",
@@ -940,25 +881,25 @@ var ShoppingCart = (props) => {
   }));
 };
 var Eye = (props) => {
-  return /* @__PURE__ */ import_react15.default.createElement("svg", {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ import_react15.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ import_react15.default.createElement("path", {
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "12"
-  }), /* @__PURE__ */ import_react15.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react14.default.createElement("circle", {
     cx: "128",
     cy: "128",
     r: "40",
@@ -971,28 +912,537 @@ var Eye = (props) => {
 };
 
 // src/components/Icons/index.tsx
-var import_clsx2 = __toESM(require("clsx"));
+var import_clsx = __toESM(require("clsx"));
 function Icon({ name, className, ...props }) {
   let WeaverseIcon = Phosphor_exports[name];
-  let cls = (0, import_clsx2.default)("wv-icon", className);
-  return /* @__PURE__ */ import_react16.default.createElement(WeaverseIcon, {
+  let cls = (0, import_clsx.default)("wv-icon", className);
+  return /* @__PURE__ */ import_react15.default.createElement(WeaverseIcon, {
     className: cls,
     ...props
   });
 }
 
+// src/components/Slider/Arrows.tsx
+function Arrows(props) {
+  let { currentSlide, instanceRef, className } = props;
+  let isFirstSlide = currentSlide === 0;
+  let isLastSlide = false;
+  if (instanceRef.current) {
+    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+  }
+  let arrowLeftClass = (0, import_clsx2.default)(
+    "wv-slider-arrow arrow--left",
+    isFirstSlide && "arrow--disabled"
+  );
+  let arrowRightClass = (0, import_clsx2.default)(
+    "wv-slider-arrow arrow--right",
+    isLastSlide && "arrow--disabled"
+  );
+  return /* @__PURE__ */ import_react17.default.createElement(StyledArrows, {
+    className
+  }, /* @__PURE__ */ import_react17.default.createElement("button", {
+    type: "button",
+    className: arrowLeftClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.prev();
+    }
+  }, /* @__PURE__ */ import_react17.default.createElement(Icon, {
+    name: "ArrowLeft"
+  })), /* @__PURE__ */ import_react17.default.createElement("button", {
+    type: "button",
+    className: arrowRightClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.next();
+    }
+  }, /* @__PURE__ */ import_react17.default.createElement(Icon, {
+    name: "ArrowRight"
+  })));
+}
+var StyledArrows = (0, import_react16.styled)("div", {
+  ".wv-slider-arrow": {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "44px",
+    height: "44px",
+    padding: "8px",
+    color: "#191919",
+    backgroundColor: "#f2f2f2",
+    textAlign: "center",
+    transition: "all 0.2s ease-in-out",
+    borderRadius: "4px",
+    border: "none",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "#191919",
+      color: "#f2f2f2"
+    },
+    svg: {
+      verticalAlign: "middle",
+      width: "22px",
+      height: "22px"
+    },
+    "&.arrow--left": {
+      left: "-80px"
+    },
+    "&.arrow--right": {
+      right: "-80px"
+    },
+    "&.arrow--disabled": {
+      opacity: 0.5
+    }
+  },
+  "@media (max-width: 768px)": {
+    ".wv-slider-arrow": {
+      display: "none"
+    }
+  }
+});
+
+// src/components/Slider/Dots.tsx
+var import_react18 = require("@stitches/react");
+var import_clsx3 = __toESM(require("clsx"));
+var import_react19 = __toESM(require("react"));
+function Dots(props) {
+  let { currentSlide, instanceRef, className } = props;
+  return /* @__PURE__ */ import_react19.default.createElement(StyledDots, {
+    className
+  }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+    (idx) => {
+      let className2 = (0, import_clsx3.default)("dot", currentSlide === idx && "dot--active");
+      return /* @__PURE__ */ import_react19.default.createElement("button", {
+        key: idx,
+        type: "button",
+        onClick: () => instanceRef.current?.moveToIdx(idx),
+        className: className2
+      });
+    }
+  ));
+}
+var StyledDots = (0, import_react18.styled)("div", {
+  padding: "10px 0",
+  justifyContent: "center",
+  ".dot": {
+    width: "9px",
+    height: "9px",
+    padding: "0",
+    margin: "0 5px",
+    border: "none",
+    borderRadius: "50%",
+    background: "#2125291a",
+    transition: "all 0.2s ease-in-out",
+    "&.dot--active": {
+      background: "#212529"
+    }
+  }
+});
+
+// src/components/Slider/ResizePlugin.ts
+var ResizePlugin = (slider) => {
+  let observer = new ResizeObserver(() => slider.update());
+  slider.on("created", () => {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", () => {
+    observer.unobserve(slider.container);
+  });
+};
+
+// src/utils/css.ts
+var import_clsx4 = __toESM(require("clsx"));
+function formatCSS(css11) {
+  return {
+    "@desktop": css11["@desktop"],
+    "@mobile": css11["@mobile"]
+  };
+}
+var permanentClasses = {};
+function generateItemClassName(instance, stitchesInstance) {
+  let { css: css11, type, className: cls = "" } = instance.data;
+  let className = "";
+  let permanentClass = "";
+  let perCss = instance.Element?.permanentCss;
+  if (perCss) {
+    if (type in permanentClasses) {
+      permanentClass = permanentClasses[type];
+    } else {
+      let { className: perCls } = stitchesInstance.css(perCss)();
+      Object.assign(permanentClasses, { [type]: perCls });
+      permanentClass = perCls;
+    }
+  }
+  className = permanentClass;
+  if (css11) {
+    let formattedCss = formatCSS(css11);
+    let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
+    let { stitchesClass } = instance;
+    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = (0, import_clsx4.default)(permanentClass, cls, newStitchesClass, otherClass);
+    instance.stitchesClass = newStitchesClass;
+  }
+  return className;
+}
+function loadCSS(attrs) {
+  return new Promise((resolve, reject) => {
+    let found = document.querySelector(`link[href="${attrs.href}"]`);
+    if (found) {
+      return resolve(true);
+    }
+    let link = document.createElement("link");
+    Object.assign(link, attrs);
+    link.addEventListener("load", () => resolve(true));
+    link.onerror = reject;
+    document.head.appendChild(link);
+  });
+}
+
+// src/elements/Slideshow/index.tsx
+var Slideshow = (0, import_react21.forwardRef)((props, ref) => {
+  let {
+    animation,
+    slidesPerView,
+    spacing,
+    showArrows,
+    showDots,
+    dotsPosition,
+    autoRotate,
+    changeSlidesEvery,
+    children,
+    ...rest
+  } = props;
+  let [cssLoaded, setCssLoaded] = (0, import_react21.useState)(false);
+  let [created, setCreated] = (0, import_react21.useState)(false);
+  let [ready, setReady] = (0, import_react21.useState)(false);
+  let [currentSlide, setCurrentSlide] = (0, import_react21.useState)(0);
+  let [sliderRef, instanceRef] = (0, import_react20.useKeenSlider)(
+    {
+      slides: {
+        perView: slidesPerView
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
+      }
+    },
+    [ResizePlugin]
+  );
+  (0, import_react21.useEffect)(() => {
+    loadCSS({
+      rel: "stylesheet",
+      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+    }).then(() => setCssLoaded(true));
+  }, []);
+  (0, import_react21.useEffect)(() => {
+    if (created && cssLoaded) {
+      setReady(true);
+    }
+  }, [created, cssLoaded]);
+  let style = {
+    "--slider-opacity": ready ? 1 : 0
+  };
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
+    ref,
+    style,
+    ...rest
+  }, /* @__PURE__ */ import_react21.default.createElement("div", {
+    ref: sliderRef,
+    className: "keen-slider"
+  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react21.default.createElement(Arrows, {
+    instanceRef,
+    currentSlide,
+    className: "wv-slideshow--arrows"
+  }), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react21.default.createElement(Dots, {
+    instanceRef,
+    currentSlide,
+    className: "wv-slideshow--dots"
+  }));
+});
+var css9 = {
+  "@desktop": {
+    opacity: "var(--slider-opacity, 0)",
+    padding: "32px 0",
+    ".keen-slider": {
+      height: "100%"
+    }
+  }
+};
+Slideshow.defaultProps = {
+  animation: "fade",
+  slidesPerView: 1,
+  spacing: 0,
+  showArrows: true,
+  showDots: true,
+  dotsPosition: "bottom",
+  autoRotate: false,
+  changeSlidesEvery: 5
+};
+var Slideshow_default = Slideshow;
+
+// src/elements/Slideshow/Slide.tsx
+var import_react26 = __toESM(require("react"));
+
+// src/components/Background.tsx
+var import_react22 = require("@stitches/react");
+var import_react23 = __toESM(require("react"));
+function Background2(props) {
+  let {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className
+  } = props;
+  let style = {
+    ["--bg-color"]: backgroundColor,
+    ["--bg-fit"]: backgroundFit,
+    ["--bg-position"]: backgroundPosition
+  };
+  if (backgroundImage || backgroundColor) {
+    return /* @__PURE__ */ import_react23.default.createElement(StyledBackground, {
+      style,
+      className
+    }, backgroundImage && /* @__PURE__ */ import_react23.default.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": backgroundImage,
+      alt: "Background"
+    }));
+  }
+  return null;
+}
+var StyledBackground = (0, import_react22.styled)("div", {
+  display: "block !important",
+  position: "absolute",
+  inset: 0,
+  backgroundColor: "var(--bg-color)",
+  img: {
+    objectFit: "var(--bg-fit, cover)",
+    objectPosition: "var(--bg-position, 50% 50%)"
+  }
+});
+
+// src/components/Overlay.tsx
+var import_react24 = require("@stitches/react");
+var import_react25 = __toESM(require("react"));
+function Overlay2(props) {
+  let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
+  if (enabled) {
+    return /* @__PURE__ */ import_react25.default.createElement(StyledOverlay, {
+      className,
+      css: { ["--overlay-opacity"]: opacity / 100 }
+    });
+  }
+  return null;
+}
+var StyledOverlay = (0, import_react24.styled)("div", {
+  display: "block !important",
+  position: "absolute",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
+});
+
+// src/elements/Slideshow/position.ts
+var slidePositionMap = {
+  "top left": {
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  },
+  "top center": {
+    justifyContent: "flex-start",
+    alignItems: "center"
+  },
+  "top right": {
+    justifyContent: "flex-start",
+    alignItems: "flex-end"
+  },
+  "center left": {
+    justifyContent: "center",
+    alignItems: "flex-start"
+  },
+  "center center": {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  "center right": {
+    justifyContent: "center",
+    alignItems: "flex-end"
+  },
+  "bottom left": {
+    justifyContent: "flex-end",
+    alignItems: "flex-start"
+  },
+  "bottom center": {
+    justifyContent: "flex-end",
+    alignItems: "center"
+  },
+  "bottom right": {
+    justifyContent: "flex-end",
+    alignItems: "flex-end"
+  }
+};
+
+// src/elements/Slideshow/Slide.tsx
+var Slide = (0, import_react26.forwardRef)((props, ref) => {
+  let {
+    contentPosition,
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    enableOverlay,
+    overlayOpacity,
+    children,
+    ...rest
+  } = props;
+  let style = slidePositionMap[contentPosition];
+  return /* @__PURE__ */ import_react26.default.createElement("div", {
+    className: "keen-slider__slide"
+  }, /* @__PURE__ */ import_react26.default.createElement(Background2, {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className: "slide-background"
+  }), /* @__PURE__ */ import_react26.default.createElement(Overlay2, {
+    enableOverlay,
+    overlayOpacity,
+    className: "slide-overlay"
+  }), /* @__PURE__ */ import_react26.default.createElement("div", {
+    ref,
+    style,
+    ...rest
+  }, children?.length ? children : "Add element here"));
+});
+var css10 = {
+  "@desktop": {
+    position: "relative",
+    height: "100%",
+    width: "1224px",
+    margin: "0 auto",
+    display: "flex",
+    flexDirection: "column",
+    padding: "100px 20px"
+  }
+};
+Slide.defaultProps = {
+  contentPosition: "center center",
+  backgroundFit: "cover",
+  backgroundPosition: "center center",
+  enableOverlay: false,
+  overlayOpacity: 30
+};
+var Slide_default = Slide;
+
+// src/elements/index.ts
+var Elements = {
+  Countdown: {
+    Component: Countdown_default,
+    type: "countdown",
+    defaultCss: css3
+  },
+  Button: {
+    Component: Button_default,
+    type: "button",
+    defaultCss: css
+  },
+  Container: {
+    Component: Container_default,
+    type: "container",
+    defaultCss: css2
+  },
+  Image: {
+    Component: Image_default,
+    type: "image",
+    defaultCss: css4
+  },
+  Layout: {
+    Component: Layout_default,
+    type: "layout",
+    defaultCss: css5
+  },
+  Map: {
+    Component: Map_default,
+    type: "map",
+    defaultCss: css6
+  },
+  Text: {
+    Component: Text_default,
+    type: "text",
+    defaultCss: css7
+  },
+  Video: {
+    Component: Video_default,
+    type: "video",
+    defaultCss: css8
+  },
+  Slideshow: {
+    Component: Slideshow_default,
+    type: "slideshow",
+    defaultCss: css9
+  },
+  Slide: {
+    Component: Slide_default,
+    type: "slide",
+    defaultCss: css10
+  }
+};
+
+// 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_react27.createContext)({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/components/Placeholder.tsx
+var import_react28 = __toESM(require("react"));
+var Placeholder = (0, import_react28.forwardRef)(
+  (props, ref) => {
+    let { element, children, ...rest } = props;
+    return /* @__PURE__ */ import_react28.default.createElement("div", {
+      "data-wv-placeholder": true,
+      ref,
+      ...rest
+    }, /* @__PURE__ */ import_react28.default.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ import_react28.default.createElement("div", null, children));
+  }
+);
+var Placeholder_default = Placeholder;
+
+// src/components/Modal/index.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react31 = __toESM(require("react"));
+
 // src/components/Modal/styled.ts
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_react17 = require("@stitches/react");
-var overlayShow = (0, import_react17.keyframes)({
+var import_react29 = require("@stitches/react");
+var overlayShow = (0, import_react29.keyframes)({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-var contentShow = (0, import_react17.keyframes)({
+var contentShow = (0, import_react29.keyframes)({
   "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
   "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
 });
-var StyledOverlay = (0, import_react17.styled)(import_react_dialog.Overlay, {
+var StyledOverlay2 = (0, import_react29.styled)(import_react_dialog.Overlay, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
@@ -1000,7 +1450,7 @@ var StyledOverlay = (0, import_react17.styled)(import_react_dialog.Overlay, {
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
-var StyledTitle = (0, import_react17.styled)(import_react_dialog.Title, {
+var StyledTitle = (0, import_react29.styled)(import_react_dialog.Title, {
   margin: "0 0 24px",
   fontWeight: 500,
   fontSize: 24,
@@ -1009,7 +1459,7 @@ var StyledTitle = (0, import_react17.styled)(import_react_dialog.Title, {
     fontSize: 20
   }
 });
-var StyledContent = (0, import_react17.styled)(import_react_dialog.Content, {
+var StyledContent = (0, import_react29.styled)(import_react_dialog.Content, {
   backgroundColor: "white",
   borderRadius: 6,
   boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
@@ -1040,7 +1490,7 @@ var StyledContent = (0, import_react17.styled)(import_react_dialog.Content, {
     }
   }
 });
-var StyledCloseIcon = (0, import_react17.styled)("button", {
+var StyledCloseIcon = (0, import_react29.styled)("button", {
   all: "unset",
   cursor: "pointer",
   fontFamily: "inherit",
@@ -1065,10 +1515,10 @@ var StyledCloseIcon = (0, import_react17.styled)("button", {
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-var import_react18 = require("react");
+var import_react30 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = (0, import_react18.useContext)(WeaverseContext);
+  let rootCtx = (0, import_react30.useContext)(WeaverseContext);
   let toggleRootzIndex = (open2) => {
     let { contentRootElement } = rootCtx;
     if (contentRootElement) {
@@ -1079,7 +1529,7 @@ function useOpenChangeEffect(props) {
       }
     }
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     let isOpen = open || defaultOpen;
     toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
@@ -1094,7 +1544,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_dialog2.Root, {
+  return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Root, {
     open,
     defaultOpen,
     onOpenChange: handleOpenChange,
@@ -1102,30 +1552,30 @@ var Modal = (props) => {
   }, children);
 };
 var ModalTrigger = import_react_dialog2.Trigger;
-var ModalHeader = (0, import_react19.forwardRef)(
+var ModalHeader = (0, import_react31.forwardRef)(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react19.default.createElement(StyledTitle, {
+    return /* @__PURE__ */ import_react31.default.createElement(StyledTitle, {
       ref,
       ...rest,
       "data-wv-modal-header": true
     }, children);
   }
 );
-var ModalContent = (0, import_react19.forwardRef)(
+var ModalContent = (0, import_react31.forwardRef)(
   (props, ref) => {
     let { children, size, portal, ...rest } = props;
-    let modalContent = /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react19.default.createElement(StyledContent, {
+    let modalContent = /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(StyledOverlay2, null), /* @__PURE__ */ import_react31.default.createElement(StyledContent, {
       ...rest,
       onCloseAutoFocus: (e) => e.preventDefault(),
       "data-wv-modal": true,
       "data-size": size,
       ref
-    }, /* @__PURE__ */ import_react19.default.createElement(ModalClose, null), /* @__PURE__ */ import_react19.default.createElement("div", {
+    }, /* @__PURE__ */ import_react31.default.createElement(ModalClose, null), /* @__PURE__ */ import_react31.default.createElement("div", {
       className: "wv-modal-content"
     }, children)));
     if (portal) {
-      return /* @__PURE__ */ import_react19.default.createElement(import_react_dialog2.Portal, null, modalContent);
+      return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1134,13 +1584,13 @@ ModalContent.defaultProps = {
   size: "auto",
   portal: false
 };
-var ModalClose = (0, import_react19.forwardRef)(
+var ModalClose = (0, import_react31.forwardRef)(
   (props, ref) => {
     let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ import_react19.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react19.default.createElement(Icon, {
+    let closeIcon = /* @__PURE__ */ import_react31.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react31.default.createElement(Icon, {
       name: "X"
     }));
-    return /* @__PURE__ */ import_react19.default.createElement(import_react_dialog2.Close, {
+    return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Close, {
       asChild: true,
       ...rest,
       ref
@@ -1149,131 +1599,32 @@ var ModalClose = (0, import_react19.forwardRef)(
 );
 
 // src/components/Spinner.tsx
-var import_react20 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 function Spinner() {
-  return /* @__PURE__ */ import_react20.default.createElement("span", {
+  return /* @__PURE__ */ import_react32.default.createElement("span", {
     className: "wv-spinner-wrapper"
-  }, /* @__PURE__ */ import_react20.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react32.default.createElement(Icon, {
     name: "CircleNotch",
     className: "wv-spinner"
   }));
 }
 
 // src/components/Tooltip.tsx
-var import_react21 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 function Tooltip({ children }) {
-  return /* @__PURE__ */ import_react21.default.createElement("span", {
+  return /* @__PURE__ */ import_react33.default.createElement("span", {
     className: "wv-tooltip"
   }, children);
 }
 
 // src/components/Slider/index.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_react23 = require("keen-slider/react");
-var import_react24 = __toESM(require("react"));
-
-// src/components/Slider/Arrows.tsx
-var import_clsx3 = __toESM(require("clsx"));
-var import_react22 = __toESM(require("react"));
-function Arrows(props) {
-  let { currentSlide, instanceRef, className } = props;
-  let { stitchesInstance } = (0, import_react22.useContext)(WeaverseContext);
-  let { className: cssClass } = stitchesInstance.css(css9)();
-  let isFirstSlide = currentSlide === 0;
-  let isLastSlide = false;
-  if (instanceRef.current) {
-    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
-  }
-  let _className = (0, import_clsx3.default)(className, cssClass);
-  let arrowLeftClass = (0, import_clsx3.default)(
-    "wv-slider-arrow arrow--left",
-    isFirstSlide && "arrow--disabled"
-  );
-  let arrowRightClass = (0, import_clsx3.default)(
-    "wv-slider-arrow arrow--right",
-    isLastSlide && "arrow--disabled"
-  );
-  return /* @__PURE__ */ import_react22.default.createElement("div", {
-    className: _className
-  }, /* @__PURE__ */ import_react22.default.createElement("button", {
-    type: "button",
-    className: arrowLeftClass,
-    onClick: (e) => {
-      e.stopPropagation();
-      instanceRef?.current?.prev();
-    }
-  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
-    name: "ArrowLeft"
-  })), /* @__PURE__ */ import_react22.default.createElement("button", {
-    type: "button",
-    className: arrowRightClass,
-    onClick: (e) => {
-      e.stopPropagation();
-      instanceRef?.current?.next();
-    }
-  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
-    name: "ArrowRight"
-  })));
-}
-var css9 = {
-  "@desktop": {
-    ".wv-slider-arrow": {
-      position: "absolute",
-      top: "50%",
-      transform: "translateY(-50%)",
-      width: "44px",
-      height: "44px",
-      padding: "8px",
-      color: "#191919",
-      backgroundColor: "#f2f2f2",
-      textAlign: "center",
-      transition: "all 0.2s ease-in-out",
-      borderRadius: "4px",
-      border: "none",
-      cursor: "pointer",
-      "&:hover": {
-        backgroundColor: "#191919",
-        color: "#f2f2f2"
-      },
-      svg: {
-        verticalAlign: "middle",
-        width: "22px",
-        height: "22px"
-      },
-      "&.arrow--left": {
-        left: "-80px"
-      },
-      "&.arrow--right": {
-        right: "-80px"
-      },
-      "&.arrow--disabled": {
-        opacity: 0.5
-      }
-    }
-  },
-  "@mobile": {
-    ".wv-slider-arrow": {
-      display: "none"
-    }
-  }
-};
-
-// src/components/Slider/ResizePlugin.ts
-var ResizePlugin = (slider) => {
-  let observer = new ResizeObserver(() => slider.update());
-  slider.on("created", () => {
-    observer.observe(slider.container);
-  });
-  slider.on("destroyed", () => {
-    observer.unobserve(slider.container);
-  });
-};
-
-// src/components/Slider/index.tsx
+var import_clsx5 = __toESM(require("clsx"));
+var import_react34 = require("keen-slider/react");
+var import_react35 = __toESM(require("react"));
 function Slider({ children, className, gap }) {
-  let [currentSlide, setCurrentSlide] = (0, import_react24.useState)(0);
-  let [created, setCreated] = (0, import_react24.useState)(false);
-  let [ref, instanceRef] = (0, import_react23.useKeenSlider)(
+  let [currentSlide, setCurrentSlide] = (0, import_react35.useState)(0);
+  let [created, setCreated] = (0, import_react35.useState)(false);
+  let [ref, instanceRef] = (0, import_react34.useKeenSlider)(
     {
       slides: { perView: 4, spacing: gap },
       breakpoints: {
@@ -1296,15 +1647,15 @@ function Slider({ children, className, gap }) {
     },
     [ResizePlugin]
   );
-  let _className = (0, import_clsx4.default)("keen-slider", className);
-  let arrowsClass = (0, import_clsx4.default)(className && `${className}-arrows`);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("div", {
+  let _className = (0, import_clsx5.default)("keen-slider", className);
+  let arrowsClass = (0, import_clsx5.default)(className && `${className}-arrows`);
+  return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement("div", {
     ref,
     className: _className
-  }, /* @__PURE__ */ import_react24.default.createElement("link", {
+  }, /* @__PURE__ */ import_react35.default.createElement("link", {
     rel: "stylesheet",
     href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
-  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react24.default.createElement(Arrows, {
+  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(Arrows, {
     currentSlide,
     instanceRef,
     className: arrowsClass
@@ -1313,157 +1664,24 @@ function Slider({ children, className, gap }) {
 
 // src/components/index.ts
 var Components = {
+  Background: Background2,
+  Icon,
+  ModalComponents: Modal_exports,
+  Overlay: Overlay2,
   Placeholder: Placeholder_default,
   Spinner,
-  ModalComponents: Modal_exports,
-  Icon,
   Slider,
   Tooltip
 };
 
-// src/elements/Instagram.tsx
-var Instagram = (0, import_react25.forwardRef)(
-  (props, ref) => {
-    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react25.useState)([]);
-    let [error, setError] = (0, import_react25.useState)(null);
-    (0, import_react25.useEffect)(() => {
-      if (token) {
-        let params = new URLSearchParams({
-          access_token: token,
-          fields: "id,media_type,caption,media_url,permalink,thumbnail_url"
-        });
-        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
-          if (res.error) {
-            setError(res);
-          } else {
-            setError(null);
-            setMedia([...res.data]);
-          }
-        }).catch(setError);
-      }
-    }, [token]);
-    if (!token || error) {
-      return /* @__PURE__ */ import_react25.default.createElement("div", {
-        ref,
-        ...rest
-      }, /* @__PURE__ */ import_react25.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_react25.default.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, /* @__PURE__ */ import_react25.default.createElement("div", {
-      className: "wv-ig-media-container"
-    }, media.slice(0, numberOfImages).map((item) => {
-      let {
-        id,
-        permalink,
-        caption,
-        media_url,
-        media_type,
-        thumbnail_url
-      } = item;
-      if (media_type === "VIDEO") {
-        return /* @__PURE__ */ import_react25.default.createElement("video", {
-          key: id,
-          controls: true,
-          poster: thumbnail_url
-        }, /* @__PURE__ */ import_react25.default.createElement("source", {
-          src: media_url,
-          type: "video/mp4"
-        }));
-      }
-      return /* @__PURE__ */ import_react25.default.createElement("a", {
-        key: id,
-        href: permalink,
-        target: "_blank",
-        rel: "noreferrer"
-      }, /* @__PURE__ */ import_react25.default.createElement("img", {
-        alt: caption,
-        src: media_url
-      }));
-    })));
-  }
-);
-Instagram.defaultProps = {
-  token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0
-};
-
-// src/elements/index.ts
-var Elements = {
-  Countdown: {
-    Component: Countdown_default,
-    type: "countdown",
-    defaultCss: css3
-  },
-  Button: {
-    Component: Button_default,
-    type: "button",
-    defaultCss: css
-  },
-  Container: {
-    Component: Container_default,
-    type: "container",
-    defaultCss: css2
-  },
-  Image: {
-    Component: Image_default,
-    type: "image",
-    defaultCss: css4
-  },
-  Layout: {
-    Component: Layout_default,
-    type: "layout",
-    defaultCss: css5
-  },
-  Map: {
-    Component: Map_default,
-    type: "map",
-    defaultCss: css6
-  },
-  Text: {
-    Component: Text_default,
-    type: "text",
-    defaultCss: css7
-  },
-  Video: {
-    Component: Video_default,
-    type: "video",
-    defaultCss: css8
-  }
-};
-
-// 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_react26.createContext)({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react27 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react27.useState)(context.projectData);
-  let rootRef = (0, import_react27.useRef)();
+  let [, setData] = (0, import_react36.useState)(context.projectData);
+  let rootRef = (0, import_react36.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react27.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1473,23 +1691,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react27.default.createElement("div", {
+    return /* @__PURE__ */ import_react36.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react27.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react36.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react36.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react27.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react27.useState)(instance.data);
-  let { id, type, childIds = [], css: css10, className, ...rest } = data;
-  (0, import_react27.useEffect)(() => {
+  let { stitchesInstance, elementInstances } = (0, import_react36.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react36.useState)(instance.data);
+  let { id, type, childIds = [], css: css11, className, ...rest } = data;
+  (0, import_react36.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -1505,13 +1723,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react27.default.createElement(Component, {
+    return /* @__PURE__ */ import_react36.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react27.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react36.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1521,15 +1739,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react27.useContext)(WeaverseContext);
+  let context = (0, import_react36.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react27.default.createElement("div", {
+    return /* @__PURE__ */ import_react36.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react27.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react36.default.createElement(ItemComponent, {
     key: id,
     instance
   });