@weaverse/react 0.7.33 → 0.7.37

package/dist/index.js

@@ -1,1014 +1 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Components: () => Components,
-  Elements: () => Elements,
-  WeaverseContext: () => WeaverseContext,
-  WeaverseContextConsumer: () => WeaverseContextConsumer,
-  WeaverseContextProvider: () => WeaverseContextProvider,
-  WeaverseRoot: () => WeaverseRoot,
-  createRootContext: () => createRootContext
-});
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("@weaverse/core"), module.exports);
-
-// src/context.ts
-var import_core = require("@weaverse/core");
-var import_react14 = require("react");
-
-// src/elements/Button.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var Button = React.forwardRef((props, ref) => {
-  let { isDesignMode } = (0, import_react.useContext)(WeaverseContext);
-  let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
-  if (clickAction && linkTo) {
-    return /* @__PURE__ */ React.createElement("a", {
-      href: !isDesignMode ? linkTo : void 0,
-      target: openInNewTab ? "_blank" : "_self",
-      rel: "noreferrer",
-      ...rest,
-      ref
-    }, text);
-  }
-  return /* @__PURE__ */ React.createElement("button", {
-    ref,
-    ...rest
-  }, text);
-});
-Button.defaultProps = {
-  type: "button",
-  text: "Button",
-  clickAction: "none",
-  linkTo: "",
-  openInNewTab: false
-};
-var css = {
-  "@desktop": {
-    borderRadius: "8px",
-    border: "none",
-    backgroundColor: "#393e46",
-    color: "#fff",
-    fontSize: "14px",
-    fontWeight: "medium",
-    padding: "10px 20px",
-    height: "42px",
-    minWidth: "120px",
-    textDecoration: "none",
-    ":hover": {
-      backgroundColor: "#222831"
-    }
-  }
-};
-var Button_default = Button;
-
-// src/elements/Container.tsx
-var import_react2 = __toESM(require("react"));
-var Container = (0, import_react2.forwardRef)(
-  (props, ref) => {
-    let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react2.default.createElement("div", {
-      ref,
-      ...rest
-    }, children);
-  }
-);
-var css2 = {
-  "@desktop": {
-    alignItems: "flex-start",
-    display: "flex",
-    flexDirection: "column",
-    gridArea: "1 / 1 / 3 / 6",
-    height: "fit-content",
-    justifyContent: "flex-start",
-    overflow: "hidden",
-    textAlign: "left",
-    width: "100%"
-  }
-};
-Container.defaultProps = {};
-var Container_default = Container;
-
-// src/elements/Countdown/index.tsx
-var import_react4 = __toESM(require("react"));
-
-// src/constant/index.ts
-var TIMES = ["days", "hours", "minutes", "seconds"];
-var COUNTDOWN_KEY = "wv-cd-evergreen-start";
-var INSTAGRAM_API = "https://graph.instagram.com";
-
-// src/utils/css.ts
-function shortCssObject(css10) {
-  return {
-    "@desktop": css10["@desktop"],
-    "@mobile": css10["@mobile"]
-  };
-}
-var permanentClasses = {};
-function generateItemClass(instance, stitchesInstance) {
-  let { css: css10, type, className: cls = "" } = instance.data;
-  let className = "";
-  let permanentClass = "";
-  let perCss = instance.Element?.permanentCss;
-  if (perCss) {
-    if (type in permanentClasses) {
-      permanentClass = permanentClasses[type];
-    } else {
-      let { className: perCls } = stitchesInstance.css(perCss)();
-      Object.assign(permanentClasses, { [type]: perCls });
-      permanentClass = perCls;
-    }
-  }
-  className = permanentClass;
-  if (css10) {
-    let formattedCss = shortCssObject(css10);
-    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = instance;
-    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
-    instance.stitchesClass = newClass;
-  }
-  return className;
-}
-
-// 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/elements/Countdown/TimerBlock.tsx
-var import_react3 = __toESM(require("react"));
-function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "wv-cd-block"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "wv-cd-number"
-  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "wv-cd-label"
-  }, label));
-}
-
-// src/elements/Countdown/index.tsx
-var Countdown = (0, import_react4.forwardRef)(
-  (props, ref) => {
-    const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
-    let {
-      timerType,
-      startTime: startTimeProp,
-      endTime: endTimeProp,
-      periods: periodsProp,
-      redirectUrl,
-      openInNewTab,
-      showColon,
-      showLabel,
-      ...rest
-    } = props;
-    const [remaining, setRemaining] = import_react4.default.useState(0);
-    let periods = periodsProp * 60 * 1e3;
-    const handleEnd = () => {
-      if (!isDesignMode && 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();
-      }
-      setRemaining(remainingTime);
-    };
-    (0, import_react4.useEffect)(() => {
-      let intervalFlag = setInterval(
-        handleRemaining,
-        1e3
-      );
-      return () => {
-        clearInterval(intervalFlag);
-      };
-    }, [startTimeProp, endTimeProp, periods, timerType]);
-    const timer = getTime(remaining);
-    return /* @__PURE__ */ import_react4.default.createElement("div", {
-      ref,
-      ...rest
-    }, TIMES.map((time) => {
-      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, {
-        key: time
-      }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
-        label: showLabel ? time : "",
-        value: remaining === 0 ? "--" : timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("span", {
-        className: `wv-cd-number ${showColon ? "" : "hidden"}`
-      }, ":")));
-    }));
-  }
-);
-var css3 = {
-  "@desktop": {
-    fontFamily: "Inter",
-    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
-    },
-    "& > span": {
-      lineHeight: "100%"
-    },
-    "& .hidden": {
-      visibility: "hidden"
-    }
-  }
-};
-Countdown.defaultProps = {
-  timerType: "fixed-time",
-  startTime: Date.now(),
-  endTime: Date.now() + 1e3 * 60 * 60 * 24,
-  periods: 90,
-  redirectUrl: "",
-  openInNewTab: false,
-  showLabel: true,
-  showColon: true
-};
-var Countdown_default = Countdown;
-
-// src/elements/Image.tsx
-var import_react5 = __toESM(require("react"));
-var Image = import_react5.default.forwardRef(
-  (props, ref) => {
-    let {
-      src,
-      alt,
-      objectFit,
-      objectPosition,
-      onClickAction,
-      openLinkInNewTab,
-      linkTo,
-      ...rest
-    } = props;
-    let style = {
-      "--wv-img-object-fit": objectFit,
-      "--wv-img-object-position": objectPosition
-    };
-    let content = /* @__PURE__ */ import_react5.default.createElement("img", {
-      alt,
-      "data-blink-src": src
-    });
-    if (onClickAction === "open-link" && linkTo) {
-      let target = openLinkInNewTab ? "_blank" : "_self";
-      content = /* @__PURE__ */ import_react5.default.createElement("a", {
-        href: linkTo,
-        target
-      }, content);
-    }
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, content);
-  }
-);
-var css4 = {
-  "@desktop": {
-    display: "flex",
-    overflow: "hidden",
-    img: {
-      width: "100%",
-      height: "100%",
-      objectFit: "var(--wv-img-object-fit, cover)",
-      objectPosition: "var(--wv-img-object-position, center)"
-    },
-    "& [data-blink-src]": {
-      visibility: "hidden"
-    }
-  }
-};
-Image.defaultProps = {
-  src: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/",
-  alt: "Image alt text",
-  objectFit: "cover",
-  objectPosition: "center",
-  onClickAction: "open-link",
-  openLinkInNewTab: false,
-  linkTo: ""
-};
-var Image_default = Image;
-
-// src/elements/Layout.tsx
-var import_react6 = __toESM(require("react"));
-var Layout = (0, import_react6.forwardRef)((props, ref) => {
-  let {
-    children,
-    rows,
-    gap,
-    rowSize,
-    columns,
-    contentSize,
-    gridSize,
-    backgroundColor,
-    backgroundImage,
-    objectFit,
-    ...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__ */ import_react6.default.createElement("div", {
-    ref,
-    ...rest,
-    style
-  }, /* @__PURE__ */ import_react6.default.createElement(LayoutBackground, {
-    imgUrl: backgroundImage,
-    bgColor: backgroundColor,
-    objectFit
-  }), /* @__PURE__ */ import_react6.default.createElement("div", {
-    "data-layout-content": true
-  }, children));
-});
-var LayoutBackground = (props) => {
-  let { bgColor, imgUrl, objectFit } = props;
-  let style = {
-    ["--bg-color"]: bgColor,
-    ["--object-fit"]: objectFit
-  };
-  if (imgUrl || bgColor) {
-    return /* @__PURE__ */ import_react6.default.createElement("div", {
-      style,
-      className: "wv-layout-background"
-    }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
-      width: "100%",
-      height: "100%",
-      "data-blink-src": imgUrl,
-      alt: "Section background"
-    }));
-  }
-  return null;
-};
-var css5 = {
-  "@desktop": {
-    "> [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"
-    }
-  }
-};
-var permanentCss = {
-  "@desktop": {
-    ".wv-layout-background": {
-      position: "absolute",
-      inset: 0,
-      backgroundColor: "var(--bg-color)"
-    },
-    img: {
-      objectFit: "var(--object-fit, cover)"
-    }
-  }
-};
-Layout.defaultProps = {
-  contentSize: 1600,
-  gridSize: 1224,
-  rows: 16,
-  columns: 12,
-  gap: 16,
-  rowSize: 48
-};
-var Layout_default = Layout;
-
-// src/elements/Map.tsx
-var import_react7 = __toESM(require("react"));
-var Map = (0, import_react7.forwardRef)((props, ref) => {
-  let { place, zoom, ...rest } = props;
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ import_react7.default.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" }
-  }));
-});
-var css6 = {
-  "@desktop": {
-    iframe: {
-      border: "none"
-    }
-  },
-  "@mobile": {
-    iframe: {
-      border: "none"
-    }
-  }
-};
-Map.defaultProps = {
-  place: "Hanoi",
-  zoom: 14
-};
-var Map_default = Map;
-
-// src/elements/Text.tsx
-var React8 = __toESM(require("react"));
-var Text = React8.forwardRef(
-  (props, ref) => {
-    let { children, value, ...rest } = props;
-    return /* @__PURE__ */ React8.createElement("div", {
-      ref,
-      ...rest,
-      dangerouslySetInnerHTML: { __html: value }
-    });
-  }
-);
-var css7 = {
-  "@desktop": {
-    padding: "10px",
-    wordBreak: "break-word",
-    overflowWrap: "break-word",
-    whiteSpace: "break-spaces"
-  }
-};
-Text.defaultProps = {
-  value: "The quick brown fox jumps over the lazy dog"
-};
-var Text_default = Text;
-
-// src/elements/Video/index.tsx
-var import_react11 = __toESM(require("react"));
-
-// src/elements/Video/HTMLVideo.tsx
-var import_react8 = __toESM(require("react"));
-function HTMLVideo(props) {
-  let { src, type, controls, autoPlay, loop, muted } = props;
-  return /* @__PURE__ */ import_react8.default.createElement("video", {
-    controls,
-    autoPlay,
-    loop,
-    muted,
-    controlsList: "nodownload",
-    disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react8.default.createElement("source", {
-    src,
-    type: type || "video/mp4"
-  }), /* @__PURE__ */ import_react8.default.createElement("source", {
-    src,
-    type: "video/ogg"
-  }), "Your browser does not support the video tag.");
-}
-
-// src/elements/Video/Vimeo.tsx
-var import_react9 = __toESM(require("react"));
-function Vimeo(props) {
-  let { vimeoId, controls, autoPlay, loop, muted } = props;
-  let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
-  let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
-  return /* @__PURE__ */ import_react9.default.createElement("iframe", {
-    src: vimeoSrc,
-    width: "100%",
-    height: "100%",
-    allowFullScreen: true
-  });
-}
-
-// src/elements/Video/Youtube.tsx
-var import_react10 = __toESM(require("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}?${params.toString()}`;
-  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
-  return /* @__PURE__ */ import_react10.default.createElement("iframe", {
-    src: youtubeSrc,
-    width: "100%",
-    height: "100%",
-    allowFullScreen: true,
-    allow
-  });
-}
-
-// src/elements/Video/index.tsx
-var Video = (0, import_react11.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react11.useContext)(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__ */ import_react11.default.createElement(Youtube, {
-      ...videoProps,
-      youtubeId
-    });
-  } else if (vimeoId) {
-    content = /* @__PURE__ */ import_react11.default.createElement(Vimeo, {
-      ...videoProps,
-      vimeoId
-    });
-  } else {
-    content = /* @__PURE__ */ import_react11.default.createElement(HTMLVideo, {
-      ...videoProps
-    });
-  }
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
-    ref,
-    ...rest
-  }, content);
-});
-var css8 = {
-  "@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
-var import_react13 = __toESM(require("react"));
-
-// src/components/Placeholder.tsx
-var import_react12 = __toESM(require("react"));
-var Placeholder = (0, import_react12.forwardRef)(
-  (props, ref) => {
-    let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      "data-wv-placeholder": true,
-      ref,
-      ...rest
-    }, /* @__PURE__ */ import_react12.default.createElement("div", {
-      style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react12.default.createElement("div", null, children));
-  }
-);
-var Placeholder_default = Placeholder;
-
-// src/elements/Instagram.tsx
-var Instagram = (0, import_react13.forwardRef)(
-  (props, ref) => {
-    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react13.useState)([]);
-    let [error, setError] = (0, import_react13.useState)(null);
-    (0, import_react13.useEffect)(() => {
-      if (token) {
-        let params = new URLSearchParams({
-          access_token: token,
-          fields: "id,media_type,caption,media_url,permalink"
-        });
-        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
-          if (res.error) {
-            setError(res);
-          } else {
-            setError(null);
-            setMedia([...res.data]);
-          }
-        }).catch(setError);
-      }
-    }, [token]);
-    if (!token || error) {
-      return /* @__PURE__ */ import_react13.default.createElement("div", {
-        ref,
-        ...rest
-      }, /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
-        element: "Instagram"
-      }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
-    }
-    let style = {
-      "--wv-ig-images-per-row": imagesPerRow,
-      "--wv-ig-images-gap": gap + "px"
-    };
-    return /* @__PURE__ */ import_react13.default.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, /* @__PURE__ */ import_react13.default.createElement("div", {
-      className: "wv-ig-media-container"
-    }, media.slice(0, numberOfImages).map((item) => {
-      let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ import_react13.default.createElement("a", {
-        key: id,
-        href: permalink,
-        target: "_blank",
-        rel: "noreferrer"
-      }, /* @__PURE__ */ import_react13.default.createElement("img", {
-        alt: caption,
-        src: media_url
-      }));
-    })));
-  }
-);
-var css9 = {};
-var permanentCss2 = {
-  "@desktop": {
-    ".wv-ig-media-container": {
-      overflow: "hidden",
-      maxWidth: "100%",
-      maxHeight: "100%",
-      display: "grid",
-      gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
-      gap: "var(--wv-ig-images-gap, 0px)",
-      img: {
-        maxWidth: "100%",
-        maxHeight: "100%",
-        objectFit: "cover"
-      }
-    }
-  },
-  "@mobile": {
-    ".wv-ig-media-container": {
-      overflowX: "auto",
-      display: "flex",
-      scrollSnapType: "x mandatory"
-    },
-    ".wv-ig-media-container a": {
-      scrollSnapAlign: "start",
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: "100%"
-    }
-  }
-};
-Instagram.defaultProps = {
-  token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0
-};
-var Instagram_default = Instagram;
-
-// src/elements/index.ts
-var Elements = {
-  Countdown: {
-    Component: Countdown_default,
-    type: "countdown",
-    defaultCss: css3
-  },
-  Button: {
-    Component: Button_default,
-    type: "button",
-    defaultCss: css
-  },
-  Container: {
-    Component: Container_default,
-    type: "container",
-    defaultCss: css2
-  },
-  Image: {
-    Component: Image_default,
-    type: "image",
-    defaultCss: css4
-  },
-  Instagram: {
-    Component: Instagram_default,
-    type: "instagram",
-    defaultCss: css9,
-    permanentCss: permanentCss2
-  },
-  Layout: {
-    Component: Layout_default,
-    type: "layout",
-    defaultCss: css5,
-    permanentCss
-  },
-  Map: {
-    Component: Map_default,
-    type: "map",
-    defaultCss: css6
-  },
-  Text: {
-    Component: Text_default,
-    type: "text",
-    defaultCss: css7
-  },
-  Video: {
-    Component: Video_default,
-    type: "video",
-    defaultCss: css8
-  }
-};
-
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new import_core.Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = (0, import_react14.createContext)({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
-// src/components/Modal.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
-  Modal: () => Modal,
-  ModalClose: () => ModalClose,
-  ModalContent: () => ModalContent,
-  ModalHeader: () => ModalHeader,
-  ModalTrigger: () => ModalTrigger
-});
-var import_react15 = __toESM(require("react"));
-var import_react_dialog = require("@radix-ui/react-dialog");
-var import_react16 = require("@stitches/react");
-var Modal = import_react_dialog.Root;
-var ModalTrigger = import_react_dialog.Trigger;
-var ModalHeader = (0, import_react16.styled)(import_react_dialog.Title, {
-  margin: 0,
-  fontWeight: 500,
-  color: "#ededef",
-  fontSize: 17
-});
-var ModalContent = (0, import_react15.forwardRef)(
-  (props, ref) => {
-    let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react15.default.createElement(import_react_dialog.Portal, null, /* @__PURE__ */ import_react15.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react15.default.createElement(StyledContent, {
-      ...rest,
-      onCloseAutoFocus: (e) => e.preventDefault(),
-      ref
-    }, /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement(ModalClose, null), /* @__PURE__ */ import_react15.default.createElement("div", null, children))));
-  }
-);
-var ModalClose = import_react_dialog.Close;
-ModalClose.defaultProps = {
-  asChild: true
-};
-var overlayShow = (0, import_react16.keyframes)({
-  "0%": { opacity: 0 },
-  "100%": { opacity: 1 }
-});
-var contentShow = (0, import_react16.keyframes)({
-  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
-  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
-});
-var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
-  backgroundColor: "#707070",
-  position: "fixed",
-  zIndex: 9999,
-  inset: 0,
-  animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
-});
-var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
-  backgroundColor: "white",
-  borderRadius: 6,
-  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "90vw",
-  maxWidth: "450px",
-  maxHeight: "85vh",
-  padding: 25,
-  animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  "&:focus": { outline: "none" },
-  zIndex: 9999
-});
-
-// src/components/Spinner.tsx
-var import_react17 = __toESM(require("react"));
-function Spinner() {
-  return /* @__PURE__ */ import_react17.default.createElement("span", {
-    className: "wv-spinner-wrapper"
-  }, /* @__PURE__ */ import_react17.default.createElement("svg", {
-    className: "wv-spinner",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ import_react17.default.createElement("circle", {
-    style: { opacity: ".25" },
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "4"
-  }), /* @__PURE__ */ import_react17.default.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"
-  })));
-}
-
-// src/components/index.ts
-var Components = {
-  Placeholder: Placeholder_default,
-  Spinner,
-  ModalComponents: Modal_exports
-};
-
-// src/renderer.tsx
-var import_core2 = require("@weaverse/core");
-var import_react18 = __toESM(require("react"));
-var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react18.useState)(context.projectData);
-  let rootRef = (0, import_react18.useRef)();
-  let renderRoot = () => setData({});
-  (0, import_react18.useEffect)(() => {
-    context.subscribe(renderRoot);
-    context.contentRootElement = rootRef.current;
-    return () => {
-      context.unsubscribe(renderRoot);
-    };
-  }, []);
-  let eventHandlers = context?.studioBridge?.eventHandlers || {};
-  let themeClass = context.stitchesInstance.theme.className;
-  if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react18.default.createElement("div", {
-      className: `weaverse-content-root ${themeClass}`,
-      ...eventHandlers,
-      ref: rootRef
-    }, /* @__PURE__ */ import_react18.default.createElement(WeaverseContextProvider, {
-      value: context
-    }, /* @__PURE__ */ import_react18.default.createElement(ItemInstance, {
-      id: context.projectData.rootId
-    })));
-  }
-  return null;
-};
-var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react18.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react18.useState)(instance.data);
-  let { id, type, childIds = [], css: css10, className, ...rest } = data;
-  (0, import_react18.useEffect)(() => {
-    let render = (data2) => setData({ ...data2 });
-    instance.subscribe(render);
-    if (import_core2.isBrowser && !instance.ref.current) {
-      Object.assign(instance.ref, {
-        current: document.querySelector(`[data-wv-id="${id}"]`)
-      });
-    }
-    return () => instance.unsubscribe(render);
-  }, []);
-  let Element = elementInstances.get(type);
-  if (Element?.Component) {
-    let Component = Element.Component;
-    if (Component.$$typeof === Symbol.for("react.forward_ref")) {
-      rest.ref = instance.ref;
-    }
-    return /* @__PURE__ */ import_react18.default.createElement(Component, {
-      key: id,
-      "data-wv-type": type,
-      "data-wv-id": id,
-      className: generateItemClass(instance, stitchesInstance),
-      ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react18.default.createElement(ItemInstance, {
-      key: id2,
-      id: id2
-    })));
-  } else {
-    console.log(`Unknown element: ${type}`);
-    return null;
-  }
-};
-var ItemInstance = ({ id }) => {
-  let context = (0, import_react18.useContext)(WeaverseContext);
-  let { itemInstances } = context;
-  let instance = itemInstances.get(id);
-  if (!instance) {
-    return /* @__PURE__ */ import_react18.default.createElement("div", {
-      style: { display: "none" }
-    }, "Item instance ", id, " not found");
-  }
-  return /* @__PURE__ */ import_react18.default.createElement(ItemComponent, {
-    key: id,
-    instance
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Components,
-  Elements,
-  WeaverseContext,
-  WeaverseContextConsumer,
-  WeaverseContextProvider,
-  WeaverseRoot,
-  createRootContext
-});
+"use strict";var it=Object.create;var B=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var at=Object.getPrototypeOf,pt=Object.prototype.hasOwnProperty;var J=(e,t)=>{for(var o in t)B(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of lt(t))!pt.call(e,n)&&n!==o&&B(e,n,{get:()=>t[n],enumerable:!(r=st(t,n))||r.enumerable});return e},E=(e,t,o)=>(A(e,t,"default"),o&&A(o,t,"default")),m=(e,t,o)=>(o=e!=null?it(at(e)):{},A(t||!e||!e.__esModule?B(o,"default",{value:e,enumerable:!0}):o,e)),mt=e=>A(B({},"__esModule",{value:!0}),e);var k={};J(k,{Components:()=>te,Elements:()=>U,WeaverseContext:()=>C,WeaverseContextConsumer:()=>At,WeaverseContextProvider:()=>oe,WeaverseRoot:()=>Bt,createRootContext:()=>zt});module.exports=mt(k);E(k,require("@weaverse/core"),module.exports);var tt=require("@weaverse/core"),ot=require("react");var D=m(require("react")),re=require("react");var ne=D.forwardRef((e,t)=>{let{isDesignMode:o}=(0,re.useContext)(C),{text:r,clickAction:n,linkTo:i,openInNewTab:s,...l}=e;return n&&i?D.createElement("a",{href:o?void 0:i,target:s?"_blank":"_self",rel:"noreferrer",...l,ref:t},r):D.createElement("button",{ref:t,...l},r)});ne.defaultProps={type:"button",text:"Button",clickAction:"none",linkTo:"",openInNewTab:!1};var ie={"@desktop":{borderRadius:"8px",border:"none",backgroundColor:"#393e46",color:"#fff",fontSize:"14px",fontWeight:"medium",padding:"10px 20px",height:"42px",minWidth:"120px",textDecoration:"none",":hover":{backgroundColor:"#222831"}}},se=ne;var V=m(require("react")),le=(0,V.forwardRef)((e,t)=>{let{children:o,...r}=e;return V.default.createElement("div",{ref:t,...r},o)}),ae={"@desktop":{alignItems:"flex-start",display:"flex",flexDirection:"column",gridArea:"1 / 1 / 3 / 6",height:"fit-content",justifyContent:"flex-start",overflow:"hidden",textAlign:"left",width:"100%"}};le.defaultProps={};var pe=le;var h=m(require("react"));var me=["days","hours","minutes","seconds"],O="wv-cd-evergreen-start",de="https://graph.instagram.com";function ut(e){return{"@desktop":e["@desktop"],"@mobile":e["@mobile"]}}var Q={};function ce(e,t){let{css:o,type:r,className:n=""}=e.data,i="",s="",l=e.Element?.permanentCss;if(l)if(r in Q)s=Q[r];else{let{className:g}=t.css(l)();Object.assign(Q,{[r]:g}),s=g}if(i=s,o){let g=ut(o),{className:x=""}=t.css(g)(),{stitchesClass:b}=e,p=(e.ref.current?.className||"").replace(b,"").replace(n,"").replace(s,"").trim();i=`${s} ${n} ${x} ${p}`.trim(),e.stitchesClass=x}return i}function ue(e){let t=6e4,o=60*t,r=24*o,n=Math.floor(e/r),i=Math.floor((e-n*r)/o),s=Math.floor((e-n*r-i*o)/t),l=Math.floor((e-n*r-i*o-s*t)/1e3);return{days:n,hours:i,minutes:s,seconds:l}}function fe(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/);return t?t[1]:null}function ge(e){let t=e.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);return t?t[1]:null}var _=m(require("react"));function ve({value:e,label:t}){return _.default.createElement("div",{className:"wv-cd-block"},_.default.createElement("div",{className:"wv-cd-number"},typeof e=="string"?e:e.toString().padStart(2,"0")),t&&_.default.createElement("div",{className:"wv-cd-label"},t))}var ye=(0,h.forwardRef)((e,t)=>{let{isDesignMode:o}=(0,h.useContext)(C),{timerType:r,startTime:n,endTime:i,periods:s,redirectUrl:l,openInNewTab:g,showColon:x,showLabel:b,...p}=e,[f,y]=h.default.useState(0),w=s*60*1e3,G=()=>{!o&&l&&window.open(l,g?"_blank":"_self")},Y=()=>{let d=n;if(r==="evergreen"){let z=localStorage.getItem(O);z?(d=Number.parseInt(z),d+w<Date.now()&&(d=Date.now(),localStorage.setItem(O,d.toString()))):(d=Date.now(),localStorage.setItem(O,d.toString()))}return d},j=d=>d<Date.now()&&i>Date.now(),K=()=>{let d=Y(),z=r==="fixed-time"?i:d+w,X=j(d)?Math.max(z-Date.now(),0):0;X>0&&X<1e3&&G(),y(X)};(0,h.useEffect)(()=>{let d=setInterval(K,1e3);return()=>{clearInterval(d)}},[n,i,w,r]);let q=ue(f);return h.default.createElement("div",{ref:t,...p},me.map(d=>h.default.createElement(h.default.Fragment,{key:d},h.default.createElement(ve,{label:b?d:"",value:f===0?"--":q[d]}),d!=="seconds"&&h.default.createElement("div",{className:"wv-cd-separator"},x&&h.default.createElement("span",null,":")))))}),we={"@desktop":{fontFamily:"Inter",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"}}}};ye.defaultProps={timerType:"fixed-time",startTime:Date.now(),endTime:Date.now()+1e3*60*60*24,periods:90,redirectUrl:"",openInNewTab:!1,showLabel:!0,showColon:!0};var he=ye;var H=m(require("react")),xe=H.default.forwardRef((e,t)=>{let{src:o,alt:r,objectFit:n,objectPosition:i,onClickAction:s,openLinkInNewTab:l,linkTo:g,...x}=e,b={"--wv-img-object-fit":n,"--wv-img-object-position":i},p=H.default.createElement("img",{alt:r,"data-blink-src":o});return s==="open-link"&&g&&(p=H.default.createElement("a",{href:g,target:l?"_blank":"_self"},p)),H.default.createElement("div",{ref:t,...x,style:b},p)}),be={"@desktop":{display:"flex",overflow:"hidden",img:{width:"100%",height:"100%",objectFit:"var(--wv-img-object-fit, cover)",objectPosition:"var(--wv-img-object-position, center)","&[data-blink-src]":{visibility:"hidden"}}}};xe.defaultProps={src:"https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/",alt:"Image alt text",objectFit:"cover",objectPosition:"center",onClickAction:"open-link",openLinkInNewTab:!1,linkTo:""};var Ce=xe;var S=m(require("react")),Pe=(0,S.forwardRef)((e,t)=>{let{children:o,rows:r,gap:n,rowSize:i,columns:s,contentSize:l,gridSize:g,backgroundColor:x,backgroundImage:b,objectFit:p,...f}=e,y={"--layout-content-width":"100vw","--content-size":l+"px","--grid-size":g+"px","--rows":r,"--columns":s,"--gap":n+"px","--row-size":i+"px","--col-size":"calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"};return S.default.createElement("div",{ref:t,...f,style:y},S.default.createElement(vt,{imgUrl:b,bgColor:x,objectFit:p}),S.default.createElement("div",{"data-layout-content":!0},o))}),vt=e=>{let{bgColor:t,imgUrl:o,objectFit:r}=e,n={["--bg-color"]:t,["--object-fit"]:r};return o||t?S.default.createElement("div",{style:n,className:"wv-layout-background"},o&&S.default.createElement("img",{width:"100%",height:"100%","data-blink-src":o,alt:"Section background"})):null},ke={"@desktop":{"> [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"}}},Ee={"@desktop":{".wv-layout-background":{position:"absolute",inset:0,backgroundColor:"var(--bg-color)"},img:{objectFit:"var(--object-fit, cover)"}}};Pe.defaultProps={contentSize:1600,gridSize:1224,rows:16,columns:12,gap:16,rowSize:48};var Se=Pe;var N=m(require("react")),Te=(0,N.forwardRef)((e,t)=>{let{place:o,zoom:r,...n}=e;return N.default.createElement("div",{ref:t,...n},N.default.createElement("iframe",{loading:"lazy",width:"100%",height:"100%",title:"map",src:`https://maps.google.com/maps?z=${r}&t=m&q=${o}&ie=UTF8&&output=embed`,style:{pointerEvents:"none"}}))}),Ie={"@desktop":{iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};Te.defaultProps={place:"Hanoi",zoom:14};var Le=Te;var $=m(require("react")),Me=$.forwardRef((e,t)=>{let{children:o,value:r,...n}=e;return $.createElement("div",{ref:t,...n,dangerouslySetInnerHTML:{__html:r}})}),We={"@desktop":{padding:"10px",wordBreak:"break-word",overflowWrap:"break-word",whiteSpace:"break-spaces"}};Me.defaultProps={value:"The quick brown fox jumps over the lazy dog"};var De=Me;var P=m(require("react"));var F=m(require("react"));function He(e){let{src:t,type:o,controls:r,autoPlay:n,loop:i,muted:s}=e;return F.default.createElement("video",{controls:r,autoPlay:n,loop:i,muted:s,controlsList:"nodownload",disablePictureInPicture:!0},F.default.createElement("source",{src:t,type:o||"video/mp4"}),F.default.createElement("source",{src:t,type:"video/ogg"}),"Your browser does not support the video tag.")}var Ne=m(require("react"));function je(e){let{vimeoId:t,controls:o,autoPlay:r,loop:n,muted:i}=e,s=`autoplay=${r}&loop=${n}&controls=${o}&muted=${i}`,l=`https://player.vimeo.com/video/${t}?${s}`;return Ne.default.createElement("iframe",{src:l,width:"100%",height:"100%",allowFullScreen:!0})}var ze=m(require("react"));function Ae(e){let{youtubeId:t,controls:o,autoPlay:r,loop:n,muted:i}=e,s=new URLSearchParams({autoplay:r?"1":"0",controls:o?"1":"0",loop:n?"1":"0",mute:i?"1":"0"}),l=`https://www.youtube.com/embed/${t}?${s.toString()}`;return ze.default.createElement("iframe",{src:l,width:"100%",height:"100%",allowFullScreen:!0,allow:`accelerometer;${r?"autoplay;":""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`})}var Be=(0,P.forwardRef)((e,t)=>{let{isDesignMode:o}=(0,P.useContext)(C),{src:r,controls:n,poster:i,autoPlay:s,loop:l,muted:g,...x}=e,p={src:r,controls:n,poster:i,autoPlay:!o&&s,loop:l,muted:g},f,y=fe(r),w=ge(r);return y?f=P.default.createElement(Ae,{...p,youtubeId:y}):w?f=P.default.createElement(je,{...p,vimeoId:w}):f=P.default.createElement(He,{...p}),P.default.createElement("div",{ref:t,...x},f)}),Ve={"@desktop":{video:{height:"100%",width:"100%",aspectRatio:"16 / 9"},iframe:{border:"none"}},"@mobile":{iframe:{border:"none"}}};Be.defaultProps={src:"https://youtu.be/wM-NT6hcw48",poster:"https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",loop:!1,controls:!1,autoPlay:!0,muted:!0};var Oe=Be;var v=m(require("react"));var L=m(require("react")),bt=(0,L.forwardRef)((e,t)=>{let{element:o,children:r,...n}=e;return L.default.createElement("div",{"data-wv-placeholder":!0,ref:t,...n},L.default.createElement("div",{style:{fontWeight:600,marginBottom:"10px"}},o),L.default.createElement("div",null,r))}),_e=bt;var R={};J(R,{Modal:()=>Dt,ModalClose:()=>Xe,ModalContent:()=>qe,ModalHeader:()=>Nt,ModalTrigger:()=>Ht});var I=require("@radix-ui/react-dialog"),c=m(require("react"));var $e=m(require("react"));var Z={};J(Z,{ArrowLeft:()=>St,ArrowRight:()=>Tt,CircleNotch:()=>Ct,Image:()=>It,Minus:()=>kt,Plus:()=>Et,ShoppingCart:()=>Lt,X:()=>Pt});var a=m(require("react")),Ct=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",...e},a.default.createElement("circle",{style:{opacity:".25"},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),a.default.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"})),Pt=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",fill:"#000000",viewBox:"0 0 256 256",...e},a.default.createElement("rect",{width:"256",height:"256",fill:"none"}),a.default.createElement("line",{x1:"200",y1:"56",x2:"56",y2:"200",fill:"none",stroke:"#000000",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),a.default.createElement("line",{x1:"200",y1:"200",x2:"56",y2:"56",fill:"none",stroke:"#000000",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})),kt=e=>a.default.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},a.default.createElement("path",{d:"M376 232H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h368c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"})),Et=e=>a.default.createElement("svg",{width:"196",height:"196",fill:"currentColor",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",...e},a.default.createElement("path",{d:"M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"})),St=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},a.default.createElement("rect",{width:"256",height:"256",fill:"none"}),a.default.createElement("line",{x1:"216",y1:"128",x2:"40",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.default.createElement("polyline",{points:"112 56 40 128 112 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),Tt=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},a.default.createElement("rect",{width:"256",height:"256",fill:"none"}),a.default.createElement("line",{x1:"40",y1:"128",x2:"216",y2:"128",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.default.createElement("polyline",{points:"144 56 216 128 144 200",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})),It=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",fill:"currentColor",viewBox:"0 0 640 512",...e},a.default.createElement("path",{d:"M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"})),Lt=e=>a.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"192",height:"192",fill:"currentColor",viewBox:"0 0 256 256",...e},a.default.createElement("rect",{width:"256",height:"256",fill:"none"}),a.default.createElement("path",{d:"M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",fill:"none",stroke:"#ffffff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.default.createElement("circle",{cx:"80",cy:"204",r:"20",fill:"none",stroke:"#ffffff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.default.createElement("circle",{cx:"184",cy:"204",r:"20",fill:"none",stroke:"#ffffff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}),a.default.createElement("path",{d:"M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",fill:"none",stroke:"#ffffff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"}));var Fe=m(require("clsx"));function M({name:e,className:t,...o}){let r=Z[e],n=(0,Fe.default)("wv-icon",t);return $e.default.createElement(r,{className:n,...o})}var W=require("@radix-ui/react-dialog"),T=require("@stitches/react"),Mt=(0,T.keyframes)({"0%":{opacity:0},"100%":{opacity:1}}),Wt=(0,T.keyframes)({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),Ue=(0,T.styled)(W.Overlay,{display:"block !important",backgroundColor:"rgba(0, 0, 0, .3)",position:"fixed",zIndex:9999,inset:0,animation:`${Mt} 300ms cubic-bezier(0.16, 1, 0.3, 1)`}),Ge=(0,T.styled)(W.Title,{margin:"0 0 24px",fontWeight:500,fontSize:24,"@media (max-width: 768px)":{margin:"0 0 16px",fontSize:20}}),Ye=(0,T.styled)(W.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:`${Wt} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,zIndex:9999,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"}}}),Ke=(0,T.styled)("button",{all:"unset",cursor:"pointer",fontFamily:"inherit",borderRadius:"100%",height:25,width:25,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:20,height:20}});var Dt=e=>{let{children:t,open:o,defaultOpen:r,onOpenChange:n,...i}=e;return(0,c.useEffect)(()=>{o||r?document.body.classList.add("wv-modal-open"):document.body.classList.remove("wv-modal-open")},[o,r]),c.default.createElement(I.Root,{onOpenChange:l=>{l?document.body.classList.add("wv-modal-open"):document.body.classList.remove("wv-modal-open"),n?.(l)},open:o,defaultOpen:r,...i},t)},Ht=I.Trigger,Nt=(0,c.forwardRef)((e,t)=>{let{children:o,...r}=e;return c.default.createElement(Ge,{ref:t,...r,"data-wv-modal-header":!0},o)}),qe=(0,c.forwardRef)((e,t)=>{let{children:o,size:r,portal:n,...i}=e,s=c.default.createElement(c.default.Fragment,null,c.default.createElement(Ue,null),c.default.createElement(Ye,{...i,onCloseAutoFocus:l=>l.preventDefault(),"data-wv-modal":!0,"data-size":r,ref:t},c.default.createElement(Xe,null),c.default.createElement("div",{className:"wv-modal-content"},o)));return n?c.default.createElement(I.Portal,null,s):s});qe.defaultProps={size:"auto",portal:!1};var Xe=(0,c.forwardRef)((e,t)=>{let{asChild:o,children:r,...n}=e,i=c.default.createElement(Ke,null,c.default.createElement(M,{name:"X"}));return c.default.createElement(I.Close,{asChild:!0,...n,ref:t},o?r:i)});var ee=m(require("react"));function Je(){return ee.default.createElement("span",{className:"wv-spinner-wrapper"},ee.default.createElement(M,{name:"CircleNotch",className:"wv-spinner"}))}var te={Placeholder:_e,Spinner:Je,ModalComponents:R,Icon:M};var Qe=(0,v.forwardRef)((e,t)=>{let{token:o,username:r,numberOfImages:n,imagesPerRow:i,gap:s,...l}=e,[g,x]=(0,v.useState)([]),[b,p]=(0,v.useState)(null);if((0,v.useEffect)(()=>{if(o){let y=new URLSearchParams({access_token:o,fields:"id,media_type,caption,media_url,permalink,thumbnail_url"});fetch(`${de}/me/media?${y.toString()}`).then(w=>w.json()).then(w=>{w.error?p(w):(p(null),x([...w.data]))}).catch(p)}},[o]),!o||b)return v.default.createElement("div",{ref:t,...l},v.default.createElement(te.Placeholder,{element:"Instagram"},o?"Invalid or expired token!":"Connect to Instagram to display photos on your site."));let f={"--wv-ig-images-per-row":i,"--wv-ig-images-gap":s+"px"};return v.default.createElement("div",{ref:t,...l,style:f},v.default.createElement("div",{className:"wv-ig-media-container"},g.slice(0,n).map(y=>{let{id:w,permalink:G,caption:Y,media_url:j,media_type:K,thumbnail_url:q}=y;return K==="VIDEO"?v.default.createElement("video",{key:w,controls:!0,poster:q},v.default.createElement("source",{src:j,type:"video/mp4"})):v.default.createElement("a",{key:w,href:G,target:"_blank",rel:"noreferrer"},v.default.createElement("img",{alt:Y,src:j}))})))}),Ze={},Re={"@desktop":{".wv-ig-media-container":{overflow:"hidden",maxWidth:"100%",maxHeight:"100%",display:"grid",gridTemplateColumns:"repeat(var(--wv-ig-images-per-row, 4), 1fr)",gap:"var(--wv-ig-images-gap, 0px)",img:{maxWidth:"100%",maxHeight:"100%",objectFit:"cover"},video:{width:"100%",height:"100%"}}},"@mobile":{".wv-ig-media-container":{overflowX:"auto",display:"flex",scrollSnapType:"x mandatory"},".wv-ig-media-container a":{scrollSnapAlign:"start",flexGrow:0,flexShrink:0,flexBasis:"100%"}}};Qe.defaultProps={token:"",username:"",numberOfImages:8,imagesPerRow:4,gap:0};var et=Qe;var U={Countdown:{Component:he,type:"countdown",defaultCss:we},Button:{Component:se,type:"button",defaultCss:ie},Container:{Component:pe,type:"container",defaultCss:ae},Image:{Component:Ce,type:"image",defaultCss:be},Instagram:{Component:et,type:"instagram",defaultCss:Ze,permanentCss:Re},Layout:{Component:Se,type:"layout",defaultCss:ke,permanentCss:Ee},Map:{Component:Le,type:"map",defaultCss:Ie},Text:{Component:De,type:"text",defaultCss:We},Video:{Component:Oe,type:"video",defaultCss:Ve}};var zt=e=>{let t=new tt.Weaverse(e);return Object.keys(U).forEach(o=>{t.registerElement(U[o])}),t},C=(0,ot.createContext)({}),oe=C.Provider,At=C.Consumer;var rt=require("@weaverse/core"),u=m(require("react"));var Bt=({context:e})=>{let[,t]=(0,u.useState)(e.projectData),o=(0,u.useRef)(),r=()=>t({});(0,u.useEffect)(()=>(e.subscribe(r),e.contentRootElement=o.current,()=>{e.unsubscribe(r)}),[]);let n=e?.studioBridge?.eventHandlers||{},i=e.stitchesInstance.theme.className;return e.projectData?.rootId?u.default.createElement("div",{className:`weaverse-content-root ${i}`,...n,ref:o},u.default.createElement(oe,{value:e},u.default.createElement(nt,{id:e.projectData.rootId}))):null},Vt=({instance:e})=>{let{stitchesInstance:t,elementInstances:o}=(0,u.useContext)(C),[r,n]=(0,u.useState)(e.data),{id:i,type:s,childIds:l=[],css:g,className:x,...b}=r;(0,u.useEffect)(()=>{let f=y=>n({...y});return e.subscribe(f),rt.isBrowser&&!e.ref.current&&Object.assign(e.ref,{current:document.querySelector(`[data-wv-id="${i}"]`)}),()=>e.unsubscribe(f)},[]);let p=o.get(s);if(p?.Component){let f=p.Component;return f.$$typeof===Symbol.for("react.forward_ref")&&(b.ref=e.ref),u.default.createElement(f,{key:i,"data-wv-type":s,"data-wv-id":i,className:ce(e,t),...b},l.map(y=>u.default.createElement(nt,{key:y,id:y})))}else return console.log(`Unknown element: ${s}`),null},nt=({id:e})=>{let t=(0,u.useContext)(C),{itemInstances:o}=t,r=o.get(e);return r?u.default.createElement(Vt,{key:e,instance:r}):u.default.createElement("div",{style:{display:"none"}},"Item instance ",e," not found")};0&&(module.exports={Components,Elements,WeaverseContext,WeaverseContextConsumer,WeaverseContextProvider,WeaverseRoot,createRootContext});