@npm_leadtech/legal-lib-components 5.7.5 → 5.7.7

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

@@ -0,0 +1,39 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CountDownMessageStyled = styled.div`
+  &.count-down-message {
+    text-align: center;
+    padding: 0 0 16px 0;
+
+    @media ${device['landscape-tablets']} {
+      padding: 8px 0 24px 0;
+      text-align: left;
+    }
+
+    &.extra-margin {
+      margin: 0 1.5rem;
+
+      @media ${device.laptop} {
+        margin: 0;
+      }
+    }
+  }
+
+  &.count-down-message-fixed {
+    display: none;
+    &--show {
+      display: block;
+      position: fixed;
+      top: 0;
+      z-index: 1;
+      left: 0;
+      right: 0;
+      padding: 8px;
+    }
+
+    .message-information {
+      box-shadow: 1px 2px 4px var(--neutral-neutral-4);
+    }
+  }
+`

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

@@ -2,6 +2,7 @@
 import React, { type FC, useEffect, useRef, useState } from 'react'
 
 import { type CountDownMessageProps } from './CountDownMessageProps.types'
+import { CountDownMessageStyled } from './CountDownMessage.styled'
 import { MessageInformation } from '../../atoms'
 import classNames from 'classnames'
 import { useIsMobileOrTable } from '../../../hooks'
@@ -42,11 +43,11 @@ const CountDownMessage: FC<CountDownMessageProps> = ({ noImg = false, text, time
 
   return (
     <>
-      <div className={`count-down-message ${noImg && 'extra-margin'}`} ref={countDownRef}>
+      <CountDownMessageStyled className={`count-down-message ${noImg && 'extra-margin'}`} ref={countDownRef}>
         {messageInformationHtml}
-      </div>
+      </CountDownMessageStyled>
 
-      <div className={classCountDownMessageFixed}>{messageInformationHtml}</div>
+      <CountDownMessageStyled className={classCountDownMessageFixed}>{messageInformationHtml}</CountDownMessageStyled>
     </>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EmailContactBoxStyled } from './EmailContactBox.styled';
 import { MailSvg } from '../../../../images/componentsSvg/MailSvg';
-// import './EmailContactBox.scss'
 export const EmailContactBox = ({ mail, text }) => {
-    return (_jsxs("div", { className: 'email-contact-box-container', children: [_jsx(MailSvg, {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("a", { className: 'email-contact-mail', href: `mailto:${mail}`, children: mail }) }), _jsx("p", { className: 'email-contact-text', children: text })] })] }));
+    return (_jsxs(EmailContactBoxStyled, { className: 'email-contact-box-container', children: [_jsx(MailSvg, {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("a", { className: 'email-contact-mail', href: `mailto:${mail}`, children: mail }) }), _jsx("p", { className: 'email-contact-text', children: text })] })] }));
 };

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

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+export const EmailContactBoxStyled = styled.div `
+  width: 100%;
+  border: 1px solid var(--neutral-neutral-3);
+  border-radius: 4px;
+  margin-top: 2rem;
+  margin-bottom: 6rem;
+  display: flex;
+  padding: 1rem 1.5rem;
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  .email-icon {
+    width: 30px;
+    margin-right: 1rem;
+
+    path {
+      fill: var(--primary-main-light-1);
+    }
+  }
+
+  .email-contact-mail {
+    color: var(--primary-main-light-1);
+    font-weight: bold;
+  }
+
+  .email-contact-text {
+    color: var(--neutral-neutral-2);
+  }
+`;

package/dist/src/components/molecules/EmailContactBox/{EmailContactBox.scss → EmailContactBox.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.email-contact-box-container {
+export const EmailContactBoxStyled = styled.div`
   width: 100%;
   border: 1px solid var(--neutral-neutral-3);
   border-radius: 4px;
@@ -32,4 +32,4 @@
   .email-contact-text {
     color: var(--neutral-neutral-2);
   }
-}
+`

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

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { type EmailContactBoxProps } from './EmailContactBoxProps'
+import { EmailContactBoxStyled } from './EmailContactBox.styled'
 import { MailSvg } from '../../../../images/componentsSvg/MailSvg'
-// import './EmailContactBox.scss'
 
 export const EmailContactBox: React.FC<EmailContactBoxProps> = ({ mail, text }) => {
   return (
-    <div className='email-contact-box-container'>
+    <EmailContactBoxStyled className='email-contact-box-container'>
       <MailSvg />
       <div>
         <p>
@@ -16,6 +16,6 @@ export const EmailContactBox: React.FC<EmailContactBoxProps> = ({ mail, text })
         </p>
         <p className='email-contact-text'>{text}</p>
       </div>
-    </div>
+    </EmailContactBoxStyled>
   )
 }

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ExpertCard } from '../../atoms/ExpertCard';
+import { ExpertCardListStyled } from './ExpertCardList.styled';
 // import './ExpertCardList.scss'
 const ExpertCardList = ({ contentExpertCard }) => {
     const expertCards = contentExpertCard.map((expertCard) => {
         return (_jsx(ExpertCard, { title: expertCard.title, url: expertCard.url, description: expertCard.description, image: expertCard.image }, expertCard.title));
     });
-    return _jsx("div", { className: 'expert-card-list', children: expertCards });
+    return _jsx(ExpertCardListStyled, { className: 'expert-card-list', children: expertCards });
 };
 export default ExpertCardList;

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

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

@@ -0,0 +1,13 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ExpertCardListStyled = styled.div `
+  display: flex;
+  flex-flow: column;
+  gap: 0 2rem;
+  justify-content: center;
+  margin: 2rem 0 3rem 0;
+
+  @media ${device['landscape-tablets']} {
+    flex-flow: row wrap;
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ExpertCardListStyled = styled.div`
+  display: flex;
+  flex-flow: column;
+  gap: 0 2rem;
+  justify-content: center;
+  margin: 2rem 0 3rem 0;
+
+  @media ${device['landscape-tablets']} {
+    flex-flow: row wrap;
+  }
+`

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

@@ -2,6 +2,7 @@ import React, { type FC } from 'react'
 
 import { ExpertCard } from '../../atoms/ExpertCard'
 import { type ExpertCardListProps } from './ExpertCardListProps.types'
+import { ExpertCardListStyled } from './ExpertCardList.styled'
 // import './ExpertCardList.scss'
 
 const ExpertCardList: FC<ExpertCardListProps> = ({ contentExpertCard }) => {
@@ -17,7 +18,7 @@ const ExpertCardList: FC<ExpertCardListProps> = ({ contentExpertCard }) => {
     )
   })
 
-  return <div className='expert-card-list'>{expertCards}</div>
+  return <ExpertCardListStyled className='expert-card-list'>{expertCards}</ExpertCardListStyled>
 }
 
 export default ExpertCardList

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
-// import './FaqItem.scss'
+import { FaqItemStyled } from './FaqItem.styled';
 export const FaqItem = ({ slug, title, children, index }) => {
-    const [isOpen, setIsOpen] = React.useState(index !== 0);
-    return (_jsxs("article", { className: `faqItem ${isOpen ? 'open' : ''}`, children: [_jsx("div", { id: slug, className: 'fakeAnchor' }), _jsxs("details", { itemProp: 'mainEntity', itemScope: true, itemType: 'https://www.schema.org/Question', className: 'content', open: isOpen ? true : undefined, children: [_jsxs("summary", { role: 'button', tabIndex: index === 0 ? 0 : -1, onClick: () => {
+    const [isOpen, setIsOpen] = React.useState(index === 0);
+    return (_jsxs(FaqItemStyled, { className: `faqItem ${isOpen ? 'open' : ''}`, children: [_jsx("div", { id: slug, className: 'fakeAnchor' }), _jsxs("details", { itemProp: 'mainEntity', itemScope: true, itemType: 'https://www.schema.org/Question', className: 'content', open: index === 0, children: [_jsxs("summary", { role: 'button', tabIndex: index === 0 ? 0 : -1, onClick: () => {
                             setIsOpen(!isOpen);
                         }, onKeyUp: () => {
                             setIsOpen(!isOpen);

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

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

package/dist/src/components/molecules/FaqItem/FaqItem.styled.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+export const FaqItemStyled = styled.article `
+  border-radius: var(--global-border-radius);
+  background: var(--others-white);
+  box-shadow: var(--box-shadow-small);
+
+  .fakeAnchor {
+    position: absolute;
+    left: 0;
+    top: -135px;
+  }
+
+  summary {
+    list-style: none;
+  }
+
+  .content {
+    width: 100%;
+    margin: 0;
+
+    .question {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: var(--global-gap);
+      justify-content: space-between;
+      padding: 1rem;
+      cursor: pointer;
+
+      .title {
+        color: var(--neutral-neutral-1);
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+
+      svg {
+        transition: all 0.35s;
+      }
+    }
+
+    .answer {
+      color: var(--neutral-neutral-1);
+      line-height: 22px;
+      letter-spacing: -0.3px;
+      padding: 0 1rem 1rem;
+
+      ul {
+        list-style: disc;
+        margin-left: 2rem;
+      }
+    }
+  }
+
+  &.open {
+    .question {
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/FaqItem/{FaqItem.scss → FaqItem.styled.ts}

@@ -1,10 +1,9 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/functions.scss';
+import styled from 'styled-components'
 
-.faqItem {
+export const FaqItemStyled = styled.article`
   border-radius: var(--global-border-radius);
   background: var(--others-white);
-  box-shadow: $box-shadow-small;
+  box-shadow: var(--box-shadow-small);
 
   .fakeAnchor {
     position: absolute;
@@ -60,4 +59,4 @@
       }
     }
   }
-}
+`

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

@@ -2,20 +2,20 @@ import React from 'react'
 
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { type FaqItemProps } from './FaqItemProps'
-// import './FaqItem.scss'
+import { FaqItemStyled } from './FaqItem.styled'
 
 export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children, index }) => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(index !== 0)
+  const [isOpen, setIsOpen] = React.useState<boolean>(index === 0)
 
   return (
-    <article className={`faqItem ${isOpen ? 'open' : ''}`}>
+    <FaqItemStyled className={`faqItem ${isOpen ? 'open' : ''}`}>
       <div id={slug} className='fakeAnchor'></div>
       <details
         itemProp='mainEntity'
         itemScope
         itemType='https://www.schema.org/Question'
         className='content'
-        open={isOpen ? true : undefined}
+        open={index === 0}
       >
         <summary
           role='button'
@@ -37,6 +37,6 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children, index }
           <span itemProp='text'>{children}</span>
         </div>
       </details>
-    </article>
+    </FaqItemStyled>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FeatureRatafiaCard } from '../../atoms';
-// import './FeatureRatafiaCardList.scss'
+import { FeatureRatafiaCardListStyled } from './FeatureRatafiaCardList.styled';
 const FeatureRatafiaCardList = ({ features = [] }) => {
     if (features.length === 0)
         return null;
-    return (_jsx("div", { className: 'feature-ratafia-card-list', children: features.map((feature) => (_jsx(FeatureRatafiaCard, { ...feature }, feature.id))) }));
+    return (_jsx(FeatureRatafiaCardListStyled, { className: 'feature-ratafia-card-list', children: features.map((feature) => (_jsx(FeatureRatafiaCard, { ...feature }, feature.id))) }));
 };
 export default FeatureRatafiaCardList;

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

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const FeatureRatafiaCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+`;

package/dist/src/components/molecules/FeatureRatafiaCardList/{FeatureRatafiaCardList.scss → FeatureRatafiaCardList.styled.ts}

@@ -1,8 +1,10 @@
-.feature-ratafia-card-list {
+import styled from 'styled-components'
+
+export const FeatureRatafiaCardListStyled = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   align-self: stretch;
   gap: 1rem;
-}
+`

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { FeatureRatafiaCard } from '../../atoms'
 import { type FeatureRatafiaCardListProps } from './FeatureRatafiaCardListProps.types'
-// import './FeatureRatafiaCardList.scss'
+import { FeatureRatafiaCardListStyled } from './FeatureRatafiaCardList.styled'
 
 const FeatureRatafiaCardList: FC<FeatureRatafiaCardListProps> = ({ features = [] }) => {
   if (features.length === 0) return null
 
   return (
-    <div className='feature-ratafia-card-list'>
+    <FeatureRatafiaCardListStyled className='feature-ratafia-card-list'>
       {features.map((feature) => (
         <FeatureRatafiaCard key={feature.id} {...feature} />
       ))}
-    </div>
+    </FeatureRatafiaCardListStyled>
   )
 }
 export default FeatureRatafiaCardList

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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import Button from '../../atoms/Button/Button';
 import { Done24pxOutline } from '../../../../images/componentsSvg/Done24pxoutlined';
+import { FeedbackStyled } from './Feedback.styled';
 import { InfoError24pxOutlined } from '../../../../images/componentsSvg/InfoError24pxOutlined';
-// import './Feedback.scss'
 const themes = {
     error: {
         className: 'feedback--error',
@@ -37,6 +37,6 @@ const Feedback = ({ theme = 'success', title, text, button, cancel, large, fluid
         'feedback--fluid': fluid,
         [currentTheme.className]: imgSrc.length === 0
     });
-    return (_jsxs("div", { className: classes, children: [_jsxs("div", { className: 'feedback__main', children: [_jsx("div", { id: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', className: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', children: imgSrc.length > 0 ? (_jsx("img", { className: 'feedback__image_img', src: imgSrc, alt: '' })) : (_jsx("div", { className: 'feedback__icon__img', children: currentTheme.icon })) }), title !== undefined && _jsx("p", { className: 'feedback__title sans-serif --big', children: title }), text !== undefined && (_jsx("p", { className: `feedback__text ${imgSrc.length === 0 ? 'feedback__text--grey' : ''}`, "data-qa": `${dataQa}-text`, children: text }))] }), renderButtons()] }));
+    return (_jsxs(FeedbackStyled, { className: classes, children: [_jsxs("div", { className: 'feedback__main', children: [_jsx("div", { id: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', className: imgSrc.length > 0 ? 'feedback__image' : 'feedback__icon', children: imgSrc.length > 0 ? (_jsx("img", { className: 'feedback__image_img', src: imgSrc, alt: '' })) : (_jsx("div", { className: 'feedback__icon__img', children: currentTheme.icon })) }), title !== undefined && _jsx("p", { className: 'feedback__title sans-serif --big', children: title }), text !== undefined && (_jsx("p", { className: `feedback__text ${imgSrc.length === 0 ? 'feedback__text--grey' : ''}`, "data-qa": `${dataQa}-text`, children: text }))] }), renderButtons()] }));
 };
 export default Feedback;

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

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

@@ -0,0 +1,114 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const FeedbackStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  &.feedback {
+    &--large {
+      flex-direction: column;
+      height: 100%;
+
+      .feedback__main {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 27.5rem;
+        padding: 0;
+      }
+    }
+
+    &--fluid {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--error {
+      .feedback__icon {
+        background: var(--error-error-3);
+      }
+
+      .feedback__title {
+        color: var(--error-main);
+      }
+    }
+
+    &--success {
+      .feedback__icon {
+        background: var(--feedback-success);
+      }
+
+      .feedback__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .feedback {
+    &__main {
+      padding: 2rem 0 2rem;
+      max-width: 25em;
+      @media ${device['portrait-tablets']} {
+        padding: 3rem 0 4rem;
+      }
+    }
+
+    &__icon {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      height: 4.6rem;
+      padding: 0.8rem;
+      margin: 0 auto 1rem;
+      width: 4.6rem;
+
+      &__img {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &__image_img {
+      margin: 0 auto;
+      margin-bottom: 2rem;
+      width: 8rem;
+
+      @media ${device['portrait-tablets']} {
+        width: 13rem;
+      }
+
+      @media ${device.laptop} {
+        width: 18rem;
+      }
+    }
+
+    &__title {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    &__text--grey {
+      color: var(--neutral-neutral-2);
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__cancel__a {
+      margin-top: 0.5rem;
+      color: var(--primary-main);
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,115 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const FeedbackStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  &.feedback {
+    &--large {
+      flex-direction: column;
+      height: 100%;
+
+      .feedback__main {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 27.5rem;
+        padding: 0;
+      }
+    }
+
+    &--fluid {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--error {
+      .feedback__icon {
+        background: var(--error-error-3);
+      }
+
+      .feedback__title {
+        color: var(--error-main);
+      }
+    }
+
+    &--success {
+      .feedback__icon {
+        background: var(--feedback-success);
+      }
+
+      .feedback__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .feedback {
+    &__main {
+      padding: 2rem 0 2rem;
+      max-width: 25em;
+      @media ${device['portrait-tablets']} {
+        padding: 3rem 0 4rem;
+      }
+    }
+
+    &__icon {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      height: 4.6rem;
+      padding: 0.8rem;
+      margin: 0 auto 1rem;
+      width: 4.6rem;
+
+      &__img {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &__image_img {
+      margin: 0 auto;
+      margin-bottom: 2rem;
+      width: 8rem;
+
+      @media ${device['portrait-tablets']} {
+        width: 13rem;
+      }
+
+      @media ${device.laptop} {
+        width: 18rem;
+      }
+    }
+
+    &__title {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    &__text--grey {
+      color: var(--neutral-neutral-2);
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__cancel__a {
+      margin-top: 0.5rem;
+      color: var(--primary-main);
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+`