@weaverse/react 0.6.26 → 0.6.29

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -562,7 +562,6 @@ var Accordion = (0, import_react10.forwardRef)((props, ref) => {
       setActive(id);
     }
   };
-  console.info("9779 active", active);
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
@@ -588,14 +587,14 @@ Accordion.defaultProps = {
       gap: 4,
       ".wv-accordion-header": {
         borderRadius: 4,
-        padding: 4,
+        padding: 12,
         marginBottom: 4,
-        backgroundColor: "#aaa",
+        border: "1px solid #76A9FA",
         "&.active": {
           color: "blue"
         },
         '&.active + [data-wv-type="accordion.content"]': {
-          display: "grid"
+          maxHeight: "var(--max-height, inherit)"
         }
       }
     }
@@ -606,18 +605,17 @@ var accordion_default = Accordion;
 // src/elements/accordion/AccordionWrapper.tsx
 var import_react11 = __toESM(require("react"));
 var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
-  const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
+  const _a = props, { ["data-wv-id"]: wvId, headerText, children } = _a, rest = __objRest(_a, ["data-wv-id", "headerText", "children"]);
   const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
   return /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react11.default.createElement("div", {
-    onClick: () => setActive(wrapperId),
-    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
-  }, headerText, " #", wrapperId), children);
+    onClick: () => setActive(wvId),
+    className: `wv-accordion-header ${active === wvId ? "active" : ""}`
+  }, headerText), children);
 });
 AccordionWrapper.defaultProps = {
-  wrapperId: 1,
-  headerText: "Header 1",
+  headerText: "Header text",
   css: {
     "@desktop": {
       maxHeight: "100%"
@@ -635,7 +633,8 @@ var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
     "--columns": columns,
     "--gap": gap + "px",
     "--row-size": rowSize + "px",
-    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
   };
   return /* @__PURE__ */ import_react12.default.createElement("div", __spreadProps(__spreadValues({
     ref
@@ -654,17 +653,158 @@ AccordionContent.defaultProps = {
     "@desktop": {
       width: "100%",
       maxWidth: "var(--grid-size)",
-      backgroundColor: "#DDD",
-      display: "none",
+      display: "grid",
       gridTemplateRows: "repeat(var(--rows), var(--row-size))",
       gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
       gap: "var(--gap)",
+      overflow: "hidden",
+      maxHeight: 0,
+      transition: "all var(--transition-duration, 0.3s) ease-in-out",
       borderRadius: 4
     }
   }
 };
 var AccordionContent_default = AccordionContent;
 
+// src/elements/tab/index.tsx
+var import_react14 = __toESM(require("react"));
+
+// src/elements/tab/TabHeaderWrapper.tsx
+var import_react13 = __toESM(require("react"));
+function TabHeader(props) {
+  const { wvId } = props;
+  const { active, setActive } = (0, import_react13.useContext)(TabContext);
+  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const instance = itemInstances.get(wvId);
+  let [data, setData] = (0, import_react13.useState)(instance.data);
+  (0, import_react13.useEffect)(() => {
+    let update = (data2) => setData(__spreadValues({}, data2));
+    instance.subscribe(update);
+  }, []);
+  const text = data.headerText;
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    onClick: () => setActive(wvId),
+    className: `wv-tab-header${active === wvId ? " active" : ""}`
+  }, text);
+}
+function TabHeaderWrapper(props) {
+  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const instance = itemInstances.get(props.wvId);
+  const data = instance.data;
+  const childIds = data.childIds;
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: "wv-tab-headerWrapper"
+  }, childIds.map((id) => /* @__PURE__ */ import_react13.default.createElement(TabHeader, {
+    key: id,
+    wvId: id
+  })));
+}
+
+// src/elements/tab/index.tsx
+var TabContext = (0, import_react14.createContext)({
+  active: null,
+  setActive: () => {
+  }
+});
+var Tab = (0, import_react14.forwardRef)((props, ref) => {
+  var _b, _c, _d;
+  const wvId = props["data-wv-id"];
+  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const defaultActive = (_d = (_c = (_b = import_react14.default.Children.toArray(children)) == null ? void 0 : _b[0]) == null ? void 0 : _c.props) == null ? void 0 : _d.id;
+  const [active, setActive] = (0, import_react14.useState)(defaultActive);
+  const setOpenTab = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  return /* @__PURE__ */ import_react14.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
+    value: { active, setActive: setOpenTab }
+  }, /* @__PURE__ */ import_react14.default.createElement(TabHeaderWrapper, {
+    wvId
+  }), children));
+});
+Tab.defaultProps = {
+  items: [
+    {
+      headerText: "Header 1"
+    },
+    {
+      headerText: "Header 2"
+    },
+    {
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      "& .wv-tab-headerWrapper": {
+        width: "100%",
+        display: "flex",
+        marginBottom: 10
+      },
+      "& .wv-tab-header": {
+        backgroundColor: "#f0f2f3",
+        padding: "10px 16px",
+        cursor: "pointer",
+        "&.active": {
+          backgroundColor: "#0F71FF",
+          color: "#fff"
+        }
+      }
+    }
+  }
+};
+var tab_default = Tab;
+
+// src/elements/tab/TabContent.tsx
+var import_react15 = __toESM(require("react"));
+var TabContent = (0, import_react15.forwardRef)((props, ref) => {
+  const { active } = (0, import_react15.useContext)(TabContext);
+  const wvId = props["data-wv-id"];
+  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
+  let style = {
+    "--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))",
+    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
+    "--content-active": active === wvId ? "grid" : "none"
+  };
+  return /* @__PURE__ */ import_react15.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
+    element: "Tab"
+  }, "Item Content"));
+});
+TabContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "var(--content-active, none)",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var TabContent_default = TabContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -714,6 +854,14 @@ var elements = {
   AccordionContent: {
     Component: AccordionContent_default,
     type: "accordion.content"
+  },
+  Tab: {
+    Component: tab_default,
+    type: "tab"
+  },
+  TabContent: {
+    Component: TabContent_default,
+    type: "tab.content"
   }
 };
 var elements_default = elements;
@@ -726,13 +874,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react13.createContext)({});
+var WeaverseContext = (0, import_react16.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react14 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -760,14 +908,11 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react14.useState)(context.projectData);
-  let rootRef = (0, import_react14.useRef)();
-  (0, import_react14.useEffect)(() => {
-    let update = () => setData({});
+  let [, setData] = (0, import_react17.useState)(context.projectData);
+  let rootRef = (0, import_react17.useRef)();
+  let update = () => setData({});
+  (0, import_react17.useEffect)(() => {
     context.subscribe(update);
-    if (context.projectData) {
-      setTimeout(update, 110);
-    }
     context.contentRootElement = rootRef.current;
     return () => {
       context.unsubscribe(update);
@@ -775,21 +920,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 ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react17.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react14.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react14.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react17.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react17.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -809,12 +954,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react17.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -822,15 +967,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react14.useContext)(WeaverseContext);
+  let context = (0, import_react17.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
+    return /* @__PURE__ */ import_react17.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react14.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react17.default.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.26",
+  "version": "0.6.29",
   "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.26"
+    "@weaverse/core": "0.6.29"
   }
 }

package/dist/index.d.ts

@@ -1,98 +0,0 @@
-import * as react from 'react';
-import { ReactElement, ReactNode } from 'react';
-import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
-export * from '@weaverse/core';
-
-declare let createRootContext: (configs: WeaverseType) => Weaverse;
-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[];
-}
-declare type WeaverseRootPropsType = {
-    context: Weaverse;
-};
-declare type ItemComponentProps = {
-    instance: InstanceType<typeof WeaverseItemStore>;
-};
-interface PlaceholderProps {
-    element: string;
-    children: ReactElement | ReactElement[] | ReactNode | ReactNode[];
-}
-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;
-    objectFit: 'contain' | 'cover';
-    objectPosition: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'center left' | 'center right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
-    onClickAction: 'none' | 'open-lightbox' | 'open-link';
-    linkTo?: string;
-    openLinkInNewTab?: boolean;
-}
-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 | null;
-
-export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.mjs

@@ -1,816 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/context.ts
-import { Weaverse } from "@weaverse/core";
-import { createContext as createContext2 } 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"]);
-  if (target) {
-    return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
-      href: target,
-      target: openInNewTab ? "_blank" : "_self",
-      rel: "noreferrer"
-    }, rest), {
-      ref
-    }), value);
-  }
-  return /* @__PURE__ */ React.createElement("button", __spreadValues({
-    ref
-  }, rest), value);
-});
-Button.defaultProps = {
-  value: "Shop now",
-  openInNewTab: false,
-  target: "",
-  type: "button",
-  css: {
-    "@desktop": {
-      borderRadius: "72px",
-      border: "none",
-      backgroundColor: "#0F71FF",
-      color: "#fff",
-      fontSize: "13px",
-      padding: "10px 20px"
-    }
-  }
-};
-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);
-});
-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%"
-    }
-  }
-};
-var container_default = Container;
-
-// src/elements/countdown/index.tsx
-import React4, { forwardRef as forwardRef3, useContext, useEffect } from "react";
-
-// src/elements/countdown/timer-block.tsx
-import React3 from "react";
-function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", {
-    className: "wv-countdown-number"
-  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.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 = forwardRef3((props, ref) => {
-  const { isDesignMode } = 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] = React4.useState(0);
-  if (typeof endTime !== "number") {
-    endTime = Number.parseInt(endTime);
-  }
-  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);
-      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__ */ React4.createElement("div", __spreadValues({
-    ref
-  }, rest), times.map((time) => {
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, {
-      key: time
-    }, /* @__PURE__ */ React4.createElement(TimerBlock, {
-      label: showLabel ? time : "",
-      value: timer[time]
-    }), time !== "seconds" && /* @__PURE__ */ React4.createElement("span", {
-      className: `wv-countdown-number ${showColon ? "" : "hidden"}`
-    }, ":"));
-  }));
-});
-Countdown.defaultProps = {
-  timerType: "fixed-time",
-  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 countdown_default = Countdown;
-
-// src/elements/image.tsx
-import React5, { useContext as useContext2 } from "react";
-var Image = React5.forwardRef((props, ref) => {
-  let { isDesignMode } = useContext2(WeaverseContext);
-  let _a = props, {
-    src,
-    alt,
-    objectFit,
-    objectPosition,
-    onClickAction,
-    openLinkInNewTab
-  } = _a, rest = __objRest(_a, [
-    "src",
-    "alt",
-    "objectFit",
-    "objectPosition",
-    "onClickAction",
-    "openLinkInNewTab"
-  ]);
-  let style = {
-    "--wv-img-object-fit": objectFit,
-    "--wv-img-object-position": objectPosition
-  };
-  let handleClick = () => {
-    if (isDesignMode) {
-      return console.log("Click action:", onClickAction);
-    }
-    if (onClickAction) {
-      console.log("TODO: click action:", onClickAction);
-    }
-  };
-  return /* @__PURE__ */ React5.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style,
-    onClick: handleClick
-  }), /* @__PURE__ */ React5.createElement("img", {
-    alt,
-    src
-  }));
-});
-Image.defaultProps = {
-  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "Image alt text",
-  objectFit: "cover",
-  objectPosition: "center",
-  onClickAction: "open-lightbox",
-  openLinkInNewTab: false,
-  css: {
-    "@desktop": {
-      img: {
-        width: "100%",
-        height: "100%",
-        objectFit: "var(--wv-img-object-fit, cover)",
-        objectPosition: "var(--wv-img-object-position, center)"
-      }
-    }
-  }
-};
-var image_default = Image;
-
-// src/elements/layout.tsx
-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", {
-    "data-layout-content": true
-  }, children));
-});
-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)"
-      }
-    },
-    "@mobile": {
-      padding: "0 16px",
-      "> [data-layout-content]": {
-        display: "flex !important",
-        flexDirection: "column"
-      }
-    }
-  }
-};
-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"]);
-  return /* @__PURE__ */ React7.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ React7.createElement("iframe", {
-    loading: "lazy",
-    scrolling: "no",
-    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" }
-  }));
-});
-Map.defaultProps = {
-  place: "Hanoi",
-  zoom: 14
-};
-var map_default = Map;
-
-// src/elements/text.tsx
-import * as React8 from "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: "20px",
-      outline: "none",
-      wordBreak: "break-word",
-      overflowWrap: "break-word",
-      whiteSpace: "break-spaces"
-    }
-  }
-};
-var text_default = Text;
-
-// src/elements/video.tsx
-import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
-var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext3(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", {
-    controls: isDesignMode ? false : controls,
-    autoPlay: isDesignMode ? false : autoPlay,
-    loop,
-    muted: true,
-    controlsList: "nodownload",
-    disablePictureInPicture: true
-  }, /* @__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",
-  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
-  loop: false,
-  type: "video/mp4",
-  controls: false,
-  autoPlay: true,
-  muted: true,
-  css: {
-    "@desktop": {
-      video: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "16 / 9"
-      }
-    }
-  }
-};
-var video_default = Video;
-
-// src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, 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 = {
-    position: "absolute",
-    height: "100%",
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151",
-    pointerEvents: "none",
-    zIndex: 1
-  };
-  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) => {
-  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  let [media, setMedia] = useState([]);
-  let [error, setError] = useState(null);
-  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);
-    }
-  }, [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 + "px"
-  };
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ React11.createElement("div", {
-    className: "wv-ig-media-container"
-  }, media.slice(0, numberOfImages).map((item) => {
-    let { id, permalink, caption, media_url } = item;
-    return /* @__PURE__ */ React11.createElement("a", {
-      key: id,
-      href: permalink,
-      target: "_blank",
-      rel: "noreferrer"
-    }, /* @__PURE__ */ React11.createElement("img", {
-      alt: caption,
-      src: media_url
-    }));
-  })));
-});
-Instagram.defaultProps = {
-  token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0,
-  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"
-        }
-      }
-    }
-  }
-};
-var instagram_default = Instagram;
-
-// src/elements/accordion/index.tsx
-import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
-var AccordionContext = createContext({
-  active: null,
-  setActive: () => {
-  }
-});
-var Accordion = forwardRef10((props, ref) => {
-  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
-  const [active, setActive] = useState2(null);
-  const setOpenAccordion = (id) => {
-    if (id === active) {
-      setActive(null);
-    } else {
-      setActive(id);
-    }
-  };
-  console.info("9779 active", active);
-  return /* @__PURE__ */ React12.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
-    value: { active, setActive: setOpenAccordion }
-  }, children));
-});
-Accordion.defaultProps = {
-  items: [
-    {
-      id: 1,
-      headerText: "Header 1",
-      childrenId: true
-    },
-    {
-      id: 2,
-      headerText: "Header 2"
-    }
-  ],
-  css: {
-    "@desktop": {
-      display: "flex",
-      flexDirection: "column",
-      gap: 4,
-      ".wv-accordion-header": {
-        borderRadius: 4,
-        padding: 4,
-        marginBottom: 4,
-        backgroundColor: "#aaa",
-        "&.active": {
-          color: "blue"
-        },
-        '&.active + [data-wv-type="accordion.content"]': {
-          display: "grid"
-        }
-      }
-    }
-  }
-};
-var accordion_default = Accordion;
-
-// src/elements/accordion/AccordionWrapper.tsx
-import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
-var AccordionWrapper = forwardRef11((props, ref) => {
-  const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
-  const { active, setActive } = useContext4(AccordionContext);
-  return /* @__PURE__ */ React13.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ React13.createElement("div", {
-    onClick: () => setActive(wrapperId),
-    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
-  }, headerText, " #", wrapperId), children);
-});
-AccordionWrapper.defaultProps = {
-  wrapperId: 1,
-  headerText: "Header 1",
-  css: {
-    "@desktop": {
-      maxHeight: "100%"
-    }
-  }
-};
-var AccordionWrapper_default = AccordionWrapper;
-
-// src/elements/accordion/AccordionContent.tsx
-import React14, { forwardRef as forwardRef12 } from "react";
-var AccordionContent = forwardRef12((props, ref) => {
-  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
-  let style = {
-    "--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__ */ React14.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
-    element: "Accordion"
-  }, "Item Content"));
-});
-AccordionContent.defaultProps = {
-  rows: 2,
-  columns: 12,
-  gap: 4,
-  rowSize: 48,
-  css: {
-    "@desktop": {
-      width: "100%",
-      maxWidth: "var(--grid-size)",
-      backgroundColor: "#DDD",
-      display: "none",
-      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-      gap: "var(--gap)",
-      borderRadius: 4
-    }
-  }
-};
-var AccordionContent_default = AccordionContent;
-
-// src/elements/index.ts
-var elements = {
-  Countdown: {
-    Component: countdown_default,
-    type: "countdown"
-  },
-  Button: {
-    Component: button_default,
-    type: "button"
-  },
-  Container: {
-    Component: container_default,
-    type: "container"
-  },
-  Image: {
-    Component: image_default,
-    type: "image"
-  },
-  Instagram: {
-    Component: instagram_default,
-    type: "instagram"
-  },
-  Layout: {
-    Component: layout_default,
-    type: "layout"
-  },
-  Map: {
-    Component: map_default,
-    type: "map"
-  },
-  Text: {
-    Component: text_default,
-    type: "text"
-  },
-  Video: {
-    Component: video_default,
-    type: "video"
-  },
-  Accordion: {
-    Component: accordion_default,
-    type: "accordion"
-  },
-  AccordionWrapper: {
-    Component: AccordionWrapper_default,
-    type: "accordion.wrapper"
-  },
-  AccordionContent: {
-    Component: AccordionContent_default,
-    type: "accordion.content"
-  }
-};
-var elements_default = elements;
-
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(elements_default).forEach((key) => {
-    rootContext.registerElement(elements_default[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext2({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
-// src/renderer.tsx
-import { isBrowser } from "@weaverse/core";
-import React15, { useContext as useContext5, useEffect as useEffect3, useRef, useState as useState3 } from "react";
-
-// src/utils/index.ts
-var shortCssObject = (css) => {
-  return {
-    "@desktop": css["@desktop"],
-    "@mobile": css["@mobile"]
-  };
-};
-function generateItemClass(instance, stitchesInstance) {
-  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 || defaultCss) {
-    let formattedCss = shortCssObject(css || defaultCss);
-    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = instance;
-    let otherClass = (((_d = instance.ref.current) == null ? void 0 : _d.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
-    className = `${cls} ${newClass} ${otherClass}`.trim();
-    instance.stitchesClass = newClass;
-  }
-  return className;
-}
-
-// src/renderer.tsx
-var WeaverseRoot = ({ context }) => {
-  var _a, _b;
-  let [, setData] = useState3(context.projectData);
-  let rootRef = useRef();
-  useEffect3(() => {
-    let update = () => setData({});
-    context.subscribe(update);
-    if (context.projectData) {
-      setTimeout(update, 110);
-    }
-    context.contentRootElement = rootRef.current;
-    return () => {
-      context.unsubscribe(update);
-    };
-  }, []);
-  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
-  let themeClass = context.stitchesInstance.theme.className;
-  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
-    className: `weaverse-content-root ${themeClass}`
-  }, eventHandlers), {
-    ref: rootRef
-  }), /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
-    value: context
-  }, /* @__PURE__ */ React15.createElement(ItemInstance, {
-    id: context.projectData.rootId
-  }))) : null;
-};
-var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
-  let [data, setData] = useState3(instance.data);
-  let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  useEffect3(() => {
-    var _a2;
-    let update = (data2) => setData(__spreadValues({}, data2));
-    instance.subscribe(update);
-    if (isBrowser && !instance.ref.current) {
-      Object.assign(instance.ref, {
-        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);
-  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__ */ React15.createElement(Component, __spreadValues({
-      key: id,
-      "data-wv-type": type,
-      "data-wv-id": id,
-      className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
-      key: id2,
-      id: id2
-    })));
-  }
-  return null;
-};
-var ItemInstance = ({ id }) => {
-  let context = useContext5(WeaverseContext);
-  let { itemInstances } = context;
-  let instance = itemInstances.get(id);
-  if (!instance) {
-    return /* @__PURE__ */ React15.createElement("div", {
-      style: { display: "none" }
-    }, "Item instance ", id, " not found");
-  }
-  return /* @__PURE__ */ React15.createElement(ItemComponent, {
-    instance
-  });
-};
-
-// src/index.ts
-export * from "@weaverse/core";
-export {
-  WeaverseContext,
-  WeaverseContextConsumer,
-  WeaverseContextProvider,
-  WeaverseRoot,
-  createRootContext
-};