@design-edito/tools 0.3.16 → 0.3.17

package/components/IntersectionObserver/index.js

@@ -1,70 +1,10 @@
-// src/components/IntersectionObserver/index.tsx
 import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback
-} from "react";
-import { clss } from "../../agnostic/css/clss/index.js";
-import { mergeClassNames } from "../utils/index.js";
-import { intersectionObserver as publicClassName } from "../public-classnames.js";
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var IntersectionObserverComponent = ({
-  onIntersected,
-  root,
-  rootMargin,
-  threshold,
-  className,
-  children
-}) => {
-  const [ioEntry, setIoEntry] = useState(null);
-  const rootRef = useRef(null);
-  const observerRef = useRef(null);
-  const observation = useCallback((entries, observer) => {
-    const thisEntry = entries[0];
-    if (thisEntry === void 0) return setIoEntry(null);
-    onIntersected?.({ ioEntry: thisEntry, observer });
-    setIoEntry(thisEntry);
-  }, [onIntersected]);
-  const forceObservation = useCallback(() => {
-    const rootEl = rootRef.current;
-    const observer = observerRef.current;
-    if (rootEl === null || observer === null) return;
-    observer.unobserve(rootEl);
-    observer.observe(rootEl);
-  }, []);
-  useEffect(() => {
-    const rootEl = rootRef.current;
-    if (rootEl === null) return console.warn("rootRef.current should not be null");
-    const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
-    observerRef.current = observer;
-    observer.observe(rootEl);
-    return () => observer.disconnect();
-  }, [root, rootMargin, threshold, observation]);
-  useEffect(() => {
-    const timeout1 = window.setTimeout(forceObservation, 100);
-    const timeout2 = window.setTimeout(forceObservation, 500);
-    return () => {
-      window.clearTimeout(timeout1);
-      window.clearTimeout(timeout2);
-    };
-  }, [forceObservation]);
-  const c = clss(publicClassName, { cssModule });
-  const isIntersecting = ioEntry?.isIntersecting ?? false;
-  const rootClss = mergeClassNames(
-    c(null, { "is-intersecting": isIntersecting }),
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
+  IntersectionObserverComponent
+} from "../../chunks/chunk-SPC2SMZR.js";
+import "../../chunks/chunk-3DNVFA25.js";
+import "../../chunks/chunk-TRFZSKNB.js";
+import "../../chunks/chunk-OFCSIK6J.js";
+import "../../chunks/chunk-WSFCRVEQ.js";
 export {
   IntersectionObserverComponent
 };

package/components/Paginator/index.css

@@ -0,0 +1,10 @@
+/* src/components/Paginator/styles.module.css */
+.styles_threshold {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  height: 0px;
+  user-select: none;
+  pointer-events: none;
+  z-index: -9999;
+}

package/components/Paginator/index.js

@@ -1,116 +1,10 @@
-// src/components/Paginator/index.tsx
 import {
-  useEffect,
-  useRef,
-  Children,
-  useState
-} from "react";
-import { clss } from "../../agnostic/css/clss/index.js";
-import { mergeClassNames } from "../utils/index.js";
-import { paginator as publicClassName } from "../public-classnames.js";
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var Paginator = ({
-  thresholdOffsetPercent,
-  stateHandlers,
-  className,
-  children
-}) => {
-  const [pagesState, setPagesState] = useState(/* @__PURE__ */ new Map());
-  const [directionState, setDirectionState] = useState(null);
-  const pagesRef = useRef(null);
-  const directionRef = useRef(null);
-  useEffect(() => {
-    stateHandlers?.pageChanged?.(Array.from(pagesState).map(([, state]) => state));
-  }, [pagesState]);
-  useEffect(() => {
-    stateHandlers?.directionChanged?.(directionState);
-  }, [directionState]);
-  useEffect(() => {
-    let lastCall = 0;
-    let lastScrollY = window.scrollY;
-    const handleScroll = (e) => {
-      const now = Date.now();
-      if (now - lastCall < 100) return;
-      lastCall = now;
-      const currentScrollY = window.scrollY;
-      const direction = currentScrollY > lastScrollY ? "forwards" : "backwards";
-      lastScrollY = currentScrollY;
-      if (direction !== directionRef.current) {
-        directionRef.current = direction;
-        setDirectionState(direction);
-      }
-    };
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("resize", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", handleScroll);
-    };
-  }, []);
-  useEffect(() => {
-    if (pagesRef.current === null) return;
-    const pages = Array.from(pagesRef.current.children);
-    const observerRootMargin = `-${thresholdOffsetPercent ?? 0}% 0px -${100 - (thresholdOffsetPercent ?? 0)}% 0px`;
-    const observer = new IntersectionObserver((entries) => {
-      setPagesState((prevState) => {
-        const nextState = new Map(prevState);
-        entries.forEach((entry) => {
-          const index = pageIndexMap.get(entry.target);
-          if (index === void 0) return;
-          const prev = prevState.get(index);
-          const position = entry.isIntersecting ? "curr" : entry.boundingClientRect.bottom < (entry.rootBounds?.top ?? 0) ? "prev" : "next";
-          const currCount = position === "curr" && prev?.position !== "curr" ? (prev?.currCount ?? 0) + 1 : prev?.currCount ?? 0;
-          nextState.set(index, { position, currCount });
-        });
-        return nextState;
-      });
-    }, { rootMargin: observerRootMargin });
-    const pageIndexMap = /* @__PURE__ */ new Map();
-    pages.forEach((page, index) => {
-      pageIndexMap.set(page, index);
-      observer.observe(page);
-    });
-    return () => observer.disconnect();
-  }, [thresholdOffsetPercent, children]);
-  const c = clss(publicClassName, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      forwards: directionState === "forwards",
-      backwards: directionState === "backwards"
-    }),
-    className
-  );
-  const pagesClss = c("pages");
-  const childrenArr = Children.toArray(children);
-  return /* @__PURE__ */ jsx("div", { className: rootClss, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: pagesClss,
-      ref: pagesRef,
-      children: childrenArr.map((child, pos) => {
-        const state = pagesState.get(pos);
-        const pageClss = c("page", {
-          first: pos === 0,
-          last: pos === childrenArr.length - 1,
-          prev: state?.position === "prev",
-          curr: state?.position === "curr",
-          next: state?.position === "next"
-        });
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: pageClss,
-            "data-page": pos,
-            "data-curr-count": state?.currCount ?? 0,
-            children: child
-          },
-          pos
-        );
-      })
-    }
-  ) });
-};
+  Paginator
+} from "../../chunks/chunk-3K4JD65D.js";
+import "../../chunks/chunk-3DNVFA25.js";
+import "../../chunks/chunk-TRFZSKNB.js";
+import "../../chunks/chunk-OFCSIK6J.js";
+import "../../chunks/chunk-WSFCRVEQ.js";
 export {
   Paginator
 };

package/components/ResizeObserver/index.css

@@ -0,0 +1 @@
+/* src/components/ResizeObserver/style.module.css */

package/components/ResizeObserver/index.js

@@ -1,81 +1,10 @@
-// src/components/ResizeObserver/index.tsx
 import {
-  useRef,
-  useEffect,
-  useState
-} from "react";
-import { clss } from "../../agnostic/css/clss/index.js";
-import { mergeClassNames } from "../utils/index.js";
-import { resizeObserver as publicClassName } from "../public-classnames.js";
-import cssModule from "./style.module.css";
-import { jsx } from "react/jsx-runtime";
-var ResizeObserverComponent = ({
-  className,
-  onResized,
-  children
-}) => {
-  const [roEntry, setRoEntry] = useState();
-  const rootRef = useRef(null);
-  const observerRef = useRef(null);
-  const createObserver = () => {
-    const root = rootRef.current;
-    observerRef.current?.disconnect();
-    if (root === null) return;
-    observerRef.current = new ResizeObserver((entries) => {
-      const firstEntry = entries[0];
-      if (firstEntry !== void 0) {
-        const boundingClientRect = firstEntry.target.getBoundingClientRect();
-        const fullEntry = {
-          entry: firstEntry,
-          boundingClientRect
-        };
-        setRoEntry(fullEntry);
-        if (onResized === void 0) return;
-        onResized(fullEntry);
-      }
-    });
-    observerRef.current.observe(root);
-  };
-  useEffect(() => {
-    createObserver();
-    return () => observerRef.current?.disconnect();
-  }, [onResized]);
-  const {
-    x,
-    y,
-    top,
-    left,
-    bottom,
-    right,
-    width,
-    height
-  } = roEntry?.entry.contentRect ?? {};
-  const contentRect = { x, y, top, left, bottom, right, width, height };
-  const dataAttributes = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return { ...acc, [`data-${key}`]: val.toString() };
-  }, {});
-  const cssCustomProps = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return {
-      ...acc,
-      [`--${publicClassName}-${key}`]: val.toString(),
-      [`--${publicClassName}-${key}-px`]: `${val.toString()}px`
-    };
-  }, {});
-  const c = clss(publicClassName, { cssModule });
-  const rootClss = mergeClassNames(c(null), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...dataAttributes,
-      className: rootClss,
-      ref: rootRef,
-      style: { ...cssCustomProps },
-      children
-    }
-  );
-};
+  ResizeObserverComponent
+} from "../../chunks/chunk-UVG2S54P.js";
+import "../../chunks/chunk-3DNVFA25.js";
+import "../../chunks/chunk-TRFZSKNB.js";
+import "../../chunks/chunk-OFCSIK6J.js";
+import "../../chunks/chunk-WSFCRVEQ.js";
 export {
   ResizeObserverComponent
 };

package/components/Scrllgngn/index.css

@@ -0,0 +1,69 @@
+/* src/components/IntersectionObserver/styles.module.css */
+/* src/components/Paginator/styles.module.css */
+.styles_threshold {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  height: 0px;
+  user-select: none;
+  pointer-events: none;
+  z-index: -9999;
+}
+
+/* src/components/ResizeObserver/style.module.css */
+
+/* src/components/Scrllgngn/styles.module.css */
+.styles_root {
+  position: relative;
+}
+.styles_back-blocks {
+  z-index: 1;
+}
+.styles_scrolling-content {
+  z-index: 2;
+}
+.styles_front-blocks {
+  z-index: 3;
+}
+.styles_back-blocks,
+.styles_front-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible .styles_back-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible .styles_front-blocks {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+}
+.styles_root.styles_root--content-visible .styles_back-blocks,
+.styles_root.styles_root--content-visible .styles_front-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible.styles_root--force-stick-blocks-before .styles_back-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible.styles_root--force-stick-blocks-before .styles_front-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible.styles_root--force-stick-blocks-both .styles_back-blocks,
+.styles_root.styles_root--top-visible.styles_root--content-visible.styles_root--force-stick-blocks-both .styles_front-blocks,
+.styles_root.styles_root--bottom-visible.styles_root--content-visible.styles_root--force-stick-blocks-after .styles_back-blocks,
+.styles_root.styles_root--bottom-visible.styles_root--content-visible.styles_root--force-stick-blocks-after .styles_front-blocks,
+.styles_root.styles_root--bottom-visible.styles_root--content-visible.styles_root--force-stick-blocks-both .styles_back-blocks,
+.styles_root.styles_root--bottom-visible.styles_root--content-visible.styles_root--force-stick-blocks-both .styles_front-blocks {
+  position: fixed;
+  top: 0;
+  left: var(--PRIVATE-left);
+  width: var(--PRIVATE-width);
+  height: 100vh;
+}
+.styles_root.styles_root--bottom-visible.styles_root--content-visible .styles_back-blocks,
+.styles_root.styles_root--bottom-visible.styles_root--content-visible .styles_front-blocks {
+  position: absolute;
+  top: calc(var(--PRIVATE-height) - 100vh);
+  left: 0;
+  right: 0;
+  height: 100vh;
+}
+.styles_back-block,
+.styles_front-block {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

package/components/Scrllgngn/index.js

@@ -1,22 +1,50 @@
-// src/components/Scrllgngn/index.tsx
 import {
-  useState,
-  useEffect
-} from "react";
-import { clss } from "../../agnostic/css/clss/index.js";
-import { randomHash } from "../../agnostic/random/uuid/index.js";
+  randomHash
+} from "../../chunks/chunk-75BICI4L.js";
+import "../../chunks/chunk-OGBUSUE6.js";
+import {
+  ResizeObserverComponent
+} from "../../chunks/chunk-UVG2S54P.js";
 import {
   IntersectionObserverComponent
-} from "../IntersectionObserver/index.js";
+} from "../../chunks/chunk-SPC2SMZR.js";
 import {
   Paginator
-} from "../Paginator/index.js";
+} from "../../chunks/chunk-3K4JD65D.js";
 import {
-  ResizeObserverComponent
-} from "../ResizeObserver/index.js";
-import { mergeClassNames } from "../utils/index.js";
-import { scrllgngn as publicClassName } from "../public-classnames.js";
-import cssModule from "./styles.module.css";
+  scrllgngn
+} from "../../chunks/chunk-3DNVFA25.js";
+import {
+  clss
+} from "../../chunks/chunk-TRFZSKNB.js";
+import {
+  mergeClassNames
+} from "../../chunks/chunk-OFCSIK6J.js";
+import "../../chunks/chunk-WSFCRVEQ.js";
+
+// src/components/Scrllgngn/index.tsx
+import {
+  useState,
+  useEffect
+} from "react";
+
+// src/components/Scrllgngn/styles.module.css
+var styles_default = {
+  root: "styles_root",
+  "back-blocks": "styles_back-blocks",
+  "scrolling-content": "styles_scrolling-content",
+  "front-blocks": "styles_front-blocks",
+  "root--top-visible": "styles_root--top-visible",
+  "root--content-visible": "styles_root--content-visible",
+  "root--force-stick-blocks-before": "styles_root--force-stick-blocks-before",
+  "root--force-stick-blocks-both": "styles_root--force-stick-blocks-both",
+  "root--bottom-visible": "styles_root--bottom-visible",
+  "root--force-stick-blocks-after": "styles_root--force-stick-blocks-after",
+  "back-block": "styles_back-block",
+  "front-block": "styles_front-block"
+};
+
+// src/components/Scrllgngn/index.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Scrllgngn = ({
   pages,
@@ -85,7 +113,7 @@ var Scrllgngn = ({
   const handleResize = ({ boundingClientRect }) => {
     if (partialBoundingRect === void 0 || boundingClientRect.left !== partialBoundingRect.left || boundingClientRect.right !== partialBoundingRect.right || boundingClientRect.height !== partialBoundingRect.height || boundingClientRect.width !== partialBoundingRect.width) setPartialBoundingRect(boundingClientRect);
   };
-  const c = clss(publicClassName, { cssModule });
+  const c = clss(scrllgngn, { cssModule: styles_default });
   const rootClss = mergeClassNames(
     c(null, {
       "top-visible": topVisible,
@@ -99,19 +127,19 @@ var Scrllgngn = ({
   );
   const customCssProps = {};
   if (partialBoundingRect?.left !== void 0) {
-    customCssProps[`--${publicClassName}-screen-left`] = `${partialBoundingRect.left}px`;
+    customCssProps[`--${scrllgngn}-screen-left`] = `${partialBoundingRect.left}px`;
     customCssProps["--PRIVATE-left"] = `${partialBoundingRect.left}px`;
   }
   if (partialBoundingRect?.right !== void 0) {
-    customCssProps[`--${publicClassName}-screen-right`] = `${partialBoundingRect.right}px`;
+    customCssProps[`--${scrllgngn}-screen-right`] = `${partialBoundingRect.right}px`;
     customCssProps["--PRIVATE-right"] = `${partialBoundingRect.right}px`;
   }
   if (partialBoundingRect?.width !== void 0) {
-    customCssProps[`--${publicClassName}-screen-width`] = `${partialBoundingRect.width}px`;
+    customCssProps[`--${scrllgngn}-screen-width`] = `${partialBoundingRect.width}px`;
     customCssProps["--PRIVATE-width"] = `${partialBoundingRect.width}px`;
   }
   if (partialBoundingRect?.height !== void 0) {
-    customCssProps[`--${publicClassName}-screen-height`] = `${partialBoundingRect.height}px`;
+    customCssProps[`--${scrllgngn}-screen-height`] = `${partialBoundingRect.height}px`;
     customCssProps["--PRIVATE-height"] = `${partialBoundingRect.height}px`;
   }
   return /* @__PURE__ */ jsx(

package/components/ScrollListener/index.css

@@ -0,0 +1,2 @@
+/* src/components/IntersectionObserver/styles.module.css */
+/* src/components/ScrollListener/styles.module.css */

package/components/ScrollListener/index.js

@@ -1,3 +1,21 @@
+import {
+  randomHash
+} from "../../chunks/chunk-75BICI4L.js";
+import "../../chunks/chunk-OGBUSUE6.js";
+import {
+  IntersectionObserverComponent
+} from "../../chunks/chunk-SPC2SMZR.js";
+import {
+  scrollListener
+} from "../../chunks/chunk-3DNVFA25.js";
+import {
+  clss
+} from "../../chunks/chunk-TRFZSKNB.js";
+import {
+  mergeClassNames
+} from "../../chunks/chunk-OFCSIK6J.js";
+import "../../chunks/chunk-WSFCRVEQ.js";
+
 // src/components/ScrollListener/index.tsx
 import {
   useEffect,
@@ -5,15 +23,63 @@ import {
   useState,
   useCallback
 } from "react";
-import { clss } from "../../agnostic/css/clss/index.js";
-import { randomHash } from "../../agnostic/random/uuid/index.js";
-import { mergeClassNames } from "../utils/index.js";
-import {
-  IntersectionObserverComponent
-} from "../IntersectionObserver/index.js";
-import { scrollListener as publicClassName } from "../public-classnames.js";
-import { register, unregister } from "./utils.js";
-import cssModule from "./styles.module.css";
+
+// src/components/ScrollListener/utils.tsx
+var globalDocumentScrollListener = () => {
+  const win = {
+    height: window.innerHeight,
+    width: window.innerWidth
+  };
+  const html = {
+    width: document.body.parentElement?.offsetWidth ?? 0,
+    height: document.body.parentElement?.offsetHeight ?? 0
+  };
+  const scroll = {
+    x: window.scrollX,
+    y: window.scrollY
+  };
+  const viewport = {
+    minX: scroll.x,
+    minY: scroll.y,
+    maxX: scroll.x + win.width,
+    maxY: scroll.y + win.height
+  };
+  return { win, html, scroll, viewport };
+};
+var localElementScrollListener = (div) => {
+  const offsetX = div.offsetLeft;
+  const offsetY = div.offsetTop;
+  const width = div.offsetWidth;
+  const height = div.offsetHeight;
+  return {
+    offsetX,
+    offsetY,
+    width,
+    height
+  };
+};
+window.addEventListener("scroll", () => {
+  const global = globalDocumentScrollListener();
+  Array.from(registeredIds).forEach(([, item]) => {
+    const { rootRef, setData } = item;
+    if (rootRef.current === null) return;
+    const local = localElementScrollListener(rootRef.current);
+    setData({ global, local });
+  });
+});
+var registeredIds = /* @__PURE__ */ new Map();
+var register = (props) => {
+  const { id, rootRef, setData } = props;
+  registeredIds.set(id, { id, rootRef, setData });
+};
+var unregister = (id) => {
+  registeredIds.delete(id);
+};
+
+// src/components/ScrollListener/styles.module.css
+var styles_default = {};
+
+// src/components/ScrollListener/index.tsx
 import { jsx } from "react/jsx-runtime";
 var ScrollListener = ({
   startOnVisible,
@@ -43,17 +109,17 @@ var ScrollListener = ({
   const customProps = Object.entries(
     scrollData !== void 0 ? {
       // Global
-      [`--${publicClassName}-window-width`]: scrollData.global.win.width,
-      [`--${publicClassName}-window-height`]: scrollData.global.win.height,
-      [`--${publicClassName}-html-width`]: scrollData.global.html.width,
-      [`--${publicClassName}-html-height`]: scrollData.global.html.height,
-      [`--${publicClassName}-scroll-x`]: scrollData.global.scroll.x,
-      [`--${publicClassName}-scroll-y`]: scrollData.global.scroll.y,
+      [`--${scrollListener}-window-width`]: scrollData.global.win.width,
+      [`--${scrollListener}-window-height`]: scrollData.global.win.height,
+      [`--${scrollListener}-html-width`]: scrollData.global.html.width,
+      [`--${scrollListener}-html-height`]: scrollData.global.html.height,
+      [`--${scrollListener}-scroll-x`]: scrollData.global.scroll.x,
+      [`--${scrollListener}-scroll-y`]: scrollData.global.scroll.y,
       // Local
-      [`--${publicClassName}-width`]: scrollData.local.width,
-      [`--${publicClassName}-height`]: scrollData.local.height,
-      [`--${publicClassName}-offset-x`]: scrollData.local.offsetX,
-      [`--${publicClassName}-offset-y`]: scrollData.local.offsetY
+      [`--${scrollListener}-width`]: scrollData.local.width,
+      [`--${scrollListener}-height`]: scrollData.local.height,
+      [`--${scrollListener}-offset-x`]: scrollData.local.offsetX,
+      [`--${scrollListener}-offset-y`]: scrollData.local.offsetY
     } : {}
   ).reduce((acc, [key, val]) => ({
     ...acc,
@@ -61,8 +127,8 @@ var ScrollListener = ({
     [`${key}-px`]: `${val}px`
   }), {});
   if (scrollData !== void 0) {
-    customProps[`--${publicClassName}-window-scrolled-x-ratio`] = scrollData.global.scroll.x / Math.max(scrollData.global.html.width - scrollData.global.win.width, 1);
-    customProps[`--${publicClassName}-window-scrolled-y-ratio`] = scrollData.global.scroll.y / Math.max(scrollData.global.html.height - scrollData.global.win.height, 1);
+    customProps[`--${scrollListener}-window-scrolled-x-ratio`] = scrollData.global.scroll.x / Math.max(scrollData.global.html.width - scrollData.global.win.width, 1);
+    customProps[`--${scrollListener}-window-scrolled-y-ratio`] = scrollData.global.scroll.y / Math.max(scrollData.global.html.height - scrollData.global.win.height, 1);
     const topTouchesTop = scrollData.local.offsetY;
     const topTouchesBottom = scrollData.local.offsetY - scrollData.global.win.height;
     const bottomTouchesTop = scrollData.local.offsetY + scrollData.local.height;
@@ -79,12 +145,12 @@ var ScrollListener = ({
     const outerScrollYRatio = (scrollData.global.scroll.y - outerYRange[0]) / Math.max(outerYRange[1] - outerYRange[0], 1);
     const innerScrollXRatio = (scrollData.global.scroll.x - innerXRange[0]) / Math.max(innerXRange[1] - innerXRange[0], 1);
     const outerScrollXRatio = (scrollData.global.scroll.x - outerXRange[0]) / Math.max(outerXRange[1] - outerXRange[0], 1);
-    customProps[`--${publicClassName}-self-inner-scrolled-y-ratio`] = innerScrollYRatio;
-    customProps[`--${publicClassName}-self-outer-scrolled-y-ratio`] = outerScrollYRatio;
-    customProps[`--${publicClassName}-self-inner-scrolled-x-ratio`] = innerScrollXRatio;
-    customProps[`--${publicClassName}-self-outer-scrolled-x-ratio`] = outerScrollXRatio;
+    customProps[`--${scrollListener}-self-inner-scrolled-y-ratio`] = innerScrollYRatio;
+    customProps[`--${scrollListener}-self-outer-scrolled-y-ratio`] = outerScrollYRatio;
+    customProps[`--${scrollListener}-self-inner-scrolled-x-ratio`] = innerScrollXRatio;
+    customProps[`--${scrollListener}-self-outer-scrolled-x-ratio`] = outerScrollXRatio;
   }
-  const c = clss(publicClassName, { cssModule });
+  const c = clss(scrollListener, { cssModule: styles_default });
   const rootClss = mergeClassNames(
     c(),
     className

package/components/Sequencer/index.css

@@ -0,0 +1,2 @@
+/* src/components/IntersectionObserver/styles.module.css */
+/* src/components/Sequencer/styles.module.css */