@weaverse/react 0.7.15 → 0.7.16

package/dist/index.js

@@ -238,34 +238,6 @@ var countdown_default = Countdown;
 
 // src/elements/image.tsx
 var import_react5 = __toESM(require("react"));
-var import_core2 = require("@weaverse/core");
-var loadUploadCareAdaptiveDelivery = () => {
-  if (!window.Blinkloader) {
-    console.log("loadUploadCareAdaptiveDelivery");
-    (function(src, cb) {
-      let s = document.createElement("script");
-      s.setAttribute("src", src);
-      s.onload = cb;
-      (document.head || document.body).appendChild(s);
-    })(
-      "https://ucarecdn.com/libs/blinkloader/3.x/blinkloader.min.js",
-      function() {
-        window.Blinkloader.optimize({
-          pubkey: "1a22133d1a1bdc089d4c",
-          fadeIn: true,
-          lazyload: true,
-          smartCompression: true,
-          responsive: true,
-          retina: true,
-          webp: true
-        });
-      }
-    );
-  }
-};
-if (import_core2.isBrowser) {
-  loadUploadCareAdaptiveDelivery();
-}
 var Image = import_react5.default.forwardRef(
   (props, ref) => {
     let {
@@ -308,7 +280,7 @@ var css4 = {
       objectFit: "var(--wv-img-object-fit, cover)",
       objectPosition: "var(--wv-img-object-position, center)"
     },
-    "> [data-blink-src]": {
+    "& [data-blink-src]": {
       visibility: "hidden"
     }
   }
@@ -570,480 +542,6 @@ Instagram.defaultProps = {
 };
 var instagram_default = Instagram;
 
-// src/elements/accordion/index.tsx
-var import_react11 = __toESM(require("react"));
-var AccordionContext = (0, import_react11.createContext)({
-  iconName: "arrow",
-  active: [],
-  setActive: () => {
-  }
-});
-var Accordion = (0, import_react11.forwardRef)(
-  (props, ref) => {
-    const { iconName, children, ...rest } = props;
-    const [active, setActive] = (0, import_react11.useState)([]);
-    const setOpenAccordion = (id) => {
-      if (active.includes(id)) {
-        setActive(active.filter((_id) => _id !== id));
-      } else {
-        setActive([...active, id]);
-      }
-    };
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
-      ref,
-      ...rest
-    }, /* @__PURE__ */ import_react11.default.createElement(AccordionContext.Provider, {
-      value: { active, setActive: setOpenAccordion, iconName }
-    }, children));
-  }
-);
-var css10 = {
-  "@desktop": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4
-  }
-};
-Accordion.defaultProps = {
-  iconName: "arrow"
-};
-var accordion_default = Accordion;
-
-// src/elements/accordion/AccordionWrapper.tsx
-var import_react13 = __toESM(require("react"));
-
-// src/elements/accordion/Icon.tsx
-var import_react12 = __toESM(require("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 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_react12.useContext)(WeaverseContext);
-  const { animationType, css: css17 } = ICONS[name];
-  if (active && animationType === "rotate90") {
-    style = { ...rotateAnimation, ...style };
-  }
-  let { className } = stitchesInstance.css(css17)();
-  if (active)
-    className += " active";
-  return /* @__PURE__ */ import_react12.default.createElement("span", {
-    style,
-    ...rest
-  }, /* @__PURE__ */ import_react12.default.createElement("i", {
-    className
-  }));
-}
-var Icon_default = Icon;
-
-// src/elements/accordion/AccordionWrapper.tsx
-var AccordionWrapper = (0, import_react13.forwardRef)((props, ref) => {
-  const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
-  const { iconName, active, setActive } = (0, import_react13.useContext)(AccordionContext);
-  const isActive = active.includes(wvId);
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ import_react13.default.createElement("div", {
-    onClick: () => setActive(wvId),
-    className: `wv-acc-header ${isActive ? "active" : ""}`
-  }, /* @__PURE__ */ import_react13.default.createElement("span", null, name), /* @__PURE__ */ import_react13.default.createElement(Icon_default, {
-    className: "wv-acc-icon",
-    active: isActive,
-    name: iconName
-  })), children);
-});
-var css11 = {
-  "@desktop": {
-    maxHeight: "100%",
-    ".wv-acc-icon": {
-      position: "absolute",
-      right: 16,
-      width: 16,
-      height: 16,
-      transition: "all 0.3s ease-in-out 0s"
-    },
-    ".wv-acc-header": {
-      display: "flex",
-      alignItems: "center",
-      borderRadius: 4,
-      padding: 12,
-      marginBottom: 4,
-      border: "1px solid #76A9FA",
-      cursor: "pointer",
-      '&.active + [data-wv-type="accordion.content"]': {
-        maxHeight: "var(--max-height, inherit)"
-      }
-    }
-  }
-};
-AccordionWrapper.defaultProps = {
-  name: "Accordion item"
-};
-var AccordionWrapper_default = AccordionWrapper;
-
-// src/elements/accordion/AccordionContent.tsx
-var import_react14 = __toESM(require("react"));
-var AccordionContent = (0, import_react14.forwardRef)(
-  (props, ref) => {
-    const { rows, columns, gap, rowSize, children, ...rest } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
-    };
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, import_react14.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react14.default.createElement(Placeholder_default, {
-      element: "Accordion Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css12 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "grid",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    overflow: "hidden",
-    maxHeight: 0,
-    transition: "all var(--transition-duration, 0.3s) ease-in-out",
-    borderRadius: 4
-  }
-};
-AccordionContent.defaultProps = {
-  rows: 3,
-  columns: 12,
-  gap: 4,
-  rowSize: 48
-};
-var AccordionContent_default = AccordionContent;
-
-// src/elements/tab/index.tsx
-var import_react16 = __toESM(require("react"));
-
-// src/elements/tab/TabHeaderWrapper.tsx
-var import_react15 = __toESM(require("react"));
-function TabHeader(props) {
-  const { wvId } = props;
-  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_react15.useState)(instance.data);
-  (0, import_react15.useEffect)(() => {
-    let update = (data2) => setData({ ...data2 });
-    instance.subscribe(update);
-  }, []);
-  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_react15.useContext)(WeaverseContext);
-  const instance = itemInstances.get(props.wvId);
-  const data = instance.data;
-  const childIds = data.childIds;
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
-    className: "wv-tab-header-wrapper"
-  }, childIds.map((id) => /* @__PURE__ */ import_react15.default.createElement(TabHeader, {
-    key: id,
-    wvId: id
-  })));
-}
-
-// src/elements/tab/index.tsx
-var TabContext = (0, import_react16.createContext)({
-  active: null,
-  setActive: () => {
-  }
-});
-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_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_react16.default.createElement("div", {
-    ref,
-    ...rest,
-    style: {
-      "--tab-width": fullWidthTabHeader ? "100%" : "auto"
-    }
-  }, /* @__PURE__ */ import_react16.default.createElement(TabContext.Provider, {
-    value: { active, setActive: setOpenTab }
-  }, /* @__PURE__ */ import_react16.default.createElement(TabHeaderWrapper, {
-    wvId
-  }), children));
-});
-var css13 = {
-  "@desktop": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4,
-    "& .wv-tab-header-wrapper": {
-      width: "100%",
-      display: "flex",
-      marginBottom: 10
-    },
-    "& .wv-tab-header": {
-      backgroundColor: "#fff",
-      padding: "15px 24px",
-      border: "1px solid #E4E7EB",
-      cursor: "pointer",
-      textAlign: "center",
-      width: "var(--tab-width, auto)",
-      "&.active": {
-        backgroundColor: "#E4E7EB"
-      }
-    }
-  }
-};
-Tab.defaultProps = {
-  fullWidthTabHeader: false
-};
-var tab_default = Tab;
-
-// src/elements/tab/TabContent.tsx
-var import_react17 = __toESM(require("react"));
-var TabContent = (0, import_react17.forwardRef)(
-  (props, ref) => {
-    const { active } = (0, import_react17.useContext)(TabContext);
-    const wvId = props["data-wv-id"];
-    const { rows, columns, gap, rowSize, children, ...rest } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
-      "--content-active": active === wvId ? "grid" : "none"
-    };
-    return /* @__PURE__ */ import_react17.default.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, import_react17.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react17.default.createElement(Placeholder_default, {
-      element: "Tab Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css14 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "var(--content-active, none)",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    borderRadius: 4
-  }
-};
-TabContent.defaultProps = {
-  rows: 3,
-  columns: 12,
-  gap: 4,
-  rowSize: 48,
-  name: "Tab header"
-};
-var TabContent_default = TabContent;
-
-// src/elements/slider/index.tsx
-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_react18.default.createElement("div", {
-    ...rest,
-    ref
-  }, /* @__PURE__ */ import_react18.default.createElement(import_carousel.Carousel, {
-    dragging: false,
-    renderCenterLeftControls: (props2) => /* @__PURE__ */ import_react18.default.createElement("button", {
-      className: "wv-slider-btn",
-      onClick: props2.previousSlide,
-      disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
-    }, /* @__PURE__ */ import_react18.default.createElement("i", {
-      className: "wv-slider-arrow wv-slider-arrow-left"
-    })),
-    renderCenterRightControls: (props2) => /* @__PURE__ */ import_react18.default.createElement("button", {
-      className: "wv-slider-btn",
-      onClick: props2.nextSlide,
-      disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
-    }, /* @__PURE__ */ import_react18.default.createElement("i", {
-      className: "wv-slider-arrow wv-slider-arrow-right"
-    })),
-    wrapAround: !isDesignMode,
-    autoplay: !isDesignMode && autoplay,
-    autoplayInterval: delay * 1e3
-  }, children));
-});
-var css15 = {
-  "@desktop": {
-    "& .wv-slider-btn": {
-      borderRadius: "100%",
-      width: 40,
-      height: 40,
-      background: "#fff",
-      border: "none",
-      cursor: "pointer",
-      "&[disabled]": {
-        cursor: "not-allowed"
-      },
-      "&:hover .wv-slider-arrow": {
-        borderColor: "#999"
-      },
-      "& .wv-slider-arrow": {
-        border: "solid black",
-        borderWidth: "0 1px 1px 0",
-        display: "inline-block",
-        padding: 5
-      },
-      "& .wv-slider-arrow-right": {
-        transform: "rotate(-45deg)",
-        marginRight: 5
-      },
-      "& .wv-slider-arrow-left": {
-        transform: "rotate(135deg)",
-        marginLeft: 5
-      }
-    }
-  }
-};
-Slider.defaultProps = {
-  fullWidth: true,
-  autoplay: true,
-  delay: 3
-};
-var slider_default = Slider;
-
-// src/elements/slider/SliderContent.tsx
-var import_react19 = __toESM(require("react"));
-var SliderContent = (0, import_react19.forwardRef)(
-  (props, ref) => {
-    const { isDesignMode } = (0, import_react19.useContext)(WeaverseContext);
-    const {
-      mediaUrl,
-      targetLink,
-      openInNewTab,
-      rows,
-      columns,
-      gap,
-      rowSize,
-      children,
-      ...rest
-    } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
-      "--background-url": `url(${mediaUrl}`
-    };
-    const handleClick = () => {
-      if (!isDesignMode && targetLink) {
-        window.open(targetLink, openInNewTab ? "_blank" : "_self");
-      }
-    };
-    return /* @__PURE__ */ import_react19.default.createElement("div", {
-      ...rest,
-      style,
-      onClick: handleClick
-    }, import_react19.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react19.default.createElement(Placeholder_default, {
-      element: "Slider Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css16 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "grid",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    borderRadius: 4,
-    backgroundImage: "var(--background-url, none)"
-  }
-};
-SliderContent.defaultProps = {
-  name: "Slider",
-  mediaUrl: "",
-  openInNewTab: false,
-  targetLink: "https://myshop.com",
-  rows: 4,
-  columns: 12,
-  gap: 4,
-  rowSize: 48
-};
-var SliderContent_default = SliderContent;
-
 // src/elements/index.ts
 var SharedComponents = {
   Placeholder: Placeholder_default
@@ -1093,59 +591,24 @@ var Elements = {
     Component: video_default,
     type: "video",
     defaultCss: css8
-  },
-  Accordion: {
-    Component: accordion_default,
-    type: "accordion",
-    defaultCss: css10
-  },
-  AccordionWrapper: {
-    Component: AccordionWrapper_default,
-    type: "accordion.wrapper",
-    defaultCss: css11
-  },
-  AccordionContent: {
-    Component: AccordionContent_default,
-    type: "accordion.content",
-    defaultCss: css12
-  },
-  Tab: {
-    Component: tab_default,
-    type: "tab",
-    defaultCss: css13
-  },
-  TabContent: {
-    Component: TabContent_default,
-    type: "tab.content",
-    defaultCss: css14
-  },
-  Slider: {
-    Component: slider_default,
-    type: "slider",
-    defaultCss: css15
-  },
-  SliderContent: {
-    Component: SliderContent_default,
-    type: "slider.content",
-    defaultCss: css16
   }
 };
 
 // src/renderer.tsx
-var import_core3 = require("@weaverse/core");
-var import_react20 = __toESM(require("react"));
+var import_core2 = require("@weaverse/core");
+var import_react11 = __toESM(require("react"));
 
 // src/utils/index.ts
-function shortCssObject(css17) {
+function shortCssObject(css10) {
   return {
-    "@desktop": css17["@desktop"],
-    "@mobile": css17["@mobile"]
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b;
-  let { css: css17, type, className: cls = "" } = instance.data;
+  let { css: css10, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = (_a = instance.Element) == null ? void 0 : _a.permanentCss;
@@ -1159,8 +622,8 @@ function generateItemClass(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css17) {
-    let formattedCss = shortCssObject(css17);
+  if (css10) {
+    let formattedCss = shortCssObject(css10);
     let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
     let { stitchesClass } = instance;
     let otherClass = (((_b = instance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
@@ -1173,10 +636,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_react11.useState)(context.projectData);
+  let rootRef = (0, import_react11.useRef)();
   let update = () => setData({});
-  (0, import_react20.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1185,24 +648,24 @@ 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_react11.default.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ import_react20.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react20.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react11.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 { id, type, childIds = [], css: css17, className, ...rest } = data;
-  (0, import_react20.useEffect)(() => {
+  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let { id, type, childIds = [], css: css10, className, ...rest } = data;
+  (0, import_react11.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
-    if (import_core3.isBrowser && !instance.ref.current) {
+    if (import_core2.isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
@@ -1215,13 +678,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_react11.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_react11.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1229,15 +692,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react20.useContext)(WeaverseContext);
+  let context = (0, import_react11.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react20.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react20.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -199,34 +199,6 @@ var countdown_default = Countdown;
 
 // src/elements/image.tsx
 import React5 from "react";
-import { isBrowser } from "@weaverse/core";
-var loadUploadCareAdaptiveDelivery = () => {
-  if (!window.Blinkloader) {
-    console.log("loadUploadCareAdaptiveDelivery");
-    (function(src, cb) {
-      let s = document.createElement("script");
-      s.setAttribute("src", src);
-      s.onload = cb;
-      (document.head || document.body).appendChild(s);
-    })(
-      "https://ucarecdn.com/libs/blinkloader/3.x/blinkloader.min.js",
-      function() {
-        window.Blinkloader.optimize({
-          pubkey: "1a22133d1a1bdc089d4c",
-          fadeIn: true,
-          lazyload: true,
-          smartCompression: true,
-          responsive: true,
-          retina: true,
-          webp: true
-        });
-      }
-    );
-  }
-};
-if (isBrowser) {
-  loadUploadCareAdaptiveDelivery();
-}
 var Image = React5.forwardRef(
   (props, ref) => {
     let {
@@ -269,7 +241,7 @@ var css4 = {
       objectFit: "var(--wv-img-object-fit, cover)",
       objectPosition: "var(--wv-img-object-position, center)"
     },
-    "> [data-blink-src]": {
+    "& [data-blink-src]": {
       visibility: "hidden"
     }
   }
@@ -531,480 +503,6 @@ Instagram.defaultProps = {
 };
 var instagram_default = Instagram;
 
-// src/elements/accordion/index.tsx
-import React12, { createContext as createContext2, forwardRef as forwardRef10, useState as useState2 } from "react";
-var AccordionContext = createContext2({
-  iconName: "arrow",
-  active: [],
-  setActive: () => {
-  }
-});
-var Accordion = forwardRef10(
-  (props, ref) => {
-    const { iconName, children, ...rest } = props;
-    const [active, setActive] = useState2([]);
-    const setOpenAccordion = (id) => {
-      if (active.includes(id)) {
-        setActive(active.filter((_id) => _id !== id));
-      } else {
-        setActive([...active, id]);
-      }
-    };
-    return /* @__PURE__ */ React12.createElement("div", {
-      ref,
-      ...rest
-    }, /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
-      value: { active, setActive: setOpenAccordion, iconName }
-    }, children));
-  }
-);
-var css10 = {
-  "@desktop": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4
-  }
-};
-Accordion.defaultProps = {
-  iconName: "arrow"
-};
-var accordion_default = Accordion;
-
-// src/elements/accordion/AccordionWrapper.tsx
-import React14, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
-
-// src/elements/accordion/Icon.tsx
-import React13, { useContext as useContext3 } 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 rotateAnimation = {
-  transition: "all 0.3s ease-in-out 0s",
-  transform: "rotate(90deg)"
-};
-function Icon(props) {
-  let { name, active = false, style, ...rest } = props;
-  let { stitchesInstance } = useContext3(WeaverseContext);
-  const { animationType, css: css17 } = ICONS[name];
-  if (active && animationType === "rotate90") {
-    style = { ...rotateAnimation, ...style };
-  }
-  let { className } = stitchesInstance.css(css17)();
-  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
-var AccordionWrapper = forwardRef11((props, ref) => {
-  const { ["data-wv-id"]: wvId, name, children, ...rest } = props;
-  const { iconName, active, setActive } = useContext4(AccordionContext);
-  const isActive = active.includes(wvId);
-  return /* @__PURE__ */ React14.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ React14.createElement("div", {
-    onClick: () => setActive(wvId),
-    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);
-});
-var css11 = {
-  "@desktop": {
-    maxHeight: "100%",
-    ".wv-acc-icon": {
-      position: "absolute",
-      right: 16,
-      width: 16,
-      height: 16,
-      transition: "all 0.3s ease-in-out 0s"
-    },
-    ".wv-acc-header": {
-      display: "flex",
-      alignItems: "center",
-      borderRadius: 4,
-      padding: 12,
-      marginBottom: 4,
-      border: "1px solid #76A9FA",
-      cursor: "pointer",
-      '&.active + [data-wv-type="accordion.content"]': {
-        maxHeight: "var(--max-height, inherit)"
-      }
-    }
-  }
-};
-AccordionWrapper.defaultProps = {
-  name: "Accordion item"
-};
-var AccordionWrapper_default = AccordionWrapper;
-
-// src/elements/accordion/AccordionContent.tsx
-import React15, { forwardRef as forwardRef12 } from "react";
-var AccordionContent = forwardRef12(
-  (props, ref) => {
-    const { rows, columns, gap, rowSize, children, ...rest } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
-    };
-    return /* @__PURE__ */ React15.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, React15.Children.count(children) > 0 ? children : /* @__PURE__ */ React15.createElement(Placeholder_default, {
-      element: "Accordion Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css12 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "grid",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    overflow: "hidden",
-    maxHeight: 0,
-    transition: "all var(--transition-duration, 0.3s) ease-in-out",
-    borderRadius: 4
-  }
-};
-AccordionContent.defaultProps = {
-  rows: 3,
-  columns: 12,
-  gap: 4,
-  rowSize: 48
-};
-var AccordionContent_default = AccordionContent;
-
-// src/elements/tab/index.tsx
-import React17, { createContext as createContext3, forwardRef as forwardRef13, useState as useState4 } from "react";
-
-// src/elements/tab/TabHeaderWrapper.tsx
-import React16, { useContext as useContext5, useEffect as useEffect3, useState as useState3 } from "react";
-function TabHeader(props) {
-  const { wvId } = props;
-  const { active, setActive } = useContext5(TabContext);
-  const { itemInstances } = useContext5(WeaverseContext);
-  const instance = itemInstances.get(wvId);
-  let [data, setData] = useState3(instance.data);
-  useEffect3(() => {
-    let update = (data2) => setData({ ...data2 });
-    instance.subscribe(update);
-  }, []);
-  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 instance = itemInstances.get(props.wvId);
-  const data = instance.data;
-  const childIds = data.childIds;
-  return /* @__PURE__ */ React16.createElement("div", {
-    className: "wv-tab-header-wrapper"
-  }, childIds.map((id) => /* @__PURE__ */ React16.createElement(TabHeader, {
-    key: id,
-    wvId: id
-  })));
-}
-
-// src/elements/tab/index.tsx
-var TabContext = createContext3({
-  active: null,
-  setActive: () => {
-  }
-});
-var Tab = forwardRef13((props, ref) => {
-  var _a, _b, _c;
-  const wvId = props["data-wv-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__ */ React17.createElement("div", {
-    ref,
-    ...rest,
-    style: {
-      "--tab-width": fullWidthTabHeader ? "100%" : "auto"
-    }
-  }, /* @__PURE__ */ React17.createElement(TabContext.Provider, {
-    value: { active, setActive: setOpenTab }
-  }, /* @__PURE__ */ React17.createElement(TabHeaderWrapper, {
-    wvId
-  }), children));
-});
-var css13 = {
-  "@desktop": {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4,
-    "& .wv-tab-header-wrapper": {
-      width: "100%",
-      display: "flex",
-      marginBottom: 10
-    },
-    "& .wv-tab-header": {
-      backgroundColor: "#fff",
-      padding: "15px 24px",
-      border: "1px solid #E4E7EB",
-      cursor: "pointer",
-      textAlign: "center",
-      width: "var(--tab-width, auto)",
-      "&.active": {
-        backgroundColor: "#E4E7EB"
-      }
-    }
-  }
-};
-Tab.defaultProps = {
-  fullWidthTabHeader: false
-};
-var tab_default = Tab;
-
-// src/elements/tab/TabContent.tsx
-import React18, { forwardRef as forwardRef14, useContext as useContext6 } from "react";
-var TabContent = forwardRef14(
-  (props, ref) => {
-    const { active } = useContext6(TabContext);
-    const wvId = props["data-wv-id"];
-    const { rows, columns, gap, rowSize, children, ...rest } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
-      "--content-active": active === wvId ? "grid" : "none"
-    };
-    return /* @__PURE__ */ React18.createElement("div", {
-      ref,
-      ...rest,
-      style
-    }, React18.Children.count(children) > 0 ? children : /* @__PURE__ */ React18.createElement(Placeholder_default, {
-      element: "Tab Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css14 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "var(--content-active, none)",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    borderRadius: 4
-  }
-};
-TabContent.defaultProps = {
-  rows: 3,
-  columns: 12,
-  gap: 4,
-  rowSize: 48,
-  name: "Tab header"
-};
-var TabContent_default = TabContent;
-
-// src/elements/slider/index.tsx
-import React19, { forwardRef as forwardRef15, useContext as useContext7 } from "react";
-import { Carousel } from "nuka-carousel/lib/carousel";
-var Slider = forwardRef15((props, ref) => {
-  const { isDesignMode } = useContext7(WeaverseContext);
-  const { autoplay, delay, children, ...rest } = props;
-  return /* @__PURE__ */ React19.createElement("div", {
-    ...rest,
-    ref
-  }, /* @__PURE__ */ React19.createElement(Carousel, {
-    dragging: false,
-    renderCenterLeftControls: (props2) => /* @__PURE__ */ React19.createElement("button", {
-      className: "wv-slider-btn",
-      onClick: props2.previousSlide,
-      disabled: (isDesignMode || !autoplay) && props2.currentSlide === 0
-    }, /* @__PURE__ */ React19.createElement("i", {
-      className: "wv-slider-arrow wv-slider-arrow-left"
-    })),
-    renderCenterRightControls: (props2) => /* @__PURE__ */ React19.createElement("button", {
-      className: "wv-slider-btn",
-      onClick: props2.nextSlide,
-      disabled: (isDesignMode || !autoplay) && props2.slideCount === props2.currentSlide
-    }, /* @__PURE__ */ React19.createElement("i", {
-      className: "wv-slider-arrow wv-slider-arrow-right"
-    })),
-    wrapAround: !isDesignMode,
-    autoplay: !isDesignMode && autoplay,
-    autoplayInterval: delay * 1e3
-  }, children));
-});
-var css15 = {
-  "@desktop": {
-    "& .wv-slider-btn": {
-      borderRadius: "100%",
-      width: 40,
-      height: 40,
-      background: "#fff",
-      border: "none",
-      cursor: "pointer",
-      "&[disabled]": {
-        cursor: "not-allowed"
-      },
-      "&:hover .wv-slider-arrow": {
-        borderColor: "#999"
-      },
-      "& .wv-slider-arrow": {
-        border: "solid black",
-        borderWidth: "0 1px 1px 0",
-        display: "inline-block",
-        padding: 5
-      },
-      "& .wv-slider-arrow-right": {
-        transform: "rotate(-45deg)",
-        marginRight: 5
-      },
-      "& .wv-slider-arrow-left": {
-        transform: "rotate(135deg)",
-        marginLeft: 5
-      }
-    }
-  }
-};
-Slider.defaultProps = {
-  fullWidth: true,
-  autoplay: true,
-  delay: 3
-};
-var slider_default = Slider;
-
-// src/elements/slider/SliderContent.tsx
-import React20, { forwardRef as forwardRef16, useContext as useContext8 } from "react";
-var SliderContent = forwardRef16(
-  (props, ref) => {
-    const { isDesignMode } = useContext8(WeaverseContext);
-    const {
-      mediaUrl,
-      targetLink,
-      openInNewTab,
-      rows,
-      columns,
-      gap,
-      rowSize,
-      children,
-      ...rest
-    } = props;
-    let style = {
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
-      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
-      "--background-url": `url(${mediaUrl}`
-    };
-    const handleClick = () => {
-      if (!isDesignMode && targetLink) {
-        window.open(targetLink, openInNewTab ? "_blank" : "_self");
-      }
-    };
-    return /* @__PURE__ */ React20.createElement("div", {
-      ...rest,
-      style,
-      onClick: handleClick
-    }, React20.Children.count(children) > 0 ? children : /* @__PURE__ */ React20.createElement(Placeholder_default, {
-      element: "Slider Content"
-    }, "Drag and drop an element here."));
-  }
-);
-var css16 = {
-  "@desktop": {
-    width: "100%",
-    maxWidth: "var(--grid-size)",
-    display: "grid",
-    gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-    gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-    gap: "var(--gap)",
-    borderRadius: 4,
-    backgroundImage: "var(--background-url, none)"
-  }
-};
-SliderContent.defaultProps = {
-  name: "Slider",
-  mediaUrl: "",
-  openInNewTab: false,
-  targetLink: "https://myshop.com",
-  rows: 4,
-  columns: 12,
-  gap: 4,
-  rowSize: 48
-};
-var SliderContent_default = SliderContent;
-
 // src/elements/index.ts
 var SharedComponents = {
   Placeholder: Placeholder_default
@@ -1054,59 +552,24 @@ var Elements = {
     Component: video_default,
     type: "video",
     defaultCss: css8
-  },
-  Accordion: {
-    Component: accordion_default,
-    type: "accordion",
-    defaultCss: css10
-  },
-  AccordionWrapper: {
-    Component: AccordionWrapper_default,
-    type: "accordion.wrapper",
-    defaultCss: css11
-  },
-  AccordionContent: {
-    Component: AccordionContent_default,
-    type: "accordion.content",
-    defaultCss: css12
-  },
-  Tab: {
-    Component: tab_default,
-    type: "tab",
-    defaultCss: css13
-  },
-  TabContent: {
-    Component: TabContent_default,
-    type: "tab.content",
-    defaultCss: css14
-  },
-  Slider: {
-    Component: slider_default,
-    type: "slider",
-    defaultCss: css15
-  },
-  SliderContent: {
-    Component: SliderContent_default,
-    type: "slider.content",
-    defaultCss: css16
   }
 };
 
 // src/renderer.tsx
-import { isBrowser as isBrowser2 } from "@weaverse/core";
-import React21, { useContext as useContext9, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import { isBrowser } from "@weaverse/core";
+import React12, { useContext as useContext3, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
-function shortCssObject(css17) {
+function shortCssObject(css10) {
   return {
-    "@desktop": css17["@desktop"],
-    "@mobile": css17["@mobile"]
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b;
-  let { css: css17, type, className: cls = "" } = instance.data;
+  let { css: css10, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = (_a = instance.Element) == null ? void 0 : _a.permanentCss;
@@ -1120,8 +583,8 @@ function generateItemClass(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css17) {
-    let formattedCss = shortCssObject(css17);
+  if (css10) {
+    let formattedCss = shortCssObject(css10);
     let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
     let { stitchesClass } = instance;
     let otherClass = (((_b = instance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
@@ -1134,10 +597,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = useState5(context.projectData);
+  let [, setData] = useState2(context.projectData);
   let rootRef = useRef();
   let update = () => setData({});
-  useEffect4(() => {
+  useEffect3(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -1146,24 +609,24 @@ 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__ */ React12.createElement("div", {
     className: `weaverse-content-root ${themeClass}`,
     ...eventHandlers,
     ref: rootRef
-  }, /* @__PURE__ */ React21.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React21.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext9(WeaverseContext);
-  let [data, setData] = useState5(instance.data);
-  let { id, type, childIds = [], css: css17, className, ...rest } = data;
-  useEffect4(() => {
+  let { stitchesInstance, elementInstances } = useContext3(WeaverseContext);
+  let [data, setData] = useState2(instance.data);
+  let { id, type, childIds = [], css: css10, className, ...rest } = data;
+  useEffect3(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
-    if (isBrowser2 && !instance.ref.current) {
+    if (isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
@@ -1176,13 +639,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React21.createElement(Component, {
+    return /* @__PURE__ */ React12.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__ */ React12.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -1190,15 +653,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext9(WeaverseContext);
+  let context = useContext3(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React21.createElement("div", {
+    return /* @__PURE__ */ React12.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React21.createElement(ItemComponent, {
+  return /* @__PURE__ */ React12.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.15",
+  "version": "0.7.16",
   "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.15",
+    "@weaverse/core": "0.7.16",
     "nuka-carousel": "^5.4.0"
   }
 }