@npm_leadtech/legal-lib-components 5.2.7 → 5.2.8

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

@@ -8,6 +8,7 @@ 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'
 
@@ -66,9 +67,9 @@ const MenuItems: FC<MenuItemProps> = ({ spacing, list, hasBullets = false, initi
   }
 
   return (
-    <ul className={classes} {...rest}>
+    <MenuItemsStyled className={classes} {...rest}>
       {filteredList.map((item, index) => renderItem(item, index))}
-    </ul>
+    </MenuItemsStyled>
   )
 }
 

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

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

package/dist/src/components/atoms/Message/Message.styled.d.ts

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+export const MessageStyled = styled.div `
+  &.e-message {
+    &-error {
+      box-shadow: 0 0 0 1px #d63837;
+      background-color: #ffecee;
+      padding: 10px;
+      color: #d63837;
+      border-radius: 5px;
+      font-family: var(--font-sans);
+    }
+
+    &-success {
+      box-shadow: 0 0 0 1px #5aa900;
+      background-color: #e6ffe1;
+      padding: 10px;
+      color: #5aa900;
+      border-radius: 5px;
+      font-family: var(--font-sans);
+    }
+
+    &-neutral {
+      box-shadow: 0 0 0 1px #beebe9;
+      background-color: #e1f2fb;
+      padding: 10px;
+      color: #2a8aeb;
+      border-radius: 5px;
+      font-family: var(--font-sans);
+    }
+  }
+`;

package/dist/src/components/atoms/Message/Message.styled.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+export const MessageStyled = styled.div`
+  &.e-message {
+    &-error {
+      box-shadow: 0 0 0 1px #d63837;
+      background-color: #ffecee;
+      padding: 10px;
+      color: #d63837;
+      border-radius: 5px;
+      font-family: var(--font-sans);
+    }
+
+    &-success {
+      box-shadow: 0 0 0 1px #5aa900;
+      background-color: #e6ffe1;
+      padding: 10px;
+      color: #5aa900;
+      border-radius: 5px;
+      font-family: var(--font-sans);
+    }
+
+    &-neutral {
+      box-shadow: 0 0 0 1px #beebe9;
+      background-color: #e1f2fb;
+      padding: 10px;
+      color: #2a8aeb;
+      border-radius: 5px;
+      font-family: var(--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 './Message.scss'
+import { MessageStyled } from './Message.styled'
 
 const Message: FC<MessageProps> = ({ message, type }) => {
   if (message.length === 0) return null
 
   return (
-    <div data-testid='message' className={type !== undefined ? `e-message-${type}` : ''}>
+    <MessageStyled data-testid='message' className={type !== undefined ? `e-message-${type}` : ''}>
       <p>{message}</p>
-    </div>
+    </MessageStyled>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import './MessageInformation.scss'
+import { MessageInformationStyled } from './MessageInformation.styled';
 const MessageInformation = ({ noImg, text, time, centered }) => {
-    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] })] }));
+    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] })] }));
 };
 export default MessageInformation;

package/dist/src/components/atoms/MessageInformation/MessageInformation.styled.d.ts

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

@@ -0,0 +1,53 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MessageInformationStyled = styled.div `
+  display: flex;
+  justify-content: center;
+  border-radius: 4px;
+  background: var(--secondary-main-light-4);
+  padding: 8px;
+
+  &.message-information {
+    @media ${device.laptop} {
+      justify-content: flex-start;
+    }
+
+    &.text-center {
+      justify-content: center;
+    }
+  }
+  .message-information {
+    &__icon {
+      width: 24px;
+      fill: var(--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;
+
+      @media ${device['landscape-tablets']} {
+        text-align: center;
+      }
+
+      &__time {
+        font-weight: 600;
+
+        &.regular {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/MessageInformation/MessageInformation.styled.ts

@@ -0,0 +1,54 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const MessageInformationStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  border-radius: 4px;
+  background: var(--secondary-main-light-4);
+  padding: 8px;
+
+  &.message-information {
+    @media ${device.laptop} {
+      justify-content: flex-start;
+    }
+
+    &.text-center {
+      justify-content: center;
+    }
+  }
+  .message-information {
+    &__icon {
+      width: 24px;
+      fill: var(--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;
+
+      @media ${device['landscape-tablets']} {
+        text-align: center;
+      }
+
+      &__time {
+        font-weight: 600;
+
+        &.regular {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+`

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

@@ -2,13 +2,12 @@
 import React, { type FC } from 'react'
 
 import { type MessageInformationProps } from './MessageInformationProps.types'
-
-// import './MessageInformation.scss'
+import { MessageInformationStyled } from './MessageInformation.styled'
 
 const MessageInformation: FC<MessageInformationProps> = ({ noImg, text, time, centered }) => {
   return (
-    <div className={`message-information ${centered && 'text-center'}`}>
-      <div className={`message-information__icon ${noImg && 'hide'}`}>
+    <MessageInformationStyled 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>
@@ -17,7 +16,7 @@ const MessageInformation: FC<MessageInformationProps> = ({ noImg, text, time, ce
         {time != null && <span className={`message-information__text__time ${noImg && 'regular'}`}>{time}&apos; </span>}
         {text}
       </p>
-    </div>
+    </MessageInformationStyled>
   )
 }
 

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("div", { className: 'more-docs-item', onClick: () => {
+    return (_jsxs(MoreDocsItemStyled, { 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.styled.d.ts

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

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

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

package/dist/src/components/atoms/MoreDocsItem/MoreDocsItem.styled.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+export const MoreDocsItemStyled = styled.a`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 10px;
+  border-radius: var(--global-border-radius);
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.more-docs-item {
+    .category-icon {
+      margin: 0 1rem 0 1.3rem;
+      svg {
+        fill: var(--primary-main);
+      }
+    }
+
+    .texts {
+      display: flex;
+      flex-direction: column;
+      gap: calc(1rem / 2);
+      text-align: left;
+      padding-left: 1rem;
+
+      .title {
+        line-height: 22px;
+        letter-spacing: -0.3px;
+        color: var(--neutral-neutral-1);
+        padding-right: 0.5rem;
+      }
+
+      .description {
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: -0.3px;
+        color: var(--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 (
-    <div
+    <MoreDocsItemStyled
       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>
-    </div>
+    </MoreDocsItemStyled>
   )
 }

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 './NavMenuItem.scss'
+import { NavMenuItemStyled } from './NavMenuItem.styled';
 export const NavMenuItem = ({ mainButton, items = [] }) => {
-    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));
+    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));
                 }) })] }));
 };

package/dist/src/components/atoms/NavMenuItem/NavMenuItem.styled.d.ts

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

@@ -0,0 +1,63 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const NavMenuItemStyled = styled.div `
+  border-radius: var(--global-border-radius);
+  position: relative;
+  width: fit-content;
+
+  &.nav-menu-item:hover {
+    .nav-menu-item {
+      &__title {
+        &:after {
+          display: block;
+        }
+      }
+
+      &__list {
+        opacity: 1;
+        z-index: 11;
+        margin-top: 0.8rem;
+        visibility: visible;
+        transition: all 0.4s ease;
+      }
+    }
+  }
+
+  @media ${device.laptop} {
+    display: block;
+  }
+
+  .e-button {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0.1rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+  }
+
+  .nav-menu-item {
+    &__title {
+      position: relative;
+    }
+
+    &__list {
+      border-radius: var(--global-border-radius);
+      padding: 0.5rem;
+      margin-top: 0.5rem;
+      display: flex;
+      visibility: hidden;
+      opacity: 0;
+      background: var(--others-white);
+      transition: all 0.1s ease;
+      box-shadow: var(--box-shadow-medium);
+      min-width: max-content;
+      flex-flow: column wrap;
+      position: absolute;
+      left: 0;
+
+      &__item:hover {
+        background-color: var(--primary-main-light-5);
+      }
+    }
+  }
+`;

package/dist/src/components/atoms/NavMenuItem/NavMenuItem.styled.ts

@@ -0,0 +1,64 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const NavMenuItemStyled = styled.div`
+  border-radius: var(--global-border-radius);
+  position: relative;
+  width: fit-content;
+
+  &.nav-menu-item:hover {
+    .nav-menu-item {
+      &__title {
+        &:after {
+          display: block;
+        }
+      }
+
+      &__list {
+        opacity: 1;
+        z-index: 11;
+        margin-top: 0.8rem;
+        visibility: visible;
+        transition: all 0.4s ease;
+      }
+    }
+  }
+
+  @media ${device.laptop} {
+    display: block;
+  }
+
+  .e-button {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0.1rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+  }
+
+  .nav-menu-item {
+    &__title {
+      position: relative;
+    }
+
+    &__list {
+      border-radius: var(--global-border-radius);
+      padding: 0.5rem;
+      margin-top: 0.5rem;
+      display: flex;
+      visibility: hidden;
+      opacity: 0;
+      background: var(--others-white);
+      transition: all 0.1s ease;
+      box-shadow: var(--box-shadow-medium);
+      min-width: max-content;
+      flex-flow: column wrap;
+      position: absolute;
+      left: 0;
+
+      &__item:hover {
+        background-color: var(--primary-main-light-5);
+      }
+    }
+  }
+`

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

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("button", { className: 'paypal-button', onClick: onClickButton, children: _jsx("img", { src: paypalImg, alt: '' }) }));
+    return (_jsx(PaypalButtonStyled, { className: 'paypal-button', onClick: onClickButton, children: _jsx("img", { src: paypalImg, alt: '' }) }));
 };
 export default PaypalButton;

package/dist/src/components/atoms/PaypalButton/PaypalButton.styled.d.ts

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

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const PaypalButtonStyled = styled.button `
+  padding: 0;
+  border: none;
+  cursor: pointer;
+`;

package/dist/src/components/atoms/PaypalButton/PaypalButton.styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const PaypalButtonStyled = styled.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 (
-    <button className='paypal-button' onClick={onClickButton}>
+    <PaypalButtonStyled className='paypal-button' onClick={onClickButton}>
       <img src={paypalImg} alt='' />
-    </button>
+    </PaypalButtonStyled>
   )
 }
 

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("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, {}) })] }));
+    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, {}) })] }));
 };

package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.d.ts

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