@cntrl-site/components 0.1.0-5 → 0.1.0-7

package/dist/index.js

@@ -1483,29 +1483,14 @@ const styles = {
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
   const [open, setOpen] = React.useState(false);
-  const [wrapperRef, setWrapperRef] = React.useState(null);
-  const [coverDimensions, setCoverDimensions] = React.useState(void 0);
   const { url: coverUrl } = settings.cover;
-  React.useEffect(() => {
-    if (!wrapperRef) return;
-    const observer = new ResizeObserver((entries) => {
-      if (!wrapperRef) return;
-      const [wrapper2] = entries;
-      setCoverDimensions({
-        width: Math.round(wrapper2.contentRect.width),
-        height: Math.round(wrapper2.contentRect.height)
-      });
-    });
-    observer.observe(wrapperRef);
-    return () => observer.unobserve(wrapperRef);
-  }, [wrapperRef]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setWrapperRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
+        style: { width: "100%", height: "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1917,7 +1902,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "align-grid"
+                  type: "align-vertical"
                 },
                 enum: ["top", "center", "bottom"]
               },

package/dist/index.mjs

@@ -1480,30 +1480,15 @@ const styles = {
   slideInBottom
 };
 function LightboxGallery({ settings, content, styles: styles2, portalId }) {
-  const [open, setOpen] = useState(false);
-  const [wrapperRef, setWrapperRef] = useState(null);
-  const [coverDimensions, setCoverDimensions] = useState(void 0);
+  const [open, setOpen] = React.useState(false);
   const { url: coverUrl } = settings.cover;
-  useEffect(() => {
-    if (!wrapperRef) return;
-    const observer = new ResizeObserver((entries) => {
-      if (!wrapperRef) return;
-      const [wrapper2] = entries;
-      setCoverDimensions({
-        width: Math.round(wrapper2.contentRect.width),
-        height: Math.round(wrapper2.contentRect.height)
-      });
-    });
-    observer.observe(wrapperRef);
-    return () => observer.unobserve(wrapperRef);
-  }, [wrapperRef]);
-  return /* @__PURE__ */ jsxs("div", { ref: setWrapperRef, children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       "img",
       {
         src: coverUrl,
         alt: "Cover",
-        style: { width: (coverDimensions == null ? void 0 : coverDimensions.width) ? coverDimensions.width : "100%", height: (coverDimensions == null ? void 0 : coverDimensions.height) ? coverDimensions.height : "100%", cursor: "pointer" },
+        style: { width: "100%", height: "100%", cursor: "pointer" },
         onClick: () => setOpen(true)
       }
     ),
@@ -1915,7 +1900,7 @@ const LightboxComponent = {
                 type: "string",
                 title: "Align",
                 display: {
-                  type: "align-grid"
+                  type: "align-vertical"
                 },
                 enum: ["top", "center", "bottom"]
               },

package/package.json

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