@cntrl-site/components 0.1.0-alpha.27 → 0.1.0-alpha.28

package/dist/index.js

@@ -1639,17 +1639,21 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
-  const [imageDimensions, setImageDimensions] = React.useState({});
   const lightboxRef = React.useRef(null);
   const prevSliderTypeRef = React.useRef(null);
   const imageRef = React.useRef(null);
-  const imgWrapperRef = React.useRef(null);
   const isClosingRef = React.useRef(false);
   const contentRef = React.useRef(null);
   const animationEndHandlerRef = React.useRef(null);
+  const appearAnimationEndHandlerRef = React.useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const handleClose = React.useCallback(() => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    if (isMobile && !isEditor && colorAlpha > 0.9) {
+      document.body.style.backgroundColor = "";
+    }
     setIsClosing(true);
     isClosingRef.current = true;
     const handleAnimationEnd = (e) => {
@@ -1666,7 +1670,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       animationEndHandlerRef.current = handleAnimationEnd;
       contentRef.current.addEventListener("animationend", handleAnimationEnd);
     }
-  }, [onClose, appearDurationMs]);
+  }, [onClose, appearDurationMs, area.color, isEditor]);
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
     if (e.target === e.currentTarget) {
@@ -1674,8 +1678,52 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
   };
   const handleImageWrapperClick = (e) => {
+    var _a, _b;
     if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
+    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+    if (!rect) {
+      if (e.target === e.currentTarget) {
+        handleClose();
+      }
+      return;
+    }
+    let clientX;
+    let clientY;
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      clientX = e.changedTouches[0].clientX;
+      clientY = e.changedTouches[0].clientY;
+    } else if ("clientX" in e) {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    } else {
+      return;
+    }
+    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    if (inside) {
+      if (triggers.type === "click" && triggers.switch === "image") {
+        if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+          handleClose();
+        } else {
+          (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+        }
+      } else if (triggers.type === "click" && triggers.switch === "50/50") {
+        const img2 = imageRef.current;
+        if (img2) {
+          const imgRect = img2.getBoundingClientRect();
+          const clickX = clientX - imgRect.left;
+          const clickY = clientY - imgRect.top;
+          const imgWidth = imgRect.width;
+          const imgHeight = imgRect.height;
+          let dir;
+          if (slider.direction === "horiz") {
+            dir = clickX < imgWidth / 2 ? "-1" : "+1";
+          } else {
+            dir = clickY < imgHeight / 2 ? "-1" : "+1";
+          }
+          (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+        }
+      }
+    } else {
       handleClose();
     }
   };
@@ -1761,73 +1809,38 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
     prevSliderTypeRef.current = slider.type;
   }, [slider.type]);
-  React.useEffect(() => {
-    if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
-      setImageDimensions({});
-      return;
-    }
-    const img2 = imageRef.current;
-    const wrapper2 = imgWrapperRef.current;
-    const currentItem = content[currentIndex];
-    if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
-      setImageDimensions({});
-      return;
-    }
-    const calculateDimensions = () => {
-      if (!img2.naturalWidth || !img2.naturalHeight) return;
-      const wrapperRect = wrapper2.getBoundingClientRect();
-      const wrapperStyle = window.getComputedStyle(wrapper2);
-      const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
-      const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
-      const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
-      const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
-      const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
-      const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
-      const containerRatio = contentWidth / contentHeight;
-      const imgRatio = img2.naturalWidth / img2.naturalHeight;
-      let width;
-      let height;
-      if (imgRatio > containerRatio) {
-        width = contentWidth;
-        height = contentWidth / imgRatio;
-      } else {
-        height = contentHeight;
-        width = contentHeight * imgRatio;
-      }
-      setImageDimensions({ width, height });
-    };
-    if (img2.complete && img2.naturalWidth > 0) {
-      calculateDimensions();
-    } else {
-      img2.onload = calculateDimensions;
-    }
-    const handleResize = () => calculateDimensions();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      if (img2.onload) {
-        img2.onload = null;
-      }
-    };
-  }, [isOpen, currentIndex, content]);
   React.useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    if (isMobile && !isEditor) {
-      document.body.style.backgroundColor = area.color;
+    const colorAlpha = getColorAlpha(area.color);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
+        }
+        if (contentRef.current && appearAnimationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
+      }
+    };
+    if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
     }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      if (isMobile && !isEditor) {
-        document.body.style.backgroundColor = "";
+      if (contentRef.current && appearAnimationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
       }
     };
-  }, [isOpen]);
+  }, [isOpen, area.color, isEditor]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1918,7 +1931,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         if (!rect) return;
         const touch = e.changedTouches[0];
         const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
-        console.log("inside", rect.width, rect.height);
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1979,8 +1991,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                 animationTimingFunction: "ease",
                 animationFillMode: "both",
                 ...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
-                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" },
-                "--splide-speed": slider.duration || "500ms"
+                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -2017,7 +2028,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       return /* @__PURE__ */ jsxRuntime.jsx(reactSplide.SplideSlide, { children: /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          ref: index === currentIndex ? imgWrapperRef : null,
                           className: styles.imgWrapper,
                           onClick: handleImageWrapperClick,
                           style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
@@ -2032,14 +2042,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               }),
                               src: item.image.url,
                               alt: item.image.name ?? "",
-                              onClick: onImageClick,
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               style: {
                                 ...imageStyle2,
-                                ...item.image.objectFit === "contain" && imageDimensions.width && imageDimensions.height ? {
-                                  width: `${imageDimensions.width}px`,
-                                  height: `${imageDimensions.height}px`,
-                                  maxWidth: "none",
-                                  maxHeight: "none"
+                                ...item.image.objectFit === "contain" ? {
+                                  pointerEvents: "none"
                                 } : {}
                               }
                             }
@@ -2231,6 +2238,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
+const getColorAlpha = (color) => {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2569,15 +2595,23 @@ const LightboxComponent = {
                     },
                     properties: {
                       top: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       left: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       right: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       bottom: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       }
                     }
@@ -2833,7 +2867,7 @@ const LightboxComponent = {
             layout: {
               position: "middle-center",
               offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
+              padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
             },
             controls: {
               isActive: true,

package/dist/index.mjs

@@ -1637,17 +1637,21 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const [splideKey, setSplideKey] = React.useState(0);
   const [isClosing, setIsClosing] = React.useState(false);
-  const [imageDimensions, setImageDimensions] = React.useState({});
   const lightboxRef = useRef(null);
   const prevSliderTypeRef = useRef(null);
   const imageRef = useRef(null);
-  const imgWrapperRef = useRef(null);
   const isClosingRef = useRef(false);
   const contentRef = useRef(null);
   const animationEndHandlerRef = useRef(null);
+  const appearAnimationEndHandlerRef = useRef(null);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
   const handleClose = useCallback(() => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const colorAlpha = getColorAlpha(area.color);
+    if (isMobile && !isEditor && colorAlpha > 0.9) {
+      document.body.style.backgroundColor = "";
+    }
     setIsClosing(true);
     isClosingRef.current = true;
     const handleAnimationEnd = (e) => {
@@ -1664,7 +1668,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       animationEndHandlerRef.current = handleAnimationEnd;
       contentRef.current.addEventListener("animationend", handleAnimationEnd);
     }
-  }, [onClose, appearDurationMs]);
+  }, [onClose, appearDurationMs, area.color, isEditor]);
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
     if (e.target === e.currentTarget) {
@@ -1672,8 +1676,52 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
   };
   const handleImageWrapperClick = (e) => {
+    var _a, _b;
     if (!closeOnBackdropClick) return;
-    if (e.target === e.currentTarget) {
+    const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
+    if (!rect) {
+      if (e.target === e.currentTarget) {
+        handleClose();
+      }
+      return;
+    }
+    let clientX;
+    let clientY;
+    if ("changedTouches" in e && e.changedTouches.length > 0) {
+      clientX = e.changedTouches[0].clientX;
+      clientY = e.changedTouches[0].clientY;
+    } else if ("clientX" in e) {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    } else {
+      return;
+    }
+    const inside = clientX >= rect.x && clientX <= rect.x + rect.width && clientY >= rect.y && clientY <= rect.y + rect.height;
+    if (inside) {
+      if (triggers.type === "click" && triggers.switch === "image") {
+        if (triggers.repeat === "close" && currentIndex === content.length - 1) {
+          handleClose();
+        } else {
+          (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
+        }
+      } else if (triggers.type === "click" && triggers.switch === "50/50") {
+        const img2 = imageRef.current;
+        if (img2) {
+          const imgRect = img2.getBoundingClientRect();
+          const clickX = clientX - imgRect.left;
+          const clickY = clientY - imgRect.top;
+          const imgWidth = imgRect.width;
+          const imgHeight = imgRect.height;
+          let dir;
+          if (slider.direction === "horiz") {
+            dir = clickX < imgWidth / 2 ? "-1" : "+1";
+          } else {
+            dir = clickY < imgHeight / 2 ? "-1" : "+1";
+          }
+          (_b = lightboxRef.current) == null ? void 0 : _b.go(dir);
+        }
+      }
+    } else {
       handleClose();
     }
   };
@@ -1759,73 +1807,38 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     }
     prevSliderTypeRef.current = slider.type;
   }, [slider.type]);
-  useEffect(() => {
-    if (!imageRef.current || !imgWrapperRef.current || !isOpen) {
-      setImageDimensions({});
-      return;
-    }
-    const img2 = imageRef.current;
-    const wrapper2 = imgWrapperRef.current;
-    const currentItem = content[currentIndex];
-    if ((currentItem == null ? void 0 : currentItem.image.objectFit) !== "contain") {
-      setImageDimensions({});
-      return;
-    }
-    const calculateDimensions = () => {
-      if (!img2.naturalWidth || !img2.naturalHeight) return;
-      const wrapperRect = wrapper2.getBoundingClientRect();
-      const wrapperStyle = window.getComputedStyle(wrapper2);
-      const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
-      const paddingRight = parseFloat(wrapperStyle.paddingRight) || 0;
-      const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
-      const paddingLeft = parseFloat(wrapperStyle.paddingLeft) || 0;
-      const contentWidth = wrapperRect.width - paddingLeft - paddingRight;
-      const contentHeight = wrapperRect.height - paddingTop - paddingBottom;
-      const containerRatio = contentWidth / contentHeight;
-      const imgRatio = img2.naturalWidth / img2.naturalHeight;
-      let width;
-      let height;
-      if (imgRatio > containerRatio) {
-        width = contentWidth;
-        height = contentWidth / imgRatio;
-      } else {
-        height = contentHeight;
-        width = contentHeight * imgRatio;
-      }
-      setImageDimensions({ width, height });
-    };
-    if (img2.complete && img2.naturalWidth > 0) {
-      calculateDimensions();
-    } else {
-      img2.onload = calculateDimensions;
-    }
-    const handleResize = () => calculateDimensions();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      if (img2.onload) {
-        img2.onload = null;
-      }
-    };
-  }, [isOpen, currentIndex, content]);
   useEffect(() => {
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    if (isMobile && !isEditor) {
-      document.body.style.backgroundColor = area.color;
+    const colorAlpha = getColorAlpha(area.color);
+    const handleAppearAnimationEnd = (e) => {
+      if (e.target === contentRef.current && !isClosingRef.current && e.animationName) {
+        if (isMobile && !isEditor && colorAlpha > 0.9) {
+          document.body.style.backgroundColor = area.color;
+        }
+        if (contentRef.current && appearAnimationEndHandlerRef.current) {
+          contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        }
+        appearAnimationEndHandlerRef.current = null;
+      }
+    };
+    if (contentRef.current && isMobile && !isEditor && colorAlpha > 0.9) {
+      appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
+      contentRef.current.addEventListener("animationend", handleAppearAnimationEnd);
     }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      if (isMobile && !isEditor) {
-        document.body.style.backgroundColor = "";
+      if (contentRef.current && appearAnimationEndHandlerRef.current) {
+        contentRef.current.removeEventListener("animationend", appearAnimationEndHandlerRef.current);
+        appearAnimationEndHandlerRef.current = null;
       }
     };
-  }, [isOpen]);
+  }, [isOpen, area.color, isEditor]);
   const handleArrowClick = (dir) => {
     var _a;
     (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
@@ -1916,7 +1929,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
         if (!rect) return;
         const touch = e.changedTouches[0];
         const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
-        console.log("inside", rect.width, rect.height);
         if (!inside) {
           e.stopPropagation();
           isClosingRef.current = true;
@@ -1977,8 +1989,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                 animationTimingFunction: "ease",
                 animationFillMode: "both",
                 ...appear.type === "mix" && !isClosing && { animationDelay: `${backdropDurationMs / 2}ms` },
-                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" },
-                "--splide-speed": slider.duration || "500ms"
+                ...appear.type === "mix" && isClosing && { animationDelay: "0ms" }
               },
               children: [
                 /* @__PURE__ */ jsx(
@@ -2015,7 +2026,6 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                       return /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx(
                         "div",
                         {
-                          ref: index === currentIndex ? imgWrapperRef : null,
                           className: styles.imgWrapper,
                           onClick: handleImageWrapperClick,
                           style: { padding: scalingValue(layout.padding.top, isEditor) + " " + scalingValue(layout.padding.right, isEditor) + " " + scalingValue(layout.padding.bottom, isEditor) + " " + scalingValue(layout.padding.left, isEditor) },
@@ -2030,14 +2040,11 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
                               }),
                               src: item.image.url,
                               alt: item.image.name ?? "",
-                              onClick: onImageClick,
+                              onClick: item.image.objectFit !== "contain" ? onImageClick : void 0,
                               style: {
                                 ...imageStyle2,
-                                ...item.image.objectFit === "contain" && imageDimensions.width && imageDimensions.height ? {
-                                  width: `${imageDimensions.width}px`,
-                                  height: `${imageDimensions.height}px`,
-                                  maxWidth: "none",
-                                  maxHeight: "none"
+                                ...item.image.objectFit === "contain" ? {
+                                  pointerEvents: "none"
                                 } : {}
                               }
                             }
@@ -2229,6 +2236,25 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     document.getElementById(portalId)
   );
 };
+const getColorAlpha = (color) => {
+  const rgbaMatch = color.match(/rgba?\(([^)]+)\)/);
+  if (rgbaMatch) {
+    const values = rgbaMatch[1].split(",").map((v) => parseFloat(v.trim()));
+    if (values.length === 4) {
+      return values[3];
+    }
+    return 1;
+  }
+  const hexMatch = color.match(/^#([0-9a-fA-F]{8})$/);
+  if (hexMatch) {
+    const alphaHex = hexMatch[1].substring(6, 8);
+    return parseInt(alphaHex, 16) / 255;
+  }
+  if (color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/)) {
+    return 1;
+  }
+  return 1;
+};
 const LightboxComponent = {
   element: LightboxGallery,
   id: "lightbox",
@@ -2567,15 +2593,23 @@ const LightboxComponent = {
                     },
                     properties: {
                       top: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       left: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       right: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       },
                       bottom: {
+                        min: 0,
+                        step: 1,
                         type: "number"
                       }
                     }
@@ -2831,7 +2865,7 @@ const LightboxComponent = {
             layout: {
               position: "middle-center",
               offset: { x: 0, y: 0 },
-              padding: { top: 0, right: 0, bottom: 0, left: 0 }
+              padding: { top: 0.04, right: 0, bottom: 0.04, left: 0 }
             },
             controls: {
               isActive: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.28",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",