@weaverse/react 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -87,6 +87,7 @@ import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect
 // src/constant/index.ts
 var TIMES = ["days", "hours", "minutes", "seconds"];
 var COUNTDOWN_KEY = "wv-cd-evergreen-start";
+var INSTAGRAM_API = "https://graph.instagram.com";
 
 // src/utils/index.ts
 function getTime(_seconds) {
@@ -289,46 +290,65 @@ Image.defaultProps = {
 };
 var image_default = Image;
 
-// src/elements/layout/index.tsx
+// src/elements/layout.tsx
 import React8, { forwardRef as forwardRef4 } from "react";
 
-// src/elements/layout/Background.tsx
+// src/components/background.tsx
 import React6 from "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__ */ React6.createElement("div", { style, className: "wv-layout-background" }, imgUrl && /* @__PURE__ */ React6.createElement(
+  if (backgroundImage || backgroundColor) {
+    return /* @__PURE__ */ React6.createElement("div", { style, className }, backgroundImage && /* @__PURE__ */ React6.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
 import React7 from "react";
 function Overlay(props) {
-  let { enableOverlay, overlayOpacity } = props;
+  let { enableOverlay, overlayOpacity, className } = props;
   if (enableOverlay) {
-    let style = {
-      ["--layout-overlay-opacity"]: overlayOpacity / 100
-    };
-    return /* @__PURE__ */ React7.createElement("div", { className: "wv-layout-overlay", style });
+    return /* @__PURE__ */ React7.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 = forwardRef4((props, ref) => {
   let {
     children,
@@ -359,10 +379,10 @@ var Layout = forwardRef4((props, ref) => {
   return /* @__PURE__ */ React8.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React8.createElement(
     Background,
     {
-      imgUrl: backgroundImage,
-      bgColor: backgroundColor,
-      objectFit,
-      objectPosition
+      backgroundImage,
+      backgroundColor,
+      backgroundFit: objectFit,
+      backgroundPosition: objectPosition
     }
   ), /* @__PURE__ */ React8.createElement(Overlay, { enableOverlay, overlayOpacity }), /* @__PURE__ */ React8.createElement("div", { "data-layout-content": true }, children));
 });
@@ -379,22 +399,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": {
@@ -474,7 +478,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",
@@ -491,14 +495,76 @@ Text.defaultProps = {
 };
 var text_default = Text;
 
+// src/elements/scrolling-text.tsx
+import React11 from "react";
+import { useState } from "react";
+var ScrollingText = React11.forwardRef((props, ref) => {
+  let { children, value, gap, speed, pauseOnHover, ...rest } = props;
+  let [playState, setPlayState] = 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__ */ React11.createElement("div", { ref, ...rest }, /* @__PURE__ */ React11.createElement("div", { className: "wv-scrolling-text__container", style, ...events }, Array.from({ length: 30 }).map((_, i) => /* @__PURE__ */ React11.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
-import React14, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
+import React15, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 
 // src/elements/video/html-video.tsx
-import React11 from "react";
+import React12 from "react";
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "video",
     {
       controls,
@@ -508,23 +574,23 @@ function HTMLVideo(props) {
       controlsList: "nodownload",
       disablePictureInPicture: true
     },
-    /* @__PURE__ */ React11.createElement("source", { src, type: type || "video/mp4" }),
-    /* @__PURE__ */ React11.createElement("source", { src, type: "video/ogg" }),
+    /* @__PURE__ */ React12.createElement("source", { src, type: type || "video/mp4" }),
+    /* @__PURE__ */ React12.createElement("source", { src, type: "video/ogg" }),
     "Your browser does not support the video tag."
   );
 }
 
 // src/elements/video/vimeo.tsx
-import React12 from "react";
+import React13 from "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__ */ React12.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
+  return /* @__PURE__ */ React13.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
 }
 
 // src/elements/video/youtube.tsx
-import React13 from "react";
+import React14 from "react";
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
   let params = new URLSearchParams({
@@ -535,7 +601,7 @@ 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__ */ React13.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
+  return /* @__PURE__ */ React14.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
 }
 
 // src/elements/video/index.tsx
@@ -556,15 +622,15 @@ var Video = forwardRef7((props, ref) => {
   let youtubeId = getYoutubeEmbedId(src);
   let vimeoId = getVimeoId(src);
   if (youtubeId) {
-    content = /* @__PURE__ */ React14.createElement(Youtube, { ...videoProps, youtubeId });
+    content = /* @__PURE__ */ React15.createElement(Youtube, { ...videoProps, youtubeId });
   } else if (vimeoId) {
-    content = /* @__PURE__ */ React14.createElement(Vimeo, { ...videoProps, vimeoId });
+    content = /* @__PURE__ */ React15.createElement(Vimeo, { ...videoProps, vimeoId });
   } else {
-    content = /* @__PURE__ */ React14.createElement(HTMLVideo, { ...videoProps });
+    content = /* @__PURE__ */ React15.createElement(HTMLVideo, { ...videoProps });
   }
-  return /* @__PURE__ */ React14.createElement("div", { ref, ...rest }, content);
+  return /* @__PURE__ */ React15.createElement("div", { ref, ...rest }, content);
 });
-var css8 = {
+var css9 = {
   "@desktop": {
     video: {
       height: "100%",
@@ -591,18 +657,23 @@ Video.defaultProps = {
 };
 var video_default = Video;
 
-// src/elements/slideshow/index.tsx
-import { css as stitchesCss } from "@stitches/react";
-import clsx5 from "clsx";
-import React20, { forwardRef as forwardRef8 } from "react";
+// src/elements/instagram.tsx
+import React25, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState3 } from "react";
 
-// src/components/slider/arrows.tsx
-import { styled } from "@stitches/react";
-import clsx2 from "clsx";
-import React17 from "react";
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
+import React18, { forwardRef as forwardRef8 } from "react";
 
 // src/components/icons/index.tsx
-import React16 from "react";
+import React17 from "react";
 
 // src/components/icons/phosphor.tsx
 var phosphor_exports = {};
@@ -612,8 +683,10 @@ __export(phosphor_exports, {
   Backpack: () => Backpack,
   CaretLeft: () => CaretLeft,
   CaretRight: () => CaretRight,
+  Circle: () => Circle,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
+  HandBag: () => HandBag,
   Image: () => Image2,
   Minus: () => Minus,
   Newspaper: () => Newspaper,
@@ -621,11 +694,27 @@ __export(phosphor_exports, {
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
   Storefront: () => Storefront,
+  Tag: () => Tag,
   X: () => X
 });
-import React15 from "react";
+import React16 from "react";
+var Circle = (props) => {
+  return /* @__PURE__ */ React16.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement("circle", { cx: "128", cy: "128", r: "104" })
+  );
+};
 var CircleNotch = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -633,7 +722,7 @@ var CircleNotch = (props) => {
       viewBox: "0 0 24 24",
       ...props
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         style: { opacity: ".25" },
@@ -644,7 +733,7 @@ var CircleNotch = (props) => {
         strokeWidth: "4"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         style: { opacity: ".75" },
@@ -655,7 +744,7 @@ var CircleNotch = (props) => {
   );
 };
 var X = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -665,8 +754,8 @@ var X = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "200",
@@ -680,7 +769,7 @@ var X = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "200",
@@ -697,37 +786,77 @@ var X = (props) => {
   );
 };
 var Minus = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.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__ */ React15.createElement("path", { d: "M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.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__ */ React15.createElement(
+  return /* @__PURE__ */ React16.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__ */ React15.createElement("path", { d: "M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z" })
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
+      "line",
+      {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    ),
+    /* @__PURE__ */ React16.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__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -737,8 +866,8 @@ var CaretLeft = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "160 208 80 128 160 48",
@@ -752,7 +881,7 @@ var CaretLeft = (props) => {
   );
 };
 var CaretRight = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -762,8 +891,8 @@ var CaretRight = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "96 48 176 128 96 208",
@@ -777,7 +906,7 @@ var CaretRight = (props) => {
   );
 };
 var ArrowLeft = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -787,8 +916,8 @@ var ArrowLeft = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "216",
@@ -802,7 +931,7 @@ var ArrowLeft = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "112 56 40 128 112 200",
@@ -816,7 +945,7 @@ var ArrowLeft = (props) => {
   );
 };
 var ArrowRight = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -826,8 +955,8 @@ var ArrowRight = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "40",
@@ -841,7 +970,7 @@ var ArrowRight = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "144 56 216 128 144 200",
@@ -855,7 +984,7 @@ var ArrowRight = (props) => {
   );
 };
 var Image2 = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -864,11 +993,11 @@ var Image2 = (props) => {
       viewBox: "0 0 640 512",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("path", { d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" })
+    /* @__PURE__ */ React16.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__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -878,8 +1007,8 @@ var ShoppingCart = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
@@ -890,7 +1019,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "80",
@@ -903,7 +1032,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "184",
@@ -916,7 +1045,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
@@ -930,7 +1059,7 @@ var ShoppingCart = (props) => {
   );
 };
 var Storefront = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -940,8 +1069,8 @@ var Storefront = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
@@ -952,7 +1081,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.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",
@@ -963,7 +1092,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M96,96v16a32,32,0,0,1-64,0V96",
@@ -974,7 +1103,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M160,96v16a32,32,0,0,1-64,0V96",
@@ -985,7 +1114,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M224,96v16a32,32,0,0,1-64,0V96",
@@ -999,7 +1128,7 @@ var Storefront = (props) => {
   );
 };
 var Package = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1009,8 +1138,8 @@ var Package = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.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",
@@ -1021,7 +1150,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "177 152.5 177 100.5 80 47",
@@ -1032,7 +1161,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "222.9 74.6 128.9 128 33.1 74.6",
@@ -1043,7 +1172,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "128.9",
@@ -1059,8 +1188,70 @@ var Package = (props) => {
     )
   );
 };
+var HandBag = (props) => {
+  return /* @__PURE__ */ React16.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.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__ */ React16.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__ */ React16.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.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__ */ React16.createElement("circle", { cx: "84", cy: "84", r: "12" })
+  );
+};
 var Backpack = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1070,8 +1261,8 @@ var Backpack = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.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",
@@ -1082,7 +1273,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
@@ -1093,7 +1284,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
@@ -1104,7 +1295,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "112",
@@ -1118,7 +1309,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "80",
@@ -1132,7 +1323,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "144",
@@ -1149,7 +1340,7 @@ var Backpack = (props) => {
   );
 };
 var Newspaper = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1159,8 +1350,8 @@ var Newspaper = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "96",
@@ -1174,7 +1365,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "96",
@@ -1188,7 +1379,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.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",
@@ -1199,7 +1390,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M32,200a16,16,0,0,1-16-16h0V88",
@@ -1213,7 +1404,7 @@ var Newspaper = (props) => {
   );
 };
 var Eye = (props) => {
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1223,8 +1414,8 @@ var Eye = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React15.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
@@ -1235,7 +1426,7 @@ var Eye = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "128",
@@ -1256,101 +1447,344 @@ import clsx from "clsx";
 function Icon({ name, className, ...props }) {
   let WeaverseIcon = phosphor_exports[name];
   let cls = clsx("wv-icon", className);
-  return /* @__PURE__ */ React16.createElement(WeaverseIcon, { className: cls, ...props });
+  return /* @__PURE__ */ React17.createElement(WeaverseIcon, { className: cls, ...props });
 }
 
-// src/components/slider/arrows.tsx
-function Arrows(props) {
-  let { currentSlide, instanceRef, className, icon, offset } = props;
-  let isFirst = currentSlide === 0;
-  let isLast = false;
-  if (instanceRef.current) {
-    isLast = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
-  }
-  let style = {
-    "--offset": `${offset}px`
-  };
-  return /* @__PURE__ */ React17.createElement(StyledArrows, { className, style }, /* @__PURE__ */ React17.createElement(
-    "button",
-    {
-      type: "button",
-      className: clsx2("arrow arrow--left", isFirst && "arrow--disabled"),
-      onClick: (e) => {
-        e.stopPropagation();
-        instanceRef?.current?.prev();
-      }
-    },
-    /* @__PURE__ */ React17.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
-  ), /* @__PURE__ */ React17.createElement(
-    "button",
-    {
-      type: "button",
-      className: clsx2("arrow arrow--right", isLast && "arrow--disabled"),
-      onClick: (e) => {
-        e.stopPropagation();
-        instanceRef?.current?.next();
-      }
-    },
-    /* @__PURE__ */ React17.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
-  ));
-}
-var StyledArrows = styled("div", {
-  ".arrow": {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    width: "44px",
-    height: "44px",
-    padding: "8px",
-    color: "#191919",
-    backgroundColor: "#f2f2f2",
-    textAlign: "center",
-    transition: "all 0.2s ease-in-out",
-    borderRadius: "4px",
-    border: "none",
-    cursor: "pointer",
-    "&:hover": {
-      backgroundColor: "#191919",
-      color: "#f2f2f2"
-    },
-    svg: {
-      verticalAlign: "middle",
-      width: "22px",
-      height: "22px"
-    },
-    "&.arrow--left": {
-      left: "var(--offset, 0px)"
-    },
-    "&.arrow--right": {
-      right: "var(--offset, 0px)"
-    },
-    "&.arrow--disabled": {
-      opacity: 0.5
-    }
-  },
-  "@media (max-width: 768px)": {
-    ".arrow": {
-      display: "none"
-    }
-  }
+// src/components/modal/styled.ts
+import { Content, Overlay as Overlay2, Title } from "@radix-ui/react-dialog";
+import { keyframes, styled } from "@stitches/react";
+var overlayShow = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = keyframes({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = styled(Overlay2, {
+  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 = styled(Title, {
+  margin: "0 0 24px",
+  fontWeight: 500,
+  fontSize: 24,
+  "@media (max-width: 768px)": {
+    margin: "0 0 16px",
+    fontSize: 20
+  }
+});
+var StyledContent = styled(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 = 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/slider/dots.tsx
-import { styled as styled2 } from "@stitches/react";
+// src/components/modal/use-open-change-effect.ts
+import { useContext as useContext4, useEffect as useEffect2 } from "react";
+function useOpenChangeEffect(props) {
+  let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = useContext4(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
+  useEffect2(() => {
+    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__ */ React18.createElement(
+    Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      ...rest
+    },
+    children
+  );
+};
+var ModalTrigger = Trigger;
+var ModalHeader = forwardRef8(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React18.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
+  }
+);
+var ModalContent = forwardRef8(
+  (props, ref) => {
+    let { children, size, portal, ...rest } = props;
+    let modalContent = /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(StyledOverlay, null), /* @__PURE__ */ React18.createElement(
+      StyledContent,
+      {
+        ...rest,
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        "data-wv-modal": true,
+        "data-size": size,
+        ref
+      },
+      /* @__PURE__ */ React18.createElement(ModalClose, null),
+      /* @__PURE__ */ React18.createElement("div", { className: "wv-modal-content" }, children)
+    ));
+    if (portal) {
+      return /* @__PURE__ */ React18.createElement(Portal, null, modalContent);
+    }
+    return modalContent;
+  }
+);
+ModalContent.defaultProps = {
+  size: "auto",
+  portal: false
+};
+var ModalClose = forwardRef8(
+  (props, ref) => {
+    let { asChild, children, ...rest } = props;
+    let closeIcon = /* @__PURE__ */ React18.createElement(StyledCloseIcon, null, /* @__PURE__ */ React18.createElement(Icon, { name: "X" }));
+    return /* @__PURE__ */ React18.createElement(Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
+  }
+);
+
+// src/components/spinner.tsx
+import React19 from "react";
+function Spinner() {
+  return /* @__PURE__ */ React19.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ React19.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
+}
+
+// src/components/tooltip.tsx
+import React20 from "react";
+function Tooltip({ children }) {
+  return /* @__PURE__ */ React20.createElement("span", { className: "wv-tooltip" }, children);
+}
+
+// src/components/slider/index.tsx
 import clsx3 from "clsx";
-import React18 from "react";
+import { useKeenSlider } from "keen-slider/react";
+import React22, { useState as useState2 } from "react";
+
+// src/components/slider/arrows.tsx
+import { styled as styled2 } from "@stitches/react";
+import clsx2 from "clsx";
+import React21 from "react";
+function Arrows(props) {
+  let { currentSlide, instanceRef, className, icon, offset } = props;
+  let isFirst = currentSlide === 0;
+  let isLast = false;
+  if (instanceRef.current) {
+    isLast = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
+  }
+  let style = {
+    "--offset": `${offset}px`
+  };
+  return /* @__PURE__ */ React21.createElement(StyledArrows, { className, style }, /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      type: "button",
+      className: clsx2("arrow arrow--left", isFirst && "arrow--disabled"),
+      onClick: (e) => {
+        e.stopPropagation();
+        instanceRef?.current?.prev();
+      }
+    },
+    /* @__PURE__ */ React21.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
+  ), /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      type: "button",
+      className: clsx2("arrow arrow--right", isLast && "arrow--disabled"),
+      onClick: (e) => {
+        e.stopPropagation();
+        instanceRef?.current?.next();
+      }
+    },
+    /* @__PURE__ */ React21.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
+  ));
+}
+var StyledArrows = styled2("div", {
+  ".arrow": {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "44px",
+    height: "44px",
+    padding: "8px",
+    color: "#191919",
+    backgroundColor: "#f2f2f2",
+    textAlign: "center",
+    transition: "all 0.2s ease-in-out",
+    borderRadius: "4px",
+    border: "none",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "#191919",
+      color: "#f2f2f2"
+    },
+    svg: {
+      verticalAlign: "middle",
+      width: "22px",
+      height: "22px"
+    },
+    "&.arrow--left": {
+      left: "var(--offset, 0px)"
+    },
+    "&.arrow--right": {
+      right: "var(--offset, 0px)"
+    },
+    "&.arrow--disabled": {
+      opacity: 0.5
+    }
+  },
+  "@media (max-width: 768px)": {
+    ".arrow": {
+      display: "none"
+    }
+  }
+});
+
+// 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] = useState2(0);
+  let [created, setCreated] = useState2(false);
+  let [ref, instanceRef] = 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 = clsx3("keen-slider", className);
+  let arrowsClass = clsx3(className && `${className}-arrows`);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("div", { ref, className: _className }, /* @__PURE__ */ React22.createElement(
+    "link",
+    {
+      rel: "stylesheet",
+      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+    }
+  ), children), created && instanceRef?.current && /* @__PURE__ */ React22.createElement(
+    Arrows,
+    {
+      currentSlide,
+      instanceRef,
+      className: arrowsClass,
+      offset: arrowOffset,
+      icon: "arrow"
+    }
+  ));
+}
+
+// src/components/slider/dots.tsx
+import { styled as styled3 } from "@stitches/react";
+import clsx4 from "clsx";
+import React23 from "react";
 function Dots(props) {
   let { currentSlide, instanceRef, className, absolute, position, color } = props;
-  let _className = clsx3(
+  let _className = clsx4(
     className,
     absolute && "dots--absolute",
     position && `dots--${position}`,
     color && `dots--${color}`
   );
-  return /* @__PURE__ */ React18.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+  return /* @__PURE__ */ React23.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
     (idx) => {
-      let className2 = clsx3("dot", currentSlide === idx && "dot--active");
-      return /* @__PURE__ */ React18.createElement(
+      let className2 = clsx4("dot", currentSlide === idx && "dot--active");
+      return /* @__PURE__ */ React23.createElement(
         "button",
         {
           key: idx,
@@ -1362,7 +1796,7 @@ function Dots(props) {
     }
   ));
 }
-var StyledDots = styled2("div", {
+var StyledDots = styled3("div", {
   padding: "10px 0",
   display: "flex",
   justifyContent: "center",
@@ -1407,10 +1841,6 @@ var StyledDots = styled2("div", {
   }
 });
 
-// src/elements/slideshow/use-slideshow-configs.ts
-import { useKeenSlider } from "keen-slider/react";
-import React19, { useContext as useContext4, useEffect as useEffect2, useState } from "react";
-
 // src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
@@ -1444,28 +1874,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
+import React24, { forwardRef as forwardRef9 } from "react";
+var Placeholder = forwardRef9(
+  (props, ref) => {
+    let { element, className, children, ...rest } = props;
+    return /* @__PURE__ */ React24.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ React24.createElement("div", { style: { fontWeight: 600, marginBottom: "10px" } }, element), /* @__PURE__ */ React24.createElement("div", null, children));
+  }
+);
+var placeholder_default = Placeholder;
+
+// src/components/index.ts
+var Components = {
+  Background,
+  Icon,
+  ModalComponents: modal_exports,
+  Overlay,
+  Placeholder: placeholder_default,
+  Spinner,
+  Slider,
+  Tooltip
+};
+var SliderComponents = {
+  Arrows,
+  Dots,
+  ResizePlugin,
+  AutoplayPlugin
+};
+
+// src/elements/instagram.tsx
+var Instagram = forwardRef10(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = useState3([]);
+    let [error, setError] = useState3(null);
+    useEffect3(() => {
+      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__ */ React25.createElement("div", { ref, ...rest }, /* @__PURE__ */ React25.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__ */ React25.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React25.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__ */ React25.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ React25.createElement("source", { src: media_url, type: "video/mp4" }));
+      }
+      return /* @__PURE__ */ React25.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React25.createElement("img", { alt: caption, src: media_url }));
+    })));
+  }
+);
+var css10 = {
+  // '@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
+import { css as stitchesCss } from "@stitches/react";
+import clsx6 from "clsx";
+import React27, { forwardRef as forwardRef11 } from "react";
+
+// src/elements/slideshow/use-slideshow-configs.ts
+import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
+import React26, { useContext as useContext5, useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/utils/css.ts
-import clsx4 from "clsx";
-function formatCSS(css11) {
+import clsx5 from "clsx";
+function formatCSS(css13) {
   return {
-    "@desktop": css11["@desktop"],
-    "@mobile": css11["@mobile"]
+    "@desktop": css13["@desktop"],
+    "@mobile": css13["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css11, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -1479,12 +2042,12 @@ function generateItemClassName(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css11) {
-    let formattedCss = formatCSS(css11);
+  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();
-    className = clsx4(permanentClass, cls, newStitchesClass, otherClass);
+    className = clsx5(permanentClass, cls, newStitchesClass, otherClass);
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -1513,19 +2076,19 @@ function useSlideshowConfigs(props) {
     changeSlidesEvery,
     children
   } = props;
-  let { isDesignMode, isPreviewMode } = useContext4(WeaverseContext);
-  let [opacities, setOpacities] = React19.useState([]);
-  let [cssLoaded, setCssLoaded] = useState(false);
-  let [created, setCreated] = useState(false);
-  let [ready, setReady] = useState(false);
-  let [currentSlide, setCurrentSlide] = useState(0);
+  let { isDesignMode, isPreviewMode } = useContext5(WeaverseContext);
+  let [opacities, setOpacities] = React26.useState([]);
+  let [cssLoaded, setCssLoaded] = useState4(false);
+  let [created, setCreated] = useState4(false);
+  let [ready, setReady] = useState4(false);
+  let [currentSlide, setCurrentSlide] = useState4(0);
   let sliderPlugins = [ResizePlugin];
   if (autoRotate && (isPreviewMode || !isDesignMode)) {
     sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
   }
-  let [sliderRef, instanceRef] = useKeenSlider(
+  let [sliderRef, instanceRef] = useKeenSlider2(
     {
-      slides: animation === "fade" ? React19.Children.count(children) : { perView: slidesPerView, number: React19.Children.count(children) },
+      slides: animation === "fade" ? React26.Children.count(children) : { perView: slidesPerView, number: React26.Children.count(children) },
       drag: isPreviewMode || !isDesignMode,
       loop,
       selector: animation === "fade" ? null : ".keen-slider__slide",
@@ -1555,13 +2118,13 @@ function useSlideshowConfigs(props) {
     },
     sliderPlugins
   );
-  useEffect2(() => {
+  useEffect4(() => {
     loadCSS({
       rel: "stylesheet",
       href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
     }).then(() => setCssLoaded(true));
   }, []);
-  useEffect2(() => {
+  useEffect4(() => {
     if (created && cssLoaded) {
       setReady(true);
     }
@@ -1577,7 +2140,7 @@ function useSlideshowConfigs(props) {
 }
 
 // src/elements/slideshow/index.tsx
-var Slideshow = forwardRef8((props, ref) => {
+var Slideshow = forwardRef11((props, ref) => {
   let {
     animation,
     showArrows,
@@ -1605,16 +2168,16 @@ var Slideshow = forwardRef8((props, ref) => {
       }, {})
     })().className;
   }
-  let _className = clsx5(
+  let _className = clsx6(
     faderClass,
     animation === "slide" ? "keen-slider" : "keen-fader"
   );
-  let arrowsClass = clsx5(
+  let arrowsClass = clsx6(
     "wv-slideshow--arrows",
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  return /* @__PURE__ */ React20.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React20.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React27.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React27.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React27.createElement(
     Arrows,
     {
       instanceRef,
@@ -1623,7 +2186,7 @@ var Slideshow = forwardRef8((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React20.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React27.createElement(
     Dots,
     {
       instanceRef,
@@ -1635,7 +2198,7 @@ var Slideshow = forwardRef8((props, ref) => {
     }
   ));
 });
-var css9 = {
+var css11 = {
   "@desktop": {
     opacity: "var(--slider-opacity, 0)",
     padding: "32px 0",
@@ -1694,90 +2257,17 @@ Slideshow.defaultProps = {
   showArrowsOnHover: false,
   arrowIcon: "caret",
   arrowsColor: "dark",
-  showDots: true,
-  dotsPosition: "bottom",
-  dotsColor: "dark",
-  loop: true,
-  autoRotate: false,
-  changeSlidesEvery: 5
-};
-var slideshow_default = Slideshow;
-
-// src/elements/slideshow/slide.tsx
-import React24, { forwardRef as forwardRef10 } from "react";
-
-// src/components/background.tsx
-import { styled as styled3 } from "@stitches/react";
-import React21 from "react";
-function Background2(props) {
-  let {
-    backgroundColor,
-    backgroundImage,
-    backgroundFit,
-    backgroundPosition,
-    className
-  } = props;
-  let style = {
-    ["--bg-color"]: backgroundColor,
-    ["--bg-fit"]: backgroundFit,
-    ["--bg-position"]: backgroundPosition
-  };
-  if (backgroundImage || backgroundColor) {
-    return /* @__PURE__ */ React21.createElement(StyledBackground, { style, className }, backgroundImage && /* @__PURE__ */ React21.createElement(
-      "img",
-      {
-        width: "100%",
-        height: "100%",
-        "data-blink-src": backgroundImage,
-        alt: "Background"
-      }
-    ));
-  }
-  return null;
-}
-var StyledBackground = styled3("div", {
-  display: "block !important",
-  position: "absolute",
-  inset: 0,
-  backgroundColor: "var(--bg-color)",
-  img: {
-    objectFit: "var(--bg-fit, cover)",
-    objectPosition: "var(--bg-position, 50% 50%)"
-  }
-});
-
-// src/components/overlay.tsx
-import { styled as styled4 } from "@stitches/react";
-import React22 from "react";
-function Overlay2(props) {
-  let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
-  if (enabled) {
-    return /* @__PURE__ */ React22.createElement(
-      StyledOverlay,
-      {
-        className,
-        css: { ["--overlay-opacity"]: opacity / 100 }
-      }
-    );
-  }
-  return null;
-}
-var StyledOverlay = styled4("div", {
-  display: "block !important",
-  position: "absolute",
-  inset: 0,
-  backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
-});
+  showDots: true,
+  dotsPosition: "bottom",
+  dotsColor: "dark",
+  loop: true,
+  autoRotate: false,
+  changeSlidesEvery: 5
+};
+var slideshow_default = Slideshow;
 
-// src/components/placeholder.tsx
-import React23, { forwardRef as forwardRef9 } from "react";
-var Placeholder = forwardRef9(
-  (props, ref) => {
-    let { element, className, children, ...rest } = props;
-    return /* @__PURE__ */ React23.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ React23.createElement("div", { style: { fontWeight: 600, marginBottom: "10px" } }, element), /* @__PURE__ */ React23.createElement("div", null, children));
-  }
-);
-var placeholder_default = Placeholder;
+// src/elements/slideshow/slide.tsx
+import React28, { forwardRef as forwardRef12 } from "react";
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -1820,7 +2310,7 @@ var slidePositionMap = {
 };
 
 // src/elements/slideshow/slide.tsx
-var Slide = forwardRef10((props, ref) => {
+var Slide = forwardRef12((props, ref) => {
   let {
     contentPosition,
     backgroundColor,
@@ -1832,8 +2322,8 @@ var Slide = forwardRef10((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ React24.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React24.createElement(
-    Background2,
+  return /* @__PURE__ */ React28.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React28.createElement(
+    Background,
     {
       backgroundColor,
       backgroundImage,
@@ -1841,16 +2331,16 @@ var Slide = forwardRef10((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ React24.createElement(
-    Overlay2,
+  ), /* @__PURE__ */ React28.createElement(
+    Overlay,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__PURE__ */ React24.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ React24.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
+  ), /* @__PURE__ */ React28.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ React28.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
 });
-var css10 = {
+var css12 = {
   "@desktop": {
     position: "relative",
     height: "100%",
@@ -1897,12 +2387,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: css10,
+    permanentCss
+  },
   Layout: {
     Component: layout_default,
     type: "layout",
@@ -1918,45 +2408,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: css9
+    defaultCss: css11
   },
   Slide: {
     Component: slide_default,
     type: "slide",
-    defaultCss: css10
+    defaultCss: css12
   }
 };
 
@@ -2002,271 +2472,14 @@ var WeaverseContext = 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
-});
-import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
-import React25, { forwardRef as forwardRef11 } from "react";
-
-// src/components/modal/styled.ts
-import { Content, Overlay as Overlay3, Title } from "@radix-ui/react-dialog";
-import { keyframes, styled as styled5 } from "@stitches/react";
-var overlayShow = keyframes({
-  "0%": { opacity: 0 },
-  "100%": { opacity: 1 }
-});
-var contentShow = keyframes({
-  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
-  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
-});
-var StyledOverlay2 = styled5(Overlay3, {
-  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 = styled5(Title, {
-  margin: "0 0 24px",
-  fontWeight: 500,
-  fontSize: 24,
-  "@media (max-width: 768px)": {
-    margin: "0 0 16px",
-    fontSize: 20
-  }
-});
-var StyledContent = styled5(Content, {
-  backgroundColor: "white",
-  borderRadius: 6,
-  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  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 = styled5("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
-import { useContext as useContext5, useEffect as useEffect3 } from "react";
-function useOpenChangeEffect(props) {
-  let { open, defaultOpen, onOpenChange } = props;
-  let rootCtx = useContext5(WeaverseContext);
-  let toggleRootzIndex = (open2) => {
-    let { contentRootElement } = rootCtx;
-    if (contentRootElement) {
-      if (open2) {
-        contentRootElement.classList.add("modal-open");
-      } else {
-        contentRootElement.classList.remove("modal-open");
-      }
-    }
-  };
-  useEffect3(() => {
-    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__ */ React25.createElement(
-    Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      ...rest
-    },
-    children
-  );
-};
-var ModalTrigger = Trigger;
-var ModalHeader = forwardRef11(
-  (props, ref) => {
-    let { children, ...rest } = props;
-    return /* @__PURE__ */ React25.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
-  }
-);
-var ModalContent = forwardRef11(
-  (props, ref) => {
-    let { children, size, portal, ...rest } = props;
-    let modalContent = /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(StyledOverlay2, null), /* @__PURE__ */ React25.createElement(
-      StyledContent,
-      {
-        ...rest,
-        onCloseAutoFocus: (e) => e.preventDefault(),
-        "data-wv-modal": true,
-        "data-size": size,
-        ref
-      },
-      /* @__PURE__ */ React25.createElement(ModalClose, null),
-      /* @__PURE__ */ React25.createElement("div", { className: "wv-modal-content" }, children)
-    ));
-    if (portal) {
-      return /* @__PURE__ */ React25.createElement(Portal, null, modalContent);
-    }
-    return modalContent;
-  }
-);
-ModalContent.defaultProps = {
-  size: "auto",
-  portal: false
-};
-var ModalClose = forwardRef11(
-  (props, ref) => {
-    let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ React25.createElement(StyledCloseIcon, null, /* @__PURE__ */ React25.createElement(Icon, { name: "X" }));
-    return /* @__PURE__ */ React25.createElement(Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
-  }
-);
-
-// src/components/spinner.tsx
-import React26 from "react";
-function Spinner() {
-  return /* @__PURE__ */ React26.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ React26.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
-}
-
-// src/components/tooltip.tsx
-import React27 from "react";
-function Tooltip({ children }) {
-  return /* @__PURE__ */ React27.createElement("span", { className: "wv-tooltip" }, children);
-}
-
-// src/components/slider/index.tsx
-import clsx6 from "clsx";
-import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
-import React28, { useState as useState2 } from "react";
-function Slider(props) {
-  let { children, className, gap, slidesPerView, arrowOffset } = props;
-  let [currentSlide, setCurrentSlide] = useState2(0);
-  let [created, setCreated] = useState2(false);
-  let [ref, instanceRef] = useKeenSlider2(
-    {
-      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 = clsx6("keen-slider", className);
-  let arrowsClass = clsx6(className && `${className}-arrows`);
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", { ref, className: _className }, /* @__PURE__ */ React28.createElement(
-    "link",
-    {
-      rel: "stylesheet",
-      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
-    }
-  ), children), created && instanceRef?.current && /* @__PURE__ */ React28.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
 import { isBrowser as isBrowser2 } from "@weaverse/core";
-import React29, { useContext as useContext6, useEffect as useEffect4, useRef, useState as useState3 } from "react";
+import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState5 } from "react";
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = useState3(context.data);
+  let [, setData] = useState5(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
-  useEffect4(() => {
+  useEffect5(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     initUploadCareAdaptiveDelivery(context.weaverseHost);
@@ -2292,9 +2505,9 @@ var WeaverseRoot = ({ context }) => {
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
-  let [data, setData] = useState3(instance.data);
-  let { id, type, childIds = [], css: css11, className, ...rest } = data;
-  useEffect4(() => {
+  let [data, setData] = useState5(instance.data);
+  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (isBrowser2 && !instance.ref.current) {