@npm_leadtech/legal-lib-components 7.81.0 → 7.82.52

package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.js

@@ -7,34 +7,4 @@ export const TryOurFreeLegalBlogsSectionStyled = styled.section `
   @media ${device['landscape-tablets']} {
     flex-flow: row nowrap;
   }
-
-  &.how-it-works-first-image {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    width: 100%;
-    padding: 2rem 1.5rem;
-    background-color: var(--neutral-neutral-6);
-
-    @media ${device.laptop} {
-      padding: 3rem 2rem;
-    }
-
-    @media ${device['desktop-xl']} {
-      padding: 3rem 0;
-    }
-
-    .try-our-free-legal-blogs-section-content--how-it-works-first-image {
-      max-width: 1200px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      align-self: stretch;
-
-      @media ${device['landscape-tablets']} {
-        flex-flow: row-reverse nowrap;
-      }
-    }
-  }
 `;

package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.ts

@@ -8,34 +8,4 @@ export const TryOurFreeLegalBlogsSectionStyled = styled.section`
   @media ${device['landscape-tablets']} {
     flex-flow: row nowrap;
   }
-
-  &.how-it-works-first-image {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    width: 100%;
-    padding: 2rem 1.5rem;
-    background-color: var(--neutral-neutral-6);
-
-    @media ${device.laptop} {
-      padding: 3rem 2rem;
-    }
-
-    @media ${device['desktop-xl']} {
-      padding: 3rem 0;
-    }
-
-    .try-our-free-legal-blogs-section-content--how-it-works-first-image {
-      max-width: 1200px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      align-self: stretch;
-
-      @media ${device['landscape-tablets']} {
-        flex-flow: row-reverse nowrap;
-      }
-    }
-  }
 `

package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.tsx

@@ -3,24 +3,14 @@ import React, { type FC } from 'react'
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent'
 import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types'
 import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled'
-import classNames from 'classnames'
 
 const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
-  const classTry = classNames({
-    default: contentTryOurFreeLegalBlogs.type === 'Default',
-    'wrapper wrapper--responsive our-mission': contentTryOurFreeLegalBlogs.type === 'Our Mission',
-    'wrapper wrapper--responsive our-mission-first-image':
-      contentTryOurFreeLegalBlogs.type === 'Our Mission First Image',
-    'wrapper wrapper--responsive how-it-works': contentTryOurFreeLegalBlogs.type === 'How It Works',
-    'how-it-works-first-image': contentTryOurFreeLegalBlogs.type === 'How It Works First Image'
-  })
   return (
-    <TryOurFreeLegalBlogsSectionStyled className={`try-our-free-legal-blogs-section ${classTry}`}>
+    <TryOurFreeLegalBlogsSectionStyled className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
       <TryOurFreeLegalBlogsContent
         title={contentTryOurFreeLegalBlogs.title}
         image={contentTryOurFreeLegalBlogs.image}
         type={contentTryOurFreeLegalBlogs.type}
-        imageFirstOnMobile={contentTryOurFreeLegalBlogs.imageFirstOnMobile ?? false}
       >
         {contentTryOurFreeLegalBlogs.children}
       </TryOurFreeLegalBlogsContent>

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.js

@@ -10,6 +10,6 @@ export const WhyLawDistrictSection = ({ title, items, userActive, link }) => {
     useEffect(() => {
         setIsUserActive(userActive);
     }, [userActive]);
-    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whySection', children: [_jsx("h2", { className: 'whySection__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !isUserActive && (_jsx(Button, { givenClass: 'whySection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
+    return (_jsxs(WhyLawDistrictSectionStyled, { className: 'whyLawDistrictSection', children: [_jsx("h2", { className: 'why-lawDistrict__title serif --hero', children: title }), _jsx(WhyLawDistrictItems, { items: items }), !isUserActive && (_jsx(Button, { givenClass: 'whyLawDistrictSection__button', label: link.cta, link: link.url, onClick: link.onClick, dataQa: link.dataQa, isExternal: true, hasNoFollow: true }))] }));
 };
 export default WhyLawDistrictSection;

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.js

@@ -6,21 +6,16 @@ export const WhyLawDistrictSectionStyled = styled.section `
   width: 100%;
   padding-top: 2.5rem;
   padding-bottom: 2rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   display: flex;
   flex-direction: column;
 
   @media ${device['landscape-tablets']} {
     padding-bottom: 0rem;
-    padding-left: 0rem;
-    padding-right: 0rem;
     display: block;
   }
 
-  .whySection {
+  .whyLawDistrictSection {
     &__title {
-      padding: 0 1.5rem;
       @media ${device.laptop} {
         padding: 0;
       }

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.styled.ts

@@ -7,21 +7,16 @@ export const WhyLawDistrictSectionStyled = styled.section`
   width: 100%;
   padding-top: 2.5rem;
   padding-bottom: 2rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   display: flex;
   flex-direction: column;
 
   @media ${device['landscape-tablets']} {
     padding-bottom: 0rem;
-    padding-left: 0rem;
-    padding-right: 0rem;
     display: block;
   }
 
-  .whySection {
+  .whyLawDistrictSection {
     &__title {
-      padding: 0 1.5rem;
       @media ${device.laptop} {
         padding: 0;
       }

package/dist/src/components/sections/WhyLawDistrictSection/WhyLawDistrictSection.tsx

@@ -15,13 +15,13 @@ export const WhyLawDistrictSection: React.FC<WhyLawDistrictSectionProps> = ({ ti
   }, [userActive])
 
   return (
-    <WhyLawDistrictSectionStyled className={'whySection'}>
-      <h2 className={'whySection__title serif --hero'}>{title}</h2>
+    <WhyLawDistrictSectionStyled className={'whyLawDistrictSection'}>
+      <h2 className={'why-lawDistrict__title serif --hero'}>{title}</h2>
       <WhyLawDistrictItems items={items} />
 
       {!isUserActive && (
         <Button
-          givenClass='whySection__button'
+          givenClass='whyLawDistrictSection__button'
           label={link.cta}
           link={link.url}
           onClick={link.onClick}

package/dist/src/components/sections/index.d.ts

@@ -1,22 +1,18 @@
-export * from './HeroSection';
+export * from './AboutUsSection';
 export * from './AsideMenuSection';
 export * from './AsSeeInSection';
 export * from './BenefitsRatafiaSection';
 export * from './BlogSection';
-export * from './CardBoxSection';
 export * from './ContactSection';
 export * from './ExpertsSection';
 export * from './FaqSection';
-export * from './Footer';
 export * from './FeaturesRatafiaSection';
 export * from './FunctionalityCardsSection';
 export * from './GuidelinesSection';
 export * from './HowGetYourFormsSection';
 export * from './JumbotronRatafiaSection';
 export * from './JumbotronSimplifiedSection';
-export * from './LawGeniusCardsSection';
 export * from './LegalSection';
-export * from './LawGeniusCardsSection';
 export * from './MidBannerRatafiaSection';
 export * from './MoreDocsSection';
 export * from './PeopleSayAboutUsSection';
@@ -24,11 +20,7 @@ export * from './StepsRatafiaSection';
 export * from './TryItRatafiaSection';
 export * from './TryOurFreeLegalBlogsSection';
 export * from './TryUsSection';
-export * from './TryNowSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';
 export * from './CardStorySection';
-export * from './Header';
-export * from './Footer';
-export * from './AppHeader';

package/dist/src/components/sections/index.js

@@ -1,22 +1,18 @@
-export * from './HeroSection';
+export * from './AboutUsSection';
 export * from './AsideMenuSection';
 export * from './AsSeeInSection';
 export * from './BenefitsRatafiaSection';
 export * from './BlogSection';
-export * from './CardBoxSection';
 export * from './ContactSection';
 export * from './ExpertsSection';
 export * from './FaqSection';
-export * from './Footer';
 export * from './FeaturesRatafiaSection';
 export * from './FunctionalityCardsSection';
 export * from './GuidelinesSection';
 export * from './HowGetYourFormsSection';
 export * from './JumbotronRatafiaSection';
 export * from './JumbotronSimplifiedSection';
-export * from './LawGeniusCardsSection';
 export * from './LegalSection';
-export * from './LawGeniusCardsSection';
 export * from './MidBannerRatafiaSection';
 export * from './MoreDocsSection';
 export * from './PeopleSayAboutUsSection';
@@ -24,11 +20,7 @@ export * from './StepsRatafiaSection';
 export * from './TryItRatafiaSection';
 export * from './TryOurFreeLegalBlogsSection';
 export * from './TryUsSection';
-export * from './TryNowSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';
 export * from './CardStorySection';
-export * from './Header';
-export * from './Footer';
-export * from './AppHeader';

package/dist/src/components/sections/index.ts

@@ -1,22 +1,18 @@
-export * from './HeroSection'
+export * from './AboutUsSection'
 export * from './AsideMenuSection'
 export * from './AsSeeInSection'
 export * from './BenefitsRatafiaSection'
 export * from './BlogSection'
-export * from './CardBoxSection'
 export * from './ContactSection'
 export * from './ExpertsSection'
 export * from './FaqSection'
-export * from './Footer'
 export * from './FeaturesRatafiaSection'
 export * from './FunctionalityCardsSection'
 export * from './GuidelinesSection'
 export * from './HowGetYourFormsSection'
 export * from './JumbotronRatafiaSection'
 export * from './JumbotronSimplifiedSection'
-export * from './LawGeniusCardsSection'
 export * from './LegalSection'
-export * from './LawGeniusCardsSection'
 export * from './MidBannerRatafiaSection'
 export * from './MoreDocsSection'
 export * from './PeopleSayAboutUsSection'
@@ -24,11 +20,7 @@ export * from './StepsRatafiaSection'
 export * from './TryItRatafiaSection'
 export * from './TryOurFreeLegalBlogsSection'
 export * from './TryUsSection'
-export * from './TryNowSection'
 export * from './UnsubscribeSection'
 export * from './WhyLawDistrictSection'
 export * from './LearnMoreSection'
 export * from './CardStorySection'
-export * from './Header'
-export * from './Footer'
-export * from './AppHeader'

package/dist/src/globalStyles/animations.scss

@@ -55,14 +55,9 @@
 }
 
 .background-ratafia-animation {
-  background: radial-gradient(
-      90.31% 103.09% at 74.2% -62.04%,
-      var(--primary-main-dark-2) 0%,
-      var(--primary-main-dark-1) 100%
-    ),
-    radial-gradient(80.63% 44.37% at 73.54% 70.76%, var(--primary-main) 0%, var(--primary-main-dark-2) 100%),
-    radial-gradient(92.19% 33.51% at 0% 0%, var(--primary-main) 0%, var(--primary-main-dark-1) 100%),
-    var(--primary-main-dark-2);
+  background: radial-gradient(90.31% 103.09% at 74.2% -62.04%, rgba(7, 128, 128, 0.3) 0%, #062f3c 100%),
+    radial-gradient(80.63% 44.37% at 73.54% 70.76%, #078080 0%, #052a37 100%),
+    radial-gradient(92.19% 33.51% at 0% 0%, #078080 0%, #042b39 100%), #032a38;
   background-blend-mode: lighten, lighten, lighten, normal;
   background-size: 150% 150%;
   animation: gradientAnimation 4s ease infinite;

package/dist/src/globalStyles/breakpoints.d.ts

@@ -2,7 +2,6 @@ interface Size {
     xxs: string;
     xs: string;
     sm: string;
-    tab: string;
     md: string;
     lg: string;
     xl: string;
@@ -13,7 +12,6 @@ export declare const device: {
     mobile: string;
     'portrait-tablets': string;
     'landscape-tablets': string;
-    tablets: string;
     laptop: string;
     desktop: string;
     'desktop-xl': string;

package/dist/src/globalStyles/breakpoints.js

@@ -2,7 +2,6 @@ export const size = {
     xxs: '328px', // for very small screen mobile
     xs: '575px', // for small screen mobile
     sm: '720px', // for mobile screen
-    tab: '768px', // for tablets in portrait
     md: '960px', // for tablets
     lg: '1200px', // for laptops
     xl: '1600px', // for desktop / monitors
@@ -12,7 +11,6 @@ export const device = {
     mobile: `(max-width: ${size.xs})`,
     'portrait-tablets': `(min-width: ${size.xs})`,
     'landscape-tablets': `(min-width: ${size.sm})`,
-    tablets: `(min-width: ${size.tab})`,
     laptop: `(min-width: ${size.md})`,
     desktop: `(min-width: ${size.lg})`,
     'desktop-xl': `(min-width: ${size.xl})`

package/dist/src/globalStyles/breakpoints.ts

@@ -2,7 +2,6 @@ interface Size {
   xxs: string
   xs: string
   sm: string
-  tab: string
   md: string
   lg: string
   xl: string
@@ -13,7 +12,6 @@ export const size: Size = {
   xxs: '328px', // for very small screen mobile
   xs: '575px', // for small screen mobile
   sm: '720px', // for mobile screen
-  tab: '768px', // for tablets in portrait
   md: '960px', // for tablets
   lg: '1200px', // for laptops
   xl: '1600px', // for desktop / monitors
@@ -24,7 +22,6 @@ export const device = {
   mobile: `(max-width: ${size.xs})`,
   'portrait-tablets': `(min-width: ${size.xs})`,
   'landscape-tablets': `(min-width: ${size.sm})`,
-  tablets: `(min-width: ${size.tab})`,
   laptop: `(min-width: ${size.md})`,
   desktop: `(min-width: ${size.lg})`,
   'desktop-xl': `(min-width: ${size.xl})`

package/dist/src/globalStyles/themes.scss

@@ -20,7 +20,9 @@ html {
 
   --snackbar-reminder-bg: #f2bd6a;
   --snackbar-reminder-border: #cd9a4c;
+}
 
+html {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -52,12 +54,9 @@ html {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='secondaryorange'] {
+html[data-theme='districtlaws'] {
   --primary-main-light-6: #fff5ee;
   --primary-main-light-5: #ffe1cc;
   --primary-main-light-4: #ffc59b;
@@ -89,12 +88,9 @@ html[data-theme='secondaryorange'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='secondaryblue'] {
+html[data-theme='lawdistricts'] {
   --primary-main-light-6: #f9f9ff;
   --primary-main-light-5: #eceeff;
   --primary-main-light-4: #c3c9ff;
@@ -126,12 +122,9 @@ html[data-theme='secondaryblue'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='primarygreen'] {
+html[data-theme='lawdistrict'] {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -163,12 +156,9 @@ html[data-theme='primarygreen'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='primarygreen'] {
+html[data-theme='lawdistrict'] {
   .document-status {
     &.--in-progress {
       background-color: var(--secondary-main-light-4);
@@ -194,7 +184,7 @@ html[data-theme='primarygreen'] {
   }
 }
 
-html[data-theme='secondarypurple'] {
+html[data-theme='lawsdistrict'] {
   --primary-main-light-6: #f9f5ff;
   --primary-main-light-5: #e3d1ff;
   --primary-main-light-4: #b68aff;
@@ -226,12 +216,9 @@ html[data-theme='secondarypurple'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='secondarygreen'] {
+html[data-theme='lawdistrictinfo'] {
   --primary-main-light-6: #f1fff7;
   --primary-main-light-5: #d5ffe6;
   --primary-main-light-4: #6affa5;
@@ -263,12 +250,9 @@ html[data-theme='secondarygreen'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='secondarybrown'] {
+html[data-theme='uslawdistrict'] {
   --primary-main-light-6: #fffbf2;
   --primary-main-light-5: #fff6e5;
   --primary-main-light-4: #ffe6b7;
@@ -300,12 +284,9 @@ html[data-theme='secondarybrown'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
 }
 
-html[data-theme='secondaryyellow'] {
+html[data-theme='lawdistrictonline'] {
   --primary-main-light-6: #f9ffea;
   --primary-main-light-5: #f0ffc4;
   --primary-main-light-4: #e6ff9f;
@@ -337,62 +318,4 @@ html[data-theme='secondaryyellow'] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
-
-  --font-main: 'Inter', sans-serif;
-  --font-secondary: 'Lora', serif;
-}
-
-html[data-theme='primaryblue'] {
-  --button: #1039f5;
-  --button-secondary: #1039f5;
-  --button-hover: #3970ff;
-  --button-tertiary: #3970ff;
-  --button-2: #07144b;
-  --button-4: #07144b;
-  --button-2-hover: #163399;
-  --button-4-hover: #163399;
-  --snackbar-success-color: #163399;
-  --button-4-color: #e9f5ff;
-  --button-secondary-hover: #d7ecff;
-  --feeback-success: #d7ecff;
-  --button-tertiary-hover: #b7daff;
-  --snackbar-success-bg: #8bc1ff;
-  --snackbar-success-border: #5e99ff;
-  --snackbar-reminder-bg: #f98116;
-  --snackbar-reminder-border: #ea660c;
-
-  --primary-main-light-6: #e9f5ff;
-  --primary-main-light-5: #d7ecff;
-  --primary-main-light-4: #b7daff;
-  --primary-main-light-3: #8bc1ff;
-  --primary-main-light-2: #5e99ff;
-  --primary-main-light-1: #1039f5;
-  --primary-main: #3970ff;
-  --primary-main-dark-1: #163399;
-  --primary-main-dark-1-rgb: 2, 55, 74;
-  --primary-main-dark-2: #07144b;
-  --secondary-main-light-5: #fff6ed;
-  --secondary-main-light-4: #fff0d5;
-  --secondary-main-light-3: #fedcaa;
-  --secondary-main-light-2: #fdc374;
-  --secondary-main-light-1: #fb9e3c;
-  --secondary-main: #f98116;
-  --secondary-main-dark-1: #ea660c;
-  --secondary-main-dark-2: #d3530d;
-  --neutral-main: #1f2532;
-  --neutral-neutral-1: #2f3a4b;
-  --neutral-neutral-2: #496080;
-  --neutral-neutral-3: #b5babd;
-  --neutral-neutral-4: #d2d9e5;
-  --neutral-neutral-5: #ebeef3;
-  --neutral-neutral-6: #f5f7fa;
-  --error-main: #d63737;
-  --error-error-2: #f09d9e;
-  --error-error-3: #ffecef;
-  --others-white: #ffffff;
-  --others-disabled: #6b7280;
-  --others-black: #000;
-
-  --font-main: 'Poppins', sans-serif;
-  --font-secondary: 'Poppins', sans-serif;
 }

package/dist/src/globalStyles/variablesCss.scss

@@ -14,20 +14,3 @@ html {
 
   --global-gap: 1rem;
 }
-
-html[data-theme='primaryblue'] {
-  --font-sans: 'Poppins', sans-serif;
-  --font-serif: 'Poppins', serif;
-
-  --s-border-radius: 0.25rem;
-  --m-border-radius: 0.5rem;
-  --l-border-radius: 1rem;
-
-  --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
-  --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
-  --box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
-  --box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
-  --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
-
-  --global-gap: 1rem;
-}

package/dist/src/hooks/useIntersectionObserver.d.ts

@@ -1,7 +1,5 @@
-import { RefObject } from 'react';
-interface UseIntersectionObserverParams {
-    options?: IntersectionObserverInit;
-    defaultIntersecting?: boolean;
-}
-export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T | null>, boolean];
-export {};
+import { type LegacyRef } from 'react';
+export declare function useIntersectionObserver({ options, defaultIntersecting }: {
+    options?: {} | undefined;
+    defaultIntersecting?: boolean | undefined;
+}): [LegacyRef<HTMLDivElement> | undefined, boolean];

package/dist/src/hooks/useIntersectionObserver.js

@@ -1,19 +1,21 @@
 import { useEffect, useRef, useState } from 'react';
-export function useIntersectionObserver({ options = {}, defaultIntersecting = false } = {}) {
+export function useIntersectionObserver({ options = {}, defaultIntersecting = false }) {
     const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting);
     const elementRef = useRef(null);
     useEffect(() => {
         const currentElement = elementRef.current;
-        if (!currentElement)
-            return;
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 setIsIntersecting(entry.isIntersecting);
             });
         }, options);
-        observer.observe(currentElement);
+        if (currentElement != null) {
+            observer.observe(currentElement);
+        }
         return () => {
-            observer.disconnect();
+            if (currentElement != null) {
+                observer.unobserve(currentElement);
+            }
         };
     }, [options]);
     return [elementRef, isIntersecting];

package/dist/src/hooks/useIntersectionObserver.tsx

@@ -1,20 +1,14 @@
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { type LegacyRef, useEffect, useRef, useState } from 'react'
 
-interface UseIntersectionObserverParams {
-  options?: IntersectionObserverInit
-  defaultIntersecting?: boolean
-}
-
-export function useIntersectionObserver<T extends HTMLElement>({
+export function useIntersectionObserver({
   options = {},
   defaultIntersecting = false
-}: UseIntersectionObserverParams = {}): [RefObject<T | null>, boolean] {
+}): [LegacyRef<HTMLDivElement> | undefined, boolean] {
   const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
-  const elementRef = useRef<T>(null)
+  const elementRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const currentElement = elementRef.current
-    if (!currentElement) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -22,10 +16,14 @@ export function useIntersectionObserver<T extends HTMLElement>({
       })
     }, options)
 
-    observer.observe(currentElement)
+    if (currentElement != null) {
+      observer.observe(currentElement)
+    }
 
     return () => {
-      observer.disconnect()
+      if (currentElement != null) {
+        observer.unobserve(currentElement)
+      }
     }
   }, [options])