@digital-b2c/coreui-kit 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -828,16 +828,47 @@ var ContactModuleTitle = ({ children }) => {
 var ContactModuleSubtitle = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
+function useIntersectionObserver({
+  animateOnce = false,
+  options = {}
+} = {}) {
+  const observeRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(false);
+  if (typeof IntersectionObserver === "undefined") {
+    console.warn("IntersectionObserver is not supported in this browser.");
+    return { observeRef, isVisible: true };
+  }
+  React.useEffect(() => {
+    const currentRef = observeRef.current;
+    if (!currentRef) return;
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      setIsVisible(entry.isIntersecting);
+      if (entry.isIntersecting && animateOnce) {
+        observer.disconnect();
+      }
+    }, options);
+    observer.observe(currentRef);
+    return () => {
+      observer.disconnect();
+    };
+  }, [observeRef, animateOnce, options]);
+  return { observeRef, isVisible };
+}
 
 // src/widgets/ContactModule/ContactModule.module.scss
 var ContactModule_module_default = {
   "contact-module": "ContactModule_module_contact-module",
+  blur: "ContactModule_module_blur",
+  "blur--hidden": "ContactModule_module_blur--hidden",
   container: "ContactModule_module_container",
   wrapper: "ContactModule_module_wrapper",
   content: "ContactModule_module_content",
   "cta-wrapper": "ContactModule_module_cta-wrapper",
   cta: "ContactModule_module_cta",
   title: "ContactModule_module_title",
+  subtitle: "ContactModule_module_subtitle",
   image: "ContactModule_module_image"
 };
 var ContactModule = ({
@@ -847,35 +878,51 @@ var ContactModule = ({
   subtitle,
   ctas,
   image,
-  blurred
+  blurred = true,
+  animateBlur = true
 }) => {
   var _a, _b;
+  const { observeRef, isVisible } = useIntersectionObserver({
+    animateOnce: true,
+    options: { threshold: 0.8 }
+  });
   const slots = resolveCompoundSlots(children, {
     title: ContactModuleTitle,
     subtitle: ContactModuleSubtitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default["contact-module"], { [ContactModule_module_default.blurred]: blurred }, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: ContactModule_module_default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.wrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.content, children: [
-        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default.title, "h1"), children: titleNode }),
-        subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: observeRef, className: clsx3__default.default(ContactModule_module_default["contact-module"], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx3__default.default({
+          [ContactModule_module_default.blur]: blurred,
+          [ContactModule_module_default["blur--hidden"]]: blurred && animateBlur && isVisible
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: ContactModule_module_default.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.wrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContactModule_module_default.content, children: [
+          titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default.title, "h1"), children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(ContactModule_module_default.subtitle, "subheading"), children: subtitleNode })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            className: ContactModule_module_default.cta,
+            href: cta.url,
+            isExternal: cta.isExternal,
+            variant: key % 2 === 0 ? "secondary" : "primary",
+            children: cta.label
+          },
+          key
+        )) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContactModule_module_default["cta-wrapper"], children: ctas == null ? void 0 : ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          className: ContactModule_module_default.cta,
-          href: cta.url,
-          isExternal: cta.isExternal,
-          variant: key % 2 === 0 ? "secondary" : "primary",
-          children: cta.label
-        },
-        key
-      )) })
-    ] }),
-    image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: ContactModule_module_default.image }, image))
-  ] }) });
+      image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: ContactModule_module_default.image }, image))
+    ] })
+  ] });
 };
 
 // src/widgets/ContactModule/index.ts
@@ -1040,14 +1087,14 @@ var MiniSectionCtaSubtitle = ({ children }) => {
 // src/widgets/MiniSectionCta/MiniSectionCta.module.scss
 var MiniSectionCta_module_default = {
   miniSectionCta: "MiniSectionCta_module_miniSectionCta",
-  container: "MiniSectionCta_module_container",
+  wrapper: "MiniSectionCta_module_wrapper",
   col: "MiniSectionCta_module_col",
   BgColorBlack: "MiniSectionCta_module_BgColorBlack",
   infoCallout: "MiniSectionCta_module_infoCallout",
+  subtitle: "MiniSectionCta_module_subtitle",
   miniTextCenterCta: "MiniSectionCta_module_miniTextCenterCta",
   cta: "MiniSectionCta_module_cta",
-  BgColorGrey: "MiniSectionCta_module_BgColorGrey",
-  subtitle: "MiniSectionCta_module_subtitle"
+  BgColorGrey: "MiniSectionCta_module_BgColorGrey"
 };
 var MiniSectionCta = ({
   className,
@@ -1064,10 +1111,16 @@ var MiniSectionCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: MiniSectionCta_module_default.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], className), children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.wrapper, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MiniSectionCta_module_default.col, children: [
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: variant === "BgColorBlack" || variant === "BgColorGrey" ? "h3" : "h2", children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"), children: subtitleNode })
+      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx3__default.default(MiniSectionCta_module_default.subtitle, variant === "infoCallout" ? "h4" : "subheading"),
+          children: subtitleNode
+        }
+      )
     ] }),
     cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: MiniSectionCta_module_default.col, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -1080,7 +1133,7 @@ var MiniSectionCta = ({
         children: cta.label
       }
     ) })
-  ] }) });
+  ] }) }) });
 };
 
 // src/widgets/MiniSectionCta/index.ts