@npm_leadtech/legal-lib-components 7.45.0 → 7.46.0

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

@@ -26,7 +26,7 @@ export const DialogMenuIconStyled = styled.div `
       align-items: flex-start;
       justify-content: space-between;
       position: absolute;
-      z-index: 1;
+      z-index: 2;
       top: 1.5rem;
       right: -5rem;
 

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

@@ -27,7 +27,7 @@ export const DialogMenuIconStyled = styled.div`
       align-items: flex-start;
       justify-content: space-between;
       position: absolute;
-      z-index: 1;
+      z-index: 2;
       top: 1.5rem;
       right: -5rem;
 

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

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DividerStyled } from './Divider.styled';
 const Divider = ({ containerClass, lineClass, text, image }) => {
-    if (text?.length === 0 || image?.length === 0)
-        return null;
-    return (_jsxs(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
+    return (_jsx(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: text?.length === 0 || image?.length === 0 ? (_jsx("div", { className: `divider__line--complete ${lineClass ?? ''}` })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] })) }));
 };
 export default Divider;

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

@@ -11,6 +11,12 @@ export const DividerStyled = styled.div `
       border-bottom: 1px solid var(--neutral-neutral-4);
     }
 
+    &__line--complete {
+      width: 100%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
     &__word,
     &__image {
       width: fit-content;

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

@@ -12,6 +12,12 @@ export const DividerStyled = styled.div`
       border-bottom: 1px solid var(--neutral-neutral-4);
     }
 
+    &__line--complete {
+      width: 100%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
     &__word,
     &__image {
       width: fit-content;

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

@@ -4,14 +4,18 @@ import { type DividerProps } from './DividerProps.types'
 import { DividerStyled } from './Divider.styled'
 
 const Divider: FC<DividerProps> = ({ containerClass, lineClass, text, image }) => {
-  if (text?.length === 0 || image?.length === 0) return null
-
   return (
     <DividerStyled className={`divider ${containerClass ?? ''}`}>
-      <div className={`divider__line ${lineClass ?? ''}`}></div>
-      {text !== undefined && <p className='divider__word'>{text}</p>}
-      {image !== undefined && <img className='divider__image' src={image} alt='' role='img'></img>}
-      <div className={`divider__line ${lineClass ?? ''}`}></div>
+      {text?.length === 0 || image?.length === 0 ? (
+        <div className={`divider__line--complete ${lineClass ?? ''}`}></div>
+      ) : (
+        <>
+          <div className={`divider__line ${lineClass ?? ''}`}></div>
+          {text !== undefined && <p className='divider__word'>{text}</p>}
+          {image !== undefined && <img className='divider__image' src={image} alt='' role='img'></img>}
+          <div className={`divider__line ${lineClass ?? ''}`}></div>
+        </>
+      )}
     </DividerStyled>
   )
 }

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

@@ -2,19 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
-import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px';
 import { Sign24px } from '../../../../images/componentsSvg/Sign24px';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
-const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText, statusSignedText }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusSignedText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
     if (type === 'new') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
     }
-    if (type === 'ai_reviewed') {
-        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-ai-reviewed', children: [_jsx(RatafiaIcon24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusAIReviewedText })] }));
-    }
     if (type === 'signed') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-signed', children: [_jsx(Sign24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusSignedText })] }));
     }

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

@@ -62,20 +62,6 @@ export const DocumentStatusStyled = styled.div `
       }
     }
 
-    &.--is-ai-reviewed {
-      padding: 0.25rem;
-      gap: 0.25rem;
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
-      }
-    }
-
     &.--is-signed {
       width: fit-content;
       background-color: var(--primary-main-dark-2);

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

@@ -63,20 +63,6 @@ export const DocumentStatusStyled = styled.div`
       }
     }
 
-    &.--is-ai-reviewed {
-      padding: 0.25rem;
-      gap: 0.25rem;
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
-      }
-    }
-
     &.--is-signed {
       width: fit-content;
       background-color: var(--primary-main-dark-2);

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

@@ -4,7 +4,6 @@ import { type DocumentStatusProps } from './DocumentStatusProps.types'
 import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
-import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px'
 import { Sign24px } from '../../../../images/componentsSvg/Sign24px'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
@@ -13,7 +12,6 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
   statusCompletedText,
   statusNewText,
   statusInProgressText,
-  statusAIReviewedText,
   statusSignedText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
@@ -30,13 +28,6 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
       </DocumentStatusStyled>
     )
   }
-  if (type === 'ai_reviewed') {
-    return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-ai-reviewed'}>
-        <RatafiaIcon24px className='icon' /> <span className={'sans-serif --small'}>{statusAIReviewedText}</span>
-      </DocumentStatusStyled>
-    )
-  }
   if (type === 'signed') {
     return (
       <DocumentStatusStyled data-testid='document-status' className={'document-status --is-signed'}>

package/dist/src/components/atoms/DropdownInput/DropdownInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownInputProps } from './DropdownInputProps.types';
+export declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { forwardRef, useState } from 'react';
+import { DropdownInputStyled } from './DropdownInput.styled';
+export const DropdownInput = forwardRef(({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
+    const [searchTerm, setSearchTerm] = useState('');
+    const updateInput = (e) => {
+        setSearchTerm(e.target.value);
+        onChange(e.target.value);
+    };
+    const resetInput = () => {
+        setSearchTerm('');
+    };
+    return (_jsxs(DropdownInputStyled, { className: `dropdown_input ${className}`, children: [_jsxs("div", { className: 'dropdown_input__container', children: [_jsx("input", { ref: ref, className: `dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`, type: 'text', name: `dropdown_input_${name}`, placeholder: placeholder, value: searchTerm, onChange: (e) => {
+                            updateInput(e);
+                        } }), _jsxs("div", { className: `dropdown_input__container__icon ${searchTerm ? 'active' : ''}`, onClick: onClose, children: [icon &&
+                                React.cloneElement(icon, {
+                                    className: 'dropdown_input__container__icon__main'
+                                }), searchTerm && (_jsx("div", { className: 'icon-cross main-color dropdown_input__container__icon__clear', onClick: () => {
+                                    resetInput();
+                                }, onKeyDown: () => {
+                                    resetInput();
+                                } }))] })] }), searchTerm && !!results?.length && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'dropdown_input__separator' }), _jsx("ul", { className: 'dropdown_input__results', children: results })] }))] }));
+});
+DropdownInput.displayName = 'DropdownInput';

package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.d.ts

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

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

@@ -0,0 +1,164 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DropdownInputStyled = styled.div `
+  position: relative;
+  padding: 1.5rem;
+
+  @media ${device.tablets} {
+    padding: 16px 24px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .dropdown_input__container {
+    position: relative;
+    height: 2.75rem;
+    transition: all 0.25s;
+    border-bottom: 1px solid var(--neutral-neutral-4);
+
+    @media ${device.tablets} {
+      border-top: 2px solid transparent;
+      border-bottom: none;
+    }
+
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device.tablets} {
+        border-bottom: none;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--neutral-neutral-3);
+
+        svg {
+          fill: var(--neutral-neutral-3);
+          stroke: var(--neutral-neutral-3);
+        }
+      }
+    }
+
+    .dropdown_input__container__text_input {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--neutral-neutral-3);
+      }
+
+      &.with-icon {
+        padding-right: 2rem;
+      }
+    }
+
+    .dropdown_input__container__icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      color: var(--neutral-neutral-3);
+      fill: var(--neutral-neutral-3);
+
+      @media ${device.tablets} {
+        cursor: pointer;
+      }
+
+      .dropdown_input__container__icon__main {
+        width: 1.5rem;
+        height: 1.5rem;
+        opacity: 1;
+        margin-right: 0.25rem;
+        cursor: pointer;
+
+        path {
+          transition: all 0.25s;
+          fill: var(--neutral-neutral-3);
+        }
+      }
+
+      .dropdown_input__container__icon__clear {
+        transition: all 0.25s;
+        opacity: 0;
+        width: 2rem;
+        height: 2rem;
+      }
+
+      &.active {
+        .dropdown_input__container__icon__main {
+          display: none;
+
+          @media ${device.tablets} {
+            display: block;
+          }
+        }
+
+        .dropdown_input__container__icon__clear {
+          opacity: 1;
+
+          @media ${device.tablets} {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown_input__separator {
+    margin-top: 0.6rem;
+    border-top: 1.5px solid var(--neutral-neutral-4);
+  }
+
+  .dropdown_input__results {
+    transition: all 0.25s;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: 8px;
+    background: var(--others-white);
+    width: 300px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
+
+    @media ${device.tablets} {
+      opacity: 1;
+      left: 0;
+      top: 100%;
+      width: 100%;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: -15px;
+      border: none;
+      border-radius: 0 0 8px 8px;
+    }
+
+    & > li > * {
+      cursor: pointer;
+      padding: 0.25rem;
+      margin: 0.25rem 0;
+      display: block;
+
+      &:hover {
+        border-radius: 4px;
+        background: var(--primary-main-light-5);
+      }
+    }
+
+    .dropdown_input__link--all {
+      font-weight: 700;
+    }
+  }
+`;

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

@@ -0,0 +1,165 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DropdownInputStyled = styled.div`
+  position: relative;
+  padding: 1.5rem;
+
+  @media ${device.tablets} {
+    padding: 16px 24px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .dropdown_input__container {
+    position: relative;
+    height: 2.75rem;
+    transition: all 0.25s;
+    border-bottom: 1px solid var(--neutral-neutral-4);
+
+    @media ${device.tablets} {
+      border-top: 2px solid transparent;
+      border-bottom: none;
+    }
+
+    &:focus-within {
+      border-bottom: 2px var(--neutral-neutral-4) solid;
+
+      @media ${device.tablets} {
+        border-bottom: none;
+      }
+
+      .dropdown_input__container__icon {
+        color: var(--neutral-neutral-3);
+
+        svg {
+          fill: var(--neutral-neutral-3);
+          stroke: var(--neutral-neutral-3);
+        }
+      }
+    }
+
+    .dropdown_input__container__text_input {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--neutral-neutral-3);
+      }
+
+      &.with-icon {
+        padding-right: 2rem;
+      }
+    }
+
+    .dropdown_input__container__icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      color: var(--neutral-neutral-3);
+      fill: var(--neutral-neutral-3);
+
+      @media ${device.tablets} {
+        cursor: pointer;
+      }
+
+      .dropdown_input__container__icon__main {
+        width: 1.5rem;
+        height: 1.5rem;
+        opacity: 1;
+        margin-right: 0.25rem;
+        cursor: pointer;
+
+        path {
+          transition: all 0.25s;
+          fill: var(--neutral-neutral-3);
+        }
+      }
+
+      .dropdown_input__container__icon__clear {
+        transition: all 0.25s;
+        opacity: 0;
+        width: 2rem;
+        height: 2rem;
+      }
+
+      &.active {
+        .dropdown_input__container__icon__main {
+          display: none;
+
+          @media ${device.tablets} {
+            display: block;
+          }
+        }
+
+        .dropdown_input__container__icon__clear {
+          opacity: 1;
+
+          @media ${device.tablets} {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown_input__separator {
+    margin-top: 0.6rem;
+    border-top: 1.5px solid var(--neutral-neutral-4);
+  }
+
+  .dropdown_input__results {
+    transition: all 0.25s;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: 8px;
+    background: var(--others-white);
+    width: 300px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    background-color: var(--others-white);
+    border-top: none;
+    padding: 1rem 2rem;
+
+    @media ${device.tablets} {
+      opacity: 1;
+      left: 0;
+      top: 100%;
+      width: 100%;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-top: -15px;
+      border: none;
+      border-radius: 0 0 8px 8px;
+    }
+
+    & > li > * {
+      cursor: pointer;
+      padding: 0.25rem;
+      margin: 0.25rem 0;
+      display: block;
+
+      &:hover {
+        border-radius: 4px;
+        background: var(--primary-main-light-5);
+      }
+    }
+
+    .dropdown_input__link--all {
+      font-weight: 700;
+    }
+  }
+`

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

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { forwardRef, useState } from 'react'
+
+import { DropdownInputProps } from './DropdownInputProps.types'
+import { DropdownInputStyled } from './DropdownInput.styled'
+
+export const DropdownInput = forwardRef<HTMLInputElement, DropdownInputProps>(
+  ({ onChange, results, className = '', name, icon, placeholder, onClose }, ref) => {
+    const [searchTerm, setSearchTerm] = useState('')
+
+    const updateInput = (e): void => {
+      setSearchTerm(e.target.value)
+      onChange(e.target.value)
+    }
+
+    const resetInput = (): void => {
+      setSearchTerm('')
+    }
+
+    return (
+      <DropdownInputStyled className={`dropdown_input ${className}`}>
+        <div className='dropdown_input__container'>
+          <input
+            ref={ref}
+            className={`dropdown_input__container__text_input ${icon ? 'with-icon' : ''}`}
+            type='text'
+            name={`dropdown_input_${name}`}
+            placeholder={placeholder}
+            value={searchTerm}
+            onChange={(e) => {
+              updateInput(e)
+            }}
+          />
+          <div className={`dropdown_input__container__icon ${searchTerm ? 'active' : ''}`} onClick={onClose}>
+            {icon &&
+              React.cloneElement(icon, {
+                className: 'dropdown_input__container__icon__main'
+              })}
+            {searchTerm && (
+              <div
+                className='icon-cross main-color dropdown_input__container__icon__clear'
+                onClick={() => {
+                  resetInput()
+                }}
+                onKeyDown={() => {
+                  resetInput()
+                }}
+              ></div>
+            )}
+          </div>
+        </div>
+        {searchTerm && !!results?.length && (
+          <>
+            <div className='dropdown_input__separator'></div>
+            <ul className='dropdown_input__results'>{results}</ul>
+          </>
+        )}
+      </DropdownInputStyled>
+    )
+  }
+)
+
+DropdownInput.displayName = 'DropdownInput'

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.d.ts

@@ -0,0 +1,9 @@
+export interface DropdownInputProps {
+    name: string;
+    className: string;
+    placeholder: string;
+    icon: any;
+    onChange: (arg: string) => void;
+    results: React.JSX.Element[];
+    onClose?: () => void;
+}

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export {};

package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export interface DropdownInputProps {
+  name: string
+  className: string
+  placeholder: string
+  icon: any
+  onChange: (arg: string) => void
+  results: React.JSX.Element[]
+  onClose?: () => void
+}

package/dist/src/components/atoms/DropdownInput/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownInput } from './DropdownInput';
+export { type DropdownInputProps } from './DropdownInputProps.types';

package/dist/src/components/atoms/DropdownInput/index.js

@@ -0,0 +1 @@
+export { DropdownInput } from './DropdownInput';

package/dist/src/components/atoms/DropdownInput/index.ts

@@ -0,0 +1,2 @@
+export { DropdownInput } from './DropdownInput'
+export { type DropdownInputProps } from './DropdownInputProps.types'

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardStyled } from './ExpertCard.styled';
 const ExpertCard = ({ title, url, description, image }) => {
-    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
+    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), _jsxs("div", { className: 'expert-card__texts', children: [url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] })] }) }));
 };
 export default ExpertCard;