@weaverse/react 0.7.7 → 0.7.10

package/dist/index.d.ts

@@ -1,8 +1,13 @@
 import * as react from 'react';
 import { ReactElement, ReactNode, CSSProperties } from 'react';
-import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
+import { ElementsMap, WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
+declare const SharedComponents: {
+    Placeholder: react.ForwardRefExoticComponent<PlaceholderProps & react.RefAttributes<HTMLDivElement>>;
+};
+declare const Elements: ElementsMap;
+
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
 declare let WeaverseContext: react.Context<Weaverse>;
 declare let WeaverseContextProvider: react.Provider<Weaverse>;
@@ -26,10 +31,11 @@ interface PlaceholderProps {
     style?: CSSProperties;
 }
 interface ButtonElementProps extends WeaverseElementProps {
-    value: string;
-    openInNewTab: boolean;
-    target: string;
     type: 'button' | 'submit' | 'reset';
+    text: string;
+    clickAction: 'none' | 'openLink';
+    linkTo: string;
+    openInNewTab: boolean;
 }
 interface ContainerElementProps extends WeaverseElementProps {
     [key: string]: any;
@@ -101,4 +107,4 @@ declare type InstagramMedia = {
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
-export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, SharedComponents, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

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,33 +37,30 @@ __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) => {
-  let { openInNewTab, target, value, ...rest } = props;
-  if (target) {
+  let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
+  if (clickAction && linkTo) {
     return /* @__PURE__ */ React.createElement("a", {
-      href: target,
+      href: linkTo,
       target: openInNewTab ? "_blank" : "_self",
       rel: "noreferrer",
       ...rest,
       ref
-    }, value);
+    }, text);
   }
   return /* @__PURE__ */ React.createElement("button", {
     ref,
     ...rest
-  }, value);
+  }, text);
 });
 Button.defaultProps = {
-  value: "Shop now",
-  openInNewTab: false,
-  target: "",
   type: "button",
+  text: "Shop now",
+  clickAction: "none",
+  linkTo: "",
+  openInNewTab: false,
   css: {
     "@desktop": {
       borderRadius: "72px",
@@ -105,14 +104,28 @@ 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));
 }
@@ -135,9 +148,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,
@@ -149,11 +162,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(),
@@ -169,16 +182,16 @@ 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"}`
       }, ":"));
     }));
@@ -220,10 +233,10 @@ Countdown.defaultProps = {
 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,
@@ -245,12 +258,12 @@ 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
     }));
@@ -277,8 +290,8 @@ Image.defaultProps = {
 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",
@@ -288,11 +301,11 @@ 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));
 });
@@ -329,13 +342,13 @@ Layout.defaultProps = {
 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%",
@@ -367,10 +380,7 @@ Text.defaultProps = {
   value: "The quick brown fox jumps over the lazy dog",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "fit-content",
-      padding: "20px",
-      outline: "none",
+      padding: "10px",
       wordBreak: "break-word",
       overflowWrap: "break-word",
       whiteSpace: "break-spaces"
@@ -380,21 +390,21 @@ Text.defaultProps = {
 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."));
@@ -420,33 +430,33 @@ Video.defaultProps = {
 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,
@@ -463,31 +473,31 @@ 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 your Instagram account to display photos on your site." : "Invalid or expired token!"));
+      }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
     let style = {
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_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
       }));
@@ -522,17 +532,17 @@ Instagram.defaultProps = {
 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));
@@ -540,10 +550,10 @@ 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));
   }
@@ -561,10 +571,10 @@ Accordion.defaultProps = {
 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",
@@ -621,7 +631,7 @@ var rotateAnimation = {
 };
 function Icon(props) {
   let { name, active = false, style, ...rest } = props;
-  let { stitchesInstance } = (0, import_react11.useContext)(WeaverseContext);
+  let { stitchesInstance } = (0, import_react12.useContext)(WeaverseContext);
   const { animationType, css } = ICONS[name];
   if (active && animationType === "rotate90") {
     style = { ...rotateAnimation, ...style };
@@ -629,27 +639,27 @@ function Icon(props) {
   let { className } = stitchesInstance.css(css)();
   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
@@ -685,8 +695,8 @@ AccordionWrapper.defaultProps = {
 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 = {
@@ -697,13 +707,13 @@ 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"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 AccordionContent.defaultProps = {
@@ -729,64 +739,64 @@ AccordionContent.defaultProps = {
 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));
 });
@@ -819,10 +829,10 @@ Tab.defaultProps = {
 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 = {
@@ -834,13 +844,13 @@ 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"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 TabContent.defaultProps = {
@@ -864,29 +874,28 @@ TabContent.defaultProps = {
 var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
-var import_react17 = __toESM(require("react"));
-var import_nuka_carousel = __toESM(require("nuka-carousel"));
-var Carousel = import_nuka_carousel.default.default;
-var Slider = (0, import_react17.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react17.useContext)(WeaverseContext);
+var import_react18 = __toESM(require("react"));
+var import_carousel = require("nuka-carousel/lib/carousel");
+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(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,
@@ -934,10 +943,10 @@ Slider.defaultProps = {
 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,
@@ -963,13 +972,13 @@ 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"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 SliderContent.defaultProps = {
@@ -996,44 +1005,10 @@ SliderContent.defaultProps = {
 };
 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"
-      }, "Please add your custom HTML codes."));
-    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,
@@ -1098,28 +1073,12 @@ var Elements = {
   SliderContent: {
     Component: SliderContent_default,
     type: "slider.content"
-  },
-  CustomHTML: {
-    Component: custom_html_default,
-    type: "custom.html"
   }
 };
 
-// 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) {
@@ -1129,15 +1088,14 @@ function shortCssObject(css) {
   };
 }
 function generateItemClass(instance, stitchesInstance) {
-  var _a, _b, _c, _d;
+  var _a;
   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);
+  if (css) {
+    let formattedCss = shortCssObject(css);
     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();
+    let otherClass = (((_a = instance.ref.current) == null ? void 0 : _a.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
     className = `${cls} ${newClass} ${otherClass}`.trim();
     instance.stitchesClass = newClass;
   }
@@ -1147,10 +1105,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 () => {
@@ -1159,22 +1117,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 { stitchesInstance, elementInstances } = (0, import_react20.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react20.useState)(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
-  (0, import_react21.useEffect)(() => {
-    var _a;
+  (0, import_react20.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -1182,10 +1139,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) {
@@ -1193,13 +1147,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
     })));
@@ -1207,15 +1161,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
   });
 };
@@ -1224,6 +1178,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,

package/dist/index.mjs

@@ -1,30 +1,27 @@
-// src/context.ts
-import { Weaverse } from "@weaverse/core";
-import { createContext as createContext3 } from "react";
-
 // src/elements/button.tsx
 import * as React from "react";
 var Button = React.forwardRef((props, ref) => {
-  let { openInNewTab, target, value, ...rest } = props;
-  if (target) {
+  let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
+  if (clickAction && linkTo) {
     return /* @__PURE__ */ React.createElement("a", {
-      href: target,
+      href: linkTo,
       target: openInNewTab ? "_blank" : "_self",
       rel: "noreferrer",
       ...rest,
       ref
-    }, value);
+    }, text);
   }
   return /* @__PURE__ */ React.createElement("button", {
     ref,
     ...rest
-  }, value);
+  }, text);
 });
 Button.defaultProps = {
-  value: "Shop now",
-  openInNewTab: false,
-  target: "",
   type: "button",
+  text: "Shop now",
+  clickAction: "none",
+  linkTo: "",
+  openInNewTab: false,
   css: {
     "@desktop": {
       borderRadius: "72px",
@@ -70,6 +67,20 @@ var container_default = Container;
 // src/elements/countdown/index.tsx
 import React4, { forwardRef as forwardRef3, useContext, useEffect } from "react";
 
+// src/context.ts
+import { Weaverse } from "@weaverse/core";
+import { createContext } from "react";
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
 // src/elements/countdown/timer-block.tsx
 import React3 from "react";
 function TimerBlock({ value, label }) {
@@ -330,10 +341,7 @@ Text.defaultProps = {
   value: "The quick brown fox jumps over the lazy dog",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "fit-content",
-      padding: "20px",
-      outline: "none",
+      padding: "10px",
       wordBreak: "break-word",
       overflowWrap: "break-word",
       whiteSpace: "break-spaces"
@@ -431,7 +439,7 @@ var Instagram = forwardRef9(
         ...rest
       }, /* @__PURE__ */ React11.createElement(Placeholder_default, {
         element: "Instagram"
-      }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
+      }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
     let style = {
       "--wv-ig-images-per-row": imagesPerRow,
@@ -485,8 +493,8 @@ Instagram.defaultProps = {
 var instagram_default = Instagram;
 
 // src/elements/accordion/index.tsx
-import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
-var AccordionContext = createContext({
+import React12, { createContext as createContext2, forwardRef as forwardRef10, useState as useState2 } from "react";
+var AccordionContext = createContext2({
   iconName: "arrow",
   active: [],
   setActive: () => {
@@ -666,7 +674,7 @@ var AccordionContent = forwardRef12(
       style
     }, React15.Children.count(children) > 0 ? children : /* @__PURE__ */ React15.createElement(Placeholder_default, {
       element: "Accordion Content"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 AccordionContent.defaultProps = {
@@ -692,7 +700,7 @@ AccordionContent.defaultProps = {
 var AccordionContent_default = AccordionContent;
 
 // src/elements/tab/index.tsx
-import React17, { createContext as createContext2, forwardRef as forwardRef13, useState as useState4 } from "react";
+import React17, { createContext as createContext3, forwardRef as forwardRef13, useState as useState4 } from "react";
 
 // src/elements/tab/TabHeaderWrapper.tsx
 import React16, { useContext as useContext6, useEffect as useEffect3, useState as useState3 } from "react";
@@ -725,7 +733,7 @@ function TabHeaderWrapper(props) {
 }
 
 // src/elements/tab/index.tsx
-var TabContext = createContext2({
+var TabContext = createContext3({
   active: null,
   setActive: () => {
   }
@@ -803,7 +811,7 @@ var TabContent = forwardRef14(
       style
     }, React18.Children.count(children) > 0 ? children : /* @__PURE__ */ React18.createElement(Placeholder_default, {
       element: "Tab Content"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 TabContent.defaultProps = {
@@ -828,8 +836,7 @@ var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
 import React19, { forwardRef as forwardRef15, useContext as useContext8 } from "react";
-import C from "nuka-carousel";
-var Carousel = C.default;
+import { Carousel } from "nuka-carousel/lib/carousel";
 var Slider = forwardRef15((props, ref) => {
   const { isDesignMode } = useContext8(WeaverseContext);
   const { autoplay, delay, children, ...rest } = props;
@@ -932,7 +939,7 @@ var SliderContent = forwardRef16(
       onClick: handleClick
     }, React20.Children.count(children) > 0 ? children : /* @__PURE__ */ React20.createElement(Placeholder_default, {
       element: "Slider Content"
-    }, "Please drag and drop an element here"));
+    }, "Drag and drop an element here."));
   }
 );
 SliderContent.defaultProps = {
@@ -959,44 +966,10 @@ SliderContent.defaultProps = {
 };
 var SliderContent_default = SliderContent;
 
-// src/elements/custom-html.tsx
-import React21, { forwardRef as forwardRef17, useContext as useContext10 } from "react";
-var CustomHTML = forwardRef17(
-  (props, ref) => {
-    const { content, children, ...rest } = props;
-    const { isDesignMode } = useContext10(WeaverseContext);
-    const style = {
-      "--pointer-events": isDesignMode ? "none" : "auto"
-    };
-    if (!content)
-      return /* @__PURE__ */ React21.createElement("div", {
-        ref,
-        ...rest
-      }, /* @__PURE__ */ React21.createElement(Placeholder_default, {
-        element: "Custom HTML"
-      }, "Please add your custom HTML codes."));
-    return /* @__PURE__ */ React21.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,
@@ -1061,28 +1034,12 @@ var Elements = {
   SliderContent: {
     Component: SliderContent_default,
     type: "slider.content"
-  },
-  CustomHTML: {
-    Component: custom_html_default,
-    type: "custom.html"
   }
 };
 
-// src/context.ts
-var createRootContext = (configs) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext3({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
-
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React22, { useContext as useContext11, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import React21, { useContext as useContext10, useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/utils/index.ts
 function shortCssObject(css) {
@@ -1092,15 +1049,14 @@ function shortCssObject(css) {
   };
 }
 function generateItemClass(instance, stitchesInstance) {
-  var _a, _b, _c, _d;
+  var _a;
   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);
+  if (css) {
+    let formattedCss = shortCssObject(css);
     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();
+    let otherClass = (((_a = instance.ref.current) == null ? void 0 : _a.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
     className = `${cls} ${newClass} ${otherClass}`.trim();
     instance.stitchesClass = newClass;
   }
@@ -1122,22 +1078,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__ */ React22.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React21.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ React22.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ React21.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React22.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React21.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext11(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext10(WeaverseContext);
   let [data, setData] = useState5(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
   useEffect4(() => {
-    var _a;
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
     if (isBrowser && !instance.ref.current) {
@@ -1145,10 +1100,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) {
@@ -1156,13 +1108,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React22.createElement(Component, {
+    return /* @__PURE__ */ React21.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React22.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React21.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1170,15 +1122,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext11(WeaverseContext);
+  let context = useContext10(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React22.createElement("div", {
+    return /* @__PURE__ */ React21.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React22.createElement(ItemComponent, {
+  return /* @__PURE__ */ React21.createElement(ItemComponent, {
     instance
   });
 };
@@ -1186,6 +1138,8 @@ var ItemInstance = ({ id }) => {
 // src/index.ts
 export * from "@weaverse/core";
 export {
+  Elements,
+  SharedComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.7",
+  "version": "0.7.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.7.7",
-    "nuka-carousel": "^5.2.0"
+    "@weaverse/core": "0.7.10",
+    "nuka-carousel": "^5.3.0"
   }
 }