@weaverse/react 0.7.58 → 0.7.60

package/dist/index.mjs

@@ -489,6 +489,7 @@ var Text = React10.forwardRef(
 );
 var css7 = {
   "@desktop": {
+    display: "flex",
     padding: "10px",
     overflow: "hidden",
     ".wv-text-content": {
@@ -626,8 +627,9 @@ Video.defaultProps = {
 var Video_default = Video;
 
 // src/elements/Slideshow/index.tsx
-import { useKeenSlider } from "keen-slider/react";
-import React19, { forwardRef as forwardRef8, useEffect as useEffect2, useState } from "react";
+import { css as stitchesCss } from "@stitches/react";
+import clsx5 from "clsx";
+import React20, { forwardRef as forwardRef8 } from "react";
 
 // src/components/Slider/Arrows.tsx
 import { styled } from "@stitches/react";
@@ -893,25 +895,21 @@ function Icon({ name, className, ...props }) {
 
 // src/components/Slider/Arrows.tsx
 function Arrows(props) {
-  let { currentSlide, instanceRef, className } = props;
-  let isFirstSlide = currentSlide === 0;
-  let isLastSlide = false;
+  let { currentSlide, instanceRef, className, offset } = props;
+  let isFirst = currentSlide === 0;
+  let isLast = false;
   if (instanceRef.current) {
-    isLastSlide = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+    isLast = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
   }
-  let arrowLeftClass = clsx2(
-    "wv-slider-arrow arrow--left",
-    isFirstSlide && "arrow--disabled"
-  );
-  let arrowRightClass = clsx2(
-    "wv-slider-arrow arrow--right",
-    isLastSlide && "arrow--disabled"
-  );
+  let style = {
+    "--offset": `${offset}px`
+  };
   return /* @__PURE__ */ React17.createElement(StyledArrows, {
-    className
+    className,
+    style
   }, /* @__PURE__ */ React17.createElement("button", {
     type: "button",
-    className: arrowLeftClass,
+    className: clsx2("arrow arrow--left", isFirst && "arrow--disabled"),
     onClick: (e) => {
       e.stopPropagation();
       instanceRef?.current?.prev();
@@ -920,7 +918,7 @@ function Arrows(props) {
     name: "ArrowLeft"
   })), /* @__PURE__ */ React17.createElement("button", {
     type: "button",
-    className: arrowRightClass,
+    className: clsx2("arrow arrow--right", isLast && "arrow--disabled"),
     onClick: (e) => {
       e.stopPropagation();
       instanceRef?.current?.next();
@@ -930,7 +928,7 @@ function Arrows(props) {
   })));
 }
 var StyledArrows = styled("div", {
-  ".wv-slider-arrow": {
+  ".arrow": {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -954,17 +952,17 @@ var StyledArrows = styled("div", {
       height: "22px"
     },
     "&.arrow--left": {
-      left: "-80px"
+      left: "var(--offset, 0px)"
     },
     "&.arrow--right": {
-      right: "-80px"
+      right: "var(--offset, 0px)"
     },
     "&.arrow--disabled": {
       opacity: 0.5
     }
   },
   "@media (max-width: 768px)": {
-    ".wv-slider-arrow": {
+    ".arrow": {
       display: "none"
     }
   }
@@ -975,9 +973,15 @@ import { styled as styled2 } from "@stitches/react";
 import clsx3 from "clsx";
 import React18 from "react";
 function Dots(props) {
-  let { currentSlide, instanceRef, className } = props;
+  let { currentSlide, instanceRef, className, absolute, position, color } = props;
+  let _className = clsx3(
+    className,
+    absolute && "dots--absolute",
+    position && `dots--${position}`,
+    color && `dots--${color}`
+  );
   return /* @__PURE__ */ React18.createElement(StyledDots, {
-    className
+    className: _className
   }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
     (idx) => {
       let className2 = clsx3("dot", currentSlide === idx && "dot--active");
@@ -992,22 +996,86 @@ function Dots(props) {
 }
 var StyledDots = styled2("div", {
   padding: "10px 0",
+  display: "flex",
   justifyContent: "center",
+  alignItems: "center",
+  gap: "12px",
+  "&.dots--absolute": {
+    position: "absolute",
+    "&.dots--top, &.dots--bottom": { left: 0, right: 0 },
+    "&.dots--top": { top: 10 },
+    "&.dots--bottom": { bottom: 10 },
+    "&.dots--left, &.dots--right": {
+      top: 0,
+      bottom: 0,
+      flexDirection: "column"
+    },
+    "&.dots--left": { left: 20 },
+    "&.dots--right": { right: 20 }
+  },
+  "&.dots--light": {
+    ".dot": {
+      backgroundColor: "#ffffff66",
+      "&.dot--active": {
+        backgroundColor: "#ffffff"
+      }
+    }
+  },
+  "&.dots--dark": {
+    ".dot": {
+      backgroundColor: "#00000033",
+      "&.dot--active": {
+        backgroundColor: "#000000"
+      }
+    }
+  },
   ".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"
-    }
+    transition: "all 0.2s ease-in-out"
   }
 });
 
+// src/elements/Slideshow/useSlideshowConfigs.ts
+import { useKeenSlider } from "keen-slider/react";
+import React19, { useContext as useContext4, useEffect as useEffect2, useState } from "react";
+
+// src/components/Slider/AutoplayPlugin.ts
+function AutoplayPlugin(changeSlidesEvery) {
+  return (slider) => {
+    let timeout;
+    let mouseOver = false;
+    function clearNextTimeout() {
+      clearTimeout(timeout);
+    }
+    function nextTimeout() {
+      clearTimeout(timeout);
+      if (mouseOver)
+        return;
+      timeout = setTimeout(() => {
+        slider.next();
+      }, changeSlidesEvery * 1e3);
+    }
+    slider.on("created", () => {
+      slider.container.addEventListener("mouseover", () => {
+        mouseOver = true;
+        clearNextTimeout();
+      });
+      slider.container.addEventListener("mouseout", () => {
+        mouseOver = false;
+        nextTimeout();
+      });
+      nextTimeout();
+    });
+    slider.on("dragStarted", clearNextTimeout);
+    slider.on("animationEnded", nextTimeout);
+    slider.on("updated", nextTimeout);
+  };
+}
+
 // src/components/Slider/ResizePlugin.ts
 var ResizePlugin = (slider) => {
   let observer = new ResizeObserver(() => slider.update());
@@ -1067,37 +1135,46 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/index.tsx
-var Slideshow = forwardRef8((props, ref) => {
+// src/elements/Slideshow/useSlideshowConfigs.ts
+function useSlideshowConfigs(props) {
   let {
     animation,
     slidesPerView,
-    spacing,
-    showArrows,
-    showDots,
-    dotsPosition,
+    loop,
     autoRotate,
     changeSlidesEvery,
-    children,
-    ...rest
+    children
   } = props;
+  let { isDesignMode, isPreviewMode } = useContext4(WeaverseContext);
+  let [opacities, setOpacities] = React19.useState([]);
   let [cssLoaded, setCssLoaded] = useState(false);
   let [created, setCreated] = useState(false);
   let [ready, setReady] = useState(false);
   let [currentSlide, setCurrentSlide] = useState(0);
+  let sliderPlugins = [ResizePlugin];
+  if (autoRotate && (isPreviewMode || !isDesignMode)) {
+    sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
+  }
   let [sliderRef, instanceRef] = useKeenSlider(
     {
-      slides: {
-        perView: slidesPerView
-      },
+      slides: animation === "fade" ? React19.Children.count(children) : { perView: slidesPerView },
+      drag: isPreviewMode || !isDesignMode,
+      loop,
+      selector: animation === "fade" ? null : ".keen-slider__slide",
       created: () => {
         setCreated(true);
       },
       slideChanged: (slider) => {
         setCurrentSlide(slider.track.details.rel);
+      },
+      detailsChanged: (slider) => {
+        let newOpacities = slider.track?.details?.slides?.map(
+          (slide) => slide.portion
+        );
+        setOpacities(newOpacities);
       }
     },
-    [ResizePlugin]
+    sliderPlugins
   );
   useEffect2(() => {
     loadCSS({
@@ -1110,53 +1187,105 @@ var Slideshow = forwardRef8((props, ref) => {
       setReady(true);
     }
   }, [created, cssLoaded]);
+  return {
+    sliderRef,
+    instanceRef,
+    currentSlide,
+    opacities,
+    ready,
+    created
+  };
+}
+
+// src/elements/Slideshow/index.tsx
+var Slideshow = forwardRef8((props, ref) => {
+  let {
+    animation,
+    showArrows,
+    showDots,
+    dotsPosition,
+    dotsColor,
+    children,
+    ...rest
+  } = props;
+  let { sliderRef, instanceRef, currentSlide, opacities, ready, created } = useSlideshowConfigs(props);
   let style = {
     "--slider-opacity": ready ? 1 : 0
   };
-  return /* @__PURE__ */ React19.createElement("div", {
+  let faderClass = "";
+  if (animation === "fade") {
+    faderClass = stitchesCss({
+      ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
+        acc[`&:nth-child(${index + 1})`] = {
+          opacity
+        };
+        return acc;
+      }, {})
+    })().className;
+  }
+  let _className = clsx5(
+    faderClass,
+    animation === "slide" ? "keen-slider" : "keen-fader"
+  );
+  return /* @__PURE__ */ React20.createElement("div", {
     ref,
     style,
     ...rest
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React20.createElement("div", {
     ref: sliderRef,
-    className: "keen-slider"
-  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React19.createElement(Arrows, {
+    className: _className
+  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(Arrows, {
     instanceRef,
     currentSlide,
-    className: "wv-slideshow--arrows"
-  }), showDots && created && instanceRef?.current && /* @__PURE__ */ React19.createElement(Dots, {
+    className: "wv-slideshow--arrows",
+    offset: 20
+  }), showDots && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(Dots, {
     instanceRef,
     currentSlide,
-    className: "wv-slideshow--dots"
+    className: "wv-slideshow--dots",
+    position: dotsPosition,
+    color: dotsColor,
+    absolute: true
   }));
 });
 var css9 = {
   "@desktop": {
     opacity: "var(--slider-opacity, 0)",
     padding: "32px 0",
+    position: "relative",
     ".keen-slider": {
       height: "100%"
+    },
+    ".keen-fader": {
+      position: "relative",
+      height: "100%",
+      ".keen-slider__slide": {
+        position: "absolute",
+        inset: 0
+      }
     }
   }
 };
 Slideshow.defaultProps = {
-  animation: "fade",
+  animation: "slide",
   slidesPerView: 1,
   spacing: 0,
   showArrows: true,
   showDots: true,
   dotsPosition: "bottom",
+  dotsColor: "light",
+  loop: true,
   autoRotate: false,
   changeSlidesEvery: 5
 };
 var Slideshow_default = Slideshow;
 
 // src/elements/Slideshow/Slide.tsx
-import React22, { forwardRef as forwardRef9 } from "react";
+import React24, { forwardRef as forwardRef10 } from "react";
 
 // src/components/Background.tsx
 import { styled as styled3 } from "@stitches/react";
-import React20 from "react";
+import React21 from "react";
 function Background2(props) {
   let {
     backgroundColor,
@@ -1171,10 +1300,10 @@ function Background2(props) {
     ["--bg-position"]: backgroundPosition
   };
   if (backgroundImage || backgroundColor) {
-    return /* @__PURE__ */ React20.createElement(StyledBackground, {
+    return /* @__PURE__ */ React21.createElement(StyledBackground, {
       style,
       className
-    }, backgroundImage && /* @__PURE__ */ React20.createElement("img", {
+    }, backgroundImage && /* @__PURE__ */ React21.createElement("img", {
       width: "100%",
       height: "100%",
       "data-blink-src": backgroundImage,
@@ -1196,11 +1325,11 @@ var StyledBackground = styled3("div", {
 
 // src/components/Overlay.tsx
 import { styled as styled4 } from "@stitches/react";
-import React21 from "react";
+import React22 from "react";
 function Overlay2(props) {
   let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
   if (enabled) {
-    return /* @__PURE__ */ React21.createElement(StyledOverlay, {
+    return /* @__PURE__ */ React22.createElement(StyledOverlay, {
       className,
       css: { ["--overlay-opacity"]: opacity / 100 }
     });
@@ -1214,6 +1343,23 @@ var StyledOverlay = styled4("div", {
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
+// src/components/Placeholder.tsx
+import React23, { forwardRef as forwardRef9 } from "react";
+var Placeholder = forwardRef9(
+  (props, ref) => {
+    let { element, className, children, ...rest } = props;
+    return /* @__PURE__ */ React23.createElement("div", {
+      "data-wv-placeholder": true,
+      ref,
+      className,
+      ...rest
+    }, /* @__PURE__ */ React23.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ React23.createElement("div", null, children));
+  }
+);
+var Placeholder_default = Placeholder;
+
 // src/elements/Slideshow/position.ts
 var slidePositionMap = {
   "top left": {
@@ -1255,7 +1401,7 @@ var slidePositionMap = {
 };
 
 // src/elements/Slideshow/Slide.tsx
-var Slide = forwardRef9((props, ref) => {
+var Slide = forwardRef10((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -1267,34 +1413,41 @@ var Slide = forwardRef9((props, ref) => {
     children,
     ...rest
   } = props;
-  let style = slidePositionMap[contentPosition];
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: "keen-slider__slide"
-  }, /* @__PURE__ */ React22.createElement(Background2, {
+  }, /* @__PURE__ */ React24.createElement(Background2, {
     backgroundColor,
     backgroundImage,
     backgroundFit,
     backgroundPosition,
     className: "slide-background"
-  }), /* @__PURE__ */ React22.createElement(Overlay2, {
+  }), /* @__PURE__ */ React24.createElement(Overlay2, {
     enableOverlay,
     overlayOpacity,
     className: "slide-overlay"
-  }), /* @__PURE__ */ React22.createElement("div", {
+  }), /* @__PURE__ */ React24.createElement("div", {
     ref,
-    style,
+    style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : "Add element here"));
+  }, children?.length ? children : /* @__PURE__ */ React24.createElement(Placeholder_default, {
+    element: "Slide",
+    className: "wv-slide-placeholder"
+  }, "Drag and drop elements here")));
 });
 var css10 = {
   "@desktop": {
     position: "relative",
     height: "100%",
     width: "1224px",
+    maxWidth: "100%",
     margin: "0 auto",
     display: "flex",
     flexDirection: "column",
-    padding: "100px 20px"
+    padding: "100px 20px",
+    ".wv-slide-placeholder": {
+      height: "200px",
+      zIndex: 1
+    }
   }
 };
 Slide.defaultProps = {
@@ -1372,22 +1525,6 @@ var WeaverseContext = createContext({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/Placeholder.tsx
-import React23, { forwardRef as forwardRef10 } from "react";
-var Placeholder = forwardRef10(
-  (props, ref) => {
-    let { element, children, ...rest } = props;
-    return /* @__PURE__ */ React23.createElement("div", {
-      "data-wv-placeholder": true,
-      ref,
-      ...rest
-    }, /* @__PURE__ */ React23.createElement("div", {
-      style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ React23.createElement("div", null, children));
-  }
-);
-var Placeholder_default = Placeholder;
-
 // src/components/Modal/index.tsx
 var Modal_exports = {};
 __export(Modal_exports, {
@@ -1398,7 +1535,7 @@ __export(Modal_exports, {
   ModalTrigger: () => ModalTrigger
 });
 import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
-import React24, { forwardRef as forwardRef11 } from "react";
+import React25, { forwardRef as forwardRef11 } from "react";
 
 // src/components/Modal/styled.ts
 import { Content, Overlay as Overlay3, Title } from "@radix-ui/react-dialog";
@@ -1484,10 +1621,10 @@ var StyledCloseIcon = styled5("button", {
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-import { useContext as useContext4, useEffect as useEffect3 } from "react";
+import { useContext as useContext5, useEffect as useEffect3 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = useContext4(WeaverseContext);
+  let rootCtx = useContext5(WeaverseContext);
   let toggleRootzIndex = (open2) => {
     let { contentRootElement } = rootCtx;
     if (contentRootElement) {
@@ -1513,7 +1650,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ React24.createElement(Root, {
+  return /* @__PURE__ */ React25.createElement(Root, {
     open,
     defaultOpen,
     onOpenChange: handleOpenChange,
@@ -1524,7 +1661,7 @@ var ModalTrigger = Trigger;
 var ModalHeader = forwardRef11(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ React24.createElement(StyledTitle, {
+    return /* @__PURE__ */ React25.createElement(StyledTitle, {
       ref,
       ...rest,
       "data-wv-modal-header": true
@@ -1534,17 +1671,17 @@ var ModalHeader = forwardRef11(
 var ModalContent = forwardRef11(
   (props, ref) => {
     let { children, size, portal, ...rest } = props;
-    let modalContent = /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(StyledOverlay2, null), /* @__PURE__ */ React24.createElement(StyledContent, {
+    let modalContent = /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(StyledOverlay2, null), /* @__PURE__ */ React25.createElement(StyledContent, {
       ...rest,
       onCloseAutoFocus: (e) => e.preventDefault(),
       "data-wv-modal": true,
       "data-size": size,
       ref
-    }, /* @__PURE__ */ React24.createElement(ModalClose, null), /* @__PURE__ */ React24.createElement("div", {
+    }, /* @__PURE__ */ React25.createElement(ModalClose, null), /* @__PURE__ */ React25.createElement("div", {
       className: "wv-modal-content"
     }, children)));
     if (portal) {
-      return /* @__PURE__ */ React24.createElement(Portal, null, modalContent);
+      return /* @__PURE__ */ React25.createElement(Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1556,10 +1693,10 @@ ModalContent.defaultProps = {
 var ModalClose = forwardRef11(
   (props, ref) => {
     let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ React24.createElement(StyledCloseIcon, null, /* @__PURE__ */ React24.createElement(Icon, {
+    let closeIcon = /* @__PURE__ */ React25.createElement(StyledCloseIcon, null, /* @__PURE__ */ React25.createElement(Icon, {
       name: "X"
     }));
-    return /* @__PURE__ */ React24.createElement(Close, {
+    return /* @__PURE__ */ React25.createElement(Close, {
       asChild: true,
       ...rest,
       ref
@@ -1568,29 +1705,30 @@ var ModalClose = forwardRef11(
 );
 
 // src/components/Spinner.tsx
-import React25 from "react";
+import React26 from "react";
 function Spinner() {
-  return /* @__PURE__ */ React25.createElement("span", {
+  return /* @__PURE__ */ React26.createElement("span", {
     className: "wv-spinner-wrapper"
-  }, /* @__PURE__ */ React25.createElement(Icon, {
+  }, /* @__PURE__ */ React26.createElement(Icon, {
     name: "CircleNotch",
     className: "wv-spinner"
   }));
 }
 
 // src/components/Tooltip.tsx
-import React26 from "react";
+import React27 from "react";
 function Tooltip({ children }) {
-  return /* @__PURE__ */ React26.createElement("span", {
+  return /* @__PURE__ */ React27.createElement("span", {
     className: "wv-tooltip"
   }, children);
 }
 
 // src/components/Slider/index.tsx
-import clsx5 from "clsx";
+import clsx6 from "clsx";
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
-import React27, { useState as useState2 } from "react";
-function Slider({ children, className, gap }) {
+import React28, { useState as useState2 } from "react";
+function Slider(props) {
+  let { children, className, gap, arrowOffset } = props;
   let [currentSlide, setCurrentSlide] = useState2(0);
   let [created, setCreated] = useState2(false);
   let [ref, instanceRef] = useKeenSlider2(
@@ -1616,18 +1754,19 @@ function Slider({ children, className, gap }) {
     },
     [ResizePlugin]
   );
-  let _className = clsx5("keen-slider", className);
-  let arrowsClass = clsx5(className && `${className}-arrows`);
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", {
+  let _className = clsx6("keen-slider", className);
+  let arrowsClass = clsx6(className && `${className}-arrows`);
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", {
     ref,
     className: _className
-  }, /* @__PURE__ */ React27.createElement("link", {
+  }, /* @__PURE__ */ React28.createElement("link", {
     rel: "stylesheet",
     href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
-  }), children), created && instanceRef?.current && /* @__PURE__ */ React27.createElement(Arrows, {
+  }), children), created && instanceRef?.current && /* @__PURE__ */ React28.createElement(Arrows, {
     currentSlide,
     instanceRef,
-    className: arrowsClass
+    className: arrowsClass,
+    offset: arrowOffset
   }));
 }
 
@@ -1642,10 +1781,16 @@ var Components = {
   Slider,
   Tooltip
 };
+var SliderComponents = {
+  Arrows,
+  Dots,
+  ResizePlugin,
+  AutoplayPlugin
+};
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React28, { useContext as useContext5, useEffect as useEffect5, useRef, useState as useState3 } from "react";
+import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
@@ -1660,20 +1805,20 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ React28.createElement("div", {
+    return /* @__PURE__ */ React29.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ React28.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ React29.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ React28.createElement(ItemInstance, {
+    }, /* @__PURE__ */ React29.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
   let [data, setData] = useState3(instance.data);
   let { id, type, childIds = [], css: css11, className, ...rest } = data;
   useEffect5(() => {
@@ -1692,13 +1837,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React28.createElement(Component, {
+    return /* @__PURE__ */ React29.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React28.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React29.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1708,15 +1853,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext5(WeaverseContext);
+  let context = useContext6(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React28.createElement("div", {
+    return /* @__PURE__ */ React29.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React28.createElement(ItemComponent, {
+  return /* @__PURE__ */ React29.createElement(ItemComponent, {
     key: id,
     instance
   });
@@ -1724,6 +1869,7 @@ var ItemInstance = ({ id }) => {
 export {
   Components,
   Elements,
+  SliderComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,