@weaverse/react 0.7.64 → 0.7.66

package/dist/index.js

@@ -43,7 +43,7 @@ __reExport(src_exports, require("@weaverse/core"), module.exports);
 var import_core = require("@weaverse/core");
 var import_react30 = require("react");
 
-// src/elements/Button.tsx
+// src/elements/button.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
 var Button = React.forwardRef((props, ref) => {
@@ -88,9 +88,9 @@ var css = {
     }
   }
 };
-var Button_default = Button;
+var button_default = Button;
 
-// src/elements/Container.tsx
+// src/elements/container.tsx
 var import_react2 = __toESM(require("react"));
 var Container = (0, import_react2.forwardRef)(
   (props, ref) => {
@@ -111,9 +111,9 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var Container_default = Container;
+var container_default = Container;
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var import_react4 = __toESM(require("react"));
 
 // src/constant/index.ts
@@ -146,7 +146,7 @@ function getVimeoId(url) {
   return match ? match[1] : null;
 }
 
-// src/elements/Countdown/TimerBlock.tsx
+// src/elements/countdown/timer-block.tsx
 var import_react3 = __toESM(require("react"));
 function TimerBlock({ value, label }) {
   return /* @__PURE__ */ import_react3.default.createElement("div", {
@@ -158,7 +158,7 @@ function TimerBlock({ value, label }) {
   }, label));
 }
 
-// src/elements/Countdown/index.tsx
+// src/elements/countdown/index.tsx
 var Countdown = (0, import_react4.forwardRef)(
   (props, ref) => {
     const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
@@ -271,9 +271,9 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var Countdown_default = Countdown;
+var countdown_default = Countdown;
 
-// src/elements/Image.tsx
+// src/elements/image.tsx
 var import_react5 = __toESM(require("react"));
 var Image = import_react5.default.forwardRef(
   (props, ref) => {
@@ -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,20 +327,20 @@ 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",
   openLinkInNewTab: false,
   linkTo: ""
 };
-var Image_default = Image;
+var image_default = Image;
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var import_react8 = __toESM(require("react"));
 
-// src/elements/Layout/Background.tsx
+// src/elements/layout/Background.tsx
 var import_react6 = __toESM(require("react"));
 function Background(props) {
   let { bgColor, imgUrl, objectFit, objectPosition } = props;
@@ -358,7 +363,7 @@ function Background(props) {
   return null;
 }
 
-// src/elements/Layout/Overlay.tsx
+// src/elements/layout/Overlay.tsx
 var import_react7 = __toESM(require("react"));
 function Overlay(props) {
   let { enableOverlay, overlayOpacity } = props;
@@ -374,7 +379,7 @@ function Overlay(props) {
   return null;
 }
 
-// src/elements/Layout/index.tsx
+// src/elements/layout/index.tsx
 var Layout = (0, import_react8.forwardRef)((props, ref) => {
   let {
     children,
@@ -469,9 +474,9 @@ Layout.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Layout_default = Layout;
+var layout_default = Layout;
 
-// src/elements/Map.tsx
+// src/elements/map.tsx
 var import_react9 = __toESM(require("react"));
 var Map = (0, import_react9.forwardRef)((props, ref) => {
   let { place, zoom, ...rest } = props;
@@ -503,9 +508,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var Map_default = Map;
+var map_default = Map;
 
-// src/elements/Text.tsx
+// src/elements/text.tsx
 var React10 = __toESM(require("react"));
 var Text = React10.forwardRef(
   (props, ref) => {
@@ -534,12 +539,12 @@ var css7 = {
 Text.defaultProps = {
   value: "<p>The quick brown fox jumps over the lazy dog</p>"
 };
-var Text_default = Text;
+var text_default = Text;
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var import_react13 = __toESM(require("react"));
 
-// src/elements/Video/HTMLVideo.tsx
+// src/elements/video/html-video.tsx
 var import_react10 = __toESM(require("react"));
 function HTMLVideo(props) {
   let { src, type, controls, autoPlay, loop, muted } = props;
@@ -559,7 +564,7 @@ function HTMLVideo(props) {
   }), "Your browser does not support the video tag.");
 }
 
-// src/elements/Video/Vimeo.tsx
+// src/elements/video/vimeo.tsx
 var import_react11 = __toESM(require("react"));
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
@@ -573,7 +578,7 @@ function Vimeo(props) {
   });
 }
 
-// src/elements/Video/Youtube.tsx
+// src/elements/video/youtube.tsx
 var import_react12 = __toESM(require("react"));
 function Youtube(props) {
   let { youtubeId, controls, autoPlay, loop, muted } = props;
@@ -589,12 +594,11 @@ function Youtube(props) {
     src: youtubeSrc,
     width: "100%",
     height: "100%",
-    allowFullScreen: true,
     allow
   });
 }
 
-// src/elements/Video/index.tsx
+// src/elements/video/index.tsx
 var Video = (0, import_react13.forwardRef)((props, ref) => {
   let { isDesignMode } = (0, import_react13.useContext)(WeaverseContext);
   let {
@@ -656,32 +660,35 @@ Video.defaultProps = {
   autoPlay: true,
   muted: true
 };
-var Video_default = Video;
+var video_default = Video;
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var import_react22 = require("@stitches/react");
 var import_clsx5 = __toESM(require("clsx"));
 var import_react23 = __toESM(require("react"));
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 var import_react16 = require("@stitches/react");
 var import_clsx2 = __toESM(require("clsx"));
 var import_react17 = __toESM(require("react"));
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 var import_react15 = __toESM(require("react"));
 
-// src/components/Icons/Phosphor.tsx
-var Phosphor_exports = {};
-__export(Phosphor_exports, {
+// src/components/icons/phosphor.tsx
+var phosphor_exports = {};
+__export(phosphor_exports, {
   ArrowLeft: () => ArrowLeft,
   ArrowRight: () => ArrowRight,
+  Backpack: () => Backpack,
   CircleNotch: () => CircleNotch,
   Eye: () => Eye,
   Image: () => Image2,
   Minus: () => Minus,
+  Package: () => Package,
   Plus: () => Plus,
   ShoppingCart: () => ShoppingCart,
+  Storefront: () => Storefront,
   X: () => X
 });
 var import_react14 = __toESM(require("react"));
@@ -883,6 +890,165 @@ var ShoppingCart = (props) => {
     strokeWidth: "16"
   }));
 };
+var Storefront = (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: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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: "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: "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: "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 Eye = (props) => {
   return /* @__PURE__ */ import_react14.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -914,10 +1080,10 @@ var Eye = (props) => {
   }));
 };
 
-// src/components/Icons/index.tsx
+// src/components/icons/index.tsx
 var import_clsx = __toESM(require("clsx"));
 function Icon({ name, className, ...props }) {
-  let WeaverseIcon = Phosphor_exports[name];
+  let WeaverseIcon = phosphor_exports[name];
   let cls = (0, import_clsx.default)("wv-icon", className);
   return /* @__PURE__ */ import_react15.default.createElement(WeaverseIcon, {
     className: cls,
@@ -925,7 +1091,7 @@ function Icon({ name, className, ...props }) {
   });
 }
 
-// src/components/Slider/Arrows.tsx
+// src/components/slider/arrows.tsx
 function Arrows(props) {
   let { currentSlide, instanceRef, className, offset } = props;
   let isFirst = currentSlide === 0;
@@ -1000,7 +1166,7 @@ var StyledArrows = (0, import_react16.styled)("div", {
   }
 });
 
-// src/components/Slider/Dots.tsx
+// src/components/slider/dots.tsx
 var import_react18 = require("@stitches/react");
 var import_clsx3 = __toESM(require("clsx"));
 var import_react19 = __toESM(require("react"));
@@ -1071,11 +1237,11 @@ var StyledDots = (0, import_react18.styled)("div", {
   }
 });
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 var import_react20 = require("keen-slider/react");
 var import_react21 = __toESM(require("react"));
 
-// src/components/Slider/AutoplayPlugin.ts
+// src/components/slider/autoplay-plugin.ts
 function AutoplayPlugin(changeSlidesEvery) {
   return (slider) => {
     let timeout;
@@ -1108,7 +1274,7 @@ function AutoplayPlugin(changeSlidesEvery) {
   };
 }
 
-// src/components/Slider/ResizePlugin.ts
+// src/components/slider/resize-plugin.ts
 var ResizePlugin = (slider) => {
   let observer = new ResizeObserver(() => slider.update());
   slider.on("created", () => {
@@ -1167,7 +1333,7 @@ function loadCSS(attrs) {
   });
 }
 
-// src/elements/Slideshow/useSlideshowConfigs.ts
+// src/elements/slideshow/use-slideshow-configs.ts
 function useSlideshowConfigs(props) {
   let {
     animation,
@@ -1240,7 +1406,7 @@ function useSlideshowConfigs(props) {
   };
 }
 
-// src/elements/Slideshow/index.tsx
+// src/elements/slideshow/index.tsx
 var Slideshow = (0, import_react23.forwardRef)((props, ref) => {
   let {
     animation,
@@ -1321,12 +1487,12 @@ Slideshow.defaultProps = {
   autoRotate: false,
   changeSlidesEvery: 5
 };
-var Slideshow_default = Slideshow;
+var slideshow_default = Slideshow;
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var import_react29 = __toESM(require("react"));
 
-// src/components/Background.tsx
+// src/components/background.tsx
 var import_react24 = require("@stitches/react");
 var import_react25 = __toESM(require("react"));
 function Background2(props) {
@@ -1366,7 +1532,7 @@ var StyledBackground = (0, import_react24.styled)("div", {
   }
 });
 
-// src/components/Overlay.tsx
+// src/components/overlay.tsx
 var import_react26 = require("@stitches/react");
 var import_react27 = __toESM(require("react"));
 function Overlay2(props) {
@@ -1386,7 +1552,7 @@ var StyledOverlay = (0, import_react26.styled)("div", {
   backgroundColor: "rgba(0, 0, 0, var(--overlay-opacity, .3))"
 });
 
-// src/components/Placeholder.tsx
+// src/components/placeholder.tsx
 var import_react28 = __toESM(require("react"));
 var Placeholder = (0, import_react28.forwardRef)(
   (props, ref) => {
@@ -1401,9 +1567,9 @@ var Placeholder = (0, import_react28.forwardRef)(
     }, element), /* @__PURE__ */ import_react28.default.createElement("div", null, children));
   }
 );
-var Placeholder_default = Placeholder;
+var placeholder_default = Placeholder;
 
-// src/elements/Slideshow/position.ts
+// src/elements/slideshow/position.ts
 var slidePositionMap = {
   "top left": {
     justifyContent: "flex-start",
@@ -1443,7 +1609,7 @@ var slidePositionMap = {
   }
 };
 
-// src/elements/Slideshow/Slide.tsx
+// src/elements/slideshow/slide.tsx
 var Slide = (0, import_react29.forwardRef)((props, ref) => {
   let {
     contentPosition,
@@ -1472,7 +1638,7 @@ var Slide = (0, import_react29.forwardRef)((props, ref) => {
     ref,
     style: slidePositionMap[contentPosition],
     ...rest
-  }, children?.length ? children : /* @__PURE__ */ import_react29.default.createElement(Placeholder_default, {
+  }, children?.length ? children : /* @__PURE__ */ import_react29.default.createElement(placeholder_default, {
     element: "Slide",
     className: "wv-slide-placeholder"
   }, "Drag and drop elements here")));
@@ -1500,57 +1666,57 @@ Slide.defaultProps = {
   enableOverlay: false,
   overlayOpacity: 30
 };
-var Slide_default = Slide;
+var slide_default = Slide;
 
 // src/elements/index.ts
 var Elements = {
   Countdown: {
-    Component: Countdown_default,
+    Component: countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: Button_default,
+    Component: button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: Container_default,
+    Component: container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: Image_default,
+    Component: image_default,
     type: "image",
     defaultCss: css4
   },
   Layout: {
-    Component: Layout_default,
+    Component: layout_default,
     type: "layout",
     defaultCss: css5
   },
   Map: {
-    Component: Map_default,
+    Component: map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: Text_default,
+    Component: text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: Video_default,
+    Component: video_default,
     type: "video",
     defaultCss: css8
   },
   Slideshow: {
-    Component: Slideshow_default,
+    Component: slideshow_default,
     type: "slideshow",
     defaultCss: css9
   },
   Slide: {
-    Component: Slide_default,
+    Component: slide_default,
     type: "slide",
     defaultCss: css10
   }
@@ -1568,9 +1734,9 @@ var WeaverseContext = (0, import_react30.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/components/Modal/index.tsx
-var Modal_exports = {};
-__export(Modal_exports, {
+// src/components/modal/index.tsx
+var modal_exports = {};
+__export(modal_exports, {
   Modal: () => Modal,
   ModalClose: () => ModalClose,
   ModalContent: () => ModalContent,
@@ -1580,7 +1746,7 @@ __export(Modal_exports, {
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 var import_react33 = __toESM(require("react"));
 
-// src/components/Modal/styled.ts
+// src/components/modal/styled.ts
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_react31 = require("@stitches/react");
 var overlayShow = (0, import_react31.keyframes)({
@@ -1663,7 +1829,7 @@ var StyledCloseIcon = (0, import_react31.styled)("button", {
   }
 });
 
-// src/components/Modal/useOpenChangeEffect.ts
+// src/components/modal/use-open-change-effect.ts
 var import_react32 = require("react");
 function useOpenChangeEffect(props) {
   let { open, defaultOpen, onOpenChange } = props;
@@ -1689,7 +1855,7 @@ function useOpenChangeEffect(props) {
   return handleOpenChange;
 }
 
-// src/components/Modal/index.tsx
+// src/components/modal/index.tsx
 var Modal = (props) => {
   let { children, open, defaultOpen, onOpenChange, ...rest } = props;
   let handleOpenChange = useOpenChangeEffect(props);
@@ -1747,7 +1913,7 @@ var ModalClose = (0, import_react33.forwardRef)(
   }
 );
 
-// src/components/Spinner.tsx
+// src/components/spinner.tsx
 var import_react34 = __toESM(require("react"));
 function Spinner() {
   return /* @__PURE__ */ import_react34.default.createElement("span", {
@@ -1758,7 +1924,7 @@ function Spinner() {
   }));
 }
 
-// src/components/Tooltip.tsx
+// src/components/tooltip.tsx
 var import_react35 = __toESM(require("react"));
 function Tooltip({ children }) {
   return /* @__PURE__ */ import_react35.default.createElement("span", {
@@ -1766,17 +1932,17 @@ function Tooltip({ children }) {
   }, children);
 }
 
-// src/components/Slider/index.tsx
+// src/components/slider/index.tsx
 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 }
@@ -1817,9 +1983,9 @@ function Slider(props) {
 var Components = {
   Background: Background2,
   Icon,
-  ModalComponents: Modal_exports,
+  ModalComponents: modal_exports,
   Overlay: Overlay2,
-  Placeholder: Placeholder_default,
+  Placeholder: placeholder_default,
   Spinner,
   Slider,
   Tooltip