@weaverse/react 0.7.13 → 0.7.15

package/dist/index.js

@@ -60,16 +60,17 @@ Button.defaultProps = {
   text: "Shop now",
   clickAction: "none",
   linkTo: "",
-  openInNewTab: false,
-  css: {
-    "@desktop": {
-      borderRadius: "72px",
-      border: "none",
-      backgroundColor: "#0F71FF",
-      color: "#fff",
-      fontSize: "13px",
-      padding: "10px 20px"
-    }
+  openInNewTab: false
+};
+var css = {
+  "@desktop": {
+    borderRadius: "72px",
+    border: "none",
+    backgroundColor: "#0F71FF",
+    color: "#fff",
+    fontSize: "13px",
+    padding: "10px 20px",
+    textDecoration: "none"
   }
 };
 var button_default = Button;
@@ -85,7 +86,7 @@ var Container = (0, import_react.forwardRef)(
     }, children);
   }
 );
-var css = {
+var css2 = {
   "@desktop": {
     alignItems: "flex-start",
     backgroundColor: "rgba(248,203,203,0.38)",
@@ -122,10 +123,12 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 // src/elements/countdown/timer-block.tsx
 var import_react3 = __toESM(require("react"));
 function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "wv-countdown-number"
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-block"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-number"
   }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
-    className: "wv-countdown-label"
+    className: "wv-cd-label"
   }, label));
 }
 
@@ -173,6 +176,7 @@ var Countdown = (0, import_react4.forwardRef)(
         );
         if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
           window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+          clearInterval(flag);
         }
         setRemaining(remainingTime);
       }, 1e3);
@@ -190,13 +194,13 @@ var Countdown = (0, import_react4.forwardRef)(
       }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
         label: showLabel ? time : "",
         value: timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("span", {
-        className: `wv-countdown-number ${showColon ? "" : "hidden"}`
-      }, ":"));
+      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("span", {
+        className: `wv-cd-number ${showColon ? "" : "hidden"}`
+      }, ":")));
     }));
   }
 );
-var css2 = {
+var css3 = {
   "@desktop": {
     fontFamily: "Inter",
     fontSize: 36,
@@ -204,11 +208,12 @@ var css2 = {
     display: "grid",
     gridAutoFlow: "column",
     gap: 10,
-    "& > div": {
+    lineHeight: "initial",
+    ".wv-cd-block": {
       width: 48,
       textAlign: "center"
     },
-    ".wv-countdown-label": {
+    ".wv-cd-label": {
       fontSize: 10
     },
     "& > span": {
@@ -222,7 +227,7 @@ var css2 = {
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
-  endTime: 1661140528e3,
+  endTime: 1666756528e3,
   periods: 90,
   redirectUrl: "https://myshop.com",
   openInNewTab: false,
@@ -233,9 +238,36 @@ 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 { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
     let {
       src,
       alt,
@@ -243,38 +275,41 @@ var Image = import_react5.default.forwardRef(
       objectPosition,
       onClickAction,
       openLinkInNewTab,
+      linkTo,
       ...rest
     } = props;
     let style = {
       "--wv-img-object-fit": objectFit,
       "--wv-img-object-position": objectPosition
     };
-    let handleClick = () => {
-      if (isDesignMode) {
-        return console.log("Click action:", onClickAction);
-      }
-      if (onClickAction) {
-        console.log("TODO: click action:", onClickAction);
-      }
-    };
+    let content = /* @__PURE__ */ import_react5.default.createElement("img", {
+      alt,
+      "data-blink-src": src
+    });
+    if (onClickAction === "open-link" && linkTo) {
+      let target = openLinkInNewTab ? "_blank" : "_self";
+      content = /* @__PURE__ */ import_react5.default.createElement("a", {
+        href: linkTo,
+        target
+      }, content);
+    }
     return /* @__PURE__ */ import_react5.default.createElement("div", {
       ref,
       ...rest,
-      style,
-      onClick: handleClick
-    }, /* @__PURE__ */ import_react5.default.createElement("img", {
-      alt,
-      src
-    }));
+      style
+    }, content);
   }
 );
-var css3 = {
+var css4 = {
   "@desktop": {
     img: {
       width: "100%",
       height: "100%",
       objectFit: "var(--wv-img-object-fit, cover)",
       objectPosition: "var(--wv-img-object-position, center)"
+    },
+    "> [data-blink-src]": {
+      visibility: "hidden"
     }
   }
 };
@@ -283,8 +318,9 @@ Image.defaultProps = {
   alt: "Image alt text",
   objectFit: "cover",
   objectPosition: "center",
-  onClickAction: "open-lightbox",
-  openLinkInNewTab: false
+  onClickAction: "open-link",
+  openLinkInNewTab: false,
+  linkTo: ""
 };
 var image_default = Image;
 
@@ -308,7 +344,7 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     "data-layout-content": true
   }, children));
 });
-var css4 = {
+var css5 = {
   "@desktop": {
     paddingTop: "16px",
     paddingBottom: "16px",
@@ -357,7 +393,7 @@ var Map = (0, import_react7.forwardRef)((props, ref) => {
     style: { pointerEvents: "none" }
   }));
 });
-var css5 = {};
+var css6 = {};
 Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
@@ -376,7 +412,7 @@ var Text = React8.forwardRef(
     });
   }
 );
-var css6 = {
+var css7 = {
   "@desktop": {
     padding: "10px",
     wordBreak: "break-word",
@@ -407,9 +443,12 @@ var Video = (0, import_react8.forwardRef)((props, ref) => {
   }, /* @__PURE__ */ import_react8.default.createElement("source", {
     src,
     type: type || "video/mp4"
+  }), /* @__PURE__ */ import_react8.default.createElement("source", {
+    src,
+    type: "video/ogg"
   }), "Your browser does not support the video tag."));
 });
-var css7 = {
+var css8 = {
   "@desktop": {
     video: {
       height: "100%",
@@ -420,7 +459,7 @@ var css7 = {
 };
 Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
-  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
   loop: false,
   type: "video/mp4",
   controls: false,
@@ -504,7 +543,7 @@ var Instagram = (0, import_react10.forwardRef)(
     })));
   }
 );
-var css8 = {
+var css9 = {
   "@desktop": {
     ".wv-ig-media-container": {
       overflow: "hidden",
@@ -558,7 +597,7 @@ var Accordion = (0, import_react11.forwardRef)(
     }, children));
   }
 );
-var css9 = {
+var css10 = {
   "@desktop": {
     display: "flex",
     flexDirection: "column",
@@ -632,11 +671,11 @@ var rotateAnimation = {
 function Icon(props) {
   let { name, active = false, style, ...rest } = props;
   let { stitchesInstance } = (0, import_react12.useContext)(WeaverseContext);
-  const { animationType, css: css16 } = ICONS[name];
+  const { animationType, css: css17 } = ICONS[name];
   if (active && animationType === "rotate90") {
     style = { ...rotateAnimation, ...style };
   }
-  let { className } = stitchesInstance.css(css16)();
+  let { className } = stitchesInstance.css(css17)();
   if (active)
     className += " active";
   return /* @__PURE__ */ import_react12.default.createElement("span", {
@@ -665,7 +704,7 @@ var AccordionWrapper = (0, import_react13.forwardRef)((props, ref) => {
     name: iconName
   })), children);
 });
-var css10 = {
+var css11 = {
   "@desktop": {
     maxHeight: "100%",
     ".wv-acc-icon": {
@@ -716,7 +755,7 @@ var AccordionContent = (0, import_react14.forwardRef)(
     }, "Drag and drop an element here."));
   }
 );
-var css11 = {
+var css12 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -800,7 +839,7 @@ var Tab = (0, import_react16.forwardRef)((props, ref) => {
     wvId
   }), children));
 });
-var css12 = {
+var css13 = {
   "@desktop": {
     display: "flex",
     flexDirection: "column",
@@ -853,7 +892,7 @@ var TabContent = (0, import_react17.forwardRef)(
     }, "Drag and drop an element here."));
   }
 );
-var css13 = {
+var css14 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -903,7 +942,7 @@ var Slider = (0, import_react18.forwardRef)((props, ref) => {
     autoplayInterval: delay * 1e3
   }, children));
 });
-var css14 = {
+var css15 = {
   "@desktop": {
     "& .wv-slider-btn": {
       borderRadius: "100%",
@@ -981,7 +1020,7 @@ var SliderContent = (0, import_react19.forwardRef)(
     }, "Drag and drop an element here."));
   }
 );
-var css15 = {
+var css16 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -1013,99 +1052,100 @@ var Elements = {
   Countdown: {
     Component: countdown_default,
     type: "countdown",
-    defaultCss: css2
+    defaultCss: css3
   },
   Button: {
     Component: button_default,
-    type: "button"
+    type: "button",
+    defaultCss: css
   },
   Container: {
     Component: container_default,
     type: "container",
-    defaultCss: css
+    defaultCss: css2
   },
   Image: {
     Component: image_default,
     type: "image",
-    defaultCss: css3
+    defaultCss: css4
   },
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css8
+    defaultCss: css9
   },
   Layout: {
     Component: layout_default,
     type: "layout",
-    defaultCss: css4
+    defaultCss: css5
   },
   Map: {
     Component: map_default,
     type: "map",
-    defaultCss: css5
+    defaultCss: css6
   },
   Text: {
     Component: text_default,
     type: "text",
-    defaultCss: css6
+    defaultCss: css7
   },
   Video: {
     Component: video_default,
     type: "video",
-    defaultCss: css7
+    defaultCss: css8
   },
   Accordion: {
     Component: accordion_default,
     type: "accordion",
-    defaultCss: css9
+    defaultCss: css10
   },
   AccordionWrapper: {
     Component: AccordionWrapper_default,
     type: "accordion.wrapper",
-    defaultCss: css10
+    defaultCss: css11
   },
   AccordionContent: {
     Component: AccordionContent_default,
     type: "accordion.content",
-    defaultCss: css11
+    defaultCss: css12
   },
   Tab: {
     Component: tab_default,
     type: "tab",
-    defaultCss: css12
+    defaultCss: css13
   },
   TabContent: {
     Component: TabContent_default,
     type: "tab.content",
-    defaultCss: css13
+    defaultCss: css14
   },
   Slider: {
     Component: slider_default,
     type: "slider",
-    defaultCss: css14
+    defaultCss: css15
   },
   SliderContent: {
     Component: SliderContent_default,
     type: "slider.content",
-    defaultCss: css15
+    defaultCss: css16
   }
 };
 
 // src/renderer.tsx
-var import_core2 = require("@weaverse/core");
+var import_core3 = require("@weaverse/core");
 var import_react20 = __toESM(require("react"));
 
 // src/utils/index.ts
-function shortCssObject(css16) {
+function shortCssObject(css17) {
   return {
-    "@desktop": css16["@desktop"],
-    "@mobile": css16["@mobile"]
+    "@desktop": css17["@desktop"],
+    "@mobile": css17["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b;
-  let { css: css16, type, className: cls = "" } = instance.data;
+  let { css: css17, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = (_a = instance.Element) == null ? void 0 : _a.permanentCss;
@@ -1119,8 +1159,8 @@ function generateItemClass(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css16) {
-    let formattedCss = shortCssObject(css16);
+  if (css17) {
+    let formattedCss = shortCssObject(css17);
     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();
@@ -1158,11 +1198,11 @@ var WeaverseRoot = ({ context }) => {
 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: css16, className, ...rest } = data;
+  let { id, type, childIds = [], css: css17, className, ...rest } = data;
   (0, import_react20.useEffect)(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
-    if (import_core2.isBrowser && !instance.ref.current) {
+    if (import_core3.isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });

package/dist/index.mjs

@@ -21,16 +21,17 @@ Button.defaultProps = {
   text: "Shop now",
   clickAction: "none",
   linkTo: "",
-  openInNewTab: false,
-  css: {
-    "@desktop": {
-      borderRadius: "72px",
-      border: "none",
-      backgroundColor: "#0F71FF",
-      color: "#fff",
-      fontSize: "13px",
-      padding: "10px 20px"
-    }
+  openInNewTab: false
+};
+var css = {
+  "@desktop": {
+    borderRadius: "72px",
+    border: "none",
+    backgroundColor: "#0F71FF",
+    color: "#fff",
+    fontSize: "13px",
+    padding: "10px 20px",
+    textDecoration: "none"
   }
 };
 var button_default = Button;
@@ -46,7 +47,7 @@ var Container = forwardRef2(
     }, children);
   }
 );
-var css = {
+var css2 = {
   "@desktop": {
     alignItems: "flex-start",
     backgroundColor: "rgba(248,203,203,0.38)",
@@ -83,10 +84,12 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 // src/elements/countdown/timer-block.tsx
 import React3 from "react";
 function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", {
-    className: "wv-countdown-number"
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-cd-block"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-cd-number"
   }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
-    className: "wv-countdown-label"
+    className: "wv-cd-label"
   }, label));
 }
 
@@ -134,6 +137,7 @@ var Countdown = forwardRef3(
         );
         if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
           window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+          clearInterval(flag);
         }
         setRemaining(remainingTime);
       }, 1e3);
@@ -151,13 +155,13 @@ var Countdown = forwardRef3(
       }, /* @__PURE__ */ React4.createElement(TimerBlock, {
         label: showLabel ? time : "",
         value: timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ React4.createElement("span", {
-        className: `wv-countdown-number ${showColon ? "" : "hidden"}`
-      }, ":"));
+      }), time !== "seconds" && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("span", {
+        className: `wv-cd-number ${showColon ? "" : "hidden"}`
+      }, ":")));
     }));
   }
 );
-var css2 = {
+var css3 = {
   "@desktop": {
     fontFamily: "Inter",
     fontSize: 36,
@@ -165,11 +169,12 @@ var css2 = {
     display: "grid",
     gridAutoFlow: "column",
     gap: 10,
-    "& > div": {
+    lineHeight: "initial",
+    ".wv-cd-block": {
       width: 48,
       textAlign: "center"
     },
-    ".wv-countdown-label": {
+    ".wv-cd-label": {
       fontSize: 10
     },
     "& > span": {
@@ -183,7 +188,7 @@ var css2 = {
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
-  endTime: 1661140528e3,
+  endTime: 1666756528e3,
   periods: 90,
   redirectUrl: "https://myshop.com",
   openInNewTab: false,
@@ -193,10 +198,37 @@ Countdown.defaultProps = {
 var countdown_default = Countdown;
 
 // src/elements/image.tsx
-import React5, { useContext as useContext2 } from "react";
+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 { isDesignMode } = useContext2(WeaverseContext);
     let {
       src,
       alt,
@@ -204,38 +236,41 @@ var Image = React5.forwardRef(
       objectPosition,
       onClickAction,
       openLinkInNewTab,
+      linkTo,
       ...rest
     } = props;
     let style = {
       "--wv-img-object-fit": objectFit,
       "--wv-img-object-position": objectPosition
     };
-    let handleClick = () => {
-      if (isDesignMode) {
-        return console.log("Click action:", onClickAction);
-      }
-      if (onClickAction) {
-        console.log("TODO: click action:", onClickAction);
-      }
-    };
+    let content = /* @__PURE__ */ React5.createElement("img", {
+      alt,
+      "data-blink-src": src
+    });
+    if (onClickAction === "open-link" && linkTo) {
+      let target = openLinkInNewTab ? "_blank" : "_self";
+      content = /* @__PURE__ */ React5.createElement("a", {
+        href: linkTo,
+        target
+      }, content);
+    }
     return /* @__PURE__ */ React5.createElement("div", {
       ref,
       ...rest,
-      style,
-      onClick: handleClick
-    }, /* @__PURE__ */ React5.createElement("img", {
-      alt,
-      src
-    }));
+      style
+    }, content);
   }
 );
-var css3 = {
+var css4 = {
   "@desktop": {
     img: {
       width: "100%",
       height: "100%",
       objectFit: "var(--wv-img-object-fit, cover)",
       objectPosition: "var(--wv-img-object-position, center)"
+    },
+    "> [data-blink-src]": {
+      visibility: "hidden"
     }
   }
 };
@@ -244,8 +279,9 @@ Image.defaultProps = {
   alt: "Image alt text",
   objectFit: "cover",
   objectPosition: "center",
-  onClickAction: "open-lightbox",
-  openLinkInNewTab: false
+  onClickAction: "open-link",
+  openLinkInNewTab: false,
+  linkTo: ""
 };
 var image_default = Image;
 
@@ -269,7 +305,7 @@ var Layout = forwardRef4((props, ref) => {
     "data-layout-content": true
   }, children));
 });
-var css4 = {
+var css5 = {
   "@desktop": {
     paddingTop: "16px",
     paddingBottom: "16px",
@@ -318,7 +354,7 @@ var Map = forwardRef5((props, ref) => {
     style: { pointerEvents: "none" }
   }));
 });
-var css5 = {};
+var css6 = {};
 Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
@@ -337,7 +373,7 @@ var Text = React8.forwardRef(
     });
   }
 );
-var css6 = {
+var css7 = {
   "@desktop": {
     padding: "10px",
     wordBreak: "break-word",
@@ -351,9 +387,9 @@ Text.defaultProps = {
 var text_default = Text;
 
 // src/elements/video.tsx
-import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
+import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
 var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext3(WeaverseContext);
+  let { isDesignMode } = useContext2(WeaverseContext);
   let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
   return /* @__PURE__ */ React9.createElement("div", {
     ref,
@@ -368,9 +404,12 @@ var Video = forwardRef7((props, ref) => {
   }, /* @__PURE__ */ React9.createElement("source", {
     src,
     type: type || "video/mp4"
+  }), /* @__PURE__ */ React9.createElement("source", {
+    src,
+    type: "video/ogg"
   }), "Your browser does not support the video tag."));
 });
-var css7 = {
+var css8 = {
   "@desktop": {
     video: {
       height: "100%",
@@ -381,7 +420,7 @@ var css7 = {
 };
 Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
-  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
   loop: false,
   type: "video/mp4",
   controls: false,
@@ -465,7 +504,7 @@ var Instagram = forwardRef9(
     })));
   }
 );
-var css8 = {
+var css9 = {
   "@desktop": {
     ".wv-ig-media-container": {
       overflow: "hidden",
@@ -519,7 +558,7 @@ var Accordion = forwardRef10(
     }, children));
   }
 );
-var css9 = {
+var css10 = {
   "@desktop": {
     display: "flex",
     flexDirection: "column",
@@ -532,10 +571,10 @@ Accordion.defaultProps = {
 var accordion_default = Accordion;
 
 // src/elements/accordion/AccordionWrapper.tsx
-import React14, { forwardRef as forwardRef11, useContext as useContext5 } from "react";
+import React14, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
 
 // src/elements/accordion/Icon.tsx
-import React13, { useContext as useContext4 } from "react";
+import React13, { useContext as useContext3 } from "react";
 var ICONS = {
   caret: {
     animationType: "rotate90",
@@ -592,12 +631,12 @@ var rotateAnimation = {
 };
 function Icon(props) {
   let { name, active = false, style, ...rest } = props;
-  let { stitchesInstance } = useContext4(WeaverseContext);
-  const { animationType, css: css16 } = ICONS[name];
+  let { stitchesInstance } = useContext3(WeaverseContext);
+  const { animationType, css: css17 } = ICONS[name];
   if (active && animationType === "rotate90") {
     style = { ...rotateAnimation, ...style };
   }
-  let { className } = stitchesInstance.css(css16)();
+  let { className } = stitchesInstance.css(css17)();
   if (active)
     className += " active";
   return /* @__PURE__ */ React13.createElement("span", {
@@ -612,7 +651,7 @@ 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 } = useContext5(AccordionContext);
+  const { iconName, active, setActive } = useContext4(AccordionContext);
   const isActive = active.includes(wvId);
   return /* @__PURE__ */ React14.createElement("div", {
     ref,
@@ -626,7 +665,7 @@ var AccordionWrapper = forwardRef11((props, ref) => {
     name: iconName
   })), children);
 });
-var css10 = {
+var css11 = {
   "@desktop": {
     maxHeight: "100%",
     ".wv-acc-icon": {
@@ -677,7 +716,7 @@ var AccordionContent = forwardRef12(
     }, "Drag and drop an element here."));
   }
 );
-var css11 = {
+var css12 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -703,11 +742,11 @@ var AccordionContent_default = AccordionContent;
 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";
+import React16, { useContext as useContext5, useEffect as useEffect3, useState as useState3 } from "react";
 function TabHeader(props) {
   const { wvId } = props;
-  const { active, setActive } = useContext6(TabContext);
-  const { itemInstances } = useContext6(WeaverseContext);
+  const { active, setActive } = useContext5(TabContext);
+  const { itemInstances } = useContext5(WeaverseContext);
   const instance = itemInstances.get(wvId);
   let [data, setData] = useState3(instance.data);
   useEffect3(() => {
@@ -720,7 +759,7 @@ function TabHeader(props) {
   }, data.name);
 }
 function TabHeaderWrapper(props) {
-  const { itemInstances } = useContext6(WeaverseContext);
+  const { itemInstances } = useContext5(WeaverseContext);
   const instance = itemInstances.get(props.wvId);
   const data = instance.data;
   const childIds = data.childIds;
@@ -761,7 +800,7 @@ var Tab = forwardRef13((props, ref) => {
     wvId
   }), children));
 });
-var css12 = {
+var css13 = {
   "@desktop": {
     display: "flex",
     flexDirection: "column",
@@ -790,10 +829,10 @@ Tab.defaultProps = {
 var tab_default = Tab;
 
 // src/elements/tab/TabContent.tsx
-import React18, { forwardRef as forwardRef14, useContext as useContext7 } from "react";
+import React18, { forwardRef as forwardRef14, useContext as useContext6 } from "react";
 var TabContent = forwardRef14(
   (props, ref) => {
-    const { active } = useContext7(TabContext);
+    const { active } = useContext6(TabContext);
     const wvId = props["data-wv-id"];
     const { rows, columns, gap, rowSize, children, ...rest } = props;
     let style = {
@@ -814,7 +853,7 @@ var TabContent = forwardRef14(
     }, "Drag and drop an element here."));
   }
 );
-var css13 = {
+var css14 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -835,10 +874,10 @@ TabContent.defaultProps = {
 var TabContent_default = TabContent;
 
 // src/elements/slider/index.tsx
-import React19, { forwardRef as forwardRef15, useContext as useContext8 } from "react";
+import React19, { forwardRef as forwardRef15, useContext as useContext7 } from "react";
 import { Carousel } from "nuka-carousel/lib/carousel";
 var Slider = forwardRef15((props, ref) => {
-  const { isDesignMode } = useContext8(WeaverseContext);
+  const { isDesignMode } = useContext7(WeaverseContext);
   const { autoplay, delay, children, ...rest } = props;
   return /* @__PURE__ */ React19.createElement("div", {
     ...rest,
@@ -864,7 +903,7 @@ var Slider = forwardRef15((props, ref) => {
     autoplayInterval: delay * 1e3
   }, children));
 });
-var css14 = {
+var css15 = {
   "@desktop": {
     "& .wv-slider-btn": {
       borderRadius: "100%",
@@ -904,10 +943,10 @@ Slider.defaultProps = {
 var slider_default = Slider;
 
 // src/elements/slider/SliderContent.tsx
-import React20, { forwardRef as forwardRef16, useContext as useContext9 } from "react";
+import React20, { forwardRef as forwardRef16, useContext as useContext8 } from "react";
 var SliderContent = forwardRef16(
   (props, ref) => {
-    const { isDesignMode } = useContext9(WeaverseContext);
+    const { isDesignMode } = useContext8(WeaverseContext);
     const {
       mediaUrl,
       targetLink,
@@ -942,7 +981,7 @@ var SliderContent = forwardRef16(
     }, "Drag and drop an element here."));
   }
 );
-var css15 = {
+var css16 = {
   "@desktop": {
     width: "100%",
     maxWidth: "var(--grid-size)",
@@ -974,99 +1013,100 @@ var Elements = {
   Countdown: {
     Component: countdown_default,
     type: "countdown",
-    defaultCss: css2
+    defaultCss: css3
   },
   Button: {
     Component: button_default,
-    type: "button"
+    type: "button",
+    defaultCss: css
   },
   Container: {
     Component: container_default,
     type: "container",
-    defaultCss: css
+    defaultCss: css2
   },
   Image: {
     Component: image_default,
     type: "image",
-    defaultCss: css3
+    defaultCss: css4
   },
   Instagram: {
     Component: instagram_default,
     type: "instagram",
-    defaultCss: css8
+    defaultCss: css9
   },
   Layout: {
     Component: layout_default,
     type: "layout",
-    defaultCss: css4
+    defaultCss: css5
   },
   Map: {
     Component: map_default,
     type: "map",
-    defaultCss: css5
+    defaultCss: css6
   },
   Text: {
     Component: text_default,
     type: "text",
-    defaultCss: css6
+    defaultCss: css7
   },
   Video: {
     Component: video_default,
     type: "video",
-    defaultCss: css7
+    defaultCss: css8
   },
   Accordion: {
     Component: accordion_default,
     type: "accordion",
-    defaultCss: css9
+    defaultCss: css10
   },
   AccordionWrapper: {
     Component: AccordionWrapper_default,
     type: "accordion.wrapper",
-    defaultCss: css10
+    defaultCss: css11
   },
   AccordionContent: {
     Component: AccordionContent_default,
     type: "accordion.content",
-    defaultCss: css11
+    defaultCss: css12
   },
   Tab: {
     Component: tab_default,
     type: "tab",
-    defaultCss: css12
+    defaultCss: css13
   },
   TabContent: {
     Component: TabContent_default,
     type: "tab.content",
-    defaultCss: css13
+    defaultCss: css14
   },
   Slider: {
     Component: slider_default,
     type: "slider",
-    defaultCss: css14
+    defaultCss: css15
   },
   SliderContent: {
     Component: SliderContent_default,
     type: "slider.content",
-    defaultCss: css15
+    defaultCss: css16
   }
 };
 
 // src/renderer.tsx
-import { isBrowser } from "@weaverse/core";
-import React21, { useContext as useContext10, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+import { isBrowser as isBrowser2 } from "@weaverse/core";
+import React21, { useContext as useContext9, useEffect as useEffect4, useRef, useState as useState5 } from "react";
 
 // src/utils/index.ts
-function shortCssObject(css16) {
+function shortCssObject(css17) {
   return {
-    "@desktop": css16["@desktop"],
-    "@mobile": css16["@mobile"]
+    "@desktop": css17["@desktop"],
+    "@mobile": css17["@mobile"]
   };
 }
 var permanentClasses = {};
 function generateItemClass(instance, stitchesInstance) {
   var _a, _b;
-  let { css: css16, type, className: cls = "" } = instance.data;
+  let { css: css17, type, className: cls = "" } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = (_a = instance.Element) == null ? void 0 : _a.permanentCss;
@@ -1080,8 +1120,8 @@ function generateItemClass(instance, stitchesInstance) {
     }
   }
   className = permanentClass;
-  if (css16) {
-    let formattedCss = shortCssObject(css16);
+  if (css17) {
+    let formattedCss = shortCssObject(css17);
     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();
@@ -1117,13 +1157,13 @@ var WeaverseRoot = ({ context }) => {
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext10(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext9(WeaverseContext);
   let [data, setData] = useState5(instance.data);
-  let { id, type, childIds = [], css: css16, className, ...rest } = data;
+  let { id, type, childIds = [], css: css17, className, ...rest } = data;
   useEffect4(() => {
     let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
-    if (isBrowser && !instance.ref.current) {
+    if (isBrowser2 && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
@@ -1150,7 +1190,7 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext10(WeaverseContext);
+  let context = useContext9(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {

package/package.json

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