@npm_leadtech/legal-lib-components 7.102.0 → 7.102.1

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/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> & Partial<Pick<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>> & 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> & Partial<Pick<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>> & 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> & Partial<Pick<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>> & 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> & Partial<Pick<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>> & 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> & Partial<Pick<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>> & 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> & Partial<Pick<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>> & string;

package/dist/src/globalStyles/animations.scss

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

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

package/dist/src/globalStyles/functions.scss

@@ -1,16 +1,16 @@
-@use 'mediaqueries';
+@import 'mediaqueries';
 
 @mixin flex-row($columns, $margin, $breakpoint: null) {
   max-width: 100%;
   min-width: 100%;
   width: 100%;
   @if $breakpoint==null {
-    @include mediaqueries.landscape-tablets {
+    @include landscape-tablets {
       max-width: calc(100% / #{$columns} - #{$margin});
       min-width: calc(100% / #{$columns} - #{$margin});
     }
   } @else {
-    @include mediaqueries.custom-device($breakpoint) {
+    @include 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 @@
-@use 'variables';
-@use 'mediaqueries';
+@import 'variables';
+@import 'mediaqueries';
 
 body {
-  min-height: calc(100vh - #{variables.$menu-height-mobile});
-  @include mediaqueries.portrait-tablets {
+  min-height: calc(100vh - #{$menu-height-mobile});
+  @include portrait-tablets {
     min-height: 100vh;
   }
 }
 
 .wrapper {
-  max-width: variables.$md;
+  max-width: $md;
   margin: 0 auto;
   width: 100%;
 
-  @include mediaqueries.desktop {
-    max-width: variables.$max-width;
+  @include desktop {
+    max-width: $max-width;
   }
 }
 
@@ -22,7 +22,7 @@ body {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 
-  @include mediaqueries.desktop {
+  @include desktop {
     padding-left: 0;
     padding-right: 0;
   }
@@ -32,7 +32,7 @@ body {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 
-  @include mediaqueries.desktop {
+  @include desktop {
     margin: 0 auto;
     max-width: 49.5rem;
     padding-left: 0;
@@ -51,7 +51,7 @@ body {
 }
 
 .grid {
-  @include mediaqueries.landscape-tablets {
+  @include landscape-tablets {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -63,7 +63,7 @@ body {
 .grid__column {
   margin-bottom: 1rem;
 
-  @include mediaqueries.landscape-tablets {
+  @include landscape-tablets {
     flex-basis: 0;
     -ms-flex-positive: 1;
     flex-grow: 1;

package/dist/src/globalStyles/mediaqueries.scss

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

package/dist/src/globalStyles/styles.scss

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

package/dist/src/globalStyles/typography.scss

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

package/dist/src/globalStyles/variables.scss

@@ -1,11 +1,6 @@
-@use 'sass:map';
 @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;
@@ -13,84 +8,69 @@ $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)
   )
 );
 
 @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 — 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) => {