@weaverse/react 1.0.6 → 1.0.8

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_react38 = require("react");
+var import_react36 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -326,46 +326,65 @@ Image.defaultProps = {
 };
 var image_default = Image;
 
-// src/elements/layout/index.tsx
+// src/elements/layout.tsx
 var import_react8 = __toESM(require("react"));
 
-// src/elements/layout/Background.tsx
+// src/components/background.tsx
 var import_react6 = __toESM(require("react"));
 function Background(props) {
-  let { bgColor, imgUrl, objectFit, objectPosition } = props;
+  let {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className
+  } = props;
   let style = {
-    ["--layout-bg-color"]: bgColor,
-    ["--layout-bg-image-object-fit"]: objectFit,
-    ["--layout-bg-image-position"]: objectPosition
+    display: "block",
+    position: "absolute",
+    inset: 0,
+    backgroundColor
   };
-  if (imgUrl || bgColor) {
-    return /* @__PURE__ */ import_react6.default.createElement("div", { style, className: "wv-layout-background" }, imgUrl && /* @__PURE__ */ import_react6.default.createElement(
+  if (backgroundImage || backgroundColor) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", { style, className }, backgroundImage && /* @__PURE__ */ import_react6.default.createElement(
       "img",
       {
         width: "100%",
         height: "100%",
-        "data-blink-src": imgUrl,
-        alt: "Section background"
+        "data-blink-src": backgroundImage,
+        alt: "Background",
+        style: {
+          objectFit: backgroundFit,
+          objectPosition: backgroundPosition
+        }
       }
     ));
   }
   return null;
 }
 
-// src/elements/layout/Overlay.tsx
+// src/components/overlay.tsx
 var import_react7 = __toESM(require("react"));
 function Overlay(props) {
-  let { enableOverlay, overlayOpacity } = props;
+  let { enableOverlay, overlayOpacity, className } = props;
   if (enableOverlay) {
-    let style = {
-      ["--layout-overlay-opacity"]: overlayOpacity / 100
-    };
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "wv-layout-overlay", style });
+    return /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "block",
+          backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})`
+        }
+      }
+    );
   }
   return null;
 }
 
-// src/elements/layout/index.tsx
+// src/elements/layout.tsx
 var Layout = (0, import_react8.forwardRef)((props, ref) => {
   let {
     children,
@@ -396,10 +415,10 @@ var Layout = (0, import_react8.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react8.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react8.default.createElement(
     Background,
     {
-      imgUrl: backgroundImage,
-      bgColor: backgroundColor,
-      objectFit,
-      objectPosition
+      backgroundImage,
+      backgroundColor,
+      backgroundFit: objectFit,
+      backgroundPosition: objectPosition
     }
   ), /* @__PURE__ */ import_react8.default.createElement(Overlay, { enableOverlay, overlayOpacity }), /* @__PURE__ */ import_react8.default.createElement("div", { "data-layout-content": true }, children));
 });
@@ -416,22 +435,6 @@ var css5 = {
       gridAutoRows: "var(--row-size)",
       gap: "var(--gap)",
       maxWidth: "var(--layout-content-width)"
-    },
-    ".wv-layout-background": {
-      display: "block",
-      position: "absolute",
-      inset: 0,
-      backgroundColor: "var(--layout-bg-color)",
-      img: {
-        objectFit: "var(--layout-bg-image-object-fit, cover)",
-        objectPosition: "var(--layout-bg-image-position, 50% 50%)"
-      }
-    },
-    ".wv-layout-overlay": {
-      display: "block",
-      position: "absolute",
-      inset: 0,
-      backgroundColor: "rgba(0, 0, 0, var(--layout-overlay-opacity, 0.5))"
     }
   },
   "@mobile": {
@@ -511,7 +514,7 @@ var css7 = {
     overflow: "hidden",
     ".wv-text-content": {
       width: "100%",
-      height: "100%",
+      height: "fit-content",
       "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
         all: "inherit",
         margin: "0",
@@ -528,14 +531,76 @@ Text.defaultProps = {
 };
 var text_default = Text;
 
+// src/elements/scrolling-text.tsx
+var import_react10 = __toESM(require("react"));
+var import_react11 = require("react");
+var ScrollingText = import_react10.default.forwardRef((props, ref) => {
+  let { children, value, gap, speed, pauseOnHover, ...rest } = props;
+  let [playState, setPlayState] = (0, import_react11.useState)("running");
+  let style = {
+    "--gap": `${gap}px`,
+    "--speed": `${speed}s`,
+    "--play-state": playState
+  };
+  let events = {};
+  if (pauseOnHover) {
+    events = {
+      onMouseEnter: () => setPlayState("paused"),
+      onMouseLeave: () => setPlayState("running")
+    };
+  }
+  return /* @__PURE__ */ import_react10.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "wv-scrolling-text__container", style, ...events }, Array.from({ length: 30 }).map((_, i) => /* @__PURE__ */ import_react10.default.createElement(
+    "div",
+    {
+      key: i,
+      className: "wv-text-content",
+      dangerouslySetInnerHTML: { __html: value }
+    }
+  ))));
+});
+var css8 = {
+  "@desktop": {
+    display: "flex",
+    padding: "10px",
+    overflow: "hidden",
+    ".wv-scrolling-text__container": {
+      visibility: "visible",
+      whiteSpace: "nowrap",
+      display: "flex",
+      gap: "var(--gap, 40px)",
+      animation: "wv-scrolling-text var(--speed, 100s) linear infinite",
+      animationPlayState: "var(--play-state, running)",
+      ".wv-text-content": {
+        width: "100%",
+        height: "fit-content",
+        "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
+          all: "inherit",
+          margin: "0",
+          wordBreak: "break-word",
+          overflowWrap: "break-word",
+          width: "auto",
+          height: "auto"
+        }
+      }
+    }
+  }
+};
+ScrollingText.defaultProps = {
+  value: "<p>The quick brown fox jumps over the lazy dog</p>",
+  gap: 40,
+  speed: 200,
+  pauseOnHover: true
+};
+var scrolling_text_default = ScrollingText;
+
 // src/elements/video/index.tsx
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/elements/video/html-video.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "video",
     {
       controls,
@@ -545,23 +610,23 @@ function HTMLVideo(props) {
       controlsList: "nodownload",
       disablePictureInPicture: true
     },
-    /* @__PURE__ */ import_react10.default.createElement("source", { src, type: type || "video/mp4" }),
-    /* @__PURE__ */ import_react10.default.createElement("source", { src, type: "video/ogg" }),
+    /* @__PURE__ */ import_react12.default.createElement("source", { src, type: type || "video/mp4" }),
+    /* @__PURE__ */ import_react12.default.createElement("source", { src, type: "video/ogg" }),
     "Your browser does not support the video tag."
   );
 }
 
 // src/elements/video/vimeo.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
   let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
   let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
-  return /* @__PURE__ */ import_react11.default.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
+  return /* @__PURE__ */ import_react13.default.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
 }
 
 // src/elements/video/youtube.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
   let params = new URLSearchParams({
@@ -572,12 +637,12 @@ function Youtube(props) {
   });
   let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?playlist=${youtubeId}&${params.toString()}`;
   let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
-  return /* @__PURE__ */ import_react12.default.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
+  return /* @__PURE__ */ import_react14.default.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
 }
 
 // src/elements/video/index.tsx
-var Video = (0, import_react13.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react13.useContext)(WeaverseContext);
+var Video = (0, import_react15.forwardRef)((props, ref) => {
+  let { isDesignMode } = (0, import_react15.useContext)(WeaverseContext);
   let {
     src,
     controls,
@@ -593,15 +658,15 @@ var Video = (0, import_react13.forwardRef)((props, ref) => {
   let youtubeId = getYoutubeEmbedId(src);
   let vimeoId = getVimeoId(src);
   if (youtubeId) {
-    content = /* @__PURE__ */ import_react13.default.createElement(Youtube, { ...videoProps, youtubeId });
+    content = /* @__PURE__ */ import_react15.default.createElement(Youtube, { ...videoProps, youtubeId });
   } else if (vimeoId) {
-    content = /* @__PURE__ */ import_react13.default.createElement(Vimeo, { ...videoProps, vimeoId });
+    content = /* @__PURE__ */ import_react15.default.createElement(Vimeo, { ...videoProps, vimeoId });
   } else {
-    content = /* @__PURE__ */ import_react13.default.createElement(HTMLVideo, { ...videoProps });
+    content = /* @__PURE__ */ import_react15.default.createElement(HTMLVideo, { ...videoProps });
   }
-  return /* @__PURE__ */ import_react13.default.createElement("div", { ref, ...rest }, content);
+  return /* @__PURE__ */ import_react15.default.createElement("div", { ref, ...rest }, content);
 });
-var css8 = {
+var css9 = {
   "@desktop": {
     video: {
       height: "100%",
@@ -629,7 +694,7 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react32 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // src/components/modal/index.tsx
 var modal_exports = {};
@@ -641,10 +706,10 @@ __export(modal_exports, {
   ModalTrigger: () => ModalTrigger
 });
 var import_react_dialog2 = require("@radix-ui/react-dialog");
-var import_react18 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/components/icons/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/icons/phosphor.tsx
 var phosphor_exports = {};
@@ -654,8 +719,10 @@ __export(phosphor_exports, {
   Backpack: () => Backpack,
   CaretLeft: () => CaretLeft,
   CaretRight: () => CaretRight,
+  Circle: () => Circle,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
+  HandBag: () => HandBag,
   Image: () => Image2,
   Minus: () => Minus,
   Newspaper: () => Newspaper,
@@ -663,11 +730,27 @@ __export(phosphor_exports, {
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
   Storefront: () => Storefront,
+  Tag: () => Tag,
   X: () => X
 });
-var import_react14 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
+var Circle = (props) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement("circle", { cx: "128", cy: "128", r: "104" })
+  );
+};
 var CircleNotch = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -675,7 +758,7 @@ var CircleNotch = (props) => {
       viewBox: "0 0 24 24",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "circle",
       {
         style: { opacity: ".25" },
@@ -686,7 +769,7 @@ var CircleNotch = (props) => {
         strokeWidth: "4"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         style: { opacity: ".75" },
@@ -697,7 +780,7 @@ var CircleNotch = (props) => {
   );
 };
 var X = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -707,8 +790,8 @@ var X = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "200",
@@ -722,7 +805,7 @@ var X = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "200",
@@ -739,37 +822,77 @@ var X = (props) => {
   );
 };
 var Minus = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
-      width: "196",
-      height: "196",
-      fill: "currentColor",
-      stroke: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 384 512",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("path", { d: "M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "line",
+      {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
   );
 };
 var Plus = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
-      width: "196",
-      height: "196",
-      fill: "currentColor",
-      stroke: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 384 512",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("path", { d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "line",
+      {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    ),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "line",
+      {
+        x1: "128",
+        y1: "40",
+        x2: "128",
+        y2: "216",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
   );
 };
 var CaretLeft = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -779,8 +902,8 @@ var CaretLeft = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "160 208 80 128 160 48",
@@ -794,7 +917,7 @@ var CaretLeft = (props) => {
   );
 };
 var CaretRight = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -804,8 +927,8 @@ var CaretRight = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "96 48 176 128 96 208",
@@ -819,7 +942,7 @@ var CaretRight = (props) => {
   );
 };
 var ArrowLeft = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -829,8 +952,8 @@ var ArrowLeft = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "216",
@@ -844,7 +967,7 @@ var ArrowLeft = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "112 56 40 128 112 200",
@@ -858,7 +981,7 @@ var ArrowLeft = (props) => {
   );
 };
 var ArrowRight = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -868,8 +991,8 @@ var ArrowRight = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "40",
@@ -883,7 +1006,7 @@ var ArrowRight = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "144 56 216 128 144 200",
@@ -897,7 +1020,7 @@ var ArrowRight = (props) => {
   );
 };
 var Image2 = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -906,11 +1029,11 @@ var Image2 = (props) => {
       viewBox: "0 0 640 512",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("path", { d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" })
+    /* @__PURE__ */ import_react16.default.createElement("path", { d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" })
   );
 };
 var ShoppingCart = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -920,8 +1043,8 @@ var ShoppingCart = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
@@ -932,7 +1055,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "circle",
       {
         cx: "80",
@@ -945,7 +1068,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "circle",
       {
         cx: "184",
@@ -958,7 +1081,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
@@ -972,7 +1095,7 @@ var ShoppingCart = (props) => {
   );
 };
 var Storefront = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -982,8 +1105,8 @@ var Storefront = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
@@ -994,7 +1117,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
@@ -1005,7 +1128,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M96,96v16a32,32,0,0,1-64,0V96",
@@ -1016,7 +1139,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M160,96v16a32,32,0,0,1-64,0V96",
@@ -1027,7 +1150,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M224,96v16a32,32,0,0,1-64,0V96",
@@ -1041,7 +1164,7 @@ var Storefront = (props) => {
   );
 };
 var Package = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1051,8 +1174,8 @@ var Package = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M224,177.3V78.7a8.1,8.1,0,0,0-4.1-7l-88-49.5a7.8,7.8,0,0,0-7.8,0l-88,49.5a8.1,8.1,0,0,0-4.1,7v98.6a8.1,8.1,0,0,0,4.1,7l88,49.5a7.8,7.8,0,0,0,7.8,0l88-49.5A8.1,8.1,0,0,0,224,177.3Z",
@@ -1063,7 +1186,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "177 152.5 177 100.5 80 47",
@@ -1074,7 +1197,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "polyline",
       {
         points: "222.9 74.6 128.9 128 33.1 74.6",
@@ -1085,7 +1208,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "128.9",
@@ -1101,8 +1224,70 @@ var Package = (props) => {
     )
   );
 };
+var HandBag = (props) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "path",
+      {
+        d: "M208.8,72H47.2a8.1,8.1,0,0,0-8,7.1L25,207.1a8,8,0,0,0,7.9,8.9H223.1a8,8,0,0,0,7.9-8.9l-14.2-128A8.1,8.1,0,0,0,208.8,72Z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    ),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "path",
+      {
+        d: "M88,104V72a40,40,0,0,1,80,0v32",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
+};
+var Tag = (props) => {
+  return /* @__PURE__ */ import_react16.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      "path",
+      {
+        d: "M122.7,25.9,42,42,25.9,122.7a8,8,0,0,0,2.2,7.2L132.5,234.3a7.9,7.9,0,0,0,11.3,0l90.5-90.5a7.9,7.9,0,0,0,0-11.3L129.9,28.1A8,8,0,0,0,122.7,25.9Z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    ),
+    /* @__PURE__ */ import_react16.default.createElement("circle", { cx: "84", cy: "84", r: "12" })
+  );
+};
 var Backpack = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1112,8 +1297,8 @@ var Backpack = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M96,48h64a48,48,0,0,1,48,48V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V96A48,48,0,0,1,96,48Z",
@@ -1124,7 +1309,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
@@ -1135,7 +1320,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
@@ -1146,7 +1331,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "112",
@@ -1160,7 +1345,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "80",
@@ -1174,7 +1359,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "144",
@@ -1191,7 +1376,7 @@ var Backpack = (props) => {
   );
 };
 var Newspaper = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1201,8 +1386,8 @@ var Newspaper = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "96",
@@ -1216,7 +1401,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "line",
       {
         x1: "96",
@@ -1230,7 +1415,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M32,200a16,16,0,0,0,16-16V64a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V184a16,16,0,0,1-16,16Z",
@@ -1241,7 +1426,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M32,200a16,16,0,0,1-16-16h0V88",
@@ -1255,7 +1440,7 @@ var Newspaper = (props) => {
   );
 };
 var Eye = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1265,8 +1450,8 @@ var Eye = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ import_react14.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ import_react16.default.createElement(
       "path",
       {
         d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
@@ -1277,7 +1462,7 @@ var Eye = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react16.default.createElement(
       "circle",
       {
         cx: "128",
@@ -1298,21 +1483,21 @@ var import_clsx = __toESM(require("clsx"));
 function Icon({ name, className, ...props }) {
   let WeaverseIcon = phosphor_exports[name];
   let cls = (0, import_clsx.default)("wv-icon", className);
-  return /* @__PURE__ */ import_react15.default.createElement(WeaverseIcon, { className: cls, ...props });
+  return /* @__PURE__ */ import_react17.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)({
+var import_react18 = require("@stitches/react");
+var overlayShow = (0, import_react18.keyframes)({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-var contentShow = (0, import_react16.keyframes)({
+var contentShow = (0, import_react18.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, {
+var StyledOverlay = (0, import_react18.styled)(import_react_dialog.Overlay, {
   display: "block !important",
   backgroundColor: "rgba(0, 0, 0, .3)",
   position: "fixed",
@@ -1320,7 +1505,7 @@ var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
   inset: 0,
   animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
 });
-var StyledTitle = (0, import_react16.styled)(import_react_dialog.Title, {
+var StyledTitle = (0, import_react18.styled)(import_react_dialog.Title, {
   margin: "0 0 24px",
   fontWeight: 500,
   fontSize: 24,
@@ -1329,7 +1514,7 @@ var StyledTitle = (0, import_react16.styled)(import_react_dialog.Title, {
     fontSize: 20
   }
 });
-var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
+var StyledContent = (0, import_react18.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",
@@ -1360,7 +1545,7 @@ var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
     }
   }
 });
-var StyledCloseIcon = (0, import_react16.styled)("button", {
+var StyledCloseIcon = (0, import_react18.styled)("button", {
   all: "unset",
   cursor: "pointer",
   fontFamily: "inherit",
@@ -1385,10 +1570,10 @@ var StyledCloseIcon = (0, import_react16.styled)("button", {
 });
 
 // src/components/modal/use-open-change-effect.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = (0, import_react17.useContext)(WeaverseContext);
+  let rootCtx = (0, import_react19.useContext)(WeaverseContext);
   let toggleRootzIndex = (open2) => {
     let { contentRootElement } = rootCtx;
     if (contentRootElement) {
@@ -1399,7 +1584,7 @@ function useOpenChangeEffect(props) {
       }
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     let isOpen = open || defaultOpen;
     toggleRootzIndex(isOpen);
   }, [open, defaultOpen]);
@@ -1414,7 +1599,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     import_react_dialog2.Root,
     {
       open,
@@ -1426,16 +1611,16 @@ var Modal = (props) => {
   );
 };
 var ModalTrigger = import_react_dialog2.Trigger;
-var ModalHeader = (0, import_react18.forwardRef)(
+var ModalHeader = (0, import_react20.forwardRef)(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react18.default.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
+    return /* @__PURE__ */ import_react20.default.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
   }
 );
-var ModalContent = (0, import_react18.forwardRef)(
+var ModalContent = (0, import_react20.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(
+    let modalContent = /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react20.default.createElement(
       StyledContent,
       {
         ...rest,
@@ -1444,11 +1629,11 @@ var ModalContent = (0, import_react18.forwardRef)(
         "data-size": size,
         ref
       },
-      /* @__PURE__ */ import_react18.default.createElement(ModalClose, null),
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "wv-modal-content" }, children)
+      /* @__PURE__ */ import_react20.default.createElement(ModalClose, null),
+      /* @__PURE__ */ import_react20.default.createElement("div", { className: "wv-modal-content" }, children)
     ));
     if (portal) {
-      return /* @__PURE__ */ import_react18.default.createElement(import_react_dialog2.Portal, null, modalContent);
+      return /* @__PURE__ */ import_react20.default.createElement(import_react_dialog2.Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1457,35 +1642,35 @@ ModalContent.defaultProps = {
   size: "auto",
   portal: false
 };
-var ModalClose = (0, import_react18.forwardRef)(
+var ModalClose = (0, import_react20.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);
+    let closeIcon = /* @__PURE__ */ import_react20.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react20.default.createElement(Icon, { name: "X" }));
+    return /* @__PURE__ */ import_react20.default.createElement(import_react_dialog2.Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
   }
 );
 
 // src/components/spinner.tsx
-var import_react19 = __toESM(require("react"));
+var import_react21 = __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" }));
+  return /* @__PURE__ */ import_react21.default.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ import_react21.default.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
 }
 
 // src/components/tooltip.tsx
-var import_react20 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 function Tooltip({ children }) {
-  return /* @__PURE__ */ import_react20.default.createElement("span", { className: "wv-tooltip" }, children);
+  return /* @__PURE__ */ import_react22.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"));
+var import_react25 = require("keen-slider/react");
+var import_react26 = __toESM(require("react"));
 
 // src/components/slider/arrows.tsx
-var import_react21 = require("@stitches/react");
+var import_react23 = require("@stitches/react");
 var import_clsx2 = __toESM(require("clsx"));
-var import_react22 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 function Arrows(props) {
   let { currentSlide, instanceRef, className, icon, offset } = props;
   let isFirst = currentSlide === 0;
@@ -1496,7 +1681,7 @@ function Arrows(props) {
   let style = {
     "--offset": `${offset}px`
   };
-  return /* @__PURE__ */ import_react22.default.createElement(StyledArrows, { className, style }, /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(StyledArrows, { className, style }, /* @__PURE__ */ import_react24.default.createElement(
     "button",
     {
       type: "button",
@@ -1506,8 +1691,8 @@ function Arrows(props) {
         instanceRef?.current?.prev();
       }
     },
-    /* @__PURE__ */ import_react22.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
-  ), /* @__PURE__ */ import_react22.default.createElement(
+    /* @__PURE__ */ import_react24.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
+  ), /* @__PURE__ */ import_react24.default.createElement(
     "button",
     {
       type: "button",
@@ -1517,10 +1702,10 @@ function Arrows(props) {
         instanceRef?.current?.next();
       }
     },
-    /* @__PURE__ */ import_react22.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
+    /* @__PURE__ */ import_react24.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
   ));
 }
-var StyledArrows = (0, import_react21.styled)("div", {
+var StyledArrows = (0, import_react23.styled)("div", {
   ".arrow": {
     position: "absolute",
     top: "50%",
@@ -1575,9 +1760,9 @@ var ResizePlugin = (slider) => {
 // 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)(
+  let [currentSlide, setCurrentSlide] = (0, import_react26.useState)(0);
+  let [created, setCreated] = (0, import_react26.useState)(false);
+  let [ref, instanceRef] = (0, import_react25.useKeenSlider)(
     {
       slides: { perView: slidesPerView, spacing: gap },
       breakpoints: {
@@ -1602,13 +1787,13 @@ function Slider(props) {
   );
   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(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement("div", { ref, className: _className }, /* @__PURE__ */ import_react26.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(
+  ), children), created && instanceRef?.current && /* @__PURE__ */ import_react26.default.createElement(
     Arrows,
     {
       currentSlide,
@@ -1620,73 +1805,10 @@ function Slider(props) {
   ));
 }
 
-// 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_react27 = require("@stitches/react");
 var import_clsx4 = __toESM(require("clsx"));
-var import_react30 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 function Dots(props) {
   let { currentSlide, instanceRef, className, absolute, position, color } = props;
   let _className = (0, import_clsx4.default)(
@@ -1695,10 +1817,10 @@ function Dots(props) {
     position && `dots--${position}`,
     color && `dots--${color}`
   );
-  return /* @__PURE__ */ import_react30.default.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+  return /* @__PURE__ */ import_react28.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(
+      return /* @__PURE__ */ import_react28.default.createElement(
         "button",
         {
           key: idx,
@@ -1710,7 +1832,7 @@ function Dots(props) {
     }
   ));
 }
-var StyledDots = (0, import_react29.styled)("div", {
+var StyledDots = (0, import_react27.styled)("div", {
   padding: "10px 0",
   display: "flex",
   justifyContent: "center",
@@ -1789,21 +1911,21 @@ function AutoplayPlugin(changeSlidesEvery) {
 }
 
 // src/components/placeholder.tsx
-var import_react31 = __toESM(require("react"));
-var Placeholder = (0, import_react31.forwardRef)(
+var import_react29 = __toESM(require("react"));
+var Placeholder = (0, import_react29.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));
+    return /* @__PURE__ */ import_react29.default.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ import_react29.default.createElement("div", { style: { fontWeight: 600, marginBottom: "10px" } }, element), /* @__PURE__ */ import_react29.default.createElement("div", null, children));
   }
 );
 var placeholder_default = Placeholder;
 
 // src/components/index.ts
 var Components = {
-  Background: Background2,
+  Background,
   Icon,
   ModalComponents: modal_exports,
-  Overlay: Overlay3,
+  Overlay,
   Placeholder: placeholder_default,
   Spinner,
   Slider,
@@ -1817,12 +1939,12 @@ var SliderComponents = {
 };
 
 // src/elements/instagram.tsx
-var Instagram = (0, import_react32.forwardRef)(
+var Instagram = (0, import_react30.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)(() => {
+    let [media, setMedia] = (0, import_react30.useState)([]);
+    let [error, setError] = (0, import_react30.useState)(null);
+    (0, import_react30.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -1839,13 +1961,13 @@ var Instagram = (0, import_react32.forwardRef)(
       }
     }, [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!"));
+      return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react30.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) => {
+    return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react30.default.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
       let {
         id,
         permalink,
@@ -1855,13 +1977,13 @@ var Instagram = (0, import_react32.forwardRef)(
         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_react30.default.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ import_react30.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 }));
+      return /* @__PURE__ */ import_react30.default.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ import_react30.default.createElement("img", { alt: caption, src: media_url }));
     })));
   }
 );
-var css9 = {
+var css10 = {
   // '@desktop': {
   //   '.wv-ig-media-container': {
   //     overflow: 'hidden',
@@ -1924,25 +2046,25 @@ Instagram.defaultProps = {
 var instagram_default = Instagram;
 
 // src/elements/slideshow/index.tsx
-var import_react35 = require("@stitches/react");
+var import_react33 = require("@stitches/react");
 var import_clsx6 = __toESM(require("clsx"));
-var import_react36 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/elements/slideshow/use-slideshow-configs.ts
-var import_react33 = require("keen-slider/react");
-var import_react34 = __toESM(require("react"));
+var import_react31 = require("keen-slider/react");
+var import_react32 = __toESM(require("react"));
 
 // src/utils/css.ts
 var import_clsx5 = __toESM(require("clsx"));
-function formatCSS(css12) {
+function formatCSS(css13) {
   return {
-    "@desktop": css12["@desktop"],
-    "@mobile": css12["@mobile"]
+    "@desktop": css13["@desktop"],
+    "@mobile": css13["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css12, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -1956,8 +2078,8 @@ function generateItemClassName(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css12) {
-    let formattedCss = formatCSS(css12);
+  if (css13) {
+    let formattedCss = formatCSS(css13);
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
@@ -1990,19 +2112,19 @@ function useSlideshowConfigs(props) {
     changeSlidesEvery,
     children
   } = props;
-  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 { isDesignMode, isPreviewMode } = (0, import_react32.useContext)(WeaverseContext);
+  let [opacities, setOpacities] = import_react32.default.useState([]);
+  let [cssLoaded, setCssLoaded] = (0, import_react32.useState)(false);
+  let [created, setCreated] = (0, import_react32.useState)(false);
+  let [ready, setReady] = (0, import_react32.useState)(false);
+  let [currentSlide, setCurrentSlide] = (0, import_react32.useState)(0);
   let sliderPlugins = [ResizePlugin];
   if (autoRotate && (isPreviewMode || !isDesignMode)) {
     sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
   }
-  let [sliderRef, instanceRef] = (0, import_react33.useKeenSlider)(
+  let [sliderRef, instanceRef] = (0, import_react31.useKeenSlider)(
     {
-      slides: animation === "fade" ? import_react34.default.Children.count(children) : { perView: slidesPerView, number: import_react34.default.Children.count(children) },
+      slides: animation === "fade" ? import_react32.default.Children.count(children) : { perView: slidesPerView, number: import_react32.default.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -2032,13 +2154,13 @@ function useSlideshowConfigs(props) {
     },
     sliderPlugins
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     loadCSS({
       rel: "stylesheet",
       href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
     }).then(() => setCssLoaded(true));
   }, []);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (created && cssLoaded) {
       setReady(true);
     }
@@ -2054,7 +2176,7 @@ function useSlideshowConfigs(props) {
 }
 
 // src/elements/slideshow/index.tsx
-var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
+var Slideshow = (0, import_react34.forwardRef)((props, ref) => {
   let {
     animation,
     showArrows,
@@ -2073,7 +2195,7 @@ var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
   };
   let faderClass = "";
   if (animation === "fade") {
-    faderClass = (0, import_react35.css)({
+    faderClass = (0, import_react33.css)({
       ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
         acc[`&:nth-child(${index + 1})`] = {
           opacity
@@ -2091,7 +2213,7 @@ var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  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(
+  return /* @__PURE__ */ import_react34.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react34.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react34.default.createElement(
     Arrows,
     {
       instanceRef,
@@ -2100,7 +2222,7 @@ var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react36.default.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react34.default.createElement(
     Dots,
     {
       instanceRef,
@@ -2112,7 +2234,7 @@ var Slideshow = (0, import_react36.forwardRef)((props, ref) => {
     }
   ));
 });
-var css10 = {
+var css11 = {
   "@desktop": {
     opacity: "var(--slider-opacity, 0)",
     padding: "32px 0",
@@ -2181,7 +2303,7 @@ Slideshow.defaultProps = {
 var slideshow_default = Slideshow;
 
 // src/elements/slideshow/slide.tsx
-var import_react37 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -2224,7 +2346,7 @@ var slidePositionMap = {
 };
 
 // src/elements/slideshow/slide.tsx
-var Slide = (0, import_react37.forwardRef)((props, ref) => {
+var Slide = (0, import_react35.forwardRef)((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -2236,8 +2358,8 @@ var Slide = (0, import_react37.forwardRef)((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react37.default.createElement(
-    Background2,
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react35.default.createElement(
+    Background,
     {
       backgroundColor,
       backgroundImage,
@@ -2245,16 +2367,16 @@ var Slide = (0, import_react37.forwardRef)((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(
-    Overlay3,
+  ), /* @__PURE__ */ import_react35.default.createElement(
+    Overlay,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__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")));
+  ), /* @__PURE__ */ import_react35.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react35.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
 });
-var css11 = {
+var css12 = {
   "@desktop": {
     position: "relative",
     height: "100%",
@@ -2304,7 +2426,7 @@ var Elements = {
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css9,
+    defaultCss: css10,
     permanentCss
   },
   Layout: {
@@ -2322,45 +2444,25 @@ var Elements = {
     type: "text",
     defaultCss: css7
   },
+  ScrollingText: {
+    Component: scrolling_text_default,
+    type: "scrolling-text",
+    defaultCss: css8
+  },
   Video: {
     Component: video_default,
     type: "video",
-    defaultCss: css8
+    defaultCss: css9
   },
-  // Accordion: {
-  //   Component: Accordion.default,
-  //   type: 'accordion',
-  //   defaultCss: Accordion.css,
-  // },
-  // AccordionWrapper: {
-  //   Component: AccordionWrapper.default,
-  //   type: 'accordion.wrapper',
-  //   defaultCss: AccordionWrapper.css,
-  // },
-  // AccordionContent: {
-  //   Component: AccordionContent.default,
-  //   type: 'accordion.content',
-  //   defaultCss: AccordionContent.css,
-  // },
-  // Tab: {
-  //   Component: Tab.default,
-  //   type: 'tab',
-  //   defaultCss: Tab.css,
-  // },
-  // TabContent: {
-  //   Component: TabContent.default,
-  //   type: 'tab.content',
-  //   defaultCss: TabContent.css,
-  // },
   Slideshow: {
     Component: slideshow_default,
     type: "slideshow",
-    defaultCss: css10
+    defaultCss: css11
   },
   Slide: {
     Component: slide_default,
     type: "slide",
-    defaultCss: css11
+    defaultCss: css12
   }
 };
 
@@ -2402,18 +2504,18 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react38.createContext)({});
+var WeaverseContext = (0, import_react36.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core3 = require("@weaverse/core");
-var import_react39 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react39.useState)(context.data);
-  let rootRef = (0, import_react39.useRef)();
+  let [, setData] = (0, import_react37.useState)(context.data);
+  let rootRef = (0, import_react37.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react39.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     initUploadCareAdaptiveDelivery(context.weaverseHost);
@@ -2424,24 +2526,24 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.data?.rootId) {
-    return /* @__PURE__ */ import_react39.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       "div",
       {
         className: `weaverse-content-root ${themeClass}`,
         ...eventHandlers,
         ref: rootRef
       },
-      /* @__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
+      /* @__PURE__ */ import_react37.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react37.default.createElement(ItemInstance, { id: context.data.rootId })),
+      context.platformType === "react-ssr" ? /* @__PURE__ */ import_react37.default.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
     );
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  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 { stitchesInstance, elementInstances } = (0, import_react37.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react37.useState)(instance.data);
+  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  (0, import_react37.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core3.isBrowser && !instance.ref.current) {
@@ -2457,7 +2559,7 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react39.default.createElement(
+    return /* @__PURE__ */ import_react37.default.createElement(
       Component,
       {
         key: id,
@@ -2466,7 +2568,7 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ import_react39.default.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((id2) => /* @__PURE__ */ import_react37.default.createElement(ItemInstance, { key: id2, id: id2 }))
     );
   } else {
     console.log(`Unknown element: ${type}`);
@@ -2475,7 +2577,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(
     "style",
     {
       id: "stitches",
@@ -2486,13 +2588,13 @@ var StitchesSSR = ({ stitchesInstance }) => {
   );
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react39.useContext)(WeaverseContext);
+  let context = (0, import_react37.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react39.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
+    return /* @__PURE__ */ import_react37.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react39.default.createElement(ItemComponent, { key: id, instance });
+  return /* @__PURE__ */ import_react37.default.createElement(ItemComponent, { key: id, instance });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {