@npm_leadtech/legal-lib-components 7.102.1 → 7.102.2

package/dist/src/components/sections/LayoutRatafiaSection/LayoutRatafiaSection.styled.d.ts

@@ -1 +1 @@
-export declare const LayoutRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const LayoutRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/LearnMoreSection/LearnMoreSection.styled.d.ts

@@ -1 +1 @@
-export declare const LearnMoreSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const LearnMoreSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/LegalSection/LegalSection.styled.d.ts

@@ -1 +1 @@
-export declare const LegalSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const LegalSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/MidBannerRatafiaSection/MidBannerRatafiaSection.styled.d.ts

@@ -1 +1 @@
-export declare const MidBannerRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const MidBannerRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/PeopleSayAboutUsSection/PeopleSayAboutUsSection.styled.d.ts

@@ -1 +1 @@
-export declare const PeopleSayAboutUsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const PeopleSayAboutUsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

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 }) => {
+const StepsRatafiaSection = ({ title, steps, videoUrl, mainImage, description, videoPosterUrl, videoMimeType }) => {
     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 }) })) : (_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, 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 }) })] }) }));
 };
 export default StepsRatafiaSection;

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

@@ -1 +1 @@
-export declare const StepsRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const StepsRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

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-xl']} {
+      @media ${device['desktop']} {
         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-xl']} {
+        @media ${device['desktop']} {
           max-width: 720px;
         }
         img {
@@ -51,7 +51,7 @@ export const StepsRatafiaSectionStyled = styled.section `
         justify-content: center;
 
         max-width: 1024px;
-        @media ${device['desktop-xl']} {
+        @media ${device['desktop']} {
           max-width: 720px;
         }
         video {
@@ -74,7 +74,7 @@ export const StepsRatafiaSectionStyled = styled.section `
         @media ${device.desktop} {
           padding: 3rem 0 3rem 0;
         }
-        @media ${device['desktop-xl']} {
+        @media ${device['desktop']} {
           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['laptop']} {
+      @media ${device['landscape-tablets']} {
         flex-direction: row;
       }
-      @media ${device['desktop-xl']} {
+      @media ${device['desktop']} {
         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-xl']} {
+      @media ${device['desktop']} {
         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-xl']} {
+      @media ${device['desktop']} {
         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-xl']} {
+        @media ${device['desktop']} {
           max-width: 720px;
         }
         img {
@@ -52,7 +52,7 @@ export const StepsRatafiaSectionStyled = styled.section`
         justify-content: center;
 
         max-width: 1024px;
-        @media ${device['desktop-xl']} {
+        @media ${device['desktop']} {
           max-width: 720px;
         }
         video {
@@ -75,7 +75,7 @@ export const StepsRatafiaSectionStyled = styled.section`
         @media ${device.desktop} {
           padding: 3rem 0 3rem 0;
         }
-        @media ${device['desktop-xl']} {
+        @media ${device['desktop']} {
           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['laptop']} {
+      @media ${device['landscape-tablets']} {
         flex-direction: row;
       }
-      @media ${device['desktop-xl']} {
+      @media ${device['desktop']} {
         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-xl']} {
+      @media ${device['desktop']} {
         width: 100%;
       }
     }

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

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

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

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

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

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

package/dist/src/components/sections/TryItRatafiaSection/TryItRatafiaSection.styled.d.ts

@@ -1 +1 @@
-export declare const TryItRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const TryItRatafiaSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/TryNowSection/TryNowSection.styled.d.ts

@@ -1 +1 @@
-export declare const TryNowSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const TryNowSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

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

@@ -1 +1 @@
-export declare const TryOurFreeLegalBlogsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const TryOurFreeLegalBlogsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/TryUsSection/TryUsSection.styled.d.ts

@@ -1 +1 @@
-export declare const TryUsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const TryUsSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/components/sections/UnsubscribeSection/UnsubscribeSection.styled.d.ts

@@ -1 +1 @@
-export declare const UnsubscribeSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const UnsubscribeSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

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

@@ -1 +1 @@
-export declare const WhyLawDistrictSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const WhyLawDistrictSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;

package/dist/src/globalStyles/animations.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables';
 
 @keyframes rotate {
   100% {
@@ -55,11 +55,8 @@
 }
 
 .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/base.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mediaqueries';
+@use 'variables';
+@use 'mediaqueries';
 
 html,
 body {
@@ -42,11 +42,11 @@ a {
 }
 
 .wrapper {
-  max-width: $md;
+  max-width: variables.$md;
   margin: 0 auto;
   width: 100%;
-  @include desktop {
-    max-width: $max-width;
+  @include mediaqueries.desktop {
+    max-width: variables.$max-width;
   }
 }
 

package/dist/src/globalStyles/functions.scss

@@ -1,16 +1,16 @@
-@import 'mediaqueries';
+@use 'mediaqueries';
 
 @mixin flex-row($columns, $margin, $breakpoint: null) {
   max-width: 100%;
   min-width: 100%;
   width: 100%;
   @if $breakpoint==null {
-    @include landscape-tablets {
+    @include mediaqueries.landscape-tablets {
       max-width: calc(100% / #{$columns} - #{$margin});
       min-width: calc(100% / #{$columns} - #{$margin});
     }
   } @else {
-    @include custom-device($breakpoint) {
+    @include mediaqueries.custom-device($breakpoint) {
       max-width: calc(100% / #{$columns} - #{$margin});
       min-width: calc(100% / #{$columns} - #{$margin});
     }

package/dist/src/globalStyles/layout.scss

@@ -1,20 +1,20 @@
-@import 'variables';
-@import 'mediaqueries';
+@use 'variables';
+@use 'mediaqueries';
 
 body {
-  min-height: calc(100vh - #{$menu-height-mobile});
-  @include portrait-tablets {
+  min-height: calc(100vh - #{variables.$menu-height-mobile});
+  @include mediaqueries.portrait-tablets {
     min-height: 100vh;
   }
 }
 
 .wrapper {
-  max-width: $md;
+  max-width: variables.$md;
   margin: 0 auto;
   width: 100%;
 
-  @include desktop {
-    max-width: $max-width;
+  @include mediaqueries.desktop {
+    max-width: variables.$max-width;
   }
 }
 
@@ -22,7 +22,7 @@ body {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 
-  @include desktop {
+  @include mediaqueries.desktop {
     padding-left: 0;
     padding-right: 0;
   }
@@ -32,7 +32,7 @@ body {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 
-  @include desktop {
+  @include mediaqueries.desktop {
     margin: 0 auto;
     max-width: 49.5rem;
     padding-left: 0;
@@ -51,7 +51,7 @@ body {
 }
 
 .grid {
-  @include landscape-tablets {
+  @include mediaqueries.landscape-tablets {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -63,7 +63,7 @@ body {
 .grid__column {
   margin-bottom: 1rem;
 
-  @include landscape-tablets {
+  @include mediaqueries.landscape-tablets {
     flex-basis: 0;
     -ms-flex-positive: 1;
     flex-grow: 1;

package/dist/src/globalStyles/mediaqueries.scss

@@ -1,37 +1,37 @@
-@import 'variables.scss';
+@use 'variables.scss';
 
 @mixin mobile {
-  @media (max-width: #{$xs}) {
+  @media (max-width: #{variables.$xs}) {
     @content;
   }
 }
 
 @mixin portrait-tablets {
-  @media (min-width: #{$xs}) {
+  @media (min-width: #{variables.$xs}) {
     @content;
   }
 }
 
 @mixin landscape-tablets {
-  @media (min-width: #{$sm}) {
+  @media (min-width: #{variables.$sm}) {
     @content;
   }
 }
 
 @mixin laptop {
-  @media (min-width: #{$md}) {
+  @media (min-width: #{variables.$md}) {
     @content;
   }
 }
 
 @mixin desktop {
-  @media (min-width: #{$lg}) {
+  @media (min-width: #{variables.$lg}) {
     @content;
   }
 }
 
 @mixin desktop-xl {
-  @media (min-width: #{$xl}) {
+  @media (min-width: #{variables.$xl}) {
     @content;
   }
 }

package/dist/src/globalStyles/styles.scss

@@ -1,22 +1,23 @@
-@import 'variablesCss';
+@use 'sass:meta';
+@use 'variablesCss';
 
-@import 'reset';
-@import 'base';
-@import 'themes';
-@import 'variables';
-@import 'functions';
-@import 'layout';
-@import 'animations';
-@import 'mediaqueries';
-@import 'typography';
+@use 'reset';
+@use 'base';
+@use 'themes';
+@use 'variables';
+@use 'functions';
+@use 'layout';
+@use 'animations';
+@use 'mediaqueries';
+@use 'typography';
 
-@import '../components/atoms/Button/Button.scss';
-@import '../components/atoms/ButtonIcon/ButtonIcon.scss';
-@import '../components/atoms/DatePickerCustom/DatepickerPlugin.scss';
-@import '../components/atoms/Radio/Radio.scss';
+@use '../components/atoms/Button/Button.scss';
+@use '../components/atoms/ButtonIcon/ButtonIcon.scss';
+@use '../components/atoms/DatePickerCustom/DatepickerPlugin.scss';
+@use '../components/atoms/Radio/Radio.scss';
 
 @import 'tippy.js/dist/tippy.css';
-@import '../components/atoms/Tooltip/Tooltip.scss';
+@include meta.load-css('../components/atoms/Tooltip/Tooltip.scss');
 
-@import '../components/molecules/TextInput/TextInput.scss';
-@import '../components/molecules/TooltipMenu/TooltipMenu.scss';
+@include meta.load-css('../components/molecules/TextInput/TextInput.scss');
+@include meta.load-css('../components/molecules/TooltipMenu/TooltipMenu.scss');

package/dist/src/globalStyles/typography.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mediaqueries';
+@use 'variables';
+@use 'mediaqueries';
 
 .sans-serif {
   letter-spacing: -0.3px;
@@ -67,7 +67,7 @@
   &.--super-hero {
     font-size: 2.25rem;
     line-height: 3rem;
-    @include landscape-tablets {
+    @include mediaqueries.landscape-tablets {
       font-size: 3rem;
       line-height: 3.625rem;
     }
@@ -82,7 +82,7 @@
     font-size: 1.75rem;
     line-height: 2.25rem;
 
-    @include landscape-tablets {
+    @include mediaqueries.landscape-tablets {
       font-size: 2rem;
       line-height: 2.625rem;
     }

package/dist/src/globalStyles/variables.scss

@@ -1,6 +1,11 @@
+@use 'sass:map';
 @use 'sass:math';
 
-// Breakpoints
+// =============================================================================
+// Figma tokens reference: figma-tokens/
+// =============================================================================
+
+// Breakpoints (relate to figma-tokens/grids/Mode 1.tokens.json: grid-xl, grid-l, grid-m, grid-s)
 $xl: 1600px;
 $lg: 1200px;
 $md: 960px;
@@ -8,69 +13,84 @@ $sm: 720px;
 $xs: 575px;
 $xxs: 328px;
 
-// Colors
+// 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: (
   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)
+    main-dark-2: var(--primary-main-dark-2) // ~ primary/800–900
   ),
   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)
+    main-dark-2: var(--secondary-main-dark-2) // ~ secondary/600–700
   ),
   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-6: var(--neutral-neutral-6) // ~ neutral/800–900
   ),
   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),
-    black: var(--others-black)
+    // others/disabled
+    black: var(--others-black) // others/black
   )
 );
 
 @function get-color($base, $shade: main) {
-  $color: map-get(map-get($colors, $base), $shade);
+  $color: map.get(map.get($colors, $base), $shade);
   @return $color;
 }
 
-// Box shadow
+// Box shadow — figma-tokens/box-shadow/value.tokens.json (small | medium)
 $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
-$font-sans: 'Inter', sans-serif;
-$font-serif: 'Lora', serif;
+// 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)
 
-// Layout
+// Layout (max-width aligns with breakpoints; spacing scale in figma-tokens/border-and-spacing/Mode 1.tokens.json)
 $max-width: $lg;
 
-//menu
+// menu
 $menu-height-mobile: 3.25rem;

package/dist/src/globalStyles/variablesCss.scss

@@ -1,20 +1,30 @@
+// =============================================================================
+// 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 { RefObject } from 'react';
+import { type RefObject } from 'react';
 interface UseIntersectionObserverParams {
     options?: IntersectionObserverInit;
     defaultIntersecting?: boolean;
 }
-export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T | null>, boolean];
+export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T>, 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)
+        if (currentElement == null)
             return;
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {