@weaverse/react 0.6.28 → 0.7.0

package/dist/index.js

@@ -1,38 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -46,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -67,19 +42,20 @@ var import_react16 = require("react");
 // src/elements/button.tsx
 var React = __toESM(require("react"));
 var Button = React.forwardRef((props, ref) => {
-  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  let { openInNewTab, target, value, ...rest } = props;
   if (target) {
-    return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React.createElement("a", {
       href: target,
       target: openInNewTab ? "_blank" : "_self",
-      rel: "noreferrer"
-    }, rest), {
+      rel: "noreferrer",
+      ...rest,
       ref
-    }), value);
+    }, value);
   }
-  return /* @__PURE__ */ React.createElement("button", __spreadValues({
-    ref
-  }, rest), value);
+  return /* @__PURE__ */ React.createElement("button", {
+    ref,
+    ...rest
+  }, value);
 });
 Button.defaultProps = {
   value: "Shop now",
@@ -101,12 +77,15 @@ var button_default = Button;
 
 // src/elements/container.tsx
 var import_react = __toESM(require("react"));
-var Container = (0, import_react.forwardRef)((props, ref) => {
-  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
-    ref
-  }, rest), children);
-});
+var Container = (0, import_react.forwardRef)(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      ref,
+      ...rest
+    }, children);
+  }
+);
 Container.defaultProps = {
   css: {
     "@desktop": {
@@ -146,63 +125,65 @@ function getTime(_seconds) {
   const ONE_DAY = 24 * ONE_HOUR;
   const days = Math.floor(_seconds / ONE_DAY);
   const hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
-  const minutes = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
-  const seconds = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3);
+  const minutes = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
+  );
+  const seconds = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
+  );
   return { days, hours, minutes, seconds };
 }
 
 // src/elements/countdown/index.tsx
-var Countdown = (0, import_react3.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react3.useContext)(WeaverseContext);
-  let _a = props, {
-    timerType,
-    startTime,
-    endTime,
-    periods,
-    redirectUrl,
-    openInNewTab,
-    showColon,
-    showLabel
-  } = _a, rest = __objRest(_a, [
-    "timerType",
-    "startTime",
-    "endTime",
-    "periods",
-    "redirectUrl",
-    "openInNewTab",
-    "showColon",
-    "showLabel"
-  ]);
-  const [remaining, setRemaining] = import_react3.default.useState(0);
-  if (typeof endTime !== "number") {
-    endTime = Number.parseInt(endTime);
+var Countdown = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const { isDesignMode } = (0, import_react3.useContext)(WeaverseContext);
+    let {
+      timerType,
+      startTime,
+      endTime,
+      periods,
+      redirectUrl,
+      openInNewTab,
+      showColon,
+      showLabel,
+      ...rest
+    } = props;
+    const [remaining, setRemaining] = import_react3.default.useState(0);
+    if (typeof endTime !== "number") {
+      endTime = Number.parseInt(endTime);
+    }
+    (0, import_react3.useEffect)(() => {
+      const flag = setInterval(() => {
+        const remainingTime = Math.max(
+          (timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(),
+          0
+        );
+        if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
+          window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+        }
+        setRemaining(remainingTime);
+      }, 1e3);
+      return () => {
+        clearInterval(flag);
+      };
+    }, [startTime, endTime, periods, timerType]);
+    const timer = getTime(remaining);
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      ref,
+      ...rest
+    }, times.map((time) => {
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, {
+        key: time
+      }, /* @__PURE__ */ import_react3.default.createElement(TimerBlock, {
+        label: showLabel ? time : "",
+        value: timer[time]
+      }), time !== "seconds" && /* @__PURE__ */ import_react3.default.createElement("span", {
+        className: `wv-countdown-number ${showColon ? "" : "hidden"}`
+      }, ":"));
+    }));
   }
-  (0, import_react3.useEffect)(() => {
-    const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
-      if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
-        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
-      }
-      setRemaining(remainingTime);
-    }, 1e3);
-    return () => {
-      clearInterval(flag);
-    };
-  }, [startTime, endTime, periods, timerType]);
-  const timer = getTime(remaining);
-  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadValues({
-    ref
-  }, rest), times.map((time) => {
-    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, {
-      key: time
-    }, /* @__PURE__ */ import_react3.default.createElement(TimerBlock, {
-      label: showLabel ? time : "",
-      value: timer[time]
-    }), time !== "seconds" && /* @__PURE__ */ import_react3.default.createElement("span", {
-      className: `wv-countdown-number ${showColon ? "" : "hidden"}`
-    }, ":"));
-  }));
-});
+);
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
@@ -240,45 +221,41 @@ var countdown_default = Countdown;
 
 // src/elements/image.tsx
 var import_react4 = __toESM(require("react"));
-var Image = import_react4.default.forwardRef((props, ref) => {
-  let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
-  let _a = props, {
-    src,
-    alt,
-    objectFit,
-    objectPosition,
-    onClickAction,
-    openLinkInNewTab
-  } = _a, rest = __objRest(_a, [
-    "src",
-    "alt",
-    "objectFit",
-    "objectPosition",
-    "onClickAction",
-    "openLinkInNewTab"
-  ]);
-  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);
-    }
-  };
-  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style,
-    onClick: handleClick
-  }), /* @__PURE__ */ import_react4.default.createElement("img", {
-    alt,
-    src
-  }));
-});
+var Image = import_react4.default.forwardRef(
+  (props, ref) => {
+    let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+    let {
+      src,
+      alt,
+      objectFit,
+      objectPosition,
+      onClickAction,
+      openLinkInNewTab,
+      ...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);
+      }
+    };
+    return /* @__PURE__ */ import_react4.default.createElement("div", {
+      ref,
+      ...rest,
+      style,
+      onClick: handleClick
+    }, /* @__PURE__ */ import_react4.default.createElement("img", {
+      alt,
+      src
+    }));
+  }
+);
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
   alt: "Image alt text",
@@ -302,7 +279,7 @@ var image_default = Image;
 // src/elements/layout.tsx
 var import_react5 = __toESM(require("react"));
 var Layout = (0, import_react5.forwardRef)((props, ref) => {
-  let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
+  let { children, rows, gap, rowSize, columns, gridSize, ...rest } = props;
   let style = {
     "--grid-size": gridSize + "px",
     "--rows": rows,
@@ -311,11 +288,11 @@ var Layout = (0, import_react5.forwardRef)((props, ref) => {
     "--row-size": rowSize + "px",
     "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
   };
-  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
+  return /* @__PURE__ */ import_react5.default.createElement("section", {
+    ref,
+    ...rest,
     style
-  }), /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -354,10 +331,11 @@ var layout_default = Layout;
 // src/elements/map.tsx
 var import_react6 = __toESM(require("react"));
 var Map = (0, import_react6.forwardRef)((props, ref) => {
-  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
-  return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react6.default.createElement("iframe", {
+  let { place, zoom, ...rest } = props;
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ import_react6.default.createElement("iframe", {
     loading: "lazy",
     scrolling: "no",
     width: "100%",
@@ -375,14 +353,16 @@ var map_default = Map;
 
 // src/elements/text.tsx
 var React8 = __toESM(require("react"));
-var Text = React8.forwardRef((props, ref) => {
-  let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    dangerouslySetInnerHTML: { __html: value }
-  }));
-});
+var Text = React8.forwardRef(
+  (props, ref) => {
+    let { children, value, ...rest } = props;
+    return /* @__PURE__ */ React8.createElement("div", {
+      ref,
+      ...rest,
+      dangerouslySetInnerHTML: { __html: value }
+    });
+  }
+);
 Text.defaultProps = {
   value: "The quick brown fox jumps over the lazy dog",
   css: {
@@ -403,10 +383,11 @@ var text_default = Text;
 var import_react7 = __toESM(require("react"));
 var Video = (0, import_react7.forwardRef)((props, ref) => {
   let { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
-  let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("video", {
+  let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ import_react7.default.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
@@ -443,81 +424,87 @@ var import_react9 = __toESM(require("react"));
 
 // src/elements/shared/Placeholder.tsx
 var import_react8 = __toESM(require("react"));
-var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
-  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
-  let style = {
-    position: "absolute",
-    height: "100%",
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151",
-    pointerEvents: "none",
-    zIndex: 1
-  };
-  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
-    style,
-    ref
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("div", {
-    style: { fontWeight: 600, marginBottom: "10px" }
-  }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
-});
+var Placeholder = (0, import_react8.forwardRef)(
+  (props, ref) => {
+    let { element, children, ...rest } = props;
+    let style = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#374151",
+      pointerEvents: "none",
+      zIndex: 1
+    };
+    return /* @__PURE__ */ import_react8.default.createElement("div", {
+      style,
+      ref,
+      ...rest
+    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
+  }
+);
 var Placeholder_default = Placeholder;
 
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = (0, import_react9.forwardRef)((props, ref) => {
-  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  let [media, setMedia] = (0, import_react9.useState)([]);
-  let [error, setError] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
-    if (token) {
-      let params = new URLSearchParams({
-        access_token: token,
-        fields: "id,media_type,caption,media_url,permalink"
-      });
-      fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
-        if (res.error) {
-          setError(res);
-        } else {
-          setError(null);
-          setMedia([...res.data]);
-        }
-      }).catch(setError);
+var Instagram = (0, import_react9.forwardRef)(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = (0, import_react9.useState)([]);
+    let [error, setError] = (0, import_react9.useState)(null);
+    (0, import_react9.useEffect)(() => {
+      if (token) {
+        let params = new URLSearchParams({
+          access_token: token,
+          fields: "id,media_type,caption,media_url,permalink"
+        });
+        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
+          if (res.error) {
+            setError(res);
+          } else {
+            setError(null);
+            setMedia([...res.data]);
+          }
+        }).catch(setError);
+      }
+    }, [token]);
+    if (!token || error) {
+      return /* @__PURE__ */ import_react9.default.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ import_react9.default.createElement(Placeholder_default, {
+        element: "Instagram"
+      }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
     }
-  }, [token]);
-  if (!token || error) {
-    return /* @__PURE__ */ import_react9.default.createElement("div", __spreadValues({
-      ref
-    }, rest), /* @__PURE__ */ import_react9.default.createElement(Placeholder_default, {
-      element: "Instagram"
-    }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
+    let style = {
+      "--wv-ig-images-per-row": imagesPerRow,
+      "--wv-ig-images-gap": gap + "px"
+    };
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: "wv-ig-media-container"
+    }, media.slice(0, numberOfImages).map((item) => {
+      let { id, permalink, caption, media_url } = item;
+      return /* @__PURE__ */ import_react9.default.createElement("a", {
+        key: id,
+        href: permalink,
+        target: "_blank",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ import_react9.default.createElement("img", {
+        alt: caption,
+        src: media_url
+      }));
+    })));
   }
-  let style = {
-    "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap + "px"
-  };
-  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ import_react9.default.createElement("div", {
-    className: "wv-ig-media-container"
-  }, media.slice(0, numberOfImages).map((item) => {
-    let { id, permalink, caption, media_url } = item;
-    return /* @__PURE__ */ import_react9.default.createElement("a", {
-      key: id,
-      href: permalink,
-      target: "_blank",
-      rel: "noreferrer"
-    }, /* @__PURE__ */ import_react9.default.createElement("img", {
-      alt: caption,
-      src: media_url
-    }));
-  })));
-});
+);
 Instagram.defaultProps = {
   token: "",
   username: "",
@@ -552,22 +539,25 @@ var AccordionContext = (0, import_react10.createContext)({
   setActive: () => {
   }
 });
-var Accordion = (0, import_react10.forwardRef)((props, ref) => {
-  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
-  const [active, setActive] = (0, import_react10.useState)(null);
-  const setOpenAccordion = (id) => {
-    if (id === active) {
-      setActive(null);
-    } else {
-      setActive(id);
-    }
-  };
-  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
-    value: { active, setActive: setOpenAccordion }
-  }, children));
-});
+var Accordion = (0, import_react10.forwardRef)(
+  (props, ref) => {
+    const { items, children, ...rest } = props;
+    const [active, setActive] = (0, import_react10.useState)(null);
+    const setOpenAccordion = (id) => {
+      if (id === active) {
+        setActive(null);
+      } else {
+        setActive(id);
+      }
+    };
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
+      ref,
+      ...rest
+    }, /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
+      value: { active, setActive: setOpenAccordion }
+    }, children));
+  }
+);
 Accordion.defaultProps = {
   items: [
     {
@@ -605,11 +595,12 @@ var accordion_default = Accordion;
 // src/elements/accordion/AccordionWrapper.tsx
 var import_react11 = __toESM(require("react"));
 var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
-  const _a = props, { ["data-wv-id"]: wvId, headerText, children } = _a, rest = __objRest(_a, ["data-wv-id", "headerText", "children"]);
+  const { ["data-wv-id"]: wvId, headerText, children, ...rest } = props;
   const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
-  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react11.default.createElement("div", {
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ import_react11.default.createElement("div", {
     onClick: () => setActive(wvId),
     className: `wv-accordion-header ${active === wvId ? "active" : ""}`
   }, headerText), children);
@@ -627,7 +618,7 @@ var AccordionWrapper_default = AccordionWrapper;
 // src/elements/accordion/AccordionContent.tsx
 var import_react12 = __toESM(require("react"));
 var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
-  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
+  const { rows, columns, gap, rowSize, children, ...rest } = props;
   let style = {
     "--rows": rows,
     "--columns": columns,
@@ -636,11 +627,11 @@ var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
     "--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", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
+  return /* @__PURE__ */ import_react12.default.createElement("div", {
+    ref,
+    ...rest,
     style
-  }), import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
+  }, import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
     element: "Accordion"
   }, "Item Content"));
 });
@@ -678,7 +669,7 @@ function TabHeader(props) {
   const instance = itemInstances.get(wvId);
   let [data, setData] = (0, import_react13.useState)(instance.data);
   (0, import_react13.useEffect)(() => {
-    let update = (data2) => setData(__spreadValues({}, data2));
+    let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
   }, []);
   const text = data.headerText;
@@ -707,10 +698,10 @@ var TabContext = (0, import_react14.createContext)({
   }
 });
 var Tab = (0, import_react14.forwardRef)((props, ref) => {
-  var _b, _c, _d;
+  var _a, _b, _c;
   const wvId = props["data-wv-id"];
-  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
-  const defaultActive = (_d = (_c = (_b = import_react14.default.Children.toArray(children)) == null ? void 0 : _b[0]) == null ? void 0 : _c.props) == null ? void 0 : _d.id;
+  const { items, 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 setOpenTab = (id) => {
     if (id === active) {
@@ -719,9 +710,10 @@ var Tab = (0, import_react14.forwardRef)((props, ref) => {
       setActive(id);
     }
   };
-  return /* @__PURE__ */ import_react14.default.createElement("div", __spreadValues({
-    ref
-  }, rest), /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
+  return /* @__PURE__ */ import_react14.default.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
     value: { active, setActive: setOpenTab }
   }, /* @__PURE__ */ import_react14.default.createElement(TabHeaderWrapper, {
     wvId
@@ -765,27 +757,29 @@ var tab_default = Tab;
 
 // src/elements/tab/TabContent.tsx
 var import_react15 = __toESM(require("react"));
-var TabContent = (0, import_react15.forwardRef)((props, ref) => {
-  const { active } = (0, import_react15.useContext)(TabContext);
-  const wvId = props["data-wv-id"];
-  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
-  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_react15.default.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, rest), {
-    style
-  }), import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
-    element: "Tab"
-  }, "Item Content"));
-});
+var TabContent = (0, import_react15.forwardRef)(
+  (props, ref) => {
+    const { active } = (0, import_react15.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_react15.default.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
+      element: "Tab"
+    }, "Item Content"));
+  }
+);
 TabContent.defaultProps = {
   rows: 2,
   columns: 12,
@@ -920,11 +914,11 @@ 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_react17.default.createElement("div", __spreadProps(__spreadValues({
-    className: `weaverse-content-root ${themeClass}`
-  }, eventHandlers), {
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react17.default.createElement("div", {
+    className: `weaverse-content-root ${themeClass}`,
+    ...eventHandlers,
     ref: rootRef
-  }), /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
+  }, /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
     value: context
   }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
     id: context.projectData.rootId
@@ -933,17 +927,17 @@ var WeaverseRoot = ({ context }) => {
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = (0, import_react17.useContext)(WeaverseContext);
   let [data, setData] = (0, import_react17.useState)(instance.data);
-  let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+  let { id, type, childIds = [], css, className, ...rest } = data;
   (0, import_react17.useEffect)(() => {
-    var _a2;
-    let update = (data2) => setData(__spreadValues({}, data2));
+    var _a;
+    let update = (data2) => setData({ ...data2 });
     instance.subscribe(update);
     if (import_core2.isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
-    (_a2 = instance.ref.current) == null ? void 0 : _a2.removeAttribute("css");
+    (_a = instance.ref.current) == null ? void 0 : _a.removeAttribute("css");
     return () => {
       instance.unsubscribe(update);
     };
@@ -954,12 +948,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react17.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react17.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
-      className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
+      className: generateItemClass(instance, stitchesInstance),
+      ...rest
+    }, childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));