@npm_leadtech/legal-lib-components 7.15.0 → 7.16.1

package/dist/src/components/atoms/{MenuItems/MenuItemProps.types.d.ts → MenuItemsDeprecated/MenuItemsDeprecatedProps.types.d.ts}

@@ -1,4 +1,4 @@
-export interface MenuItemProps {
+export interface MenuItemsDeprecatedProps {
     className?: string;
     spacing?: boolean;
     hasBullets?: boolean;

package/dist/src/components/atoms/{MenuItems/MenuItemProps.types.ts → MenuItemsDeprecated/MenuItemsDeprecatedProps.types.ts}

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export interface MenuItemProps {
+export interface MenuItemsDeprecatedProps {
   className?: string
   spacing?: boolean
   hasBullets?: boolean

package/dist/src/components/atoms/MenuItemsDeprecated/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItemsDeprecated } from './MenuItemsDeprecated';
+export { type MenuItemsDeprecatedProps } from './MenuItemsDeprecatedProps.types';

package/dist/src/components/atoms/MenuItemsDeprecated/index.js

@@ -0,0 +1 @@
+export { default as MenuItemsDeprecated } from './MenuItemsDeprecated';

package/dist/src/components/atoms/MenuItemsDeprecated/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuItemsDeprecated } from './MenuItemsDeprecated'
+export { type MenuItemsDeprecatedProps } from './MenuItemsDeprecatedProps.types'

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { MenuItems } from '../MenuItems';
+import { MenuItemsDeprecated } from '../MenuItemsDeprecated';
 import { SidemenuTabStyled } from './SidemenuTab.styled';
 import { Tooltip } from '../Tooltip';
 const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) => {
@@ -12,6 +12,6 @@ const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) =
     if (menu === undefined || menu?.lenght === 0) {
         return renderTab();
     }
-    return (_jsx(Tooltip, { content: _jsx(MenuItems, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
+    return (_jsx(Tooltip, { content: _jsx(MenuItemsDeprecated, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
 };
 export default SidemenuTab;

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import { MenuItems } from '../MenuItems'
+import { MenuItemsDeprecated } from '../MenuItemsDeprecated'
 import { type SideMenuTabProps } from './SideMenuTabProps.types'
 import { SidemenuTabStyled } from './SidemenuTab.styled'
 import { Tooltip } from '../Tooltip'
@@ -26,7 +26,7 @@ const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, i
   }
 
   return (
-    <Tooltip content={<MenuItems list={menu} />} interactive trigger='click'>
+    <Tooltip content={<MenuItemsDeprecated list={menu} />} interactive trigger='click'>
       {renderTab()}
     </Tooltip>
   )

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

@@ -26,7 +26,7 @@ export const TopBarStyled = styled.div `
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -50,6 +50,53 @@ export const TopBarStyled = styled.div `
           display: inherit;
         }
       }
+
+      &-mobile {
+        background-color: var(--neutral-neutral-5);
+        display: flex;
+        padding: 0.5rem 1rem;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: var(--s-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+        position: fixed;
+        top: 0.5rem;
+        left: 0.5rem;
+        right: 0.5rem;
+
+        &.fade-In {
+          visibility: visible;
+          opacity: 1;
+          transition:
+            visibility 0s linear 0s,
+            opacity 300ms;
+        }
+
+        &.fade-Out {
+          visibility: hidden;
+          opacity: 0;
+          transition:
+            visibility 0s linear 300ms,
+            opacity 300ms;
+        }
+
+        > b {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          a {
+            display: contents;
+          }
+
+          img {
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
   }
 `;

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

@@ -27,7 +27,7 @@ export const TopBarStyled = styled.div`
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -51,6 +51,53 @@ export const TopBarStyled = styled.div`
           display: inherit;
         }
       }
+
+      &-mobile {
+        background-color: var(--neutral-neutral-5);
+        display: flex;
+        padding: 0.5rem 1rem;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: var(--s-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+        position: fixed;
+        top: 0.5rem;
+        left: 0.5rem;
+        right: 0.5rem;
+
+        &.fade-In {
+          visibility: visible;
+          opacity: 1;
+          transition:
+            visibility 0s linear 0s,
+            opacity 300ms;
+        }
+
+        &.fade-Out {
+          visibility: hidden;
+          opacity: 0;
+          transition:
+            visibility 0s linear 300ms,
+            opacity 300ms;
+        }
+
+        > b {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          a {
+            display: contents;
+          }
+
+          img {
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
   }
 `

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

@@ -14,7 +14,7 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   return (
     <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
-        <div className={'top-bar-content'}>{children}</div>
+        <div className='top-bar-content'>{children}</div>
       </div>
     </TopBarStyled>
   )

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

@@ -16,6 +16,7 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
+export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -31,7 +32,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItems';
+export * from './MenuItemsDeprecated';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -61,7 +62,6 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
-export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';

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

@@ -16,6 +16,7 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
+export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -31,7 +32,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItems';
+export * from './MenuItemsDeprecated';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -61,7 +62,6 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
-export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';

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

@@ -16,6 +16,7 @@ export * from './DialogMenuIcon'
 export * from './Disclaimer'
 export * from './DisclaimerRatafia'
 export * from './Divider'
+export * from './DropdownInput'
 export * from './DocumentStatus'
 export * from './DocumentTag'
 export * from './ExpertCard'
@@ -31,7 +32,7 @@ export * from './JumbotronStatic'
 export * from './KeyFactRatafiaCard'
 export * from './Logo'
 export * from './LogoText'
-export * from './MenuItems'
+export * from './MenuItemsDeprecated'
 export * from './Message'
 export * from './MessageInformation'
 export * from './MoreDocsItem'
@@ -61,7 +62,6 @@ export * from './TextArea'
 export * from './Toggle'
 export * from './Tooltip'
 export * from './TopBar'
-export * from './TopBarMobile'
 export * from './TrustPilot'
 export * from './Video'
 export * from './WhyLawDistrictItems'

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AllTypeDocumentsItemMenuStyled } from './AllTypeDocumentsItemMenu.styled';
+export const AllTypeDocumentsItemMenu = ({ type, slug, seeAllTypeDocs, routes, hasSubCategoryPage }) => {
+    const url = hasSubCategoryPage ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(slug) : routes.LEGAL_DOCUMENTS_WITH_HASH(slug);
+    return (_jsx(AllTypeDocumentsItemMenuStyled, { className: 'products__list__section__li all-item', children: _jsx("a", { title: seeAllTypeDocs.replace(/{{type}}/g, type), "data-qa": `Mobile_Header_Menu_All_${slug}`, href: url, children: seeAllTypeDocs.replace(/{{type}}/g, type) }) }));
+};

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenu.styled.d.ts

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

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenu.styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const AllTypeDocumentsItemMenuStyled = styled.li `
+  list-style: none;
+  margin-top: 1rem;
+  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+
+  &.all-item {
+    font-weight: bold;
+  }
+
+  &:last-child {
+    margin-bottom: 1.5rem;
+  }
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+`;

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenu.styled.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const AllTypeDocumentsItemMenuStyled = styled.li`
+  list-style: none;
+  margin-top: 1rem;
+  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+
+  &.all-item {
+    font-weight: bold;
+  }
+
+  &:last-child {
+    margin-bottom: 1.5rem;
+  }
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+`

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { type AllTypeDocumentsItemMenuProps } from './AllTypeDocumentsItemMenuProps.types'
+import { AllTypeDocumentsItemMenuStyled } from './AllTypeDocumentsItemMenu.styled'
+
+export const AllTypeDocumentsItemMenu: React.FC<AllTypeDocumentsItemMenuProps> = ({
+  type,
+  slug,
+  seeAllTypeDocs,
+  routes,
+  hasSubCategoryPage
+}) => {
+  const url = hasSubCategoryPage ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(slug) : routes.LEGAL_DOCUMENTS_WITH_HASH(slug)
+
+  return (
+    <AllTypeDocumentsItemMenuStyled className='products__list__section__li all-item'>
+      <a title={seeAllTypeDocs.replace(/{{type}}/g, type)} data-qa={`Mobile_Header_Menu_All_${slug}`} href={url}>
+        {seeAllTypeDocs.replace(/{{type}}/g, type)}
+      </a>
+    </AllTypeDocumentsItemMenuStyled>
+  )
+}

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenuProps.types.d.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../sections/Header/HeaderProps.types';
+export interface AllTypeDocumentsItemMenuProps {
+    type: string;
+    slug: string;
+    seeAllTypeDocs: string;
+    routes: Routes;
+    hasSubCategoryPage: boolean;
+}

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenuProps.types.js

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

package/dist/src/components/molecules/AllTypeDocumentsItemMenu/AllTypeDocumentsItemMenuProps.types.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../sections/Header/HeaderProps.types'
+
+export interface AllTypeDocumentsItemMenuProps {
+  type: string
+  slug: string
+  seeAllTypeDocs: string
+  routes: Routes
+  hasSubCategoryPage: boolean
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AllTypeDocumentsItemMenu } from '../AllTypeDocumentsItemMenu';
+import { MenuSectionTitle } from '../MenuSectionTitle';
+import { ProductListMenu } from '../ProductListMenu';
+export const DocumentListMenuSection = ({ products, type, icon, seeAllTypeDocs, slug, hasSubCategoryPage, routes, setCookiePolicyFunc }) => {
+    return (_jsxs("div", { className: 'products__list__section', children: [_jsx(MenuSectionTitle, { icon: icon, title: type }), _jsxs("ul", { children: [products.map((product) => (_jsx(ProductListMenu, { ...product, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes }, product.slug))), _jsx(AllTypeDocumentsItemMenu, { type: type, slug: slug, seeAllTypeDocs: seeAllTypeDocs, routes: routes, hasSubCategoryPage: hasSubCategoryPage })] })] }));
+};

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSection.styled.d.ts

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

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSection.styled.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+export const ProductListMenuStyled = styled.li `
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: variables.$s-border-radius;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: variables.get-color(primary, main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .menu-section-title-container {
+    margin-bottom: 0.5rem;
+  }
+`;

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSection.styled.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const ProductListMenuStyled = styled.li`
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: variables.$s-border-radius;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: variables.get-color(primary, main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .menu-section-title-container {
+    margin-bottom: 0.5rem;
+  }
+`

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

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { AllTypeDocumentsItemMenu } from '../AllTypeDocumentsItemMenu'
+import { type DocumentListMenuSectionProps } from './DocumentListMenuSectionProps.types'
+import { MenuSectionTitle } from '../MenuSectionTitle'
+import { ProductListMenu } from '../ProductListMenu'
+
+export const DocumentListMenuSection: React.FC<DocumentListMenuSectionProps> = ({
+  products,
+  type,
+  icon,
+  seeAllTypeDocs,
+  slug,
+  hasSubCategoryPage,
+  routes,
+  setCookiePolicyFunc
+}) => {
+  return (
+    <div className='products__list__section'>
+      <MenuSectionTitle icon={icon} title={type} />
+      <ul>
+        {products.map((product) => (
+          <ProductListMenu key={product.slug} {...product} setCookiePolicyFunc={setCookiePolicyFunc} routes={routes} />
+        ))}
+        <AllTypeDocumentsItemMenu
+          type={type}
+          slug={slug}
+          seeAllTypeDocs={seeAllTypeDocs}
+          routes={routes}
+          hasSubCategoryPage={hasSubCategoryPage}
+        ></AllTypeDocumentsItemMenu>
+      </ul>
+    </div>
+  )
+}

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSectionProps.types.d.ts

@@ -0,0 +1,16 @@
+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;
+    hasSubCategoryPage: boolean;
+    routes: Routes;
+    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
+}

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSectionProps.types.js

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

package/dist/src/components/molecules/DocumentListMenuSection/DocumentListMenuSectionProps.types.ts

@@ -0,0 +1,18 @@
+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
+  hasSubCategoryPage: boolean
+  routes: Routes
+  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
+}

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

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

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

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

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

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

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 { MenuItemsDeprecated } from '../../atoms';
 import { MenuItemsSectionStyled } from './MenuItemsSection.styled';
 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(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(MenuItemsDeprecated, { list: list, spacing: true })] }));
 };
 export default MenuItemsSection;

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { MenuItems } from '../../atoms'
+import { MenuItemsDeprecated } from '../../atoms'
 import { type MenuItemsSectionProps } from './MenuItemsSectionProps.types'
 import { MenuItemsSectionStyled } from './MenuItemsSection.styled'
 
@@ -14,7 +14,7 @@ const MenuItemsSection: FC<MenuItemsSectionProps> = ({ icon, title, list }) => {
         {icon ?? null}
         <div className='menu-items-section__title-wrapper__title'>{title}</div>
       </div>
-      {list && <MenuItems list={list} spacing />}
+      {list && <MenuItemsDeprecated list={list} spacing />}
     </MenuItemsSectionStyled>
   )
 }

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSectionProps.types.d.ts

@@ -1,4 +1,4 @@
-import { type MenuListItem } from 'src/components/atoms/MenuItems/MenuItemProps.types';
+import { type MenuListItem } from 'src/components/atoms/MenuItemsDeprecated/MenuItemsDeprecatedProps.types';
 export interface MenuItemsSectionProps {
     icon?: React.ReactNode;
     title?: string;

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSectionProps.types.ts

@@ -1,4 +1,4 @@
-import { type MenuListItem } from 'src/components/atoms/MenuItems/MenuItemProps.types'
+import { type MenuListItem } from 'src/components/atoms/MenuItemsDeprecated/MenuItemsDeprecatedProps.types'
 
 export interface MenuItemsSectionProps {
   icon?: React.ReactNode

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuSectionTitleStyled } from './MenuSectionTitle.styled';
+export const MenuSectionTitle = ({ icon, title }) => {
+    return (_jsxs(MenuSectionTitleStyled, { className: 'menu-section-title-container', children: [_jsx("div", { className: 'menu-section-title__icon', children: _jsx("img", { src: icon, alt: title }) }), _jsx("div", { className: '', children: _jsx("div", { className: 'jumbotron__title', children: title }) })] }));
+};

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitle.styled.d.ts

@@ -0,0 +1 @@
+export declare const MenuSectionTitleStyled: 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/molecules/MenuSectionTitle/MenuSectionTitle.styled.js

@@ -0,0 +1,26 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MenuSectionTitleStyled = styled.div `
+  &.menu-section-title-container {
+    background-color: var(--neutral-neutral-5);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1rem;
+
+    @media ${device.laptop} {
+      justify-content: left;
+    }
+
+    .menu-section-title__icon {
+      margin-right: 0.5rem;
+      width: 1rem;
+    }
+
+    .jumbotron__title {
+      font-weight: bold;
+      margin-left: 1rem;
+    }
+  }
+`;