@design-edito/tools 0.4.5 → 0.4.6

package/components/Overlayer/index.js

@@ -1,104 +1,60 @@
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
-        });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/agnostic/misc/is-nullish/index.ts
-var nullishValues = [null, void 0];
-
-// src/agnostic/booleans/is-falsy/index.ts
-var falsyValues = [...nullishValues, false, "", 0, -0, NaN];
-if (typeof BigInt === "function") falsyValues.push(BigInt(0));
-function isFalsy(val) {
-  return falsyValues.includes(val);
-}
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var overlayer = "dsed-overlayer";
-
-// src/components/Overlayer/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Overlayer = ({
-  overlays,
-  children,
-  className
-}) => {
-  const c = clss(overlayer, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  const baseClss = c("base");
-  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
-    /* @__PURE__ */ jsx("div", { className: baseClss, children }),
-    overlays?.map(({
-      content,
-      xPercent = 0,
-      yPercent = 0,
-      justify
-    }) => {
-      const overlayClss = c("overlay");
-      let computedTranslateX;
-      if (typeof justify === "number") {
-        computedTranslateX = `-${justify}%`;
-      } else if (justify === "center") {
-        computedTranslateX = "-50%";
-      } else if (justify === "left") {
-        computedTranslateX = "0%";
-      } else if (justify === "right") {
-        computedTranslateX = "-100%";
-      } else {
-        computedTranslateX = "-50%";
-      }
-      const overlayCustomProps = {
-        "--PRIVATE-left": `${xPercent}%`,
-        "--PRIVATE-top": `${yPercent}%`,
-        "--PRIVATE-translate-x": computedTranslateX
-      };
-      if (isFalsy(content)) return null;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: overlayClss,
-          style: overlayCustomProps,
-          children: content
-        }
-      );
-    })
-  ] });
-};
-export {
-  Overlayer
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { overlayer as publicClassname } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Absolute positioning overlay component. Renders a base content layer and
+ * stacks one or more overlays on top of it, each independently positioned via
+ * percentage coordinates and a justify alignment.
+ *
+ * ### Child elements
+ * - `__base` — wrapping `<div>` that contains `children`.
+ * - `__overlay` — one `<div>` per entry in `overlays` (falsy `content` entries
+ * are omitted).
+ *
+ * ### CSS custom properties on each overlay element
+ * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
+ * to set the horizontal anchor position.
+ * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
+ * to set the vertical anchor position.
+ * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
+ * the overlay relative to its anchor.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the base layer and all positioned overlay elements.
+ */
+export const Overlayer = ({ overlays, children, className }) => {
+    const c = clss(publicClassname, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    const baseClss = c('base');
+    return _jsxs("div", { className: rootClss, children: [_jsx("div", { className: baseClss, children: children }), overlays?.map(({ content, xPercent = 0, yPercent = 0, justify }) => {
+                const overlayClss = c('overlay');
+                let computedTranslateX;
+                if (typeof justify === 'number') {
+                    computedTranslateX = `-${justify}%`;
+                }
+                else if (justify === 'center') {
+                    computedTranslateX = '-50%';
+                }
+                else if (justify === 'left') {
+                    computedTranslateX = '0%';
+                }
+                else if (justify === 'right') {
+                    computedTranslateX = '-100%';
+                }
+                else {
+                    computedTranslateX = '-50%';
+                }
+                const overlayCustomProps = {
+                    '--PRIVATE-left': `${xPercent}%`,
+                    '--PRIVATE-top': `${yPercent}%`,
+                    '--PRIVATE-translate-x': computedTranslateX
+                };
+                if (isFalsy(content))
+                    return null;
+                return _jsx("div", { className: overlayClss, style: overlayCustomProps, children: content });
+            })] });
 };

package/components/Paginator/index.js

@@ -1,157 +1,126 @@
-// src/components/Paginator/index.tsx
-import {
-  useEffect,
-  useRef,
-  Children,
-  useState
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+/**
+ * A scroll-driven pagination component that tracks which child page is currently
+ * visible in the viewport and the direction of scroll.
+ *
+ * Each direct child is wrapped in a page slot and observed via
+ * {@link IntersectionObserver}. Page slots receive `'prev'`, `'curr'`, or `'next'`
+ * positional modifier classes based on their visibility.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A root div containing a pages wrapper, with each child isolated in
+ * its own observed page slot div.
+ *
+ * @remarks
+ * - Scroll direction is throttled to one update per 100ms and only dispatched
+ *   when the direction actually changes, using an internal ref to avoid stale
+ *   closure comparisons.
+ * - Page visibility is tracked via a single {@link IntersectionObserver} instance
+ *   that is recreated when `thresholdOffsetPercent` or `children` change.
+ * - `currCount` on each {@link PageState} increments each time a page transitions
+ *   into the `'curr'` position, making it useful as a re-entry counter.
+ */
+export const Paginator = ({ thresholdOffsetPercent, stateHandlers, className, children }) => {
+    // State, refs, effects
+    const [pagesState, setPagesState] = useState(new Map());
+    const [directionState, setDirectionState] = useState(null);
+    const pagesRef = useRef(null);
+    const directionRef = useRef(null);
+    // State change handlers
+    useEffect(() => {
+        stateHandlers?.pageChanged?.(Array
+            .from(pagesState)
+            .map(([, state]) => state));
+    }, [pagesState]);
+    useEffect(() => {
+        stateHandlers?.directionChanged?.(directionState);
+    }, [directionState]);
+    // Catch scroll direction listening on scroll events
+    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);
+        };
+    }, []);
+    // Detect active pages with Intersection Observer
+    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 === undefined)
+                        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 = new Map();
+        pages.forEach((page, index) => {
+            pageIndexMap.set(page, index);
+            observer.observe(page);
         });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var paginator = "dsed-paginator";
-
-// src/components/Paginator/index.tsx
-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(paginator, { 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
-        );
-      })
-    }
-  ) });
-};
-export {
-  Paginator
+        return () => observer.disconnect();
+    }, [thresholdOffsetPercent, children]);
+    // Rendering
+    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 _jsx("div", { className: rootClss, children: _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 _jsx("div", { className: pageClss, "data-page": pos, "data-curr-count": state?.currCount ?? 0, children: child }, pos);
+            }) }) });
 };

package/components/ResizeObserver/index.js

@@ -1,122 +1,69 @@
-// src/components/ResizeObserver/index.tsx
-import {
-  useRef,
-  useEffect,
-  useState
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+/**
+ * Component that observes its own size changes and exposes the dimensions.
+ * Updates are exposed both via data attributes (e.g., `data-width`) and CSS custom properties
+ * (e.g., `--<prefix>-width`, `--<prefix>-width-px`) for styling or scripting purposes.
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A div wrapping `children`, with resize observation applied.
+ */
+export const ResizeObserverComponent = ({ className, onResized, children }) => {
+    // Refs, effects & handlers
+    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 !== undefined) {
+                const boundingClientRect = firstEntry.target.getBoundingClientRect();
+                const fullEntry = {
+                    entry: firstEntry,
+                    boundingClientRect
+                };
+                setRoEntry(fullEntry);
+                if (onResized === undefined)
+                    return;
+                onResized(fullEntry);
+            }
         });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var resizeObserver = "dsed-resize-observer";
-
-// src/components/ResizeObserver/index.tsx
-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,
-      [`--${resizeObserver}-${key}`]: val.toString(),
-      [`--${resizeObserver}-${key}-px`]: `${val.toString()}px`
+        observerRef.current.observe(root);
     };
-  }, {});
-  const c = clss(resizeObserver, { cssModule });
-  const rootClss = mergeClassNames(c(null), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...dataAttributes,
-      className: rootClss,
-      ref: rootRef,
-      style: { ...cssCustomProps },
-      children
-    }
-  );
-};
-export {
-  ResizeObserverComponent
+    useEffect(() => {
+        createObserver();
+        return () => observerRef.current?.disconnect();
+    }, [onResized]);
+    // Data attributes, CSS custom props & Rendering
+    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 === undefined)
+            return acc;
+        return { ...acc, [`data-${key}`]: val.toString() };
+    }, {});
+    const cssCustomProps = Object
+        .entries(contentRect)
+        .reduce((acc, [key, val]) => {
+        if (val === undefined)
+            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 _jsx("div", { ...dataAttributes, className: rootClss, ref: rootRef, style: { ...cssCustomProps }, children: children });
 };