@npm_leadtech/legal-lib-components 5.2.8 → 5.2.10

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

@@ -0,0 +1,38 @@
+@import '../../../globalStyles/variables.scss';
+
+.key-fact-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: get-color(neutral, neutral-6);
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+
+    margin-bottom: 1rem;
+    gap: 1rem;
+
+    &__title {
+      color: get-color(neutral, neutral-1);
+      background: get-color(neutral, neutral-6);
+      position: sticky;
+      top: 0;
+
+      margin-top: 1rem;
+    }
+
+    &__content {
+      color: get-color(neutral, neutral-1);
+      overflow-y: auto;
+    }
+  }
+  &__divider {
+    height: 1px;
+    align-self: stretch;
+    background: get-color(neutral, neutral-4);
+  }
+}

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

@@ -1,17 +1,17 @@
 import React from 'react'
 
 import { type KeyFactRatafiaCardProps } from './KeyFactRatafiaCardProps.types'
-import { KeyFactRatafiaCardStyled } from './KeyFactRatafiaCard.styled'
+// import './KeyFactRatafiaCard.scss'
 
 export const KeyFactRatafiaCard: React.FC<KeyFactRatafiaCardProps> = ({ title, content }) => {
   return (
-    <KeyFactRatafiaCardStyled className='key-fact-item'>
+    <div className='key-fact-item'>
       <div className='key-fact-item__wrapper'>
         <p className='sans-serif --medium --bold-weight key-fact-item__wrapper__title'>{title}</p>
         <p className='sans-serif --medium key-fact-item__wrapper__content'>{content}</p>
       </div>
       <span className='key-fact-item__divider'></span>
-    </KeyFactRatafiaCardStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogoTextStyled } from './LogoText.styled';
+// import './LogoText.scss'
 const LogoText = ({ logo, children, description }) => {
-    return (_jsxs(LogoTextStyled, { "data-testid": 'logo-text', className: 'logo-text', children: [_jsx("img", { "data-testid": 'img-logo-text', alt: '', src: logo, className: 'logo-text__img' }), description !== undefined ? (_jsx("p", { className: 'logo-text__text', children: _jsx("span", { children: description }) })) : (children)] }));
+    return (_jsxs("div", { "data-testid": 'logo-text', className: 'logo-text', children: [_jsx("img", { "data-testid": 'img-logo-text', alt: '', src: logo }), description !== undefined ? (_jsx("p", { children: _jsx("span", { children: description }) })) : (children)] }));
 };
 export default LogoText;

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

@@ -0,0 +1,34 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.logo-text {
+  display: flex;
+  align-items: flex-start;
+
+  img {
+    align-items: center;
+    margin-right: 1.5rem;
+    margin-bottom: 0;
+  }
+
+  p {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 0;
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      width: 17rem;
+      @include mobile {
+        width: 17rem;
+      }
+
+      @include portrait-tablets {
+        width: 10rem;
+      }
+
+      @include landscape-tablets {
+        width: 17rem;
+      }
+    }
+  }
+}

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

@@ -1,20 +1,20 @@
 import React, { type FC } from 'react'
 
 import { type LogoTextProps } from './LogoTextProps.types'
-import { LogoTextStyled } from './LogoText.styled'
+// import './LogoText.scss'
 
 const LogoText: FC<LogoTextProps> = ({ logo, children, description }) => {
   return (
-    <LogoTextStyled data-testid='logo-text' className='logo-text'>
-      <img data-testid='img-logo-text' alt='' src={logo} className='logo-text__img' />
+    <div data-testid='logo-text' className='logo-text'>
+      <img data-testid='img-logo-text' alt='' src={logo} />
       {description !== undefined ? (
-        <p className='logo-text__text'>
+        <p>
           <span>{description}</span>
         </p>
       ) : (
         children
       )}
-    </LogoTextStyled>
+    </div>
   )
 }
 

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

@@ -7,7 +7,6 @@ import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-run
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { useState } from 'react';
 import classNames from 'classnames';
-import { MenuItemsStyled } from './MenuItems.styled';
 import { stringSlugify } from '../../../utils/stringSlugify';
 // import './MenuItems.scss'
 const MenuItems = ({ spacing, list, hasBullets = false, initialActiveContent = '', ...rest }) => {
@@ -41,6 +40,6 @@ const MenuItems = ({ spacing, list, hasBullets = false, initialActiveContent = '
                 initialActiveContent && handleActiveListElement(content);
             }, ...props, children: href ? (_jsxs("a", { href: href, "data-qa": dataQA ?? slugifiedContent, children: [image, content] })) : (_jsxs(_Fragment, { children: [image, content] })) }, listKey));
     };
-    return (_jsx(MenuItemsStyled, { className: classes, ...rest, children: filteredList.map((item, index) => renderItem(item, index)) }));
+    return (_jsx("ul", { className: classes, ...rest, children: filteredList.map((item, index) => renderItem(item, index)) }));
 };
 export default MenuItems;

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

@@ -0,0 +1,70 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.menu-items {
+  &__spacing {
+    .menu-items__item:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  &__bullets {
+    list-style-position: inside;
+    list-style-type: disc;
+  }
+
+  &__item {
+    transition: background-color 0.3s ease;
+    border-radius: $global-border-radius;
+    padding: 0.25rem 0.5rem;
+
+    svg {
+      vertical-align: bottom;
+      width: 1.5rem;
+      margin-right: 0.5rem;
+
+      @include portrait-tablets {
+        width: 1rem;
+      }
+
+      > g > g {
+        fill: get-color(neutral, neutral-1);
+      }
+
+      #color-bin {
+        fill: get-color(neutral, neutral-1);
+      }
+    }
+
+    &.active {
+      color: get-color(primary, main-light-1);
+      font-weight: 700;
+      background-color: get-color(primary, main-light-5);
+    }
+
+    &.inactive {
+      color: get-color(neutral, neutral-2);
+      font-weight: 400;
+    }
+
+    &.disabled {
+      color: get-color(neutral, neutral-3);
+      svg > g > g {
+        fill: get-color(neutral, neutral-3);
+      }
+    }
+
+    &:not(.disabled):hover {
+      background-color: get-color(primary, main-light-5);
+      cursor: pointer;
+      svg > g > g {
+        transition: all 0.3s ease;
+        fill: get-color(primary);
+      }
+    }
+
+    a {
+      display: flex;
+    }
+  }
+}

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

@@ -8,7 +8,6 @@ import React, { type FC, useState } from 'react'
 import classNames from 'classnames'
 
 import { type MenuItemProps, type MenuListItem } from './MenuItemProps.types'
-import { MenuItemsStyled } from './MenuItems.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 // import './MenuItems.scss'
 
@@ -67,9 +66,9 @@ const MenuItems: FC<MenuItemProps> = ({ spacing, list, hasBullets = false, initi
   }
 
   return (
-    <MenuItemsStyled className={classes} {...rest}>
+    <ul className={classes} {...rest}>
       {filteredList.map((item, index) => renderItem(item, index))}
-    </MenuItemsStyled>
+    </ul>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MessageStyled } from './Message.styled';
+// import './Message.scss'
 const Message = ({ message, type }) => {
     if (message.length === 0)
         return null;
-    return (_jsx(MessageStyled, { "data-testid": 'message', className: type !== undefined ? `e-message-${type}` : '', children: _jsx("p", { children: message }) }));
+    return (_jsx("div", { "data-testid": 'message', className: type !== undefined ? `e-message-${type}` : '', children: _jsx("p", { children: message }) }));
 };
 export default Message;

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

@@ -0,0 +1,31 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-message {
+  &-error {
+    box-shadow: 0 0 0 1px #d63837;
+    background-color: #ffecee;
+    padding: 10px;
+    color: #d63837;
+    border-radius: 5px;
+    font-family: $font-sans;
+  }
+
+  &-success {
+    box-shadow: 0 0 0 1px #5aa900;
+    background-color: #e6ffe1;
+    padding: 10px;
+    color: #5aa900;
+    border-radius: 5px;
+    font-family: $font-sans;
+  }
+
+  &-neutral {
+    box-shadow: 0 0 0 1px #beebe9;
+    background-color: #e1f2fb;
+    padding: 10px;
+    color: #2a8aeb;
+    border-radius: 5px;
+    font-family: $font-sans;
+  }
+}

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

@@ -1,15 +1,15 @@
 import React, { type FC } from 'react'
 
 import { type MessageProps } from './MessageProps.types'
-import { MessageStyled } from './Message.styled'
+// import './Message.scss'
 
 const Message: FC<MessageProps> = ({ message, type }) => {
   if (message.length === 0) return null
 
   return (
-    <MessageStyled data-testid='message' className={type !== undefined ? `e-message-${type}` : ''}>
+    <div data-testid='message' className={type !== undefined ? `e-message-${type}` : ''}>
       <p>{message}</p>
-    </MessageStyled>
+    </div>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageInformationStyled } from './MessageInformation.styled';
+// import './MessageInformation.scss'
 const MessageInformation = ({ noImg, text, time, centered }) => {
-    return (_jsxs(MessageInformationStyled, { className: `message-information ${centered && 'text-center'}`, children: [_jsx("div", { className: `message-information__icon ${noImg ? 'hide' : ''}`, children: _jsx("svg", { viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M20.5601 9.21496L22.4211 11.3353C22.7523 11.7127 22.7523 12.2772 22.4211 12.6546L20.5601 14.775L20.8194 17.582C20.8656 18.0816 20.5344 18.538 20.0452 18.6491L17.2901 19.275L15.8483 21.7009C15.5918 22.1324 15.0553 22.3069 14.5941 22.1088L12.0001 20.995L9.40727 22.116C8.94569 22.3155 8.40771 22.1413 8.15079 21.709L6.71008 19.285L3.95478 18.6591C3.46563 18.548 3.13448 18.0917 3.1805 17.5922L3.44008 14.775L1.57802 12.6534C1.24723 12.2765 1.24673 11.7129 1.57685 11.3355L3.44008 9.20496L3.18095 6.40025C3.1347 5.89967 3.46726 5.44257 3.95778 5.33251L6.71008 4.71496L8.15191 2.28903C8.40835 1.85756 8.94491 1.68303 9.40611 1.88108L12.0001 2.99496L14.5941 1.88108C15.0553 1.68303 15.5918 1.85756 15.8483 2.28903L17.2901 4.71496L20.0452 5.34077C20.5344 5.4519 20.8656 5.90835 20.8194 6.40793L20.5601 9.21496ZM18.7501 16.895L18.4901 14.105L20.3401 11.995L18.4901 9.88496L18.7501 7.09496L16.0101 6.47496L14.5801 4.06496L12.0001 5.17496L9.42008 4.07496L7.99008 6.48496L5.25008 7.09496L5.51008 9.87496L3.66008 11.995L5.51008 14.095L5.25008 16.895L7.99008 17.515L9.42008 19.925L12.0001 18.815L14.5801 19.925L16.0101 17.515L18.7501 16.895ZM11.0001 15.995C11.0001 15.4427 11.4478 14.995 12.0001 14.995C12.5524 14.995 13.0001 15.4427 13.0001 15.995C13.0001 16.5472 12.5524 16.995 12.0001 16.995C11.4478 16.995 11.0001 16.5472 11.0001 15.995ZM12.0001 6.99496C11.4478 6.99496 11.0001 7.44267 11.0001 7.99496V12.995C11.0001 13.5472 11.4478 13.995 12.0001 13.995C12.5524 13.995 13.0001 13.5472 13.0001 12.995V7.99496C13.0001 7.44267 12.5524 6.99496 12.0001 6.99496Z' }) }) }), _jsxs("p", { className: `message-information__text`, children: [time != null && _jsxs("span", { className: `message-information__text__time ${noImg && 'regular'}`, children: [time, "' "] }), text] })] }));
+    return (_jsxs("div", { className: `message-information ${centered && 'text-center'}`, children: [_jsx("div", { className: `message-information__icon ${noImg && 'hide'}`, children: _jsx("svg", { viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M20.5601 9.21496L22.4211 11.3353C22.7523 11.7127 22.7523 12.2772 22.4211 12.6546L20.5601 14.775L20.8194 17.582C20.8656 18.0816 20.5344 18.538 20.0452 18.6491L17.2901 19.275L15.8483 21.7009C15.5918 22.1324 15.0553 22.3069 14.5941 22.1088L12.0001 20.995L9.40727 22.116C8.94569 22.3155 8.40771 22.1413 8.15079 21.709L6.71008 19.285L3.95478 18.6591C3.46563 18.548 3.13448 18.0917 3.1805 17.5922L3.44008 14.775L1.57802 12.6534C1.24723 12.2765 1.24673 11.7129 1.57685 11.3355L3.44008 9.20496L3.18095 6.40025C3.1347 5.89967 3.46726 5.44257 3.95778 5.33251L6.71008 4.71496L8.15191 2.28903C8.40835 1.85756 8.94491 1.68303 9.40611 1.88108L12.0001 2.99496L14.5941 1.88108C15.0553 1.68303 15.5918 1.85756 15.8483 2.28903L17.2901 4.71496L20.0452 5.34077C20.5344 5.4519 20.8656 5.90835 20.8194 6.40793L20.5601 9.21496ZM18.7501 16.895L18.4901 14.105L20.3401 11.995L18.4901 9.88496L18.7501 7.09496L16.0101 6.47496L14.5801 4.06496L12.0001 5.17496L9.42008 4.07496L7.99008 6.48496L5.25008 7.09496L5.51008 9.87496L3.66008 11.995L5.51008 14.095L5.25008 16.895L7.99008 17.515L9.42008 19.925L12.0001 18.815L14.5801 19.925L16.0101 17.515L18.7501 16.895ZM11.0001 15.995C11.0001 15.4427 11.4478 14.995 12.0001 14.995C12.5524 14.995 13.0001 15.4427 13.0001 15.995C13.0001 16.5472 12.5524 16.995 12.0001 16.995C11.4478 16.995 11.0001 16.5472 11.0001 15.995ZM12.0001 6.99496C11.4478 6.99496 11.0001 7.44267 11.0001 7.99496V12.995C11.0001 13.5472 11.4478 13.995 12.0001 13.995C12.5524 13.995 13.0001 13.5472 13.0001 12.995V7.99496C13.0001 7.44267 12.5524 6.99496 12.0001 6.99496Z' }) }) }), _jsxs("p", { className: `message-information__text`, children: [time != null && _jsxs("span", { className: `message-information__text__time ${noImg && 'regular'}`, children: [time, "' "] }), text] })] }));
 };
 export default MessageInformation;

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

@@ -0,0 +1,51 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.message-information {
+  display: flex;
+  justify-content: center;
+  border-radius: 4px;
+  background: get-color(secondary, main-light-4);
+  padding: 8px;
+
+  @include laptop {
+    justify-content: flex-start;
+  }
+
+  &.text-center {
+    justify-content: center;
+  }
+
+  &__icon {
+    width: 24px;
+    fill: get-color(secondary, main-dark-1);
+    margin-right: 8px;
+
+    &.hide {
+      display: none;
+    }
+
+    svg {
+      display: block;
+    }
+  }
+
+  &__text {
+    font-size: 0.875rem;
+    letter-spacing: -0.3px;
+    padding-top: 1px;
+    text-align: left;
+
+    @include landscape-tablets {
+      text-align: center;
+    }
+
+    &__time {
+      font-weight: 600;
+
+      &.regular {
+        font-weight: 400;
+      }
+    }
+  }
+}

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

@@ -2,12 +2,13 @@
 import React, { type FC } from 'react'
 
 import { type MessageInformationProps } from './MessageInformationProps.types'
-import { MessageInformationStyled } from './MessageInformation.styled'
+
+// import './MessageInformation.scss'
 
 const MessageInformation: FC<MessageInformationProps> = ({ noImg, text, time, centered }) => {
   return (
-    <MessageInformationStyled className={`message-information ${centered && 'text-center'}`}>
-      <div className={`message-information__icon ${noImg ? 'hide' : ''}`}>
+    <div className={`message-information ${centered && 'text-center'}`}>
+      <div className={`message-information__icon ${noImg && 'hide'}`}>
         <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
           <path d='M20.5601 9.21496L22.4211 11.3353C22.7523 11.7127 22.7523 12.2772 22.4211 12.6546L20.5601 14.775L20.8194 17.582C20.8656 18.0816 20.5344 18.538 20.0452 18.6491L17.2901 19.275L15.8483 21.7009C15.5918 22.1324 15.0553 22.3069 14.5941 22.1088L12.0001 20.995L9.40727 22.116C8.94569 22.3155 8.40771 22.1413 8.15079 21.709L6.71008 19.285L3.95478 18.6591C3.46563 18.548 3.13448 18.0917 3.1805 17.5922L3.44008 14.775L1.57802 12.6534C1.24723 12.2765 1.24673 11.7129 1.57685 11.3355L3.44008 9.20496L3.18095 6.40025C3.1347 5.89967 3.46726 5.44257 3.95778 5.33251L6.71008 4.71496L8.15191 2.28903C8.40835 1.85756 8.94491 1.68303 9.40611 1.88108L12.0001 2.99496L14.5941 1.88108C15.0553 1.68303 15.5918 1.85756 15.8483 2.28903L17.2901 4.71496L20.0452 5.34077C20.5344 5.4519 20.8656 5.90835 20.8194 6.40793L20.5601 9.21496ZM18.7501 16.895L18.4901 14.105L20.3401 11.995L18.4901 9.88496L18.7501 7.09496L16.0101 6.47496L14.5801 4.06496L12.0001 5.17496L9.42008 4.07496L7.99008 6.48496L5.25008 7.09496L5.51008 9.87496L3.66008 11.995L5.51008 14.095L5.25008 16.895L7.99008 17.515L9.42008 19.925L12.0001 18.815L14.5801 19.925L16.0101 17.515L18.7501 16.895ZM11.0001 15.995C11.0001 15.4427 11.4478 14.995 12.0001 14.995C12.5524 14.995 13.0001 15.4427 13.0001 15.995C13.0001 16.5472 12.5524 16.995 12.0001 16.995C11.4478 16.995 11.0001 16.5472 11.0001 15.995ZM12.0001 6.99496C11.4478 6.99496 11.0001 7.44267 11.0001 7.99496V12.995C11.0001 13.5472 11.4478 13.995 12.0001 13.995C12.5524 13.995 13.0001 13.5472 13.0001 12.995V7.99496C13.0001 7.44267 12.5524 6.99496 12.0001 6.99496Z' />
         </svg>
@@ -16,7 +17,7 @@ const MessageInformation: FC<MessageInformationProps> = ({ noImg, text, time, ce
         {time != null && <span className={`message-information__text__time ${noImg && 'regular'}`}>{time}&apos; </span>}
         {text}
       </p>
-    </MessageInformationStyled>
+    </div>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MoreDocsItemStyled } from './MoreDocsItem.styled';
 import { getCategoryIcons } from '../../../utils/getCategoryIcons';
+// import './MoreDocsItem.scss'
 export const MoreDocsItem = ({ title, description, slug, icon = null }) => {
-    return (_jsxs(MoreDocsItemStyled, { className: 'more-docs-item', onClick: () => {
+    return (_jsxs("div", { className: 'more-docs-item', onClick: () => {
             window.location.href = slug;
         }, "data-qa": title.replace(/\s/g, '_'), role: 'button', onKeyUp: (event) => {
             if (event.key === 'Enter' || event.key === ' ') {

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

@@ -0,0 +1,44 @@
+@import '../../../globalStyles/variables.scss';
+
+.more-docs-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 10px;
+  border-radius: $global-border-radius;
+  text-decoration: none;
+
+  &:hover {
+    background-color: get-color(primary, main-light-5);
+  }
+
+  .category-icon {
+    margin: 0 1rem 0 1.3rem;
+    svg {
+      fill: get-color(primary, main);
+    }
+  }
+
+  .texts {
+    display: flex;
+    flex-direction: column;
+    gap: calc($global-gap / 2);
+    text-align: left;
+    padding-left: 1rem;
+
+    .title {
+      line-height: 22px;
+      letter-spacing: -0.3px;
+      color: get-color(neutral, neutral-1);
+      padding-right: 0.5rem;
+    }
+
+    .description {
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: -0.3px;
+      color: get-color(neutral, neutral-2);
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { type MoreDocsItemProps } from './MoreDocsItemProps'
-import { MoreDocsItemStyled } from './MoreDocsItem.styled'
 import { getCategoryIcons } from '../../../utils/getCategoryIcons'
+// import './MoreDocsItem.scss'
 
 export const MoreDocsItem: React.FC<MoreDocsItemProps> = ({ title, description, slug, icon = null }) => {
   return (
-    <MoreDocsItemStyled
+    <div
       className='more-docs-item'
       onClick={() => {
         window.location.href = slug
@@ -25,6 +25,6 @@ export const MoreDocsItem: React.FC<MoreDocsItemProps> = ({ title, description,
         <div className='title'>{title}</div>
         <p className='description'>{description}</p>
       </div>
-    </MoreDocsItemStyled>
+    </div>
   )
 }

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
-import { NavMenuItemStyled } from './NavMenuItem.styled';
+// import './NavMenuItem.scss'
 export const NavMenuItem = ({ mainButton, items = [] }) => {
-    return (_jsxs(NavMenuItemStyled, { className: 'nav-menu-item', children: [_jsx("div", { className: 'nav-menu-item__title', children: _jsx(Button, { ...mainButton, noLinkNoFunc: true, color: 'transparent' }) }), _jsx("ul", { className: 'nav-menu-item__list', children: items.map((item) => {
-                    return (_jsx("li", { className: 'nav-menu-item__list__item', children: _jsx(Button, { ...item.props, color: 'transparent' }) }, item.key));
+    return (_jsxs("div", { className: 'nav-menu-item', children: [_jsx("div", { className: 'title', children: _jsx(Button, { ...mainButton, noLinkNoFunc: true, color: 'transparent' }) }), _jsx("ul", { className: 'list', children: items.map((item) => {
+                    return (_jsx("li", { className: 'item-list', children: _jsx(Button, { ...item.props, color: 'transparent' }) }, item.key));
                 }) })] }));
 };

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

@@ -0,0 +1,60 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.nav-menu-item {
+  border-radius: $global-border-radius;
+  position: relative;
+  width: fit-content;
+
+  .title {
+    position: relative;
+  }
+
+  .e-button {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0.1rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+  }
+
+  .list {
+    border-radius: $global-border-radius;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    display: flex;
+    visibility: hidden;
+    opacity: 0;
+    background: get-color(others, white);
+    transition: all 0.1s ease;
+    box-shadow: $box-shadow-medium;
+    min-width: max-content;
+    flex-flow: column wrap;
+    position: absolute;
+    left: 0;
+
+    .item-list:hover {
+      background-color: get-color(primary, main-light-5);
+    }
+  }
+
+  &:hover {
+    .title {
+      &:after {
+        display: block;
+      }
+    }
+
+    .list {
+      opacity: 1;
+      z-index: 11;
+      margin-top: 0.8rem;
+      visibility: visible;
+      transition: all 0.4s ease;
+    }
+  }
+
+  @include laptop {
+    display: block;
+  }
+}

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

@@ -2,23 +2,23 @@ import React from 'react'
 
 import { Button } from '../Button'
 import { type NavMenuItemProps } from './NavMenuItemProps'
-import { NavMenuItemStyled } from './NavMenuItem.styled'
+// import './NavMenuItem.scss'
 
 export const NavMenuItem: React.FC<NavMenuItemProps> = ({ mainButton, items = [] }) => {
   return (
-    <NavMenuItemStyled className={'nav-menu-item'}>
-      <div className={'nav-menu-item__title'}>
+    <div className={'nav-menu-item'}>
+      <div className={'title'}>
         <Button {...mainButton} noLinkNoFunc color='transparent' />
       </div>
-      <ul className={'nav-menu-item__list'}>
+      <ul className={'list'}>
         {items.map((item) => {
           return (
-            <li className='nav-menu-item__list__item' key={item.key}>
+            <li className='item-list' key={item.key}>
               <Button {...item.props} color='transparent' />
             </li>
           )
         })}
       </ul>
-    </NavMenuItemStyled>
+    </div>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PaypalButtonStyled } from './PaypalButton.styled';
 import paypalImg from '../../../../images/png/buy-logo-large-en.png';
+// import './PaypalButton.scss'
 const PaypalButton = ({ onClickButton }) => {
-    return (_jsx(PaypalButtonStyled, { className: 'paypal-button', onClick: onClickButton, children: _jsx("img", { src: paypalImg, alt: '' }) }));
+    return (_jsx("button", { className: 'paypal-button', onClick: onClickButton, children: _jsx("img", { src: paypalImg, alt: '' }) }));
 };
 export default PaypalButton;

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

@@ -0,0 +1,5 @@
+.paypal-button {
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}

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

@@ -2,14 +2,14 @@
 import React, { type FC } from 'react'
 
 import { type PaypalButtonProps } from './PaypalButtonProps.types'
-import { PaypalButtonStyled } from './PaypalButton.styled'
 import paypalImg from '../../../../images/png/buy-logo-large-en.png'
+// import './PaypalButton.scss'
 
 const PaypalButton: FC<PaypalButtonProps> = ({ onClickButton }) => {
   return (
-    <PaypalButtonStyled className='paypal-button' onClick={onClickButton}>
+    <button className='paypal-button' onClick={onClickButton}>
       <img src={paypalImg} alt='' />
-    </PaypalButtonStyled>
+    </button>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px';
-import { PopularDocsItemStyled } from './PopularDocsItem.styled';
 import { getCategoryIcons } from '../../../utils/getCategoryIcons';
+// import './PopularDocsItem.scss'
 export const PopularDocsItem = ({ title, description, slug, icon = null }) => {
-    return (_jsxs(PopularDocsItemStyled, { className: 'popular-docs-item', href: slug, "data-qa": title.replace(/\s/g, '_'), children: [_jsx("div", { className: 'category-icon', children: icon ?? getCategoryIcons(description, 35, 30) }), _jsxs("div", { className: 'texts', children: [_jsx("div", { children: _jsx("strong", { children: title }) }), _jsx("p", { className: 'description', children: description })] }), _jsx("div", { className: 'icon-left', children: _jsx(ChevronRight24px, {}) })] }));
+    return (_jsxs("a", { className: 'popular-docs-item', href: slug, "data-qa": title.replace(/\s/g, '_'), children: [_jsx("div", { className: 'category-icon', children: icon ?? getCategoryIcons(description, 35, 30) }), _jsxs("div", { className: 'texts', children: [_jsx("div", { children: _jsx("strong", { children: title }) }), _jsx("p", { className: 'description', children: description })] }), _jsx("div", { className: 'icon-left', children: _jsx(ChevronRight24px, {}) })] }));
 };