@weaverse/react 0.7.65 → 0.7.67

package/dist/index.d.ts

@@ -22,6 +22,9 @@ declare let ArrowRight: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Image: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let ShoppingCart: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Storefront: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let Package: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let Backpack: (props: HTMLAttributes<SVGElement>) => JSX.Element;
+declare let Newspaper: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 declare let Eye: (props: HTMLAttributes<SVGElement>) => JSX.Element;
 
 declare const PhosphorIcons_CircleNotch: typeof CircleNotch;
@@ -33,6 +36,9 @@ declare const PhosphorIcons_ArrowRight: typeof ArrowRight;
 declare const PhosphorIcons_Image: typeof Image;
 declare const PhosphorIcons_ShoppingCart: typeof ShoppingCart;
 declare const PhosphorIcons_Storefront: typeof Storefront;
+declare const PhosphorIcons_Package: typeof Package;
+declare const PhosphorIcons_Backpack: typeof Backpack;
+declare const PhosphorIcons_Newspaper: typeof Newspaper;
 declare const PhosphorIcons_Eye: typeof Eye;
 declare namespace PhosphorIcons {
   export {
@@ -45,6 +51,9 @@ declare namespace PhosphorIcons {
     PhosphorIcons_Image as Image,
     PhosphorIcons_ShoppingCart as ShoppingCart,
     PhosphorIcons_Storefront as Storefront,
+    PhosphorIcons_Package as Package,
+    PhosphorIcons_Backpack as Backpack,
+    PhosphorIcons_Newspaper as Newspaper,
     PhosphorIcons_Eye as Eye,
   };
 }
@@ -65,6 +74,7 @@ interface SliderProps {
     className?: string;
     gap?: number;
     arrowOffset: number;
+    slidesPerView: number;
 }
 interface SliderArrowsProps {
     currentSlide: number;

package/dist/index.js

@@ -296,16 +296,19 @@ var Image = import_react5.default.forwardRef(
       "data-blink-src": src
     });
     if (clickAction === "openLink" && linkTo) {
-      let target = openLinkInNewTab ? "_blank" : "_self";
       content = /* @__PURE__ */ import_react5.default.createElement("a", {
         href: linkTo,
-        target
-      }, content);
+        target: openLinkInNewTab ? "_blank" : "_self",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ import_react5.default.createElement("img", {
+        alt,
+        "data-blink-src": src
+      }));
     }
     return /* @__PURE__ */ import_react5.default.createElement("div", {
       ref,
-      ...rest,
-      style
+      style,
+      ...rest
     }, content);
   }
 );
@@ -313,6 +316,8 @@ var css4 = {
   "@desktop": {
     display: "flex",
     overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
     img: {
       width: "100%",
       height: "100%",
@@ -322,8 +327,8 @@ var css4 = {
   }
 };
 Image.defaultProps = {
-  src: "https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",
-  alt: "Image alt text",
+  src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
+  alt: "Alternative information",
   objectFit: "cover",
   objectPosition: "center center",
   clickAction: "none",
@@ -675,10 +680,13 @@ var phosphor_exports = {};
 __export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
+  Backpack: () => Backpack,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
   Minus: () => Minus,
+  Newspaper: () => Newspaper,
+  Package: () => Package,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
   Storefront: () => Storefront,
@@ -901,34 +909,192 @@ var Storefront = (props) => {
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M96,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M160,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ import_react14.default.createElement("path", {
     d: "M224,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Package = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M224,177.3V78.7a8.1,8.1,0,0,0-4.1-7l-88-49.5a7.8,7.8,0,0,0-7.8,0l-88,49.5a8.1,8.1,0,0,0-4.1,7v98.6a8.1,8.1,0,0,0,4.1,7l88,49.5a7.8,7.8,0,0,0,7.8,0l88-49.5A8.1,8.1,0,0,0,224,177.3Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("polyline", {
+    points: "177 152.5 177 100.5 80 47",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("polyline", {
+    points: "222.9 74.6 128.9 128 33.1 74.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "128.9",
+    y1: "128",
+    x2: "128",
+    y2: "234.8",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }));
+};
+var Backpack = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M96,48h64a48,48,0,0,1,48,48V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V96A48,48,0,0,1,96,48Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "112",
+    y1: "88",
+    x2: "144",
+    y2: "88",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "80",
+    y1: "168",
+    x2: "176",
+    y2: "168",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "144",
+    y1: "168",
+    x2: "144",
+    y2: "184",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Newspaper = (props) => {
+  return /* @__PURE__ */ import_react14.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ import_react14.default.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "96",
+    y1: "112",
+    x2: "176",
+    y2: "112",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("line", {
+    x1: "96",
+    y1: "144",
+    x2: "176",
+    y2: "144",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M32,200a16,16,0,0,0,16-16V64a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V184a16,16,0,0,1-16,16Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ import_react14.default.createElement("path", {
+    d: "M32,200a16,16,0,0,1-16-16h0V88",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     strokeWidth: "8"
   }));
 };
@@ -1820,12 +1986,12 @@ var import_clsx6 = __toESM(require("clsx"));
 var import_react36 = require("keen-slider/react");
 var import_react37 = __toESM(require("react"));
 function Slider(props) {
-  let { children, className, gap, arrowOffset } = props;
+  let { children, className, gap, slidesPerView, arrowOffset } = props;
   let [currentSlide, setCurrentSlide] = (0, import_react37.useState)(0);
   let [created, setCreated] = (0, import_react37.useState)(false);
   let [ref, instanceRef] = (0, import_react36.useKeenSlider)(
     {
-      slides: { perView: 4, spacing: gap },
+      slides: { perView: slidesPerView, spacing: gap },
       breakpoints: {
         "(max-width: 1024px)": {
           slides: { perView: 3, spacing: gap }

package/dist/index.mjs

@@ -264,16 +264,19 @@ var Image = React5.forwardRef(
       "data-blink-src": src
     });
     if (clickAction === "openLink" && linkTo) {
-      let target = openLinkInNewTab ? "_blank" : "_self";
       content = /* @__PURE__ */ React5.createElement("a", {
         href: linkTo,
-        target
-      }, content);
+        target: openLinkInNewTab ? "_blank" : "_self",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ React5.createElement("img", {
+        alt,
+        "data-blink-src": src
+      }));
     }
     return /* @__PURE__ */ React5.createElement("div", {
       ref,
-      ...rest,
-      style
+      style,
+      ...rest
     }, content);
   }
 );
@@ -281,6 +284,8 @@ var css4 = {
   "@desktop": {
     display: "flex",
     overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
     img: {
       width: "100%",
       height: "100%",
@@ -290,8 +295,8 @@ var css4 = {
   }
 };
 Image.defaultProps = {
-  src: "https://ucarecdn.com/cf54e41e-36a0-4547-a140-a302e0387890/",
-  alt: "Image alt text",
+  src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
+  alt: "Alternative information",
   objectFit: "cover",
   objectPosition: "center center",
   clickAction: "none",
@@ -643,10 +648,13 @@ var phosphor_exports = {};
 __export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
+  Backpack: () => Backpack,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
   Minus: () => Minus,
+  Newspaper: () => Newspaper,
+  Package: () => Package,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
   Storefront: () => Storefront,
@@ -869,34 +877,192 @@ var Storefront = (props) => {
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ React15.createElement("path", {
     d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ React15.createElement("path", {
     d: "M96,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ React15.createElement("path", {
     d: "M160,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: "8"
+    strokeWidth: "12"
   }), /* @__PURE__ */ React15.createElement("path", {
     d: "M224,96v16a32,32,0,0,1-64,0V96",
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Package = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M224,177.3V78.7a8.1,8.1,0,0,0-4.1-7l-88-49.5a7.8,7.8,0,0,0-7.8,0l-88,49.5a8.1,8.1,0,0,0-4.1,7v98.6a8.1,8.1,0,0,0,4.1,7l88,49.5a7.8,7.8,0,0,0,7.8,0l88-49.5A8.1,8.1,0,0,0,224,177.3Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("polyline", {
+    points: "177 152.5 177 100.5 80 47",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("polyline", {
+    points: "222.9 74.6 128.9 128 33.1 74.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "128.9",
+    y1: "128",
+    x2: "128",
+    y2: "234.8",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }));
+};
+var Backpack = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,48h64a48,48,0,0,1,48,48V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V96A48,48,0,0,1,96,48Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "112",
+    y1: "88",
+    x2: "144",
+    y2: "88",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "80",
+    y1: "168",
+    x2: "176",
+    y2: "168",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "144",
+    y1: "168",
+    x2: "144",
+    y2: "184",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "12"
+  }));
+};
+var Newspaper = (props) => {
+  return /* @__PURE__ */ React15.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "192",
+    height: "192",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props
+  }, /* @__PURE__ */ React15.createElement("rect", {
+    width: "256",
+    height: "256",
+    fill: "none"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "96",
+    y1: "112",
+    x2: "176",
+    y2: "112",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("line", {
+    x1: "96",
+    y1: "144",
+    x2: "176",
+    y2: "144",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M32,200a16,16,0,0,0,16-16V64a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V184a16,16,0,0,1-16,16Z",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8"
+  }), /* @__PURE__ */ React15.createElement("path", {
+    d: "M32,200a16,16,0,0,1-16-16h0V88",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
     strokeWidth: "8"
   }));
 };
@@ -1788,12 +1954,12 @@ import clsx6 from "clsx";
 import { useKeenSlider as useKeenSlider2 } from "keen-slider/react";
 import React28, { useState as useState2 } from "react";
 function Slider(props) {
-  let { children, className, gap, arrowOffset } = props;
+  let { children, className, gap, slidesPerView, arrowOffset } = props;
   let [currentSlide, setCurrentSlide] = useState2(0);
   let [created, setCreated] = useState2(false);
   let [ref, instanceRef] = useKeenSlider2(
     {
-      slides: { perView: 4, spacing: gap },
+      slides: { perView: slidesPerView, spacing: gap },
       breakpoints: {
         "(max-width: 1024px)": {
           slides: { perView: 3, spacing: gap }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.65",
+  "version": "0.7.67",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.2",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "0.7.65",
+    "@weaverse/core": "0.7.67",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }