@npm_leadtech/legal-lib-components 5.2.32 → 5.2.40

package/dist/src/components/atoms/PopularDocsItem/{PopularDocsItem.styled.ts → PopularDocsItem.scss}

@@ -1,33 +1,20 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const PopularDocsItemStyled = styled.a`
+.popular-docs-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 24px 16px 24px 24px;
-  gap: calc(1rem * 2);
+  gap: $global-gap * 2;
   height: 6rem;
-  background: var(--others-white);
-  box-shadow: var(--box-shadow-container);
-  border-radius: var(--global-border-radius);
+  background: get-color(others, white);
+  box-shadow: $box-shadow-container;
+  border-radius: $global-border-radius;
   text-decoration: none;
 
-  &:hover {
-    background-color: var(--neutral-neutral-5);
-    cursor: pointer;
-
-    .icon-left svg .main-fill {
-      fill: var(--primary-main);
-    }
-  }
-
-  @media ${device['landscape-tablets']} {
-    margin-left: 0.5rem;
-  }
-
   .category-icon svg {
-    fill: var(--primary-main-dark-1);
+    fill: get-color(primary, main-dark-1);
   }
 
   .category-icon i {
@@ -41,7 +28,7 @@ export const PopularDocsItemStyled = styled.a`
     width: 100%;
 
     .description {
-      color: var(--neutral-neutral-2);
+      color: get-color(neutral, neutral-2);
       font-size: 12px;
       line-height: 1.33;
       margin-top: 0.3rem;
@@ -53,7 +40,20 @@ export const PopularDocsItemStyled = styled.a`
     height: 40px;
 
     .main-fill {
-      fill: var(--neutral-neutral-4);
+      fill: get-color(neutral, neutral-4);
     }
   }
-`
+
+  &:hover {
+    background-color: get-color(neutral, neutral-5);
+    cursor: pointer;
+
+    .icon-left svg .main-fill {
+      fill: get-color(primary, main);
+    }
+  }
+
+  @include landscape-tablets {
+    margin-left: 0.5rem;
+  }
+}

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

@@ -2,12 +2,12 @@ import React from 'react'
 
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { type PopularDocsItemProps } from './PopularDocsItemProps'
-import { PopularDocsItemStyled } from './PopularDocsItem.styled'
 import { getCategoryIcons } from '../../../utils/getCategoryIcons'
+// import './PopularDocsItem.scss'
 
 export const PopularDocsItem: React.FC<PopularDocsItemProps> = ({ title, description, slug, icon = null }) => {
   return (
-    <PopularDocsItemStyled className='popular-docs-item' href={slug} data-qa={title.replace(/\s/g, '_')}>
+    <a className='popular-docs-item' href={slug} data-qa={title.replace(/\s/g, '_')}>
       <div className='category-icon'>{icon ?? getCategoryIcons(description, 35, 30)}</div>
       <div className='texts'>
         <div>
@@ -18,6 +18,6 @@ export const PopularDocsItem: React.FC<PopularDocsItemProps> = ({ title, descrip
       <div className='icon-left'>
         <ChevronRight24px />
       </div>
-    </PopularDocsItemStyled>
+    </a>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProgressBarStyled } from './ProgressBar.styled';
+// import './ProgressBar.scss'
 const ProgressBar = ({ currentStep, allSteps }) => {
     const currentProgress = (100 * currentStep) / allSteps.length;
-    return (_jsxs(ProgressBarStyled, { className: 'progress__wrapper', children: [_jsx("div", { className: 'progressbar', style: { width: `${currentProgress}%` } }), _jsx("div", { className: 'progressbar__remain' })] }));
+    return (_jsxs("section", { className: 'progress__wrapper', children: [_jsx("div", { className: 'progressbar', style: { width: `${currentProgress}%` } }), _jsx("div", { className: 'progressbar__remain' })] }));
 };
 export default ProgressBar;

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

@@ -0,0 +1,24 @@
+@import '../../../globalStyles/variables.scss';
+
+.progress__wrapper {
+  position: absolute;
+  width: 100%;
+  top: 5.25rem;
+  left: 0;
+  height: 0.25rem;
+}
+
+.progressbar {
+  height: 100%;
+  background: get-color(primary);
+  transition: width 0.3s ease;
+  will-change: width;
+}
+.progressbar__remain {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: get-color(primary, main-light-5);
+  z-index: -1;
+  transform: translateY(-100%);
+}

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

@@ -2,16 +2,16 @@
 import React, { type FC } from 'react'
 
 import { type ProgressBarProps } from './ProgressBarProps.types'
-import { ProgressBarStyled } from './ProgressBar.styled'
+// import './ProgressBar.scss'
 
 const ProgressBar: FC<ProgressBarProps> = ({ currentStep, allSteps }) => {
   const currentProgress = (100 * currentStep) / allSteps.length
 
   return (
-    <ProgressBarStyled className={'progress__wrapper'}>
+    <section className={'progress__wrapper'}>
       <div className={'progressbar'} style={{ width: `${currentProgress}%` }} />
       <div className={'progressbar__remain'} />
-    </ProgressBarStyled>
+    </section>
   )
 }
 

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

@@ -15,7 +15,7 @@
       flex-basis: 100%;
       display: flex;
       align-items: center;
-      color: var(--neutral-main);
+      color: get-color(neutral);
       font-size: 16px;
       position: relative;
       cursor: pointer;
@@ -29,21 +29,21 @@
 
     &:not(:checked):hover + label {
       &:before {
-        background-color: var(--primary-main-light-5);
+        background-color: get-color(primary, main-light-5);
       }
     }
 
     &:checked:hover + label {
       &:before {
-        background-color: var(--primary-main);
+        background-color: get-color(primary);
       }
     }
 
     &:checked + label {
-      color: var(--primary-main);
+      color: get-color(primary);
       text-shadow:
         -0.02ex 0 get-color(primary),
-        0.02ex 0 var(--primary-main);
+        0.02ex 0 get-color(primary);
 
       &:before {
         content: '';
@@ -52,8 +52,8 @@
         left: -23px;
         height: 1.25rem;
         width: 1.25rem;
-        background-color: var(--primary-main);
-        border: 1px solid var(--primary-main);
+        background-color: get-color(primary);
+        border: 1px solid get-color(primary);
         border-radius: 50%;
         box-sizing: border-box;
       }
@@ -88,7 +88,7 @@
         width: 1.25rem;
         border-radius: 50%;
         background-color: transparent;
-        border: 1px solid var(--neutral-main);
+        border: 1px solid get-color(neutral);
         box-sizing: border-box;
       }
 
@@ -101,7 +101,7 @@
         width: 0.5rem;
         opacity: 0;
         transform: scale(0);
-        color: var(--others-white);
+        color: get-color(others, white);
         transition: all 0.1s;
         content: '';
         bottom: 0.5rem;
@@ -118,17 +118,17 @@
     margin-bottom: 2rem;
     width: 10rem;
     margin-top: 1rem;
-    border: 1px solid var(--neutral-neutral-3);
-    background: var(--neutral-neutral-6);
-    border-radius: var(--global-border-radius);
+    border: 1px solid get-color(neutral, neutral-3);
+    background: get-color(neutral, neutral-6);
+    border-radius: $global-border-radius;
     transition: all 0.3s ease;
 
     .e-radio-label {
       width: 100%;
       display: flex;
-      border-right: 1px solid var(--neutral-neutral-3);
-      border-top-left-radius: var(--global-border-radius);
-      border-bottom-left-radius: var(--global-border-radius);
+      border-right: 1px solid get-color(neutral, neutral-3);
+      border-top-left-radius: $global-border-radius;
+      border-bottom-left-radius: $global-border-radius;
 
       &:last-child {
         border-right: none;
@@ -146,29 +146,29 @@
       transition: all 0.3s ease;
 
       &:hover {
-        background: var(--neutral-neutral-4);
+        background: get-color(neutral, neutral-4);
       }
     }
 
     &:checked + label {
       font-weight: bold;
-      color: var(--others-white);
+      color: get-color(others, white);
       width: 100%;
       cursor: pointer;
       transition: all 0.3s ease;
-      background-color: var(--primary-main);
+      background-color: get-color(primary);
       text-align: center;
       padding: 10px;
 
       &:hover {
-        background-color: var(--primary-main);
+        background-color: get-color(primary);
       }
     }
 
     &:not(:checked) + label {
       text-align: center;
       width: 100%;
-      color: var(--neutral-neutral-1);
+      color: get-color(neutral, neutral-1);
       font-weight: bold;
       padding: 10px;
     }
@@ -197,8 +197,8 @@
       min-width: 80px;
       min-height: 3.5rem;
       margin-bottom: 0.5rem;
-      border-radius: var(--global-border-radius);
-      border-color: var(--neutral-neutral-4);
+      border-radius: $global-border-radius;
+      border-color: get-color(neutral, neutral-4);
       cursor: pointer;
     }
 
@@ -212,12 +212,12 @@
     }
 
     .radio-item-container.active {
-      border: 2px solid var(--primary-main-dark-1);
-      background-color: var(--neutral-neutral-5);
+      border: 2px solid get-color(primary, main-dark-1);
+      background-color: get-color(neutral, neutral-5);
     }
 
     .radio-item-container:hover {
-      background-color: var(--neutral-neutral-5);
+      background-color: get-color(neutral, neutral-5);
       font-weight: bold;
     }
 
@@ -276,7 +276,7 @@
       input {
         & + label {
           &:before {
-            border-color: var(--error-main);
+            border-color: get-color(error);
           }
         }
       }
@@ -285,11 +285,11 @@
     &.--tabs,
     &.--group-invalid {
       .e-radio__inner {
-        border: 1px solid var(--error-main);
+        border: 1px solid get-color(error);
 
         label {
           label {
-            border-right: 1px solid var(--error-main);
+            border-right: 1px solid get-color(error);
           }
 
           &:last-child {
@@ -304,7 +304,7 @@
 }
 
 .radio-group__label {
-  color: var(--neutral-neutral-1);
+  color: get-color(neutral, neutral-1);
 }
 
 .e-radio.radio--small.--tabs {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RemoveButtonStyled } from './RemoveButton.styled';
+// import './RemoveButton.scss'
 const RemoveButton = ({ label = '', className = '', items, name = '', onChange = () => { }, value, disabled = false, tooltip = undefined }) => {
     const fieldLabel = label;
-    return (_jsxs(RemoveButtonStyled, { className: `e-removeButton ${className}`, children: [items.removeButton.value !== '' && (_jsxs("div", { className: 'e-removeButton__inner', children: [_jsx("input", { type: 'radio', id: `${name}_${items.removeButton.value}`, name: name, onChange: onChange, value: items.removeButton.value, checked: items.removeButton.value === value, disabled: disabled, "data-qa": `${name}_${items.removeButton.value}` }), _jsx("label", { htmlFor: `${name}_${items.removeButton.value}`, children: fieldLabel })] })), tooltip !== undefined && _jsx("p", { className: 'tooltip sans-serif --extra-small', children: tooltip })] }));
+    return (_jsxs("div", { className: `e-removeButton ${className}`, children: [items.removeButton.value !== '' && (_jsxs("div", { className: 'e-removeButton__inner', children: [_jsx("input", { type: 'radio', id: `${name}_${items.removeButton.value}`, name: name, onChange: onChange, value: items.removeButton.value, checked: items.removeButton.value === value, disabled: disabled, "data-qa": `${name}_${items.removeButton.value}` }), _jsx("label", { htmlFor: `${name}_${items.removeButton.value}`, children: fieldLabel })] })), tooltip !== undefined && _jsx("p", { className: 'tooltip sans-serif --extra-small', children: tooltip })] }));
 };
 export default RemoveButton;

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

@@ -0,0 +1,43 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-removeButton {
+  display: inline-block;
+
+  &__inner {
+    display: inline-block;
+    margin-top: 1rem;
+    color: get-color(error);
+
+    border-radius: $global-border-radius;
+    transition: all 0.3s ease;
+
+    label {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      position: relative;
+      border: 1px solid get-color(error);
+      border-radius: 4px;
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+    }
+
+    &:hover {
+      background-color: get-color(error, error-3);
+    }
+  }
+
+  input {
+    position: absolute;
+    left: -9999px;
+
+    &:checked + label {
+      border-radius: $global-border-radius;
+    }
+
+    & + label {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -2,7 +2,7 @@
 import React, { type FC } from 'react'
 
 import { type RemoveButtonProps } from './RemoveButtonProps.types'
-import { RemoveButtonStyled } from './RemoveButton.styled'
+// import './RemoveButton.scss'
 
 const RemoveButton: FC<RemoveButtonProps> = ({
   label = '',
@@ -17,7 +17,7 @@ const RemoveButton: FC<RemoveButtonProps> = ({
   const fieldLabel = label
 
   return (
-    <RemoveButtonStyled className={`e-removeButton ${className}`}>
+    <div className={`e-removeButton ${className}`}>
       {items.removeButton.value !== '' && (
         <div className={'e-removeButton__inner'}>
           <input
@@ -34,7 +34,7 @@ const RemoveButton: FC<RemoveButtonProps> = ({
         </div>
       )}
       {tooltip !== undefined && <p className={'tooltip sans-serif --extra-small'}>{tooltip}</p>}
-    </RemoveButtonStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReviewKeyFactsResultRatafiaStyled } from './ReviewKeyFactsResultRatafia.styled';
+// import './ReviewKeyFactsResultRatafia.scss'
 export const ReviewKeyFactsResultRatafia = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, review }) => {
-    return (_jsx(ReviewKeyFactsResultRatafiaStyled, { className: 'review-key-facts-result', children: review === null ? (_jsxs("div", { className: 'review-key-facts-result__review', children: [_jsx("p", { className: 'sans-serif review-key-facts-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'review-key-facts-result__review__buttons', children: [_jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'review-key-facts-result__review', children: _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__question', children: reviewFeedbackText }) })) }));
+    return (_jsx("div", { className: 'review-key-facts-result', children: review === null ? (_jsxs("div", { className: 'review-key-facts-result__review', children: [_jsx("p", { className: 'sans-serif review-key-facts-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'review-key-facts-result__review__buttons', children: [_jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'review-key-facts-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'review-key-facts-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'review-key-facts-result__review', children: _jsx("p", { className: 'sans-serif --small review-key-facts-result__review__question', children: reviewFeedbackText }) })) }));
 };
 export default ReviewKeyFactsResultRatafia;

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

@@ -0,0 +1,54 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.review-key-facts-result {
+  &__review {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+
+    border-radius: 4px;
+    background: get-color(others, white);
+
+    &__question {
+      color: get-color(neutral, neutral-1);
+      font-size: 0.75rem;
+      @include portrait-tablets {
+        font-size: 0.875rem;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+
+      &__item {
+        display: flex;
+        padding: 0.25rem 0.5rem;
+        justify-content: center;
+        align-items: center;
+        gap: 0.25rem;
+        flex: 1 0 0;
+
+        border: none;
+        border-radius: 4px;
+        background: get-color(neutral, neutral-6);
+
+        cursor: pointer;
+
+        &__icon {
+          width: 14px;
+        }
+        .positive {
+          color: get-color(primary, main);
+        }
+        .negative {
+          color: get-color(error, main);
+        }
+      }
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { type ReviewKeyFactsResultRatafiaProps } from './ReviewKeyFactsResultRatafiaProps.types'
-import { ReviewKeyFactsResultRatafiaStyled } from './ReviewKeyFactsResultRatafia.styled'
+// import './ReviewKeyFactsResultRatafia.scss'
 
 export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaProps> = ({
   reviewQuestion,
@@ -17,7 +17,7 @@ export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaPr
   review
 }) => {
   return (
-    <ReviewKeyFactsResultRatafiaStyled className='review-key-facts-result'>
+    <div className='review-key-facts-result'>
       {review === null ? (
         <div className='review-key-facts-result__review'>
           <p className='sans-serif review-key-facts-result__review__question'>{reviewQuestion}</p>
@@ -49,7 +49,7 @@ export const ReviewKeyFactsResultRatafia: React.FC<ReviewKeyFactsResultRatafiaPr
           <p className='sans-serif --small review-key-facts-result__review__question'>{reviewFeedbackText}</p>
         </div>
       )}
-    </ReviewKeyFactsResultRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RichTextInnerStyled } from './RichTextInner.styled';
-const RichTextInner = ({ children, customClass = '' }) => (_jsx(RichTextInnerStyled, { className: `rich-text ${customClass}`, children: children }));
+// import './RichTextInner.scss'
+const RichTextInner = ({ children, customClass = '' }) => (_jsx("div", { className: `rich-text ${customClass}`, children: children }));
 export default RichTextInner;

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

@@ -0,0 +1,34 @@
+.rich-text {
+  & > p {
+    margin-bottom: 1rem;
+  }
+  & p {
+    & > a {
+      text-decoration: underline;
+    }
+  }
+
+  p + h1,
+  p + h2,
+  p + h3,
+  p + h4,
+  p + h5,
+  p + h6 {
+    margin-top: 2.5rem;
+  }
+
+  ul + p,
+  ol + p,
+  ul + h1,
+  ul + h2,
+  ul + h3,
+  ul + h4,
+  ul + h5,
+  ul + h6 {
+    margin-top: 2rem;
+  }
+
+  .scroll-top-anchor {
+    cursor: pointer;
+  }
+}

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

@@ -1,10 +1,10 @@
 import React, { type FC } from 'react'
 
 import { type RichTextInnerProps } from './RichTextInnerProps.types'
-import { RichTextInnerStyled } from './RichTextInner.styled'
+// import './RichTextInner.scss'
 
 const RichTextInner: FC<RichTextInnerProps> = ({ children, customClass = '' }) => (
-  <RichTextInnerStyled className={`rich-text ${customClass}`}>{children}</RichTextInnerStyled>
+  <div className={`rich-text ${customClass}`}>{children}</div>
 )
 
 export default RichTextInner

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RichTextStrapiStyled } from './RichTextStrapi.styled';
 import { useFormattedText } from './useFormattedText';
+// import './RichTextStrapi.scss'
 export const RichTextStrapi = ({ html = '', className = '', medias = [] }) => {
     const { text } = useFormattedText(html, medias);
     if (html.length === 0)
         return null;
-    return (_jsx(RichTextStrapiStyled, { className: `richt-text-strapi m-richText ${className}`, dangerouslySetInnerHTML: { __html: text } }));
+    return _jsx("div", { className: `richt-text-strapi m-richText ${className}`, dangerouslySetInnerHTML: { __html: text } });
 };

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

@@ -0,0 +1,9 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.richt-text-strapi {
+  & ul li,
+  ol li {
+    margin-bottom: 1rem;
+  }
+}

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

@@ -1,17 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type RichTextStrapiProps } from './RichTextStrapiProps'
-import { RichTextStrapiStyled } from './RichTextStrapi.styled'
 import { useFormattedText } from './useFormattedText'
+// import './RichTextStrapi.scss'
 
 export const RichTextStrapi: FC<RichTextStrapiProps> = ({ html = '', className = '', medias = [] }) => {
   const { text } = useFormattedText(html, medias)
   if (html.length === 0) return null
 
-  return (
-    <RichTextStrapiStyled
-      className={`richt-text-strapi m-richText ${className}`}
-      dangerouslySetInnerHTML={{ __html: text }}
-    ></RichTextStrapiStyled>
-  )
+  return <div className={`richt-text-strapi m-richText ${className}`} dangerouslySetInnerHTML={{ __html: text }}></div>
 }

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Select from 'react-select';
-import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
+// import './SearchSelect.scss'
 export var MenuPlacement;
 (function (MenuPlacement) {
     MenuPlacement["top"] = "top";
@@ -41,7 +41,7 @@ const SearchSelect = (props) => {
         props.onChange(selectObject);
     };
     const TooltipObject = props.tooltip && typeof props.tooltip === 'string' ? (_jsx("p", { className: 'tooltip-form sans-serif --small', children: props.tooltip })) : ('');
-    return (_jsxs(SearchSelectStyled, { children: [props.label && (_jsx("div", { className: 'e-searchselect__inner', children: _jsx("label", { className: 'searchselect__label', children: props.label }) })), _jsxs("div", { className: `${classnames} ${props.width ? 'width' : ''}`, "data-qa": props.dataQA ?? props.name, children: [TooltipObject, _jsxs("span", { className: 'e-searchselect--error sans-serif --small', children: [_jsx("img", { src: error, alt: props.errorMessage, width: '24', height: '24' }), props.errorMessage] }), _jsx(Select, { styles: {
+    return (_jsxs(_Fragment, { children: [props.label && (_jsx("div", { className: 'e-searchselect__inner', children: _jsx("label", { className: 'searchselect__label', children: props.label }) })), _jsxs("div", { className: `${classnames} ${props.width ? 'width' : ''}`, "data-qa": props.dataQA ?? props.name, children: [TooltipObject, _jsxs("span", { className: 'e-searchselect--error sans-serif --small', children: [_jsx("img", { src: error, alt: props.errorMessage, width: '24', height: '24' }), props.errorMessage] }), _jsx(Select, { styles: {
                             control: (baseStyles, state) => {
                                 return {
                                     ...baseStyles,