@weaverse/react 0.7.30 → 0.7.32

package/dist/index.d.ts

@@ -49,10 +49,10 @@ interface WeaverseElementProps extends ReactElement {
     ['data-wv-id']: string;
     children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
 }
-declare type WeaverseRootPropsType = {
+type WeaverseRootPropsType = {
     context: Weaverse;
 };
-declare type ItemComponentProps = {
+type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
 interface PlaceholderProps {
@@ -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;
@@ -114,15 +119,15 @@ interface VideoCommonProps {
     autoPlay: boolean;
     muted: boolean;
 }
-declare type VideoElementProps = VideoCommonProps & WeaverseElementProps;
+type VideoElementProps = VideoCommonProps & WeaverseElementProps;
 interface YoutubeElementProps extends VideoCommonProps {
     youtubeId: string;
 }
 interface VimeoElementProps extends VideoCommonProps {
     vimeoId: string;
 }
-declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
-declare type CountdownTimerType = 'fixed-time' | 'evergreen';
+type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
+type CountdownTimerType = 'fixed-time' | 'evergreen';
 interface CountdownElementProps extends WeaverseElementProps {
     timerType: CountdownTimerType;
     startTime: number;
@@ -133,7 +138,7 @@ interface CountdownElementProps extends WeaverseElementProps {
     showLabel: boolean;
     showColon: boolean;
 }
-declare type TimerBlockProps = {
+type TimerBlockProps = {
     label: string;
     value: string | number;
 };
@@ -144,7 +149,7 @@ interface InstagramElementProps extends WeaverseElementProps {
     imagesPerRow: number;
     gap: number;
 }
-declare type InstagramMedia = {
+type InstagramMedia = {
     id: string;
     media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
     media_url: 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: "#0F71FF",
+    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,8 @@ var Image = import_react5.default.forwardRef(
 );
 var css4 = {
   "@desktop": {
+    display: "flex",
+    overflow: "hidden",
     img: {
       width: "100%",
       height: "100%",
@@ -371,6 +379,7 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     gap,
     rowSize,
     columns,
+    contentSize,
     gridSize,
     backgroundColor,
     backgroundImage,
@@ -378,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,
@@ -385,7 +396,7 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     "--row-size": rowSize + "px",
     "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
   };
-  return /* @__PURE__ */ import_react6.default.createElement("section", {
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
     ref,
     ...rest,
     style
@@ -403,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)"
@@ -449,8 +462,9 @@ var permanentCss = {
   }
 };
 Layout.defaultProps = {
+  contentSize: 1600,
   gridSize: 1224,
-  rows: 12,
+  rows: 16,
   columns: 12,
   gap: 16,
   rowSize: 48
@@ -466,7 +480,6 @@ var Map = (0, import_react7.forwardRef)((props, ref) => {
     ...rest
   }, /* @__PURE__ */ import_react7.default.createElement("iframe", {
     loading: "lazy",
-    scrolling: "no",
     width: "100%",
     height: "100%",
     title: "map",
@@ -474,7 +487,18 @@ var Map = (0, import_react7.forwardRef)((props, ref) => {
     style: { pointerEvents: "none" }
   }));
 });
-var css6 = {};
+var css6 = {
+  "@desktop": {
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
+    }
+  }
+};
 Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
@@ -607,6 +631,14 @@ var css8 = {
       height: "100%",
       width: "100%",
       aspectRatio: "16 / 9"
+    },
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
     }
   }
 };

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: "#0F71FF",
+    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,8 @@ var Image = React5.forwardRef(
 );
 var css4 = {
   "@desktop": {
+    display: "flex",
+    overflow: "hidden",
     img: {
       width: "100%",
       height: "100%",
@@ -340,6 +348,7 @@ var Layout = forwardRef4((props, ref) => {
     gap,
     rowSize,
     columns,
+    contentSize,
     gridSize,
     backgroundColor,
     backgroundImage,
@@ -347,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,
@@ -354,7 +365,7 @@ var Layout = forwardRef4((props, ref) => {
     "--row-size": rowSize + "px",
     "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
   };
-  return /* @__PURE__ */ React6.createElement("section", {
+  return /* @__PURE__ */ React6.createElement("div", {
     ref,
     ...rest,
     style
@@ -372,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)"
@@ -418,8 +431,9 @@ var permanentCss = {
   }
 };
 Layout.defaultProps = {
+  contentSize: 1600,
   gridSize: 1224,
-  rows: 12,
+  rows: 16,
   columns: 12,
   gap: 16,
   rowSize: 48
@@ -435,7 +449,6 @@ var Map = forwardRef5((props, ref) => {
     ...rest
   }, /* @__PURE__ */ React7.createElement("iframe", {
     loading: "lazy",
-    scrolling: "no",
     width: "100%",
     height: "100%",
     title: "map",
@@ -443,7 +456,18 @@ var Map = forwardRef5((props, ref) => {
     style: { pointerEvents: "none" }
   }));
 });
-var css6 = {};
+var css6 = {
+  "@desktop": {
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
+    }
+  }
+};
 Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
@@ -576,6 +600,14 @@ var css8 = {
       height: "100%",
       width: "100%",
       aspectRatio: "16 / 9"
+    },
+    iframe: {
+      border: "none"
+    }
+  },
+  "@mobile": {
+    iframe: {
+      border: "none"
     }
   }
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.30",
+  "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.30",
-    "nuka-carousel": "^5.4.0"
+    "@weaverse/core": "0.7.32",
+    "nuka-carousel": "^5.4.1"
   }
 }