@weaverse/react 0.6.15 → 0.6.18

package/dist/index.js

@@ -62,232 +62,184 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react9 = require("react");
-
-// src/elements/base.tsx
-var import_react = __toESM(require("react"));
-var BaseElement = import_react.default.forwardRef((_a, ref) => {
-  var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
-  return import_react.default.createElement(tag, __spreadValues({
-    ref
-  }, props), children);
-});
-BaseElement.defaultProps = {
-  tag: "div",
-  style: {}
-};
-var schema = {
-  type: "base",
-  parentType: "container",
-  title: "Base",
-  settings: []
-};
-var base_default = BaseElement;
+var import_react10 = require("react");
 
 // src/elements/button.tsx
-var React2 = __toESM(require("react"));
-var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { buttonType, css, openInNewTab = false, target = "" } = _a, rest = __objRest(_a, ["buttonType", "css", "openInNewTab", "target"]);
+var React = __toESM(require("react"));
+var Button = React.forwardRef((props, ref) => {
+  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
-    return /* @__PURE__ */ React2.createElement("a", {
+    return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
-      target: openInNewTab ? "_blank" : "_self"
-    }, /* @__PURE__ */ React2.createElement("button", __spreadValues({
+      target: openInNewTab ? "_blank" : "_self",
+      rel: "noreferrer"
+    }, rest), {
       ref
-    }, rest), props.value));
+    }), value);
   }
-  return /* @__PURE__ */ React2.createElement("button", __spreadValues({
+  return /* @__PURE__ */ React.createElement("button", __spreadValues({
     ref
-  }, rest), props.value);
+  }, rest), value);
 });
 Button.defaultProps = {
-  value: "Shop now"
-};
-var schema2 = {
-  title: "Button",
+  value: "Shop now",
+  openInNewTab: false,
+  target: "",
   type: "button",
-  parentType: "container",
-  styles: [
-    {
-      type: "dimensions"
-    },
-    {
-      type: "alignment"
-    },
-    {
-      type: "border"
-    },
-    {
-      type: "background"
-    },
-    {
-      type: "spacing"
-    }
-  ],
-  settings: [],
-  toolbar: [
-    {
-      type: "delete"
-    },
-    {
-      type: "duplicate"
-    },
-    {
-      type: "link"
-    },
-    {
-      type: "color"
+  css: {
+    "@desktop": {
+      borderRadius: "72px",
+      border: "none",
+      backgroundColor: "#0F71FF",
+      color: "#fff",
+      fontSize: "13px",
+      padding: "10px 20px"
     }
-  ],
-  data: {
-    css: {
-      "@desktop": {
-        borderRadius: "72px",
-        border: "none",
-        backgroundColor: "#0F71FF",
-        color: "#fff",
-        fontSize: "13px",
-        padding: "10px 20px"
-      }
-    },
-    target: "",
-    openInNewTab: false
-  },
-  flags: {
-    draggable: true
   }
 };
 var button_default = Button;
 
 // src/elements/container.tsx
-var import_react2 = __toESM(require("react"));
-var Container = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({
+var import_react = __toESM(require("react"));
+var Container = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
     ref
   }, props));
 });
-var schema3 = {
-  title: "Container",
-  type: "container",
-  parentType: "layout",
-  data: {
-    css: {
-      "@desktop": {
-        display: "flex",
-        backgroundColor: "rgba(248,203,203,0.38)",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        justifyContent: "flex-start",
-        textAlign: "left",
-        gridArea: "1 / 1 / 3 / 6",
-        width: "100%",
-        height: "fit-content"
-      }
+Container.defaultProps = {
+  css: {
+    "@desktop": {
+      alignItems: "flex-start",
+      backgroundColor: "rgba(248,203,203,0.38)",
+      display: "flex",
+      flexDirection: "column",
+      gridArea: "1 / 1 / 3 / 6",
+      height: "fit-content",
+      justifyContent: "flex-start",
+      overflow: "hidden",
+      textAlign: "left",
+      width: "100%"
     }
-  },
-  settings: [],
-  flags: {
-    draggable: true,
-    resizable: true,
-    sortable: true
   }
 };
 var container_default = Container;
 
-// src/elements/layout.tsx
+// src/elements/countdown/index.tsx
 var import_react3 = __toESM(require("react"));
-var Layout = (0, import_react3.forwardRef)((props, ref) => {
-  const _a = props, { css, children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["css", "children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  return /* @__PURE__ */ import_react3.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_react3.default.createElement("div", {
-    "data-layout-content": true
-  }, children));
-});
-var schema4 = {
-  title: "Layout",
-  type: "layout",
-  parentType: "root",
-  data: {
-    css: {
-      "@desktop": {
-        paddingTop: "16px",
-        paddingBottom: "16px",
-        paddingLeft: "var(--gap)",
-        paddingRight: "var(--gap)",
-        "> [data-layout-content]": {
-          margin: "0 auto",
-          display: "grid !important",
-          gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-          gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-          gap: "var(--gap)",
-          maxWidth: "var(--grid-size)"
-        }
-      },
-      "@mobile": {
-        padding: "0 16px",
-        "> [data-layout-content]": {
-          display: "flex !important",
-          flexDirection: "column"
-        }
-      }
-    },
-    gridSize: 1224,
-    rows: 12,
-    columns: 12,
-    gap: 16,
-    rowSize: 48
-  },
-  settings: []
-};
-var layout_default = Layout;
 
-// src/elements/text.tsx
-var React5 = __toESM(require("react"));
-var Text = React5.forwardRef((props, ref) => {
-  let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React5.createElement("div", __spreadProps(__spreadValues({
+// src/elements/countdown/timer-block.tsx
+var import_react2 = __toESM(require("react"));
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: "wv-countdown-number"
+  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react2.default.createElement("div", {
+    className: "wv-countdown-label"
+  }, label));
+}
+
+// src/elements/countdown/utils.ts
+var times = ["days", "hours", "minutes", "seconds"];
+function getTime(_seconds) {
+  const ONE_MINUTE = 60 * 1e3;
+  const ONE_HOUR = 60 * ONE_MINUTE;
+  const ONE_DAY = 24 * ONE_HOUR;
+  const days = Math.floor(_seconds / ONE_DAY);
+  const hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
+  const minutes = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
+  const seconds = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3);
+  return { days, hours, minutes, seconds };
+}
+
+// src/elements/countdown/index.tsx
+var Countdown = (0, import_react3.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react3.useContext)(WeaverseContext);
+  let _a = props, {
+    timerType,
+    startTime,
+    endTime,
+    periods,
+    redirectUrl,
+    openInNewTab,
+    showColon,
+    showLabel
+  } = _a, rest = __objRest(_a, [
+    "timerType",
+    "startTime",
+    "endTime",
+    "periods",
+    "redirectUrl",
+    "openInNewTab",
+    "showColon",
+    "showLabel"
+  ]);
+  const [remaining, setRemaining] = import_react3.default.useState(0);
+  if (typeof endTime !== "number") {
+    endTime = Number.parseInt(endTime);
+  }
+  (0, import_react3.useEffect)(() => {
+    const flag = setInterval(() => {
+      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");
+      }
+      setRemaining(remainingTime);
+    }, 1e3);
+    return () => {
+      clearInterval(flag);
+    };
+  }, [startTime, endTime, periods, timerType]);
+  const timer = getTime(remaining);
+  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadValues({
     ref
-  }, rest), {
-    dangerouslySetInnerHTML: { __html: value }
+  }, rest), times.map((time) => {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, {
+      key: time
+    }, /* @__PURE__ */ import_react3.default.createElement(TimerBlock, {
+      label: showLabel ? time : "",
+      value: timer[time]
+    }), time !== "seconds" && /* @__PURE__ */ import_react3.default.createElement("span", {
+      className: `wv-countdown-number ${showColon ? "" : "hidden"}`
+    }, ":"));
   }));
 });
-Text.defaultProps = {
-  value: "sample text"
-};
-var schema5 = {
-  type: "text",
-  parentType: "container",
-  title: "Text",
-  settings: [],
-  data: {
-    css: {
-      "@desktop": {
-        width: "100%",
-        height: "fit-content",
-        padding: 0,
-        margin: 0,
-        outline: "none",
-        wordBreak: "break-word",
-        overflowWrap: "break-word",
-        whiteSpace: "break-spaces"
+Countdown.defaultProps = {
+  timerType: "specific",
+  startTime: Date.now(),
+  endTime: 1661140528e3,
+  periods: 90,
+  redirectUrl: "https://myshop.com",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true,
+  css: {
+    "@desktop": {
+      fontFamily: "Inter",
+      fontSize: 36,
+      fontWeight: 500,
+      display: "grid",
+      gridAutoFlow: "column",
+      gap: 10,
+      "& > div": {
+        width: 48,
+        textAlign: "center"
+      },
+      "& .wv-countdown-label": {
+        fontSize: 10
+      },
+      "& > span": {
+        lineHeight: "100%"
+      },
+      "& .hidden": {
+        visibility: "hidden"
       }
     }
   }
 };
-var text_default = Text;
+var countdown_default = Countdown;
 
 // src/elements/image.tsx
 var import_react4 = __toESM(require("react"));
-var Image = import_react4.default.forwardRef(function Image2(props, ref) {
+var Image = import_react4.default.forwardRef((props, ref) => {
   let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
   return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
     ref
@@ -298,101 +250,77 @@ var Image = import_react4.default.forwardRef(function Image2(props, ref) {
 });
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "weaverse image element"
-};
-var schema6 = {
-  settings: [],
-  type: "image",
-  parentType: "layout",
-  title: "Image",
-  data: {
-    css: {
-      "@desktop": {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover"
-      },
-      "@mobile": {
-        display: "block"
-      }
+  alt: "weaverse image element",
+  css: {
+    "@desktop": {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    "@mobile": {
+      display: "block"
     }
-  },
-  flags: {
-    resizable: true,
-    draggable: true,
-    sortable: true
   }
 };
 var image_default = Image;
 
-// src/elements/video.tsx
+// src/elements/layout.tsx
 var import_react5 = __toESM(require("react"));
-var Video = (0, import_react5.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
-  let _a = props, { src, type, controls, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "autoPlay", "loop", "muted"]);
-  if (isDesignMode) {
-    controls = false;
-    autoPlay = false;
-  }
-  console.info("9779 props", props, isDesignMode);
-  return /* @__PURE__ */ import_react5.default.createElement("video", __spreadValues({
+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"]);
+  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadValues({
     ref,
-    controls,
-    autoPlay,
-    loop,
-    muted: true
-  }, rest), /* @__PURE__ */ import_react5.default.createElement("source", {
-    src,
-    type: type || "video/mp4",
-    controlsList: "nodownload",
-    disablePictureInPicture: true
-  }));
+    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));
 });
-Video.defaultProps = {
-  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",
-  controls: false,
-  autoPlay: true,
-  muted: true,
-  width: "100%",
-  height: "auto"
-};
-var schema7 = {
-  title: "Video",
-  type: "video",
-  parentType: "layout",
-  toolbar: [
-    {
-      type: "delete"
-    },
-    {
-      type: "duplicate"
-    },
-    {
-      type: "link"
+Layout.defaultProps = {
+  gridSize: 1224,
+  rows: 12,
+  columns: 12,
+  gap: 16,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      paddingTop: "16px",
+      paddingBottom: "16px",
+      paddingLeft: "var(--gap)",
+      paddingRight: "var(--gap)",
+      "> [data-layout-content]": {
+        margin: "0 auto",
+        display: "grid !important",
+        gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+        gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+        gap: "var(--gap)",
+        maxWidth: "var(--grid-size)"
+      }
     },
-    {
-      type: "color"
+    "@mobile": {
+      padding: "0 16px",
+      "> [data-layout-content]": {
+        display: "flex !important",
+        flexDirection: "column"
+      }
     }
-  ],
-  flags: {
-    resizable: true,
-    draggable: true,
-    sortable: true
   }
 };
-var video_default = Video;
+var layout_default = Layout;
 
 // src/elements/map.tsx
 var import_react6 = __toESM(require("react"));
 var Map = (0, import_react6.forwardRef)((props, ref) => {
-  const { place, zoom } = props;
-  console.info("9779 props", props);
+  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
     ref
-  }, props), /* @__PURE__ */ import_react6.default.createElement("iframe", {
+  }, rest), /* @__PURE__ */ import_react6.default.createElement("iframe", {
     loading: "lazy",
     scrolling: "no",
     width: "100%",
@@ -406,203 +334,224 @@ var Map = (0, import_react6.forwardRef)((props, ref) => {
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14
-};
-var schema8 = {
-  title: "Map",
-  type: "map",
-  parentType: "layout",
-  toolbar: [
-    {
-      type: "delete"
-    },
-    {
-      type: "duplicate"
-    },
-    {
-      type: "link"
-    },
-    {
-      type: "color"
-    }
-  ],
-  data: {
-    css: {
-      "@desktop": {
-        gridArea: "1 / 1 / 11 / 13"
-      }
+  zoom: 14,
+  css: {
+    "@desktop": {
+      gridArea: "1 / 1 / 11 / 13"
     }
-  },
-  flags: {
-    resizable: true,
-    draggable: true,
-    sortable: true
   }
 };
 var map_default = Map;
 
-// src/elements/countdown/index.tsx
-var import_react8 = __toESM(require("react"));
-
-// src/elements/countdown/utils.ts
-function getTime(seconds) {
-  const ONE_MINUTE = 60 * 1e3;
-  const ONE_HOUR = 60 * ONE_MINUTE;
-  const ONE_DAY = 24 * ONE_HOUR;
-  const days = Math.floor(seconds / ONE_DAY);
-  const hours = Math.floor((seconds - days * ONE_DAY) / ONE_HOUR);
-  const mins = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
-  const secs = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR - mins * ONE_MINUTE) / 1e3);
-  return { days, hours, mins, secs };
-}
+// src/elements/text.tsx
+var React8 = __toESM(require("react"));
+var Text = React8.forwardRef((props, ref) => {
+  let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
+  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    dangerouslySetInnerHTML: { __html: value }
+  }));
+});
+Text.defaultProps = {
+  value: "The quick brown fox jumps over the lazy dog",
+  css: {
+    "@desktop": {
+      width: "100%",
+      height: "fit-content",
+      padding: 0,
+      margin: 0,
+      outline: "none",
+      wordBreak: "break-word",
+      overflowWrap: "break-word",
+      whiteSpace: "break-spaces"
+    }
+  }
+};
+var text_default = Text;
 
-// src/elements/countdown/timer-block.tsx
+// src/elements/video.tsx
 var import_react7 = __toESM(require("react"));
-var TimerBlock = (props) => {
-  return /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("div", null, props.value.toString().padStart(2, "0")), props.label && /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: "wv-countdown-label"
-  }, props.label));
+var Video = (0, import_react7.forwardRef)((props, ref) => {
+  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("video", __spreadValues({
+    ref,
+    controls: isDesignMode ? false : controls,
+    autoPlay: isDesignMode ? false : autoPlay,
+    loop,
+    muted: true,
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("source", {
+    src,
+    type: type || "video/mp4"
+  }));
+});
+Video.defaultProps = {
+  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",
+  controls: false,
+  autoPlay: true,
+  muted: true,
+  css: {
+    "@desktop": {
+      height: "fit-content",
+      margin: 0,
+      outline: "none",
+      overflowWrap: "break-word",
+      padding: 0,
+      whitespace: "break-spaces",
+      width: "100%",
+      wordBreak: "break-word"
+    }
+  }
 };
-var timer_block_default = TimerBlock;
+var video_default = Video;
 
-// src/elements/countdown/index.tsx
-var Countdown = (0, import_react8.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react8.useContext)(WeaverseContext);
-  let { type, startTime, endTime, periods, redirectUrl, openInNewTab, showColon, showLabel } = props;
-  const [remaining, setRemaining] = import_react8.default.useState(0);
-  if (typeof endTime !== "number") {
-    endTime = Number.parseInt(endTime);
-  }
-  (0, import_react8.useEffect)(() => {
-    const flag = setInterval(() => {
-      const remainingTime = Math.max((type === "specific" ? new Date(endTime).getTime() : new Date(startTime) + periods * 60 * 1e3) - Date.now(), 0);
-      if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
-        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
-      }
-      setRemaining(remainingTime);
-    }, 1e3);
-    return () => {
-      clearInterval(flag);
-    };
-  }, [startTime, endTime, periods, type]);
-  const timer = getTime(remaining);
+// 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
-  }, props), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
-    value: timer.days,
-    label: showLabel && "days"
-  }), /* @__PURE__ */ import_react8.default.createElement("span", {
-    className: !showColon && "hidden"
-  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
-    value: timer.hours,
-    label: showLabel && "hours"
-  }), /* @__PURE__ */ import_react8.default.createElement("span", {
-    className: !showColon && "hidden"
-  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
-    value: timer.mins,
-    label: showLabel && "minutes"
-  }), /* @__PURE__ */ import_react8.default.createElement("span", {
-    className: !showColon && "hidden"
-  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
-    value: timer.secs,
-    label: showLabel && "seconds"
-  }));
+  }, rest), /* @__PURE__ */ import_react8.default.createElement("div", {
+    style: { fontWeight: 600, marginBottom: "10px" }
+  }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
 });
-Countdown.defaultProps = {
-  type: "specific",
-  startTime: Date.now(),
-  endTime: 1661140528e3,
-  redirectUrl: "",
-  openInNewTab: false,
-  showLabel: true,
-  showColon: true
-};
-var schema9 = {
-  title: "Countdown",
-  type: "countdown",
-  parentType: "container",
-  toolbar: [
-    {
-      type: "delete"
-    },
-    {
-      type: "duplicate"
-    },
-    {
-      type: "link"
-    },
-    {
-      type: "color"
+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(console.error);
     }
-  ],
-  data: {
-    css: {
-      "@desktop": {
-        fontFamily: "Inter",
-        fontSize: 36,
-        fontWeight: 500,
+  }, [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
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__PURE__ */ import_react9.default.createElement("div", {
+    className: "wv-ig-media-wrapper"
+  }, 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", {
+      alt: item.caption,
+      src: item.media_url
+    }));
+  })));
+});
+Instagram.defaultProps = {
+  token: "",
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
+  css: {
+    "@desktop": {
+      ".wv-ig-media-wrapper": {
+        overflow: "hidden",
+        maxWidth: "100%",
+        maxHeight: "100%",
         display: "grid",
-        gridAutoFlow: "column",
-        gap: 10,
-        "& > div": {
-          width: 48,
-          textAlign: "center"
-        },
-        "& .wv-countdown-label": {
-          fontSize: 10
-        },
-        "& > span": {
-          lineHeight: "100%"
-        },
-        "& .hidden": {
-          visibility: "hidden"
+        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"
         }
       }
     }
-  },
-  flags: {
-    draggable: true
   }
 };
-var countdown_default = Countdown;
+var instagram_default = Instagram;
 
 // src/elements/index.ts
 var elements = {
+  Countdown: {
+    Component: countdown_default,
+    type: "countdown"
+  },
   Button: {
     Component: button_default,
-    schema: schema2
-  },
-  BaseElement: {
-    Component: base_default,
-    schema
-  },
-  Text: {
-    Component: text_default,
-    schema: schema5
-  },
-  Layout: {
-    Component: layout_default,
-    schema: schema4
+    type: "button"
   },
   Container: {
     Component: container_default,
-    schema: schema3
+    type: "container"
   },
   Image: {
     Component: image_default,
-    schema: schema6
+    type: "image"
   },
-  Video: {
-    Component: video_default,
-    schema: schema7
+  Instagram: {
+    Component: instagram_default,
+    type: "instagram"
+  },
+  Layout: {
+    Component: layout_default,
+    type: "layout"
   },
   Map: {
     Component: map_default,
-    schema: schema8
+    type: "map"
   },
-  Countdown: {
-    Component: countdown_default,
-    schema: schema9
+  Text: {
+    Component: text_default,
+    type: "text"
+  },
+  Video: {
+    Component: video_default,
+    type: "video"
   }
 };
 var elements_default = elements;
@@ -615,30 +564,31 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react9.createContext)({});
+var WeaverseContext = (0, import_react10.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
   return {
-    "@desktop": css[`@desktop`],
-    "@mobile": css[`@mobile`]
+    "@desktop": css["@desktop"],
+    "@mobile": css["@mobile"]
   };
 };
 function generateItemClass(instance, stitchesInstance) {
-  var _a;
+  var _a, _b, _c, _d;
   let { css, className: cls = "" } = instance.data;
+  let defaultCss = ((_c = (_b = (_a = instance.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.css) || {};
   let className = "";
-  if (css) {
-    let formattedCss = shortCssObject(css);
+  if (css || defaultCss) {
+    let formattedCss = shortCssObject(css || defaultCss);
     let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
     let { stitchesClass } = instance;
-    let otherClass = (((_a = instance.ref.current) == null ? void 0 : _a.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    let otherClass = (((_d = instance.ref.current) == null ? void 0 : _d.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
     className = `${cls} ${newClass} ${otherClass}`.trim();
     instance.stitchesClass = newClass;
   }
@@ -648,9 +598,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react10.useState)(context.projectData);
-  let rootRef = (0, import_react10.useRef)();
-  (0, import_react10.useEffect)(() => {
+  let [, setData] = (0, import_react11.useState)(context.projectData);
+  let rootRef = (0, import_react11.useRef)();
+  (0, import_react11.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -663,21 +613,22 @@ 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_react10.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  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: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react10.useEffect)(() => {
+  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+  (0, import_react11.useEffect)(() => {
+    var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -685,22 +636,23 @@ var ItemComponent = ({ instance }) => {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
+    (_a2 = instance.ref.current) == null ? void 0 : _a2.removeAttribute("css");
     return () => {
       instance.unsubscribe(update);
     };
   }, []);
-  let Element = elementInstances.get(type || "base");
+  let Element = elementInstances.get(type);
   if (Element == null ? void 0 : Element.Component) {
     let Component = Element.Component;
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -708,15 +660,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react10.useContext)(WeaverseContext);
+  let context = (0, import_react11.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
     instance
   });
 };