@weaverse/react 1.0.5 → 1.0.6

package/dist/index.js

@@ -45,7 +45,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core2 = require("@weaverse/core");
-var import_react30 = require("react");
+var import_react38 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -123,6 +123,7 @@ var import_react4 = __toESM(require("react"));
 // src/constant/index.ts
 var TIMES = ["days", "hours", "minutes", "seconds"];
 var COUNTDOWN_KEY = "wv-cd-evergreen-start";
+var INSTAGRAM_API = "https://graph.instagram.com";
 
 // src/utils/index.ts
 function getTime(_seconds) {
@@ -627,15 +628,20 @@ Video.defaultProps = {
 };
 var video_default = Video;
 
-// src/elements/slideshow/index.tsx
-var import_react22 = require("@stitches/react");
-var import_clsx5 = __toESM(require("clsx"));
-var import_react23 = __toESM(require("react"));
+// src/elements/instagram.tsx
+var import_react32 = __toESM(require("react"));
 
-// src/components/slider/arrows.tsx
-var import_react16 = require("@stitches/react");
-var import_clsx2 = __toESM(require("clsx"));
-var import_react17 = __toESM(require("react"));
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react18 = __toESM(require("react"));
 
 // src/components/icons/index.tsx
 var import_react15 = __toESM(require("react"));
@@ -1295,7 +1301,191 @@ function Icon({ name, className, ...props }) {
   return /* @__PURE__ */ import_react15.default.createElement(WeaverseIcon, { className: cls, ...props });
 }
 
+// src/components/modal/styled.ts
+var import_react_dialog = require("@radix-ui/react-dialog");
+var import_react16 = require("@stitches/react");
+var overlayShow = (0, import_react16.keyframes)({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = (0, import_react16.keyframes)({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
+  display: "block !important",
+  backgroundColor: "rgba(0, 0, 0, .3)",
+  position: "fixed",
+  zIndex: 99999,
+  inset: 0,
+  animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
+});
+var StyledTitle = (0, import_react16.styled)(import_react_dialog.Title, {
+  margin: "0 0 24px",
+  fontWeight: 500,
+  fontSize: 24,
+  "@media (max-width: 768px)": {
+    margin: "0 0 16px",
+    fontSize: 20
+  }
+});
+var StyledContent = (0, import_react16.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",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  padding: 24,
+  animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  zIndex: 99999,
+  maxWidth: "90vw",
+  width: "auto",
+  "*": {
+    maxWidth: "100%"
+  },
+  "&:focus": { outline: "none" },
+  '&[data-size="fullscreen"]': {
+    width: "100vw",
+    height: "100vh",
+    maxWidth: "100vw",
+    borderRadius: 0
+  },
+  "@media (max-width: 768px)": {
+    width: "90vw",
+    padding: 12,
+    '&[data-size="fullscreen"]': {
+      width: "100vw"
+    }
+  }
+});
+var StyledCloseIcon = (0, import_react16.styled)("button", {
+  all: "unset",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 32,
+  width: 32,
+  padding: 4,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "rgb(55, 65, 81)",
+  position: "absolute",
+  top: 8,
+  right: 8,
+  "&:hover": {
+    backgroundColor: "rgba(112, 112, 112, .1)"
+  },
+  svg: {
+    width: 24,
+    height: 24
+  }
+});
+
+// src/components/modal/use-open-change-effect.ts
+var import_react17 = require("react");
+function useOpenChangeEffect(props) {
+  let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = (0, import_react17.useContext)(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
+  (0, import_react17.useEffect)(() => {
+    let isOpen = open || defaultOpen;
+    toggleRootzIndex(isOpen);
+  }, [open, defaultOpen]);
+  let handleOpenChange = (open2) => {
+    toggleRootzIndex(open2);
+    onOpenChange?.(open2);
+  };
+  return handleOpenChange;
+}
+
+// src/components/modal/index.tsx
+var Modal = (props) => {
+  let { children, open, defaultOpen, onOpenChange, ...rest } = props;
+  let handleOpenChange = useOpenChangeEffect(props);
+  return /* @__PURE__ */ import_react18.default.createElement(
+    import_react_dialog2.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      ...rest
+    },
+    children
+  );
+};
+var ModalTrigger = import_react_dialog2.Trigger;
+var ModalHeader = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ import_react18.default.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
+  }
+);
+var ModalContent = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    let { children, size, portal, ...rest } = props;
+    let modalContent = /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react18.default.createElement(
+      StyledContent,
+      {
+        ...rest,
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        "data-wv-modal": true,
+        "data-size": size,
+        ref
+      },
+      /* @__PURE__ */ import_react18.default.createElement(ModalClose, null),
+      /* @__PURE__ */ import_react18.default.createElement("div", { className: "wv-modal-content" }, children)
+    ));
+    if (portal) {
+      return /* @__PURE__ */ import_react18.default.createElement(import_react_dialog2.Portal, null, modalContent);
+    }
+    return modalContent;
+  }
+);
+ModalContent.defaultProps = {
+  size: "auto",
+  portal: false
+};
+var ModalClose = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    let { asChild, children, ...rest } = props;
+    let closeIcon = /* @__PURE__ */ import_react18.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react18.default.createElement(Icon, { name: "X" }));
+    return /* @__PURE__ */ import_react18.default.createElement(import_react_dialog2.Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
+  }
+);
+
+// src/components/spinner.tsx
+var import_react19 = __toESM(require("react"));
+function Spinner() {
+  return /* @__PURE__ */ import_react19.default.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ import_react19.default.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
+}
+
+// src/components/tooltip.tsx
+var import_react20 = __toESM(require("react"));
+function Tooltip({ children }) {
+  return /* @__PURE__ */ import_react20.default.createElement("span", { className: "wv-tooltip" }, children);
+}
+
+// src/components/slider/index.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react23 = require("keen-slider/react");
+var import_react24 = __toESM(require("react"));
+
 // src/components/slider/arrows.tsx
+var import_react21 = require("@stitches/react");
+var import_clsx2 = __toESM(require("clsx"));
+var import_react22 = __toESM(require("react"));
 function Arrows(props) {
   let { currentSlide, instanceRef, className, icon, offset } = props;
   let isFirst = currentSlide === 0;
@@ -1306,7 +1496,7 @@ function Arrows(props) {
   let style = {
     "--offset": `${offset}px`
   };
-  return /* @__PURE__ */ import_react17.default.createElement(StyledArrows, { className, style }, /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(StyledArrows, { className, style }, /* @__PURE__ */ import_react22.default.createElement(
     "button",
     {
       type: "button",
@@ -1316,8 +1506,8 @@ function Arrows(props) {
         instanceRef?.current?.prev();
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
-  ), /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
+  ), /* @__PURE__ */ import_react22.default.createElement(
     "button",
     {
       type: "button",
@@ -1327,10 +1517,10 @@ function Arrows(props) {
         instanceRef?.current?.next();
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
+    /* @__PURE__ */ import_react22.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
   ));
 }
-var StyledArrows = (0, import_react16.styled)("div", {
+var StyledArrows = (0, import_react21.styled)("div", {
   ".arrow": {
     position: "absolute",
     top: "50%",
@@ -1371,53 +1561,175 @@ var StyledArrows = (0, import_react16.styled)("div", {
   }
 });
 
-// src/components/slider/dots.tsx
-var import_react18 = require("@stitches/react");
-var import_clsx3 = __toESM(require("clsx"));
-var import_react19 = __toESM(require("react"));
-function Dots(props) {
-  let { currentSlide, instanceRef, className, 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 }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
-    (idx) => {
-      let className2 = (0, import_clsx3.default)("dot", currentSlide === idx && "dot--active");
-      return /* @__PURE__ */ import_react19.default.createElement(
-        "button",
-        {
-          key: idx,
-          type: "button",
-          onClick: () => instanceRef.current?.moveToIdx(idx),
-          className: className2
+// src/components/slider/resize-plugin.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(props) {
+  let { children, className, gap, slidesPerView, arrowOffset } = props;
+  let [currentSlide, setCurrentSlide] = (0, import_react24.useState)(0);
+  let [created, setCreated] = (0, import_react24.useState)(false);
+  let [ref, instanceRef] = (0, import_react23.useKeenSlider)(
+    {
+      slides: { perView: slidesPerView, spacing: gap },
+      breakpoints: {
+        "(max-width: 1024px)": {
+          slides: { perView: 3, spacing: gap }
+        },
+        "(max-width: 768px)": {
+          slides: {
+            perView: 1,
+            spacing: 32
+          }
         }
-      );
+      },
+      created: () => {
+        setCreated(true);
+      },
+      slideChanged: (slider) => {
+        setCurrentSlide(slider.track.details.rel);
+      }
+    },
+    [ResizePlugin]
+  );
+  let _className = (0, import_clsx3.default)("keen-slider", className);
+  let arrowsClass = (0, import_clsx3.default)(className && `${className}-arrows`);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("div", { ref, className: _className }, /* @__PURE__ */ import_react24.default.createElement(
+    "link",
+    {
+      rel: "stylesheet",
+      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+    }
+  ), children), created && instanceRef?.current && /* @__PURE__ */ import_react24.default.createElement(
+    Arrows,
+    {
+      currentSlide,
+      instanceRef,
+      className: arrowsClass,
+      offset: arrowOffset,
+      icon: "arrow"
     }
   ));
 }
-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": {
+
+// src/components/background.tsx
+var import_react25 = require("@stitches/react");
+var import_react26 = __toESM(require("react"));
+function Background2(props) {
+  let {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className
+  } = props;
+  let style = {
+    ["--bg-color"]: backgroundColor,
+    ["--bg-fit"]: backgroundFit,
+    ["--bg-position"]: backgroundPosition
+  };
+  if (backgroundImage || backgroundColor) {
+    return /* @__PURE__ */ import_react26.default.createElement(StyledBackground, { style, className }, backgroundImage && /* @__PURE__ */ import_react26.default.createElement(
+      "img",
+      {
+        width: "100%",
+        height: "100%",
+        "data-blink-src": backgroundImage,
+        alt: "Background"
+      }
+    ));
+  }
+  return null;
+}
+var StyledBackground = (0, import_react25.styled)("div", {
+  display: "block !important",
+  position: "absolute",
+  inset: 0,
+  backgroundColor: "var(--bg-color)",
+  img: {
+    objectFit: "var(--bg-fit, cover)",
+    objectPosition: "var(--bg-position, 50% 50%)"
+  }
+});
+
+// src/components/overlay.tsx
+var import_react27 = require("@stitches/react");
+var import_react28 = __toESM(require("react"));
+function Overlay3(props) {
+  let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
+  if (enabled) {
+    return /* @__PURE__ */ import_react28.default.createElement(
+      StyledOverlay2,
+      {
+        className,
+        css: { ["--overlay-opacity"]: opacity / 100 }
+      }
+    );
+  }
+  return null;
+}
+var StyledOverlay2 = (0, import_react27.styled)("div", {
+  display: "block !important",
+  position: "absolute",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
+});
+
+// src/components/slider/dots.tsx
+var import_react29 = require("@stitches/react");
+var import_clsx4 = __toESM(require("clsx"));
+var import_react30 = __toESM(require("react"));
+function Dots(props) {
+  let { currentSlide, instanceRef, className, absolute, position, color } = props;
+  let _className = (0, import_clsx4.default)(
+    className,
+    absolute && "dots--absolute",
+    position && `dots--${position}`,
+    color && `dots--${color}`
+  );
+  return /* @__PURE__ */ import_react30.default.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+    (idx) => {
+      let className2 = (0, import_clsx4.default)("dot", currentSlide === idx && "dot--active");
+      return /* @__PURE__ */ import_react30.default.createElement(
+        "button",
+        {
+          key: idx,
+          type: "button",
+          onClick: () => instanceRef.current?.moveToIdx(idx),
+          className: className2
+        }
+      );
+    }
+  ));
+}
+var StyledDots = (0, import_react29.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": {
@@ -1443,10 +1755,6 @@ var StyledDots = (0, import_react18.styled)("div", {
   }
 });
 
-// src/elements/slideshow/use-slideshow-configs.ts
-var import_react20 = require("keen-slider/react");
-var import_react21 = __toESM(require("react"));
-
 // src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
@@ -1480,28 +1788,161 @@ function AutoplayPlugin(changeSlidesEvery) {
   };
 }
 
-// src/components/slider/resize-plugin.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/placeholder.tsx
+var import_react31 = __toESM(require("react"));
+var Placeholder = (0, import_react31.forwardRef)(
+  (props, ref) => {
+    let { element, className, children, ...rest } = props;
+    return /* @__PURE__ */ import_react31.default.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ import_react31.default.createElement("div", { style: { fontWeight: 600, marginBottom: "10px" } }, element), /* @__PURE__ */ import_react31.default.createElement("div", null, children));
+  }
+);
+var placeholder_default = Placeholder;
+
+// src/components/index.ts
+var Components = {
+  Background: Background2,
+  Icon,
+  ModalComponents: modal_exports,
+  Overlay: Overlay3,
+  Placeholder: placeholder_default,
+  Spinner,
+  Slider,
+  Tooltip
+};
+var SliderComponents = {
+  Arrows,
+  Dots,
+  ResizePlugin,
+  AutoplayPlugin
 };
 
+// src/elements/instagram.tsx
+var Instagram = (0, import_react32.forwardRef)(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = (0, import_react32.useState)([]);
+    let [error, setError] = (0, import_react32.useState)(null);
+    (0, import_react32.useEffect)(() => {
+      if (token) {
+        let params = new URLSearchParams({
+          access_token: token,
+          fields: "id,media_type,caption,media_url,permalink,thumbnail_url"
+        });
+        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
+          if (res.error) {
+            setError(res);
+          } else {
+            setError(null);
+            setMedia([...res.data]);
+          }
+        }).catch(setError);
+      }
+    }, [token]);
+    if (!token || error) {
+      return /* @__PURE__ */ import_react32.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react32.default.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
+    }
+    let style = {
+      "--wv-ig-images-per-row": imagesPerRow,
+      "--wv-ig-images-gap": gap + "px"
+    };
+    return /* @__PURE__ */ import_react32.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react32.default.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
+      let {
+        id,
+        permalink,
+        caption,
+        media_url,
+        media_type,
+        thumbnail_url
+      } = item;
+      if (media_type === "VIDEO") {
+        return /* @__PURE__ */ import_react32.default.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ import_react32.default.createElement("source", { src: media_url, type: "video/mp4" }));
+      }
+      return /* @__PURE__ */ import_react32.default.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ import_react32.default.createElement("img", { alt: caption, src: media_url }));
+    })));
+  }
+);
+var css9 = {
+  // '@desktop': {
+  //   '.wv-ig-media-container': {
+  //     overflow: 'hidden',
+  //     maxWidth: '100%',
+  //     maxHeight: '100%',
+  //     display: 'grid',
+  //     gridTemplateColumns: 'repeat(var(--wv-ig-images-per-row, 4), 1fr)',
+  //     gap: 'var(--wv-ig-images-gap, 0px)',
+  //     img: {
+  //       // aspectRatio: '1 / 1',
+  //       maxWidth: '100%',
+  //       maxHeight: '100%',
+  //       objectFit: 'cover',
+  //     },
+  //   },
+  // },
+};
+var permanentCss = {
+  "@desktop": {
+    ".wv-ig-media-container": {
+      overflow: "hidden",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
+      gap: "var(--wv-ig-images-gap, 0px)",
+      img: {
+        // aspectRatio: '1 / 1',
+        maxWidth: "100%",
+        maxHeight: "100%",
+        objectFit: "cover"
+      },
+      video: {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  },
+  "@mobile": {
+    ".wv-ig-media-container": {
+      overflowX: "auto",
+      display: "flex",
+      scrollSnapType: "x mandatory"
+    },
+    ".wv-ig-media-container a": {
+      scrollSnapAlign: "start",
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: "100%"
+    }
+  }
+};
+Instagram.defaultProps = {
+  token: "",
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0
+};
+var instagram_default = Instagram;
+
+// src/elements/slideshow/index.tsx
+var import_react35 = require("@stitches/react");
+var import_clsx6 = __toESM(require("clsx"));
+var import_react36 = __toESM(require("react"));
+
+// src/elements/slideshow/use-slideshow-configs.ts
+var import_react33 = require("keen-slider/react");
+var import_react34 = __toESM(require("react"));
+
 // src/utils/css.ts
-var import_clsx4 = __toESM(require("clsx"));
-function formatCSS(css11) {
+var import_clsx5 = __toESM(require("clsx"));
+function formatCSS(css12) {
   return {
-    "@desktop": css11["@desktop"],
-    "@mobile": css11["@mobile"]
+    "@desktop": css12["@desktop"],
+    "@mobile": css12["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css11, type, className: cls = "" } = instance.data;
+  let { css: css12, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -1515,12 +1956,12 @@ function generateItemClassName(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css11) {
-    let formattedCss = formatCSS(css11);
+  if (css12) {
+    let formattedCss = formatCSS(css12);
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = (0, import_clsx4.default)(permanentClass, cls, newStitchesClass, otherClass);
+    className = (0, import_clsx5.default)(permanentClass, cls, newStitchesClass, otherClass);
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -1549,19 +1990,19 @@ function useSlideshowConfigs(props) {
     changeSlidesEvery,
     children
   } = props;
-  let { isDesignMode, isPreviewMode } = (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 { isDesignMode, isPreviewMode } = (0, import_react34.useContext)(WeaverseContext);
+  let [opacities, setOpacities] = import_react34.default.useState([]);
+  let [cssLoaded, setCssLoaded] = (0, import_react34.useState)(false);
+  let [created, setCreated] = (0, import_react34.useState)(false);
+  let [ready, setReady] = (0, import_react34.useState)(false);
+  let [currentSlide, setCurrentSlide] = (0, import_react34.useState)(0);
   let sliderPlugins = [ResizePlugin];
   if (autoRotate && (isPreviewMode || !isDesignMode)) {
     sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
   }
-  let [sliderRef, instanceRef] = (0, import_react20.useKeenSlider)(
+  let [sliderRef, instanceRef] = (0, import_react33.useKeenSlider)(
     {
-      slides: animation === "fade" ? import_react21.default.Children.count(children) : { perView: slidesPerView, number: import_react21.default.Children.count(children) },
+      slides: animation === "fade" ? import_react34.default.Children.count(children) : { perView: slidesPerView, number: import_react34.default.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -1591,13 +2032,13 @@ function useSlideshowConfigs(props) {
     },
     sliderPlugins
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     loadCSS({
       rel: "stylesheet",
       href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
     }).then(() => setCssLoaded(true));
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (created && cssLoaded) {
       setReady(true);
     }
@@ -1613,7 +2054,7 @@ function useSlideshowConfigs(props) {
 }
 
 // src/elements/slideshow/index.tsx
-var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
+var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
   let {
     animation,
     showArrows,
@@ -1632,7 +2073,7 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
   };
   let faderClass = "";
   if (animation === "fade") {
-    faderClass = (0, import_react22.css)({
+    faderClass = (0, import_react35.css)({
       ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
         acc[`&:nth-child(${index + 1})`] = {
           opacity
@@ -1641,16 +2082,16 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
       }, {})
     })().className;
   }
-  let _className = (0, import_clsx5.default)(
+  let _className = (0, import_clsx6.default)(
     faderClass,
     animation === "slide" ? "keen-slider" : "keen-fader"
   );
-  let arrowsClass = (0, import_clsx5.default)(
+  let arrowsClass = (0, import_clsx6.default)(
     "wv-slideshow--arrows",
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  return /* @__PURE__ */ import_react23.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react23.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react36.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react36.default.createElement(
     Arrows,
     {
       instanceRef,
@@ -1659,7 +2100,7 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react23.default.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react36.default.createElement(
     Dots,
     {
       instanceRef,
@@ -1671,7 +2112,7 @@ var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
     }
   ));
 });
-var css9 = {
+var css10 = {
   "@desktop": {
     opacity: "var(--slider-opacity, 0)",
     padding: "32px 0",
@@ -1740,80 +2181,7 @@ Slideshow.defaultProps = {
 var slideshow_default = Slideshow;
 
 // src/elements/slideshow/slide.tsx
-var import_react29 = __toESM(require("react"));
-
-// src/components/background.tsx
-var import_react24 = require("@stitches/react");
-var import_react25 = __toESM(require("react"));
-function Background2(props) {
-  let {
-    backgroundColor,
-    backgroundImage,
-    backgroundFit,
-    backgroundPosition,
-    className
-  } = props;
-  let style = {
-    ["--bg-color"]: backgroundColor,
-    ["--bg-fit"]: backgroundFit,
-    ["--bg-position"]: backgroundPosition
-  };
-  if (backgroundImage || backgroundColor) {
-    return /* @__PURE__ */ import_react25.default.createElement(StyledBackground, { style, className }, backgroundImage && /* @__PURE__ */ import_react25.default.createElement(
-      "img",
-      {
-        width: "100%",
-        height: "100%",
-        "data-blink-src": backgroundImage,
-        alt: "Background"
-      }
-    ));
-  }
-  return null;
-}
-var StyledBackground = (0, import_react24.styled)("div", {
-  display: "block !important",
-  position: "absolute",
-  inset: 0,
-  backgroundColor: "var(--bg-color)",
-  img: {
-    objectFit: "var(--bg-fit, cover)",
-    objectPosition: "var(--bg-position, 50% 50%)"
-  }
-});
-
-// src/components/overlay.tsx
-var import_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_react27.default.createElement(
-      StyledOverlay,
-      {
-        className,
-        css: { ["--overlay-opacity"]: opacity / 100 }
-      }
-    );
-  }
-  return null;
-}
-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;
+var import_react37 = __toESM(require("react"));
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -1856,7 +2224,7 @@ var slidePositionMap = {
 };
 
 // src/elements/slideshow/slide.tsx
-var Slide = (0, import_react29.forwardRef)((props, ref) => {
+var Slide = (0, import_react37.forwardRef)((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -1868,7 +2236,7 @@ var Slide = (0, import_react29.forwardRef)((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ import_react29.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react37.default.createElement(
     Background2,
     {
       backgroundColor,
@@ -1877,16 +2245,16 @@ var Slide = (0, import_react29.forwardRef)((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ import_react29.default.createElement(
-    Overlay2,
+  ), /* @__PURE__ */ import_react37.default.createElement(
+    Overlay3,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__PURE__ */ import_react29.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react29.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
+  ), /* @__PURE__ */ import_react37.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react37.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
 });
-var css10 = {
+var css11 = {
   "@desktop": {
     position: "relative",
     height: "100%",
@@ -1933,12 +2301,12 @@ var Elements = {
     type: "image",
     defaultCss: css4
   },
-  // Instagram: {
-  //   Component: Instagram.default,
-  //   type: 'instagram',
-  //   defaultCss: Instagram.css,
-  //   permanentCss: Instagram.permanentCss,
-  // },
+  Instagram: {
+    Component: instagram_default,
+    type: "instagram",
+    defaultCss: css9,
+    permanentCss
+  },
   Layout: {
     Component: layout_default,
     type: "layout",
@@ -1987,12 +2355,12 @@ var Elements = {
   Slideshow: {
     Component: slideshow_default,
     type: "slideshow",
-    defaultCss: css9
+    defaultCss: css10
   },
   Slide: {
     Component: slide_default,
     type: "slide",
-    defaultCss: css10
+    defaultCss: css11
   }
 };
 
@@ -2034,275 +2402,18 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react30.createContext)({});
+var WeaverseContext = (0, import_react38.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/modal/index.tsx
-var modal_exports = {};
-__export(modal_exports, {
-  Modal: () => Modal,
-  ModalClose: () => ModalClose,
-  ModalContent: () => ModalContent,
-  ModalHeader: () => ModalHeader,
-  ModalTrigger: () => ModalTrigger
-});
-var import_react_dialog2 = require("@radix-ui/react-dialog");
-var import_react33 = __toESM(require("react"));
-
-// src/components/modal/styled.ts
-var import_react_dialog = require("@radix-ui/react-dialog");
-var import_react31 = require("@stitches/react");
-var overlayShow = (0, import_react31.keyframes)({
-  "0%": { opacity: 0 },
-  "100%": { opacity: 1 }
-});
-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_react31.styled)(import_react_dialog.Overlay, {
-  display: "block !important",
-  backgroundColor: "rgba(0, 0, 0, .3)",
-  position: "fixed",
-  zIndex: 99999,
-  inset: 0,
-  animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
-});
-var StyledTitle = (0, import_react31.styled)(import_react_dialog.Title, {
-  margin: "0 0 24px",
-  fontWeight: 500,
-  fontSize: 24,
-  "@media (max-width: 768px)": {
-    margin: "0 0 16px",
-    fontSize: 20
-  }
-});
-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",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  padding: 24,
-  animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  zIndex: 99999,
-  maxWidth: "90vw",
-  width: "auto",
-  "*": {
-    maxWidth: "100%"
-  },
-  "&:focus": { outline: "none" },
-  '&[data-size="fullscreen"]': {
-    width: "100vw",
-    height: "100vh",
-    maxWidth: "100vw",
-    borderRadius: 0
-  },
-  "@media (max-width: 768px)": {
-    width: "90vw",
-    padding: 12,
-    '&[data-size="fullscreen"]': {
-      width: "100vw"
-    }
-  }
-});
-var StyledCloseIcon = (0, import_react31.styled)("button", {
-  all: "unset",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  borderRadius: "100%",
-  height: 32,
-  width: 32,
-  padding: 4,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "rgb(55, 65, 81)",
-  position: "absolute",
-  top: 8,
-  right: 8,
-  "&:hover": {
-    backgroundColor: "rgba(112, 112, 112, .1)"
-  },
-  svg: {
-    width: 24,
-    height: 24
-  }
-});
-
-// src/components/modal/use-open-change-effect.ts
-var import_react32 = require("react");
-function useOpenChangeEffect(props) {
-  let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = (0, import_react32.useContext)(WeaverseContext);
-  let toggleRootzIndex = (open2) => {
-    let { contentRootElement } = rootCtx;
-    if (contentRootElement) {
-      if (open2) {
-        contentRootElement.classList.add("modal-open");
-      } else {
-        contentRootElement.classList.remove("modal-open");
-      }
-    }
-  };
-  (0, import_react32.useEffect)(() => {
-    let isOpen = open || defaultOpen;
-    toggleRootzIndex(isOpen);
-  }, [open, defaultOpen]);
-  let handleOpenChange = (open2) => {
-    toggleRootzIndex(open2);
-    onOpenChange?.(open2);
-  };
-  return handleOpenChange;
-}
-
-// src/components/modal/index.tsx
-var Modal = (props) => {
-  let { children, open, defaultOpen, onOpenChange, ...rest } = props;
-  let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ import_react33.default.createElement(
-    import_react_dialog2.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      ...rest
-    },
-    children
-  );
-};
-var ModalTrigger = import_react_dialog2.Trigger;
-var ModalHeader = (0, import_react33.forwardRef)(
-  (props, ref) => {
-    let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react33.default.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
-  }
-);
-var ModalContent = (0, import_react33.forwardRef)(
-  (props, ref) => {
-    let { children, size, portal, ...rest } = props;
-    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_react33.default.createElement(ModalClose, null),
-      /* @__PURE__ */ import_react33.default.createElement("div", { className: "wv-modal-content" }, children)
-    ));
-    if (portal) {
-      return /* @__PURE__ */ import_react33.default.createElement(import_react_dialog2.Portal, null, modalContent);
-    }
-    return modalContent;
-  }
-);
-ModalContent.defaultProps = {
-  size: "auto",
-  portal: false
-};
-var ModalClose = (0, import_react33.forwardRef)(
-  (props, ref) => {
-    let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ import_react33.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react33.default.createElement(Icon, { name: "X" }));
-    return /* @__PURE__ */ import_react33.default.createElement(import_react_dialog2.Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
-  }
-);
-
-// src/components/spinner.tsx
-var import_react34 = __toESM(require("react"));
-function Spinner() {
-  return /* @__PURE__ */ import_react34.default.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ import_react34.default.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
-}
-
-// src/components/tooltip.tsx
-var import_react35 = __toESM(require("react"));
-function Tooltip({ children }) {
-  return /* @__PURE__ */ import_react35.default.createElement("span", { className: "wv-tooltip" }, children);
-}
-
-// src/components/slider/index.tsx
-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, slidesPerView, 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: slidesPerView, spacing: gap },
-      breakpoints: {
-        "(max-width: 1024px)": {
-          slides: { perView: 3, spacing: gap }
-        },
-        "(max-width: 768px)": {
-          slides: {
-            perView: 1,
-            spacing: 32
-          }
-        }
-      },
-      created: () => {
-        setCreated(true);
-      },
-      slideChanged: (slider) => {
-        setCurrentSlide(slider.track.details.rel);
-      }
-    },
-    [ResizePlugin]
-  );
-  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_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_react37.default.createElement(
-    Arrows,
-    {
-      currentSlide,
-      instanceRef,
-      className: arrowsClass,
-      offset: arrowOffset,
-      icon: "arrow"
-    }
-  ));
-}
-
-// src/components/index.ts
-var Components = {
-  Background: Background2,
-  Icon,
-  ModalComponents: modal_exports,
-  Overlay: Overlay2,
-  Placeholder: placeholder_default,
-  Spinner,
-  Slider,
-  Tooltip
-};
-var SliderComponents = {
-  Arrows,
-  Dots,
-  ResizePlugin,
-  AutoplayPlugin
-};
-
 // src/renderer.tsx
 var import_core3 = require("@weaverse/core");
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react38.useState)(context.data);
-  let rootRef = (0, import_react38.useRef)();
+  let [, setData] = (0, import_react39.useState)(context.data);
+  let rootRef = (0, import_react39.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     initUploadCareAdaptiveDelivery(context.weaverseHost);
@@ -2313,24 +2424,24 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.data?.rootId) {
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         className: `weaverse-content-root ${themeClass}`,
         ...eventHandlers,
         ref: rootRef
       },
-      /* @__PURE__ */ import_react38.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { id: context.data.rootId })),
-      context.platformType === "react-ssr" ? /* @__PURE__ */ import_react38.default.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
+      /* @__PURE__ */ import_react39.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react39.default.createElement(ItemInstance, { id: context.data.rootId })),
+      context.platformType === "react-ssr" ? /* @__PURE__ */ import_react39.default.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
     );
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  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_react38.useEffect)(() => {
+  let { stitchesInstance, elementInstances } = (0, import_react39.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react39.useState)(instance.data);
+  let { id, type, childIds = [], css: css12, className, ...rest } = data;
+  (0, import_react39.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core3.isBrowser && !instance.ref.current) {
@@ -2346,7 +2457,7 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement(
       Component,
       {
         key: id,
@@ -2355,7 +2466,7 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((id2) => /* @__PURE__ */ import_react39.default.createElement(ItemInstance, { key: id2, id: id2 }))
     );
   } else {
     console.log(`Unknown element: ${type}`);
@@ -2364,7 +2475,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     "style",
     {
       id: "stitches",
@@ -2375,13 +2486,13 @@ var StitchesSSR = ({ stitchesInstance }) => {
   );
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react38.useContext)(WeaverseContext);
+  let context = (0, import_react39.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react38.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
+    return /* @__PURE__ */ import_react39.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, { key: id, instance });
+  return /* @__PURE__ */ import_react39.default.createElement(ItemComponent, { key: id, instance });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {