@npm_leadtech/legal-lib-components 5.7.5 → 5.7.7

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

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

@@ -0,0 +1,32 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PhoneContactBoxMobileStyled = styled.div `
+  display: block;
+  padding-top: 1rem;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .phone-mobile-contact {
+    &-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.styled.ts

@@ -0,0 +1,33 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PhoneContactBoxMobileStyled = styled.div`
+  display: block;
+  padding-top: 1rem;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .phone-mobile-contact {
+    &-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 './PhoneContactBoxMobile.scss'
+import { PhoneContactBoxMobileStyled } from './PhoneContactBoxMobile.styled'
 
 export const PhoneContactBoxMobile: React.FC<PhoneContactBoxMobileProps> = ({ phones, schedule }) => {
   return (
-    <div className='phone-mobile-contact-box-container wrapper wrapper--responsive'>
+    <PhoneContactBoxMobileStyled 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>
-    </div>
+    </PhoneContactBoxMobileStyled>
   )
 }

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 './PopularDocs.scss'
+import { PopularDocsStyled } from './PopularDocs.styled';
 export const PopularDocs = ({ title, documents }) => {
-    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))) })] }));
+    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))) })] }));
 };

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

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

@@ -0,0 +1,34 @@
+import { size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PopularDocsStyled = styled.div `
+  width: 80%;
+  margin-left: 3rem;
+
+  @media only screen and (max-width: ${size.md}) {
+    margin-left: 0;
+  }
+
+  @media only screen and (max-width: ${size.xs}) {
+    width: 95%;
+  }
+
+  .title {
+    text-align: left;
+    padding-left: 0.5rem;
+    font-size: 18px;
+    line-height: 1.33;
+    letter-spacing: -0.3px;
+    color: var(--primary-main-dark-1);
+    margin-bottom: 16px;
+
+    @media only screen and (max-width: ${size.md}) {
+      text-align: center;
+    }
+  }
+
+  .documents {
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-gap);
+  }
+`;

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

@@ -1,14 +1,15 @@
-@import '../../../globalStyles/mediaqueries.scss';
+import { size } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.popular-docs {
+export const PopularDocsStyled = styled.div`
   width: 80%;
   margin-left: 3rem;
 
-  @media only screen and (max-width: #{$md}) {
+  @media only screen and (max-width: ${size.md}) {
     margin-left: 0;
   }
 
-  @media only screen and (max-width: #{$xs}) {
+  @media only screen and (max-width: ${size.xs}) {
     width: 95%;
   }
 
@@ -21,7 +22,7 @@
     color: var(--primary-main-dark-1);
     margin-bottom: 16px;
 
-    @media only screen and (max-width: #{$md}) {
+    @media only screen and (max-width: ${size.md}) {
       text-align: center;
     }
   }
@@ -31,4 +32,4 @@
     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 './PopularDocs.scss'
+import { PopularDocsStyled } from './PopularDocs.styled'
 
 export const PopularDocs: React.FC<PopularDocsProps> = ({ title, documents }) => {
   return (
-    <div className='popular-docs'>
+    <PopularDocsStyled className='popular-docs'>
       <h2 className='title'>{title}</h2>
       <div className='documents'>
         {documents.map((document) => (
           <PopularDocsItem key={document.id} {...document} />
         ))}
       </div>
-    </div>
+    </PopularDocsStyled>
   )
 }

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 './PricingCard.scss'
+import { PricingCardStyled } from './PricingCard.styled';
 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("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 }) }))] }));
+    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 }) }))] }));
 };
 export default PricingCard;

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

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

@@ -0,0 +1,189 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PricingCardStyled = styled.li `
+  position: relative;
+  max-width: 400px;
+  border: solid 1px transparent;
+  list-style: none;
+
+  &.pricing-card {
+    &.--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);
+      }
+    }
+  }
+
+  .pricing-card {
+    &__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;
+
+        @media ${device.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;
+
+        @media ${device['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: '•';
+            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;
+
+        @media ${device['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;
+
+      @media ${device['landscape-tablets']} {
+        max-width: unset;
+      }
+    }
+
+    &__button {
+      width: 100%;
+    }
+  }
+`;

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

@@ -0,0 +1,190 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PricingCardStyled = styled.li`
+  position: relative;
+  max-width: 400px;
+  border: solid 1px transparent;
+  list-style: none;
+
+  &.pricing-card {
+    &.--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);
+      }
+    }
+  }
+
+  .pricing-card {
+    &__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;
+
+        @media ${device.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;
+
+        @media ${device['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: '•';
+            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;
+
+        @media ${device['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;
+
+      @media ${device['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 './PricingCard.scss'
+import { PricingCardStyled } from './PricingCard.styled'
 
 const PricingCard: FC<PricingCardProps> = ({
   order,
@@ -92,7 +92,10 @@ const PricingCard: FC<PricingCardProps> = ({
   )
 
   return (
-    <li style={style} className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}>
+    <PricingCardStyled
+      style={style}
+      className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}
+    >
       <div className={'pricing-card__wrapper'}>
         {isSelectableCard ? (
           <label className='pricing-card__radio-label' data-qa={planName}>
@@ -120,7 +123,7 @@ const PricingCard: FC<PricingCardProps> = ({
           <small>{disclaimer}</small>
         </div>
       )}
-    </li>
+    </PricingCardStyled>
   )
 }
 

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

@@ -1,11 +1,12 @@
 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("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 ?? '#' }) }))] }));
+    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 ?? '#' }) }))] }));
 };
 export default RatafiaSubscriptionCard;

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

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