@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

package/src/ui-kit/Icon/Icon.tsx

@@ -4,7 +4,8 @@ import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
-  normal: 'text-primary-main',
+  normal: '',
+  color: 'text-primary-main',
   black: 'text-black',
   white: 'text-black',
 };
@@ -16,13 +17,13 @@ export const Icon = JSX<IconProps>(
     name = '',
     alt = `Иконка ${name}`,
     title = alt,
-    iconVersion = 'normal',
+    iconVersion = 'color',
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
-    if (asSVG) {
+    if (asSVG && iconVersion !== 'normal') {
       return (
         <Background className={className}>
           <svg

package/src/ui-kit/Logo/Logo.mobile.tsx

@@ -10,10 +10,16 @@ export interface LogoProps {
   showTitle?: boolean;
 }
 
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
 const SVG_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-main',
   transparent: 'text-white',
 };
+
 const TEXT_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-black',
   transparent: 'text-white',
@@ -29,8 +35,10 @@ export const Logo = JSX<Partial<LogoProps>>(
         aria-label="Россельхозбанк"
       >
         <Img
-          image={{ icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }}
-          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
+          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
+          className={`${SVG_COLOR[bgColor]}`}
+          width="34"
+          height="34"
           asSVG
         />
         {showTitle ? (

package/src/ui-kit/Logo/Logo.tsx

@@ -17,7 +17,7 @@ export interface LogoProps {
 }
 
 const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'normal',
+  'bg-white': 'color',
   transparent: 'white',
 };
 

package/src/ui-kit/Select/Select.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { Icon } from '../Icon/Icon';
 
@@ -23,9 +23,8 @@ export const Select = JSX<SelectProps>(
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
 
-    const wrapperRef = useRef<HTMLInputElement | null>(null);
-
-    useOutsideClick(wrapperRef, setIsOpen);
+    const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
     const choiceOption = (option: OptionProps) => {
       setSelectedItem(option);

package/src/ui-kit/Tags/Tags.fixture.tsx

@@ -0,0 +1,9 @@
+import { Tags } from './Tags';
+
+const tags = ['Tag #1', 'Tag #2', 'Tag #3', 'Tag #4'];
+
+export default (
+  <div className="bg-white p-12">
+    <Tags tags={tags} />
+  </div>
+);

package/src/ui-kit/Tags/Tags.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TagsContent } from './TagsContent';
+
+export interface TagsProps extends TagsContent {
+  /** @hidden */
+  className?: string;
+}
+
+export const Tags = JSX<TagsProps>((props) => {
+  const { tags, className = '' } = props;
+
+  return tags?.length ? (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {tags.map((_, i) => renderTag(_, String(i)))}
+    </div>
+  ) : null;
+});
+
+const renderTag = (tag: string, key: string) => (
+  <span
+    key={key}
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+  >
+    {tag}
+  </span>
+);

package/src/ui-kit/Tags/TagsContent.ts

@@ -0,0 +1,6 @@
+export interface TagsContent {
+  /**
+   * @title Теги
+   */
+  tags?: string[];
+}

package/src/ui-kit/TopItem/TopItem.tsx

@@ -10,9 +10,9 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
   bgColor?: BgColorVersion;
   dataItemName?: string;
+  onClick?: () => void;
 }
 
 const TEXT_CLASSES = 'font-sans text-s-light';

package/src/utils/getIconWithVersion.ts

@@ -0,0 +1,7 @@
+import type { Picture } from '../model/Picture';
+import type { BlockVersion } from '../model/BlockVersion';
+
+export const getIconWithVersion = (icon: Picture, version: BlockVersion = 'primary'): Picture => ({
+  ...icon,
+  iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+});

package/tailwind.config.cjs

@@ -251,7 +251,8 @@ module.exports = {
         'primary-focus': 'rgba(28, 28, 28, 1);',
         'checkbox-hover': 'rgba(134, 134, 134, 1);',
         'green-light': 'rgba(219, 242, 219, 1);',
-        'golden': 'rgba(255, 237, 184, 1);',
+        golden: 'rgba(255, 237, 184, 1);',
+        'color-stroke': 'rgba(201, 202, 204, 1)',
       },
     },
   },

package/bundle/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/dist/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/dist/ui-kit/IntersectionObserverTag.js

@@ -1,22 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntersectionObserverTag = void 0;
-const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
-const uni_jsx_1 = require("@redneckz/uni-jsx");
-const hooks_1 = require("@redneckz/uni-jsx/lib/hooks");
-exports.IntersectionObserverTag = (0, uni_jsx_1.JSX)((props) => {
-    const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-    const tagRef = (0, hooks_1.useRef)(null);
-    (0, hooks_1.useEffect)(() => {
-        if (!tagRef.current) {
-            return undefined;
-        }
-        const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.observe(tagRef.current);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [observerCallback, observerOptions]);
-    const Tag = tag;
-    return ((0, jsx_runtime_1.jsx)(Tag, { ref: tagRef, className: className, id: anchor, children: children }));
-});
-//# sourceMappingURL=IntersectionObserverTag.js.map

package/dist/ui-kit/IntersectionObserverTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAAgE;AAYnD,QAAA,uBAAuB,GAAG,IAAA,aAAG,EAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACzF,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,uBAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/lib/ui-kit/IntersectionObserverTag.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-export const IntersectionObserverTag = JSX((props) => {
-    const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-    const tagRef = useRef(null);
-    useEffect(() => {
-        if (!tagRef.current) {
-            return undefined;
-        }
-        const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.observe(tagRef.current);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [observerCallback, observerOptions]);
-    const Tag = tag;
-    return (_jsx(Tag, { ref: tagRef, className: className, id: anchor, children: children }));
-});
-//# sourceMappingURL=IntersectionObserverTag.js.map

package/lib/ui-kit/IntersectionObserverTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAYhE,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACzF,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/bundle/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/mobile/dist/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/mobile/dist/ui-kit/IntersectionObserverTag.js

@@ -1,22 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntersectionObserverTag = void 0;
-const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
-const uni_jsx_1 = require("@redneckz/uni-jsx");
-const hooks_1 = require("@redneckz/uni-jsx/lib/hooks");
-exports.IntersectionObserverTag = (0, uni_jsx_1.JSX)((props) => {
-    const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-    const tagRef = (0, hooks_1.useRef)(null);
-    (0, hooks_1.useEffect)(() => {
-        if (!tagRef.current) {
-            return undefined;
-        }
-        const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.observe(tagRef.current);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [observerCallback, observerOptions]);
-    const Tag = tag;
-    return ((0, jsx_runtime_1.jsx)(Tag, { ref: tagRef, className: className, id: anchor, children: children }));
-});
-//# sourceMappingURL=IntersectionObserverTag.js.map

package/mobile/dist/ui-kit/IntersectionObserverTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAAgE;AAYnD,QAAA,uBAAuB,GAAG,IAAA,aAAG,EAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACzF,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,uBAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/IntersectionObserverTag.d.ts

@@ -1,11 +0,0 @@
-import type { VNode } from '../model/VNode';
-interface IntersectionObserverTagProps {
-    tag: keyof HTMLElementTagNameMap;
-    className?: string;
-    anchor?: string;
-    children?: VNode;
-    observerCallback: IntersectionObserverCallback;
-    observerOptions?: IntersectionObserverInit;
-}
-export declare const IntersectionObserverTag: import("@redneckz/uni-jsx").UNIComponent<IntersectionObserverTagProps, any, any>;
-export {};

package/mobile/lib/ui-kit/IntersectionObserverTag.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-export const IntersectionObserverTag = JSX((props) => {
-    const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-    const tagRef = useRef(null);
-    useEffect(() => {
-        if (!tagRef.current) {
-            return undefined;
-        }
-        const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-        intersectionObserver.observe(tagRef.current);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [observerCallback, observerOptions]);
-    const Tag = tag;
-    return (_jsx(Tag, { ref: tagRef, className: className, id: anchor, children: children }));
-});
-//# sourceMappingURL=IntersectionObserverTag.js.map

package/mobile/lib/ui-kit/IntersectionObserverTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAYhE,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACnB,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QACzF,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,YAC/C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/src/ui-kit/IntersectionObserverTag.tsx

@@ -1,45 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import type { VNode } from '../model/VNode';
-
-interface IntersectionObserverTagProps {
-  tag: keyof HTMLElementTagNameMap;
-  className?: string;
-  anchor?: string;
-  children?: VNode;
-  observerCallback: IntersectionObserverCallback;
-  observerOptions?: IntersectionObserverInit;
-}
-
-export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props) => {
-  const {
-    tag = 'section',
-    observerCallback,
-    observerOptions,
-    className = '',
-    anchor = null,
-    children,
-  } = props;
-  const tagRef = useRef<HTMLElement | null>(null);
-
-  useEffect(() => {
-    if (!tagRef.current) {
-      return undefined;
-    }
-
-    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-    intersectionObserver.observe(tagRef.current);
-
-    return () => {
-      intersectionObserver.disconnect();
-    };
-  }, [observerCallback, observerOptions]);
-
-  const Tag = tag as any;
-
-  return (
-    <Tag ref={tagRef} className={className} id={anchor}>
-      {children}
-    </Tag>
-  );
-});

package/src/ui-kit/IntersectionObserverTag.tsx

@@ -1,45 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import type { VNode } from '../model/VNode';
-
-interface IntersectionObserverTagProps {
-  tag: keyof HTMLElementTagNameMap;
-  className?: string;
-  anchor?: string;
-  children?: VNode;
-  observerCallback: IntersectionObserverCallback;
-  observerOptions?: IntersectionObserverInit;
-}
-
-export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props) => {
-  const {
-    tag = 'section',
-    observerCallback,
-    observerOptions,
-    className = '',
-    anchor = null,
-    children,
-  } = props;
-  const tagRef = useRef<HTMLElement | null>(null);
-
-  useEffect(() => {
-    if (!tagRef.current) {
-      return undefined;
-    }
-
-    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-    intersectionObserver.observe(tagRef.current);
-
-    return () => {
-      intersectionObserver.disconnect();
-    };
-  }, [observerCallback, observerOptions]);
-
-  const Tag = tag as any;
-
-  return (
-    <Tag ref={tagRef} className={className} id={anchor}>
-      {children}
-    </Tag>
-  );
-});