@npm_leadtech/legal-lib-components 5.9.3 → 5.9.4

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
-    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary }) => {
+    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), _jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true })] })] }));
 };
 export default Article;

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

@@ -25,13 +25,6 @@ export const ArticleStyled = styled.div `
     }
   }
 
-  .image-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: 13em;
-    }
-  }
-
   .information {
     width: 100%;
     padding: 1rem 1.5rem 0;
@@ -68,29 +61,5 @@ export const ArticleStyled = styled.div `
         margin-top: 0;
       }
     }
-
-    .button-image-container {
-      align-items: center;
-      margin: 1rem 0 2rem 0;
-      display: flex;
-
-      .thinner-letter {
-        font-family: $font-sans;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.3px;
-        text-align: left;
-        margin: 0;
-        padding: 0 1rem 0 0;
-      }
-    }
-  }
-
-  .information-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: auto;
-    }
   }
 `;

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

@@ -26,13 +26,6 @@ export const ArticleStyled = styled.div`
     }
   }
 
-  .image-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: 13em;
-    }
-  }
-
   .information {
     width: 100%;
     padding: 1rem 1.5rem 0;
@@ -69,29 +62,5 @@ export const ArticleStyled = styled.div`
         margin-top: 0;
       }
     }
-
-    .button-image-container {
-      align-items: center;
-      margin: 1rem 0 2rem 0;
-      display: flex;
-
-      .thinner-letter {
-        font-family: $font-sans;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.3px;
-        text-align: left;
-        margin: 0;
-        padding: 0 1rem 0 0;
-      }
-    }
-  }
-
-  .information-category {
-    @media ${device['landscape-tablets']} {
-      width: 100%;
-      height: auto;
-    }
   }
 `

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

@@ -1,39 +1,19 @@
 import React, { type FC } from 'react'
 
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
 import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
   return (
     <ArticleStyled className='article'>
-      <img
-        src={imageUrl}
-        className={isCategoryProductPage ? 'image image-category' : 'image'}
-        loading='lazy'
-        alt={title}
-      />
-      <div className={isCategoryProductPage ? 'information information-category' : 'information'}>
+      <img src={imageUrl} className='image' loading='lazy' alt={title} />
+      <div className='information'>
         <a href={articleUrl} target='_blank' rel='noreferrer'>
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        {isCategoryProductPage ? (
-          <div className='button-image-container'>
-            <Button
-              givenClass='thinner-letter'
-              color='tertiary'
-              label={'Read more'}
-              dataQa='article-read-more'
-              link={articleUrl}
-              isExternal
-            />
-            <img className='article__arrow-right' src={ArrowRight} alt=''></img>
-          </div>
-        ) : (
-          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
-        )}
+        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
       </div>
     </ArticleStyled>
   )

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
     articleUrl: string;
     summary: string;
     id: string;
-    isCategoryProductPage: boolean;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -4,5 +4,4 @@ export interface ArticleProps {
   articleUrl: string
   summary: string
   id: string
-  isCategoryProductPage: boolean
 }

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

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
 import { FaqItemStyled } from './FaqItem.styled';
-export const FaqItem = ({ slug, title, children }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    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: isOpen, children: [_jsxs("summary", { role: 'button', tabIndex: isOpen ? 0 : -1, onClick: (e) => {
-                            e.preventDefault();
+export const FaqItem = ({ slug, title, children, index }) => {
+    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);
-                        }, className: 'question', children: [_jsx("h3", { itemProp: 'name', className: 'title', children: title }), _jsx(ChevronRight24px, {})] }), _jsx("div", { itemScope: true, itemProp: 'acceptedAnswer', itemType: 'https://www.schema.org/Answer', className: 'answer', children: _jsx("span", { itemProp: 'text', children: children }) })] })] }));
+                        }, className: 'question', children: [_jsx("h3", { tabIndex: index === 0 ? 0 : -1, itemProp: 'name', className: 'title', children: title }), _jsx(ChevronRight24px, {})] }), _jsx("div", { itemScope: true, itemProp: 'acceptedAnswer', itemType: 'https://www.schema.org/Answer', className: 'answer', children: _jsx("span", { itemProp: 'text', children: children }) })] })] }));
 };

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

@@ -4,8 +4,8 @@ import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight2
 import { type FaqItemProps } from './FaqItemProps'
 import { FaqItemStyled } from './FaqItem.styled'
 
-export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false)
+export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children, index }) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(index === 0)
 
   return (
     <FaqItemStyled className={`faqItem ${isOpen ? 'open' : ''}`}>
@@ -15,13 +15,12 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
         itemScope
         itemType='https://www.schema.org/Question'
         className='content'
-        open={isOpen}
+        open={index === 0}
       >
         <summary
           role='button'
-          tabIndex={isOpen ? 0 : -1}
-          onClick={(e) => {
-            e.preventDefault()
+          tabIndex={index === 0 ? 0 : -1}
+          onClick={() => {
             setIsOpen(!isOpen)
           }}
           onKeyUp={() => {
@@ -29,7 +28,7 @@ export const FaqItem: React.FC<FaqItemProps> = ({ slug, title, children }) => {
           }}
           className='question'
         >
-          <h3 itemProp='name' className='title'>
+          <h3 tabIndex={index === 0 ? 0 : -1} itemProp='name' className='title'>
             {title}
           </h3>
           <ChevronRight24px />

package/dist/src/components/organisms/AboutUsContent/AboutUsContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AboutUsContentStyled } from './AboutUsContent.styled';
 import { Button } from '../../atoms';
-// import './AboutUsContent.scss'
 const AboutUsContent = ({ children, image, button }) => {
-    return (_jsxs("div", { className: 'about-us-content', children: [_jsx("div", { className: 'about-us-content__image', children: image }), _jsxs("div", { className: 'about-us-content__body', children: [children, button != null && (_jsx("div", { className: 'about-us-content__body__button', children: _jsx(Button, { ...button }) }))] })] }));
+    return (_jsxs(AboutUsContentStyled, { children: [_jsx("div", { className: 'about-us-content__image', children: image }), _jsxs("div", { className: 'about-us-content__body', children: [children, button != null && (_jsx("div", { className: 'about-us-content__body__button', children: _jsx(Button, { ...button }) }))] })] }));
 };
 export default AboutUsContent;

package/dist/src/components/organisms/AboutUsContent/AboutUsContent.styled.d.ts

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

@@ -0,0 +1,59 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const AboutUsContentStyled = styled.div `
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+
+  @media ${device['landscape-tablets']} {
+    flex-flow: row nowrap;
+  }
+
+  .about-us-content__body {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    font-family: var(--font-sans);
+
+    @media ${device['landscape-tablets']} {
+      flex-basis: 50%;
+      margin-top: 0;
+      margin-bottom: 3rem;
+    }
+
+    .m-richText {
+      a {
+        color: var(--primary-main);
+      }
+    }
+
+    &__button {
+      margin-top: 2rem;
+      font-family: var(--font-sans);
+      .e-button {
+        display: block;
+
+        @media ${device['landscape-tablets']} {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  .about-us-content__image {
+    margin-bottom: 1rem;
+
+    @media ${device['landscape-tablets']} {
+      margin-bottom: 0;
+      margin-right: 1rem;
+      flex-basis: 50%;
+    }
+
+    @media ${device.laptop} {
+      margin-bottom: -3rem;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+`;

package/dist/src/components/organisms/AboutUsContent/{AboutUsContent.scss → AboutUsContent.styled.ts}

@@ -1,21 +1,21 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.about-us-content {
+export const AboutUsContentStyled = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
 
-  @include landscape-tablets {
+  @media ${device['landscape-tablets']} {
     flex-flow: row nowrap;
   }
 
-  &__body {
+  .about-us-content__body {
     margin-top: 1rem;
     margin-bottom: 2rem;
     font-family: var(--font-sans);
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       flex-basis: 50%;
       margin-top: 0;
       margin-bottom: 3rem;
@@ -32,22 +32,24 @@
       font-family: var(--font-sans);
       .e-button {
         display: block;
-        @include landscape-tablets {
+
+        @media ${device['landscape-tablets']} {
           display: inline-block;
         }
       }
     }
   }
-  &__image {
+
+  .about-us-content__image {
     margin-bottom: 1rem;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       margin-bottom: 0;
       margin-right: 1rem;
       flex-basis: 50%;
     }
 
-    @include laptop {
+    @media ${device.laptop} {
       margin-bottom: -3rem;
     }
 
@@ -55,4 +57,4 @@
       width: 100%;
     }
   }
-}
+`

package/dist/src/components/organisms/AboutUsContent/AboutUsContent.tsx

@@ -1,12 +1,12 @@
 import React, { type FC } from 'react'
 
 import { type AboutUsContentProps } from './AboutUsContentProps.types'
+import { AboutUsContentStyled } from './AboutUsContent.styled'
 import { Button } from '../../atoms'
-// import './AboutUsContent.scss'
 
 const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) => {
   return (
-    <div className='about-us-content'>
+    <AboutUsContentStyled>
       <div className={'about-us-content__image'}>{image}</div>
       <div className={'about-us-content__body'}>
         {children}
@@ -16,7 +16,7 @@ const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) =>
           </div>
         )}
       </div>
-    </div>
+    </AboutUsContentStyled>
   )
 }
 

package/dist/src/components/organisms/Accordion/Accordion.js

@@ -3,13 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { AccordionItem } from '../../molecules';
 import { AccordionProvider } from './Accordion.context';
-// import './Accordion.scss'
+import { AccordionStyled } from './Accordion.styled';
 export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }) => {
     const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
     const handleItemClick = (index) => {
         setActiveIndex((prevIndex) => (prevIndex === index ? -1 : index));
     };
-    return (_jsx(AccordionProvider, { elements: data.length, children: _jsx("div", { className: 'accordion', children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
+    return (_jsx(AccordionProvider, { elements: data.length, children: _jsx(AccordionStyled, { children: data.map((item, index) => (_jsx(AccordionItem, { accordionRightContent: item?.accordionRightContent, defaultHeightItem: defaultHeightItem, index: index, isOpen: activeIndex === index, onClick: () => {
                     handleItemClick(index);
                 }, title: item.title, children: item.children }, index))) }) }));
 };

package/dist/src/components/organisms/Accordion/Accordion.styled.d.ts

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const AccordionStyled = styled.div `
+  width: 100%;
+  padding-bottom: 2rem;
+`;

package/dist/src/components/organisms/Accordion/Accordion.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const AccordionStyled = styled.div`
+  width: 100%;
+  padding-bottom: 2rem;
+`

package/dist/src/components/organisms/Accordion/Accordion.tsx

@@ -3,8 +3,7 @@ import React, { useState } from 'react'
 import { AccordionItem } from '../../molecules'
 import { type AccordionProps } from './AccordionProps.types'
 import { AccordionProvider } from './Accordion.context'
-
-// import './Accordion.scss'
+import { AccordionStyled } from './Accordion.styled'
 
 export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): React.JSX.Element => {
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
@@ -15,7 +14,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
 
   return (
     <AccordionProvider elements={data.length}>
-      <div className='accordion'>
+      <AccordionStyled>
         {data.map((item, index) => (
           <AccordionItem
             accordionRightContent={item?.accordionRightContent}
@@ -31,7 +30,7 @@ export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: A
             {item.children}
           </AccordionItem>
         ))}
-      </div>
+      </AccordionStyled>
     </AccordionProvider>
   )
 }

package/dist/src/components/organisms/ArticlesList/ArticlesList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
-// import './ArticlesList.scss'
-const ArticlesList = ({ articles = [], isCategoryProductPage = false }) => {
+import { ArticlesListStyled } from './ArticlesList.styled';
+const ArticlesList = ({ articles = [] }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article, isCategoryProductPage: isCategoryProductPage }, `article_${article?.id}`))) }));
+    return (_jsx(ArticlesListStyled, { children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

package/dist/src/components/organisms/ArticlesList/ArticlesList.styled.d.ts

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

@@ -0,0 +1,11 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ArticlesListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+  }
+`;

package/dist/src/components/organisms/ArticlesList/ArticlesList.styled.ts

@@ -0,0 +1,12 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ArticlesListStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+  }
+`

package/dist/src/components/organisms/ArticlesList/ArticlesList.tsx

@@ -3,17 +3,17 @@ import React, { type FC } from 'react'
 
 import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
-// import './ArticlesList.scss'
+import { ArticlesListStyled } from './ArticlesList.styled'
 
-const ArticlesList: FC<ArticlesListProps> = ({ articles = [], isCategoryProductPage = false }) => {
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
   if (articles?.length === 0) return null
 
   return (
-    <div className='articles_wrapper'>
+    <ArticlesListStyled>
       {articles.map((article: ArticleProps) => (
-        <Article key={`article_${article?.id}`} {...article} isCategoryProductPage={isCategoryProductPage} />
+        <Article key={`article_${article?.id}`} {...article} />
       ))}
-    </div>
+    </ArticlesListStyled>
   )
 }
 

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.d.ts

@@ -1,5 +1,4 @@
 import { type ArticleProps } from '../../molecules';
 export interface ArticlesListProps {
     articles: ArticleProps[];
-    isCategoryProductPage?: boolean;
 }

package/dist/src/components/organisms/ArticlesList/ArticlesListProps.types.ts

@@ -2,5 +2,4 @@ import { type ArticleProps } from '../../molecules'
 
 export interface ArticlesListProps {
   articles: ArticleProps[]
-  isCategoryProductPage?: boolean
 }

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AsSeenInContentStyled } from './AsSeeInContent.styled';
 import { RichTextInner } from '../../atoms';
 import { TrustworthyWebsites } from '../../molecules/TrustworthyWebsites';
-// import './AsSeeInContent.scss'
 const AsSeeInContent = ({ children, trustWorthyImages }) => {
     if (trustWorthyImages.images.length === 0) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(RichTextInner, { customClass: 'as-see-in-content__text', children: children }), _jsx(TrustworthyWebsites, { images: trustWorthyImages.images })] }));
+    return (_jsxs(AsSeenInContentStyled, { children: [_jsx(RichTextInner, { customClass: 'as-see-in-content__text', children: children }), _jsx(TrustworthyWebsites, { images: trustWorthyImages.images })] }));
 };
 export default AsSeeInContent;

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.styled.d.ts

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const AsSeenInContentStyled = styled.div `
+  .as-see-in-content {
+    display: flex;
+
+    &__text {
+      justify-content: center;
+      text-align: center;
+
+      #articles,
+      #legal-documents {
+        color: var(--primary-main-light-1);
+        font-weight: 400;
+      }
+
+      a {
+        color: var(--primary-main-light-1);
+        font-weight: 400 !important;
+      }
+    }
+  }
+`;

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const AsSeenInContentStyled = styled.div`
+  .as-see-in-content {
+    display: flex;
+
+    &__text {
+      justify-content: center;
+      text-align: center;
+
+      #articles,
+      #legal-documents {
+        color: var(--primary-main-light-1);
+        font-weight: 400;
+      }
+
+      a {
+        color: var(--primary-main-light-1);
+        font-weight: 400 !important;
+      }
+    }
+  }
+`

package/dist/src/components/organisms/AsSeeInContent/AsSeeInContent.tsx

@@ -1,9 +1,9 @@
 import React, { type FC } from 'react'
 
 import { type AsSeeInContentProps } from './AsSeeInContentProps.types'
+import { AsSeenInContentStyled } from './AsSeeInContent.styled'
 import { RichTextInner } from '../../atoms'
 import { TrustworthyWebsites } from '../../molecules/TrustworthyWebsites'
-// import './AsSeeInContent.scss'
 
 const AsSeeInContent: FC<AsSeeInContentProps> = ({ children, trustWorthyImages }) => {
   if (trustWorthyImages.images.length === 0) {
@@ -11,10 +11,10 @@ const AsSeeInContent: FC<AsSeeInContentProps> = ({ children, trustWorthyImages }
   }
 
   return (
-    <>
+    <AsSeenInContentStyled>
       <RichTextInner customClass='as-see-in-content__text'>{children}</RichTextInner>
       <TrustworthyWebsites images={trustWorthyImages.images} />
-    </>
+    </AsSeenInContentStyled>
   )
 }
 

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Tag } from '../../atoms';
-// import './CardFunctionality.scss'
+import { CardFunctionalityStyled } from './CardFunctionality.styled';
 export const CardFunctionality = ({ icon, title, text, tags, cta }) => {
-    return (_jsxs("article", { className: 'card-functionality', children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
+    return (_jsxs(CardFunctionalityStyled, { children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
 };

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.styled.d.ts

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