@npm_leadtech/legal-lib-components 7.89.0 → 7.89.4

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

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

package/dist/images/componentsSvg/Done24px.js

@@ -1,2 +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' }) }));
+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

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

package/dist/images/componentsSvg/NewRelease24p.js

@@ -1,2 +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' }) })] })] }));
+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/Sign24px.d.ts

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

package/dist/images/componentsSvg/Sign24px.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Sign24px = ({ className }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '16', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { id: 'path', "fill-rule": 'evenodd', "clip-rule": 'evenodd', d: 'M3 11C3 12.06 3.61 12.79 4.58 13.35L6.07 11.86C5.43 11.6 5 11.31 5 11C5 10.5 6.42 9.88 7.36 9.47C9.07 8.72 11 7.87 11 6C11 4.32 9.24 3 7 3C4.76 3 3.73 4.24 3.62 4.38C3.28 4.81 3.36 5.42 3.77 5.76C4.19 6.1 4.82 6.05 5.17 5.64C5.17096 5.63904 5.17245 5.63748 5.17447 5.63536C5.23542 5.57145 5.78046 5 7 5C8.22 5 9 5.59 9 6C9 6.55067 7.63659 7.15936 6.61179 7.61687C6.59443 7.62463 6.57716 7.63234 6.56 7.64C4.89 8.37 3 9.2 3 11ZM19.9101 9.33L18.8501 10.39L14.6101 6.15L15.6701 5.09C16.4501 4.31 17.7201 4.31 18.5001 5.09L19.9101 6.5C20.6901 7.28 20.6901 8.55 19.9101 9.33ZM4.14 16.61L13.19 7.56L17.44 11.8L8.39 20.85C8.3 20.95 8.17 21 8.04 21H4.5C4.22 21 4 20.78 4 20.5V16.96C4 16.83 4.05 16.7 4.14 16.61ZM19 17.5C19 19.69 16.46 21 14 21C13.45 21 13 20.55 13 20C13 19.45 13.45 19 14 19C15.54 19 17 18.27 17 17.5C17 17.03 16.52 16.63 15.77 16.3L17.25 14.82C18.32 15.45 19 16.29 19 17.5Z', fill: '#6D7275' }) }));
+export const Sign24px = ({ className = '' }) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '17', height: '16', viewBox: '0 0 24 24', fill: 'none', className: className, children: _jsx("path", { id: 'path', fillRule: 'evenodd', clipRule: 'evenodd', d: 'M3 11C3 12.06 3.61 12.79 4.58 13.35L6.07 11.86C5.43 11.6 5 11.31 5 11C5 10.5 6.42 9.88 7.36 9.47C9.07 8.72 11 7.87 11 6C11 4.32 9.24 3 7 3C4.76 3 3.73 4.24 3.62 4.38C3.28 4.81 3.36 5.42 3.77 5.76C4.19 6.1 4.82 6.05 5.17 5.64C5.17096 5.63904 5.17245 5.63748 5.17447 5.63536C5.23542 5.57145 5.78046 5 7 5C8.22 5 9 5.59 9 6C9 6.55067 7.63659 7.15936 6.61179 7.61687C6.59443 7.62463 6.57716 7.63234 6.56 7.64C4.89 8.37 3 9.2 3 11ZM19.9101 9.33L18.8501 10.39L14.6101 6.15L15.6701 5.09C16.4501 4.31 17.7201 4.31 18.5001 5.09L19.9101 6.5C20.6901 7.28 20.6901 8.55 19.9101 9.33ZM4.14 16.61L13.19 7.56L17.44 11.8L8.39 20.85C8.3 20.95 8.17 21 8.04 21H4.5C4.22 21 4 20.78 4 20.5V16.96C4 16.83 4.05 16.7 4.14 16.61ZM19 17.5C19 19.69 16.46 21 14 21C13.45 21 13 20.55 13 20C13 19.45 13.45 19 14 19C15.54 19 17 18.27 17 17.5C17 17.03 16.52 16.63 15.77 16.3L17.25 14.82C18.32 15.45 19 16.29 19 17.5Z', fill: '#6D7275' }) }));

package/dist/images/componentsSvg/Sign24px.tsx

@@ -1,14 +1,15 @@
-import React, { type FC } from 'react'
+import React, { FC } from 'react'
+
 interface Sign24pxProps {
-  className: string
+  className?: string
 }
 
-export const Sign24px: FC<Sign24pxProps> = ({ className }: Sign24pxProps) => (
-  <svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 24 24' fill='none'>
+export const Sign24px: FC<Sign24pxProps> = ({ className = '' }: Sign24pxProps) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 24 24' fill='none' className={className}>
     <path
       id='path'
-      fill-rule='evenodd'
-      clip-rule='evenodd'
+      fillRule='evenodd'
+      clipRule='evenodd'
       d='M3 11C3 12.06 3.61 12.79 4.58 13.35L6.07 11.86C5.43 11.6 5 11.31 5 11C5 10.5 6.42 9.88 7.36 9.47C9.07 8.72 11 7.87 11 6C11 4.32 9.24 3 7 3C4.76 3 3.73 4.24 3.62 4.38C3.28 4.81 3.36 5.42 3.77 5.76C4.19 6.1 4.82 6.05 5.17 5.64C5.17096 5.63904 5.17245 5.63748 5.17447 5.63536C5.23542 5.57145 5.78046 5 7 5C8.22 5 9 5.59 9 6C9 6.55067 7.63659 7.15936 6.61179 7.61687C6.59443 7.62463 6.57716 7.63234 6.56 7.64C4.89 8.37 3 9.2 3 11ZM19.9101 9.33L18.8501 10.39L14.6101 6.15L15.6701 5.09C16.4501 4.31 17.7201 4.31 18.5001 5.09L19.9101 6.5C20.6901 7.28 20.6901 8.55 19.9101 9.33ZM4.14 16.61L13.19 7.56L17.44 11.8L8.39 20.85C8.3 20.95 8.17 21 8.04 21H4.5C4.22 21 4 20.78 4 20.5V16.96C4 16.83 4.05 16.7 4.14 16.61ZM19 17.5C19 19.69 16.46 21 14 21C13.45 21 13 20.55 13 20C13 19.45 13.45 19 14 19C15.54 19 17 18.27 17 17.5C17 17.03 16.52 16.63 15.77 16.3L17.25 14.82C18.32 15.45 19 16.29 19 17.5Z'
       fill='#6D7275'
     />

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

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

package/dist/images/componentsSvg/Time24px.js

@@ -1,2 +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' }) })] })] }));
+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.js

@@ -1,19 +1,9 @@
 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 { Sign24px } from '../../../../images/componentsSvg/Sign24px';
-import { Time24px } from '../../../../images/componentsSvg/Time24px';
-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 === '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 })] }));
-    }
-    return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
+import { DocumentStatusStyled } from './DocumentStatus.styled';
+const DocumentStatus = ({ label, type = 'default', givenClass = '' }) => {
+    if (!label)
+        return null;
+    return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: `document-status ${type} ${givenClass}`, children: [_jsx(Sign24px, { className: 'document-status__icon' }), _jsx("span", { className: 'sans-serif --small', children: label })] }));
 };
 export default DocumentStatus;

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

@@ -9,8 +9,13 @@ export const DocumentStatusStyled = styled.div `
   align-items: center;
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
-  margin-right: 0.5rem;
-  width: 7.36rem;
+  width: fit-content;
+  cursor: pointer;
+
+  background-color: var(--neutral-neutral-4);
+  border-color: var(--neutral-neutral-2);
+  color: var(--neutral-neutral-1);
+
   @include laptop {
     align-self: flex-start;
   }
@@ -20,60 +25,56 @@ export const DocumentStatusStyled = styled.div `
   }
 
   &.document-status {
+    & > .document-status__icon > path {
+      fill: var(--neutral-neutral-1);
+    }
+
     span {
       font-weight: bold;
     }
 
-    .icon {
-      margin-right: 0.25rem;
+    &.in-progress {
+      background-color: var(--neutral-neutral-6);
+      border-color: var(--neutral-neutral-4);
+      color: var(--neutral-neutral-2);
+      & > .document-status__icon > path {
+        fill: var(--neutral-neutral-2);
+      }
     }
 
-    &.--is-completed {
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
+    &.awaiting {
+      background-color: var(--secondary-main-light-4);
+      border-color: var(--secondary-main-light-3);
+      color: var(--secondary-main-dark-2);
+      & > .document-status__icon > path {
+        fill: var(--secondary-main-dark-2);
       }
     }
 
-    &.--in-progress {
-      background-color: var(--neutral-neutral-5);
-      border-color: var(--neutral-neutral-3);
+    &.no-response {
+      background-color: var(--neutral-neutral-4);
+      border-color: var(--neutral-neutral-2);
       color: var(--neutral-neutral-1);
-
-      svg {
-        g > g {
-          fill: var(--neutral-neutral-1);
-        }
+      & > .document-status__icon > path {
+        fill: var(--neutral-neutral-1);
       }
     }
 
-    &.--is-new {
-      background-color: var(--primary-main-light-1);
-      border-color: var(--primary-main);
-      color: var(--secondary-main-light-4);
-
-      .icon {
-        margin-right: 1.4rem;
+    &.declined {
+      background-color: var(--error-error-3);
+      border-color: var(--error-error-2);
+      color: var(--error-main);
+      & > .document-status__icon > path {
+        fill: var(--error-main);
       }
     }
 
-    &.--is-signed {
-      width: fit-content;
-      background-color: var(--primary-main-dark-2);
-      border-color: var(--primary-main-dark-2);
-      color: var(--others-white);
-
-      svg {
-        margin-right: 0.25rem;
-
-        path {
-          fill: var(--others-white);
-        }
+    &.completed {
+      background-color: var(--primary-main-light-4);
+      border-color: var(--primary-main-light-2);
+      color: var(--primary-main-light-1);
+      & > .document-status__icon > path {
+        fill: var(--primary-main-light-1);
       }
     }
   }

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

@@ -10,8 +10,13 @@ export const DocumentStatusStyled = styled.div`
   align-items: center;
   align-self: center;
   padding: 0.125rem 0.5rem 0.125rem 0.25rem;
-  margin-right: 0.5rem;
-  width: 7.36rem;
+  width: fit-content;
+  cursor: pointer;
+
+  background-color: var(--neutral-neutral-4);
+  border-color: var(--neutral-neutral-2);
+  color: var(--neutral-neutral-1);
+
   @include laptop {
     align-self: flex-start;
   }
@@ -21,60 +26,56 @@ export const DocumentStatusStyled = styled.div`
   }
 
   &.document-status {
+    & > .document-status__icon > path {
+      fill: var(--neutral-neutral-1);
+    }
+
     span {
       font-weight: bold;
     }
 
-    .icon {
-      margin-right: 0.25rem;
+    &.in-progress {
+      background-color: var(--neutral-neutral-6);
+      border-color: var(--neutral-neutral-4);
+      color: var(--neutral-neutral-2);
+      & > .document-status__icon > path {
+        fill: var(--neutral-neutral-2);
+      }
     }
 
-    &.--is-completed {
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
+    &.awaiting {
+      background-color: var(--secondary-main-light-4);
+      border-color: var(--secondary-main-light-3);
+      color: var(--secondary-main-dark-2);
+      & > .document-status__icon > path {
+        fill: var(--secondary-main-dark-2);
       }
     }
 
-    &.--in-progress {
-      background-color: var(--neutral-neutral-5);
-      border-color: var(--neutral-neutral-3);
+    &.no-response {
+      background-color: var(--neutral-neutral-4);
+      border-color: var(--neutral-neutral-2);
       color: var(--neutral-neutral-1);
-
-      svg {
-        g > g {
-          fill: var(--neutral-neutral-1);
-        }
+      & > .document-status__icon > path {
+        fill: var(--neutral-neutral-1);
       }
     }
 
-    &.--is-new {
-      background-color: var(--primary-main-light-1);
-      border-color: var(--primary-main);
-      color: var(--secondary-main-light-4);
-
-      .icon {
-        margin-right: 1.4rem;
+    &.declined {
+      background-color: var(--error-error-3);
+      border-color: var(--error-error-2);
+      color: var(--error-main);
+      & > .document-status__icon > path {
+        fill: var(--error-main);
       }
     }
 
-    &.--is-signed {
-      width: fit-content;
-      background-color: var(--primary-main-dark-2);
-      border-color: var(--primary-main-dark-2);
-      color: var(--others-white);
-
-      svg {
-        margin-right: 0.25rem;
-
-        path {
-          fill: var(--others-white);
-        }
+    &.completed {
+      background-color: var(--primary-main-light-4);
+      border-color: var(--primary-main-light-2);
+      color: var(--primary-main-light-1);
+      & > .document-status__icon > path {
+        fill: var(--primary-main-light-1);
       }
     }
   }

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

@@ -1,44 +1,16 @@
 import React, { type FC } from 'react'
 
 import { type DocumentStatusProps } from './DocumentStatusProps.types'
-import { DocumentStatusStyled } from './DocumentStatus.styled'
-import { Done24px } from '../../../../images/componentsSvg/Done24px'
-import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
 import { Sign24px } from '../../../../images/componentsSvg/Sign24px'
-import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
-const DocumentStatus: FC<DocumentStatusProps> = ({
-  type,
-  statusCompletedText,
-  statusNewText,
-  statusInProgressText,
-  statusSignedText
-}) => {
-  if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
-    return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-completed'}>
-        <Done24px className='icon' /> <span className={'sans-serif --small'}>{statusCompletedText}</span>
-      </DocumentStatusStyled>
-    )
-  }
-  if (type === 'new') {
-    return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-new'}>
-        <NewRelease24p className='icon' /> <span className={'sans-serif --small'}>{statusNewText}</span>
-      </DocumentStatusStyled>
-    )
-  }
-  if (type === 'signed') {
-    return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-signed'}>
-        <Sign24px className='icon' /> <span className={'sans-serif --small'}>{statusSignedText}</span>
-      </DocumentStatusStyled>
-    )
-  }
+import { DocumentStatusStyled } from './DocumentStatus.styled'
+
+const DocumentStatus: FC<DocumentStatusProps> = ({ label, type = 'default', givenClass = '' }) => {
+  if (!label) return null
   return (
-    <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
-      <Time24px className='icon' />
-      <span className={'sans-serif --small'}>{statusInProgressText}</span>
+    <DocumentStatusStyled data-testid='document-status' className={`document-status ${type} ${givenClass}`}>
+      <Sign24px className='document-status__icon' />
+      <span className={'sans-serif --small'}>{label}</span>
     </DocumentStatusStyled>
   )
 }

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

@@ -1,8 +1,6 @@
 export interface DocumentStatusProps {
-    type: string;
-    statusCompletedText: string;
-    statusNewText: string;
-    statusInProgressText: string;
-    statusAIReviewedText: string;
-    statusSignedText: string;
+    label: string;
+    type?: DocumentStatusType;
+    givenClass?: string;
 }
+export type DocumentStatusType = 'default' | 'in_progress' | 'awaiting' | 'no_response' | 'declined' | 'completed';

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

@@ -1,8 +1,7 @@
 export interface DocumentStatusProps {
-  type: string
-  statusCompletedText: string
-  statusNewText: string
-  statusInProgressText: string
-  statusAIReviewedText: string
-  statusSignedText: string
+  label: string
+  type?: DocumentStatusType
+  givenClass?: string
 }
+
+export type DocumentStatusType = 'default' | 'in_progress' | 'awaiting' | 'no_response' | 'declined' | 'completed'

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;