@weaverse/react 0.7.31 → 0.7.32

package/dist/index.d.ts

@@ -90,8 +90,13 @@ interface BackgroundDataProps {
     backgroundImage?: string;
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 }
-interface LayoutElementProps extends BackgroundDataProps, GridContentElementProps {
+interface LayoutElementProps extends BackgroundDataProps, WeaverseElementProps {
+    contentSize: number;
     gridSize: number;
+    rows: number;
+    columns: number;
+    gap: number;
+    rowSize: number;
 }
 interface LayoutBackgroundProps {
     imgUrl?: string;

package/dist/index.js

@@ -64,20 +64,26 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Shop now",
+  text: "Button",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "72px",
+    borderRadius: "8px",
     border: "none",
     backgroundColor: "#393e46",
     color: "#fff",
-    fontSize: "13px",
+    fontSize: "14px",
+    fontWeight: "medium",
     padding: "10px 20px",
-    textDecoration: "none"
+    height: "42px",
+    minWidth: "120px",
+    textDecoration: "none",
+    ":hover": {
+      backgroundColor: "#222831"
+    }
   }
 };
 var Button_default = Button;
@@ -340,6 +346,7 @@ var Image = import_react5.default.forwardRef(
 );
 var css4 = {
   "@desktop": {
+    display: "flex",
     overflow: "hidden",
     img: {
       width: "100%",
@@ -372,6 +379,7 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     gap,
     rowSize,
     columns,
+    contentSize,
     gridSize,
     backgroundColor,
     backgroundImage,
@@ -379,6 +387,8 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     ...rest
   } = props;
   let style = {
+    "--layout-content-width": "100vw",
+    "--content-size": contentSize + "px",
     "--grid-size": gridSize + "px",
     "--rows": rows,
     "--columns": columns,
@@ -404,42 +414,44 @@ var LayoutBackground = (props) => {
     ["--bg-color"]: bgColor,
     ["--object-fit"]: objectFit
   };
-  return imgUrl || bgColor ? /* @__PURE__ */ import_react6.default.createElement("div", {
-    "data-wv-bg": true,
-    style
-  }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
-    width: "100%",
-    height: "100%",
-    "data-blink-src": imgUrl,
-    alt: "wv-layout-background"
-  })) : null;
+  if (imgUrl || bgColor) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
+      style,
+      className: "wv-layout-background"
+    }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": imgUrl,
+      alt: "Section background"
+    }));
+  }
+  return null;
 };
 var css5 = {
   "@desktop": {
-    paddingTop: "16px",
-    paddingBottom: "16px",
-    paddingLeft: "var(--gap)",
-    paddingRight: "var(--gap)",
     "> [data-layout-content]": {
+      paddingTop: "var(--gap)",
+      paddingBottom: "var(--gap)",
       margin: "0 auto",
-      display: "grid !important",
+      display: "grid",
       gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
+      gridAutoRows: "var(--row-size)",
       gap: "var(--gap)",
-      maxWidth: "var(--grid-size)"
+      maxWidth: "var(--layout-content-width)"
     }
   },
   "@mobile": {
     padding: "0 16px",
     "> [data-layout-content]": {
-      display: "flex !important",
+      display: "flex",
       flexDirection: "column"
     }
   }
 };
 var permanentCss = {
   "@desktop": {
-    "[data-wv-bg]": {
+    ".wv-layout-background": {
       position: "absolute",
       inset: 0,
       backgroundColor: "var(--bg-color)"
@@ -450,8 +462,9 @@ var permanentCss = {
   }
 };
 Layout.defaultProps = {
+  contentSize: 1600,
   gridSize: 1224,
-  rows: 12,
+  rows: 16,
   columns: 12,
   gap: 16,
   rowSize: 48

package/dist/index.mjs

@@ -33,20 +33,26 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Shop now",
+  text: "Button",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "72px",
+    borderRadius: "8px",
     border: "none",
     backgroundColor: "#393e46",
     color: "#fff",
-    fontSize: "13px",
+    fontSize: "14px",
+    fontWeight: "medium",
     padding: "10px 20px",
-    textDecoration: "none"
+    height: "42px",
+    minWidth: "120px",
+    textDecoration: "none",
+    ":hover": {
+      backgroundColor: "#222831"
+    }
   }
 };
 var Button_default = Button;
@@ -309,6 +315,7 @@ var Image = React5.forwardRef(
 );
 var css4 = {
   "@desktop": {
+    display: "flex",
     overflow: "hidden",
     img: {
       width: "100%",
@@ -341,6 +348,7 @@ var Layout = forwardRef4((props, ref) => {
     gap,
     rowSize,
     columns,
+    contentSize,
     gridSize,
     backgroundColor,
     backgroundImage,
@@ -348,6 +356,8 @@ var Layout = forwardRef4((props, ref) => {
     ...rest
   } = props;
   let style = {
+    "--layout-content-width": "100vw",
+    "--content-size": contentSize + "px",
     "--grid-size": gridSize + "px",
     "--rows": rows,
     "--columns": columns,
@@ -373,42 +383,44 @@ var LayoutBackground = (props) => {
     ["--bg-color"]: bgColor,
     ["--object-fit"]: objectFit
   };
-  return imgUrl || bgColor ? /* @__PURE__ */ React6.createElement("div", {
-    "data-wv-bg": true,
-    style
-  }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
-    width: "100%",
-    height: "100%",
-    "data-blink-src": imgUrl,
-    alt: "wv-layout-background"
-  })) : null;
+  if (imgUrl || bgColor) {
+    return /* @__PURE__ */ React6.createElement("div", {
+      style,
+      className: "wv-layout-background"
+    }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
+      width: "100%",
+      height: "100%",
+      "data-blink-src": imgUrl,
+      alt: "Section background"
+    }));
+  }
+  return null;
 };
 var css5 = {
   "@desktop": {
-    paddingTop: "16px",
-    paddingBottom: "16px",
-    paddingLeft: "var(--gap)",
-    paddingRight: "var(--gap)",
     "> [data-layout-content]": {
+      paddingTop: "var(--gap)",
+      paddingBottom: "var(--gap)",
       margin: "0 auto",
-      display: "grid !important",
+      display: "grid",
       gridTemplateRows: "repeat(var(--rows), var(--row-size))",
-      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
+      gridAutoRows: "var(--row-size)",
       gap: "var(--gap)",
-      maxWidth: "var(--grid-size)"
+      maxWidth: "var(--layout-content-width)"
     }
   },
   "@mobile": {
     padding: "0 16px",
     "> [data-layout-content]": {
-      display: "flex !important",
+      display: "flex",
       flexDirection: "column"
     }
   }
 };
 var permanentCss = {
   "@desktop": {
-    "[data-wv-bg]": {
+    ".wv-layout-background": {
       position: "absolute",
       inset: 0,
       backgroundColor: "var(--bg-color)"
@@ -419,8 +431,9 @@ var permanentCss = {
   }
 };
 Layout.defaultProps = {
+  contentSize: 1600,
   gridSize: 1224,
-  rows: 12,
+  rows: 16,
   columns: 12,
   gap: 16,
   rowSize: 48

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.31",
+  "version": "0.7.32",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "0.7.31",
+    "@weaverse/core": "0.7.32",
     "nuka-carousel": "^5.4.1"
   }
 }