@npm_leadtech/legal-lib-components 7.90.3 → 7.91.1

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.js

@@ -69,7 +69,7 @@ export const DocumentStatusStyled = styled.div `
       }
     }
 
-    &.signed {
+    &.completed {
       background-color: var(--primary-main-light-4);
       border-color: var(--primary-main-light-2);
       color: var(--primary-main-light-1);

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts

@@ -70,7 +70,7 @@ export const DocumentStatusStyled = styled.div`
       }
     }
 
-    &.signed {
+    &.completed {
       background-color: var(--primary-main-light-4);
       border-color: var(--primary-main-light-2);
       color: var(--primary-main-light-1);

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts

@@ -3,4 +3,4 @@ export interface DocumentStatusProps {
     type?: DocumentStatusType;
     givenClass?: string;
 }
-export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'signed';
+export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'completed';

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -4,4 +4,4 @@ export interface DocumentStatusProps {
   givenClass?: string
 }
 
-export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'signed'
+export type DocumentStatusType = 'default' | 'in-progress' | 'awaiting' | 'no-response' | 'declined' | 'completed'

package/dist/src/components/atoms/PreFooter/PreFooter.js

@@ -1,8 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { PreFooterStyled } from './PreFooter.styled';
-export const PreFooter = ({ siteName, content, ctaLabel, ctaOnClick, ctaDataQa, ctaLink }) => {
-    return (_jsx(PreFooterStyled, { children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter', children: [_jsxs("div", { className: 'serif --hero prefooter__title', children: ["Try ", siteName, " Now"] }), _jsx("div", { className: 'prefooter__columns', children: content.map((text, index) => {
+export const PreFooter = ({ siteTitle, content, ctaLabel, ctaOnClick, ctaDataQa, ctaLink }) => {
+    return (_jsx(PreFooterStyled, { children: _jsx("div", { className: 'wrapper', children: _jsxs("div", { className: 'prefooter', children: [_jsx("div", { className: 'serif --hero prefooter__title', children: siteTitle }), _jsx("div", { className: 'prefooter__columns', children: content.map((text, index) => {
                             return (_jsx("p", { className: 'prefooter__columns__text', children: text }, index));
                         }) }), _jsx(Button, { label: ctaLabel, onClick: ctaOnClick, link: ctaLink, dataQa: ctaDataQa, isExternal: true, hasNoFollow: true })] }) }) }));
 };

package/dist/src/components/atoms/PreFooter/PreFooter.tsx

@@ -5,7 +5,7 @@ import { PreFooterProps } from './PreFooterProps'
 import { PreFooterStyled } from './PreFooter.styled'
 
 export const PreFooter: React.FC<PreFooterProps> = ({
-  siteName,
+  siteTitle,
   content,
   ctaLabel,
   ctaOnClick,
@@ -16,7 +16,7 @@ export const PreFooter: React.FC<PreFooterProps> = ({
     <PreFooterStyled>
       <div className='wrapper'>
         <div className='prefooter'>
-          <div className='serif --hero prefooter__title'>Try {siteName} Now</div>
+          <div className='serif --hero prefooter__title'>{siteTitle}</div>
           <div className='prefooter__columns'>
             {content.map((text, index) => {
               return (

package/dist/src/components/atoms/PreFooter/PreFooterProps.d.ts

@@ -1,5 +1,5 @@
 export interface PreFooterProps {
-    siteName: string;
+    siteTitle: string;
     content: string[];
     ctaLabel: string;
     ctaOnClick: () => void;

package/dist/src/components/atoms/PreFooter/PreFooterProps.ts

@@ -1,5 +1,5 @@
 export interface PreFooterProps {
-  siteName: string
+  siteTitle: string
   content: string[]
   ctaLabel: string
   ctaOnClick: () => void

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.js

@@ -5,7 +5,7 @@ import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
 import { SignerStatusItemStyled } from './SignerStatusItem.styled';
 const iconByStatus = {
-    signed: _jsx(Done24px, {}),
+    completed: _jsx(Done24px, {}),
     'in-progress': _jsx(Time24px, {}),
     declined: _jsx(CloseIcon, {}),
     awaiting: _jsx(Time24px, {}),

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.js

@@ -18,7 +18,7 @@ export const SignerStatusItemStyled = styled.li `
     color: currentColor;
   }
 
-  &.signer-status-item--signed {
+  &.signer-status-item--completed {
     background-color: var(--primary-main-light-4);
 
     svg > path {

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.styled.ts

@@ -19,7 +19,7 @@ export const SignerStatusItemStyled = styled.li`
     color: currentColor;
   }
 
-  &.signer-status-item--signed {
+  &.signer-status-item--completed {
     background-color: var(--primary-main-light-4);
 
     svg > path {

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItem.tsx

@@ -9,7 +9,7 @@ import { Time24px } from '../../../../images/componentsSvg/Time24px'
 import { SignerStatusItemStyled } from './SignerStatusItem.styled'
 
 const iconByStatus: Record<SignatureStatus, React.ReactNode> = {
-  signed: <Done24px />,
+  completed: <Done24px />,
   'in-progress': <Time24px />,
   declined: <CloseIcon />,
   awaiting: <Time24px />,

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.d.ts

@@ -1,4 +1,4 @@
-export type SignatureStatus = 'signed' | 'in-progress' | 'declined' | 'awaiting' | 'no-response';
+export type SignatureStatus = 'completed' | 'in-progress' | 'declined' | 'awaiting' | 'no-response';
 export interface SignerStatusItemProps {
     status: SignatureStatus;
     children: React.ReactNode;

package/dist/src/components/atoms/SignerStatusItem/SignerStatusItemProps.types.ts

@@ -1,4 +1,4 @@
-export type SignatureStatus = 'signed' | 'in-progress' | 'declined' | 'awaiting' | 'no-response'
+export type SignatureStatus = 'completed' | 'in-progress' | 'declined' | 'awaiting' | 'no-response'
 
 export interface SignerStatusItemProps {
   status: SignatureStatus

package/dist/src/globalStyles/variables.scss

@@ -1,6 +1,10 @@
 @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,48 +12,63 @@ $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
   )
 );
 
@@ -58,19 +77,19 @@ $colors: (
   @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) => {

package/dist/src/hooks/useIntersectionObserver.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { type 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 | null>, boolean] {
+}: UseIntersectionObserverParams = {}): [RefObject<T>, boolean] {
   const [isIntersecting, setIsIntersecting] = useState(defaultIntersecting)
-  const elementRef = useRef<T>(null)
+  const elementRef = useRef<T>(null) as RefObject<T>
 
   useEffect(() => {
     const currentElement = elementRef.current
-    if (!currentElement) return
+    if (currentElement == null) return
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.90.3",
+  "version": "7.91.1",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",