@weaverse/react 0.7.9 → 0.7.11

package/dist/index.js

@@ -27,6 +27,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Elements: () => Elements,
+  SharedComponents: () => SharedComponents,
   WeaverseContext: () => WeaverseContext,
   WeaverseContextConsumer: () => WeaverseContextConsumer,
   WeaverseContextProvider: () => WeaverseContextProvider,
@@ -35,10 +37,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/context.ts
-var import_core = require("@weaverse/core");
-var import_react20 = require("react");
-
 // src/elements/button.tsx
 var React = __toESM(require("react"));
 var Button = React.forwardRef((props, ref) => {
@@ -87,33 +85,46 @@ var Container = (0, import_react.forwardRef)(
     }, 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 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%"
   }
 };
+Container.defaultProps = {};
 var container_default = Container;
 
 // src/elements/countdown/index.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
+
+// src/context.ts
+var import_core = require("@weaverse/core");
+var import_react2 = require("react");
+var createRootContext = (configs) => {
+  let rootContext = new import_core.Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = (0, import_react2.createContext)({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/elements/countdown/timer-block.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "wv-countdown-number"
-  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
     className: "wv-countdown-label"
   }, label));
 }
@@ -136,9 +147,9 @@ function getTime(_seconds) {
 }
 
 // src/elements/countdown/index.tsx
-var Countdown = (0, import_react3.forwardRef)(
+var Countdown = (0, import_react4.forwardRef)(
   (props, ref) => {
-    const { isDesignMode } = (0, import_react3.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
     let {
       timerType,
       startTime,
@@ -150,11 +161,11 @@ var Countdown = (0, import_react3.forwardRef)(
       showLabel,
       ...rest
     } = props;
-    const [remaining, setRemaining] = import_react3.default.useState(0);
+    const [remaining, setRemaining] = import_react4.default.useState(0);
     if (typeof endTime !== "number") {
       endTime = Number.parseInt(endTime);
     }
-    (0, import_react3.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       const flag = setInterval(() => {
         const remainingTime = Math.max(
           (timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(),
@@ -170,21 +181,44 @@ var Countdown = (0, import_react3.forwardRef)(
       };
     }, [startTime, endTime, periods, timerType]);
     const timer = getTime(remaining);
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
+    return /* @__PURE__ */ import_react4.default.createElement("div", {
       ref,
       ...rest
     }, times.map((time) => {
-      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, {
+      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, {
         key: time
-      }, /* @__PURE__ */ import_react3.default.createElement(TimerBlock, {
+      }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
         label: showLabel ? time : "",
         value: timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ import_react3.default.createElement("span", {
+      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("span", {
         className: `wv-countdown-number ${showColon ? "" : "hidden"}`
       }, ":"));
     }));
   }
 );
+var css2 = {
+  "@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"
+    }
+  }
+};
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
@@ -193,38 +227,15 @@ Countdown.defaultProps = {
   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"
-      }
-    }
-  }
+  showColon: true
 };
 var countdown_default = Countdown;
 
 // src/elements/image.tsx
-var import_react4 = __toESM(require("react"));
-var Image = import_react4.default.forwardRef(
+var import_react5 = __toESM(require("react"));
+var Image = import_react5.default.forwardRef(
   (props, ref) => {
-    let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+    let { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
     let {
       src,
       alt,
@@ -246,40 +257,40 @@ var Image = import_react4.default.forwardRef(
         console.log("TODO: click action:", onClickAction);
       }
     };
-    return /* @__PURE__ */ import_react4.default.createElement("div", {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
       ref,
       ...rest,
       style,
       onClick: handleClick
-    }, /* @__PURE__ */ import_react4.default.createElement("img", {
+    }, /* @__PURE__ */ import_react5.default.createElement("img", {
       alt,
       src
     }));
   }
 );
+var css3 = {
+  "@desktop": {
+    img: {
+      width: "100%",
+      height: "100%",
+      objectFit: "var(--wv-img-object-fit, cover)",
+      objectPosition: "var(--wv-img-object-position, center)"
+    }
+  }
+};
 Image.defaultProps = {
   src: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/",
   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)"
-      }
-    }
-  }
+  openLinkInNewTab: false
 };
 var image_default = Image;
 
 // src/elements/layout.tsx
-var import_react5 = __toESM(require("react"));
-var Layout = (0, import_react5.forwardRef)((props, ref) => {
+var import_react6 = __toESM(require("react"));
+var Layout = (0, import_react6.forwardRef)((props, ref) => {
   let { children, rows, gap, rowSize, columns, gridSize, ...rest } = props;
   let style = {
     "--grid-size": gridSize + "px",
@@ -289,54 +300,54 @@ var Layout = (0, import_react5.forwardRef)((props, ref) => {
     "--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", {
+  return /* @__PURE__ */ import_react6.default.createElement("section", {
     ref,
     ...rest,
     style
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
+var css4 = {
+  "@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"
+    }
+  }
+};
 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"
-      }
-    }
-  }
+  rowSize: 48
 };
 var layout_default = Layout;
 
 // src/elements/map.tsx
-var import_react6 = __toESM(require("react"));
-var Map = (0, import_react6.forwardRef)((props, ref) => {
+var import_react7 = __toESM(require("react"));
+var Map = (0, import_react7.forwardRef)((props, ref) => {
   let { place, zoom, ...rest } = props;
-  return /* @__PURE__ */ import_react6.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react6.default.createElement("iframe", {
+  }, /* @__PURE__ */ import_react7.default.createElement("iframe", {
     loading: "lazy",
     scrolling: "no",
     width: "100%",
@@ -346,6 +357,7 @@ var Map = (0, import_react6.forwardRef)((props, ref) => {
     style: { pointerEvents: "none" }
   }));
 });
+var css5 = {};
 Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
@@ -364,39 +376,48 @@ var Text = React8.forwardRef(
     });
   }
 );
-Text.defaultProps = {
-  value: "The quick brown fox jumps over the lazy dog",
-  css: {
-    "@desktop": {
-      padding: "10px",
-      wordBreak: "break-word",
-      overflowWrap: "break-word",
-      whiteSpace: "break-spaces"
-    }
+var css6 = {
+  "@desktop": {
+    padding: "10px",
+    wordBreak: "break-word",
+    overflowWrap: "break-word",
+    whiteSpace: "break-spaces"
   }
 };
+Text.defaultProps = {
+  value: "The quick brown fox jumps over the lazy dog"
+};
 var text_default = Text;
 
 // src/elements/video.tsx
-var import_react7 = __toESM(require("react"));
-var Video = (0, import_react7.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
+var import_react8 = __toESM(require("react"));
+var Video = (0, import_react8.forwardRef)((props, ref) => {
+  let { isDesignMode } = (0, import_react8.useContext)(WeaverseContext);
   let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react7.default.createElement("video", {
+  }, /* @__PURE__ */ import_react8.default.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react7.default.createElement("source", {
+  }, /* @__PURE__ */ import_react8.default.createElement("source", {
     src,
     type: type || "video/mp4"
   }), "Your browser does not support the video tag."));
 });
+var css7 = {
+  "@desktop": {
+    video: {
+      height: "100%",
+      width: "100%",
+      aspectRatio: "16 / 9"
+    }
+  }
+};
 Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
@@ -404,47 +425,38 @@ Video.defaultProps = {
   type: "video/mp4",
   controls: false,
   autoPlay: true,
-  muted: true,
-  css: {
-    "@desktop": {
-      video: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "16 / 9"
-      }
-    }
-  }
+  muted: true
 };
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/elements/shared/Placeholder.tsx
-var import_react8 = __toESM(require("react"));
-var Placeholder = (0, import_react8.forwardRef)(
+var import_react9 = __toESM(require("react"));
+var Placeholder = (0, import_react9.forwardRef)(
   (props, ref) => {
     let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
       "data-wv-type": "placeholder",
       style: { display: "none" },
       ref,
       ...rest
-    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
       style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
+    }, element), /* @__PURE__ */ import_react9.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)(
+var Instagram = (0, import_react10.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react9.useState)([]);
-    let [error, setError] = (0, import_react9.useState)(null);
-    (0, import_react9.useEffect)(() => {
+    let [media, setMedia] = (0, import_react10.useState)([]);
+    let [error, setError] = (0, import_react10.useState)(null);
+    (0, import_react10.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -461,10 +473,10 @@ var Instagram = (0, import_react9.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react9.default.createElement("div", {
+      return /* @__PURE__ */ import_react10.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react9.default.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ import_react10.default.createElement(Placeholder_default, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -472,65 +484,65 @@ var Instagram = (0, import_react9.forwardRef)(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react9.default.createElement("div", {
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+    }, /* @__PURE__ */ import_react10.default.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ import_react9.default.createElement("a", {
+      return /* @__PURE__ */ import_react10.default.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ import_react9.default.createElement("img", {
+      }, /* @__PURE__ */ import_react10.default.createElement("img", {
         alt: caption,
         src: media_url
       }));
     })));
   }
 );
+var css8 = {
+  "@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"
+      }
+    }
+  }
+};
 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"
-        }
-      }
-    }
-  }
+  gap: 0
 };
 var instagram_default = Instagram;
 
 // src/elements/accordion/index.tsx
-var import_react10 = __toESM(require("react"));
-var AccordionContext = (0, import_react10.createContext)({
+var import_react11 = __toESM(require("react"));
+var AccordionContext = (0, import_react11.createContext)({
   iconName: "arrow",
   active: [],
   setActive: () => {
   }
 });
-var Accordion = (0, import_react10.forwardRef)(
+var Accordion = (0, import_react11.forwardRef)(
   (props, ref) => {
     const { iconName, children, ...rest } = props;
-    const [active, setActive] = (0, import_react10.useState)([]);
+    const [active, setActive] = (0, import_react11.useState)([]);
     const setOpenAccordion = (id) => {
       if (active.includes(id)) {
         setActive(active.filter((_id) => _id !== id));
@@ -538,31 +550,31 @@ var Accordion = (0, import_react10.forwardRef)(
         setActive([...active, id]);
       }
     };
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       ref,
       ...rest
-    }, /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
+    }, /* @__PURE__ */ import_react11.default.createElement(AccordionContext.Provider, {
       value: { active, setActive: setOpenAccordion, iconName }
     }, children));
   }
 );
-Accordion.defaultProps = {
-  iconName: "arrow",
-  css: {
-    "@desktop": {
-      display: "flex",
-      flexDirection: "column",
-      gap: 4
-    }
+var css9 = {
+  "@desktop": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
   }
 };
+Accordion.defaultProps = {
+  iconName: "arrow"
+};
 var accordion_default = Accordion;
 
 // src/elements/accordion/AccordionWrapper.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/elements/accordion/Icon.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var ICONS = {
   caret: {
     animationType: "rotate90",
@@ -619,72 +631,72 @@ var rotateAnimation = {
 };
 function Icon(props) {
   let { name, active = false, style, ...rest } = props;
-  let { stitchesInstance } = (0, import_react11.useContext)(WeaverseContext);
-  const { animationType, css } = ICONS[name];
+  let { stitchesInstance } = (0, import_react12.useContext)(WeaverseContext);
+  const { animationType, css: css16 } = ICONS[name];
   if (active && animationType === "rotate90") {
     style = { ...rotateAnimation, ...style };
   }
-  let { className } = stitchesInstance.css(css)();
+  let { className } = stitchesInstance.css(css16)();
   if (active)
     className += " active";
-  return /* @__PURE__ */ import_react11.default.createElement("span", {
+  return /* @__PURE__ */ import_react12.default.createElement("span", {
     style,
     ...rest
-  }, /* @__PURE__ */ import_react11.default.createElement("i", {
+  }, /* @__PURE__ */ import_react12.default.createElement("i", {
     className
   }));
 }
 var Icon_default = Icon;
 
 // src/elements/accordion/AccordionWrapper.tsx
-var AccordionWrapper = (0, import_react12.forwardRef)((props, ref) => {
+var AccordionWrapper = (0, import_react13.forwardRef)((props, ref) => {
   const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
-  const { iconName, active, setActive } = (0, import_react12.useContext)(AccordionContext);
+  const { iconName, active, setActive } = (0, import_react13.useContext)(AccordionContext);
   const isActive = active.includes(wvId);
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react12.default.createElement("div", {
+  }, /* @__PURE__ */ import_react13.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-acc-header ${isActive ? "active" : ""}`
-  }, /* @__PURE__ */ import_react12.default.createElement("span", null, name), /* @__PURE__ */ import_react12.default.createElement(Icon_default, {
+  }, /* @__PURE__ */ import_react13.default.createElement("span", null, name), /* @__PURE__ */ import_react13.default.createElement(Icon_default, {
     className: "wv-acc-icon",
     active: isActive,
     name: iconName
   })), children);
 });
-AccordionWrapper.defaultProps = {
-  name: "Accordion item",
-  css: {
-    "@desktop": {
-      maxHeight: "100%",
-      ".wv-acc-icon": {
-        position: "absolute",
-        right: 16,
-        width: 16,
-        height: 16,
-        transition: "all 0.3s ease-in-out 0s"
-      },
-      ".wv-acc-header": {
-        display: "flex",
-        alignItems: "center",
-        borderRadius: 4,
-        padding: 12,
-        marginBottom: 4,
-        border: "1px solid #76A9FA",
-        cursor: "pointer",
-        '&.active + [data-wv-type="accordion.content"]': {
-          maxHeight: "var(--max-height, inherit)"
-        }
+var css10 = {
+  "@desktop": {
+    maxHeight: "100%",
+    ".wv-acc-icon": {
+      position: "absolute",
+      right: 16,
+      width: 16,
+      height: 16,
+      transition: "all 0.3s ease-in-out 0s"
+    },
+    ".wv-acc-header": {
+      display: "flex",
+      alignItems: "center",
+      borderRadius: 4,
+      padding: 12,
+      marginBottom: 4,
+      border: "1px solid #76A9FA",
+      cursor: "pointer",
+      '&.active + [data-wv-type="accordion.content"]': {
+        maxHeight: "var(--max-height, inherit)"
       }
     }
   }
 };
+AccordionWrapper.defaultProps = {
+  name: "Accordion item"
+};
 var AccordionWrapper_default = AccordionWrapper;
 
 // src/elements/accordion/AccordionContent.tsx
-var import_react13 = __toESM(require("react"));
-var AccordionContent = (0, import_react13.forwardRef)(
+var import_react14 = __toESM(require("react"));
+var AccordionContent = (0, import_react14.forwardRef)(
   (props, ref) => {
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -695,132 +707,132 @@ var AccordionContent = (0, import_react13.forwardRef)(
       "--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_react13.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, import_react13.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
+    }, import_react14.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react14.default.createElement(Placeholder_default, {
       element: "Accordion Content"
     }, "Drag and drop an element here."));
   }
 );
+var css11 = {
+  "@desktop": {
+    width: "100%",
+    maxWidth: "var(--grid-size)",
+    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
+  }
+};
 AccordionContent.defaultProps = {
   rows: 3,
   columns: 12,
   gap: 4,
-  rowSize: 48,
-  css: {
-    "@desktop": {
-      width: "100%",
-      maxWidth: "var(--grid-size)",
-      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
-    }
-  }
+  rowSize: 48
 };
 var AccordionContent_default = AccordionContent;
 
 // src/elements/tab/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/elements/tab/TabHeaderWrapper.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 function TabHeader(props) {
   const { wvId } = props;
-  const { active, setActive } = (0, import_react14.useContext)(TabContext);
-  const { itemInstances } = (0, import_react14.useContext)(WeaverseContext);
+  const { active, setActive } = (0, import_react15.useContext)(TabContext);
+  const { itemInstances } = (0, import_react15.useContext)(WeaverseContext);
   const instance = itemInstances.get(wvId);
-  let [data, setData] = (0, import_react14.useState)(instance.data);
-  (0, import_react14.useEffect)(() => {
+  let [data, setData] = (0, import_react15.useState)(instance.data);
+  (0, import_react15.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-tab-header${active === wvId ? " active" : ""}`
   }, data.name);
 }
 function TabHeaderWrapper(props) {
-  const { itemInstances } = (0, import_react14.useContext)(WeaverseContext);
+  const { itemInstances } = (0, import_react15.useContext)(WeaverseContext);
   const instance = itemInstances.get(props.wvId);
   const data = instance.data;
   const childIds = data.childIds;
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     className: "wv-tab-header-wrapper"
-  }, childIds.map((id) => /* @__PURE__ */ import_react14.default.createElement(TabHeader, {
+  }, childIds.map((id) => /* @__PURE__ */ import_react15.default.createElement(TabHeader, {
     key: id,
     wvId: id
   })));
 }
 
 // src/elements/tab/index.tsx
-var TabContext = (0, import_react15.createContext)({
+var TabContext = (0, import_react16.createContext)({
   active: null,
   setActive: () => {
   }
 });
-var Tab = (0, import_react15.forwardRef)((props, ref) => {
+var Tab = (0, import_react16.forwardRef)((props, ref) => {
   var _a, _b, _c;
   const wvId = props["data-wv-id"];
   const { fullWidthTabHeader, children, ...rest } = props;
-  const defaultActive = (_c = (_b = (_a = import_react15.default.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
-  const [active, setActive] = (0, import_react15.useState)(defaultActive);
+  const defaultActive = (_c = (_b = (_a = import_react16.default.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
+  const [active, setActive] = (0, import_react16.useState)(defaultActive);
   const setOpenTab = (id) => {
     if (id !== active) {
       setActive(id);
     }
   };
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
+  return /* @__PURE__ */ import_react16.default.createElement("div", {
     ref,
     ...rest,
     style: {
       "--tab-width": fullWidthTabHeader ? "100%" : "auto"
     }
-  }, /* @__PURE__ */ import_react15.default.createElement(TabContext.Provider, {
+  }, /* @__PURE__ */ import_react16.default.createElement(TabContext.Provider, {
     value: { active, setActive: setOpenTab }
-  }, /* @__PURE__ */ import_react15.default.createElement(TabHeaderWrapper, {
+  }, /* @__PURE__ */ import_react16.default.createElement(TabHeaderWrapper, {
     wvId
   }), children));
 });
-Tab.defaultProps = {
-  fullWidthTabHeader: false,
-  css: {
-    "@desktop": {
+var css12 = {
+  "@desktop": {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    "& .wv-tab-header-wrapper": {
+      width: "100%",
       display: "flex",
-      flexDirection: "column",
-      gap: 4,
-      "& .wv-tab-header-wrapper": {
-        width: "100%",
-        display: "flex",
-        marginBottom: 10
-      },
-      "& .wv-tab-header": {
-        backgroundColor: "#fff",
-        padding: "15px 24px",
-        border: "1px solid #E4E7EB",
-        cursor: "pointer",
-        textAlign: "center",
-        width: "var(--tab-width, auto)",
-        "&.active": {
-          backgroundColor: "#E4E7EB"
-        }
+      marginBottom: 10
+    },
+    "& .wv-tab-header": {
+      backgroundColor: "#fff",
+      padding: "15px 24px",
+      border: "1px solid #E4E7EB",
+      cursor: "pointer",
+      textAlign: "center",
+      width: "var(--tab-width, auto)",
+      "&.active": {
+        backgroundColor: "#E4E7EB"
       }
     }
   }
 };
+Tab.defaultProps = {
+  fullWidthTabHeader: false
+};
 var tab_default = Tab;
 
 // src/elements/tab/TabContent.tsx
-var import_react16 = __toESM(require("react"));
-var TabContent = (0, import_react16.forwardRef)(
+var import_react17 = __toESM(require("react"));
+var TabContent = (0, import_react17.forwardRef)(
   (props, ref) => {
-    const { active } = (0, import_react16.useContext)(TabContext);
+    const { active } = (0, import_react17.useContext)(TabContext);
     const wvId = props["data-wv-id"];
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -832,58 +844,58 @@ var TabContent = (0, import_react16.forwardRef)(
       "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
       "--content-active": active === wvId ? "grid" : "none"
     };
-    return /* @__PURE__ */ import_react16.default.createElement("div", {
+    return /* @__PURE__ */ import_react17.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, import_react16.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react16.default.createElement(Placeholder_default, {
+    }, import_react17.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react17.default.createElement(Placeholder_default, {
       element: "Tab Content"
     }, "Drag and drop an element here."));
   }
 );
+var css13 = {
+  "@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
+  }
+};
 TabContent.defaultProps = {
   rows: 3,
   columns: 12,
   gap: 4,
   rowSize: 48,
-  name: "Tab header",
-  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
-    }
-  }
+  name: "Tab header"
 };
 var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_carousel = require("nuka-carousel/lib/carousel");
-var Slider = (0, import_react17.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react17.useContext)(WeaverseContext);
+var Slider = (0, import_react18.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react18.useContext)(WeaverseContext);
   const { autoplay, delay, children, ...rest } = props;
-  return /* @__PURE__ */ import_react17.default.createElement("div", {
+  return /* @__PURE__ */ import_react18.default.createElement("div", {
     ...rest,
     ref
-  }, /* @__PURE__ */ import_react17.default.createElement(import_carousel.Carousel, {
+  }, /* @__PURE__ */ import_react18.default.createElement(import_carousel.Carousel, {
     dragging: false,
-    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react17.default.createElement("button", {
+    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react18.default.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.previousSlide,
       disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
-    }, /* @__PURE__ */ import_react17.default.createElement("i", {
+    }, /* @__PURE__ */ import_react18.default.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-left"
     })),
-    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react17.default.createElement("button", {
+    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react18.default.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.nextSlide,
       disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
-    }, /* @__PURE__ */ import_react17.default.createElement("i", {
+    }, /* @__PURE__ */ import_react18.default.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-right"
     })),
     wrapAround: !isDesignMode,
@@ -891,50 +903,50 @@ var Slider = (0, import_react17.forwardRef)((props, ref) => {
     autoplayInterval: delay * 1e3
   }, children));
 });
-Slider.defaultProps = {
-  fullWidth: true,
-  autoplay: true,
-  delay: 3,
-  css: {
-    "@desktop": {
-      "& .wv-slider-btn": {
-        borderRadius: "100%",
-        width: 40,
-        height: 40,
-        background: "#fff",
-        border: "none",
-        cursor: "pointer",
-        "&[disabled]": {
-          cursor: "not-allowed"
-        },
-        "&:hover .wv-slider-arrow": {
-          borderColor: "#999"
-        },
-        "& .wv-slider-arrow": {
-          border: "solid black",
-          borderWidth: "0 1px 1px 0",
-          display: "inline-block",
-          padding: 5
-        },
-        "& .wv-slider-arrow-right": {
-          transform: "rotate(-45deg)",
-          marginRight: 5
-        },
-        "& .wv-slider-arrow-left": {
-          transform: "rotate(135deg)",
-          marginLeft: 5
-        }
+var css14 = {
+  "@desktop": {
+    "& .wv-slider-btn": {
+      borderRadius: "100%",
+      width: 40,
+      height: 40,
+      background: "#fff",
+      border: "none",
+      cursor: "pointer",
+      "&[disabled]": {
+        cursor: "not-allowed"
+      },
+      "&:hover .wv-slider-arrow": {
+        borderColor: "#999"
+      },
+      "& .wv-slider-arrow": {
+        border: "solid black",
+        borderWidth: "0 1px 1px 0",
+        display: "inline-block",
+        padding: 5
+      },
+      "& .wv-slider-arrow-right": {
+        transform: "rotate(-45deg)",
+        marginRight: 5
+      },
+      "& .wv-slider-arrow-left": {
+        transform: "rotate(135deg)",
+        marginLeft: 5
       }
     }
   }
 };
+Slider.defaultProps = {
+  fullWidth: true,
+  autoplay: true,
+  delay: 3
+};
 var slider_default = Slider;
 
 // src/elements/slider/SliderContent.tsx
-var import_react18 = __toESM(require("react"));
-var SliderContent = (0, import_react18.forwardRef)(
+var import_react19 = __toESM(require("react"));
+var SliderContent = (0, import_react19.forwardRef)(
   (props, ref) => {
-    const { isDesignMode } = (0, import_react18.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react19.useContext)(WeaverseContext);
     const {
       mediaUrl,
       targetLink,
@@ -960,15 +972,27 @@ var SliderContent = (0, import_react18.forwardRef)(
         window.open(targetLink, openInNewTab ? "_blank" : "_self");
       }
     };
-    return /* @__PURE__ */ import_react18.default.createElement("div", {
+    return /* @__PURE__ */ import_react19.default.createElement("div", {
       ...rest,
       style,
       onClick: handleClick
-    }, import_react18.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react18.default.createElement(Placeholder_default, {
+    }, import_react19.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react19.default.createElement(Placeholder_default, {
       element: "Slider Content"
     }, "Drag and drop an element here."));
   }
 );
+var css15 = {
+  "@desktop": {
+    width: "100%",
+    maxWidth: "var(--grid-size)",
+    display: "grid",
+    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+    gap: "var(--gap)",
+    borderRadius: 4,
+    backgroundImage: "var(--background-url, none)"
+  }
+};
 SliderContent.defaultProps = {
   name: "Slider",
   mediaUrl: "",
@@ -977,64 +1001,19 @@ SliderContent.defaultProps = {
   rows: 4,
   columns: 12,
   gap: 4,
-  rowSize: 48,
-  css: {
-    "@desktop": {
-      width: "100%",
-      maxWidth: "var(--grid-size)",
-      display: "grid",
-      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-      gap: "var(--gap)",
-      borderRadius: 4,
-      backgroundImage: "var(--background-url, none)"
-    }
-  }
+  rowSize: 48
 };
 var SliderContent_default = SliderContent;
 
-// src/elements/custom-html.tsx
-var import_react19 = __toESM(require("react"));
-var CustomHTML = (0, import_react19.forwardRef)(
-  (props, ref) => {
-    const { content, children, ...rest } = props;
-    const { isDesignMode } = (0, import_react19.useContext)(WeaverseContext);
-    const style = {
-      "--pointer-events": isDesignMode ? "none" : "auto"
-    };
-    if (!content)
-      return /* @__PURE__ */ import_react19.default.createElement("div", {
-        ref,
-        ...rest
-      }, /* @__PURE__ */ import_react19.default.createElement(Placeholder_default, {
-        element: "Custom HTML"
-      }, "Add your custom HTML code."));
-    return /* @__PURE__ */ import_react19.default.createElement("div", {
-      ref,
-      ...rest,
-      style,
-      dangerouslySetInnerHTML: { __html: content }
-    });
-  }
-);
-CustomHTML.defaultProps = {
-  content: "",
-  type: "custom.html",
-  css: {
-    "@desktop": {
-      "& > *": {
-        pointerEvents: "var(--pointer-events, unset)"
-      }
-    }
-  }
-};
-var custom_html_default = CustomHTML;
-
 // src/elements/index.ts
+var SharedComponents = {
+  Placeholder: Placeholder_default
+};
 var Elements = {
   Countdown: {
     Component: countdown_default,
-    type: "countdown"
+    type: "countdown",
+    defaultCss: css2
   },
   Button: {
     Component: button_default,
@@ -1042,100 +1021,110 @@ var Elements = {
   },
   Container: {
     Component: container_default,
-    type: "container"
+    type: "container",
+    defaultCss: css
   },
   Image: {
     Component: image_default,
-    type: "image"
+    type: "image",
+    defaultCss: css3
   },
   Instagram: {
     Component: instagram_default,
-    type: "instagram"
+    type: "instagram",
+    defaultCss: css8
   },
   Layout: {
     Component: layout_default,
-    type: "layout"
+    type: "layout",
+    defaultCss: css4
   },
   Map: {
     Component: map_default,
-    type: "map"
+    type: "map",
+    defaultCss: css5
   },
   Text: {
     Component: text_default,
-    type: "text"
+    type: "text",
+    defaultCss: css6
   },
   Video: {
     Component: video_default,
-    type: "video"
+    type: "video",
+    defaultCss: css7
   },
   Accordion: {
     Component: accordion_default,
-    type: "accordion"
+    type: "accordion",
+    defaultCss: css9
   },
   AccordionWrapper: {
     Component: AccordionWrapper_default,
-    type: "accordion.wrapper"
+    type: "accordion.wrapper",
+    defaultCss: css10
   },
   AccordionContent: {
     Component: AccordionContent_default,
-    type: "accordion.content"
+    type: "accordion.content",
+    defaultCss: css11
   },
   Tab: {
     Component: tab_default,
-    type: "tab"
+    type: "tab",
+    defaultCss: css12
   },
   TabContent: {
     Component: TabContent_default,
-    type: "tab.content"
+    type: "tab.content",
+    defaultCss: css13
   },
   Slider: {
     Component: slider_default,
-    type: "slider"
+    type: "slider",
+    defaultCss: css14
   },
   SliderContent: {
     Component: SliderContent_default,
-    type: "slider.content"
-  },
-  CustomHTML: {
-    Component: custom_html_default,
-    type: "custom.html"
+    type: "slider.content",
+    defaultCss: css15
   }
 };
 
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new import_core.Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = (0, import_react20.createContext)({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react21 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/utils/index.ts
-function shortCssObject(css) {
+function shortCssObject(css16) {
   return {
-    "@desktop": css["@desktop"],
-    "@mobile": css["@mobile"]
+    "@desktop": css16["@desktop"],
+    "@mobile": css16["@mobile"]
   };
 }
+var permanentClasses = {};
 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) || {};
+  var _a, _b;
+  let { css: css16, type, className: cls = "" } = instance.data;
   let className = "";
-  if (css || defaultCss) {
-    let formattedCss = shortCssObject(css || defaultCss);
+  let permanentClass = "";
+  let perCss = (_a = instance.Element) == null ? void 0 : _a.permanentCss;
+  if (perCss) {
+    if (type in permanentClasses) {
+      permanentClass = permanentClasses[type];
+    } else {
+      let { className: perCls } = stitchesInstance.css(perCss)();
+      Object.assign(permanentClasses, { [type]: perCls });
+      permanentClass = perCls;
+    }
+  }
+  className = permanentClass;
+  if (css16) {
+    let formattedCss = shortCssObject(css16);
     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();
+    let otherClass = (((_b = instance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
     instance.stitchesClass = newClass;
   }
   return className;
@@ -1144,10 +1133,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react21.useState)(context.projectData);
-  let rootRef = (0, import_react21.useRef)();
+  let [, setData] = (0, import_react20.useState)(context.projectData);
+  let rootRef = (0, import_react20.useRef)();
   let update = () => setData({});
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1156,22 +1145,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_react21.default.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react20.default.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ import_react21.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react20.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react21.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react21.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react21.useState)(instance.data);
-  let { id, type, childIds = [], css, className, ...rest } = data;
-  (0, import_react21.useEffect)(() => {
-    var _a;
+  let { stitchesInstance, elementInstances } = (0, import_react20.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react20.useState)(instance.data);
+  let { id, type, childIds = [], css: css16, className, ...rest } = data;
+  (0, import_react20.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -1179,10 +1167,7 @@ var ItemComponent = ({ instance }) => {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
-    (_a = instance.ref.current) == null ? void 0 : _a.removeAttribute("css");
-    return () => {
-      instance.unsubscribe(update);
-    };
+    return () => instance.unsubscribe(update);
   }, []);
   let Element = elementInstances.get(type);
   if (Element == null ? void 0 : Element.Component) {
@@ -1190,13 +1175,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react21.default.createElement(Component, {
+    return /* @__PURE__ */ import_react20.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react21.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1204,15 +1189,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react21.useContext)(WeaverseContext);
+  let context = (0, import_react20.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react21.default.createElement("div", {
+    return /* @__PURE__ */ import_react20.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react21.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react20.default.createElement(ItemComponent, {
     instance
   });
 };
@@ -1221,6 +1206,8 @@ var ItemInstance = ({ id }) => {
 __reExport(src_exports, require("@weaverse/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Elements,
+  SharedComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,