@npm_leadtech/legal-lib-components 5.7.7 → 5.7.8

package/dist/images/svg/arrow-right-24px-outlined.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.70531 0.705315C8.31578 0.31578 7.68422 0.31578 7.29468 0.705316C6.9054 1.0946 6.90511 1.72568 7.29405 2.11531L12.17 7H0.999999C0.447714 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H12.17L7.29405 13.8847C6.90511 14.2743 6.9054 14.9054 7.29468 15.2947C7.68422 15.6842 8.31578 15.6842 8.70532 15.2947L15.2929 8.70711C15.6834 8.31658 15.6834 7.68342 15.2929 7.29289L8.70531 0.705315Z" fill="#078080"/>
+</svg>

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 { AccordionItemStyled } from './AccordionItem.styled';
+// import './AccordionItem.scss'
 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(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
+    return (_jsxs("div", { 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.ts → AccordionItem.scss}

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

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

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

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 { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled';
+// import './ActionButtonHeaderRatafiaCardList.scss'
 const ActionButtonHeaderRatafiaCardList = ({ actionButtons }) => {
     if (actionButtons.length === 0)
         return null;
-    return (_jsx(ActionButtonHeaderRatafiaCardListStyled, { className: 'action-button-header-ratafia-card-list', children: actionButtons.map((actionButton) => (_jsx(ActionButtonHeaderRatafiaCard, { ...actionButton }, actionButton.id))) }));
+    return (_jsx("div", { 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.scss

@@ -0,0 +1,7 @@
+.action-button-header-ratafia-card-list {
+  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 { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled'
+// import './ActionButtonHeaderRatafiaCardList.scss'
 
 const ActionButtonHeaderRatafiaCardList: FC<ActionButtonHeaderRatafiaCardListProps> = ({ actionButtons }) => {
   if (actionButtons.length === 0) return null
 
   return (
-    <ActionButtonHeaderRatafiaCardListStyled className='action-button-header-ratafia-card-list'>
+    <div className='action-button-header-ratafia-card-list'>
       {actionButtons.map((actionButton) => (
         <ActionButtonHeaderRatafiaCard key={actionButton.id} {...actionButton} />
       ))}
-    </ActionButtonHeaderRatafiaCardListStyled>
+    </div>
   )
 }
 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(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)))] }));
+    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)))] }));
 };
 export default AlsoKnownAs;

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

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

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArticleStyled } from './Article.styled';
+import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { Button } from '../../atoms';
-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 })] })] }));
+// 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 }))] })] }));
 };
 export default Article;

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

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

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

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

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

@@ -4,4 +4,5 @@ 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 { BaseBoxListStyled } from './BaseBoxList.styled';
+// import './BaseBoxList.scss'
 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(BaseBoxListStyled, { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) }));
+    return _jsx("div", { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) });
 };
 export default BaseBoxList;

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

@@ -1,6 +1,7 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const BaseBoxListStyled = styled.div`
+.base-box-group {
   display: block;
   .base-box {
     &:first-child:not(:last-child) {
@@ -17,10 +18,9 @@ export const BaseBoxListStyled = styled.div`
       border-radius: 0 0 4px 4px;
     }
   }
-
-  .base-box-group--padded {
+  &--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 { BaseBoxListStyled } from './BaseBoxList.styled'
+// import './BaseBoxList.scss'
 
 const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass = '' }) => {
   if (children === undefined && list?.length === 0) return null
@@ -12,11 +12,7 @@ const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass
     'base-box-group--padded': padded
   })
 
-  return (
-    <BaseBoxListStyled className={classes}>
-      {children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}
-    </BaseBoxListStyled>
-  )
+  return <div className={classes}>{children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}</div>
 }
 
 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 { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
+// import './BenefitRatafiaCardList.scss'
 const BenefitRatafiaCardList = ({ benefits = [] }) => {
     if (benefits.length === 0)
         return null;
-    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
+    return (_jsx("div", { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
 };
 export default BenefitRatafiaCardList;

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

@@ -0,0 +1,16 @@
+@import '../../../globalStyles/mediaqueries.scss';
+
+.benefit-ratafia-card-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  @include laptop {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { BenefitRatafiaCard } from '../../atoms'
 import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
-import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
+// import './BenefitRatafiaCardList.scss'
 
 const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = [] }) => {
   if (benefits.length === 0) return null
 
   return (
-    <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
+    <div className='benefit-ratafia-card-list'>
       {benefits.map((benefit) => (
         <BenefitRatafiaCard key={benefit.id} {...benefit} />
       ))}
-    </BenefitRatafiaCardListStyled>
+    </div>
   )
 }
 export default BenefitRatafiaCardList

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, RichTextInner } from '../../atoms';
-import { BottomFixedBarStyled } from './BottomFixedBar.styled';
+// import './BottomFixedBar.scss'
 const BottomFixedBar = ({ text, button }) => {
     if (text === undefined || button === undefined)
         return null;
-    return (_jsxs(BottomFixedBarStyled, { className: 'bottom-fixed-bar', children: [_jsx(RichTextInner, { customClass: 'bottom-fixed-bar__text sans-serif --extra-small', children: text }), _jsx("div", { className: 'bottom-fixed-bar__button-container', children: _jsx(Button, { noLink: true, color: 'primary3', ...button }) })] }));
+    return (_jsxs("div", { className: 'bottom-fixed-bar', children: [_jsx(RichTextInner, { customClass: 'bottom-fixed-bar__text sans-serif --extra-small', children: text }), _jsx("div", { className: 'bottom-fixed-bar__button-container', children: _jsx(Button, { noLink: true, color: 'primary3', ...button }) })] }));
 };
 export default BottomFixedBar;

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

@@ -0,0 +1,49 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.bottom-fixed-bar {
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: var(--others-white);
+
+  @include portrait-tablets {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  &__text {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    max-width: 48rem;
+
+    @include portrait-tablets {
+      margin-bottom: 1rem;
+      margin-right: 1.5rem;
+    }
+
+    @include laptop {
+      margin-right: 2.5rem;
+    }
+
+    a {
+      text-decoration: underline;
+      color: var(--others-white);
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button-container > .e-button {
+    white-space: nowrap;
+  }
+}

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

@@ -3,18 +3,18 @@ import React, { type FC } from 'react'
 
 import { Button, RichTextInner } from '../../atoms'
 import { type BottomFixedBarProps } from './BottomFixedBarProps.types'
-import { BottomFixedBarStyled } from './BottomFixedBar.styled'
+// import './BottomFixedBar.scss'
 
 const BottomFixedBar: FC<BottomFixedBarProps> = ({ text, button }) => {
   if (text === undefined || button === undefined) return null
 
   return (
-    <BottomFixedBarStyled className='bottom-fixed-bar'>
+    <div className='bottom-fixed-bar'>
       <RichTextInner customClass='bottom-fixed-bar__text sans-serif --extra-small'>{text}</RichTextInner>
       <div className='bottom-fixed-bar__button-container'>
         <Button noLink color='primary3' {...button} />
       </div>
-    </BottomFixedBarStyled>
+    </div>
   )
 }
 

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
-import { BottomOverlayStyled } from './BottomOverlay.styled';
+// import './BottomOverlay.scss'
 const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer }) => {
     const [scrollingDown, setScrollingDown] = useState(false);
     const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : '';
@@ -45,6 +45,6 @@ const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer
                 onClose();
         }
     };
-    return (_jsxs(BottomOverlayStyled, { className: `bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`, ...handlers, children: [_jsx("div", { ref: overlayBackground, className: 'bottom-overlay__background' }), _jsxs("nav", { ref: overlayMessage, className: 'bottom-overlay__nav', children: [_jsx("div", { className: `overlay__delimiter ${scrollingShadow}` }), header, _jsx("div", { className: 'overlay__scrollable-section', onScroll: handleScroll, children: body }), footer !== undefined && _jsx("div", { className: 'overlay__footer', children: footer })] })] }));
+    return (_jsxs("div", { className: `bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`, ...handlers, children: [_jsx("div", { ref: overlayBackground, className: 'bottom-overlay__background' }), _jsxs("nav", { ref: overlayMessage, className: 'bottom-overlay__nav', children: [_jsx("div", { className: `overlay__delimiter ${scrollingShadow}` }), header, _jsx("div", { className: 'overlay__scrollable-section', onScroll: handleScroll, children: body }), footer !== undefined && _jsx("div", { className: 'overlay__footer', children: footer })] })] }));
 };
 export default BottomOverlay;

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

@@ -0,0 +1,93 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.bottom-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  &__background {
+    background-color: var(--primary-main-dark-2);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity ease-out 0.3s;
+  }
+
+  &__nav {
+    background: var(--others-white);
+    border-top-left-radius: var(--global-border-radius);
+    border-top-right-radius: var(--global-border-radius);
+    bottom: 0;
+    position: absolute;
+    transform: translateY(100%);
+    transition: transform 0.5s ease-in-out;
+    width: 100%;
+    z-index: 2;
+
+    @include landscape-tablets {
+      display: block;
+      transform: translateY(0);
+    }
+
+    .overlay__delimiter {
+      padding: 0.5rem 0 1.5rem;
+
+      &:after {
+        content: '';
+        background: var(--neutral-neutral-3);
+        border-radius: var(--global-border-radius);
+        display: block;
+        height: 0.25rem;
+        margin: 0 auto;
+        width: 7.5rem;
+      }
+
+      &.overlay__delimiter__scrolling {
+        box-shadow: $box-shadow-small;
+        position: relative;
+        z-index: 1;
+      }
+
+      @include landscape-tablets {
+        display: none;
+      }
+    }
+
+    .overlay__scrollable-section {
+      position: sticky;
+      max-height: 21rem;
+      min-height: 8.5rem;
+      display: flex;
+      overflow-y: scroll;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      width: 100%;
+    }
+
+    .overlay__footer {
+      border-top: solid 1px var(--neutral-neutral-4);
+      padding: 1.5rem 1.5rem 2rem;
+    }
+  }
+}