@weaverse/react 0.6.20 → 0.6.21

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
-import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
+import { WeaverseType, Weaverse, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
@@ -8,85 +7,17 @@ declare let WeaverseContext: react.Context<Weaverse>;
 declare let WeaverseContextProvider: react.Provider<Weaverse>;
 declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
 
-interface WeaverseElementProps extends ReactElement {
-    css?: ElementCSS;
-    children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
+interface WeaverseElementProps {
+    children?: React.ReactNode;
 }
 declare type WeaverseRootPropsType = {
     context: Weaverse;
 };
+declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
-interface PlaceholderProps extends WeaverseElementProps {
-    element: string;
-}
-interface ButtonElementProps extends WeaverseElementProps {
-    value: string;
-    openInNewTab: boolean;
-    target: string;
-    type: 'button' | 'submit' | 'reset';
-}
-interface ContainerElementProps extends WeaverseElementProps {
-    [key: string]: any;
-}
-interface ImageElementProps extends WeaverseElementProps {
-    src: string;
-    alt: string;
-}
-interface LayoutElementProps extends WeaverseElementProps {
-    gridSize: number;
-    rows: number;
-    columns: number;
-    gap: number;
-    rowSize: number;
-}
-interface MapElementProps extends WeaverseElementProps {
-    place: string;
-    zoom: number;
-}
-interface TextElementProps extends WeaverseElementProps {
-    value: string;
-}
-interface VideoElementProps extends WeaverseElementProps {
-    src: string;
-    poster: string;
-    loop: boolean;
-    type: string;
-    controls: boolean;
-    autoPlay: boolean;
-    muted: boolean;
-}
-declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
-interface CountdownElementProps extends WeaverseElementProps {
-    timerType: 'fixed-time' | 'evergreen';
-    startTime: number;
-    endTime: number;
-    periods: number;
-    redirectUrl: string;
-    openInNewTab: boolean;
-    showLabel: boolean;
-    showColon: boolean;
-}
-declare type TimerBlockProps = {
-    label: string;
-    value: number;
-};
-interface InstagramElementProps extends WeaverseElementProps {
-    token: string;
-    username: string;
-    numberOfImages: number;
-    imagesPerRow: number;
-    gap: number;
-}
-declare type InstagramMedia = {
-    id: string;
-    media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
-    media_url: string;
-    permalink: string;
-    caption: string;
-};
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
-export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { CountdownTimeKey, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -62,12 +62,12 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
 var Button = React.forwardRef((props, ref) => {
-  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -102,10 +102,9 @@ var button_default = Button;
 // src/elements/container.tsx
 var import_react = __toESM(require("react"));
 var Container = (0, import_react.forwardRef)((props, ref) => {
-  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
     ref
-  }, rest), children);
+  }, props));
 });
 Container.defaultProps = {
   css: {
@@ -179,7 +178,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }
   (0, import_react3.useEffect)(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
       if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
         window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
       }
@@ -204,7 +203,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "fixed-time",
+  timerType: "specific",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -241,10 +240,10 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 var import_react4 = __toESM(require("react"));
 var Image = import_react4.default.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
+  }, rest), {
     alt,
     src
   }));
@@ -254,11 +253,12 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      img: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover"
-      }
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    "@mobile": {
+      display: "block"
     }
   }
 };
@@ -268,19 +268,17 @@ var image_default = Image;
 var import_react5 = __toESM(require("react"));
 var Layout = (0, import_react5.forwardRef)((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  let style = {
-    "--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_react5.default.createElement("section", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ import_react5.default.createElement("div", {
+  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadValues({
+    ref,
+    style: {
+      "--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))"
+    }
+  }, rest), /* @__PURE__ */ import_react5.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -319,7 +317,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 var import_react6 = __toESM(require("react"));
 var Map = (0, import_react6.forwardRef)((props, ref) => {
-  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react6.default.createElement("iframe", {
@@ -329,12 +327,19 @@ var Map = (0, import_react6.forwardRef)((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: { pointerEvents: "none" }
+    style: {
+      pointerEvents: "none"
+    }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14
+  zoom: 14,
+  css: {
+    "@desktop": {
+      gridArea: "1 / 1 / 11 / 13"
+    }
+  }
 };
 var map_default = Map;
 
@@ -354,7 +359,8 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: "20px",
+      padding: 0,
+      margin: 0,
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -367,24 +373,23 @@ var text_default = Text;
 // src/elements/video.tsx
 var import_react7 = __toESM(require("react"));
 var Video = (0, import_react7.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
+  const { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
   let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("video", {
+  return /* @__PURE__ */ import_react7.default.createElement("video", __spreadValues({
+    ref,
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react7.default.createElement("source", {
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), "Your browser does not support the video tag."));
+  }));
 });
 Video.defaultProps = {
-  src: "https://youtu.be/wM-NT6hcw48",
+  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
   poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
   loop: false,
   type: "video/mp4",
@@ -393,113 +398,64 @@ Video.defaultProps = {
   muted: true,
   css: {
     "@desktop": {
-      video: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "16 / 9"
-      }
+      height: "fit-content",
+      margin: 0,
+      outline: "none",
+      overflowWrap: "break-word",
+      padding: 0,
+      whitespace: "break-spaces",
+      width: "100%",
+      wordBreak: "break-word"
     }
   }
 };
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react9 = __toESM(require("react"));
-
-// src/elements/shared/Placeholder.tsx
 var import_react8 = __toESM(require("react"));
-var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
-  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
-  let style = {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151"
-  };
-  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
-    style,
-    ref
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("div", {
-    style: { fontWeight: 600, marginBottom: "10px" }
-  }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
-});
-var Placeholder_default = Placeholder;
-
-// src/elements/instagram.tsx
-var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = (0, import_react9.forwardRef)((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  const [media, setMedia] = (0, import_react9.useState)([]);
-  const [error, setError] = (0, import_react9.useState)(null);
-  let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
-  (0, import_react9.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);
-    }
+var Instagram = (0, import_react8.forwardRef)((props, ref) => {
+  const { stitchesInstance } = (0, import_react8.useContext)(WeaverseContext);
+  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
+  const [media, setMedia] = (0, import_react8.useState)([]);
+  (0, import_react8.useEffect)(() => {
+    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
+    fetch(url).then((res) => res.json()).then((res) => {
+      setMedia(res.data);
+    });
   }, [token]);
-  if (!token || error) {
-    return /* @__PURE__ */ import_react9.default.createElement("div", __spreadValues({
-      ref
-    }, rest), /* @__PURE__ */ import_react9.default.createElement(Placeholder_default, {
-      element: "Instagram"
-    }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
-  }
-  let style = {
-    "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+  const css = {
+    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
   };
-  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
+  const { className: instagramClass = "" } = stitchesInstance.css(css)();
+  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
+    className: `${className} ${instagramClass}`,
     ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ import_react9.default.createElement("div", {
-    className: "wv-ig-media-container"
-  }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ import_react9.default.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ import_react9.default.createElement("img", {
+  }, rest), !token ? "Token is empty" : media.map((item, key) => {
+    return /* @__PURE__ */ import_react8.default.createElement("div", {
+      key,
+      className: "wv-instagram-item"
+    }, /* @__PURE__ */ import_react8.default.createElement("img", {
+      width: "100%",
+      height: "100%",
       alt: item.caption,
       src: item.media_url
     }));
-  })));
+  }));
 });
 Instagram.defaultProps = {
   token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0,
+  numberOfImages: [12],
+  imagesPerRow: [4],
   css: {
     "@desktop": {
-      ".wv-ig-media-container": {
-        overflow: "hidden",
-        maxWidth: "100%",
-        maxHeight: "100%",
-        display: "grid",
-        gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
-        gap: "var(--wv-ig-images-gap, 0px)",
-        img: {
-          aspectRatio: "1 / 1",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      "& .wv-instagram-item": {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "red",
+        "& img": {
+          objectFit: "contain"
         }
       }
     }
@@ -556,13 +512,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react10.createContext)({});
+var WeaverseContext = (0, import_react9.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -590,9 +546,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react11.useState)(context.projectData);
-  let rootRef = (0, import_react11.useRef)();
-  (0, import_react11.useEffect)(() => {
+  let [, setData] = (0, import_react10.useState)(context.projectData);
+  let rootRef = (0, import_react10.useRef)();
+  (0, import_react10.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -605,21 +561,21 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react10.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react10.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -639,12 +595,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -652,15 +608,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react11.useContext)(WeaverseContext);
+  let context = (0, import_react10.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -37,7 +37,7 @@ import { createContext } from "react";
 // src/elements/button.tsx
 import * as React from "react";
 var Button = React.forwardRef((props, ref) => {
-  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -72,10 +72,9 @@ var button_default = Button;
 // src/elements/container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2((props, ref) => {
-  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ React2.createElement("div", __spreadValues({
     ref
-  }, rest), children);
+  }, props));
 });
 Container.defaultProps = {
   css: {
@@ -149,7 +148,7 @@ var Countdown = forwardRef3((props, ref) => {
   }
   useEffect(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
       if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
         window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
       }
@@ -174,7 +173,7 @@ var Countdown = forwardRef3((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "fixed-time",
+  timerType: "specific",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -211,10 +210,10 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 import React5 from "react";
 var Image = React5.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ React5.createElement("img", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ React5.createElement("img", {
+  }, rest), {
     alt,
     src
   }));
@@ -224,11 +223,12 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      img: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover"
-      }
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    "@mobile": {
+      display: "block"
     }
   }
 };
@@ -238,19 +238,17 @@ var image_default = Image;
 import React6, { forwardRef as forwardRef4 } from "react";
 var Layout = forwardRef4((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  let style = {
-    "--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__ */ React6.createElement("section", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("section", __spreadValues({
+    ref,
+    style: {
+      "--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))"
+    }
+  }, rest), /* @__PURE__ */ React6.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -289,7 +287,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 import React7, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
-  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ React7.createElement("iframe", {
@@ -299,12 +297,19 @@ var Map = forwardRef5((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: { pointerEvents: "none" }
+    style: {
+      pointerEvents: "none"
+    }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14
+  zoom: 14,
+  css: {
+    "@desktop": {
+      gridArea: "1 / 1 / 11 / 13"
+    }
+  }
 };
 var map_default = Map;
 
@@ -324,7 +329,8 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: "20px",
+      padding: 0,
+      margin: 0,
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -337,24 +343,23 @@ var text_default = Text;
 // src/elements/video.tsx
 import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
 var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext2(WeaverseContext);
+  const { isDesignMode } = useContext2(WeaverseContext);
   let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
-  return /* @__PURE__ */ React9.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ React9.createElement("video", {
+  return /* @__PURE__ */ React9.createElement("video", __spreadValues({
+    ref,
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ React9.createElement("source", {
+  }, rest), /* @__PURE__ */ React9.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), "Your browser does not support the video tag."));
+  }));
 });
 Video.defaultProps = {
-  src: "https://youtu.be/wM-NT6hcw48",
+  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
   poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
   loop: false,
   type: "video/mp4",
@@ -363,113 +368,64 @@ Video.defaultProps = {
   muted: true,
   css: {
     "@desktop": {
-      video: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "16 / 9"
-      }
+      height: "fit-content",
+      margin: 0,
+      outline: "none",
+      overflowWrap: "break-word",
+      padding: 0,
+      whitespace: "break-spaces",
+      width: "100%",
+      wordBreak: "break-word"
     }
   }
 };
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, useContext as useContext3, useEffect as useEffect2, useState } from "react";
-
-// src/elements/shared/Placeholder.tsx
-import React10, { forwardRef as forwardRef8 } from "react";
-var Placeholder = forwardRef8((props, ref) => {
-  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
-  let style = {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151"
-  };
-  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
-    style,
-    ref
-  }, rest), /* @__PURE__ */ React10.createElement("div", {
-    style: { fontWeight: 600, marginBottom: "10px" }
-  }, element), /* @__PURE__ */ React10.createElement("div", null, children));
-});
-var Placeholder_default = Placeholder;
-
-// src/elements/instagram.tsx
-var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = forwardRef9((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
+import React10, { forwardRef as forwardRef8, useContext as useContext3, useEffect as useEffect2, useState } from "react";
+var Instagram = forwardRef8((props, ref) => {
+  const { stitchesInstance } = useContext3(WeaverseContext);
+  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
   const [media, setMedia] = useState([]);
-  const [error, setError] = useState(null);
-  let { isDesignMode } = useContext3(WeaverseContext);
   useEffect2(() => {
-    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);
-    }
+    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
+    fetch(url).then((res) => res.json()).then((res) => {
+      setMedia(res.data);
+    });
   }, [token]);
-  if (!token || error) {
-    return /* @__PURE__ */ React11.createElement("div", __spreadValues({
-      ref
-    }, rest), /* @__PURE__ */ React11.createElement(Placeholder_default, {
-      element: "Instagram"
-    }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
-  }
-  let style = {
-    "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+  const css = {
+    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
   };
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
+  const { className: instagramClass = "" } = stitchesInstance.css(css)();
+  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
+    className: `${className} ${instagramClass}`,
     ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ React11.createElement("div", {
-    className: "wv-ig-media-container"
-  }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ React11.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ React11.createElement("img", {
+  }, rest), !token ? "Token is empty" : media.map((item, key) => {
+    return /* @__PURE__ */ React10.createElement("div", {
+      key,
+      className: "wv-instagram-item"
+    }, /* @__PURE__ */ React10.createElement("img", {
+      width: "100%",
+      height: "100%",
       alt: item.caption,
       src: item.media_url
     }));
-  })));
+  }));
 });
 Instagram.defaultProps = {
   token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0,
+  numberOfImages: [12],
+  imagesPerRow: [4],
   css: {
     "@desktop": {
-      ".wv-ig-media-container": {
-        overflow: "hidden",
-        maxWidth: "100%",
-        maxHeight: "100%",
-        display: "grid",
-        gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
-        gap: "var(--wv-ig-images-gap, 0px)",
-        img: {
-          aspectRatio: "1 / 1",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      "& .wv-instagram-item": {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "red",
+        "& img": {
+          objectFit: "contain"
         }
       }
     }
@@ -532,7 +488,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React11, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -575,13 +531,13 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React11.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React11.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
@@ -609,12 +565,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React11.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React11.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -626,11 +582,11 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React12.createElement(ItemComponent, {
+  return /* @__PURE__ */ React11.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.20",
+  "version": "0.6.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.6.20"
+    "@weaverse/core": "0.6.21"
   }
 }