@npm_leadtech/legal-lib-components 5.7.6 → 5.7.7

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
-// import './AccordionItem.scss'
+import { AccordionItemStyled } from './AccordionItem.styled';
 export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
@@ -14,7 +14,7 @@ export const AccordionItem = ({ accordionRightContent, children, defaultHeightIt
             dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
         }
     }, [state.locked.actionType]);
-    return (_jsxs("div", { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
+    return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();

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

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

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+export const AccordionItemStyled = styled.div `
+  overflow: hidden;
+  border-bottom: 1px solid var(--neutral-neutral-4);
+
+  &:first-child {
+    border-top: 1px solid var(--neutral-neutral-4);
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .accordion__button {
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
+    width: 100%;
+    text-align: left;
+    padding: 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--neutral-neutral-6);
+    border-bottom: none;
+    border-top: none;
+    cursor: pointer;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+
+    &.--success {
+      background: #eff7f5;
+    }
+
+    &.--locked {
+      cursor: not-allowed;
+    }
+
+    &:not(.--locked):hover {
+      background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
+    }
+  }
+
+  .accordion__title {
+    color: var(--primary-main-dark-1);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    &.--locked {
+      color: var(--neutral-neutral-2);
+    }
+  }
+
+  .accordion__content {
+    padding: 0 1.5rem;
+    transition: height 0.7s ease-in-out;
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
+    border-bottom: none;
+  }
+`;

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

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/mediaqueries.scss';
+import styled from 'styled-components'
 
-.accordion__container {
+export const AccordionItemStyled = styled.div`
   overflow: hidden;
   border-bottom: 1px solid var(--neutral-neutral-4);
 
@@ -67,4 +67,4 @@
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
   }
-}
+`

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

@@ -4,8 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context'
 
 import { type AccordionItemProps } from './AccordionItemProps.types'
-
-// import './AccordionItem.scss'
+import { AccordionItemStyled } from './AccordionItem.styled'
 
 export const AccordionItem = ({
   accordionRightContent,
@@ -28,7 +27,7 @@ export const AccordionItem = ({
   }, [state.locked.actionType])
 
   return (
-    <div className='accordion__container'>
+    <AccordionItemStyled className='accordion__container'>
       <button
         className={`accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
@@ -48,6 +47,6 @@ export const AccordionItem = ({
       >
         {children}
       </div>
-    </div>
+    </AccordionItemStyled>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ActionButtonHeaderRatafiaCard } from '../../atoms';
-// import './ActionButtonHeaderRatafiaCardList.scss'
+import { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled';
 const ActionButtonHeaderRatafiaCardList = ({ actionButtons }) => {
     if (actionButtons.length === 0)
         return null;
-    return (_jsx("div", { className: 'action-button-header-ratafia-card-list', children: actionButtons.map((actionButton) => (_jsx(ActionButtonHeaderRatafiaCard, { ...actionButton }, actionButton.id))) }));
+    return (_jsx(ActionButtonHeaderRatafiaCardListStyled, { className: 'action-button-header-ratafia-card-list', children: actionButtons.map((actionButton) => (_jsx(ActionButtonHeaderRatafiaCard, { ...actionButton }, actionButton.id))) }));
 };
 export default ActionButtonHeaderRatafiaCardList;

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const ActionButtonHeaderRatafiaCardListStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-radius: 4px 4px 0 0;
+`;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const ActionButtonHeaderRatafiaCardListStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-radius: 4px 4px 0 0;
+`

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { ActionButtonHeaderRatafiaCard } from '../../atoms'
 import { type ActionButtonHeaderRatafiaCardListProps } from './ActionButtonHeaderRatafiaCardListProps.types'
-// import './ActionButtonHeaderRatafiaCardList.scss'
+import { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled'
 
 const ActionButtonHeaderRatafiaCardList: FC<ActionButtonHeaderRatafiaCardListProps> = ({ actionButtons }) => {
   if (actionButtons.length === 0) return null
 
   return (
-    <div className='action-button-header-ratafia-card-list'>
+    <ActionButtonHeaderRatafiaCardListStyled className='action-button-header-ratafia-card-list'>
       {actionButtons.map((actionButton) => (
         <ActionButtonHeaderRatafiaCard key={actionButton.id} {...actionButton} />
       ))}
-    </div>
+    </ActionButtonHeaderRatafiaCardListStyled>
   )
 }
 export default ActionButtonHeaderRatafiaCardList

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlsoKnownAsStyled } from './AlsoKnownAs.styled';
 import { DocumentTag } from '../../atoms';
 import { SymbolDoc } from '../../../../images/componentsSvg/SymbolDoc';
-// import './AlsoKnownAs.scss'
 const AlsoKnownAs = ({ title = '', documents = [] }) => {
     if (documents.length === 0)
         return null;
-    return (_jsxs("div", { className: 'also-known-as', children: [_jsxs("p", { className: 'title', children: [_jsx(SymbolDoc, {}), _jsx("span", { className: 'text', children: title })] }), documents.map((item) => (_jsx(DocumentTag, { text: item }, item)))] }));
+    return (_jsxs(AlsoKnownAsStyled, { className: 'also-known-as', children: [_jsxs("p", { className: 'title', children: [_jsx(SymbolDoc, {}), _jsx("span", { className: 'text', children: title })] }), documents.map((item) => (_jsx(DocumentTag, { text: item }, item)))] }));
 };
 export default AlsoKnownAs;

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

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const AlsoKnownAsStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: calc(1rem / 2);
+  flex-wrap: wrap;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: calc(1rem / 4);
+    flex-wrap: nowrap;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--secondary-main-dark-1);
+    }
+
+    .text {
+      color: var(--Neutral-600, #6d7275);
+      font-size: 0.875rem;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+      white-space: nowrap;
+    }
+  }
+`;

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

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.also-known-as {
+export const AlsoKnownAsStyled = styled.div`
   display: flex;
   align-items: center;
   gap: calc(1rem / 2);
@@ -15,7 +15,7 @@
     svg {
       width: 18px;
       height: 18px;
-      fill: get-color('secondary', 'main-dark-1');
+      fill: var(--secondary-main-dark-1);
     }
 
     .text {
@@ -26,4 +26,4 @@
       white-space: nowrap;
     }
   }
-}
+`

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

@@ -1,15 +1,15 @@
 import React, { type FC } from 'react'
 
 import { type AlsoKnownAsProps } from './AlsoKnownAsProps.types'
+import { AlsoKnownAsStyled } from './AlsoKnownAs.styled'
 import { DocumentTag } from '../../atoms'
 import { SymbolDoc } from '../../../../images/componentsSvg/SymbolDoc'
-// import './AlsoKnownAs.scss'
 
 const AlsoKnownAs: FC<AlsoKnownAsProps> = ({ title = '', documents = [] }) => {
   if (documents.length === 0) return null
 
   return (
-    <div className='also-known-as'>
+    <AlsoKnownAsStyled className='also-known-as'>
       <p className='title'>
         <SymbolDoc />
         <span className='text'>{title}</span>
@@ -17,7 +17,7 @@ const AlsoKnownAs: FC<AlsoKnownAsProps> = ({ title = '', documents = [] }) => {
       {documents.map((item) => (
         <DocumentTag key={item} text={item} />
       ))}
-    </div>
+    </AlsoKnownAsStyled>
   )
 }
 

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';
-// import './Article.scss'
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
-    return (_jsxs("div", { 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 }), 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.d.ts

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

@@ -0,0 +1,65 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ArticleStyled = styled.div `
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1 1 0;
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-small);
+  max-width: $md;
+  margin: 1rem 0;
+
+  @media ${device.laptop} {
+    margin: 0 0.5rem;
+  }
+
+  .image {
+    object-fit: cover;
+    object-position: 25%;
+    height: 13em;
+    width: 100%;
+
+    @media ${device['landscape-tablets']} {
+      width: 35%;
+      height: auto;
+    }
+  }
+
+  .information {
+    width: 100%;
+    padding: 1rem 1.5rem 0;
+    text-align: left;
+    max-width: 100%;
+
+    @media ${device['landscape-tablets']} {
+      width: 65%;
+      height: 100%;
+    }
+
+    .title {
+      font-weight: bold;
+    }
+
+    .summary {
+      color: #6d7275;
+      margin: 0.5rem 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @media ${device['landscape-tablets']} {
+        margin: 0;
+        padding: 0.5rem 0;
+      }
+    }
+
+    .e-button {
+      margin: 2.5rem 0 1rem -1rem;
+      @media ${device.laptop} {
+        margin-top: 0;
+      }
+    }
+  }
+`;

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

@@ -1,16 +1,16 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.article {
+export const ArticleStyled = styled.div`
   display: flex;
   flex-flow: row wrap;
   flex: 1 1 0;
   border-radius: var(--global-border-radius);
-  box-shadow: $box-shadow-small;
+  box-shadow: var(--box-shadow-small);
   max-width: $md;
   margin: 1rem 0;
 
-  @include laptop {
+  @media ${device.laptop} {
     margin: 0 0.5rem;
   }
 
@@ -20,7 +20,7 @@
     height: 13em;
     width: 100%;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;
     }
@@ -32,7 +32,7 @@
     text-align: left;
     max-width: 100%;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       width: 65%;
       height: 100%;
     }
@@ -50,7 +50,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @include landscape-tablets {
+      @media ${device['landscape-tablets']} {
         margin: 0;
         padding: 0.5rem 0;
       }
@@ -58,26 +58,9 @@
 
     .e-button {
       margin: 2.5rem 0 1rem -1rem;
-      @include laptop {
+      @media ${device.laptop} {
         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;
-      }
-    }
   }
-}
+`

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

@@ -1,36 +1,21 @@
 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'
-// import './Article.scss'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
   return (
-    <div className='article'>
+    <ArticleStyled className='article'>
       <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>
-    </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/BaseBoxList/BaseBoxList.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { BaseBox } from '../../atoms';
-// import './BaseBoxList.scss'
+import { BaseBoxListStyled } from './BaseBoxList.styled';
 const BaseBoxList = ({ list, padded, children, givenClass = '' }) => {
     if (children === undefined && list?.length === 0)
         return null;
     const classes = classNames(`base-box-group ${givenClass}`, {
         'base-box-group--padded': padded
     });
-    return _jsx("div", { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) });
+    return (_jsx(BaseBoxListStyled, { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) }));
 };
 export default BaseBoxList;

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

@@ -0,0 +1 @@
+export declare const BaseBoxListStyled: 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/BaseBoxList/{BaseBoxList.scss → BaseBoxList.styled.js}

@@ -1,7 +1,5 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-
-.base-box-group {
+import styled from 'styled-components';
+export const BaseBoxListStyled = styled.div `
   display: block;
   .base-box {
     &:first-child:not(:last-child) {
@@ -18,9 +16,10 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  &--padded {
+
+  .base-box-group--padded {
     .base-box {
       padding: 2rem;
     }
   }
-}
+`;

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const BaseBoxListStyled = styled.div`
+  display: block;
+  .base-box {
+    &:first-child:not(:last-child) {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &:not(:last-child):not(:first-child) {
+      border-top: none;
+      border-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .base-box-group--padded {
+    .base-box {
+      padding: 2rem;
+    }
+  }
+`

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

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { BaseBox } from '../../atoms'
 import { type BaseBoxListProps } from './BaseBoxListProps.types'
-// import './BaseBoxList.scss'
+import { BaseBoxListStyled } from './BaseBoxList.styled'
 
 const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass = '' }) => {
   if (children === undefined && list?.length === 0) return null
@@ -12,7 +12,11 @@ const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass
     'base-box-group--padded': padded
   })
 
-  return <div className={classes}>{children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}</div>
+  return (
+    <BaseBoxListStyled className={classes}>
+      {children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}
+    </BaseBoxListStyled>
+  )
 }
 
 export default BaseBoxList

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

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

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

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

@@ -0,0 +1,15 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BenefitRatafiaCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BenefitRatafiaCardListStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`