@npm_leadtech/legal-lib-components 7.90.0 → 7.90.2

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);
-        }
+    &.signed {
+      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);
-        }
+    &.signed {
+      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' | 'signed';

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' | 'signed'

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { PreFooterStyled } from './PreFooter.styled';
-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) => {
+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) => {
                             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> = ({
-  siteTitle,
+  siteName,
   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'>{siteTitle}</div>
+          <div className='serif --hero prefooter__title'>Try {siteName} Now</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 {
-    siteTitle: string;
+    siteName: string;
     content: string[];
     ctaLabel: string;
     ctaOnClick: () => void;

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

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

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,27 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const SignersStatusTooltipContentStyled = styled.div `
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+  font-family: var(--font-sans);
+
+  @media ${device.mobile} {
+    width: auto;
+  }
+
+  .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,28 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const SignersStatusTooltipContentStyled = styled.div`
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+  font-family: var(--font-sans);
+
+  @media ${device.mobile} {
+    width: auto;
+  }
+
+  .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;
+  }
+`