@npm_leadtech/legal-lib-components 5.2.22 → 5.2.31

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

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { DialogMenuIconStyled } from './DialogMenuIcon.styled';
 import cross from '../../../../images/svg/icon-clear-24-px.svg';
 import shape from '../../../../images/svg/shape.svg';
 // import './DialogMenuIcon.scss'
@@ -46,10 +47,10 @@ const DialogMenuIcon = ({ onClose, onOpen, content }) => {
             onClose();
         }
     };
-    return (_jsxs("div", { className: classnames, ref: iconContainer, children: [_jsx("img", { className: 'dialog-menu-icon__image', onClick: () => {
-                    onHandleChange(true, false);
-                }, src: shape, alt: 'shape' }), _jsxs("div", { className: 'dialog-menu-icon__message', ref: messageContainer, children: [_jsx("p", { children: content }), _jsx("img", { onClick: () => {
-                            onHandleChange();
-                        }, src: cross, alt: '' })] })] }));
+    return (_jsx(DialogMenuIconStyled, { children: _jsxs("div", { className: classnames, ref: iconContainer, children: [_jsx("img", { className: 'dialog-menu-icon__image', onClick: () => {
+                        onHandleChange(true, false);
+                    }, src: shape, alt: 'shape' }), _jsxs("div", { className: 'dialog-menu-icon__message', ref: messageContainer, children: [_jsx("p", { children: content }), _jsx("img", { onClick: () => {
+                                onHandleChange();
+                            }, src: cross, alt: '' })] })] }) }));
 };
 export default DialogMenuIcon;

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

@@ -17,8 +17,8 @@
 
   &__message {
     visibility: hidden;
-    background-color: get-color(neutral, neutral-1);
-    color: get-color(others, white);
+    background-color: var(--neutral-neutral-1);
+    color: var(--others-white);
     padding: 1rem 1rem;
     border-radius: 0.3rem;
     font-size: 12px;
@@ -67,7 +67,7 @@
     width: 0;
     height: 0;
     box-shadow: 0 0.25rem 0.5rem -0.5rem;
-    border-bottom: 0.5rem solid get-color(neutral, neutral-1);
+    border-bottom: 0.5rem solid var(--neutral-neutral-1);
     -webkit-transform: translate(-100%, 0);
     transform: translate(-100%, 0);
     top: 1.1rem;

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

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

@@ -0,0 +1,82 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DialogMenuIconStyled = styled.div `
+  .dialog-menu-icon {
+    position: relative;
+    cursor: pointer;
+    &__image {
+      min-width: 1rem;
+      height: 1rem;
+      margin-left: 0.4rem;
+
+      @media ${device.laptop} {
+        align-self: center;
+      }
+    }
+
+    &__message {
+      visibility: hidden;
+      background-color: var(--neutral-neutral-1);
+      color: var(--others-white);
+      padding: 1rem 1rem;
+      border-radius: 0.3rem;
+      font-size: 12px;
+      width: 19rem;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      position: absolute;
+      z-index: 1;
+      top: 1.5rem;
+      right: -5rem;
+
+      @media (max-width: ${size.xs}) {
+        width: 15rem;
+      }
+      @media ${device['portrait-tablets']} {
+        right: -4rem;
+      }
+      @media ${device['landscape-tablets']} {
+        width: 19rem;
+      }
+
+      p {
+        margin-right: 0.5rem;
+      }
+    }
+
+    &--visible .dialog-menu-icon__message {
+      visibility: visible;
+    }
+
+    &--hidden .dialog-menu-icon__message {
+      visibility: hidden;
+    }
+
+    &--visible-on-hover:hover .dialog-menu-icon__message {
+      visibility: visible;
+    }
+
+    &::before {
+      content: '';
+      visibility: hidden;
+      position: absolute;
+      width: 0;
+      height: 0;
+      box-shadow: 0 0.25rem 0.5rem -0.5rem;
+      border-bottom: 0.5rem solid var(--neutral-neutral-1);
+      -webkit-transform: translate(-100%, 0);
+      transform: translate(-100%, 0);
+      top: 1.1rem;
+      right: -1rem;
+      border-left: 0.5rem solid transparent;
+      border-right: 0.5rem solid transparent;
+      z-index: 20;
+    }
+
+    &--visible::before,
+    &--visible-on-hover:hover::before {
+      visibility: visible;
+    }
+  }
+`;

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

@@ -0,0 +1,83 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DialogMenuIconStyled = styled.div`
+  .dialog-menu-icon {
+    position: relative;
+    cursor: pointer;
+    &__image {
+      min-width: 1rem;
+      height: 1rem;
+      margin-left: 0.4rem;
+
+      @media ${device.laptop} {
+        align-self: center;
+      }
+    }
+
+    &__message {
+      visibility: hidden;
+      background-color: var(--neutral-neutral-1);
+      color: var(--others-white);
+      padding: 1rem 1rem;
+      border-radius: 0.3rem;
+      font-size: 12px;
+      width: 19rem;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      position: absolute;
+      z-index: 1;
+      top: 1.5rem;
+      right: -5rem;
+
+      @media (max-width: ${size.xs}) {
+        width: 15rem;
+      }
+      @media ${device['portrait-tablets']} {
+        right: -4rem;
+      }
+      @media ${device['landscape-tablets']} {
+        width: 19rem;
+      }
+
+      p {
+        margin-right: 0.5rem;
+      }
+    }
+
+    &--visible .dialog-menu-icon__message {
+      visibility: visible;
+    }
+
+    &--hidden .dialog-menu-icon__message {
+      visibility: hidden;
+    }
+
+    &--visible-on-hover:hover .dialog-menu-icon__message {
+      visibility: visible;
+    }
+
+    &::before {
+      content: '';
+      visibility: hidden;
+      position: absolute;
+      width: 0;
+      height: 0;
+      box-shadow: 0 0.25rem 0.5rem -0.5rem;
+      border-bottom: 0.5rem solid var(--neutral-neutral-1);
+      -webkit-transform: translate(-100%, 0);
+      transform: translate(-100%, 0);
+      top: 1.1rem;
+      right: -1rem;
+      border-left: 0.5rem solid transparent;
+      border-right: 0.5rem solid transparent;
+      z-index: 20;
+    }
+
+    &--visible::before,
+    &--visible-on-hover:hover::before {
+      visibility: visible;
+    }
+  }
+`

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

@@ -8,6 +8,7 @@ import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 
 import { type DialogMenuIconProps } from './DialogMenuIconProps.types'
+import { DialogMenuIconStyled } from './DialogMenuIcon.styled'
 import cross from '../../../../images/svg/icon-clear-24-px.svg'
 import shape from '../../../../images/svg/shape.svg'
 // import './DialogMenuIcon.scss'
@@ -57,26 +58,28 @@ const DialogMenuIcon: FC<DialogMenuIconProps> = ({ onClose, onOpen, content }) =
   }
 
   return (
-    <div className={classnames} ref={iconContainer}>
-      <img
-        className='dialog-menu-icon__image'
-        onClick={() => {
-          onHandleChange(true, false)
-        }}
-        src={shape}
-        alt='shape'
-      />
-      <div className='dialog-menu-icon__message' ref={messageContainer}>
-        <p>{content}</p>
+    <DialogMenuIconStyled>
+      <div className={classnames} ref={iconContainer}>
         <img
+          className='dialog-menu-icon__image'
           onClick={() => {
-            onHandleChange()
+            onHandleChange(true, false)
           }}
-          src={cross}
-          alt=''
-        ></img>
+          src={shape}
+          alt='shape'
+        />
+        <div className='dialog-menu-icon__message' ref={messageContainer}>
+          <p>{content}</p>
+          <img
+            onClick={() => {
+              onHandleChange()
+            }}
+            src={cross}
+            alt=''
+          ></img>
+        </div>
       </div>
-    </div>
+    </DialogMenuIconStyled>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React from 'react';
-// import './Disclaimer.scss'
+import { DisclaimerStyled } from './Disclaimer.styled';
 const Disclaimer = ({ givenClass, text, disclaimerLinks = false, complexCopyRight, complexCopyRightMobile, simpleCopyRight }) => {
     const showDisclaimerLinks = disclaimerLinks && _jsx(React.Fragment, { children: complexCopyRight });
     const showDisclaimerLinkMobile = disclaimerLinks && (_jsx(React.Fragment, { children: _jsxs("div", { className: 'disclaimer__copy', children: [complexCopyRightMobile, _jsx("p", { children: simpleCopyRight })] }) }));
-    return (_jsx("div", { className: `disclaimer__wrapper ${givenClass}`, children: _jsxs("div", { className: 'wrapper disclaimer sans-serif --extra-small', children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
+    return (_jsx(DisclaimerStyled, { className: `disclaimer__wrapper ${givenClass}`, children: _jsxs("div", { className: 'wrapper disclaimer sans-serif --extra-small', children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
 };
 export default Disclaimer;

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

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

@@ -0,0 +1,45 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DisclaimerStyled = styled.div `
+  padding: 1rem;
+  @media ${device.laptop} {
+    padding: 1rem 0;
+  }
+
+  &.disclaimer {
+    &__wrapper {
+      background-color: var(--neutral-main);
+      color: var(--neutral-neutral-4);
+
+      .standard {
+        color: var(--neutral-neutral-4);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .grey-color {
+    color: var(--neutral-neutral-1);
+    background-color: var(--neutral-neutral-4);
+  }
+
+  .disclaimer__copy {
+    margin-bottom: 0.5rem;
+  }
+
+  .desktop_view {
+    display: block;
+
+    @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+      display: none;
+    }
+  }
+
+  .mobile_view {
+    display: none;
+
+    @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+      display: block;
+    }
+  }
+`;

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

@@ -0,0 +1,46 @@
+import { device, size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DisclaimerStyled = styled.div`
+  padding: 1rem;
+  @media ${device.laptop} {
+    padding: 1rem 0;
+  }
+
+  &.disclaimer {
+    &__wrapper {
+      background-color: var(--neutral-main);
+      color: var(--neutral-neutral-4);
+
+      .standard {
+        color: var(--neutral-neutral-4);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .grey-color {
+    color: var(--neutral-neutral-1);
+    background-color: var(--neutral-neutral-4);
+  }
+
+  .disclaimer__copy {
+    margin-bottom: 0.5rem;
+  }
+
+  .desktop_view {
+    display: block;
+
+    @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+      display: none;
+    }
+  }
+
+  .mobile_view {
+    display: none;
+
+    @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+      display: block;
+    }
+  }
+`

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

@@ -2,7 +2,7 @@
 import React, { type FC } from 'react'
 
 import { type DisclaimerProps } from './DisclaimerProps.types'
-// import './Disclaimer.scss'
+import { DisclaimerStyled } from './Disclaimer.styled'
 
 const Disclaimer: FC<DisclaimerProps> = ({
   givenClass,
@@ -24,13 +24,13 @@ const Disclaimer: FC<DisclaimerProps> = ({
   )
 
   return (
-    <div className={`disclaimer__wrapper ${givenClass}`}>
+    <DisclaimerStyled className={`disclaimer__wrapper ${givenClass}`}>
       <div className={'wrapper disclaimer sans-serif --extra-small'}>
         <div className='disclaimer__copy'>{text}</div>
         {disclaimerLinks ? <p className='desktop_view'>{showDisclaimerLinks}</p> : <p>{simpleCopyRight}</p>}
         {disclaimerLinks && <div className='disclaimer__copy mobile_view'>{showDisclaimerLinkMobile}</div>}
       </div>
-    </div>
+    </DisclaimerStyled>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { Button } from '../Button';
 import { ChevronRight } from '../../../../images/componentsSvg/ChevronRight';
-// import './DisclaimerRatafia.scss'
+import { DisclaimerRatafiaStyled } from './DisclaimerRatafia.styled';
 export const DisclaimerRatafia = ({ icon, text, ctaTextShowDisclaimer, ctaTextCloseDisclaimer, legalAdviceText, copyrightText }) => {
     const [disclaimer, toggleDisclaimer] = React.useState(false);
     const handleShowDisclaimer = () => {
@@ -17,6 +17,6 @@ export const DisclaimerRatafia = ({ icon, text, ctaTextShowDisclaimer, ctaTextCl
             ctaTextCloseDisclaimer.onClick();
     };
     const existLegalAdviceText = Boolean(legalAdviceText);
-    return (_jsxs("div", { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), existLegalAdviceText && (_jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: legalAdviceText })), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
+    return (_jsxs(DisclaimerRatafiaStyled, { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), existLegalAdviceText && (_jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: legalAdviceText })), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
 };
 export default DisclaimerRatafia;

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

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

@@ -0,0 +1,149 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DisclaimerRatafiaStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  .disclaimer-ratafia {
+    &__text-desktop {
+      display: none;
+      @media ${device['portrait-tablets']} {
+        display: block;
+      }
+    }
+
+    &__text-mobile {
+      width: 100%;
+      @media ${device['portrait-tablets']} {
+        display: none;
+      }
+    }
+
+    &__text {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      padding: 0.5rem;
+      gap: 0.25rem;
+
+      border-radius: 4px;
+      background: var(--neutral-neutral-6);
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+      }
+
+      &__icon {
+        width: 14px;
+        margin-right: 5px;
+      }
+      &__arrow {
+        position: absolute;
+        top: 10px;
+        right: 6px;
+        fill: var(--neutral-neutral-2);
+        svg {
+          display: block;
+          width: 16px;
+          height: 16px;
+        }
+      }
+      &__text {
+        display: flex;
+        width: 100%;
+        position: relative;
+        color: var(--neutral-neutral-2);
+        border: none;
+        padding: 8px;
+        border-radius: 4px;
+        @media ${device['portrait-tablets']} {
+          margin-bottom: 0;
+          padding: 0;
+        }
+      }
+    }
+    &__copyright,
+    &__legal-advice {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: 10px;
+      align-self: stretch;
+
+      &__text {
+        color: var(--neutral-neutral-2);
+        a {
+          color: var(--neutral-neutral-2);
+        }
+      }
+    }
+
+    &__legal-advice {
+      margin-bottom: 16px;
+    }
+
+    &__disclaimer-fixed {
+      border-radius: 5px 5px 0 0;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 1rem 1.5rem 1.5rem 1.5rem;
+      background: var(--others-white);
+      border-top: 1px solid var(--neutral-neutral-5);
+      &:after {
+        content: '';
+        position: absolute;
+        top: 8px;
+        left: calc(50% - 17px);
+        border: 2px solid var(--neutral-neutral-3);
+        border-radius: 6px;
+        width: 34px;
+      }
+
+      &__title {
+        padding-top: 2rem;
+        font-size: 1.15rem;
+        font-weight: 700;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--neutral-neutral-4);
+        color: var(--neutral-neutral-1);
+      }
+      &__subTitle {
+        padding-top: 1.5rem;
+        font-size: 0.9rem;
+        color: var(--neutral-neutral-2);
+        padding-bottom: 1.5rem;
+      }
+      &__text {
+        padding-bottom: 1.5rem;
+        p {
+          font-size: 12px;
+          color: var(--neutral-neutral-2);
+        }
+        a {
+          color: var(--neutral-neutral-2);
+        }
+      }
+      &__cta {
+        display: block;
+        width: 100%;
+      }
+    }
+
+    &__disclaimer-background {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--neutral-neutral-2);
+      opacity: 30%;
+    }
+  }
+`;