@npm_leadtech/legal-lib-components 7.12.24 → 7.12.26

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

@@ -2,13 +2,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC } from 'react'
 
-import { MenuItems, Tooltip } from '../../atoms'
+import { MenuItemsDeprecated, Tooltip } from '../../atoms'
 import { MenuCollapse24p } from '../../../../images/componentsSvg/MenuCollapse24p'
 import { type TooltipMenuProps } from './TooltipMenuProps.types'
 // import './TooltipMenu.scss'
 
 const TooltipMenu: FC<TooltipMenuProps> = ({ options, onClick, label }: TooltipMenuProps) => {
-  const menu = <MenuItems list={options}></MenuItems>
+  const menu = <MenuItemsDeprecated list={options}></MenuItemsDeprecated>
 
   return (
     <Tooltip content={menu} allowHTML={true} interactive={true} position='bottom' trigger='click'>

package/dist/src/components/molecules/index.d.ts

@@ -1,6 +1,7 @@
 export * from './AccordionItem';
 export * from './ActionButtonHeaderRatafiaCardList';
 export * from './AlsoKnownAs';
+export * from './AllTypeDocumentsItemMenu';
 export * from './Article';
 export * from './BaseBoxList';
 export * from './BenefitRatafiaCardList';
@@ -13,6 +14,7 @@ export * from './ContactCardList';
 export * from './ContactInfo';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
+export * from './DocumentListMenuSection';
 export * from './EmailContactBox';
 export * from './ExpertCardList';
 export * from './FaqItem';
@@ -23,6 +25,7 @@ export * from './FreeDocModalContent';
 export * from './HeaderRatafia';
 export * from './KeyFactCardListRatafia';
 export * from './MenuItemsSection';
+export * from './MenuSectionTitle';
 export * from './MidBannerRatafiaContent';
 export * from './MidBannerRatafiaSample';
 export * from './MoreDocsDesktop';
@@ -32,12 +35,14 @@ export * from './Pagination';
 export * from './PhoneContactBoxDesktop';
 export * from './PhoneContactBoxMobile';
 export * from './PopularDocs';
+export * from './ProductListMenu';
 export * from './PricingCard';
 export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
 export * from './SocialLinks';
 export * from './SubscriptionCard';
 export * from './Snackbar';
+export * from './SearchBar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
 export * from './SubtypeDocumentCard';

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

@@ -1,6 +1,7 @@
 export * from './AccordionItem';
 export * from './ActionButtonHeaderRatafiaCardList';
 export * from './AlsoKnownAs';
+export * from './AllTypeDocumentsItemMenu';
 export * from './Article';
 export * from './BaseBoxList';
 export * from './BenefitRatafiaCardList';
@@ -13,6 +14,7 @@ export * from './ContactCardList';
 export * from './ContactInfo';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
+export * from './DocumentListMenuSection';
 export * from './EmailContactBox';
 export * from './ExpertCardList';
 export * from './FaqItem';
@@ -23,6 +25,7 @@ export * from './FreeDocModalContent';
 export * from './HeaderRatafia';
 export * from './KeyFactCardListRatafia';
 export * from './MenuItemsSection';
+export * from './MenuSectionTitle';
 export * from './MidBannerRatafiaContent';
 export * from './MidBannerRatafiaSample';
 export * from './MoreDocsDesktop';
@@ -32,12 +35,14 @@ export * from './Pagination';
 export * from './PhoneContactBoxDesktop';
 export * from './PhoneContactBoxMobile';
 export * from './PopularDocs';
+export * from './ProductListMenu';
 export * from './PricingCard';
 export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
 export * from './SocialLinks';
 export * from './SubscriptionCard';
 export * from './Snackbar';
+export * from './SearchBar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';
 export * from './SubtypeDocumentCard';

package/dist/src/components/molecules/index.ts

@@ -1,6 +1,7 @@
 export * from './AccordionItem'
 export * from './ActionButtonHeaderRatafiaCardList'
 export * from './AlsoKnownAs'
+export * from './AllTypeDocumentsItemMenu'
 export * from './Article'
 export * from './BaseBoxList'
 export * from './BenefitRatafiaCardList'
@@ -13,6 +14,7 @@ export * from './ContactCardList'
 export * from './ContactInfo'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
+export * from './DocumentListMenuSection'
 export * from './EmailContactBox'
 export * from './ExpertCardList'
 export * from './FaqItem'
@@ -23,6 +25,7 @@ export * from './FreeDocModalContent'
 export * from './HeaderRatafia'
 export * from './KeyFactCardListRatafia'
 export * from './MenuItemsSection'
+export * from './MenuSectionTitle'
 export * from './MidBannerRatafiaContent'
 export * from './MidBannerRatafiaSample'
 export * from './MoreDocsDesktop'
@@ -32,12 +35,14 @@ export * from './Pagination'
 export * from './PhoneContactBoxDesktop'
 export * from './PhoneContactBoxMobile'
 export * from './PopularDocs'
+export * from './ProductListMenu'
 export * from './PricingCard'
 export * from './RatafiaResultCardList'
 export * from './RatafiaResultTabList'
 export * from './SocialLinks'
 export * from './SubscriptionCard'
 export * from './Snackbar'
+export * from './SearchBar'
 export * from './StepGetForm'
 export * from './StepRatafiaCardList'
 export * from './SubtypeDocumentCard'

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
-import { ContactInfoBox } from '../../molecules/ContactInfoBox';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ faqsTitle, visitFaqPageLabel, children, isJonSnow = false, items }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [_jsx(ContactInfoBox, { items: items }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' }))] }));
+export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
 
+import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
-import { ContactInfoBox } from '../../molecules/ContactInfoBox'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
 import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
+  phoneBoxDesktopProps,
+  emailContactBoxProps,
   faqsTitle,
   visitFaqPageLabel,
   children,
-  isJonSnow = false,
-  items
+  isJonSnow = false
 }) => {
   return (
     <ContactJumbotronStyled>
-      <ContactInfoBox items={items} />
+      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
       {!isJonSnow && (
@@ -26,6 +27,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
           dataQa={'visitFaq'}
         />
       )}
+      <EmailContactBox {...emailContactBoxProps} />
     </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -1,9 +1,10 @@
-import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard';
 import type React from 'react';
+import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules';
 export interface ContactJumbotronProps {
+    phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
+    emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
     visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
-    items: ContactInfoCardProps[];
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -1,10 +1,12 @@
-import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard'
 import type React from 'react'
 
+import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
+
 export interface ContactJumbotronProps {
+  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
+  emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
   visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
-  items: ContactInfoCardProps[]
 }

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DocumentListMenuProps } from './DocumentListMenuProps.types';
+export declare const DocumentListMenu: React.FC<DocumentListMenuProps>;

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms/Button';
+import { DocumentListMenuSection } from '../../molecules/DocumentListMenuSection';
+import { DocumentListMenuStyled } from './DocumentListMenu.styled';
+export const DocumentListMenu = ({ routes, seeAllLegalDocs, seeAllTypeDocs, finalMenu, hasSubCategoryPage, setCookiePolicyFunc }) => {
+    return (_jsxs(DocumentListMenuStyled, { className: 'document-list-menu', children: [_jsx("div", { className: 'documents-wrapper', children: finalMenu.map((item, index) => (_jsx("div", { className: 'products__list__section-container', children: _jsx(DocumentListMenuSection, { products: item.products, type: item.type, icon: item.icon, seeAllTypeDocs: seeAllTypeDocs, slug: finalMenu[0].slug, hasSubCategoryPage: hasSubCategoryPage, routes: routes, setCookiePolicyFunc: setCookiePolicyFunc }) }, index))) }), _jsx("div", { className: 'all-documents-button-wrapper', children: _jsx(Button, { color: 'transparent', centered: true, size: 'M', givenClass: 'all-documents-button', link: routes.LEGAL_DOCUMENTS, label: seeAllLegalDocs, dataQa: 'button-see-all-documents' }) })] }));
+};

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.d.ts

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

@@ -0,0 +1,67 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const DocumentListMenuStyled = styled.div `
+  display: flex;
+  flex-flow: column nowrap;
+  background: var(--others-white);
+  width: 100%;
+  padding: 1rem 0;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .documents-wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    margin: auto;
+
+    @media ${device['landscape-tablets']} {
+      width: 696px;
+    }
+
+    @media ${device['laptop']} {
+      width: 910px;
+    }
+
+    @media ${device['desktop-xl']} {
+      width: 1128px;
+    }
+
+    .products__list__section-container {
+      text-align: left;
+      width: 100%;
+
+      @media ${device['landscape-tablets']} {
+        width: 33%;
+        padding-right: 1rem;
+        &:nth-child(3) {
+          padding-right: 0;
+        }
+      }
+
+      @media ${device['laptop']} {
+        width: 20%;
+        &:nth-child(3) {
+          padding-right: 1rem;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  .all-documents-button-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .all-documents-button {
+      margin: 1rem auto;
+      max-width: 330px;
+      width: 100%;
+    }
+  }
+`;

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.ts

@@ -0,0 +1,68 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DocumentListMenuStyled = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  background: var(--others-white);
+  width: 100%;
+  padding: 1rem 0;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .documents-wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    margin: auto;
+
+    @media ${device['landscape-tablets']} {
+      width: 696px;
+    }
+
+    @media ${device['laptop']} {
+      width: 910px;
+    }
+
+    @media ${device['desktop-xl']} {
+      width: 1128px;
+    }
+
+    .products__list__section-container {
+      text-align: left;
+      width: 100%;
+
+      @media ${device['landscape-tablets']} {
+        width: 33%;
+        padding-right: 1rem;
+        &:nth-child(3) {
+          padding-right: 0;
+        }
+      }
+
+      @media ${device['laptop']} {
+        width: 20%;
+        &:nth-child(3) {
+          padding-right: 1rem;
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  .all-documents-button-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .all-documents-button {
+      margin: 1rem auto;
+      max-width: 330px;
+      width: 100%;
+    }
+  }
+`

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.tsx

@@ -0,0 +1,47 @@
+import { Button } from '../../atoms/Button'
+import React from 'react'
+
+import { type DocumentListMenuProps } from './DocumentListMenuProps.types'
+import { DocumentListMenuSection } from '../../molecules/DocumentListMenuSection'
+import { DocumentListMenuStyled } from './DocumentListMenu.styled'
+
+export const DocumentListMenu: React.FC<DocumentListMenuProps> = ({
+  routes,
+  seeAllLegalDocs,
+  seeAllTypeDocs,
+  finalMenu,
+  hasSubCategoryPage,
+  setCookiePolicyFunc
+}) => {
+  return (
+    <DocumentListMenuStyled className={'document-list-menu'}>
+      <div className={'documents-wrapper'}>
+        {finalMenu.map((item, index) => (
+          <div className='products__list__section-container' key={index}>
+            <DocumentListMenuSection
+              products={item.products}
+              type={item.type}
+              icon={item.icon}
+              seeAllTypeDocs={seeAllTypeDocs}
+              slug={finalMenu[0].slug}
+              hasSubCategoryPage={hasSubCategoryPage}
+              routes={routes}
+              setCookiePolicyFunc={setCookiePolicyFunc}
+            ></DocumentListMenuSection>
+          </div>
+        ))}
+      </div>
+      <div className={'all-documents-button-wrapper'}>
+        <Button
+          color='transparent'
+          centered
+          size='M'
+          givenClass='all-documents-button'
+          link={routes.LEGAL_DOCUMENTS}
+          label={seeAllLegalDocs}
+          dataQa='button-see-all-documents'
+        ></Button>
+      </div>
+    </DocumentListMenuStyled>
+  )
+}

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.d.ts

@@ -0,0 +1,21 @@
+import { Routes } from '../../sections/Header/HeaderProps.types';
+export interface ProductListMenuProps {
+    slug: string;
+    linkText: string;
+    categoryUrl?: string;
+}
+export interface DocumentListMenuSectionProps {
+    icon: string;
+    type: string;
+    products: ProductListMenuProps[];
+    slug: string;
+    seeAllTypeDocs: string;
+}
+export interface DocumentListMenuProps {
+    seeAllLegalDocs: string;
+    seeAllTypeDocs: string;
+    routes: Routes;
+    finalMenu: DocumentListMenuSectionProps[];
+    hasSubCategoryPage: boolean;
+    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
+}

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.ts

@@ -0,0 +1,24 @@
+import { Routes } from '../../sections/Header/HeaderProps.types'
+
+export interface ProductListMenuProps {
+  slug: string
+  linkText: string
+  categoryUrl?: string
+}
+
+export interface DocumentListMenuSectionProps {
+  icon: string
+  type: string
+  products: ProductListMenuProps[]
+  slug: string
+  seeAllTypeDocs: string
+}
+
+export interface DocumentListMenuProps {
+  seeAllLegalDocs: string
+  seeAllTypeDocs: string
+  routes: Routes
+  finalMenu: DocumentListMenuSectionProps[]
+  hasSubCategoryPage: boolean
+  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
+}

package/dist/src/components/organisms/DocumentListMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { DocumentListMenu } from './DocumentListMenu';
+export { type DocumentListMenuProps } from './DocumentListMenuProps.types';

package/dist/src/components/organisms/DocumentListMenu/index.js

@@ -0,0 +1 @@
+export { DocumentListMenu } from './DocumentListMenu';

package/dist/src/components/organisms/DocumentListMenu/index.ts

@@ -0,0 +1,2 @@
+export { DocumentListMenu } from './DocumentListMenu'
+export { type DocumentListMenuProps } from './DocumentListMenuProps.types'

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DocumentMainMenuProps } from '../DocumentMainMenu/DocumentMainMenuProps.types';
+export declare const DocumentMainMenu: React.FC<DocumentMainMenuProps>;

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight } from '../../../../images/componentsSvg/ArrowRight';
+import { DocumentMainMenuStyled } from './DocumentMainMenu.styled';
+import DocumentSubMenu from '../DocumentSubMenu/DocumentSubMenu';
+export const DocumentMainMenu = ({ seeAllTypeDocs, allLegalDocs, allTypeDocs, setCookiePolicyFunc, routes, hasSubCategoryPage, finalMenu }) => {
+    return (_jsxs(DocumentMainMenuStyled, { children: [finalMenu.map((item, index) => (_jsxs("li", { className: 'menu-items-li', children: [item.type, _jsx("div", { className: 'icon-arrow', children: _jsx(ArrowRight, {}) }), _jsxs("ul", { className: 'submenu__list', children: [item.products.map((product, index) => (_jsx(DocumentSubMenu, { product: product, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes }, index))), _jsx("li", { className: 'menu-items-li all-item', children: _jsx("a", { title: seeAllTypeDocs.replace(/{{type}}/g, item.type), "data-qa": `Header_Menu__${item.slug}_all-documents`, href: hasSubCategoryPage
+                                        ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(item.slug)
+                                        : routes.LEGAL_DOCUMENTS_WITH_HASH(item.type), children: item.type.includes('Documents')
+                                        ? allTypeDocs.replace(/{{type}}/g, item.type).replace('Documents', '')
+                                        : allTypeDocs.replace(/{{type}}/g, item.type) }) })] }, index)] }, index))), _jsx("li", { className: 'menu-items-li all-item', children: _jsx("a", { title: allLegalDocs, "data-qa": 'Header_Menu_Document_List_All_Documents', href: routes.LEGAL_DOCUMENTS, children: allLegalDocs }) })] }));
+};

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.styled.d.ts

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

@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+export const DocumentMainMenuStyled = styled.div `
+  border-radius: var(--s-border-radius);
+  padding: 0.75rem 1rem;
+  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;
+
+  & > .menu-items-li {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 0.5rem;
+    width: 100%;
+    margin: 0.25rem 2.5rem 0.25rem 0;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    padding: 0.25rem;
+    position: relative;
+    cursor: pointer;
+    align-items: baseline;
+
+    &.all-item {
+      font-weight: bold;
+      &:before {
+        content: none;
+      }
+    }
+
+    .icon-arrow {
+      width: 0.625rem;
+      height: 0.813rem;
+      &:before,
+      &:after {
+        width: 0.125rem;
+        background-color: var(--neutral-neutral-1);
+      }
+    }
+
+    &::marker {
+      content: none;
+    }
+
+    &:hover {
+      background-color: var(--primary-main-light-5);
+
+      .submenu__list {
+        opacity: 1;
+        visibility: visible;
+        margin-left: 1.5rem;
+        transition: all 0.4s ease;
+      }
+      .icon-arrow {
+        &:before,
+        &:after {
+          background-color: var(--primary-main);
+        }
+      }
+    }
+
+    .submenu__list {
+      border-radius: var(--s-border-radius);
+      padding: 0.75rem 1rem;
+      display: flex;
+      visibility: hidden;
+      opacity: 0;
+      margin-left: 1rem;
+      background: var(--others-white);
+      box-shadow: 0 0.125rem 0.5rem 0 #02374a40;
+      transition: all 0.1s ease;
+      min-width: max-content;
+      flex-flow: column wrap;
+      position: absolute;
+      left: 100%;
+      top: -1rem;
+    }
+
+    .submenu__list {
+      .all-item {
+        font-weight: bold;
+        margin: 0.25rem 3rem 0.25rem 0;
+        padding: 0.25rem;
+
+        &:hover {
+          background-color: var(--primary-main-light-5);
+        }
+      }
+    }
+  }
+`;