@weaverse/react 0.7.56 → 0.7.58

package/dist/index.mjs

@@ -87,42 +87,6 @@ import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect
 // 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
-import clsx from "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 = clsx(permanentClass, cls, newStitchesClass, otherClass);
-    instance.stitchesClass = newStitchesClass;
-  }
-  return className;
-}
 
 // src/utils/index.ts
 function getTime(_seconds) {
@@ -239,7 +203,6 @@ var Countdown = forwardRef3(
 );
 var css3 = {
   "@desktop": {
-    fontFamily: "Inter",
     fontSize: "36px",
     fontWeight: 500,
     display: "flex",
@@ -330,7 +293,7 @@ Image.defaultProps = {
   src: "https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",
   alt: "Image alt text",
   objectFit: "cover",
-  objectPosition: "center",
+  objectPosition: "center center",
   clickAction: "none",
   openLinkInNewTab: false,
   linkTo: ""
@@ -468,7 +431,11 @@ Layout.defaultProps = {
   rows: 16,
   columns: 12,
   gap: 16,
-  rowSize: 48
+  rowSize: 48,
+  objectFit: "cover",
+  objectPosition: "center center",
+  enableOverlay: false,
+  overlayOpacity: 30
 };
 var Layout_default = Layout;
 
@@ -658,39 +625,17 @@ Video.defaultProps = {
 };
 var Video_default = Video;
 
-// src/elements/Instagram.tsx
-import React23, { forwardRef as forwardRef10, useEffect as useEffect4, useState as useState2 } from "react";
-
-// src/components/Placeholder.tsx
-import React15, { forwardRef as forwardRef8 } from "react";
-var Placeholder = forwardRef8(
-  (props, ref) => {
-    let { element, children, ...rest } = props;
-    return /* @__PURE__ */ React15.createElement("div", {
-      "data-wv-placeholder": true,
-      ref,
-      ...rest
-    }, /* @__PURE__ */ React15.createElement("div", {
-      style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ React15.createElement("div", null, children));
-  }
-);
-var Placeholder_default = Placeholder;
+// src/elements/Slideshow/index.tsx
+import { useKeenSlider } from "keen-slider/react";
+import React19, { forwardRef as forwardRef8, useEffect as useEffect2, useState } from "react";
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
-  Modal: () => Modal,
-  ModalClose: () => ModalClose,
-  ModalContent: () => ModalContent,
-  ModalHeader: () => ModalHeader,
-  ModalTrigger: () => ModalTrigger
-});
-import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
-import React18, { forwardRef as forwardRef9 } from "react";
+// src/components/Slider/Arrows.tsx
+import { styled } from "@stitches/react";
+import clsx2 from "clsx";
+import React17 from "react";
 
 // src/components/Icons/index.tsx
-import React17 from "react";
+import React16 from "react";
 
 // src/components/Icons/Phosphor.tsx
 var Phosphor_exports = {};
@@ -705,39 +650,39 @@ __export(Phosphor_exports, {
   ShoppingCart: () => ShoppingCart,
   X: () => X
 });
-import React16 from "react";
+import React15 from "react";
 var CircleNotch = (props) => {
-  return /* @__PURE__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     ...props
-  }, /* @__PURE__ */ React16.createElement("circle", {
+  }, /* @__PURE__ */ React15.createElement("circle", {
     style: { opacity: ".25" },
     cx: "12",
     cy: "12",
     r: "10",
     stroke: "currentColor",
     strokeWidth: "4"
-  }), /* @__PURE__ */ React16.createElement("path", {
+  }), /* @__PURE__ */ React15.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__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ React16.createElement("rect", {
+  }, /* @__PURE__ */ React15.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ React16.createElement("line", {
+  }), /* @__PURE__ */ React15.createElement("line", {
     x1: "200",
     y1: "56",
     x2: "56",
@@ -747,7 +692,7 @@ var X = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "12"
-  }), /* @__PURE__ */ React16.createElement("line", {
+  }), /* @__PURE__ */ React15.createElement("line", {
     x1: "200",
     y1: "200",
     x2: "56",
@@ -760,7 +705,7 @@ var X = (props) => {
   }));
 };
 var Minus = (props) => {
-  return /* @__PURE__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     width: "196",
     height: "196",
     fill: "currentColor",
@@ -768,12 +713,12 @@ var Minus = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512",
     ...props
-  }, /* @__PURE__ */ React16.createElement("path", {
+  }, /* @__PURE__ */ React15.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__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     width: "196",
     height: "196",
     fill: "currentColor",
@@ -781,23 +726,23 @@ var Plus = (props) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 384 512",
     ...props
-  }, /* @__PURE__ */ React16.createElement("path", {
+  }, /* @__PURE__ */ React15.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__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ React16.createElement("rect", {
+  }, /* @__PURE__ */ React15.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ React16.createElement("line", {
+  }), /* @__PURE__ */ React15.createElement("line", {
     x1: "216",
     y1: "128",
     x2: "40",
@@ -807,7 +752,7 @@ var ArrowLeft = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ React16.createElement("polyline", {
+  }), /* @__PURE__ */ React15.createElement("polyline", {
     points: "112 56 40 128 112 200",
     fill: "none",
     stroke: "currentColor",
@@ -817,18 +762,18 @@ var ArrowLeft = (props) => {
   }));
 };
 var ArrowRight = (props) => {
-  return /* @__PURE__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ React16.createElement("rect", {
+  }, /* @__PURE__ */ React15.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ React16.createElement("line", {
+  }), /* @__PURE__ */ React15.createElement("line", {
     x1: "40",
     y1: "128",
     x2: "216",
@@ -838,7 +783,7 @@ var ArrowRight = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ React16.createElement("polyline", {
+  }), /* @__PURE__ */ React15.createElement("polyline", {
     points: "144 56 216 128 144 200",
     fill: "none",
     stroke: "currentColor",
@@ -848,36 +793,36 @@ var ArrowRight = (props) => {
   }));
 };
 var Image2 = (props) => {
-  return /* @__PURE__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
     fill: "currentColor",
     viewBox: "0 0 640 512",
     ...props
-  }, /* @__PURE__ */ React16.createElement("path", {
+  }, /* @__PURE__ */ React15.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__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ React16.createElement("rect", {
+  }, /* @__PURE__ */ React15.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ React16.createElement("path", {
+  }), /* @__PURE__ */ React15.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__ */ React16.createElement("circle", {
+  }), /* @__PURE__ */ React15.createElement("circle", {
     cx: "80",
     cy: "204",
     r: "20",
@@ -886,7 +831,7 @@ var ShoppingCart = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ React16.createElement("circle", {
+  }), /* @__PURE__ */ React15.createElement("circle", {
     cx: "184",
     cy: "204",
     r: "20",
@@ -895,7 +840,7 @@ var ShoppingCart = (props) => {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "16"
-  }), /* @__PURE__ */ React16.createElement("path", {
+  }), /* @__PURE__ */ React15.createElement("path", {
     d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
     fill: "none",
     stroke: "currentColor",
@@ -905,25 +850,25 @@ var ShoppingCart = (props) => {
   }));
 };
 var Eye = (props) => {
-  return /* @__PURE__ */ React16.createElement("svg", {
+  return /* @__PURE__ */ React15.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "192",
     height: "192",
     fill: "currentColor",
     viewBox: "0 0 256 256",
     ...props
-  }, /* @__PURE__ */ React16.createElement("rect", {
+  }, /* @__PURE__ */ React15.createElement("rect", {
     width: "256",
     height: "256",
     fill: "none"
-  }), /* @__PURE__ */ React16.createElement("path", {
+  }), /* @__PURE__ */ React15.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__ */ React16.createElement("circle", {
+  }), /* @__PURE__ */ React15.createElement("circle", {
     cx: "128",
     cy: "128",
     r: "40",
@@ -936,19 +881,528 @@ var Eye = (props) => {
 };
 
 // src/components/Icons/index.tsx
-import clsx2 from "clsx";
+import clsx from "clsx";
 function Icon({ name, className, ...props }) {
   let WeaverseIcon = Phosphor_exports[name];
-  let cls = clsx2("wv-icon", className);
-  return /* @__PURE__ */ React17.createElement(WeaverseIcon, {
+  let cls = clsx("wv-icon", className);
+  return /* @__PURE__ */ React16.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 = clsx2(
+    "wv-slider-arrow arrow--left",
+    isFirstSlide && "arrow--disabled"
+  );
+  let arrowRightClass = clsx2(
+    "wv-slider-arrow arrow--right",
+    isLastSlide && "arrow--disabled"
+  );
+  return /* @__PURE__ */ React17.createElement(StyledArrows, {
+    className
+  }, /* @__PURE__ */ React17.createElement("button", {
+    type: "button",
+    className: arrowLeftClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.prev();
+    }
+  }, /* @__PURE__ */ React17.createElement(Icon, {
+    name: "ArrowLeft"
+  })), /* @__PURE__ */ React17.createElement("button", {
+    type: "button",
+    className: arrowRightClass,
+    onClick: (e) => {
+      e.stopPropagation();
+      instanceRef?.current?.next();
+    }
+  }, /* @__PURE__ */ React17.createElement(Icon, {
+    name: "ArrowRight"
+  })));
+}
+var StyledArrows = 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
+import { styled as styled2 } from "@stitches/react";
+import clsx3 from "clsx";
+import React18 from "react";
+function Dots(props) {
+  let { currentSlide, instanceRef, className } = props;
+  return /* @__PURE__ */ React18.createElement(StyledDots, {
+    className
+  }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+    (idx) => {
+      let className2 = clsx3("dot", currentSlide === idx && "dot--active");
+      return /* @__PURE__ */ React18.createElement("button", {
+        key: idx,
+        type: "button",
+        onClick: () => instanceRef.current?.moveToIdx(idx),
+        className: className2
+      });
+    }
+  ));
+}
+var StyledDots = styled2("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
+import clsx4 from "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 = clsx4(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 = forwardRef8((props, ref) => {
+  let {
+    animation,
+    slidesPerView,
+    spacing,
+    showArrows,
+    showDots,
+    dotsPosition,
+    autoRotate,
+    changeSlidesEvery,
+    children,
+    ...rest
+  } = props;
+  let [cssLoaded, setCssLoaded] = useState(false);
+  let [created, setCreated] = useState(false);
+  let [ready, setReady] = useState(false);
+  let [currentSlide, setCurrentSlide] = useState(0);
+  let [sliderRef, instanceRef] = useKeenSlider(
+    {
+      slides: {
+        perView: slidesPerView
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
+      }
+    },
+    [ResizePlugin]
+  );
+  useEffect2(() => {
+    loadCSS({
+      rel: "stylesheet",
+      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+    }).then(() => setCssLoaded(true));
+  }, []);
+  useEffect2(() => {
+    if (created && cssLoaded) {
+      setReady(true);
+    }
+  }, [created, cssLoaded]);
+  let style = {
+    "--slider-opacity": ready ? 1 : 0
+  };
+  return /* @__PURE__ */ React19.createElement("div", {
+    ref,
+    style,
+    ...rest
+  }, /* @__PURE__ */ React19.createElement("div", {
+    ref: sliderRef,
+    className: "keen-slider"
+  }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React19.createElement(Arrows, {
+    instanceRef,
+    currentSlide,
+    className: "wv-slideshow--arrows"
+  }), showDots && created && instanceRef?.current && /* @__PURE__ */ React19.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
+import React22, { forwardRef as forwardRef9 } from "react";
+
+// src/components/Background.tsx
+import { styled as styled3 } from "@stitches/react";
+import React20 from "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__ */ React20.createElement(StyledBackground, {
+      style,
+      className
+    }, backgroundImage && /* @__PURE__ */ React20.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": backgroundImage,
+      alt: "Background"
+    }));
+  }
+  return null;
+}
+var StyledBackground = styled3("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
+import { styled as styled4 } from "@stitches/react";
+import React21 from "react";
+function Overlay2(props) {
+  let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
+  if (enabled) {
+    return /* @__PURE__ */ React21.createElement(StyledOverlay, {
+      className,
+      css: { ["--overlay-opacity"]: opacity / 100 }
+    });
+  }
+  return null;
+}
+var StyledOverlay = styled4("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 = forwardRef9((props, ref) => {
+  let {
+    contentPosition,
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    enableOverlay,
+    overlayOpacity,
+    children,
+    ...rest
+  } = props;
+  let style = slidePositionMap[contentPosition];
+  return /* @__PURE__ */ React22.createElement("div", {
+    className: "keen-slider__slide"
+  }, /* @__PURE__ */ React22.createElement(Background2, {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className: "slide-background"
+  }), /* @__PURE__ */ React22.createElement(Overlay2, {
+    enableOverlay,
+    overlayOpacity,
+    className: "slide-overlay"
+  }), /* @__PURE__ */ React22.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 Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/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, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
+import React24, { forwardRef as forwardRef11 } from "react";
+
 // src/components/Modal/styled.ts
-import { Content, Overlay as Overlay2, Title } from "@radix-ui/react-dialog";
-import { keyframes, styled } from "@stitches/react";
+import { Content, Overlay as Overlay3, Title } from "@radix-ui/react-dialog";
+import { keyframes, styled as styled5 } from "@stitches/react";
 var overlayShow = keyframes({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
@@ -957,7 +1411,7 @@ var contentShow = keyframes({
   "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
   "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
 });
-var StyledOverlay = styled(Overlay2, {
+var StyledOverlay2 = styled5(Overlay3, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
@@ -965,7 +1419,7 @@ var StyledOverlay = styled(Overlay2, {
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
-var StyledTitle = styled(Title, {
+var StyledTitle = styled5(Title, {
   margin: "0 0 24px",
   fontWeight: 500,
   fontSize: 24,
@@ -974,7 +1428,7 @@ var StyledTitle = styled(Title, {
     fontSize: 20
   }
 });
-var StyledContent = styled(Content, {
+var StyledContent = styled5(Content, {
   backgroundColor: "white",
   borderRadius: 6,
   boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
@@ -1005,7 +1459,7 @@ var StyledContent = styled(Content, {
     }
   }
 });
-var StyledCloseIcon = styled("button", {
+var StyledCloseIcon = styled5("button", {
   all: "unset",
   cursor: "pointer",
   fontFamily: "inherit",
@@ -1030,7 +1484,7 @@ var StyledCloseIcon = styled("button", {
 });
 
 // src/components/Modal/useOpenChangeEffect.ts
-import { useContext as useContext4, useEffect as useEffect2 } from "react";
+import { useContext as useContext4, useEffect as useEffect3 } from "react";
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
   let rootCtx = useContext4(WeaverseContext);
@@ -1044,7 +1498,7 @@ function useOpenChangeEffect(props) {
       }
     }
   };
-  useEffect2(() => {
+  useEffect3(() => {
     let isOpen = open || defaultOpen;
     toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
@@ -1059,7 +1513,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ React18.createElement(Root, {
+  return /* @__PURE__ */ React24.createElement(Root, {
     open,
     defaultOpen,
     onOpenChange: handleOpenChange,
@@ -1067,30 +1521,30 @@ var Modal = (props) => {
   }, children);
 };
 var ModalTrigger = Trigger;
-var ModalHeader = forwardRef9(
+var ModalHeader = forwardRef11(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ React18.createElement(StyledTitle, {
+    return /* @__PURE__ */ React24.createElement(StyledTitle, {
       ref,
       ...rest,
       "data-wv-modal-header": true
     }, children);
   }
 );
-var ModalContent = forwardRef9(
+var ModalContent = forwardRef11(
   (props, ref) => {
     let { children, size, portal, ...rest } = props;
-    let modalContent = /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(StyledOverlay, null), /* @__PURE__ */ React18.createElement(StyledContent, {
+    let modalContent = /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(StyledOverlay2, null), /* @__PURE__ */ React24.createElement(StyledContent, {
       ...rest,
       onCloseAutoFocus: (e) => e.preventDefault(),
       "data-wv-modal": true,
       "data-size": size,
       ref
-    }, /* @__PURE__ */ React18.createElement(ModalClose, null), /* @__PURE__ */ React18.createElement("div", {
+    }, /* @__PURE__ */ React24.createElement(ModalClose, null), /* @__PURE__ */ React24.createElement("div", {
       className: "wv-modal-content"
     }, children)));
     if (portal) {
-      return /* @__PURE__ */ React18.createElement(Portal, null, modalContent);
+      return /* @__PURE__ */ React24.createElement(Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1099,13 +1553,13 @@ ModalContent.defaultProps = {
   size: "auto",
   portal: false
 };
-var ModalClose = forwardRef9(
+var ModalClose = forwardRef11(
   (props, ref) => {
     let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ React18.createElement(StyledCloseIcon, null, /* @__PURE__ */ React18.createElement(Icon, {
+    let closeIcon = /* @__PURE__ */ React24.createElement(StyledCloseIcon, null, /* @__PURE__ */ React24.createElement(Icon, {
       name: "X"
     }));
-    return /* @__PURE__ */ React18.createElement(Close, {
+    return /* @__PURE__ */ React24.createElement(Close, {
       asChild: true,
       ...rest,
       ref
@@ -1114,136 +1568,37 @@ var ModalClose = forwardRef9(
 );
 
 // src/components/Spinner.tsx
-import React19 from "react";
+import React25 from "react";
 function Spinner() {
-  return /* @__PURE__ */ React19.createElement("span", {
+  return /* @__PURE__ */ React25.createElement("span", {
     className: "wv-spinner-wrapper"
-  }, /* @__PURE__ */ React19.createElement(Icon, {
+  }, /* @__PURE__ */ React25.createElement(Icon, {
     name: "CircleNotch",
     className: "wv-spinner"
   }));
 }
 
 // src/components/Tooltip.tsx
-import React20 from "react";
+import React26 from "react";
 function Tooltip({ children }) {
-  return /* @__PURE__ */ React20.createElement("span", {
+  return /* @__PURE__ */ React26.createElement("span", {
     className: "wv-tooltip"
   }, children);
 }
 
 // src/components/Slider/index.tsx
-import clsx4 from "clsx";
-import { useKeenSlider } from "keen-slider/react";
-import React22, { useState } from "react";
-
-// src/components/Slider/Arrows.tsx
-import clsx3 from "clsx";
-import React21, { useContext as useContext5 } from "react";
-function Arrows(props) {
-  let { currentSlide, instanceRef, className } = props;
-  let { stitchesInstance } = useContext5(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 = clsx3(className, cssClass);
-  let arrowLeftClass = clsx3(
-    "wv-slider-arrow arrow--left",
-    isFirstSlide && "arrow--disabled"
-  );
-  let arrowRightClass = clsx3(
-    "wv-slider-arrow arrow--right",
-    isLastSlide && "arrow--disabled"
-  );
-  return /* @__PURE__ */ React21.createElement("div", {
-    className: _className
-  }, /* @__PURE__ */ React21.createElement("button", {
-    type: "button",
-    className: arrowLeftClass,
-    onClick: (e) => {
-      e.stopPropagation();
-      instanceRef?.current?.prev();
-    }
-  }, /* @__PURE__ */ React21.createElement(Icon, {
-    name: "ArrowLeft"
-  })), /* @__PURE__ */ React21.createElement("button", {
-    type: "button",
-    className: arrowRightClass,
-    onClick: (e) => {
-      e.stopPropagation();
-      instanceRef?.current?.next();
-    }
-  }, /* @__PURE__ */ React21.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
-function Slider({ children, className }) {
-  let [currentSlide, setCurrentSlide] = useState(0);
-  let [created, setCreated] = useState(false);
-  let [ref, instanceRef] = useKeenSlider(
+import clsx5 from "clsx";
+import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
+import React27, { useState as useState2 } from "react";
+function Slider({ children, className, gap }) {
+  let [currentSlide, setCurrentSlide] = useState2(0);
+  let [created, setCreated] = useState2(false);
+  let [ref, instanceRef] = useKeenSlider2(
     {
-      slides: { perView: 4, spacing: 16 },
+      slides: { perView: 4, spacing: gap },
       breakpoints: {
         "(max-width: 1024px)": {
-          slides: { perView: 3, spacing: 16 }
+          slides: { perView: 3, spacing: gap }
         },
         "(max-width: 768px)": {
           slides: {
@@ -1261,15 +1616,15 @@ function Slider({ children, className }) {
     },
     [ResizePlugin]
   );
-  let _className = clsx4("keen-slider", className);
-  let arrowsClass = clsx4(className && `${className}-arrows`);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", {
+  let _className = clsx5("keen-slider", className);
+  let arrowsClass = clsx5(className && `${className}-arrows`);
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", {
     ref,
     className: _className
-  }, /* @__PURE__ */ React22.createElement("link", {
+  }, /* @__PURE__ */ React27.createElement("link", {
     rel: "stylesheet",
     href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
-  }), children), created && instanceRef?.current && /* @__PURE__ */ React22.createElement(Arrows, {
+  }), children), created && instanceRef?.current && /* @__PURE__ */ React27.createElement(Arrows, {
     currentSlide,
     instanceRef,
     className: arrowsClass
@@ -1278,152 +1633,19 @@ function Slider({ children, className }) {
 
 // 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 = forwardRef10(
-  (props, ref) => {
-    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = useState2([]);
-    let [error, setError] = useState2(null);
-    useEffect4(() => {
-      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__ */ React23.createElement("div", {
-        ref,
-        ...rest
-      }, /* @__PURE__ */ React23.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__ */ React23.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, /* @__PURE__ */ React23.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__ */ React23.createElement("video", {
-          key: id,
-          controls: true,
-          poster: thumbnail_url
-        }, /* @__PURE__ */ React23.createElement("source", {
-          src: media_url,
-          type: "video/mp4"
-        }));
-      }
-      return /* @__PURE__ */ React23.createElement("a", {
-        key: id,
-        href: permalink,
-        target: "_blank",
-        rel: "noreferrer"
-      }, /* @__PURE__ */ React23.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 Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React24, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState3 } from "react";
+import React28, { useContext as useContext5, useEffect as useEffect5, useRef, useState as useState3 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
@@ -1438,22 +1660,22 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ React24.createElement("div", {
+    return /* @__PURE__ */ React28.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ React24.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ React28.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ React24.createElement(ItemInstance, {
+    }, /* @__PURE__ */ React28.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
   let [data, setData] = useState3(instance.data);
-  let { id, type, childIds = [], css: css10, className, ...rest } = data;
+  let { id, type, childIds = [], css: css11, className, ...rest } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -1470,13 +1692,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React24.createElement(Component, {
+    return /* @__PURE__ */ React28.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClassName(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React24.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React28.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1486,15 +1708,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext6(WeaverseContext);
+  let context = useContext5(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React24.createElement("div", {
+    return /* @__PURE__ */ React28.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React24.createElement(ItemComponent, {
+  return /* @__PURE__ */ React28.createElement(ItemComponent, {
     key: id,
     instance
   });