@npm_leadtech/legal-lib-components 5.7.7 → 5.7.8

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ActionButtonHeaderRatafiaCardList } from '../ActionButtonHeaderRatafiaCardList'
 import { type HeaderRatafiaProps } from './HeaderRatafiaProps.types'
-import { HeaderRatafiaStyled } from './HeaderRatafia.styled'
+// import './HeaderRatafia.scss'
 
 export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
   icon,
@@ -11,7 +11,7 @@ export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
   isHiddenActionButtons = false
 }) => {
   return (
-    <HeaderRatafiaStyled className='header-ratafia'>
+    <div className='header-ratafia'>
       <div className='header-ratafia__title'>
         <div className='header-ratafia__title__icon'>{icon}</div>
         <h1 className='sans-serif --bold-weight header-ratafia__title__text'>{title}</h1>
@@ -19,7 +19,7 @@ export const HeaderRatafia: React.FC<HeaderRatafiaProps> = ({
       {actionButtons !== undefined && !isHiddenActionButtons && (
         <ActionButtonHeaderRatafiaCardList actionButtons={actionButtons} />
       )}
-    </HeaderRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { KeyFactCardListRatafiaStyled } from './KeyFactCardListRatafia.styled';
 import { KeyFactRatafiaCard } from '../../atoms';
+// import './KeyFactCardListRatafia.scss'
 export const KeyFactCardListRatafia = ({ keyFacts }) => {
     if (keyFacts.length === 0)
         return null;
-    return (_jsx(KeyFactCardListRatafiaStyled, { className: 'key-fact-card-list', children: keyFacts.map((keyFact) => (_jsx(_Fragment, { children: _jsx(KeyFactRatafiaCard, { ...keyFact }, keyFact.id) }))) }));
+    return (_jsx("div", { className: 'key-fact-card-list', children: keyFacts.map((keyFact) => (_jsx(_Fragment, { children: _jsx(KeyFactRatafiaCard, { ...keyFact }, keyFact.id) }))) }));
 };
 export default KeyFactCardListRatafia;

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

@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+@import '../../../globalStyles/variables.scss';
 
-export const KeyFactCardListRatafiaStyled = styled.div`
+.key-fact-card-list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -18,4 +18,4 @@ export const KeyFactCardListRatafiaStyled = styled.div`
 
   height: 490px;
   overflow-y: auto;
-`
+}

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

@@ -1,20 +1,20 @@
 import React from 'react'
 
 import { type KeyFactCardListRatafiaProps } from './KeyFactCardListRatafiaProps.types'
-import { KeyFactCardListRatafiaStyled } from './KeyFactCardListRatafia.styled'
 import { KeyFactRatafiaCard } from '../../atoms'
+// import './KeyFactCardListRatafia.scss'
 
 export const KeyFactCardListRatafia: React.FC<KeyFactCardListRatafiaProps> = ({ keyFacts }) => {
   if (keyFacts.length === 0) return null
 
   return (
-    <KeyFactCardListRatafiaStyled className='key-fact-card-list'>
+    <div className='key-fact-card-list'>
       {keyFacts.map((keyFact) => (
         <>
           <KeyFactRatafiaCard key={keyFact.id} {...keyFact} />
         </>
       ))}
-    </KeyFactCardListRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItems } from '../../atoms';
-import { MenuItemsSectionStyled } from './MenuItemsSection.styled';
+// import './MenuItemsSection.scss'
 const MenuItemsSection = ({ icon, title, list }) => {
     const filteredList = title !== undefined && list !== undefined ? list.filter((item) => item.content) : null;
     if (filteredList === null || filteredList?.length === 0 || filteredList[0].content === undefined)
         return null;
-    return (_jsxs(MenuItemsSectionStyled, { className: 'menu-items-section', children: [_jsxs("div", { className: 'menu-items-section__title-wrapper', children: [icon ?? null, _jsx("div", { className: 'menu-items-section__title-wrapper__title', children: title })] }), list && _jsx(MenuItems, { list: list, spacing: true })] }));
+    return (_jsxs("div", { className: 'menu-items-section', children: [_jsxs("div", { className: 'menu-items-section__title-wrapper', children: [icon ?? null, _jsx("div", { className: 'menu-items-section__title-wrapper__title', children: title })] }), list && _jsx(MenuItems, { list: list, spacing: true })] }));
 };
 export default MenuItemsSection;

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

@@ -0,0 +1,32 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.menu-items-section {
+  display: flex;
+  flex-flow: column nowrap;
+
+  @include portrait-tablets {
+    max-width: 250px;
+  }
+
+  &__title-wrapper {
+    background-color: var(--neutral-neutral-5);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    @include portrait-tablets {
+      justify-content: left;
+    }
+
+    svg {
+      margin-right: 0.5rem;
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -3,20 +3,20 @@ import React, { type FC } from 'react'
 
 import { MenuItems } from '../../atoms'
 import { type MenuItemsSectionProps } from './MenuItemsSectionProps.types'
-import { MenuItemsSectionStyled } from './MenuItemsSection.styled'
+// import './MenuItemsSection.scss'
 
 const MenuItemsSection: FC<MenuItemsSectionProps> = ({ icon, title, list }) => {
   const filteredList = title !== undefined && list !== undefined ? list.filter((item) => item.content) : null
   if (filteredList === null || filteredList?.length === 0 || filteredList[0].content === undefined) return null
 
   return (
-    <MenuItemsSectionStyled className='menu-items-section'>
+    <div className='menu-items-section'>
       <div className='menu-items-section__title-wrapper'>
         {icon ?? null}
         <div className='menu-items-section__title-wrapper__title'>{title}</div>
       </div>
       {list && <MenuItems list={list} spacing />}
-    </MenuItemsSectionStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-import { MidBannerRatafiaContentStyled } from './MidBannerRatafiaContent.styled';
+// import './MidBannerRatafiaContent.scss'
 const MidBannerRatafiaContent = ({ title, paragraph, ctaLabel, ctaLink, ctaDataQa }) => {
-    return (_jsxs(MidBannerRatafiaContentStyled, { className: 'mid-banner-ratafia-content', children: [_jsxs("div", { className: 'mid-banner-ratafia-content__header', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title', children: title }), _jsx("div", { className: 'sans-serif --super-medium mid-banner-ratafia-content__header__description', children: paragraph })] }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, color: 'primary', label: ctaLabel })] }));
+    return (_jsxs("div", { className: 'mid-banner-ratafia-content', children: [_jsxs("div", { className: 'mid-banner-ratafia-content__header', children: [_jsx("h2", { className: 'sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title', children: title }), _jsx("div", { className: 'sans-serif --super-medium mid-banner-ratafia-content__header__description', children: paragraph })] }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: ctaDataQa, link: ctaLink, color: 'primary', label: ctaLabel })] }));
 };
 export default MidBannerRatafiaContent;

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

@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 
 import { Button } from '../../atoms'
 import { type MidBannerRatafiaContentProps } from './MidBannerRatafiaContentProps.types'
-import { MidBannerRatafiaContentStyled } from './MidBannerRatafiaContent.styled'
+// import './MidBannerRatafiaContent.scss'
 
 const MidBannerRatafiaContent: FC<MidBannerRatafiaContentProps> = ({
   title,
@@ -12,7 +12,7 @@ const MidBannerRatafiaContent: FC<MidBannerRatafiaContentProps> = ({
   ctaDataQa
 }) => {
   return (
-    <MidBannerRatafiaContentStyled className='mid-banner-ratafia-content'>
+    <div className='mid-banner-ratafia-content'>
       <div className='mid-banner-ratafia-content__header'>
         <h2 className='sans-serif --super-large --bold-weight mid-banner-ratafia-content__header__title'>{title}</h2>
         <div className='sans-serif --super-medium mid-banner-ratafia-content__header__description'>{paragraph}</div>
@@ -24,7 +24,7 @@ const MidBannerRatafiaContent: FC<MidBannerRatafiaContentProps> = ({
         color='primary'
         label={ctaLabel}
       />
-    </MidBannerRatafiaContentStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled';
+// import './MidBannerRatafiaSample.scss'
 const MidBannerRatafiaSample = ({ image }) => {
-    return (_jsxs(MidBannerRatafiaSampleStyled, { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), _jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-1.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "Summarized" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-2.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Key facts" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-3.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Clauses" })] })] }));
+    return (_jsxs("div", { className: 'mid-banner-ratafia-sample', children: [_jsx("div", { className: 'mid-banner-ratafia-sample__image', children: image }), _jsxs("div", { className: 'mid-banner-ratafia-sample__sumarized-tag', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__sumarized-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-1.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text', children: "Summarized" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-2.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Key facts" })] }), _jsxs("div", { className: 'mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses', children: [_jsx("img", { className: 'mid-banner-ratafia-sample__feature-tag__icon', src: 'https://cdn.stage.strapi.lawdistrict.com/mid-banner-3.svg', alt: '', role: 'img' }), _jsx("p", { className: 'sans-serif --small mid-banner-ratafia-sample__feature-tag__text', children: "Clauses" })] })] }));
 };
 export default MidBannerRatafiaSample;

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

@@ -0,0 +1,69 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.mid-banner-ratafia-sample {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+
+  &__image {
+    img {
+      border-radius: 8px 8px 0 0;
+      box-shadow: $box-shadow-small;
+      width: 727px;
+    }
+  }
+  &__sumarized-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.25rem;
+    gap: 0.25rem;
+
+    position: absolute;
+    left: 85px;
+    top: -13px;
+
+    background: var(--primary-main-light-5);
+    border-radius: var(--global-border-radius);
+    border: 1px solid var(--primary-main-light-3);
+    box-shadow: $box-shadow-small;
+
+    &__icon {
+      width: 16px;
+      height: 16px;
+    }
+    &__text {
+      color: var(--primary-main);
+    }
+  }
+  &__feature-tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+    gap: 0.25rem;
+
+    background: var(--neutral-neutral-6);
+    border-radius: var(--global-border-radius);
+    box-shadow: $box-shadow-small;
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__text {
+      color: var(--neutral-neutral-2);
+    }
+  }
+  &__feature-tag__key-facts {
+    position: absolute;
+    left: -16px;
+    bottom: 143px;
+  }
+  &__feature-tag__clauses {
+    position: absolute;
+    right: -16px;
+    top: 75px;
+  }
+}

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

@@ -1,11 +1,11 @@
 import React, { type FC } from 'react'
 
 import { type MidBannerRatafiaSampleProps } from './MidBannerRatafiaSampleProps.types'
-import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
+// import './MidBannerRatafiaSample.scss'
 
 const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image }) => {
   return (
-    <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
+    <div className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>
       <div className='mid-banner-ratafia-sample__sumarized-tag'>
         <img
@@ -34,7 +34,7 @@ const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image }) => {
         />
         <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Clauses</p>
       </div>
-    </MidBannerRatafiaSampleStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MoreDocsDesktopStyled } from './MoreDocsDesktop.styled';
 import { MoreDocsItem } from '../../atoms';
+// import './MoreDocsDesktop.scss'
 export const MoreDocsDesktop = ({ title, documents }) => {
-    return (_jsx(MoreDocsDesktopStyled, { className: 'more-docs-desktop', children: _jsxs("div", { className: 'container', children: [_jsx("h2", { className: 'section-title', children: title }), _jsxs("div", { className: 'docs-container', children: [_jsx("div", { className: 'docs-column', children: documents.slice(0, 3).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) }), _jsx("div", { className: 'separation-line' }), _jsx("div", { className: 'docs-column', children: documents.slice(3, 6).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) }), _jsx("div", { className: 'separation-line last-line' }), _jsx("div", { className: 'docs-column', children: documents.slice(6, 9).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) })] })] }) }));
+    return (_jsx("div", { className: 'more-docs-desktop', children: _jsxs("div", { className: 'container', children: [_jsx("h2", { className: 'section-title', children: title }), _jsxs("div", { className: 'docs-container', children: [_jsx("div", { className: 'docs-column', children: documents.slice(0, 3).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) }), _jsx("div", { className: 'separation-line' }), _jsx("div", { className: 'docs-column', children: documents.slice(3, 6).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) }), _jsx("div", { className: 'separation-line last-line' }), _jsx("div", { className: 'docs-column', children: documents.slice(6, 9).map((document) => (_jsx(MoreDocsItem, { ...document }, document.id))) })] })] }) }));
 };

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

@@ -1,7 +1,6 @@
-import { device, size } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
+@import '../../../globalStyles/mediaqueries.scss';
 
-export const MoreDocsDesktopStyled = styled.div`
+.more-docs-desktop {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -14,10 +13,10 @@ export const MoreDocsDesktopStyled = styled.div`
     min-height: 20rem;
     align-items: center;
 
-    @media ${device['landscape-tablets']} {
+    @include landscape-tablets {
       padding: 1rem 1rem 2rem 2rem;
     }
-    @media ${device.desktop} {
+    @include desktop {
       padding: 1rem 6rem 2rem 6rem;
     }
 
@@ -31,7 +30,7 @@ export const MoreDocsDesktopStyled = styled.div`
       padding: 0 0 1.5rem 0;
       width: 100%;
 
-      @media only screen and (max-width: ${size.md}) {
+      @media only screen and (max-width: #{$md}) {
         display: flex;
         justify-content: center;
       }
@@ -53,7 +52,7 @@ export const MoreDocsDesktopStyled = styled.div`
         }
         &:last-child {
           margin-right: 0;
-          @media only screen and (max-width: ${size.md}) {
+          @media only screen and (max-width: #{$md}) {
             display: none;
           }
         }
@@ -66,10 +65,10 @@ export const MoreDocsDesktopStyled = styled.div`
       }
 
       .last-line {
-        @media only screen and (max-width: ${size.md}) {
+        @media only screen and (max-width: #{$md}) {
           display: none;
         }
       }
     }
   }
-`
+}

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

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { type MoreDocsDesktopProps } from './MoreDocsDesktopProps'
-import { MoreDocsDesktopStyled } from './MoreDocsDesktop.styled'
 import { MoreDocsItem } from '../../atoms'
+// import './MoreDocsDesktop.scss'
 
 export const MoreDocsDesktop: React.FC<MoreDocsDesktopProps> = ({ title, documents }) => {
   return (
-    <MoreDocsDesktopStyled className={'more-docs-desktop'}>
+    <div className={'more-docs-desktop'}>
       <div className='container'>
         <h2 className='section-title'>{title}</h2>
         <div className='docs-container'>
@@ -29,6 +29,6 @@ export const MoreDocsDesktop: React.FC<MoreDocsDesktopProps> = ({ title, documen
           </div>
         </div>
       </div>
-    </MoreDocsDesktopStyled>
+    </div>
   )
 }

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

@@ -1,11 +1,11 @@
-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 React from 'react';
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
 import { MoreDocsItem } from '../../atoms';
-import { MoreDocsMobileStyled } from './MoreDocsMobile.styled';
+// import './MoreDocsMobile.scss'
 export const MoreDocsMobile = ({ title, documents }) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    return (_jsxs(MoreDocsMobileStyled, { children: [_jsx("div", { className: 'more-docs-mobile', onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'more-docs-mobile', onClick: () => {
                     setIsOpen(!isOpen);
                 }, tabIndex: 0, role: 'button', onKeyUp: (event) => {
                     if (event.key === 'Enter' || event.key === ' ') {

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

@@ -0,0 +1,71 @@
+@import '../../../globalStyles/variables.scss';
+
+.more-docs-mobile {
+  margin: 0px 24px 40px 24px;
+  padding: 5px 0;
+  border-radius: 4px;
+  border: solid 2px #dfe5e8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  .box-closed {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .icon-see-more {
+      transform: rotate(-90deg);
+
+      &:before,
+      &:after {
+        background-color: get-color(others, black);
+      }
+
+      &.open {
+        transform: rotate(90deg);
+      }
+
+      svg {
+        width: 40px;
+        height: 40px;
+      }
+    }
+
+    .box-title {
+      align-self: center;
+      margin-right: 4rem;
+    }
+  }
+}
+
+.more-docs-list {
+  margin: -40px 24px 40px 24px;
+  padding: 16px 8px 16px 8px;
+  border-radius: 4px;
+  border: solid 2px #dfe5e8;
+  display: flex;
+  flex-direction: column;
+
+  .docs-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .separation-line {
+      width: calc(100% - 20px);
+      height: 1px;
+      margin: 16px 10px;
+      background-color: var(--neutral-neutral-3);
+    }
+
+    &:last-child {
+      margin-bottom: 1rem;
+      .separation-line {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -3,13 +3,13 @@ import React from 'react'
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { MoreDocsItem } from '../../atoms'
 import { type MoreDocsMobileProps } from './MoreDocsMobileProps'
-import { MoreDocsMobileStyled } from './MoreDocsMobile.styled'
+// import './MoreDocsMobile.scss'
 
 export const MoreDocsMobile: React.FC<MoreDocsMobileProps> = ({ title, documents }) => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   return (
-    <MoreDocsMobileStyled>
+    <>
       <div
         className='more-docs-mobile'
         onClick={() => {
@@ -42,6 +42,6 @@ export const MoreDocsMobile: React.FC<MoreDocsMobileProps> = ({ title, documents
           })}
         </div>
       )}
-    </MoreDocsMobileStyled>
+    </>
   )
 }

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

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useEffect } from 'react';
 import { MenuItems } from '../../atoms';
-import { NavBarDropDownStyled } from './NavBarDropDown.styled';
 import { useIntersectionObserver } from '../../../hooks';
+// import './NavBarDropDown.scss'
 let scrollPosition = 0;
 let touchStartPosY;
 let isDisabledScroll = false;
@@ -65,5 +65,5 @@ export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveC
     useEffect(() => {
         setEnableScrollbarOnClose(() => enableScrollbarOnClose);
     }, []);
-    return (_jsx(_Fragment, { children: isOpen ? (_jsxs(NavBarDropDownStyled, { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItems, { list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
+    return (_jsx(_Fragment, { children: isOpen ? (_jsxs("div", { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItems, { list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
 };

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

@@ -0,0 +1,33 @@
+@import '../../../globalStyles/variables.scss';
+
+.navbar-drop-down__container {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  &__menu_items {
+    background: var(--others-white);
+    padding: 1.5rem;
+    box-shadow: var(--box-shadow-container);
+    ul {
+      li {
+        margin-bottom: 1rem;
+        padding: 0.5rem 1rem;
+      }
+
+      li:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__shadow {
+    position: absolute;
+    background: var(--neutral-neutral-3);
+    opacity: 0.4;
+    width: 100%;
+    height: 100vh;
+  }
+}

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

@@ -4,8 +4,8 @@
 import React, { type FC, useEffect } from 'react'
 import { MenuItems } from '../../atoms'
 import { type NavBarDropDownProps } from './NavBarDropDownProps.types'
-import { NavBarDropDownStyled } from './NavBarDropDown.styled'
 import { useIntersectionObserver } from '../../../hooks'
+// import './NavBarDropDown.scss'
 
 let scrollPosition = 0
 let touchStartPosY: Touch
@@ -86,12 +86,12 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   return (
     <>
       {isOpen ? (
-        <NavBarDropDownStyled className='navbar-drop-down__container'>
+        <div className='navbar-drop-down__container'>
           <div className='navbar-drop-down__container__menu_items'>
             <MenuItems list={list} hasBullets={hasBullets} initialActiveContent={initialActiveContent} />
           </div>
           <div ref={ref} className='navbar-drop-down__container__shadow' onClick={closeMenu}></div>
-        </NavBarDropDownStyled>
+        </div>
       ) : null}
     </>
   )

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import PageStepControl from './PageStepControl';
 import PageSteps from './PageSteps';
-import { PaginationStyled } from './Pagination.styled';
+// import './Pagination.scss'
 const Pagination = ({ activePage, totalPages, onChange, nextControl = 'next', prevControl = 'prev' }) => {
     const [active, setActive] = useState(activePage);
     const handleControl = useCallback((direction) => {
@@ -20,6 +20,6 @@ const Pagination = ({ activePage, totalPages, onChange, nextControl = 'next', pr
     }, []);
     if (totalPages === undefined)
         return null;
-    return (_jsxs(PaginationStyled, { className: 'pagination', children: [_jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: prevControl }), _jsx(PageSteps, { activePage: active, onClick: handleCurrentPage, totalPages: totalPages }), _jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: nextControl })] }));
+    return (_jsxs("div", { className: 'pagination', children: [_jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: prevControl }), _jsx(PageSteps, { activePage: active, onClick: handleCurrentPage, totalPages: totalPages }), _jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: nextControl })] }));
 };
 export default Pagination;