@weaverse/react 0.7.58 → 0.7.59

package/dist/index.js

@@ -29,6 +29,7 @@ var src_exports = {};
 __export(src_exports, {
   Components: () => Components,
   Elements: () => Elements,
+  SliderComponents: () => SliderComponents,
   WeaverseContext: () => WeaverseContext,
   WeaverseContextConsumer: () => WeaverseContextConsumer,
   WeaverseContextProvider: () => WeaverseContextProvider,
@@ -40,7 +41,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react27 = require("react");
+var import_react30 = require("react");
 
 // src/elements/Button.tsx
 var React = __toESM(require("react"));
@@ -520,6 +521,7 @@ var Text = React10.forwardRef(
 );
 var css7 = {
   "@desktop": {
+    display: "flex",
     padding: "10px",
     overflow: "hidden",
     ".wv-text-content": {
@@ -657,8 +659,9 @@ Video.defaultProps = {
 var Video_default = Video;
 
 // src/elements/Slideshow/index.tsx
-var import_react20 = require("keen-slider/react");
-var import_react21 = __toESM(require("react"));
+var import_react22 = require("@stitches/react");
+var import_clsx5 = __toESM(require("clsx"));
+var import_react23 = __toESM(require("react"));
 
 // src/components/Slider/Arrows.tsx
 var import_react16 = require("@stitches/react");
@@ -924,25 +927,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 = (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"
-  );
+  let style = {
+    "--offset": `${offset}px`
+  };
   return /* @__PURE__ */ import_react17.default.createElement(StyledArrows, {
-    className
+    className,
+    style
   }, /* @__PURE__ */ import_react17.default.createElement("button", {
     type: "button",
-    className: arrowLeftClass,
+    className: (0, import_clsx2.default)("arrow arrow--left", isFirst && "arrow--disabled"),
     onClick: (e) => {
       e.stopPropagation();
       instanceRef?.current?.prev();
@@ -951,7 +950,7 @@ function Arrows(props) {
     name: "ArrowLeft"
   })), /* @__PURE__ */ import_react17.default.createElement("button", {
     type: "button",
-    className: arrowRightClass,
+    className: (0, import_clsx2.default)("arrow arrow--right", isLast && "arrow--disabled"),
     onClick: (e) => {
       e.stopPropagation();
       instanceRef?.current?.next();
@@ -961,7 +960,7 @@ function Arrows(props) {
   })));
 }
 var StyledArrows = (0, import_react16.styled)("div", {
-  ".wv-slider-arrow": {
+  ".arrow": {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -985,17 +984,17 @@ var StyledArrows = (0, import_react16.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"
     }
   }
@@ -1006,9 +1005,15 @@ 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;
+  let { currentSlide, instanceRef, className, absolute, position, color } = props;
+  let _className = (0, import_clsx3.default)(
+    className,
+    absolute && "dots--absolute",
+    position && `dots--${position}`,
+    color && `dots--${color}`
+  );
   return /* @__PURE__ */ import_react19.default.createElement(StyledDots, {
-    className
+    className: _className
   }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
     (idx) => {
       let className2 = (0, import_clsx3.default)("dot", currentSlide === idx && "dot--active");
@@ -1023,22 +1028,86 @@ function Dots(props) {
 }
 var StyledDots = (0, import_react18.styled)("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
+var import_react20 = require("keen-slider/react");
+var import_react21 = __toESM(require("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());
@@ -1098,37 +1167,46 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/index.tsx
-var Slideshow = (0, import_react21.forwardRef)((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 } = (0, import_react21.useContext)(WeaverseContext);
+  let [opacities, setOpacities] = import_react21.default.useState([]);
   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 sliderPlugins = [ResizePlugin];
+  if (autoRotate && !isDesignMode) {
+    sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
+  }
   let [sliderRef, instanceRef] = (0, import_react20.useKeenSlider)(
     {
-      slides: {
-        perView: slidesPerView
-      },
+      slides: animation === "fade" ? import_react21.default.Children.count(children) : { perView: slidesPerView },
+      drag: !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
   );
   (0, import_react21.useEffect)(() => {
     loadCSS({
@@ -1141,53 +1219,105 @@ var Slideshow = (0, import_react21.forwardRef)((props, ref) => {
       setReady(true);
     }
   }, [created, cssLoaded]);
+  return {
+    sliderRef,
+    instanceRef,
+    currentSlide,
+    opacities,
+    ready,
+    created
+  };
+}
+
+// src/elements/Slideshow/index.tsx
+var Slideshow = (0, import_react23.forwardRef)((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__ */ import_react21.default.createElement("div", {
+  let faderClass = "";
+  if (animation === "fade") {
+    faderClass = (0, import_react22.css)({
+      ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
+        acc[`&:nth-child(${index + 1})`] = {
+          opacity
+        };
+        return acc;
+      }, {})
+    })().className;
+  }
+  let _className = (0, import_clsx5.default)(
+    faderClass,
+    animation === "slide" ? "keen-slider" : "keen-fader"
+  );
+  return /* @__PURE__ */ import_react23.default.createElement("div", {
     ref,
     style,
     ...rest
-  }, /* @__PURE__ */ import_react21.default.createElement("div", {
+  }, /* @__PURE__ */ import_react23.default.createElement("div", {
     ref: sliderRef,
-    className: "keen-slider"
-  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react21.default.createElement(Arrows, {
+    className: _className
+  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.createElement(Arrows, {
     instanceRef,
     currentSlide,
-    className: "wv-slideshow--arrows"
-  }), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react21.default.createElement(Dots, {
+    className: "wv-slideshow--arrows",
+    offset: 20
+  }), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.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
-var import_react26 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/components/Background.tsx
-var import_react22 = require("@stitches/react");
-var import_react23 = __toESM(require("react"));
+var import_react24 = require("@stitches/react");
+var import_react25 = __toESM(require("react"));
 function Background2(props) {
   let {
     backgroundColor,
@@ -1202,10 +1332,10 @@ function Background2(props) {
     ["--bg-position"]: backgroundPosition
   };
   if (backgroundImage || backgroundColor) {
-    return /* @__PURE__ */ import_react23.default.createElement(StyledBackground, {
+    return /* @__PURE__ */ import_react25.default.createElement(StyledBackground, {
       style,
       className
-    }, backgroundImage && /* @__PURE__ */ import_react23.default.createElement("img", {
+    }, backgroundImage && /* @__PURE__ */ import_react25.default.createElement("img", {
       width: "100%",
       height: "100%",
       "data-blink-src": backgroundImage,
@@ -1214,7 +1344,7 @@ function Background2(props) {
   }
   return null;
 }
-var StyledBackground = (0, import_react22.styled)("div", {
+var StyledBackground = (0, import_react24.styled)("div", {
   display: "block !important",
   position: "absolute",
   inset: 0,
@@ -1226,25 +1356,42 @@ var StyledBackground = (0, import_react22.styled)("div", {
 });
 
 // src/components/Overlay.tsx
-var import_react24 = require("@stitches/react");
-var import_react25 = __toESM(require("react"));
+var import_react26 = require("@stitches/react");
+var import_react27 = __toESM(require("react"));
 function Overlay2(props) {
   let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
   if (enabled) {
-    return /* @__PURE__ */ import_react25.default.createElement(StyledOverlay, {
+    return /* @__PURE__ */ import_react27.default.createElement(StyledOverlay, {
       className,
       css: { ["--overlay-opacity"]: opacity / 100 }
     });
   }
   return null;
 }
-var StyledOverlay = (0, import_react24.styled)("div", {
+var StyledOverlay = (0, import_react26.styled)("div", {
   display: "block !important",
   position: "absolute",
   inset: 0,
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
+// src/components/Placeholder.tsx
+var import_react28 = __toESM(require("react"));
+var Placeholder = (0, import_react28.forwardRef)(
+  (props, ref) => {
+    let { element, className, children, ...rest } = props;
+    return /* @__PURE__ */ import_react28.default.createElement("div", {
+      "data-wv-placeholder": true,
+      ref,
+      className,
+      ...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/elements/Slideshow/position.ts
 var slidePositionMap = {
   "top left": {
@@ -1286,7 +1433,7 @@ var slidePositionMap = {
 };
 
 // src/elements/Slideshow/Slide.tsx
-var Slide = (0, import_react26.forwardRef)((props, ref) => {
+var Slide = (0, import_react29.forwardRef)((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -1298,34 +1445,41 @@ var Slide = (0, import_react26.forwardRef)((props, ref) => {
     children,
     ...rest
   } = props;
-  let style = slidePositionMap[contentPosition];
-  return /* @__PURE__ */ import_react26.default.createElement("div", {
+  return /* @__PURE__ */ import_react29.default.createElement("div", {
     className: "keen-slider__slide"
-  }, /* @__PURE__ */ import_react26.default.createElement(Background2, {
+  }, /* @__PURE__ */ import_react29.default.createElement(Background2, {
     backgroundColor,
     backgroundImage,
     backgroundFit,
     backgroundPosition,
     className: "slide-background"
-  }), /* @__PURE__ */ import_react26.default.createElement(Overlay2, {
+  }), /* @__PURE__ */ import_react29.default.createElement(Overlay2, {
     enableOverlay,
     overlayOpacity,
     className: "slide-overlay"
-  }), /* @__PURE__ */ import_react26.default.createElement("div", {
+  }), /* @__PURE__ */ import_react29.default.createElement("div", {
     ref,
-    style,
+    style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : "Add element here"));
+  }, children?.length ? children : /* @__PURE__ */ import_react29.default.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 = {
@@ -1399,26 +1553,10 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react27.createContext)({});
+var WeaverseContext = (0, import_react30.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, {
@@ -1429,20 +1567,20 @@ __export(Modal_exports, {
   ModalTrigger: () => ModalTrigger
 });
 var import_react_dialog2 = require("@radix-ui/react-dialog");
-var import_react31 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/components/Modal/styled.ts
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_react29 = require("@stitches/react");
-var overlayShow = (0, import_react29.keyframes)({
+var import_react31 = require("@stitches/react");
+var overlayShow = (0, import_react31.keyframes)({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-var contentShow = (0, import_react29.keyframes)({
+var contentShow = (0, import_react31.keyframes)({
   "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
   "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
 });
-var StyledOverlay2 = (0, import_react29.styled)(import_react_dialog.Overlay, {
+var StyledOverlay2 = (0, import_react31.styled)(import_react_dialog.Overlay, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
@@ -1450,7 +1588,7 @@ var StyledOverlay2 = (0, import_react29.styled)(import_react_dialog.Overlay, {
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
-var StyledTitle = (0, import_react29.styled)(import_react_dialog.Title, {
+var StyledTitle = (0, import_react31.styled)(import_react_dialog.Title, {
   margin: "0 0 24px",
   fontWeight: 500,
   fontSize: 24,
@@ -1459,7 +1597,7 @@ var StyledTitle = (0, import_react29.styled)(import_react_dialog.Title, {
     fontSize: 20
   }
 });
-var StyledContent = (0, import_react29.styled)(import_react_dialog.Content, {
+var StyledContent = (0, import_react31.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",
@@ -1490,7 +1628,7 @@ var StyledContent = (0, import_react29.styled)(import_react_dialog.Content, {
     }
   }
 });
-var StyledCloseIcon = (0, import_react29.styled)("button", {
+var StyledCloseIcon = (0, import_react31.styled)("button", {
   all: "unset",
   cursor: "pointer",
   fontFamily: "inherit",
@@ -1515,10 +1653,10 @@ var StyledCloseIcon = (0, import_react29.styled)("button", {
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-var import_react30 = require("react");
+var import_react32 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = (0, import_react30.useContext)(WeaverseContext);
+  let rootCtx = (0, import_react32.useContext)(WeaverseContext);
   let toggleRootzIndex = (open2) => {
     let { contentRootElement } = rootCtx;
     if (contentRootElement) {
@@ -1529,7 +1667,7 @@ function useOpenChangeEffect(props) {
       }
     }
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     let isOpen = open || defaultOpen;
     toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
@@ -1544,7 +1682,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Root, {
+  return /* @__PURE__ */ import_react33.default.createElement(import_react_dialog2.Root, {
     open,
     defaultOpen,
     onOpenChange: handleOpenChange,
@@ -1552,30 +1690,30 @@ var Modal = (props) => {
   }, children);
 };
 var ModalTrigger = import_react_dialog2.Trigger;
-var ModalHeader = (0, import_react31.forwardRef)(
+var ModalHeader = (0, import_react33.forwardRef)(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react31.default.createElement(StyledTitle, {
+    return /* @__PURE__ */ import_react33.default.createElement(StyledTitle, {
       ref,
       ...rest,
       "data-wv-modal-header": true
     }, children);
   }
 );
-var ModalContent = (0, import_react31.forwardRef)(
+var ModalContent = (0, import_react33.forwardRef)(
   (props, ref) => {
     let { children, size, portal, ...rest } = props;
-    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, {
+    let modalContent = /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(StyledOverlay2, null), /* @__PURE__ */ import_react33.default.createElement(StyledContent, {
       ...rest,
       onCloseAutoFocus: (e) => e.preventDefault(),
       "data-wv-modal": true,
       "data-size": size,
       ref
-    }, /* @__PURE__ */ import_react31.default.createElement(ModalClose, null), /* @__PURE__ */ import_react31.default.createElement("div", {
+    }, /* @__PURE__ */ import_react33.default.createElement(ModalClose, null), /* @__PURE__ */ import_react33.default.createElement("div", {
       className: "wv-modal-content"
     }, children)));
     if (portal) {
-      return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Portal, null, modalContent);
+      return /* @__PURE__ */ import_react33.default.createElement(import_react_dialog2.Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1584,13 +1722,13 @@ ModalContent.defaultProps = {
   size: "auto",
   portal: false
 };
-var ModalClose = (0, import_react31.forwardRef)(
+var ModalClose = (0, import_react33.forwardRef)(
   (props, ref) => {
     let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ import_react31.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react31.default.createElement(Icon, {
+    let closeIcon = /* @__PURE__ */ import_react33.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react33.default.createElement(Icon, {
       name: "X"
     }));
-    return /* @__PURE__ */ import_react31.default.createElement(import_react_dialog2.Close, {
+    return /* @__PURE__ */ import_react33.default.createElement(import_react_dialog2.Close, {
       asChild: true,
       ...rest,
       ref
@@ -1599,32 +1737,33 @@ var ModalClose = (0, import_react31.forwardRef)(
 );
 
 // src/components/Spinner.tsx
-var import_react32 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 function Spinner() {
-  return /* @__PURE__ */ import_react32.default.createElement("span", {
+  return /* @__PURE__ */ import_react34.default.createElement("span", {
     className: "wv-spinner-wrapper"
-  }, /* @__PURE__ */ import_react32.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react34.default.createElement(Icon, {
     name: "CircleNotch",
     className: "wv-spinner"
   }));
 }
 
 // src/components/Tooltip.tsx
-var import_react33 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 function Tooltip({ children }) {
-  return /* @__PURE__ */ import_react33.default.createElement("span", {
+  return /* @__PURE__ */ import_react35.default.createElement("span", {
     className: "wv-tooltip"
   }, children);
 }
 
 // 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_react35.useState)(0);
-  let [created, setCreated] = (0, import_react35.useState)(false);
-  let [ref, instanceRef] = (0, import_react34.useKeenSlider)(
+var import_clsx6 = __toESM(require("clsx"));
+var import_react36 = require("keen-slider/react");
+var import_react37 = __toESM(require("react"));
+function Slider(props) {
+  let { children, className, gap, arrowOffset } = props;
+  let [currentSlide, setCurrentSlide] = (0, import_react37.useState)(0);
+  let [created, setCreated] = (0, import_react37.useState)(false);
+  let [ref, instanceRef] = (0, import_react36.useKeenSlider)(
     {
       slides: { perView: 4, spacing: gap },
       breakpoints: {
@@ -1647,18 +1786,19 @@ function Slider({ children, className, gap }) {
     },
     [ResizePlugin]
   );
-  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", {
+  let _className = (0, import_clsx6.default)("keen-slider", className);
+  let arrowsClass = (0, import_clsx6.default)(className && `${className}-arrows`);
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", {
     ref,
     className: _className
-  }, /* @__PURE__ */ import_react35.default.createElement("link", {
+  }, /* @__PURE__ */ import_react37.default.createElement("link", {
     rel: "stylesheet",
     href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
-  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(Arrows, {
+  }), children), created && instanceRef?.current && /* @__PURE__ */ import_react37.default.createElement(Arrows, {
     currentSlide,
     instanceRef,
-    className: arrowsClass
+    className: arrowsClass,
+    offset: arrowOffset
   }));
 }
 
@@ -1673,15 +1813,21 @@ var Components = {
   Slider,
   Tooltip
 };
+var SliderComponents = {
+  Arrows,
+  Dots,
+  ResizePlugin,
+  AutoplayPlugin
+};
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react36 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react36.useState)(context.projectData);
-  let rootRef = (0, import_react36.useRef)();
+  let [, setData] = (0, import_react38.useState)(context.projectData);
+  let rootRef = (0, import_react38.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1691,23 +1837,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react36.default.createElement("div", {
+    return /* @__PURE__ */ import_react38.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react36.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react38.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react36.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react38.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react36.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react36.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react38.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react38.useState)(instance.data);
   let { id, type, childIds = [], css: css11, className, ...rest } = data;
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -1723,13 +1869,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react36.default.createElement(Component, {
+    return /* @__PURE__ */ import_react38.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react36.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1739,15 +1885,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react36.useContext)(WeaverseContext);
+  let context = (0, import_react38.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react36.default.createElement("div", {
+    return /* @__PURE__ */ import_react38.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react36.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, {
     key: id,
     instance
   });
@@ -1756,6 +1902,7 @@ var ItemInstance = ({ id }) => {
 0 && (module.exports = {
   Components,
   Elements,
+  SliderComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,