@weaverse/react 0.7.6 → 0.7.7

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -426,27 +426,10 @@ var import_react9 = __toESM(require("react"));
 var import_react8 = __toESM(require("react"));
 var Placeholder = (0, import_react8.forwardRef)(
   (props, ref) => {
-    let { element, children, style: newStyle, ...rest } = props;
-    let defaultStyle = {
-      position: "absolute",
-      height: "calc(100% - 20px)",
-      width: "calc(100% - 20px)",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "none",
-      zIndex: 1,
-      color: "#374151",
-      backgroundColor: "#F9FAFB",
-      border: "1px dashed #0F71FF",
-      borderRadius: 4,
-      margin: 10
-    };
-    const style = { ...defaultStyle, ...newStyle };
+    let { element, children, ...rest } = props;
     return /* @__PURE__ */ import_react8.default.createElement("div", {
       "data-wv-type": "placeholder",
-      style,
+      style: { display: "none" },
       ref,
       ...rest
     }, /* @__PURE__ */ import_react8.default.createElement("div", {
@@ -541,78 +524,169 @@ var instagram_default = Instagram;
 // src/elements/accordion/index.tsx
 var import_react10 = __toESM(require("react"));
 var AccordionContext = (0, import_react10.createContext)({
-  active: null,
+  iconName: "arrow",
+  active: [],
   setActive: () => {
   }
 });
 var Accordion = (0, import_react10.forwardRef)(
   (props, ref) => {
-    const { items, children, ...rest } = props;
-    const [active, setActive] = (0, import_react10.useState)(null);
+    const { iconName, children, ...rest } = props;
+    const [active, setActive] = (0, import_react10.useState)([]);
     const setOpenAccordion = (id) => {
-      if (id === active) {
-        setActive(null);
+      if (active.includes(id)) {
+        setActive(active.filter((_id) => _id !== id));
       } else {
-        setActive(id);
+        setActive([...active, id]);
       }
     };
     return /* @__PURE__ */ import_react10.default.createElement("div", {
       ref,
       ...rest
     }, /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
-      value: { active, setActive: setOpenAccordion }
+      value: { active, setActive: setOpenAccordion, iconName }
     }, children));
   }
 );
 Accordion.defaultProps = {
+  iconName: "arrow",
   css: {
     "@desktop": {
       display: "flex",
       flexDirection: "column",
-      gap: 4,
-      ".wv-accordion-header": {
-        borderRadius: 4,
-        padding: 12,
-        marginBottom: 4,
-        border: "1px solid #76A9FA",
-        "&.active": {
-          color: "blue"
-        },
-        '&.active + [data-wv-type="accordion.content"]': {
-          maxHeight: "var(--max-height, inherit)"
-        }
-      }
+      gap: 4
     }
   }
 };
 var accordion_default = Accordion;
 
 // src/elements/accordion/AccordionWrapper.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/elements/accordion/Icon.tsx
 var import_react11 = __toESM(require("react"));
-var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
+var ICONS = {
+  caret: {
+    animationType: "rotate90",
+    css: {
+      position: "absolute!important",
+      left: 5,
+      top: 2,
+      width: 0,
+      height: 0,
+      borderTop: "6px solid transparent",
+      borderBottom: "6px solid transparent",
+      borderLeft: "6px solid #1F2A37"
+    }
+  },
+  arrow: {
+    animationType: "rotate90",
+    css: {
+      border: "solid #1F2A37",
+      borderWidth: "0 1px 1px 0",
+      display: "inline-block",
+      transform: "rotate(-45deg) translate(15%, -15%)",
+      padding: 4
+    }
+  },
+  plus: {
+    animationType: "custom",
+    css: {
+      display: "inline-block",
+      top: -6,
+      width: 15,
+      height: 1,
+      backgroundColor: "#1F2A37",
+      "&:after": {
+        position: "absolute",
+        content: "",
+        top: -7,
+        left: 7,
+        width: 1,
+        height: 15,
+        backgroundColor: "#1F2A37",
+        transition: "all 0.3s ease-in-out 0s"
+      },
+      "&.active": {
+        "&:after": {
+          transform: "rotate(90deg)"
+        }
+      }
+    }
+  }
+};
+var rotateAnimation = {
+  transition: "all 0.3s ease-in-out 0s",
+  transform: "rotate(90deg)"
+};
+function Icon(props) {
+  let { name, active = false, style, ...rest } = props;
+  let { stitchesInstance } = (0, import_react11.useContext)(WeaverseContext);
+  const { animationType, css } = ICONS[name];
+  if (active && animationType === "rotate90") {
+    style = { ...rotateAnimation, ...style };
+  }
+  let { className } = stitchesInstance.css(css)();
+  if (active)
+    className += " active";
+  return /* @__PURE__ */ import_react11.default.createElement("span", {
+    style,
+    ...rest
+  }, /* @__PURE__ */ import_react11.default.createElement("i", {
+    className
+  }));
+}
+var Icon_default = Icon;
+
+// src/elements/accordion/AccordionWrapper.tsx
+var AccordionWrapper = (0, import_react12.forwardRef)((props, ref) => {
   const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
-  const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
+  const { iconName, active, setActive } = (0, import_react12.useContext)(AccordionContext);
+  const isActive = active.includes(wvId);
+  return /* @__PURE__ */ import_react12.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react11.default.createElement("div", {
+  }, /* @__PURE__ */ import_react12.default.createElement("div", {
     onClick: () => setActive(wvId),
-    className: `wv-accordion-header ${active === wvId ? "active" : ""}`
-  }, name), children);
+    className: `wv-acc-header ${isActive ? "active" : ""}`
+  }, /* @__PURE__ */ import_react12.default.createElement("span", null, name), /* @__PURE__ */ import_react12.default.createElement(Icon_default, {
+    className: "wv-acc-icon",
+    active: isActive,
+    name: iconName
+  })), children);
 });
 AccordionWrapper.defaultProps = {
   name: "Accordion item",
   css: {
     "@desktop": {
-      maxHeight: "100%"
+      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 AccordionWrapper_default = AccordionWrapper;
 
 // src/elements/accordion/AccordionContent.tsx
-var import_react12 = __toESM(require("react"));
-var AccordionContent = (0, import_react12.forwardRef)(
+var import_react13 = __toESM(require("react"));
+var AccordionContent = (0, import_react13.forwardRef)(
   (props, ref) => {
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -623,17 +697,17 @@ var AccordionContent = (0, import_react12.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_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
+    }, import_react13.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
       element: "Accordion Content"
     }, "Please drag and drop an element here"));
   }
 );
 AccordionContent.defaultProps = {
-  rows: 2,
+  rows: 3,
   columns: 12,
   gap: 4,
   rowSize: 48,
@@ -655,65 +729,69 @@ AccordionContent.defaultProps = {
 var AccordionContent_default = AccordionContent;
 
 // src/elements/tab/index.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/elements/tab/TabHeaderWrapper.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 function TabHeader(props) {
   const { wvId } = props;
-  const { active, setActive } = (0, import_react13.useContext)(TabContext);
-  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const { active, setActive } = (0, import_react14.useContext)(TabContext);
+  const { itemInstances } = (0, import_react14.useContext)(WeaverseContext);
   const instance = itemInstances.get(wvId);
-  let [data, setData] = (0, import_react13.useState)(instance.data);
-  (0, import_react13.useEffect)(() => {
+  let [data, setData] = (0, import_react14.useState)(instance.data);
+  (0, import_react14.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
+  return /* @__PURE__ */ import_react14.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-tab-header${active === wvId ? " active" : ""}`
   }, data.name);
 }
 function TabHeaderWrapper(props) {
-  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const { itemInstances } = (0, import_react14.useContext)(WeaverseContext);
   const instance = itemInstances.get(props.wvId);
   const data = instance.data;
   const childIds = data.childIds;
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
+  return /* @__PURE__ */ import_react14.default.createElement("div", {
     className: "wv-tab-header-wrapper"
-  }, childIds.map((id) => /* @__PURE__ */ import_react13.default.createElement(TabHeader, {
+  }, childIds.map((id) => /* @__PURE__ */ import_react14.default.createElement(TabHeader, {
     key: id,
     wvId: id
   })));
 }
 
 // src/elements/tab/index.tsx
-var TabContext = (0, import_react14.createContext)({
+var TabContext = (0, import_react15.createContext)({
   active: null,
   setActive: () => {
   }
 });
-var Tab = (0, import_react14.forwardRef)((props, ref) => {
+var Tab = (0, import_react15.forwardRef)((props, ref) => {
   var _a, _b, _c;
   const wvId = props["data-wv-id"];
-  const { children, ...rest } = props;
-  const defaultActive = (_c = (_b = (_a = import_react14.default.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
-  const [active, setActive] = (0, import_react14.useState)(defaultActive);
+  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 setOpenTab = (id) => {
     if (id !== active) {
       setActive(id);
     }
   };
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     ref,
-    ...rest
-  }, /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
+    ...rest,
+    style: {
+      "--tab-width": fullWidthTabHeader ? "100%" : "auto"
+    }
+  }, /* @__PURE__ */ import_react15.default.createElement(TabContext.Provider, {
     value: { active, setActive: setOpenTab }
-  }, /* @__PURE__ */ import_react14.default.createElement(TabHeaderWrapper, {
+  }, /* @__PURE__ */ import_react15.default.createElement(TabHeaderWrapper, {
     wvId
   }), children));
 });
 Tab.defaultProps = {
+  fullWidthTabHeader: false,
   css: {
     "@desktop": {
       display: "flex",
@@ -729,6 +807,8 @@ Tab.defaultProps = {
         padding: "15px 24px",
         border: "1px solid #E4E7EB",
         cursor: "pointer",
+        textAlign: "center",
+        width: "var(--tab-width, auto)",
         "&.active": {
           backgroundColor: "#E4E7EB"
         }
@@ -739,10 +819,10 @@ Tab.defaultProps = {
 var tab_default = Tab;
 
 // src/elements/tab/TabContent.tsx
-var import_react15 = __toESM(require("react"));
-var TabContent = (0, import_react15.forwardRef)(
+var import_react16 = __toESM(require("react"));
+var TabContent = (0, import_react16.forwardRef)(
   (props, ref) => {
-    const { active } = (0, import_react15.useContext)(TabContext);
+    const { active } = (0, import_react16.useContext)(TabContext);
     const wvId = props["data-wv-id"];
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -754,17 +834,17 @@ var TabContent = (0, import_react15.forwardRef)(
       "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
       "--content-active": active === wvId ? "grid" : "none"
     };
-    return /* @__PURE__ */ import_react15.default.createElement("div", {
+    return /* @__PURE__ */ import_react16.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
+    }, import_react16.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react16.default.createElement(Placeholder_default, {
       element: "Tab Content"
     }, "Please drag and drop an element here"));
   }
 );
 TabContent.defaultProps = {
-  rows: 2,
+  rows: 3,
   columns: 12,
   gap: 4,
   rowSize: 48,
@@ -784,29 +864,29 @@ TabContent.defaultProps = {
 var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
-var import_react16 = __toESM(require("react"));
+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_react16.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react16.useContext)(WeaverseContext);
+var Slider = (0, import_react17.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react17.useContext)(WeaverseContext);
   const { autoplay, delay, children, ...rest } = props;
-  return /* @__PURE__ */ import_react16.default.createElement("div", {
+  return /* @__PURE__ */ import_react17.default.createElement("div", {
     ...rest,
     ref
-  }, /* @__PURE__ */ import_react16.default.createElement(Carousel, {
+  }, /* @__PURE__ */ import_react17.default.createElement(Carousel, {
     dragging: false,
-    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react16.default.createElement("button", {
+    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react17.default.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.previousSlide,
       disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
-    }, /* @__PURE__ */ import_react16.default.createElement("i", {
+    }, /* @__PURE__ */ import_react17.default.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-left"
     })),
-    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react16.default.createElement("button", {
+    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react17.default.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.nextSlide,
       disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
-    }, /* @__PURE__ */ import_react16.default.createElement("i", {
+    }, /* @__PURE__ */ import_react17.default.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-right"
     })),
     wrapAround: !isDesignMode,
@@ -854,10 +934,10 @@ Slider.defaultProps = {
 var slider_default = Slider;
 
 // src/elements/slider/SliderContent.tsx
-var import_react17 = __toESM(require("react"));
-var SliderContent = (0, import_react17.forwardRef)(
+var import_react18 = __toESM(require("react"));
+var SliderContent = (0, import_react18.forwardRef)(
   (props, ref) => {
-    const { isDesignMode } = (0, import_react17.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react18.useContext)(WeaverseContext);
     const {
       mediaUrl,
       targetLink,
@@ -883,11 +963,11 @@ var SliderContent = (0, import_react17.forwardRef)(
         window.open(targetLink, openInNewTab ? "_blank" : "_self");
       }
     };
-    return /* @__PURE__ */ import_react17.default.createElement("div", {
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
       ...rest,
       style,
       onClick: handleClick
-    }, import_react17.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react17.default.createElement(Placeholder_default, {
+    }, import_react18.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react18.default.createElement(Placeholder_default, {
       element: "Slider Content"
     }, "Please drag and drop an element here"));
   }
@@ -917,22 +997,22 @@ SliderContent.defaultProps = {
 var SliderContent_default = SliderContent;
 
 // src/elements/custom-html.tsx
-var import_react18 = __toESM(require("react"));
-var CustomHTML = (0, import_react18.forwardRef)(
+var import_react19 = __toESM(require("react"));
+var CustomHTML = (0, import_react19.forwardRef)(
   (props, ref) => {
     const { content, children, ...rest } = props;
-    const { isDesignMode } = (0, import_react18.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react19.useContext)(WeaverseContext);
     const style = {
       "--pointer-events": isDesignMode ? "none" : "auto"
     };
     if (!content)
-      return /* @__PURE__ */ import_react18.default.createElement("div", {
+      return /* @__PURE__ */ import_react19.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react18.default.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ import_react19.default.createElement(Placeholder_default, {
         element: "Custom HTML"
       }, "Please add your custom HTML codes."));
-    return /* @__PURE__ */ import_react18.default.createElement("div", {
+    return /* @__PURE__ */ import_react19.default.createElement("div", {
       ref,
       ...rest,
       style,
@@ -1033,13 +1113,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react19.createContext)({});
+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_react20 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/utils/index.ts
 function shortCssObject(css) {
@@ -1067,10 +1147,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react20.useState)(context.projectData);
-  let rootRef = (0, import_react20.useRef)();
+  let [, setData] = (0, import_react21.useState)(context.projectData);
+  let rootRef = (0, import_react21.useRef)();
   let update = () => setData({});
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1079,21 +1159,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_react20.default.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react21.default.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ import_react20.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react21.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react21.default.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react20.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react20.useState)(instance.data);
+  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_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     var _a;
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
@@ -1113,13 +1193,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react20.default.createElement(Component, {
+    return /* @__PURE__ */ import_react21.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react21.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1127,15 +1207,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react20.useContext)(WeaverseContext);
+  let context = (0, import_react21.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react20.default.createElement("div", {
+    return /* @__PURE__ */ import_react21.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react20.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react21.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -389,27 +389,10 @@ import React11, { forwardRef as forwardRef9, useEffect as useEffect2, useState }
 import React10, { forwardRef as forwardRef8 } from "react";
 var Placeholder = forwardRef8(
   (props, ref) => {
-    let { element, children, style: newStyle, ...rest } = props;
-    let defaultStyle = {
-      position: "absolute",
-      height: "calc(100% - 20px)",
-      width: "calc(100% - 20px)",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      pointerEvents: "none",
-      zIndex: 1,
-      color: "#374151",
-      backgroundColor: "#F9FAFB",
-      border: "1px dashed #0F71FF",
-      borderRadius: 4,
-      margin: 10
-    };
-    const style = { ...defaultStyle, ...newStyle };
+    let { element, children, ...rest } = props;
     return /* @__PURE__ */ React10.createElement("div", {
       "data-wv-type": "placeholder",
-      style,
+      style: { display: "none" },
       ref,
       ...rest
     }, /* @__PURE__ */ React10.createElement("div", {
@@ -504,77 +487,168 @@ var instagram_default = Instagram;
 // src/elements/accordion/index.tsx
 import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
 var AccordionContext = createContext({
-  active: null,
+  iconName: "arrow",
+  active: [],
   setActive: () => {
   }
 });
 var Accordion = forwardRef10(
   (props, ref) => {
-    const { items, children, ...rest } = props;
-    const [active, setActive] = useState2(null);
+    const { iconName, children, ...rest } = props;
+    const [active, setActive] = useState2([]);
     const setOpenAccordion = (id) => {
-      if (id === active) {
-        setActive(null);
+      if (active.includes(id)) {
+        setActive(active.filter((_id) => _id !== id));
       } else {
-        setActive(id);
+        setActive([...active, id]);
       }
     };
     return /* @__PURE__ */ React12.createElement("div", {
       ref,
       ...rest
     }, /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
-      value: { active, setActive: setOpenAccordion }
+      value: { active, setActive: setOpenAccordion, iconName }
     }, children));
   }
 );
 Accordion.defaultProps = {
+  iconName: "arrow",
   css: {
     "@desktop": {
       display: "flex",
       flexDirection: "column",
-      gap: 4,
-      ".wv-accordion-header": {
-        borderRadius: 4,
-        padding: 12,
-        marginBottom: 4,
-        border: "1px solid #76A9FA",
-        "&.active": {
-          color: "blue"
-        },
-        '&.active + [data-wv-type="accordion.content"]': {
-          maxHeight: "var(--max-height, inherit)"
+      gap: 4
+    }
+  }
+};
+var accordion_default = Accordion;
+
+// src/elements/accordion/AccordionWrapper.tsx
+import React14, { forwardRef as forwardRef11, useContext as useContext5 } from "react";
+
+// src/elements/accordion/Icon.tsx
+import React13, { useContext as useContext4 } from "react";
+var ICONS = {
+  caret: {
+    animationType: "rotate90",
+    css: {
+      position: "absolute!important",
+      left: 5,
+      top: 2,
+      width: 0,
+      height: 0,
+      borderTop: "6px solid transparent",
+      borderBottom: "6px solid transparent",
+      borderLeft: "6px solid #1F2A37"
+    }
+  },
+  arrow: {
+    animationType: "rotate90",
+    css: {
+      border: "solid #1F2A37",
+      borderWidth: "0 1px 1px 0",
+      display: "inline-block",
+      transform: "rotate(-45deg) translate(15%, -15%)",
+      padding: 4
+    }
+  },
+  plus: {
+    animationType: "custom",
+    css: {
+      display: "inline-block",
+      top: -6,
+      width: 15,
+      height: 1,
+      backgroundColor: "#1F2A37",
+      "&:after": {
+        position: "absolute",
+        content: "",
+        top: -7,
+        left: 7,
+        width: 1,
+        height: 15,
+        backgroundColor: "#1F2A37",
+        transition: "all 0.3s ease-in-out 0s"
+      },
+      "&.active": {
+        "&:after": {
+          transform: "rotate(90deg)"
         }
       }
     }
   }
 };
-var accordion_default = Accordion;
+var rotateAnimation = {
+  transition: "all 0.3s ease-in-out 0s",
+  transform: "rotate(90deg)"
+};
+function Icon(props) {
+  let { name, active = false, style, ...rest } = props;
+  let { stitchesInstance } = useContext4(WeaverseContext);
+  const { animationType, css } = ICONS[name];
+  if (active && animationType === "rotate90") {
+    style = { ...rotateAnimation, ...style };
+  }
+  let { className } = stitchesInstance.css(css)();
+  if (active)
+    className += " active";
+  return /* @__PURE__ */ React13.createElement("span", {
+    style,
+    ...rest
+  }, /* @__PURE__ */ React13.createElement("i", {
+    className
+  }));
+}
+var Icon_default = Icon;
 
 // src/elements/accordion/AccordionWrapper.tsx
-import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
 var AccordionWrapper = forwardRef11((props, ref) => {
   const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
-  const { active, setActive } = useContext4(AccordionContext);
-  return /* @__PURE__ */ React13.createElement("div", {
+  const { iconName, active, setActive } = useContext5(AccordionContext);
+  const isActive = active.includes(wvId);
+  return /* @__PURE__ */ React14.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", {
     onClick: () => setActive(wvId),
-    className: `wv-accordion-header ${active === wvId ? "active" : ""}`
-  }, name), children);
+    className: `wv-acc-header ${isActive ? "active" : ""}`
+  }, /* @__PURE__ */ React14.createElement("span", null, name), /* @__PURE__ */ React14.createElement(Icon_default, {
+    className: "wv-acc-icon",
+    active: isActive,
+    name: iconName
+  })), children);
 });
 AccordionWrapper.defaultProps = {
   name: "Accordion item",
   css: {
     "@desktop": {
-      maxHeight: "100%"
+      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 AccordionWrapper_default = AccordionWrapper;
 
 // src/elements/accordion/AccordionContent.tsx
-import React14, { forwardRef as forwardRef12 } from "react";
+import React15, { forwardRef as forwardRef12 } from "react";
 var AccordionContent = forwardRef12(
   (props, ref) => {
     const { rows, columns, gap, rowSize, children, ...rest } = props;
@@ -586,17 +660,17 @@ var AccordionContent = forwardRef12(
       "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
       "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
     };
-    return /* @__PURE__ */ React14.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
       ref,
       ...rest,
       style
-    }, React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
+    }, React15.Children.count(children) > 0 ? children : /* @__PURE__ */ React15.createElement(Placeholder_default, {
       element: "Accordion Content"
     }, "Please drag and drop an element here"));
   }
 );
 AccordionContent.defaultProps = {
-  rows: 2,
+  rows: 3,
   columns: 12,
   gap: 4,
   rowSize: 48,
@@ -618,33 +692,33 @@ AccordionContent.defaultProps = {
 var AccordionContent_default = AccordionContent;
 
 // src/elements/tab/index.tsx
-import React16, { createContext as createContext2, forwardRef as forwardRef13, useState as useState4 } from "react";
+import React17, { createContext as createContext2, forwardRef as forwardRef13, useState as useState4 } from "react";
 
 // src/elements/tab/TabHeaderWrapper.tsx
-import React15, { useContext as useContext5, useEffect as useEffect3, useState as useState3 } from "react";
+import React16, { useContext as useContext6, useEffect as useEffect3, useState as useState3 } from "react";
 function TabHeader(props) {
   const { wvId } = props;
-  const { active, setActive } = useContext5(TabContext);
-  const { itemInstances } = useContext5(WeaverseContext);
+  const { active, setActive } = useContext6(TabContext);
+  const { itemInstances } = useContext6(WeaverseContext);
   const instance = itemInstances.get(wvId);
   let [data, setData] = useState3(instance.data);
   useEffect3(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-tab-header${active === wvId ? " active" : ""}`
   }, data.name);
 }
 function TabHeaderWrapper(props) {
-  const { itemInstances } = useContext5(WeaverseContext);
+  const { itemInstances } = useContext6(WeaverseContext);
   const instance = itemInstances.get(props.wvId);
   const data = instance.data;
   const childIds = data.childIds;
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     className: "wv-tab-header-wrapper"
-  }, childIds.map((id) => /* @__PURE__ */ React15.createElement(TabHeader, {
+  }, childIds.map((id) => /* @__PURE__ */ React16.createElement(TabHeader, {
     key: id,
     wvId: id
   })));
@@ -659,24 +733,28 @@ var TabContext = createContext2({
 var Tab = forwardRef13((props, ref) => {
   var _a, _b, _c;
   const wvId = props["data-wv-id"];
-  const { children, ...rest } = props;
-  const defaultActive = (_c = (_b = (_a = React16.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
+  const { fullWidthTabHeader, children, ...rest } = props;
+  const defaultActive = (_c = (_b = (_a = React17.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
   const [active, setActive] = useState4(defaultActive);
   const setOpenTab = (id) => {
     if (id !== active) {
       setActive(id);
     }
   };
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     ref,
-    ...rest
-  }, /* @__PURE__ */ React16.createElement(TabContext.Provider, {
+    ...rest,
+    style: {
+      "--tab-width": fullWidthTabHeader ? "100%" : "auto"
+    }
+  }, /* @__PURE__ */ React17.createElement(TabContext.Provider, {
     value: { active, setActive: setOpenTab }
-  }, /* @__PURE__ */ React16.createElement(TabHeaderWrapper, {
+  }, /* @__PURE__ */ React17.createElement(TabHeaderWrapper, {
     wvId
   }), children));
 });
 Tab.defaultProps = {
+  fullWidthTabHeader: false,
   css: {
     "@desktop": {
       display: "flex",
@@ -692,6 +770,8 @@ Tab.defaultProps = {
         padding: "15px 24px",
         border: "1px solid #E4E7EB",
         cursor: "pointer",
+        textAlign: "center",
+        width: "var(--tab-width, auto)",
         "&.active": {
           backgroundColor: "#E4E7EB"
         }
@@ -702,10 +782,10 @@ Tab.defaultProps = {
 var tab_default = Tab;
 
 // src/elements/tab/TabContent.tsx
-import React17, { forwardRef as forwardRef14, useContext as useContext6 } from "react";
+import React18, { forwardRef as forwardRef14, useContext as useContext7 } from "react";
 var TabContent = forwardRef14(
   (props, ref) => {
-    const { active } = useContext6(TabContext);
+    const { active } = useContext7(TabContext);
     const wvId = props["data-wv-id"];
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -717,17 +797,17 @@ var TabContent = forwardRef14(
       "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
       "--content-active": active === wvId ? "grid" : "none"
     };
-    return /* @__PURE__ */ React17.createElement("div", {
+    return /* @__PURE__ */ React18.createElement("div", {
       ref,
       ...rest,
       style
-    }, React17.Children.count(children) > 0 ? children : /* @__PURE__ */ React17.createElement(Placeholder_default, {
+    }, React18.Children.count(children) > 0 ? children : /* @__PURE__ */ React18.createElement(Placeholder_default, {
       element: "Tab Content"
     }, "Please drag and drop an element here"));
   }
 );
 TabContent.defaultProps = {
-  rows: 2,
+  rows: 3,
   columns: 12,
   gap: 4,
   rowSize: 48,
@@ -747,29 +827,29 @@ TabContent.defaultProps = {
 var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
-import React18, { forwardRef as forwardRef15, useContext as useContext7 } from "react";
+import React19, { forwardRef as forwardRef15, useContext as useContext8 } from "react";
 import C from "nuka-carousel";
 var Carousel = C.default;
 var Slider = forwardRef15((props, ref) => {
-  const { isDesignMode } = useContext7(WeaverseContext);
+  const { isDesignMode } = useContext8(WeaverseContext);
   const { autoplay, delay, children, ...rest } = props;
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     ...rest,
     ref
-  }, /* @__PURE__ */ React18.createElement(Carousel, {
+  }, /* @__PURE__ */ React19.createElement(Carousel, {
     dragging: false,
-    renderCenterLeftControls: (props2) => /* @__PURE__ */ React18.createElement("button", {
+    renderCenterLeftControls: (props2) => /* @__PURE__ */ React19.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.previousSlide,
       disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
-    }, /* @__PURE__ */ React18.createElement("i", {
+    }, /* @__PURE__ */ React19.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-left"
     })),
-    renderCenterRightControls: (props2) => /* @__PURE__ */ React18.createElement("button", {
+    renderCenterRightControls: (props2) => /* @__PURE__ */ React19.createElement("button", {
       className: "wv-slider-btn",
       onClick: props2.nextSlide,
       disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
-    }, /* @__PURE__ */ React18.createElement("i", {
+    }, /* @__PURE__ */ React19.createElement("i", {
       className: "wv-slider-arrow wv-slider-arrow-right"
     })),
     wrapAround: !isDesignMode,
@@ -817,10 +897,10 @@ Slider.defaultProps = {
 var slider_default = Slider;
 
 // src/elements/slider/SliderContent.tsx
-import React19, { forwardRef as forwardRef16, useContext as useContext8 } from "react";
+import React20, { forwardRef as forwardRef16, useContext as useContext9 } from "react";
 var SliderContent = forwardRef16(
   (props, ref) => {
-    const { isDesignMode } = useContext8(WeaverseContext);
+    const { isDesignMode } = useContext9(WeaverseContext);
     const {
       mediaUrl,
       targetLink,
@@ -846,11 +926,11 @@ var SliderContent = forwardRef16(
         window.open(targetLink, openInNewTab ? "_blank" : "_self");
       }
     };
-    return /* @__PURE__ */ React19.createElement("div", {
+    return /* @__PURE__ */ React20.createElement("div", {
       ...rest,
       style,
       onClick: handleClick
-    }, React19.Children.count(children) > 0 ? children : /* @__PURE__ */ React19.createElement(Placeholder_default, {
+    }, React20.Children.count(children) > 0 ? children : /* @__PURE__ */ React20.createElement(Placeholder_default, {
       element: "Slider Content"
     }, "Please drag and drop an element here"));
   }
@@ -880,22 +960,22 @@ SliderContent.defaultProps = {
 var SliderContent_default = SliderContent;
 
 // src/elements/custom-html.tsx
-import React20, { forwardRef as forwardRef17, useContext as useContext9 } from "react";
+import React21, { forwardRef as forwardRef17, useContext as useContext10 } from "react";
 var CustomHTML = forwardRef17(
   (props, ref) => {
     const { content, children, ...rest } = props;
-    const { isDesignMode } = useContext9(WeaverseContext);
+    const { isDesignMode } = useContext10(WeaverseContext);
     const style = {
       "--pointer-events": isDesignMode ? "none" : "auto"
     };
     if (!content)
-      return /* @__PURE__ */ React20.createElement("div", {
+      return /* @__PURE__ */ React21.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ React20.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ React21.createElement(Placeholder_default, {
         element: "Custom HTML"
       }, "Please add your custom HTML codes."));
-    return /* @__PURE__ */ React20.createElement("div", {
+    return /* @__PURE__ */ React21.createElement("div", {
       ref,
       ...rest,
       style,
@@ -1002,7 +1082,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React21, { useContext as useContext10, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import React22, { useContext as useContext11, useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/utils/index.ts
 function shortCssObject(css) {
@@ -1042,18 +1122,18 @@ 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__ */ React21.createElement("div", {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React22.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ React21.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ React22.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React21.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React22.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext10(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext11(WeaverseContext);
   let [data, setData] = useState5(instance.data);
   let { id, type, childIds = [], css, className, ...rest } = data;
   useEffect4(() => {
@@ -1076,13 +1156,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React21.createElement(Component, {
+    return /* @__PURE__ */ React22.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React21.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React22.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1090,15 +1170,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext10(WeaverseContext);
+  let context = useContext11(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React21.createElement("div", {
+    return /* @__PURE__ */ React22.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React21.createElement(ItemComponent, {
+  return /* @__PURE__ */ React22.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.6",
+  "version": "0.7.7",
   "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.6",
+    "@weaverse/core": "0.7.7",
     "nuka-carousel": "^5.2.0"
   }
 }