@npm_leadtech/legal-lib-components 7.101.0 → 7.102.1

package/dist/src/components/organisms/TopFooter/TopFooter.tsx

@@ -7,9 +7,7 @@ import { TopFooterProps } from './TopFooterProps.types'
 export const TopFooter: React.FC<TopFooterProps> = ({ menus, contactInfo, trustPilotWidget }) => {
   return (
     <TopFooterStyled className='footer__wrapper'>
-      {menus?.map((menu) => (
-        <FooterMenu key={menu.title} {...menu} />
-      ))}
+      {menus?.map((menu) => <FooterMenu key={menu.title} {...menu} />)}
 
       {(contactInfo || Boolean(trustPilotWidget)) && (
         <SelectorTrustpilotWrapper>

package/dist/src/components/organisms/Wizard/Wizard.js

@@ -36,13 +36,6 @@ export const Wizard = ({ children, isHashEnabled = false, classNames }) => {
     };
     const footer = getSpecificComponentByDisplayName(FOOTER);
     const header = getSpecificComponentByDisplayName(HEADER);
-    const memoizedNavigationControls = useMemo(() => ({
-        goToStepByIndex,
-        nextStep,
-        previousStep,
-        setStepByHash,
-        currentStep: step,
-        totalSteps: filteredChilds.length
-    }), [goToStepByIndex, nextStep, previousStep, setStepByHash, step, filteredChilds.length]);
+    const memoizedNavigationControls = useMemo(() => ({ goToStepByIndex, nextStep, previousStep, setStepByHash, currentStep: step }), [goToStepByIndex, nextStep, previousStep, setStepByHash, step]);
     return (_jsxs(WizardContext.Provider, { value: memoizedNavigationControls, children: [header, _jsxs("div", { className: classNames, children: [currentStep, footer] })] }));
 };

package/dist/src/components/organisms/Wizard/Wizard.tsx

@@ -48,15 +48,8 @@ export const Wizard: React.FC<WizardProps> = ({ children, isHashEnabled = false,
   const header = getSpecificComponentByDisplayName(HEADER)
 
   const memoizedNavigationControls = useMemo(
-    () => ({
-      goToStepByIndex,
-      nextStep,
-      previousStep,
-      setStepByHash,
-      currentStep: step,
-      totalSteps: filteredChilds.length
-    }),
-    [goToStepByIndex, nextStep, previousStep, setStepByHash, step, filteredChilds.length]
+    () => ({ goToStepByIndex, nextStep, previousStep, setStepByHash, currentStep: step }),
+    [goToStepByIndex, nextStep, previousStep, setStepByHash, step]
   )
 
   return (

package/dist/src/components/organisms/Wizard/context/WizardContext.d.ts

@@ -4,7 +4,6 @@ interface WizardContextInterFace {
     goToStepByIndex: (step: number) => void;
     setStepByHash: (hash: string) => void;
     currentStep: number;
-    totalSteps: number;
 }
 export declare const WizardContext: import("react").Context<WizardContextInterFace>;
 export {};

package/dist/src/components/organisms/Wizard/context/WizardContext.js

@@ -4,6 +4,5 @@ export const WizardContext = createContext({
     nextStep: () => { },
     goToStepByIndex: () => { },
     setStepByHash: () => { },
-    currentStep: 0,
-    totalSteps: 0
+    currentStep: 0
 });

package/dist/src/components/organisms/Wizard/context/WizardContext.tsx

@@ -6,7 +6,6 @@ interface WizardContextInterFace {
   goToStepByIndex: (step: number) => void
   setStepByHash: (hash: string) => void
   currentStep: number
-  totalSteps: number
 }
 
 export const WizardContext = createContext<WizardContextInterFace>({
@@ -14,6 +13,5 @@ export const WizardContext = createContext<WizardContextInterFace>({
   nextStep: () => {},
   goToStepByIndex: () => {},
   setStepByHash: () => {},
-  currentStep: 0,
-  totalSteps: 0
+  currentStep: 0
 })

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

@@ -3,6 +3,6 @@ import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
 import { DesktopMenu, MobileMenu } from '../../organisms';
 import { Logo } from '../../atoms';
 import './AppHeader.scss';
-export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, sitePhoneBorder, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
-    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, phoneNumberBorder: sitePhoneBorder, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
+export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
+    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
 };

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

@@ -9,7 +9,6 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
   siteName = 'LawDistrict',
   homeUrl = '/',
   sitePhone,
-  sitePhoneBorder,
   scheduleText,
   headerFullWidth,
   menuList,
@@ -36,13 +35,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
           <Logo siteName={siteName} width='188' height='32' />
         </a>
 
-        <DesktopMenu
-          phoneNumber={sitePhone}
-          phoneNumberBorder={sitePhoneBorder}
-          menuList={menuList}
-          userActions={userActions}
-          homeUrl={homeUrl}
-        />
+        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
 
         <MobileMenu
           closeText={closeText}

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -6,7 +6,6 @@ export interface AppHeaderProps {
     siteName: string;
     homeUrl: string;
     sitePhone: string;
-    sitePhoneBorder?: boolean;
     scheduleText: string;
     headerFullWidth: boolean;
     menuList?: {

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -7,7 +7,6 @@ export interface AppHeaderProps {
   siteName: string
   homeUrl: string
   sitePhone: string
-  sitePhoneBorder?: boolean
   scheduleText: string
   headerFullWidth: boolean
   menuList?: {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled';
 import { CardBox } from '../../atoms';
 export const CardBoxMinimalSection = ({ cards }) => {
-    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon }, id))) }));
+    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => _jsx(CardBox, { text: text, icon: icon }, id)) }));
 };
 export const CardBoxFeaturedSection = ({ cards }) => {
     return (_jsx(CardBoxFeaturedSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon, padding: '16px', gap: '0.5rem', borderRadius: '8px' }, id))) }));

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

@@ -7,9 +7,7 @@ import { type CardBoxSectionProps } from './CardBoxSectionProps'
 export const CardBoxMinimalSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
   return (
     <CardBoxMinimalSectionStyled>
-      {cards?.map(({ text, icon, id }) => (
-        <CardBox key={id} text={text} icon={icon} />
-      ))}
+      {cards?.map(({ text, icon, id }) => <CardBox key={id} text={text} icon={icon} />)}
     </CardBoxMinimalSectionStyled>
   )
 }

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

@@ -6,5 +6,5 @@ export const FaqSection = ({ groups, givenClass }) => {
     if (!groups?.length)
         return null;
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
 };

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

@@ -11,9 +11,7 @@ export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) =>
 
   return (
     <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
-      {groups?.map((group) => (
-        <FaqGroup key={group.id} {...group} />
-      ))}
+      {groups?.map((group) => <FaqGroup key={group.id} {...group} />)}
     </FaqSectionStyled>
   )
 }

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

@@ -3,11 +3,11 @@ import { StepsRatafiaContent } from '../../organisms';
 import { StepsRatafiaSectionStyled } from './StepsRatafiaSection.styled';
 import { Video } from '../../atoms';
 import classNames from 'classnames';
-const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl, videoMimeType }) => {
+const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl }) => {
     const isEsignatureLanding = !videoUrl;
     const classnames = classNames({
         '--is-esignature': isEsignatureLanding
     });
-    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, preload: 'none', poster: videoPosterUrl, videoMimeType: videoMimeType }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
+    return (_jsx(StepsRatafiaSectionStyled, { className: 'steps-ratafia-section', children: _jsxs("div", { className: `steps-ratafia-section__wrapper ${classnames}`, children: [!isEsignatureLanding ? (_jsx("div", { className: 'steps-ratafia-section__wrapper__video', children: _jsx(Video, { videoSrcURL: videoUrl, preload: 'none', poster: videoPosterUrl }) })) : (_jsx("div", { className: 'steps-ratafia-section__wrapper__image', children: mainImage })), _jsx("div", { className: 'steps-ratafia-section__wrapper__content', children: _jsx(StepsRatafiaContent, { title: title, steps: steps, description: description }) })] }) }));
 };
 export default StepsRatafiaSection;

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

@@ -25,7 +25,7 @@ export const StepsRatafiaSectionStyled = styled.section `
       @media ${device.desktop} {
         padding: 3rem 0 3rem 0;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         flex-direction: row;
         justify-content: center;
         align-items: center;
@@ -36,7 +36,7 @@ export const StepsRatafiaSectionStyled = styled.section `
         justify-content: center;
         align-items: center;
         max-width: 1024px;
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           max-width: 720px;
         }
         img {
@@ -51,7 +51,7 @@ export const StepsRatafiaSectionStyled = styled.section `
         justify-content: center;
 
         max-width: 1024px;
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           max-width: 720px;
         }
         video {
@@ -74,7 +74,7 @@ export const StepsRatafiaSectionStyled = styled.section `
         @media ${device.desktop} {
           padding: 3rem 0 3rem 0;
         }
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           flex-direction: row;
           justify-content: center;
           align-items: center;
@@ -94,10 +94,10 @@ export const StepsRatafiaSectionStyled = styled.section `
 
     .step-ratafia-card-list {
       flex-direction: column;
-      @media ${device['landscape-tablets']} {
+      @media ${device['laptop']} {
         flex-direction: row;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         flex-direction: column;
         justify-content: center;
         align-items: center;
@@ -109,7 +109,7 @@ export const StepsRatafiaSectionStyled = styled.section `
       @media ${device['laptop']} {
         width: 33%;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         width: 100%;
       }
     }

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

@@ -26,7 +26,7 @@ export const StepsRatafiaSectionStyled = styled.section`
       @media ${device.desktop} {
         padding: 3rem 0 3rem 0;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         flex-direction: row;
         justify-content: center;
         align-items: center;
@@ -37,7 +37,7 @@ export const StepsRatafiaSectionStyled = styled.section`
         justify-content: center;
         align-items: center;
         max-width: 1024px;
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           max-width: 720px;
         }
         img {
@@ -52,7 +52,7 @@ export const StepsRatafiaSectionStyled = styled.section`
         justify-content: center;
 
         max-width: 1024px;
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           max-width: 720px;
         }
         video {
@@ -75,7 +75,7 @@ export const StepsRatafiaSectionStyled = styled.section`
         @media ${device.desktop} {
           padding: 3rem 0 3rem 0;
         }
-        @media ${device['desktop']} {
+        @media ${device['desktop-xl']} {
           flex-direction: row;
           justify-content: center;
           align-items: center;
@@ -95,10 +95,10 @@ export const StepsRatafiaSectionStyled = styled.section`
 
     .step-ratafia-card-list {
       flex-direction: column;
-      @media ${device['landscape-tablets']} {
+      @media ${device['laptop']} {
         flex-direction: row;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         flex-direction: column;
         justify-content: center;
         align-items: center;
@@ -110,7 +110,7 @@ export const StepsRatafiaSectionStyled = styled.section`
       @media ${device['laptop']} {
         width: 33%;
       }
-      @media ${device['desktop']} {
+      @media ${device['desktop-xl']} {
         width: 100%;
       }
     }

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

@@ -12,8 +12,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
   videoUrl,
   mainImage,
   description,
-  videoPosterUrl,
-  videoMimeType
+  videoPosterUrl
 }) => {
   const isEsignatureLanding = !videoUrl
   const classnames = classNames({
@@ -25,7 +24,7 @@ const StepsRatafiaSection: FC<StepsRatafiaSectionProps> = ({
       <div className={`steps-ratafia-section__wrapper ${classnames}`}>
         {!isEsignatureLanding ? (
           <div className='steps-ratafia-section__wrapper__video'>
-            <Video videoSrcURL={videoUrl} preload='none' poster={videoPosterUrl} videoMimeType={videoMimeType} />
+            <Video videoSrcURL={videoUrl} preload='none' poster={videoPosterUrl} />
           </div>
         ) : (
           <div className='steps-ratafia-section__wrapper__image'>{mainImage}</div>

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSectionProps.types.d.ts

@@ -7,5 +7,4 @@ export interface StepsRatafiaSectionProps {
     mainImage?: React.ReactNode;
     description?: React.ReactNode;
     videoPosterUrl?: string;
-    videoMimeType?: string;
 }

package/dist/src/components/sections/StepsRatafiaSection/StepsRatafiaSectionProps.types.ts

@@ -8,5 +8,4 @@ export interface StepsRatafiaSectionProps {
   mainImage?: React.ReactNode
   description?: React.ReactNode
   videoPosterUrl?: string
-  videoMimeType?: string
 }

package/dist/src/globalStyles/animations.scss

@@ -55,8 +55,11 @@
 }
 
 .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%),
+  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);

package/dist/src/globalStyles/variables.scss

@@ -1,10 +1,6 @@
 @use 'sass:math';
 
-// =============================================================================
-// Figma tokens reference: figma-tokens/
-// =============================================================================
-
-// Breakpoints (relate to figma-tokens/grids/Mode 1.tokens.json: grid-xl, grid-l, grid-m, grid-s)
+// Breakpoints
 $xl: 1600px;
 $lg: 1200px;
 $md: 960px;
@@ -12,63 +8,48 @@ $sm: 720px;
 $xs: 575px;
 $xxs: 328px;
 
-// Colors — figma-tokens/color (Legalfinity.tokens.json | Lawdistrict.tokens.json)
-// primary.* ↔ primary/50 … primary/900 | secondary.* ↔ secondary/50 … secondary/700
-// neutral.* ↔ neutral/25, 50, 200, 400, 600, 800, 900, white | error.* ↔ error/20, 200, 500
-// others.* ↔ others/black, others/disabled
+// Colors
 $colors: (
   primary: (
     main-light-6: var(--primary-main-light-6),
-    // ~ primary/50–100
     main-light-5: var(--primary-main-light-5),
     main-light-4: var(--primary-main-light-4),
     main-light-3: var(--primary-main-light-3),
     main-light-2: var(--primary-main-light-2),
     main-light-1: var(--primary-main-light-1),
     main: var(--primary-main),
-    // ~ primary/500
     main-dark-1: var(--primary-main-dark-1),
     main-dark-1-rgb: var(--primary-main-dark-1-rgb),
-    main-dark-2: var(--primary-main-dark-2) // ~ primary/800–900
+    main-dark-2: var(--primary-main-dark-2)
   ),
   secondary: (
     main-light-5: var(--secondary-main-light-5),
-    // ~ secondary/50–100
     main-light-4: var(--secondary-main-light-4),
     main-light-3: var(--secondary-main-light-3),
     main-light-2: var(--secondary-main-light-2),
     main-light-1: var(--secondary-main-light-1),
     main: var(--secondary-main),
-    // ~ secondary/400–500
     main-dark-1: var(--secondary-main-dark-1),
-    main-dark-2: var(--secondary-main-dark-2) // ~ secondary/600–700
+    main-dark-2: var(--secondary-main-dark-2)
   ),
   neutral: (
     main: var(--neutral-main),
-    // ~ neutral/600–800
     neutral-1: var(--neutral-neutral-1),
-    // ~ neutral/25
     neutral-2: var(--neutral-neutral-2),
-    // ~ neutral/50–200
     neutral-3: var(--neutral-neutral-3),
     neutral-4: var(--neutral-neutral-4),
-    // ~ neutral/400
     neutral-5: var(--neutral-neutral-5),
-    neutral-6: var(--neutral-neutral-6) // ~ neutral/800–900
+    neutral-6: var(--neutral-neutral-6)
   ),
   error: (
     main: var(--error-main),
-    // ~ error/500
     error-2: var(--error-error-2),
-    // ~ error/200
     error-3: var(--error-error-3)
   ),
   others: (
     white: var(--others-white),
-    // ~ neutral/white
     disabled: var(--others-disabled),
-    // others/disabled
-    black: var(--others-black) // others/black
+    black: var(--others-black)
   )
 );
 
@@ -77,19 +58,19 @@ $colors: (
   @return $color;
 }
 
-// Box shadow — figma-tokens/box-shadow/value.tokens.json (small | medium)
+// Box shadow
 $box-shadow-small: var(--box-shadow-small);
 $box-shadow-medium: var(--box-shadow-medium);
 $box-shadow-menu: var(--box-shadow-menu);
 $box-shadow-tippy-box: var(--box-shadow-tippy-box);
 $box-shadow-container: var(--box-shadow-container);
 
-// Fonts — figma-tokens/font (font-family/primary, font-family/secondary; Lawdistrict: Inter + Lora)
-$font-sans: 'Inter', sans-serif; // font-family/primary (Lawdistrict)
-$font-serif: 'Lora', serif; // font-family/secondary (Lawdistrict)
+// Fonts
+$font-sans: 'Inter', sans-serif;
+$font-serif: 'Lora', serif;
 
-// Layout (max-width aligns with breakpoints; spacing scale in figma-tokens/border-and-spacing/Mode 1.tokens.json)
+// Layout
 $max-width: $lg;
 
-// menu
+//menu
 $menu-height-mobile: 3.25rem;

package/dist/src/globalStyles/variablesCss.scss

@@ -1,30 +1,20 @@
-// =============================================================================
-// Figma tokens reference: figma-tokens/
-// =============================================================================
-
 html {
-  // figma-tokens/font: font-family/primary, font-family/secondary (Lawdistrict: Inter, Lora)
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
 
-  // figma-tokens/border-and-spacing/Mode 1.tokens.json: border-radius/sm (4px), border-radius/md (8px), border-radius/l (16px)
   --s-border-radius: 0.25rem;
   --m-border-radius: 0.5rem;
   --l-border-radius: 1rem;
 
-  // figma-tokens/box-shadow/value.tokens.json:
-  // small, medium (color uses primary dark; menu/tippy/container are variants)
   --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);
 
-  // figma-tokens/border-and-spacing/Mode 1.tokens.json: spacing scale (e.g. spacing/sm 16px → 1rem)
   --global-gap: 1rem;
 }
 
-// Theme: Legalfinity — figma-tokens/font/Legalfinity.tokens.json (font-family/primary, secondary → Poppins)
 html[data-theme='primaryblue'] {
   --font-sans: 'Poppins', sans-serif;
   --font-serif: 'Poppins', serif;

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

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

package/dist/src/hooks/useIntersectionObserver.js

@@ -4,7 +4,7 @@ export function useIntersectionObserver({ options = {}, defaultIntersecting = fa
     const elementRef = useRef(null);
     useEffect(() => {
         const currentElement = elementRef.current;
-        if (currentElement == null)
+        if (!currentElement)
             return;
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {

package/dist/src/hooks/useIntersectionObserver.tsx

@@ -1,4 +1,4 @@
-import { type RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 
 interface UseIntersectionObserverParams {
   options?: IntersectionObserverInit
@@ -8,13 +8,13 @@ interface UseIntersectionObserverParams {
 export function useIntersectionObserver<T extends HTMLElement>({
   options = {},
   defaultIntersecting = false
-}: UseIntersectionObserverParams = {}): [RefObject<T>, boolean] {
+}: UseIntersectionObserverParams = {}): [RefObject<T | null>, boolean] {
   const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
-  const elementRef = useRef<T>(null) as RefObject<T>
+  const elementRef = useRef<T>(null)
 
   useEffect(() => {
     const currentElement = elementRef.current
-    if (currentElement == null) return
+    if (!currentElement) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {