@npm_leadtech/legal-lib-components 7.89.3 → 7.89.5

package/dist/css/styles.css

@@ -1018,6 +1018,22 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
 .e-button.--transparent {
   background-color: transparent;
 }
+.e-button.e-button--link {
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: 0;
+  color: var(--primary-main);
+  text-decoration: underline;
+  font-weight: inherit;
+}
+.e-button.e-button--link:hover {
+  color: var(--primary-main-dark-1);
+  text-decoration: underline;
+}
+.e-button.e-button--link label {
+  cursor: pointer;
+}
 .e-button.--disabled {
   background-color: var(--neutral-neutral-4);
   color: var(--neutral-neutral-1);

package/dist/images/componentsSvg/CloseIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const CloseIcon = ({ className }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));
+export const CloseIcon = ({ className = '' }) => (_jsx("svg", { className: className, width: 20, height: 20, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z', fill: '#B5BABD' }) }));

package/dist/images/componentsSvg/CloseIcon.tsx

@@ -4,7 +4,7 @@ interface Close24Props {
   className?: string
 }
 
-export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
+export const CloseIcon: FC<Close24Props> = ({ className = '' }: Close24Props): React.ReactElement => (
   <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path
       d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'

package/dist/images/componentsSvg/Done24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface Done24pxProps {
+    className?: string;
+}
+export declare const Done24px: FC<Done24pxProps>;
+export {};

package/dist/images/componentsSvg/Done24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Done24px = ({ className = '' }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', children: _jsx("path", { d: 'M6.36663 10.6L4.0333 8.26667C3.77557 8.00893 3.3577 8.00893 3.09997 8.26667C2.84223 8.5244 2.84223 8.94227 3.09997 9.2L6.18886 12.2889C6.28704 12.3871 6.44623 12.3871 6.54441 12.2889L13.9 4.93333C14.1577 4.6756 14.1577 4.25773 13.9 4C13.6422 3.74227 13.2244 3.74227 12.9666 4L6.36663 10.6Z', fill: '#078080' }) }));

package/dist/images/componentsSvg/Done24px.tsx

@@ -1,9 +1,9 @@
 import React, { type FC } from 'react'
 interface Done24pxProps {
-  className: string
+  className?: string
 }
 
-export const Done24px: FC<Done24pxProps> = ({ className }: Done24pxProps) => (
+export const Done24px: FC<Done24pxProps> = ({ className = '' }: Done24pxProps) => (
   <svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'>
     <path
       d='M6.36663 10.6L4.0333 8.26667C3.77557 8.00893 3.3577 8.00893 3.09997 8.26667C2.84223 8.5244 2.84223 8.94227 3.09997 9.2L6.18886 12.2889C6.28704 12.3871 6.44623 12.3871 6.54441 12.2889L13.9 4.93333C14.1577 4.6756 14.1577 4.25773 13.9 4C13.6422 3.74227 13.2244 3.74227 12.9666 4L6.36663 10.6Z'

package/dist/images/componentsSvg/NewRelease24p.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface NewRelease24pProps {
+    className?: string;
+}
+export declare const NewRelease24p: FC<NewRelease24pProps>;
+export {};

package/dist/images/componentsSvg/NewRelease24p.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NewRelease24p = ({ className = '' }) => (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '16', height: '16', viewBox: '0 0 16 16', children: [_jsx("defs", { children: _jsx("path", { id: 'new-release__a', d: 'M15.333 7.997l-1.626-1.854.226-2.453-2.406-.547-1.26-2.12L8 1.997l-2.267-.974-1.26 2.12-2.406.54.226 2.454-1.626 1.86L2.293 9.85l-.226 2.46 2.406.547 1.26 2.12L8 13.997l2.267.973 1.26-2.12 2.406-.547-.226-2.453 1.626-1.853zm-3.006 1.406l.173 1.86-1.827.414-.953 1.606-1.72-.74-1.72.74-.953-1.606-1.827-.414.173-1.866-1.233-1.4 1.233-1.414L3.5 4.73l1.827-.407.953-1.606L8 3.45l1.72-.74.953 1.607 1.827.413-.173 1.86 1.233 1.407-1.233 1.406zm-4.994.594h1.334v1.333H7.333V9.997zm0-5.334h1.334v4H7.333v-4z' }) }), _jsxs("g", { fill: 'none', fillRule: 'evenodd', children: [_jsx("path", { d: 'M0 0H16V16H0z' }), _jsx("mask", { id: 'new-release__b', fill: '#fff', children: _jsx("use", { xlinkHref: '#new-release__a' }) }), _jsx("g", { fill: '#FCF4E5', mask: 'url(#new-release__b)', children: _jsx("path", { d: 'M0 0H16V16H0z' }) })] })] }));

package/dist/images/componentsSvg/NewRelease24p.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable max-len */
 import React, { type FC } from 'react'
 
 interface NewRelease24pProps {
-  className: string
+  className?: string
 }
 
-export const NewRelease24p: FC<NewRelease24pProps> = ({ className }: NewRelease24pProps) => (
+export const NewRelease24p: FC<NewRelease24pProps> = ({ className = '' }: NewRelease24pProps) => (
   <svg className={className} xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
     <defs>
       <path

package/dist/images/componentsSvg/Time24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface Time24pxProps {
+    className?: string;
+}
+export declare const Time24px: FC<Time24pxProps>;
+export {};

package/dist/images/componentsSvg/Time24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Time24px = ({ className = '' }) => (_jsxs("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', xmlnsXlink: 'http://www.w3.org/1999/xlink', width: '16', height: '16', viewBox: '0 0 16 16', children: [_jsx("defs", { children: _jsx("path", { id: 'time', d: 'M7.993 1.333c-3.68 0-6.66 2.987-6.66 6.667 0 3.68 2.98 6.667 6.66 6.667 3.687 0 6.674-2.987 6.674-6.667 0-3.68-2.987-6.667-6.674-6.667zm.007 12c-2.947 0-5.333-2.386-5.333-5.333S5.053 2.667 8 2.667 13.333 5.053 13.333 8 10.947 13.333 8 13.333zm.333-8.666h-1v4l3.5 2.1.5-.82-3-1.78v-3.5z' }) }), _jsxs("g", { fill: 'none', fillRule: 'evenodd', children: [_jsx("path", { d: 'M0 0H16V16H0z' }), _jsx("mask", { id: 'time2', fill: '#fff', children: _jsx("use", { xlinkHref: '#time' }) }), _jsx("g", { fill: '#936C2F', mask: 'url(#time2)', children: _jsx("path", { d: 'M0 0H16V16H0z' }) })] })] }));

package/dist/images/componentsSvg/Time24px.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable max-len */
 import React, { type FC } from 'react'
 
 interface Time24pxProps {
-  className: string
+  className?: string
 }
 
-export const Time24px: FC<Time24pxProps> = ({ className }: Time24pxProps) => (
+export const Time24px: FC<Time24pxProps> = ({ className = '' }: Time24pxProps) => (
   <svg
     className={className}
     xmlns='http://www.w3.org/2000/svg'

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-// import './Button.scss'
 const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
     const sizes = {
         S: 'button--small',
@@ -21,6 +20,7 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
         '--secondary-icon --dark': color === 'secondaryIconDark',
         'button--tertiary-1': color === 'tertiary',
         'button--tertiary-2': color === 'tertiary2',
+        'e-button--link': color === 'link',
         '--styleless': color === 'styleless',
         '--transparent': color === 'transparent',
         '--disabled': disabled,

package/dist/src/components/atoms/Button/Button.scss

@@ -197,6 +197,25 @@ html[data-theme='primarygreen'] {
     background-color: transparent;
   }
 
+  &.e-button--link {
+    padding: 0;
+    border: none;
+    background: none;
+    border-radius: 0;
+    color: var(--primary-main);
+    text-decoration: underline;
+    font-weight: inherit;
+
+    &:hover {
+      color: var(--primary-main-dark-1);
+      text-decoration: underline;
+    }
+
+    label {
+      cursor: pointer;
+    }
+  }
+
   &.--disabled {
     background-color: var(--neutral-neutral-4);
     color: var(--neutral-neutral-1);

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

@@ -3,7 +3,6 @@ import React, { type FC } from 'react'
 import classNames from 'classnames'
 
 import { type ButtonProps } from './ButtonProps.types'
-// import './Button.scss'
 
 const Button: FC<ButtonProps> = ({
   label,
@@ -49,6 +48,7 @@ const Button: FC<ButtonProps> = ({
     '--secondary-icon --dark': color === 'secondaryIconDark',
     'button--tertiary-1': color === 'tertiary',
     'button--tertiary-2': color === 'tertiary2',
+    'e-button--link': color === 'link',
     '--styleless': color === 'styleless',
     '--transparent': color === 'transparent',
     '--disabled': disabled,

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -1,4 +1,4 @@
-export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
+export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent' | 'link';
 export interface ButtonProps {
     label: string;
     dataQa: string;

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -16,6 +16,7 @@ export type Colors =
   | 'tertiary2'
   | 'styleless'
   | 'transparent'
+  | 'link'
 export interface ButtonProps {
   label: string
   dataQa: string

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

@@ -10,6 +10,7 @@ export const DocumentStatusStyled = styled.div `
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
   width: fit-content;
+  cursor: pointer;
 
   background-color: var(--neutral-neutral-4);
   border-color: var(--neutral-neutral-2);
@@ -68,7 +69,7 @@ export const DocumentStatusStyled = styled.div `
       }
     }
 
-    &.completed {
+    &.signed {
       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

@@ -11,6 +11,7 @@ export const DocumentStatusStyled = styled.div`
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
   width: fit-content;
+  cursor: pointer;
 
   background-color: var(--neutral-neutral-4);
   border-color: var(--neutral-neutral-2);
@@ -69,7 +70,7 @@ export const DocumentStatusStyled = styled.div`
       }
     }
 
-    &.completed {
+    &.signed {
       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' | 'completed';
+export type DocumentStatusType = 'default' | 'in_progress' | 'awaiting' | 'no_response' | 'declined' | 'signed';

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' | 'completed'
+export type DocumentStatusType = 'default' | 'in_progress' | 'awaiting' | 'no_response' | 'declined' | 'signed'

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type SignerStatusItemProps } from './SignerStatusItemProps.types';
+export declare const SignerStatusItem: FC<SignerStatusItemProps>;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
+import { Done24px } from '../../../../images/componentsSvg/Done24px';
+import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
+import { Time24px } from '../../../../images/componentsSvg/Time24px';
+import { SignerStatusItemStyled } from './SignerStatusItem.styled';
+const iconByStatus = {
+    signed: _jsx(Done24px, {}),
+    in_progress: _jsx(Time24px, {}),
+    declined: _jsx(CloseIcon, {}),
+    awaiting: _jsx(Time24px, {}),
+    no_response: _jsx(NewRelease24p, {})
+};
+export const SignerStatusItem = ({ status, children, givenClass = '' }) => {
+    return (_jsxs(SignerStatusItemStyled, { className: `signer-status-item signer-status-item--${status} ${givenClass}`, children: [_jsx("span", { className: 'signer-status-item__icon', "aria-hidden": true, children: iconByStatus[status] }), children] }));
+};

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

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

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

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+export const SignerStatusItemStyled = styled.li `
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-sans);
+  list-style: none;
+  gap: 0.25rem;
+
+  .signer-status-item__icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+  }
+
+  &.signer-status-item--signed {
+    background-color: var(--primary-main-light-4);
+
+    svg > path {
+      fill: var(--primary-main-light-1);
+    }
+  }
+
+  &.signer-status-item--in_progress {
+    background-color: var(--neutral-neutral-6);
+
+    svg > path {
+      fill: var(--neutral-neutral-2);
+    }
+  }
+
+  &.signer-status-item--declined {
+    background-color: var(--error-error-3);
+
+    svg > path {
+      fill: var(--error-main);
+    }
+  }
+
+  &.signer-status-item--awaiting {
+    background-color: var(--secondary-main-light-4);
+
+    svg > path {
+      fill: var(--secondary-main-dark-2);
+    }
+  }
+
+  &.signer-status-item--no_response {
+    background-color: var(--neutral-neutral-4);
+
+    svg > path {
+      fill: var(--neutral-neutral-1);
+    }
+  }
+`;

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

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+
+export const SignerStatusItemStyled = styled.li`
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-sans);
+  list-style: none;
+  gap: 0.25rem;
+
+  .signer-status-item__icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+  }
+
+  &.signer-status-item--signed {
+    background-color: var(--primary-main-light-4);
+
+    svg > path {
+      fill: var(--primary-main-light-1);
+    }
+  }
+
+  &.signer-status-item--in_progress {
+    background-color: var(--neutral-neutral-6);
+
+    svg > path {
+      fill: var(--neutral-neutral-2);
+    }
+  }
+
+  &.signer-status-item--declined {
+    background-color: var(--error-error-3);
+
+    svg > path {
+      fill: var(--error-main);
+    }
+  }
+
+  &.signer-status-item--awaiting {
+    background-color: var(--secondary-main-light-4);
+
+    svg > path {
+      fill: var(--secondary-main-dark-2);
+    }
+  }
+
+  &.signer-status-item--no_response {
+    background-color: var(--neutral-neutral-4);
+
+    svg > path {
+      fill: var(--neutral-neutral-1);
+    }
+  }
+`

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

@@ -0,0 +1,28 @@
+import React, { type FC } from 'react'
+
+import { type SignatureStatus, type SignerStatusItemProps } from './SignerStatusItemProps.types'
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
+import { Done24px } from '../../../../images/componentsSvg/Done24px'
+import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
+import { Time24px } from '../../../../images/componentsSvg/Time24px'
+
+import { SignerStatusItemStyled } from './SignerStatusItem.styled'
+
+const iconByStatus: Record<SignatureStatus, React.ReactNode> = {
+  signed: <Done24px />,
+  in_progress: <Time24px />,
+  declined: <CloseIcon />,
+  awaiting: <Time24px />,
+  no_response: <NewRelease24p />
+}
+
+export const SignerStatusItem: FC<SignerStatusItemProps> = ({ status, children, givenClass = '' }) => {
+  return (
+    <SignerStatusItemStyled className={`signer-status-item signer-status-item--${status} ${givenClass}`}>
+      <span className='signer-status-item__icon' aria-hidden>
+        {iconByStatus[status]}
+      </span>
+      {children}
+    </SignerStatusItemStyled>
+  )
+}

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

@@ -0,0 +1,6 @@
+export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response';
+export interface SignerStatusItemProps {
+    status: SignatureStatus;
+    children: React.ReactNode;
+    givenClass?: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+export type SignatureStatus = 'signed' | 'in_progress' | 'declined' | 'awaiting' | 'no_response'
+
+export interface SignerStatusItemProps {
+  status: SignatureStatus
+  children: React.ReactNode
+  givenClass?: string
+}

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

@@ -0,0 +1,2 @@
+export { SignerStatusItem } from './SignerStatusItem';
+export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types';

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

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

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

@@ -0,0 +1,2 @@
+export { SignerStatusItem } from './SignerStatusItem'
+export type { SignerStatusItemProps, SignatureStatus } from './SignerStatusItemProps.types'

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

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Tippy from '@tippyjs/react';
 import classNames from 'classnames';
-// import 'tippy.js/dist/tippy.css'
-// import './Tooltip.scss'
 const Tooltip = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
     if (children === undefined)
         return null;

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

@@ -3,8 +3,6 @@ import Tippy from '@tippyjs/react'
 import classNames from 'classnames'
 
 import { type TooltipProps } from './TooltipProps.types'
-// import 'tippy.js/dist/tippy.css'
-// import './Tooltip.scss'
 
 const Tooltip: FC<TooltipProps> = ({ children, position = 'top', inverted, trigger = 'hover', ...rest }) => {
   if (children === undefined) return null

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types';
+export declare const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps>;

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms/Button';
+import { SignerStatusItem } from '../../atoms/SignerStatusItem';
+import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled';
+export const SignersStatusTooltipContent = ({ title = 'Signers Status', signers, manageRequestsLabel, onManageRequestsClick, manageRequestsDataQa = 'manage_requests_button', givenClass = '' }) => {
+    return (_jsxs(SignersStatusTooltipContentStyled, { className: `signers-status-tooltip-content ${givenClass}`.trim(), children: [_jsx("h3", { children: title }), _jsx("ul", { className: 'signers-status-tooltip-content__signers', children: signers.map((signer, index) => (_jsx(SignerStatusItem, { status: signer.status, children: signer.children }, `${signer.status}-${index}`))) }), _jsx("div", { className: 'signers-status-tooltip-content__button', children: _jsx(Button, { noLink: true, color: 'tertiary', givenClass: 'underline-button', label: manageRequestsLabel, dataQa: manageRequestsDataQa, onClick: onManageRequestsClick }) })] }));
+};

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.d.ts

@@ -0,0 +1 @@
+export declare const SignersStatusTooltipContentStyled: 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/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const SignersStatusTooltipContentStyled = styled.div `
+  width: max-content;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: var(--font-sans);
+
+  .signers-status-tooltip-content__signers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .signers-status-tooltip-content__button {
+    margin-top: 0;
+  }
+`;

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const SignersStatusTooltipContentStyled = styled.div`
+  width: max-content;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: var(--font-sans);
+
+  .signers-status-tooltip-content__signers {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin: 0;
+    list-style: none;
+  }
+
+  .signers-status-tooltip-content__button {
+    margin-top: 0;
+  }
+`

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContent.tsx

@@ -0,0 +1,38 @@
+import React, { type FC } from 'react'
+
+import { Button } from '../../atoms/Button'
+import { SignerStatusItem } from '../../atoms/SignerStatusItem'
+import type { SignersStatusTooltipContentProps } from './SignersStatusTooltipContentProps.types'
+import { SignersStatusTooltipContentStyled } from './SignersStatusTooltipContent.styled'
+
+export const SignersStatusTooltipContent: FC<SignersStatusTooltipContentProps> = ({
+  title = 'Signers Status',
+  signers,
+  manageRequestsLabel,
+  onManageRequestsClick,
+  manageRequestsDataQa = 'manage_requests_button',
+  givenClass = ''
+}) => {
+  return (
+    <SignersStatusTooltipContentStyled className={`signers-status-tooltip-content ${givenClass}`.trim()}>
+      <h3>{title}</h3>
+      <ul className='signers-status-tooltip-content__signers'>
+        {signers.map((signer, index) => (
+          <SignerStatusItem key={`${signer.status}-${index}`} status={signer.status}>
+            {signer.children}
+          </SignerStatusItem>
+        ))}
+      </ul>
+      <div className='signers-status-tooltip-content__button'>
+        <Button
+          noLink
+          color='tertiary'
+          givenClass='underline-button'
+          label={manageRequestsLabel}
+          dataQa={manageRequestsDataQa}
+          onClick={onManageRequestsClick}
+        />
+      </div>
+    </SignersStatusTooltipContentStyled>
+  )
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.d.ts

@@ -0,0 +1,9 @@
+import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types';
+export interface SignersStatusTooltipContentProps {
+    title?: string;
+    signers: SignerStatusItemProps[];
+    manageRequestsLabel: string;
+    onManageRequestsClick: () => void;
+    manageRequestsDataQa?: string;
+    givenClass?: string;
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/SignersStatusTooltipContent/SignersStatusTooltipContentProps.types.ts

@@ -0,0 +1,10 @@
+import type { SignerStatusItemProps } from '../../atoms/SignerStatusItem/SignerStatusItemProps.types'
+
+export interface SignersStatusTooltipContentProps {
+  title?: string
+  signers: SignerStatusItemProps[]
+  manageRequestsLabel: string
+  onManageRequestsClick: () => void
+  manageRequestsDataQa?: string
+  givenClass?: string
+}

package/dist/src/components/molecules/SignersStatusTooltipContent/index.d.ts

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

package/dist/src/components/molecules/SignersStatusTooltipContent/index.js

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

package/dist/src/components/molecules/SignersStatusTooltipContent/index.ts

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