@weaverse/react 1.0.6 → 1.0.7

package/dist/index.mjs

@@ -290,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,
@@ -360,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));
 });
@@ -380,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": {
@@ -475,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",
@@ -492,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,
@@ -509,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({
@@ -536,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
@@ -557,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%",
@@ -593,7 +658,7 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React26, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState2 } from "react";
+import React25, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState3 } from "react";
 
 // src/components/modal/index.tsx
 var modal_exports = {};
@@ -605,10 +670,10 @@ __export(modal_exports, {
   ModalTrigger: () => ModalTrigger
 });
 import { Close, Portal, Root, Trigger } from "@radix-ui/react-dialog";
-import React17, { forwardRef as forwardRef8 } from "react";
+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 = {};
@@ -618,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,
@@ -627,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",
@@ -639,7 +722,7 @@ var CircleNotch = (props) => {
       viewBox: "0 0 24 24",
       ...props
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         style: { opacity: ".25" },
@@ -650,7 +733,7 @@ var CircleNotch = (props) => {
         strokeWidth: "4"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         style: { opacity: ".75" },
@@ -661,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",
@@ -671,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",
@@ -686,7 +769,7 @@ var X = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "200",
@@ -703,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",
@@ -743,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",
@@ -758,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",
@@ -768,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",
@@ -783,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",
@@ -793,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",
@@ -808,7 +931,7 @@ var ArrowLeft = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "112 56 40 128 112 200",
@@ -822,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",
@@ -832,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",
@@ -847,7 +970,7 @@ var ArrowRight = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "144 56 216 128 144 200",
@@ -861,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",
@@ -870,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",
@@ -884,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",
@@ -896,7 +1019,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "80",
@@ -909,7 +1032,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "184",
@@ -922,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",
@@ -936,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",
@@ -946,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",
@@ -958,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",
@@ -969,7 +1092,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M96,96v16a32,32,0,0,1-64,0V96",
@@ -980,7 +1103,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M160,96v16a32,32,0,0,1-64,0V96",
@@ -991,7 +1114,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M224,96v16a32,32,0,0,1-64,0V96",
@@ -1005,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",
@@ -1015,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",
@@ -1027,7 +1150,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "polyline",
       {
         points: "177 152.5 177 100.5 80 47",
@@ -1038,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",
@@ -1049,7 +1172,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "128.9",
@@ -1065,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",
@@ -1076,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",
@@ -1088,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",
@@ -1099,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",
@@ -1110,7 +1295,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "112",
@@ -1124,7 +1309,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "80",
@@ -1138,7 +1323,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "144",
@@ -1155,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",
@@ -1165,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",
@@ -1180,7 +1365,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "line",
       {
         x1: "96",
@@ -1194,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",
@@ -1205,7 +1390,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "path",
       {
         d: "M32,200a16,16,0,0,1-16-16h0V88",
@@ -1219,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",
@@ -1229,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",
@@ -1241,7 +1426,7 @@ var Eye = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
       "circle",
       {
         cx: "128",
@@ -1262,7 +1447,7 @@ 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/modal/styled.ts
@@ -1378,7 +1563,7 @@ function useOpenChangeEffect(props) {
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Root,
     {
       open,
@@ -1393,13 +1578,13 @@ var ModalTrigger = Trigger;
 var ModalHeader = forwardRef8(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ React17.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
+    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__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(StyledOverlay, null), /* @__PURE__ */ React17.createElement(
+    let modalContent = /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(StyledOverlay, null), /* @__PURE__ */ React18.createElement(
       StyledContent,
       {
         ...rest,
@@ -1408,11 +1593,11 @@ var ModalContent = forwardRef8(
         "data-size": size,
         ref
       },
-      /* @__PURE__ */ React17.createElement(ModalClose, null),
-      /* @__PURE__ */ React17.createElement("div", { className: "wv-modal-content" }, children)
+      /* @__PURE__ */ React18.createElement(ModalClose, null),
+      /* @__PURE__ */ React18.createElement("div", { className: "wv-modal-content" }, children)
     ));
     if (portal) {
-      return /* @__PURE__ */ React17.createElement(Portal, null, modalContent);
+      return /* @__PURE__ */ React18.createElement(Portal, null, modalContent);
     }
     return modalContent;
   }
@@ -1424,32 +1609,32 @@ ModalContent.defaultProps = {
 var ModalClose = forwardRef8(
   (props, ref) => {
     let { asChild, children, ...rest } = props;
-    let closeIcon = /* @__PURE__ */ React17.createElement(StyledCloseIcon, null, /* @__PURE__ */ React17.createElement(Icon, { name: "X" }));
-    return /* @__PURE__ */ React17.createElement(Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
+    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 React18 from "react";
+import React19 from "react";
 function Spinner() {
-  return /* @__PURE__ */ React18.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ React18.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
+  return /* @__PURE__ */ React19.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ React19.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
 }
 
 // src/components/tooltip.tsx
-import React19 from "react";
+import React20 from "react";
 function Tooltip({ children }) {
-  return /* @__PURE__ */ React19.createElement("span", { className: "wv-tooltip" }, children);
+  return /* @__PURE__ */ React20.createElement("span", { className: "wv-tooltip" }, children);
 }
 
 // src/components/slider/index.tsx
 import clsx3 from "clsx";
 import { useKeenSlider } from "keen-slider/react";
-import React21, { useState } from "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 React20 from "react";
+import React21 from "react";
 function Arrows(props) {
   let { currentSlide, instanceRef, className, icon, offset } = props;
   let isFirst = currentSlide === 0;
@@ -1460,7 +1645,7 @@ function Arrows(props) {
   let style = {
     "--offset": `${offset}px`
   };
-  return /* @__PURE__ */ React20.createElement(StyledArrows, { className, style }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(StyledArrows, { className, style }, /* @__PURE__ */ React21.createElement(
     "button",
     {
       type: "button",
@@ -1470,8 +1655,8 @@ function Arrows(props) {
         instanceRef?.current?.prev();
       }
     },
-    /* @__PURE__ */ React20.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
-  ), /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
+  ), /* @__PURE__ */ React21.createElement(
     "button",
     {
       type: "button",
@@ -1481,7 +1666,7 @@ function Arrows(props) {
         instanceRef?.current?.next();
       }
     },
-    /* @__PURE__ */ React20.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
+    /* @__PURE__ */ React21.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
   ));
 }
 var StyledArrows = styled2("div", {
@@ -1539,8 +1724,8 @@ var ResizePlugin = (slider) => {
 // src/components/slider/index.tsx
 function Slider(props) {
   let { children, className, gap, slidesPerView, arrowOffset } = props;
-  let [currentSlide, setCurrentSlide] = useState(0);
-  let [created, setCreated] = useState(false);
+  let [currentSlide, setCurrentSlide] = useState2(0);
+  let [created, setCreated] = useState2(false);
   let [ref, instanceRef] = useKeenSlider(
     {
       slides: { perView: slidesPerView, spacing: gap },
@@ -1566,13 +1751,13 @@ function Slider(props) {
   );
   let _className = clsx3("keen-slider", className);
   let arrowsClass = clsx3(className && `${className}-arrows`);
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("div", { ref, className: _className }, /* @__PURE__ */ React21.createElement(
+  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__ */ React21.createElement(
+  ), children), created && instanceRef?.current && /* @__PURE__ */ React22.createElement(
     Arrows,
     {
       currentSlide,
@@ -1584,73 +1769,10 @@ function Slider(props) {
   ));
 }
 
-// src/components/background.tsx
-import { styled as styled3 } from "@stitches/react";
-import React22 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__ */ React22.createElement(StyledBackground, { style, className }, backgroundImage && /* @__PURE__ */ React22.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 React23 from "react";
-function Overlay3(props) {
-  let { enableOverlay: enabled, overlayOpacity: opacity, className } = props;
-  if (enabled) {
-    return /* @__PURE__ */ React23.createElement(
-      StyledOverlay2,
-      {
-        className,
-        css: { ["--overlay-opacity"]: opacity / 100 }
-      }
-    );
-  }
-  return null;
-}
-var StyledOverlay2 = styled4("div", {
-  display: "block !important",
-  position: "absolute",
-  inset: 0,
-  backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
-});
-
 // src/components/slider/dots.tsx
-import { styled as styled5 } from "@stitches/react";
+import { styled as styled3 } from "@stitches/react";
 import clsx4 from "clsx";
-import React24 from "react";
+import React23 from "react";
 function Dots(props) {
   let { currentSlide, instanceRef, className, absolute, position, color } = props;
   let _className = clsx4(
@@ -1659,10 +1781,10 @@ function Dots(props) {
     position && `dots--${position}`,
     color && `dots--${color}`
   );
-  return /* @__PURE__ */ React24.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 = clsx4("dot", currentSlide === idx && "dot--active");
-      return /* @__PURE__ */ React24.createElement(
+      return /* @__PURE__ */ React23.createElement(
         "button",
         {
           key: idx,
@@ -1674,7 +1796,7 @@ function Dots(props) {
     }
   ));
 }
-var StyledDots = styled5("div", {
+var StyledDots = styled3("div", {
   padding: "10px 0",
   display: "flex",
   justifyContent: "center",
@@ -1753,21 +1875,21 @@ function AutoplayPlugin(changeSlidesEvery) {
 }
 
 // src/components/placeholder.tsx
-import React25, { forwardRef as forwardRef9 } from "react";
+import React24, { forwardRef as forwardRef9 } from "react";
 var Placeholder = forwardRef9(
   (props, ref) => {
     let { element, className, children, ...rest } = props;
-    return /* @__PURE__ */ React25.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ React25.createElement("div", { style: { fontWeight: 600, marginBottom: "10px" } }, element), /* @__PURE__ */ React25.createElement("div", null, children));
+    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: Background2,
+  Background,
   Icon,
   ModalComponents: modal_exports,
-  Overlay: Overlay3,
+  Overlay,
   Placeholder: placeholder_default,
   Spinner,
   Slider,
@@ -1784,8 +1906,8 @@ var SliderComponents = {
 var Instagram = forwardRef10(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = useState2([]);
-    let [error, setError] = useState2(null);
+    let [media, setMedia] = useState3([]);
+    let [error, setError] = useState3(null);
     useEffect3(() => {
       if (token) {
         let params = new URLSearchParams({
@@ -1803,13 +1925,13 @@ var Instagram = forwardRef10(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ React26.createElement("div", { ref, ...rest }, /* @__PURE__ */ React26.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
+      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__ */ React26.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React26.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
+    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,
@@ -1819,13 +1941,13 @@ var Instagram = forwardRef10(
         thumbnail_url
       } = item;
       if (media_type === "VIDEO") {
-        return /* @__PURE__ */ React26.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ React26.createElement("source", { src: media_url, type: "video/mp4" }));
+        return /* @__PURE__ */ React25.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ React25.createElement("source", { src: media_url, type: "video/mp4" }));
       }
-      return /* @__PURE__ */ React26.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React26.createElement("img", { alt: caption, src: media_url }));
+      return /* @__PURE__ */ React25.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React25.createElement("img", { alt: caption, src: media_url }));
     })));
   }
 );
-var css9 = {
+var css10 = {
   // '@desktop': {
   //   '.wv-ig-media-container': {
   //     overflow: 'hidden',
@@ -1890,23 +2012,23 @@ var instagram_default = Instagram;
 // src/elements/slideshow/index.tsx
 import { css as stitchesCss } from "@stitches/react";
 import clsx6 from "clsx";
-import React28, { forwardRef as forwardRef11 } from "react";
+import React27, { forwardRef as forwardRef11 } from "react";
 
 // src/elements/slideshow/use-slideshow-configs.ts
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
-import React27, { useContext as useContext5, useEffect as useEffect4, useState as useState3 } from "react";
+import React26, { useContext as useContext5, useEffect as useEffect4, useState as useState4 } from "react";
 
 // src/utils/css.ts
 import clsx5 from "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;
@@ -1920,8 +2042,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();
@@ -1955,18 +2077,18 @@ function useSlideshowConfigs(props) {
     children
   } = props;
   let { isDesignMode, isPreviewMode } = useContext5(WeaverseContext);
-  let [opacities, setOpacities] = React27.useState([]);
-  let [cssLoaded, setCssLoaded] = useState3(false);
-  let [created, setCreated] = useState3(false);
-  let [ready, setReady] = useState3(false);
-  let [currentSlide, setCurrentSlide] = useState3(0);
+  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] = useKeenSlider2(
     {
-      slides: animation === "fade" ? React27.Children.count(children) : { perView: slidesPerView, number: React27.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",
@@ -2055,7 +2177,7 @@ var Slideshow = forwardRef11((props, ref) => {
     showArrowsOnHover && "show-on-hover",
     `arrows--${arrowsColor}`
   );
-  return /* @__PURE__ */ React28.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ React28.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ React28.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,
@@ -2064,7 +2186,7 @@ var Slideshow = forwardRef11((props, ref) => {
       icon: arrowIcon,
       offset: 20
     }
-  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React28.createElement(
+  ), showDots && created && instanceRef?.current && /* @__PURE__ */ React27.createElement(
     Dots,
     {
       instanceRef,
@@ -2076,7 +2198,7 @@ var Slideshow = forwardRef11((props, ref) => {
     }
   ));
 });
-var css10 = {
+var css11 = {
   "@desktop": {
     opacity: "var(--slider-opacity, 0)",
     padding: "32px 0",
@@ -2145,7 +2267,7 @@ Slideshow.defaultProps = {
 var slideshow_default = Slideshow;
 
 // src/elements/slideshow/slide.tsx
-import React29, { forwardRef as forwardRef12 } from "react";
+import React28, { forwardRef as forwardRef12 } from "react";
 
 // src/elements/slideshow/position.ts
 var slidePositionMap = {
@@ -2200,8 +2322,8 @@ var Slide = forwardRef12((props, ref) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ React29.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React29.createElement(
-    Background2,
+  return /* @__PURE__ */ React28.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ React28.createElement(
+    Background,
     {
       backgroundColor,
       backgroundImage,
@@ -2209,16 +2331,16 @@ var Slide = forwardRef12((props, ref) => {
       backgroundPosition,
       className: "slide-background"
     }
-  ), /* @__PURE__ */ React29.createElement(
-    Overlay3,
+  ), /* @__PURE__ */ React28.createElement(
+    Overlay,
     {
       enableOverlay,
       overlayOpacity,
       className: "slide-overlay"
     }
-  ), /* @__PURE__ */ React29.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ React29.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 css11 = {
+var css12 = {
   "@desktop": {
     position: "relative",
     height: "100%",
@@ -2268,7 +2390,7 @@ var Elements = {
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css9,
+    defaultCss: css10,
     permanentCss
   },
   Layout: {
@@ -2286,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: css10
+    defaultCss: css11
   },
   Slide: {
     Component: slide_default,
     type: "slide",
-    defaultCss: css11
+    defaultCss: css12
   }
 };
 
@@ -2372,9 +2474,9 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser as isBrowser2 } from "@weaverse/core";
-import React30, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState4 } from "react";
+import React29, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState5 } from "react";
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = useState4(context.data);
+  let [, setData] = useState5(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
   useEffect5(() => {
@@ -2388,23 +2490,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.data?.rootId) {
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React29.createElement(
       "div",
       {
         className: `weaverse-content-root ${themeClass}`,
         ...eventHandlers,
         ref: rootRef
       },
-      /* @__PURE__ */ React30.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ React30.createElement(ItemInstance, { id: context.data.rootId })),
-      context.platformType === "react-ssr" ? /* @__PURE__ */ React30.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
+      /* @__PURE__ */ React29.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ React29.createElement(ItemInstance, { id: context.data.rootId })),
+      context.platformType === "react-ssr" ? /* @__PURE__ */ React29.createElement(StitchesSSR, { stitchesInstance: context.stitchesInstance }) : null
     );
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
-  let [data, setData] = useState4(instance.data);
-  let { id, type, childIds = [], css: css12, className, ...rest } = data;
+  let [data, setData] = useState5(instance.data);
+  let { id, type, childIds = [], css: css13, className, ...rest } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -2421,7 +2523,7 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React29.createElement(
       Component,
       {
         key: id,
@@ -2430,7 +2532,7 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((id2) => /* @__PURE__ */ React29.createElement(ItemInstance, { key: id2, id: id2 }))
     );
   } else {
     console.log(`Unknown element: ${type}`);
@@ -2439,7 +2541,7 @@ var ItemComponent = ({ instance }) => {
 };
 var StitchesSSR = ({ stitchesInstance }) => {
   const stitchesCss2 = stitchesInstance.getCssText();
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "style",
     {
       id: "stitches",
@@ -2454,9 +2556,9 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React30.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
+    return /* @__PURE__ */ React29.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React30.createElement(ItemComponent, { key: id, instance });
+  return /* @__PURE__ */ React29.createElement(ItemComponent, { key: id, instance });
 };
 export {
   Components,