@npm_leadtech/legal-lib-components 5.7.7 → 5.7.8

package/dist/src/components/molecules/Pagination/Pagination.scss

@@ -0,0 +1,62 @@
+@import '../../../globalStyles/variables.scss';
+
+.pagination {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &__control {
+    display: flex;
+    svg {
+      cursor: pointer;
+      fill: var(--neutral-neutral-2);
+      width: 1rem;
+      path {
+        pointer-events: none;
+      }
+    }
+    &--prev svg {
+      transform: rotate(180deg);
+    }
+    &--hidden {
+      cursor: default;
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
+
+  &__page-wrapper {
+    display: flex;
+    margin: 0 1rem;
+  }
+
+  &__page {
+    align-items: center;
+    background: var(--neutral-neutral-6);
+    border: 2px solid var(--neutral-neutral-3);
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: var(--neutral-neutral-2);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    height: 2.125rem;
+    margin: 0 0.25rem;
+    min-width: 2.125rem;
+    padding: 0.3rem;
+
+    &--active {
+      background: var(--neutral-neutral-4);
+      border: 2px solid var(--neutral-neutral-2);
+      color: var(--neutral-neutral-1);
+    }
+
+    &--ellipsis {
+      cursor: default;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@ import React, { type FC, type SyntheticEvent, useCallback, useState } from 'reac
 import PageStepControl from './PageStepControl'
 import PageSteps from './PageSteps'
 import { type PaginationProps } from './PaginationProps.types'
-import { PaginationStyled } from './Pagination.styled'
+// import './Pagination.scss'
 
 const Pagination: FC<PaginationProps> = ({
   activePage,
@@ -32,11 +32,11 @@ const Pagination: FC<PaginationProps> = ({
   if (totalPages === undefined) return null
 
   return (
-    <PaginationStyled className='pagination'>
+    <div className='pagination'>
       <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={prevControl} />
       <PageSteps activePage={active} onClick={handleCurrentPage} totalPages={totalPages} />
       <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={nextControl} />
-    </PaginationStyled>
+    </div>
   )
 }
 

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ContactPhoneIcon from '../../../../images/webp/customer-support.webp';
 import ContactPhoneIconIE from '../../../../images/png/customer-support.png';
-import { PhoneContactBoxDesktopStyled } from './PhoneContactBoxDesktop.styled';
 // import './PhoneContactBoxDesktop.scss'
 export const PhoneContactBoxDesktop = ({ phones, schedule }) => {
-    return (_jsxs(PhoneContactBoxDesktopStyled, { className: 'phone-contact-box-container', children: [_jsx("img", { src: ContactPhoneIcon, alt: 'Contact phone icon', width: '40', height: '40' }), _jsx("img", { src: ContactPhoneIconIE, className: 'onlyIE', alt: 'Contact phone icon', width: '40', height: '40' }), _jsxs("div", { className: 'phone-contact-info', children: [phones.map((phone, index) => (_jsx("p", { className: 'phone-contact-phone', children: phone }, `${phone}-${index}`))), _jsx("p", { className: 'email-contact-text', children: schedule })] })] }));
+    return (_jsxs("div", { className: 'phone-contact-box-container', children: [_jsx("img", { src: ContactPhoneIcon, alt: 'Contact phone icon', width: '40', height: '40' }), _jsx("img", { src: ContactPhoneIconIE, className: 'onlyIE', alt: 'Contact phone icon', width: '40', height: '40' }), _jsxs("div", { className: 'phone-contact-info', children: [phones.map((phone, index) => (_jsx("p", { className: 'phone-contact-phone', children: phone }, `${phone}-${index}`))), _jsx("p", { className: 'email-contact-text', children: schedule })] })] }));
 };

package/dist/src/components/molecules/PhoneContactBoxDesktop/PhoneContactBoxDesktop.scss

@@ -0,0 +1,60 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.phone-contact {
+  &-box-container {
+    background-color: var(--others-white);
+    width: 100%;
+    border-radius: 4px;
+    margin-bottom: 2rem;
+    display: none;
+    padding: 2rem 1.5rem;
+    text-decoration: none;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) {
+        letter-spacing: -1px;
+      }
+    }
+
+    @include landscape-tablets {
+      display: flex;
+    }
+
+    img {
+      align-self: center;
+      &:not(.onlyIE) {
+        display: block;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          display: none;
+        }
+      }
+      &.onlyIE {
+        display: none;
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &-info {
+    margin-left: 1.5rem;
+  }
+
+  &-phone {
+    font-size: 1.5rem;
+    color: var(--primary-main-dark-1);
+    font-weight: bold;
+    text-decoration: none;
+
+    @include laptop {
+      font-size: 1.7rem;
+    }
+  }
+
+  &-text {
+    color: var(--neutral-neutral-2);
+  }
+}

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

@@ -5,12 +5,11 @@ import React from 'react'
 import ContactPhoneIcon from '../../../../images/webp/customer-support.webp'
 import ContactPhoneIconIE from '../../../../images/png/customer-support.png'
 import { type PhoneContactBoxDesktopProps } from './PhoneContactBoxDesktopProps.types'
-import { PhoneContactBoxDesktopStyled } from './PhoneContactBoxDesktop.styled'
 // import './PhoneContactBoxDesktop.scss'
 
 export const PhoneContactBoxDesktop: React.FC<PhoneContactBoxDesktopProps> = ({ phones, schedule }) => {
   return (
-    <PhoneContactBoxDesktopStyled className='phone-contact-box-container'>
+    <div className='phone-contact-box-container'>
       <img src={ContactPhoneIcon} alt='Contact phone icon' width='40' height='40'></img>
       <img src={ContactPhoneIconIE} className='onlyIE' alt='Contact phone icon' width='40' height='40'></img>
       <div className='phone-contact-info'>
@@ -21,6 +20,6 @@ export const PhoneContactBoxDesktop: React.FC<PhoneContactBoxDesktopProps> = ({
         ))}
         <p className='email-contact-text'>{schedule}</p>
       </div>
-    </PhoneContactBoxDesktopStyled>
+    </div>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-import { PhoneContactBoxMobileStyled } from './PhoneContactBoxMobile.styled';
+// import './PhoneContactBoxMobile.scss'
 export const PhoneContactBoxMobile = ({ phones, schedule }) => {
-    return (_jsxs(PhoneContactBoxMobileStyled, { className: 'phone-mobile-contact-box-container wrapper wrapper--responsive', children: [phones.map((phone, index) => (_jsx(Button, { centered: true, isExternal: true, link: `tel:${phone}`, gtmTag: 'clicked_phone_contactus', givenClass: 'phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center', label: phone, dataQa: 'phone_contact_box' }, `${phone}-${index}`))), _jsx("p", { className: 'phone-mobile-contact-text', children: schedule })] }));
+    return (_jsxs("div", { className: 'phone-mobile-contact-box-container wrapper wrapper--responsive', children: [phones.map((phone, index) => (_jsx(Button, { centered: true, isExternal: true, link: `tel:${phone}`, gtmTag: 'clicked_phone_contactus', givenClass: 'phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center', label: phone, dataQa: 'phone_contact_box' }, `${phone}-${index}`))), _jsx("p", { className: 'phone-mobile-contact-text', children: schedule })] }));
 };

package/dist/src/components/molecules/PhoneContactBoxMobile/PhoneContactBoxMobile.scss

@@ -0,0 +1,33 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.phone-mobile-contact {
+  &-box-container {
+    display: block;
+    padding-top: 1rem;
+
+    @include landscape-tablets {
+      display: none;
+    }
+  }
+
+  &-button {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+
+    &:before {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iZXA3dHIycDdyYSIgZD0iTTIwLjAxIDE1LjM4Yy0xLjIzIDAtMi40Mi0uMi0zLjUzLS41Ni0uMzUtLjEyLS43NC0uMDMtMS4wMS4yNGwtMS41NyAxLjk3Yy0yLjgzLTEuMzUtNS40OC0zLjktNi44OS02LjgzbDEuOTUtMS42NmMuMjctLjI4LjM1LS42Ny4yNC0xLjAyLS4zNy0xLjExLS41Ni0yLjMtLjU2LTMuNTMgMC0uNTQtLjQ1LS45OS0uOTktLjk5SDQuMTlDMy42NSAzIDMgMy4yNCAzIDMuOTkgMyAxMy4yOCAxMC43MyAyMSAyMC4wMSAyMWMuNzEgMCAuOTktLjYzLjk5LTEuMTh2LTMuNDVjMC0uNTQtLjQ1LS45OS0uOTktLjk5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc2LjAwMDAwMCwgLTMxNC4wMDAwMDApIHRyYW5zbGF0ZSgzMjguMDAwMDAwLCAyMDUuMDAwMDAwKSB0cmFuc2xhdGUoMzIuMDAwMDAwLCA5MC4wMDAwMDApIHRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSI3dHZidm9pbXpiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2VwN3RyMnA3cmEiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBjbGFzcz0iaWNvbi13ZWItMjQtcCIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCM3dHZidm9pbXpiKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+      margin-right: 0.5rem;
+    }
+  }
+
+  &-text {
+    color: var(--neutral-neutral-2);
+    text-align: center;
+    margin: 0rem 0 2rem;
+  }
+}

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

@@ -3,11 +3,11 @@ import React from 'react'
 
 import { Button } from '../../atoms'
 import { type PhoneContactBoxMobileProps } from './PhoneContactBoxMobileProps.types'
-import { PhoneContactBoxMobileStyled } from './PhoneContactBoxMobile.styled'
+// import './PhoneContactBoxMobile.scss'
 
 export const PhoneContactBoxMobile: React.FC<PhoneContactBoxMobileProps> = ({ phones, schedule }) => {
   return (
-    <PhoneContactBoxMobileStyled className='phone-mobile-contact-box-container wrapper wrapper--responsive'>
+    <div className='phone-mobile-contact-box-container wrapper wrapper--responsive'>
       {phones.map((phone, index) => (
         <Button
           key={`${phone}-${index}`}
@@ -21,6 +21,6 @@ export const PhoneContactBoxMobile: React.FC<PhoneContactBoxMobileProps> = ({ ph
         />
       ))}
       <p className='phone-mobile-contact-text'>{schedule}</p>
-    </PhoneContactBoxMobileStyled>
+    </div>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PopularDocsItem } from '../../atoms';
-import { PopularDocsStyled } from './PopularDocs.styled';
+// import './PopularDocs.scss'
 export const PopularDocs = ({ title, documents }) => {
-    return (_jsxs(PopularDocsStyled, { className: 'popular-docs', children: [_jsx("h2", { className: 'title', children: title }), _jsx("div", { className: 'documents', children: documents.map((document) => (_jsx(PopularDocsItem, { ...document }, document.id))) })] }));
+    return (_jsxs("div", { className: 'popular-docs', children: [_jsx("h2", { className: 'title', children: title }), _jsx("div", { className: 'documents', children: documents.map((document) => (_jsx(PopularDocsItem, { ...document }, document.id))) })] }));
 };

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

@@ -1,15 +1,14 @@
-import { size } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const PopularDocsStyled = styled.div`
+.popular-docs {
   width: 80%;
   margin-left: 3rem;
 
-  @media only screen and (max-width: ${size.md}) {
+  @media only screen and (max-width: #{$md}) {
     margin-left: 0;
   }
 
-  @media only screen and (max-width: ${size.xs}) {
+  @media only screen and (max-width: #{$xs}) {
     width: 95%;
   }
 
@@ -22,7 +21,7 @@ export const PopularDocsStyled = styled.div`
     color: var(--primary-main-dark-1);
     margin-bottom: 16px;
 
-    @media only screen and (max-width: ${size.md}) {
+    @media only screen and (max-width: #{$md}) {
       text-align: center;
     }
   }
@@ -32,4 +31,4 @@ export const PopularDocsStyled = styled.div`
     flex-direction: column;
     gap: var(--global-gap);
   }
-`
+}

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

@@ -2,17 +2,17 @@ import React from 'react'
 
 import { PopularDocsItem } from '../../atoms'
 import { type PopularDocsProps } from './PopularDocsProps'
-import { PopularDocsStyled } from './PopularDocs.styled'
+// import './PopularDocs.scss'
 
 export const PopularDocs: React.FC<PopularDocsProps> = ({ title, documents }) => {
   return (
-    <PopularDocsStyled className='popular-docs'>
+    <div className='popular-docs'>
       <h2 className='title'>{title}</h2>
       <div className='documents'>
         {documents.map((document) => (
           <PopularDocsItem key={document.id} {...document} />
         ))}
       </div>
-    </PopularDocsStyled>
+    </div>
   )
 }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { useState } from 'react';
 import { Button, Message } from '../../atoms';
-import { PricingCardStyled } from './PricingCard.styled';
+// import './PricingCard.scss'
 const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false, planName, price, currency, underPricingText, featuresList = [], children, disclaimer, message, cardButton }) => {
     const [cardState, setCardState] = useState({ expanded: false });
     if (planName === undefined ||
@@ -26,6 +26,6 @@ const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false,
     const renderMoreMobileButton = (_jsx(Button, { dataQa: '', givenClass: 'see-more-button', color: 'tertiary', label: cardState.expanded ? 'See less' : 'See more', noLink: true, onClick: toggleCardContent }));
     const renderHeaderContent = (_jsx("div", { className: 'pricing-card__header', children: _jsx("h5", { className: 'sans-serif --big pricing-card__header__text', children: _jsx("strong", { children: planName }) }) }));
     const renderBodyContent = (_jsxs("div", { className: 'pricing-card__body', children: [Boolean(price) && (_jsxs("div", { className: 'sans-serif pricing-card__body__price', children: [_jsx("strong", { children: price }), _jsx("span", { children: currency }), Boolean(underPricingText) && _jsx("div", { className: 'pricing-card__body__text', children: underPricingText })] })), Boolean(featuresList.length) && (_jsxs("div", { className: `pricing-card__body__features-list ${expandedContentClass}`, children: [_jsx("hr", {}), _jsx("ul", { children: featuresList.map((feature) => (_jsx("li", { className: 'pricing-card__body__features-list__item', children: feature }, 'feature-item-' + feature))) })] })), children, featuresList != null && renderMoreMobileButton, cardButton, message != null && _jsx(Message, { ...message })] }));
-    return (_jsxs(PricingCardStyled, { style: style, className: `pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`, children: [_jsx("div", { className: 'pricing-card__wrapper', children: isSelectableCard ? (_jsxs("label", { className: 'pricing-card__radio-label', "data-qa": planName, children: [_jsx("input", { className: 'radio-input', type: 'radio', value: subscriptionId, onChange: onChangeRadio, name: 'pricing', checked: isChecked }), _jsx("span", { className: 'radio-checkbox' }), renderHeaderContent, renderBodyContent] })) : (_jsxs(_Fragment, { children: [renderHeaderContent, renderBodyContent] })) }), Boolean(disclaimer) && (_jsx("div", { className: 'pricing-card__disclaimer', children: _jsx("small", { children: disclaimer }) }))] }));
+    return (_jsxs("li", { style: style, className: `pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`, children: [_jsx("div", { className: 'pricing-card__wrapper', children: isSelectableCard ? (_jsxs("label", { className: 'pricing-card__radio-label', "data-qa": planName, children: [_jsx("input", { className: 'radio-input', type: 'radio', value: subscriptionId, onChange: onChangeRadio, name: 'pricing', checked: isChecked }), _jsx("span", { className: 'radio-checkbox' }), renderHeaderContent, renderBodyContent] })) : (_jsxs(_Fragment, { children: [renderHeaderContent, renderBodyContent] })) }), Boolean(disclaimer) && (_jsx("div", { className: 'pricing-card__disclaimer', children: _jsx("small", { children: disclaimer }) }))] }));
 };
 export default PricingCard;

package/dist/src/components/molecules/PricingCard/PricingCard.scss

@@ -0,0 +1,186 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.pricing-card {
+  position: relative;
+  max-width: 400px;
+  border: solid 1px transparent;
+  list-style: none;
+
+  &.--selectable {
+    .pricing-card__radio-label {
+      cursor: pointer;
+    }
+
+    &:not(.--selected):hover {
+      .pricing-card__wrapper {
+        border-color: var(--neutral-neutral-3);
+      }
+    }
+  }
+
+  &.--selected {
+    .pricing-card__wrapper {
+      border-color: var(--primary-main-light-3);
+    }
+  }
+
+  &__radio-label {
+    .radio-input {
+      display: none;
+
+      & + .radio-checkbox {
+        background-color: var(--others-white);
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 1px solid;
+      }
+
+      &:checked {
+        & + .radio-checkbox {
+          border: 5px solid var(--primary-main-light-1);
+        }
+      }
+    }
+  }
+
+  &__wrapper {
+    background-color: var(--others-white);
+    box-shadow: var(--box-shadow-container);
+    border-radius: var(--global-border-radius);
+    border: solid 1px transparent;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0.5rem;
+
+      li {
+        text-align: left;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 2rem;
+
+        p {
+          text-align: left;
+        }
+
+        img {
+          width: 2.2rem;
+          height: 2.2rem;
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
+
+  &__header {
+    padding: 1rem;
+    text-align: center;
+    background: var(--neutral-neutral-6);
+
+    &__text {
+      color: var(--neutral-neutral-2);
+      margin: 0 1rem;
+    }
+  }
+
+  &__body {
+    color: var(--neutral-neutral-1);
+    display: flex;
+    flex-flow: column nowrap;
+    padding: 1.5rem 1rem;
+    text-align: center;
+
+    &__price {
+      font-size: 2.25rem;
+      line-height: 2rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      order: 2;
+
+      @include desktop {
+        font-size: 2.25rem;
+        line-height: 2.5rem;
+      }
+
+      span {
+        font-size: 1rem;
+        display: inline;
+        margin-left: 0.2rem;
+      }
+    }
+
+    &__text {
+      font-size: 0.85rem;
+      color: var(--neutral-neutral-2);
+      order: 4;
+    }
+
+    &__features-list {
+      display: none;
+      order: 6;
+
+      @include landscape-tablets {
+        display: block;
+      }
+
+      &.--expanded {
+        display: block;
+      }
+
+      hr {
+        width: 100%;
+        border-top: 1px solid var(--neutral-neutral-4);
+        margin-bottom: 1.5rem;
+      }
+
+      &__item {
+        &::before {
+          content: '\2022';
+          color: var(--primary-main);
+          font-weight: bold;
+          display: inline-block;
+          margin-right: 1rem;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 1rem;
+        }
+      }
+    }
+
+    .e-button.see-more-button {
+      display: block;
+      margin: auto;
+      order: 8;
+
+      @include landscape-tablets {
+        display: none;
+      }
+    }
+  }
+
+  &__disclaimer {
+    color: var(--neutral-neutral-2);
+    font-size: 0.75rem;
+    text-align: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 0.8rem 0 0.4rem;
+    max-width: 20rem;
+
+    @include landscape-tablets {
+      max-width: unset;
+    }
+  }
+
+  &__button {
+    width: 100%;
+  }
+}

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

@@ -3,7 +3,7 @@ import React, { type FC, useState } from 'react'
 
 import { Button, Message } from '../../atoms'
 import { type PricingCardProps } from './PricingCardProps.types'
-import { PricingCardStyled } from './PricingCard.styled'
+// import './PricingCard.scss'
 
 const PricingCard: FC<PricingCardProps> = ({
   order,
@@ -92,10 +92,7 @@ const PricingCard: FC<PricingCardProps> = ({
   )
 
   return (
-    <PricingCardStyled
-      style={style}
-      className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}
-    >
+    <li style={style} className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}>
       <div className={'pricing-card__wrapper'}>
         {isSelectableCard ? (
           <label className='pricing-card__radio-label' data-qa={planName}>
@@ -123,7 +120,7 @@ const PricingCard: FC<PricingCardProps> = ({
           <small>{disclaimer}</small>
         </div>
       )}
-    </PricingCardStyled>
+    </li>
   )
 }
 

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms';
-import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
 const RatafiaSubscriptionCard = ({ cardStyle, iconTitle, title, priceText, mainFeatures, AIFeatures, buttonText, linkText }) => {
     if (!title)
         return null;
     const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary';
     const renderFeatures = (features, className) => features.map((feature) => (_jsxs("div", { className: `ratafia-card__feature ${className ?? ''}`, children: [feature.image?.url && _jsx(IconSvgURLWithThemeColor, { url: feature.image.url, height: '16', width: '16' }), _jsx(RichTextStrapi, { html: feature.title })] }, feature.title)));
-    return (_jsxs(RatafiaSubscriptionCardStyled, { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ai-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, link: linkText ?? '#' }) }))] }));
+    return (_jsxs("div", { className: `ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`, children: [_jsxs("div", { className: 'ratafia-card__header', children: [title && (_jsxs("div", { className: 'ratafia-card__title', children: [iconTitle?.url && _jsx(IconSvgURLWithThemeColor, { url: iconTitle.url, height: '26', width: '26' }), _jsx(RichTextStrapi, { html: title })] })), priceText && _jsx("div", { className: 'ratafia-card__price-text', children: priceText })] }), _jsx("hr", {}), _jsxs("div", { className: 'ratafia-card__body', children: [mainFeatures && renderFeatures(mainFeatures, 'main-feature'), AIFeatures && renderFeatures(AIFeatures, 'ai-feature')] }), buttonText && (_jsx("div", { className: 'ratafia-card__footer', children: _jsx(Button, { dataQa: 'ratafia-card-button', givenClass: 'ratafia-card__button', color: buttonStyle, label: buttonText, link: linkText ?? '#' }) }))] }));
 };
 export default RatafiaSubscriptionCard;

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.scss

@@ -0,0 +1,93 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.ratafia-card {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  gap: 0.5rem;
+  min-width: 320px;
+  padding: 1rem;
+  border-radius: $global-border-radius;
+
+  &__header {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+  }
+
+  &__title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.8rem;
+    font-weight: bold;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid get-color(neutral, neutral-4);
+    width: 100%;
+  }
+
+  &__body {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+  }
+
+  &__feature {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    gap: 0.5rem;
+    color: get-color(neutral, neutral-1);
+    text-align: left;
+    padding: 0.25rem 0;
+
+    .icon-svg-with-theme-color {
+      flex-basis: 1rem;
+      margin-top: 0.2rem;
+    }
+
+    &.ratafia-card__ai-feature {
+      background-color: get-color(primary, main-light-6);
+      padding-left: 0.5rem;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    margin-top: 1.5rem;
+  }
+
+  &.primary {
+    background-color: var(--neutral-neutral-6);
+
+    .icon-svg-with-theme-color {
+      background-color: get-color(primary, main-light-1);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: get-color(primary, main-light-6);
+      }
+    }
+  }
+
+  &.secondary {
+    background-color: get-color(secondary, main-light-4);
+
+    .icon-svg-with-theme-color {
+      background-color: get-color(secondary, main-dark-2);
+    }
+
+    .ratafia-card__feature {
+      &.ratafia-card__ai-feature {
+        background-color: get-color(secondary, main-light-3);
+      }
+    }
+  }
+}