@weaverse/react 1.0.32 → 1.0.34

package/dist/index.mjs

@@ -62,649 +62,255 @@ var css = {
 var button_default = Button;
 
 // src/elements/container.tsx
-import React2, { forwardRef as forwardRef2 } from "react";
-var Container = forwardRef2(
-  (props, ref) => {
-    let { children, ...rest } = props;
-    return /* @__PURE__ */ React2.createElement("div", { ref, ...rest }, children);
-  }
-);
-var css2 = {
-  "@desktop": {
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-    gridArea: "1 / 1 / 3 / 6",
-    overflow: "hidden",
-    // minWidth: '300px',
-    minHeight: "100px"
-  },
-  "@mobile": {
-    minHeight: "100px"
-  }
-};
-Container.defaultProps = {};
-var container_default = Container;
-
-// src/elements/countdown/index.tsx
-import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
-
-// src/constant/index.ts
-var TIMES = ["days", "hours", "minutes", "seconds"];
-var COUNTDOWN_KEY = "wv-cd-evergreen-start";
-var INSTAGRAM_API = "https://graph.instagram.com";
+import React14, { Children, forwardRef as forwardRef4 } from "react";
 
-// src/utils/index.ts
-function getTime(_seconds) {
-  let ONE_MINUTE = 60 * 1e3;
-  let ONE_HOUR = 60 * ONE_MINUTE;
-  let ONE_DAY = 24 * ONE_HOUR;
-  let days = Math.floor(_seconds / ONE_DAY);
-  let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
-  let minutes = Math.floor(
-    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
-  );
-  let seconds = Math.floor(
-    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
-  );
-  return { days, hours, minutes, seconds };
-}
-function getYoutubeEmbedId(url) {
-  const match = url.match(
-    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
-  );
-  return match ? match[1] : null;
-}
-function getVimeoId(url) {
-  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
-  return match ? match[1] : null;
-}
+// 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 React4, { forwardRef as forwardRef2 } from "react";
 
-// src/elements/countdown/timer-block.tsx
+// src/components/icons/index.tsx
 import React3 from "react";
-function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ React3.createElement("div", { className: "wv-cd-block" }, /* @__PURE__ */ React3.createElement("div", { className: "wv-cd-number" }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", { className: "wv-cd-label" }, label));
-}
 
-// src/elements/countdown/index.tsx
-var Countdown = forwardRef3(
-  (props, ref) => {
-    const { isDesignMode } = useContext2(WeaverseContext);
-    let {
-      timerType,
-      startTime: startTimeProp,
-      endTime: endTimeProp,
-      periods: periodsProp,
-      redirectWhenTimerStops,
-      redirectUrl,
-      openInNewTab,
-      showColon,
-      showLabel,
-      ...rest
-    } = props;
-    const [remaining, setRemaining] = React4.useState(0);
-    let periods = periodsProp * 60 * 1e3;
-    const handleEnd = () => {
-      if (!isDesignMode && redirectWhenTimerStops && redirectUrl)
-        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
-    };
-    const getStartTime = () => {
-      let startTime = startTimeProp;
-      if (timerType === "evergreen") {
-        const start = localStorage.getItem(COUNTDOWN_KEY);
-        if (start) {
-          startTime = Number.parseInt(start);
-          if (startTime + periods < Date.now()) {
-            startTime = Date.now();
-            localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
-          }
-        } else {
-          startTime = Date.now();
-          localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
-        }
-      }
-      return startTime;
-    };
-    const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
-    const handleRemaining = () => {
-      let startTime = getStartTime();
-      let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
-      let isActive = checkActive(startTime);
-      const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
-      if (remainingTime > 0 && remainingTime < 1e3) {
-        handleEnd();
+// src/components/icons/phosphor.tsx
+var phosphor_exports = {};
+__export(phosphor_exports, {
+  ArrowLeft: () => ArrowLeft,
+  ArrowRight: () => ArrowRight,
+  Backpack: () => Backpack,
+  CaretLeft: () => CaretLeft,
+  CaretRight: () => CaretRight,
+  Circle: () => Circle,
+  CircleNotch: () => CircleNotch,
+  Eye: () => Eye,
+  HandBag: () => HandBag,
+  Image: () => Image,
+  Minus: () => Minus,
+  Newspaper: () => Newspaper,
+  Package: () => Package,
+  Plus: () => Plus,
+  ShoppingCart: () => ShoppingCart,
+  Storefront: () => Storefront,
+  Tag: () => Tag,
+  X: () => X
+});
+import React2 from "react";
+var Circle = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement("circle", { cx: "128", cy: "128", r: "104" })
+  );
+};
+var CircleNotch = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement(
+      "circle",
+      {
+        style: { opacity: ".25" },
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
       }
-      setRemaining(remainingTime);
-    };
-    useEffect(() => {
-      let intervalFlag = setInterval(
-        handleRemaining,
-        1e3
-      );
-      return () => {
-        clearInterval(intervalFlag);
-      };
-    }, [startTimeProp, endTimeProp, periods, timerType]);
-    const timer = getTime(remaining);
-    return /* @__PURE__ */ React4.createElement("div", { ref, ...rest }, TIMES.map((time) => {
-      return /* @__PURE__ */ React4.createElement(React4.Fragment, { key: time }, /* @__PURE__ */ React4.createElement(
-        TimerBlock,
-        {
-          label: showLabel ? time : "",
-          value: remaining === 0 ? "--" : timer[time]
-        }
-      ), time !== "seconds" && /* @__PURE__ */ React4.createElement("div", { className: "wv-cd-separator" }, showColon && /* @__PURE__ */ React4.createElement("span", null, ":")));
-    }));
-  }
-);
-var css3 = {
-  "@desktop": {
-    fontSize: "36px",
-    fontWeight: 500,
-    display: "flex",
-    alignItems: "center",
-    overflow: "hidden",
-    justifyContent: "center",
-    gap: 10,
-    lineHeight: "initial",
-    ".wv-cd-block": {
-      width: 48,
-      textAlign: "center",
-      ".wv-cd-label": {
-        fontSize: 10
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        style: { opacity: ".75" },
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       }
+    )
+  );
+};
+var X = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
     },
-    ".wv-cd-separator": {
-      span: {
-        lineHeight: "100%"
-      },
-      ".hidden": {
-        visibility: "hidden"
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
+      "line",
+      {
+        x1: "200",
+        y1: "56",
+        x2: "56",
+        y2: "200",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "12"
       }
-    }
-  }
-};
-Countdown.defaultProps = {
-  timerType: "fixed-time",
-  startTime: Date.now(),
-  endTime: Date.now() + 1e3 * 60 * 60 * 24,
-  periods: 90,
-  redirectWhenTimerStops: false,
-  redirectUrl: "",
-  openInNewTab: false,
-  showLabel: true,
-  showColon: true
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "line",
+      {
+        x1: "200",
+        y1: "200",
+        x2: "56",
+        y2: "56",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "12"
+      }
+    )
+  );
 };
-var countdown_default = Countdown;
-
-// src/elements/image.tsx
-import React5 from "react";
-var Image = React5.forwardRef(
-  (props, ref) => {
-    let {
-      src,
-      alt,
-      objectFit,
-      objectPosition,
-      clickAction,
-      openLinkInNewTab,
-      linkTo,
-      ...rest
-    } = props;
-    let style = {
-      "--img-object-fit": objectFit,
-      "--img-object-position": objectPosition
-    };
-    let content = /* @__PURE__ */ React5.createElement("img", { alt, "data-blink-src": src });
-    if (clickAction === "openLink" && linkTo) {
-      content = /* @__PURE__ */ React5.createElement(
-        "a",
-        {
-          href: linkTo,
-          target: openLinkInNewTab ? "_blank" : "_self",
-          rel: "noreferrer"
-        },
-        /* @__PURE__ */ React5.createElement("img", { alt, "data-blink-src": src })
-      );
-    }
-    return /* @__PURE__ */ React5.createElement("div", { ref, style, ...rest }, content);
-  }
-);
-var css4 = {
-  "@desktop": {
-    display: "flex",
-    overflow: "hidden",
-    justifyContent: "center",
-    alignItems: "center",
-    img: {
-      width: "100%",
-      height: "100%",
-      objectFit: "var(--img-object-fit, cover)",
-      objectPosition: "var(--img-object-position, center)"
-    }
-  }
-};
-Image.defaultProps = {
-  src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
-  alt: "Alternative information",
-  objectFit: "cover",
-  objectPosition: "center center",
-  clickAction: "none",
-  openLinkInNewTab: false,
-  linkTo: ""
+var Minus = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
+      "line",
+      {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
 };
-var image_default = Image;
-
-// src/elements/layout.tsx
-import React8, { forwardRef as forwardRef4 } from "react";
-
-// src/components/background.tsx
-import React6 from "react";
-function Background(props) {
-  let {
-    backgroundColor,
-    backgroundImage,
-    backgroundFit,
-    backgroundPosition,
-    className
-  } = props;
-  let style = {
-    display: "block",
-    position: "absolute",
-    inset: 0,
-    backgroundColor
-  };
-  if (backgroundImage || backgroundColor) {
-    return /* @__PURE__ */ React6.createElement("div", { style, className }, backgroundImage && /* @__PURE__ */ React6.createElement(
-      "img",
+var Plus = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
+      "line",
       {
-        width: "100%",
-        height: "100%",
-        "data-blink-src": backgroundImage,
-        alt: "Background",
-        style: {
-          objectFit: backgroundFit,
-          objectPosition: backgroundPosition
-        }
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
       }
-    ));
-  }
-  return null;
-}
-
-// src/components/overlay.tsx
-import React7 from "react";
-function Overlay(props) {
-  let { enableOverlay, overlayOpacity, className } = props;
-  if (enableOverlay) {
-    return /* @__PURE__ */ React7.createElement(
-      "div",
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "line",
       {
-        className,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "block",
-          backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})`
-        }
+        x1: "128",
+        y1: "40",
+        x2: "128",
+        y2: "216",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
       }
-    );
-  }
-  return null;
-}
-
-// src/elements/layout.tsx
-var Layout = forwardRef4((props, ref) => {
-  let {
-    children,
-    rows,
-    gap,
-    rowSize,
-    columns,
-    contentSize,
-    gridSize,
-    backgroundColor,
-    backgroundImage,
-    objectFit,
-    objectPosition,
-    enableOverlay,
-    overlayOpacity,
-    ...rest
-  } = props;
-  let style = {
-    "--layout-content-width": "100vw",
-    "--content-size": contentSize + "px",
-    "--grid-size": gridSize + "px",
-    "--rows": rows,
-    "--columns": columns,
-    "--gap": gap + "px",
-    "--row-size": rowSize + "px",
-    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
-  };
-  return /* @__PURE__ */ React8.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React8.createElement(
-    Background,
-    {
-      backgroundImage,
-      backgroundColor,
-      backgroundFit: objectFit,
-      backgroundPosition: objectPosition
-    }
-  ), /* @__PURE__ */ React8.createElement(Overlay, { enableOverlay, overlayOpacity }), /* @__PURE__ */ React8.createElement("div", { "data-layout-content": true }, children));
-});
-var css5 = {
-  "@desktop": {
-    position: "relative",
-    "> [data-layout-content]": {
-      // paddingTop: 'var(--gap)',
-      // paddingBottom: 'var(--gap)',
-      margin: "0 auto",
-      display: "grid",
-      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-      gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
-      gridAutoRows: "var(--row-size)",
-      gap: "var(--gap)",
-      maxWidth: "var(--layout-content-width)"
-    }
-  },
-  "@mobile": {
-    padding: "0 16px",
-    "> [data-layout-content]": {
-      display: "flex",
-      flexDirection: "column"
-    }
-  }
+    )
+  );
 };
-Layout.defaultProps = {
-  contentSize: 1600,
-  gridSize: 1224,
-  rows: 16,
-  columns: 12,
-  gap: 16,
-  rowSize: 48,
-  objectFit: "cover",
-  objectPosition: "center center",
-  enableOverlay: false,
-  overlayOpacity: 30
+var CaretLeft = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
+      "polyline",
+      {
+        points: "160 208 80 128 160 48",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
+      }
+    )
+  );
 };
-var layout_default = Layout;
-
-// src/elements/map.tsx
-import React9, { forwardRef as forwardRef5 } from "react";
-var Map = forwardRef5((props, ref) => {
-  let { place, zoom, ...rest } = props;
-  return /* @__PURE__ */ React9.createElement("div", { ref, ...rest }, /* @__PURE__ */ React9.createElement(
-    "iframe",
+var CaretRight = (props) => {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
     {
-      loading: "lazy",
-      width: "100%",
-      height: "100%",
-      title: "map",
-      src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-      style: { pointerEvents: "none" }
-    }
-  ));
-});
-var css6 = {
-  "@desktop": {
-    iframe: {
-      border: "none"
-    }
-  },
-  "@mobile": {
-    iframe: {
-      border: "none"
-    }
-  }
-};
-Map.defaultProps = {
-  place: "Hanoi",
-  zoom: 14
-};
-var map_default = Map;
-
-// src/elements/text.tsx
-import * as React10 from "react";
-var Text = React10.forwardRef(
-  (props, ref) => {
-    let { children, value, ...rest } = props;
-    return /* @__PURE__ */ React10.createElement("div", { ref, ...rest }, /* @__PURE__ */ React10.createElement(
-      "div",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "192",
+      height: "192",
+      fill: "currentColor",
+      viewBox: "0 0 256 256",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
+      "polyline",
       {
-        className: "wv-text-content",
-        dangerouslySetInnerHTML: { __html: value }
-      }
-    ));
-  }
-);
-var css7 = {
-  "@desktop": {
-    display: "flex",
-    padding: "10px",
-    overflow: "hidden",
-    ".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"
-      }
-    }
-  }
-};
-Text.defaultProps = {
-  value: "<p>The quick brown fox jumps over the lazy dog</p>"
-};
-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"
-        }
+        points: "96 48 176 128 96 208",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "16"
       }
-    }
-  }
-};
-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 React15, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
-
-// src/elements/video/html-video.tsx
-import React12 from "react";
-function HTMLVideo(props) {
-  let { src, type, controls, autoPlay, loop, muted } = props;
-  return /* @__PURE__ */ React12.createElement(
-    "video",
-    {
-      controls,
-      autoPlay,
-      loop,
-      muted,
-      controlsList: "nodownload",
-      disablePictureInPicture: true
-    },
-    /* @__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 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__ */ React13.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
-}
-
-// src/elements/video/youtube.tsx
-import React14 from "react";
-function Youtube(props) {
-  let { youtubeId, controls, autoPlay, loop, muted } = props;
-  let params = new URLSearchParams({
-    autoplay: autoPlay ? "1" : "0",
-    controls: controls ? "1" : "0",
-    loop: loop ? "1" : "0",
-    mute: muted ? "1" : "0"
-  });
-  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__ */ React14.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
-}
-
-// src/elements/video/index.tsx
-var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext3(WeaverseContext);
-  let {
-    src,
-    controls,
-    poster,
-    autoPlay: originAutoPlay,
-    loop,
-    muted,
-    ...rest
-  } = props;
-  let autoPlay = !isDesignMode && originAutoPlay;
-  let videoProps = { src, controls, poster, autoPlay, loop, muted };
-  let content;
-  let youtubeId = getYoutubeEmbedId(src);
-  let vimeoId = getVimeoId(src);
-  if (youtubeId) {
-    content = /* @__PURE__ */ React15.createElement(Youtube, { ...videoProps, youtubeId });
-  } else if (vimeoId) {
-    content = /* @__PURE__ */ React15.createElement(Vimeo, { ...videoProps, vimeoId });
-  } else {
-    content = /* @__PURE__ */ React15.createElement(HTMLVideo, { ...videoProps });
-  }
-  return /* @__PURE__ */ React15.createElement("div", { ref, ...rest }, content);
-});
-var css9 = {
-  "@desktop": {
-    video: {
-      height: "100%",
-      width: "100%",
-      aspectRatio: "16 / 9"
-    },
-    iframe: {
-      border: "none"
-    }
-  },
-  "@mobile": {
-    iframe: {
-      border: "none"
-    }
-  }
-};
-Video.defaultProps = {
-  src: "https://youtu.be/wM-NT6hcw48",
-  poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
-  loop: false,
-  controls: false,
-  autoPlay: true,
-  muted: true
 };
-var video_default = Video;
-
-// src/elements/instagram.tsx
-import React26, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState4 } 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 React17 from "react";
-
-// src/components/icons/phosphor.tsx
-var phosphor_exports = {};
-__export(phosphor_exports, {
-  ArrowLeft: () => ArrowLeft,
-  ArrowRight: () => ArrowRight,
-  Backpack: () => Backpack,
-  CaretLeft: () => CaretLeft,
-  CaretRight: () => CaretRight,
-  Circle: () => Circle,
-  CircleNotch: () => CircleNotch,
-  Eye: () => Eye,
-  HandBag: () => HandBag,
-  Image: () => Image2,
-  Minus: () => Minus,
-  Newspaper: () => Newspaper,
-  Package: () => Package,
-  Plus: () => Plus,
-  ShoppingCart: () => ShoppingCart,
-  Storefront: () => Storefront,
-  Tag: () => Tag,
-  X: () => X
-});
-import React16 from "react";
-var Circle = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+var ArrowLeft = (props) => {
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -714,215 +320,8 @@ var Circle = (props) => {
       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__ */ React16.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      ...props
-    },
-    /* @__PURE__ */ React16.createElement(
-      "circle",
-      {
-        style: { opacity: ".25" },
-        cx: "12",
-        cy: "12",
-        r: "10",
-        stroke: "currentColor",
-        strokeWidth: "4"
-      }
-    ),
-    /* @__PURE__ */ React16.createElement(
-      "path",
-      {
-        style: { opacity: ".75" },
-        fill: "currentColor",
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      }
-    )
-  );
-};
-var X = (props) => {
-  return /* @__PURE__ */ React16.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "20",
-      height: "20",
-      fill: "currentColor",
-      viewBox: "0 0 256 256",
-      ...props
-    },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
-      "line",
-      {
-        x1: "200",
-        y1: "56",
-        x2: "56",
-        y2: "200",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "12"
-      }
-    ),
-    /* @__PURE__ */ React16.createElement(
-      "line",
-      {
-        x1: "200",
-        y1: "200",
-        x2: "56",
-        y2: "56",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "12"
-      }
-    )
-  );
-};
-var Minus = (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(
-      "line",
-      {
-        x1: "40",
-        y1: "128",
-        x2: "216",
-        y2: "128",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "16"
-      }
-    )
-  );
-};
-var Plus = (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(
-      "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__ */ 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(
-      "polyline",
-      {
-        points: "160 208 80 128 160 48",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "16"
-      }
-    )
-  );
-};
-var CaretRight = (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(
-      "polyline",
-      {
-        points: "96 48 176 128 96 208",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "16"
-      }
-    )
-  );
-};
-var ArrowLeft = (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(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "216",
@@ -936,7 +335,7 @@ var ArrowLeft = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "polyline",
       {
         points: "112 56 40 128 112 200",
@@ -950,7 +349,7 @@ var ArrowLeft = (props) => {
   );
 };
 var ArrowRight = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -960,8 +359,8 @@ var ArrowRight = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "40",
@@ -975,7 +374,7 @@ var ArrowRight = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "polyline",
       {
         points: "144 56 216 128 144 200",
@@ -988,8 +387,8 @@ var ArrowRight = (props) => {
     )
   );
 };
-var Image2 = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+var Image = (props) => {
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -998,11 +397,11 @@ var Image2 = (props) => {
       viewBox: "0 0 640 512",
       ...props
     },
-    /* @__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" })
+    /* @__PURE__ */ React2.createElement("path", { d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" })
   );
 };
 var ShoppingCart = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1012,8 +411,8 @@ var ShoppingCart = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
@@ -1024,7 +423,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "circle",
       {
         cx: "80",
@@ -1037,7 +436,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "circle",
       {
         cx: "184",
@@ -1050,7 +449,7 @@ var ShoppingCart = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
@@ -1064,7 +463,7 @@ var ShoppingCart = (props) => {
   );
 };
 var Storefront = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1074,8 +473,8 @@ var Storefront = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
@@ -1086,7 +485,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.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",
@@ -1097,7 +496,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M96,96v16a32,32,0,0,1-64,0V96",
@@ -1108,7 +507,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M160,96v16a32,32,0,0,1-64,0V96",
@@ -1119,7 +518,7 @@ var Storefront = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M224,96v16a32,32,0,0,1-64,0V96",
@@ -1133,7 +532,7 @@ var Storefront = (props) => {
   );
 };
 var Package = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1143,8 +542,8 @@ var Package = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.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",
@@ -1155,7 +554,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "polyline",
       {
         points: "177 152.5 177 100.5 80 47",
@@ -1166,7 +565,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "polyline",
       {
         points: "222.9 74.6 128.9 128 33.1 74.6",
@@ -1177,7 +576,7 @@ var Package = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "128.9",
@@ -1194,7 +593,7 @@ var Package = (props) => {
   );
 };
 var HandBag = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1204,8 +603,8 @@ var HandBag = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.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",
@@ -1216,7 +615,7 @@ var HandBag = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M88,104V72a40,40,0,0,1,80,0v32",
@@ -1230,7 +629,7 @@ var HandBag = (props) => {
   );
 };
 var Tag = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1240,8 +639,8 @@ var Tag = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.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",
@@ -1252,11 +651,11 @@ var Tag = (props) => {
         strokeWidth: "16"
       }
     ),
-    /* @__PURE__ */ React16.createElement("circle", { cx: "84", cy: "84", r: "12" })
+    /* @__PURE__ */ React2.createElement("circle", { cx: "84", cy: "84", r: "12" })
   );
 };
 var Backpack = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1266,8 +665,8 @@ var Backpack = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.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",
@@ -1278,7 +677,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
@@ -1289,7 +688,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
@@ -1300,7 +699,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "112",
@@ -1314,7 +713,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "80",
@@ -1328,7 +727,7 @@ var Backpack = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "144",
@@ -1345,7 +744,7 @@ var Backpack = (props) => {
   );
 };
 var Newspaper = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1355,8 +754,8 @@ var Newspaper = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "96",
@@ -1370,7 +769,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "line",
       {
         x1: "96",
@@ -1384,7 +783,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.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",
@@ -1395,7 +794,7 @@ var Newspaper = (props) => {
         strokeWidth: "8"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M32,200a16,16,0,0,1-16-16h0V88",
@@ -1409,7 +808,7 @@ var Newspaper = (props) => {
   );
 };
 var Eye = (props) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React2.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1419,8 +818,8 @@ var Eye = (props) => {
       viewBox: "0 0 256 256",
       ...props
     },
-    /* @__PURE__ */ React16.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    /* @__PURE__ */ React2.createElement(
       "path",
       {
         d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
@@ -1431,515 +830,1114 @@ var Eye = (props) => {
         strokeWidth: "12"
       }
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React2.createElement(
       "circle",
       {
-        cx: "128",
-        cy: "128",
-        r: "40",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "12"
+        cx: "128",
+        cy: "128",
+        r: "40",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "12"
+      }
+    )
+  );
+};
+
+// src/components/icons/index.tsx
+import clsx from "clsx";
+function Icon({ name, className, ...props }) {
+  let WeaverseIcon = phosphor_exports[name];
+  let cls = clsx("wv-icon", className);
+  return /* @__PURE__ */ React3.createElement(WeaverseIcon, { className: cls, ...props });
+}
+
+// src/components/modal/styled.ts
+import { Content, Overlay, 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(Overlay, {
+  display: "block !important",
+  backgroundColor: "rgba(0, 0, 0, .3)",
+  position: "fixed",
+  zIndex: 99999,
+  inset: 0,
+  animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
+});
+var StyledTitle = 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/modal/use-open-change-effect.ts
+import { useContext as useContext2, useEffect } from "react";
+function useOpenChangeEffect(props) {
+  let { open, defaultOpen, onOpenChange } = props;
+  let rootCtx = useContext2(WeaverseContext);
+  let toggleRootzIndex = (open2) => {
+    let { contentRootElement } = rootCtx;
+    if (contentRootElement) {
+      if (open2) {
+        contentRootElement.classList.add("modal-open");
+      } else {
+        contentRootElement.classList.remove("modal-open");
+      }
+    }
+  };
+  useEffect(() => {
+    let isOpen = open || defaultOpen;
+    toggleRootzIndex(isOpen);
+  }, [open, defaultOpen]);
+  let handleOpenChange = (open2) => {
+    toggleRootzIndex(open2);
+    onOpenChange?.(open2);
+  };
+  return handleOpenChange;
+}
+
+// src/components/modal/index.tsx
+var Modal = (props) => {
+  let { children, open, defaultOpen, onOpenChange, ...rest } = props;
+  let handleOpenChange = useOpenChangeEffect(props);
+  return /* @__PURE__ */ React4.createElement(
+    Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      ...rest
+    },
+    children
+  );
+};
+var ModalTrigger = Trigger;
+var ModalHeader = forwardRef2(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React4.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
+  }
+);
+var ModalContent = forwardRef2(
+  (props, ref) => {
+    let { children, size, portal, ...rest } = props;
+    let modalContent = /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(StyledOverlay, null), /* @__PURE__ */ React4.createElement(
+      StyledContent,
+      {
+        ...rest,
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        "data-wv-modal": true,
+        "data-size": size,
+        ref
+      },
+      /* @__PURE__ */ React4.createElement(ModalClose, null),
+      /* @__PURE__ */ React4.createElement("div", { className: "wv-modal-content" }, children)
+    ));
+    if (portal) {
+      return /* @__PURE__ */ React4.createElement(Portal, null, modalContent);
+    }
+    return modalContent;
+  }
+);
+ModalContent.defaultProps = {
+  size: "auto",
+  portal: false
+};
+var ModalClose = forwardRef2(
+  (props, ref) => {
+    let { asChild, children, ...rest } = props;
+    let closeIcon = /* @__PURE__ */ React4.createElement(StyledCloseIcon, null, /* @__PURE__ */ React4.createElement(Icon, { name: "X" }));
+    return /* @__PURE__ */ React4.createElement(Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
+  }
+);
+
+// src/components/spinner.tsx
+import React5 from "react";
+function Spinner() {
+  return /* @__PURE__ */ React5.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ React5.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
+}
+
+// src/components/tooltip.tsx
+import React6 from "react";
+function Tooltip({ children }) {
+  return /* @__PURE__ */ React6.createElement("span", { className: "wv-tooltip" }, children);
+}
+
+// src/components/slider/index.tsx
+import clsx3 from "clsx";
+import { useKeenSlider } from "keen-slider/react";
+import React8, { useState } from "react";
+
+// src/components/slider/arrows.tsx
+import { styled as styled2 } from "@stitches/react";
+import clsx2 from "clsx";
+import React7 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__ */ React7.createElement(StyledArrows, { className, style }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: clsx2("arrow arrow--left", isFirst && "arrow--disabled"),
+      onClick: (e) => {
+        e.stopPropagation();
+        instanceRef?.current?.prev();
+      }
+    },
+    /* @__PURE__ */ React7.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: clsx2("arrow arrow--right", isLast && "arrow--disabled"),
+      onClick: (e) => {
+        e.stopPropagation();
+        instanceRef?.current?.next();
+      }
+    },
+    /* @__PURE__ */ React7.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] = useState(0);
+  let [created, setCreated] = useState(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__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { ref, className: _className }, /* @__PURE__ */ React8.createElement(
+    "link",
+    {
+      rel: "stylesheet",
+      href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
+    }
+  ), children), created && instanceRef?.current && /* @__PURE__ */ React8.createElement(
+    Arrows,
+    {
+      currentSlide,
+      instanceRef,
+      className: arrowsClass,
+      offset: arrowOffset,
+      icon: "arrow"
+    }
+  ));
+}
+
+// src/components/background.tsx
+import React9 from "react";
+function Background(props) {
+  let {
+    backgroundColor,
+    backgroundImage,
+    backgroundFit,
+    backgroundPosition,
+    className
+  } = props;
+  let style = {
+    display: "block",
+    position: "absolute",
+    inset: 0,
+    backgroundColor
+  };
+  if (backgroundImage || backgroundColor) {
+    return /* @__PURE__ */ React9.createElement("div", { style, className }, backgroundImage && /* @__PURE__ */ React9.createElement(
+      "img",
+      {
+        width: "100%",
+        height: "100%",
+        "data-blink-src": backgroundImage,
+        alt: "Background",
+        style: {
+          objectFit: backgroundFit,
+          objectPosition: backgroundPosition
+        }
       }
-    )
-  );
-};
-
-// src/components/icons/index.tsx
-import clsx from "clsx";
-function Icon({ name, className, ...props }) {
-  let WeaverseIcon = phosphor_exports[name];
-  let cls = clsx("wv-icon", className);
-  return /* @__PURE__ */ React17.createElement(WeaverseIcon, { className: cls, ...props });
+    ));
+  }
+  return null;
 }
 
-// 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
+// src/components/overlay.tsx
+import React10 from "react";
+function Overlay2(props) {
+  let { enableOverlay, overlayOpacity, className } = props;
+  if (enableOverlay) {
+    return /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        className,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "block",
+          backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})`
+        }
+      }
+    );
   }
-});
-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%"
+  return null;
+}
+
+// src/components/slider/dots.tsx
+import { styled as styled3 } from "@stitches/react";
+import clsx4 from "clsx";
+import React11 from "react";
+function Dots(props) {
+  let { currentSlide, instanceRef, className, absolute, position, color } = props;
+  let _className = clsx4(
+    className,
+    absolute && "dots--absolute",
+    position && `dots--${position}`,
+    color && `dots--${color}`
+  );
+  return /* @__PURE__ */ React11.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
+    (idx) => {
+      let className2 = clsx4("dot", currentSlide === idx && "dot--active");
+      return /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          key: idx,
+          type: "button",
+          onClick: () => instanceRef.current?.moveToIdx(idx),
+          className: className2
+        }
+      );
+    }
+  ));
+}
+var StyledDots = styled3("div", {
+  padding: "10px 0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "12px",
+  "&.dots--absolute": {
+    position: "absolute",
+    "&.dots--top, &.dots--bottom": { left: 0, right: 0 },
+    "&.dots--top": { top: 10 },
+    "&.dots--bottom": { bottom: 10 },
+    "&.dots--left, &.dots--right": {
+      top: 0,
+      bottom: 0,
+      flexDirection: "column"
+    },
+    "&.dots--left": { left: 20 },
+    "&.dots--right": { right: 20 }
   },
-  "&:focus": { outline: "none" },
-  '&[data-size="fullscreen"]': {
-    width: "100vw",
-    height: "100vh",
-    maxWidth: "100vw",
-    borderRadius: 0
+  "&.dots--light": {
+    ".dot": {
+      backgroundColor: "#ffffff66",
+      "&.dot--active": {
+        backgroundColor: "#ffffff"
+      }
+    }
   },
-  "@media (max-width: 768px)": {
-    width: "90vw",
-    padding: 12,
-    '&[data-size="fullscreen"]': {
-      width: "100vw"
+  "&.dots--dark": {
+    ".dot": {
+      backgroundColor: "#00000033",
+      "&.dot--active": {
+        backgroundColor: "#000000"
+      }
     }
-  }
-});
-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
+  ".dot": {
+    width: "9px",
+    height: "9px",
+    padding: "0",
+    border: "none",
+    borderRadius: "50%",
+    transition: "all 0.2s ease-in-out"
   }
 });
 
-// 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");
-      }
+// src/components/slider/autoplay-plugin.ts
+function AutoplayPlugin(changeSlidesEvery) {
+  return (slider) => {
+    let timeout;
+    let mouseOver = false;
+    function clearNextTimeout() {
+      clearTimeout(timeout);
     }
+    function nextTimeout() {
+      clearTimeout(timeout);
+      if (mouseOver)
+        return;
+      timeout = setTimeout(() => {
+        slider.next();
+      }, changeSlidesEvery * 1e3);
+    }
+    slider.on("created", () => {
+      slider.container.addEventListener("mouseover", () => {
+        mouseOver = true;
+        clearNextTimeout();
+      });
+      slider.container.addEventListener("mouseout", () => {
+        mouseOver = false;
+        nextTimeout();
+      });
+      nextTimeout();
+    });
+    slider.on("dragStarted", clearNextTimeout);
+    slider.on("animationEnded", nextTimeout);
+    slider.on("updated", nextTimeout);
   };
-  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(
+// src/components/placeholder.tsx
+import React12, { forwardRef as forwardRef3 } from "react";
+var Placeholder = forwardRef3(
   (props, ref) => {
-    let { children, size, portal, ...rest } = props;
-    let modalContent = /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(StyledOverlay, null), /* @__PURE__ */ React18.createElement(
-      StyledContent,
+    let { element, className, children, ...rest } = props;
+    return /* @__PURE__ */ React12.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        style: { fontWeight: 600, margin: "10px 0 5px", padding: "0 10px" }
+      },
+      element
+    ), /* @__PURE__ */ React12.createElement(
+      "div",
       {
-        ...rest,
-        onCloseAutoFocus: (e) => e.preventDefault(),
-        "data-wv-modal": true,
-        "data-size": size,
-        ref
+        style: {
+          margin: "5px 0 10px",
+          textAlign: "center",
+          padding: "0 10px"
+        }
       },
-      /* @__PURE__ */ React18.createElement(ModalClose, null),
-      /* @__PURE__ */ React18.createElement("div", { className: "wv-modal-content" }, children)
+      children
     ));
-    if (portal) {
-      return /* @__PURE__ */ React18.createElement(Portal, null, modalContent);
-    }
-    return modalContent;
   }
 );
-ModalContent.defaultProps = {
-  size: "auto",
-  portal: false
+var placeholder_default = Placeholder;
+
+// src/components/no-hydrate.tsx
+import React13, { useState as useState2 } from "react";
+function NoHydrate({ id, getHTML, ...rest }) {
+  let [html] = useState2(() => {
+    if (typeof document === "undefined") {
+      return getHTML?.() ?? "";
+    }
+    let el = document.getElementById(id);
+    if (!el)
+      return getHTML?.() ?? "";
+    return el.innerHTML;
+  });
+  return /* @__PURE__ */ React13.createElement("div", { ...rest, id, dangerouslySetInnerHTML: { __html: html } });
+}
+
+// src/components/index.ts
+var Components = {
+  Background,
+  Icon,
+  ModalComponents: modal_exports,
+  Overlay: Overlay2,
+  Placeholder: placeholder_default,
+  Spinner,
+  Slider,
+  Tooltip,
+  NoHydrate
+};
+var SliderComponents = {
+  Arrows,
+  Dots,
+  ResizePlugin,
+  AutoplayPlugin
 };
-var ModalClose = forwardRef8(
+
+// src/elements/container.tsx
+var Container = forwardRef4(
   (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);
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React14.createElement("div", { ref, ...rest }, Children.count(children) ? children : /* @__PURE__ */ React14.createElement(Components.Placeholder, { element: "Container" }, "Drop element here"));
   }
 );
+var css2 = {
+  "@desktop": {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    gridArea: "1 / 1 / 3 / 6",
+    overflow: "hidden",
+    // minWidth: '300px',
+    minHeight: "100px"
+  },
+  "@mobile": {
+    minHeight: "100px"
+  }
+};
+Container.defaultProps = {};
+var container_default = Container;
 
-// 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/elements/countdown/index.tsx
+import React16, { forwardRef as forwardRef5, useContext as useContext3, useEffect as useEffect2 } from "react";
 
-// src/components/tooltip.tsx
-import React20 from "react";
-function Tooltip({ children }) {
-  return /* @__PURE__ */ React20.createElement("span", { className: "wv-tooltip" }, children);
+// 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) {
+  let ONE_MINUTE = 60 * 1e3;
+  let ONE_HOUR = 60 * ONE_MINUTE;
+  let ONE_DAY = 24 * ONE_HOUR;
+  let days = Math.floor(_seconds / ONE_DAY);
+  let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
+  let minutes = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
+  );
+  let seconds = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
+  );
+  return { days, hours, minutes, seconds };
+}
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
 }
 
-// src/components/slider/index.tsx
-import clsx3 from "clsx";
-import { useKeenSlider } from "keen-slider/react";
-import React22, { useState as useState2 } from "react";
+// src/elements/countdown/timer-block.tsx
+import React15 from "react";
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ React15.createElement("div", { className: "wv-cd-block" }, /* @__PURE__ */ React15.createElement("div", { className: "wv-cd-number" }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ React15.createElement("div", { className: "wv-cd-label" }, label));
+}
 
-// 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();
+// src/elements/countdown/index.tsx
+var Countdown = forwardRef5(
+  (props, ref) => {
+    const { isDesignMode } = useContext3(WeaverseContext);
+    let {
+      timerType,
+      startTime: startTimeProp,
+      endTime: endTimeProp,
+      periods: periodsProp,
+      redirectWhenTimerStops,
+      redirectUrl,
+      openInNewTab,
+      showColon,
+      showLabel,
+      ...rest
+    } = props;
+    const [remaining, setRemaining] = React16.useState(0);
+    let periods = periodsProp * 60 * 1e3;
+    const handleEnd = () => {
+      if (!isDesignMode && redirectWhenTimerStops && redirectUrl)
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+    };
+    const getStartTime = () => {
+      let startTime = startTimeProp;
+      if (timerType === "evergreen") {
+        const start = localStorage.getItem(COUNTDOWN_KEY);
+        if (start) {
+          startTime = Number.parseInt(start);
+          if (startTime + periods < Date.now()) {
+            startTime = Date.now();
+            localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
+          }
+        } else {
+          startTime = Date.now();
+          localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
+        }
       }
-    },
-    /* @__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();
+      return startTime;
+    };
+    const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
+    const handleRemaining = () => {
+      let startTime = getStartTime();
+      let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
+      let isActive = checkActive(startTime);
+      const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
+      if (remainingTime > 0 && remainingTime < 1e3) {
+        handleEnd();
+      }
+      setRemaining(remainingTime);
+    };
+    useEffect2(() => {
+      let intervalFlag = setInterval(
+        handleRemaining,
+        1e3
+      );
+      return () => {
+        clearInterval(intervalFlag);
+      };
+    }, [startTimeProp, endTimeProp, periods, timerType]);
+    const timer = getTime(remaining);
+    return /* @__PURE__ */ React16.createElement("div", { ref, ...rest }, TIMES.map((time) => {
+      return /* @__PURE__ */ React16.createElement(React16.Fragment, { key: time }, /* @__PURE__ */ React16.createElement(
+        TimerBlock,
+        {
+          label: showLabel ? time : "",
+          value: remaining === 0 ? "--" : timer[time]
+        }
+      ), time !== "seconds" && /* @__PURE__ */ React16.createElement("div", { className: "wv-cd-separator" }, showColon && /* @__PURE__ */ React16.createElement("span", null, ":")));
+    }));
+  }
+);
+var css3 = {
+  "@desktop": {
+    fontSize: "36px",
+    fontWeight: 500,
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    justifyContent: "center",
+    gap: 10,
+    lineHeight: "initial",
+    ".wv-cd-block": {
+      width: 48,
+      textAlign: "center",
+      ".wv-cd-label": {
+        fontSize: 10
+      }
+    },
+    ".wv-cd-separator": {
+      span: {
+        lineHeight: "100%"
+      },
+      ".hidden": {
+        visibility: "hidden"
       }
-    },
-    /* @__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);
-  });
 };
+Countdown.defaultProps = {
+  timerType: "fixed-time",
+  startTime: Date.now(),
+  endTime: Date.now() + 1e3 * 60 * 60 * 24,
+  periods: 90,
+  redirectWhenTimerStops: false,
+  redirectUrl: "",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true
+};
+var countdown_default = Countdown;
 
-// 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 }
+// src/elements/image.tsx
+import React17 from "react";
+var Image2 = React17.forwardRef(
+  (props, ref) => {
+    let {
+      src,
+      alt,
+      objectFit,
+      objectPosition,
+      clickAction,
+      openLinkInNewTab,
+      linkTo,
+      ...rest
+    } = props;
+    let style = {
+      "--img-object-fit": objectFit,
+      "--img-object-position": objectPosition
+    };
+    let content = /* @__PURE__ */ React17.createElement("img", { alt, "data-blink-src": src });
+    if (clickAction === "openLink" && linkTo) {
+      content = /* @__PURE__ */ React17.createElement(
+        "a",
+        {
+          href: linkTo,
+          target: openLinkInNewTab ? "_blank" : "_self",
+          rel: "noreferrer"
         },
-        "(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"
+        /* @__PURE__ */ React17.createElement("img", { alt, "data-blink-src": src })
+      );
     }
-  ), children), created && instanceRef?.current && /* @__PURE__ */ React22.createElement(
-    Arrows,
-    {
-      currentSlide,
-      instanceRef,
-      className: arrowsClass,
-      offset: arrowOffset,
-      icon: "arrow"
+    return /* @__PURE__ */ React17.createElement("div", { ref, style, ...rest }, content);
+  }
+);
+var css4 = {
+  "@desktop": {
+    display: "flex",
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
+    img: {
+      width: "100%",
+      height: "100%",
+      objectFit: "var(--img-object-fit, cover)",
+      objectPosition: "var(--img-object-position, center)"
     }
-  ));
-}
+  }
+};
+Image2.defaultProps = {
+  src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
+  alt: "Alternative information",
+  objectFit: "cover",
+  objectPosition: "center center",
+  clickAction: "none",
+  openLinkInNewTab: false,
+  linkTo: ""
+};
+var image_default = Image2;
 
-// 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 = clsx4(
-    className,
-    absolute && "dots--absolute",
-    position && `dots--${position}`,
-    color && `dots--${color}`
-  );
-  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__ */ React23.createElement(
-        "button",
-        {
-          key: idx,
-          type: "button",
-          onClick: () => instanceRef.current?.moveToIdx(idx),
-          className: className2
-        }
-      );
+// src/elements/layout.tsx
+import React18, { forwardRef as forwardRef6 } from "react";
+var Layout = forwardRef6((props, ref) => {
+  let {
+    children,
+    rows,
+    gap,
+    rowSize,
+    columns,
+    contentSize,
+    gridSize,
+    backgroundColor,
+    backgroundImage,
+    objectFit,
+    objectPosition,
+    enableOverlay,
+    overlayOpacity,
+    ...rest
+  } = props;
+  let style = {
+    "--layout-content-width": "100vw",
+    "--content-size": contentSize + "px",
+    "--grid-size": gridSize + "px",
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+  };
+  return /* @__PURE__ */ React18.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ React18.createElement(
+    Background,
+    {
+      backgroundImage,
+      backgroundColor,
+      backgroundFit: objectFit,
+      backgroundPosition: objectPosition
     }
-  ));
-}
-var StyledDots = styled3("div", {
-  padding: "10px 0",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "12px",
-  "&.dots--absolute": {
-    position: "absolute",
-    "&.dots--top, &.dots--bottom": { left: 0, right: 0 },
-    "&.dots--top": { top: 10 },
-    "&.dots--bottom": { bottom: 10 },
-    "&.dots--left, &.dots--right": {
-      top: 0,
-      bottom: 0,
-      flexDirection: "column"
-    },
-    "&.dots--left": { left: 20 },
-    "&.dots--right": { right: 20 }
-  },
-  "&.dots--light": {
-    ".dot": {
-      backgroundColor: "#ffffff66",
-      "&.dot--active": {
-        backgroundColor: "#ffffff"
-      }
+  ), /* @__PURE__ */ React18.createElement(Overlay2, { enableOverlay, overlayOpacity }), /* @__PURE__ */ React18.createElement("div", { "data-layout-content": true }, children));
+});
+var css5 = {
+  "@desktop": {
+    position: "relative",
+    "> [data-layout-content]": {
+      // paddingTop: 'var(--gap)',
+      // paddingBottom: 'var(--gap)',
+      margin: "0 auto",
+      display: "grid",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
+      gridAutoRows: "var(--row-size)",
+      gap: "var(--gap)",
+      maxWidth: "var(--layout-content-width)"
     }
   },
-  "&.dots--dark": {
-    ".dot": {
-      backgroundColor: "#00000033",
-      "&.dot--active": {
-        backgroundColor: "#000000"
-      }
+  "@mobile": {
+    padding: "0 16px",
+    "> [data-layout-content]": {
+      display: "flex",
+      flexDirection: "column"
     }
-  },
-  ".dot": {
-    width: "9px",
-    height: "9px",
-    padding: "0",
-    border: "none",
-    borderRadius: "50%",
-    transition: "all 0.2s ease-in-out"
   }
+};
+Layout.defaultProps = {
+  contentSize: 1600,
+  gridSize: 1224,
+  rows: 16,
+  columns: 12,
+  gap: 16,
+  rowSize: 48,
+  objectFit: "cover",
+  objectPosition: "center center",
+  enableOverlay: false,
+  overlayOpacity: 30
+};
+var layout_default = Layout;
+
+// src/elements/map.tsx
+import React19, { forwardRef as forwardRef7 } from "react";
+var Map = forwardRef7((props, ref) => {
+  let { place, zoom, ...rest } = props;
+  return /* @__PURE__ */ React19.createElement("div", { ref, ...rest }, /* @__PURE__ */ React19.createElement(
+    "iframe",
+    {
+      loading: "lazy",
+      width: "100%",
+      height: "100%",
+      title: "map",
+      src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
+      style: { pointerEvents: "none" }
+    }
+  ));
 });
-
-// src/components/slider/autoplay-plugin.ts
-function AutoplayPlugin(changeSlidesEvery) {
-  return (slider) => {
-    let timeout;
-    let mouseOver = false;
-    function clearNextTimeout() {
-      clearTimeout(timeout);
+var css6 = {
+  "@desktop": {
+    iframe: {
+      border: "none"
     }
-    function nextTimeout() {
-      clearTimeout(timeout);
-      if (mouseOver)
-        return;
-      timeout = setTimeout(() => {
-        slider.next();
-      }, changeSlidesEvery * 1e3);
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
     }
-    slider.on("created", () => {
-      slider.container.addEventListener("mouseover", () => {
-        mouseOver = true;
-        clearNextTimeout();
-      });
-      slider.container.addEventListener("mouseout", () => {
-        mouseOver = false;
-        nextTimeout();
-      });
-      nextTimeout();
-    });
-    slider.on("dragStarted", clearNextTimeout);
-    slider.on("animationEnded", nextTimeout);
-    slider.on("updated", nextTimeout);
-  };
-}
+  }
+};
+Map.defaultProps = {
+  place: "Hanoi",
+  zoom: 14
+};
+var map_default = Map;
 
-// src/components/placeholder.tsx
-import React24, { forwardRef as forwardRef9 } from "react";
-var Placeholder = forwardRef9(
+// src/elements/text.tsx
+import * as React20 from "react";
+var Text = React20.forwardRef(
   (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, margin: "10px 0 5px", padding: "0 10px" }
-      },
-      element
-    ), /* @__PURE__ */ React24.createElement(
+    let { children, value, ...rest } = props;
+    return /* @__PURE__ */ React20.createElement("div", { ref, ...rest }, /* @__PURE__ */ React20.createElement(
       "div",
       {
-        style: {
-          margin: "5px 0 10px",
-          textAlign: "center",
-          padding: "0 10px"
-        }
-      },
-      children
+        className: "wv-text-content",
+        dangerouslySetInnerHTML: { __html: value }
+      }
     ));
   }
 );
-var placeholder_default = Placeholder;
+var css7 = {
+  "@desktop": {
+    display: "flex",
+    padding: "10px",
+    overflow: "hidden",
+    ".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"
+      }
+    }
+  }
+};
+Text.defaultProps = {
+  value: "<p>The quick brown fox jumps over the lazy dog</p>"
+};
+var text_default = Text;
 
-// src/components/no-hydrate.tsx
-import React25, { useState as useState3 } from "react";
-function NoHydrate({ id, getHTML, ...rest }) {
-  let [html] = useState3(() => {
-    if (typeof document === "undefined") {
-      return getHTML?.() ?? "";
+// src/elements/scrolling-text.tsx
+import React21 from "react";
+import { useState as useState3 } from "react";
+var ScrollingText = React21.forwardRef((props, ref) => {
+  let { children, value, gap, speed, pauseOnHover, ...rest } = props;
+  let [playState, setPlayState] = useState3("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__ */ React21.createElement("div", { ref, ...rest }, /* @__PURE__ */ React21.createElement("div", { className: "wv-scrolling-text__container", style, ...events }, Array.from({ length: 30 }).map((_, i) => /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      key: i,
+      className: "wv-text-content",
+      dangerouslySetInnerHTML: { __html: value }
     }
-    let el = document.getElementById(id);
-    if (!el)
-      return getHTML?.() ?? "";
-    return el.innerHTML;
+  ))));
+});
+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 React25, { forwardRef as forwardRef9, useContext as useContext4 } from "react";
+
+// src/elements/video/html-video.tsx
+import React22 from "react";
+function HTMLVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ React22.createElement(
+    "video",
+    {
+      controls,
+      autoPlay,
+      loop,
+      muted,
+      controlsList: "nodownload",
+      disablePictureInPicture: true
+    },
+    /* @__PURE__ */ React22.createElement("source", { src, type: type || "video/mp4" }),
+    /* @__PURE__ */ React22.createElement("source", { src, type: "video/ogg" }),
+    "Your browser does not support the video tag."
+  );
+}
+
+// src/elements/video/vimeo.tsx
+import React23 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__ */ React23.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
+}
+
+// src/elements/video/youtube.tsx
+import React24 from "react";
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    controls: controls ? "1" : "0",
+    loop: loop ? "1" : "0",
+    mute: muted ? "1" : "0"
   });
-  return /* @__PURE__ */ React25.createElement("div", { ...rest, id, dangerouslySetInnerHTML: { __html: html } });
+  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__ */ React24.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
 }
 
-// src/components/index.ts
-var Components = {
-  Background,
-  Icon,
-  ModalComponents: modal_exports,
-  Overlay,
-  Placeholder: placeholder_default,
-  Spinner,
-  Slider,
-  Tooltip,
-  NoHydrate
+// src/elements/video/index.tsx
+var Video = forwardRef9((props, ref) => {
+  let { isDesignMode } = useContext4(WeaverseContext);
+  let {
+    src,
+    controls,
+    poster,
+    autoPlay: originAutoPlay,
+    loop,
+    muted,
+    ...rest
+  } = props;
+  let autoPlay = !isDesignMode && originAutoPlay;
+  let videoProps = { src, controls, poster, autoPlay, loop, muted };
+  let content;
+  let youtubeId = getYoutubeEmbedId(src);
+  let vimeoId = getVimeoId(src);
+  if (youtubeId) {
+    content = /* @__PURE__ */ React25.createElement(Youtube, { ...videoProps, youtubeId });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ React25.createElement(Vimeo, { ...videoProps, vimeoId });
+  } else {
+    content = /* @__PURE__ */ React25.createElement(HTMLVideo, { ...videoProps });
+  }
+  return /* @__PURE__ */ React25.createElement("div", { ref, ...rest }, content);
+});
+var css9 = {
+  "@desktop": {
+    video: {
+      height: "100%",
+      width: "100%",
+      aspectRatio: "16 / 9"
+    },
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
+    }
+  }
 };
-var SliderComponents = {
-  Arrows,
-  Dots,
-  ResizePlugin,
-  AutoplayPlugin
+Video.defaultProps = {
+  src: "https://youtu.be/wM-NT6hcw48",
+  poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
+  loop: false,
+  controls: false,
+  autoPlay: true,
+  muted: true
 };
+var video_default = Video;
 
 // src/elements/instagram.tsx
+import React26, { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState4 } from "react";
 var Instagram = forwardRef10(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
@@ -2375,7 +2373,7 @@ var Slide = forwardRef12((props, ref) => {
       className: "slide-background"
     }
   ), /* @__PURE__ */ React29.createElement(
-    Overlay,
+    Overlay2,
     {
       enableOverlay,
       overlayOpacity,