@npm_leadtech/legal-lib-components 7.45.0 → 7.46.0

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

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { MenuSectionTitleProps } from './MenuSectionTitleProps.types'
+import { MenuSectionTitleStyled } from './MenuSectionTitle.styled'
+
+export const MenuSectionTitle: React.FC<MenuSectionTitleProps> = ({ icon, title }) => {
+  return (
+    <MenuSectionTitleStyled className='menu-section-title-container'>
+      <div className='menu-section-title__icon'>
+        <img src={icon} alt={title} />
+      </div>
+      <div className=''>
+        <div className='jumbotron__title'>{title}</div>
+      </div>
+    </MenuSectionTitleStyled>
+  )
+}

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

@@ -0,0 +1,4 @@
+export interface MenuSectionTitleProps {
+    icon: string;
+    title: string;
+}

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

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

package/dist/src/components/molecules/MenuSectionTitle/MenuSectionTitleProps.types.ts

@@ -0,0 +1,4 @@
+export interface MenuSectionTitleProps {
+  icon: string
+  title: string
+}

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

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

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

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

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

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

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

@@ -20,6 +20,12 @@ export const MidBannerRatafiaContentStyled = styled.div `
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

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

@@ -21,6 +21,12 @@ export const MidBannerRatafiaContentStyled = styled.div`
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

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

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

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

@@ -66,4 +66,15 @@ export const MidBannerRatafiaSampleStyled = styled.div `
       top: 75px;
     }
   }
+
+  .about-page {
+    &__ai-tag {
+      background: var(--primary-main-light-5);
+    }
+
+    &__signed-tag {
+      background: var(--primary-main-dark-1);
+      color: var(--others-white);
+    }
+  }
 `;

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

@@ -67,4 +67,15 @@ export const MidBannerRatafiaSampleStyled = styled.div`
       top: 75px;
     }
   }
+
+  .about-page {
+    &__ai-tag {
+      background: var(--primary-main-light-5);
+    }
+
+    &__signed-tag {
+      background: var(--primary-main-dark-1);
+      color: var(--others-white);
+    }
+  }
 `

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

@@ -3,43 +3,51 @@ import React, { type FC } from 'react'
 import { type MidBannerRatafiaSampleProps } from './MidBannerRatafiaSampleProps.types'
 import { MidBannerRatafiaSampleStyled } from './MidBannerRatafiaSample.styled'
 
-const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({ image, isEsignatureImage = false }) => {
+const MidBannerRatafiaSample: FC<MidBannerRatafiaSampleProps> = ({
+  image,
+  isEsignatureImage = false,
+  isAbout = false,
+  midBanner1Img,
+  midBanner2Img,
+  midBanner3Img
+}) => {
   return (
     <MidBannerRatafiaSampleStyled className='mid-banner-ratafia-sample'>
       <div className='mid-banner-ratafia-sample__image'>{image}</div>
-      {!isEsignatureImage && (
+      {!isEsignatureImage && !isAbout && (
         <>
           <div className='mid-banner-ratafia-sample__sumarized-tag'>
-            <img
-              className='mid-banner-ratafia-sample__sumarized-tag__icon'
-              src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-1.svg'
-              alt=''
-              role='img'
-            />
+            <img className='mid-banner-ratafia-sample__sumarized-tag__icon' src={midBanner1Img} alt='' role='img' />
             <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
               Summarized
             </p>
           </div>
           <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts'>
-            <img
-              className='mid-banner-ratafia-sample__feature-tag__icon'
-              src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-2.svg'
-              alt=''
-              role='img'
-            />
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner2Img} alt='' role='img' />
             <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Key facts</p>
           </div>
           <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses'>
-            <img
-              className='mid-banner-ratafia-sample__feature-tag__icon'
-              src='https://cdn.stage.strapi.lawdistrict.com/mid-banner-3.svg'
-              alt=''
-              role='img'
-            />
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
             <p className='sans-serif --small mid-banner-ratafia-sample__feature-tag__text'>Clauses</p>
           </div>
         </>
       )}
+      {isAbout && (
+        <div className='about-page'>
+          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__key-facts about-page__signed-tag'>
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner1Img} alt='' role='img' />
+            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text about-page__signed-tag'>
+              Signed
+            </p>
+          </div>
+          <div className='mid-banner-ratafia-sample__feature-tag mid-banner-ratafia-sample__feature-tag__clauses about-page__ai-tag'>
+            <img className='mid-banner-ratafia-sample__feature-tag__icon' src={midBanner3Img} alt='' role='img' />
+            <p className='sans-serif --small --bold-weight mid-banner-ratafia-sample__sumarized-tag__text'>
+              AI Reviewed
+            </p>
+          </div>
+        </div>
+      )}
     </MidBannerRatafiaSampleStyled>
   )
 }

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.d.ts

@@ -1,4 +1,8 @@
 export interface MidBannerRatafiaSampleProps {
     image: React.ReactNode;
     isEsignatureImage?: boolean;
+    isAbout?: boolean;
+    midBanner1Img: string;
+    midBanner2Img: string;
+    midBanner3Img: string;
 }

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSampleProps.types.ts

@@ -1,4 +1,8 @@
 export interface MidBannerRatafiaSampleProps {
   image: React.ReactNode
   isEsignatureImage?: boolean
+  isAbout?: boolean
+  midBanner1Img: string
+  midBanner2Img: string
+  midBanner3Img: string
 }

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

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

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
+import { MobileSearchBarStyled } from './MobileSearchBar.styled';
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
+import { useSearchFunction } from '../../../hooks/useSearchFunction';
+export const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
+    const { results, searchFunction } = useSearchFunction({
+        products,
+        searchBarTexts,
+        routes,
+        handleResultClick
+    });
+    const searchInputRef = useRef(null);
+    const searchBarContainerRef = useRef(null);
+    const isResultsVisible = Array.isArray(results) && results.length > 0;
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                searchFunction('');
+            }
+        };
+        const handleClickOutside = (event) => {
+            if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
+                searchFunction('');
+            }
+        };
+        if (isResultsVisible) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isResultsVisible, searchFunction]);
+    return (_jsx(MobileSearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'mobile-and-tablet-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
+};

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

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

@@ -0,0 +1,17 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const MobileSearchBarStyled = styled.div `
+  display: block;
+  width: 100%;
+
+  @media ${device.tablets} {
+    display: none;
+  }
+
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+    }
+  }
+`;

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

@@ -0,0 +1,18 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const MobileSearchBarStyled = styled.div`
+  display: block;
+  width: 100%;
+
+  @media ${device.tablets} {
+    display: none;
+  }
+
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+    }
+  }
+`

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react'
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { MobileSearchBarStyled } from './MobileSearchBar.styled'
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import { useSearchFunction } from '../../../hooks/useSearchFunction'
+
+export const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
+  const { results, searchFunction } = useSearchFunction({
+    products,
+    searchBarTexts,
+    routes,
+    handleResultClick
+  })
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchBarContainerRef = useRef<HTMLDivElement>(null)
+  const isResultsVisible = Array.isArray(results) && results.length > 0
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        searchFunction('')
+      }
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
+        searchFunction('')
+      }
+    }
+
+    if (isResultsVisible) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isResultsVisible, searchFunction])
+
+  return (
+    <MobileSearchBarStyled ref={searchBarContainerRef}>
+      <DropdownInput
+        ref={searchInputRef}
+        name='mobile-and-tablet-search'
+        className='search'
+        placeholder={searchBarTexts.placeholder}
+        icon={<SearchIcon />}
+        onChange={searchFunction}
+        results={results}
+      />
+    </MobileSearchBarStyled>
+  )
+}

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.d.ts

@@ -0,0 +1,37 @@
+export interface Products {
+    categoryUrl?: string;
+    isFeatured?: boolean;
+    popularOrder: number;
+    jumboTitle: string;
+    linkText: string;
+    slug: string;
+    footerPopularDocument?: boolean;
+    logoImgBig?: string;
+    logoImgSmall?: string;
+    categoryProduct?: {
+        name: string;
+        icon: string;
+    };
+}
+export interface StrapiSearchBar {
+    title: string;
+    placeholder: string;
+}
+export interface Routes {
+    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
+    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
+    LEGAL_DOCUMENTS: string;
+    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
+    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
+    LOGIN: string;
+    MY_DOCUMENTS: string;
+    REGISTER: string;
+    RATAFIA_LOGIN: string;
+    SIGN_EDITOR: string;
+}
+export interface SearchBarProps {
+    products: Products[];
+    searchBarTexts: StrapiSearchBar;
+    routes: Routes;
+    handleResultClick: (product: string, link: string) => void;
+}

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.js

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

package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.ts

@@ -0,0 +1,40 @@
+export interface Products {
+  categoryUrl?: string
+  isFeatured?: boolean
+  popularOrder: number
+  jumboTitle: string
+  linkText: string
+  slug: string
+  footerPopularDocument?: boolean
+  logoImgBig?: string
+  logoImgSmall?: string
+  categoryProduct?: {
+    name: string
+    icon: string
+  }
+}
+
+export interface StrapiSearchBar {
+  title: string
+  placeholder: string
+}
+
+export interface Routes {
+  CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
+  CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
+  LEGAL_DOCUMENTS: string
+  LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
+  LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
+  LOGIN: string
+  MY_DOCUMENTS: string
+  REGISTER: string
+  RATAFIA_LOGIN: string
+  SIGN_EDITOR: string
+}
+
+export interface SearchBarProps {
+  products: Products[]
+  searchBarTexts: StrapiSearchBar
+  routes: Routes
+  handleResultClick: (product: string, link: string) => void
+}

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

@@ -0,0 +1,2 @@
+export { MobileSearchBar } from './MobileSearchBar';
+export { type SearchBarProps } from './MobileSearchBarProps.types';

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

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

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

@@ -0,0 +1,2 @@
+export { MobileSearchBar } from './MobileSearchBar'
+export { type SearchBarProps } from './MobileSearchBarProps.types'

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

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

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

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC, useEffect } from 'react'
-import { MenuItems } from '../../atoms'
+import { MenuItemsDeprecated } from '../../atoms'
 import { type NavBarDropDownProps } from './NavBarDropDownProps.types'
 import { NavBarDropDownStyled } from './NavBarDropDown.styled'
 import { useIntersectionObserver } from '../../../hooks'
@@ -16,9 +16,10 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   hasBullets = true,
   initialActiveContent,
   setEnableScrollbarOnClose,
-  setIsOpen
+  setIsOpen,
+  isTestAB21644 = false
 }): React.ReactElement | null => {
-  const [ref, isIntersectingWithElement] = useIntersectionObserver({
+  const [ref, isIntersectingWithElement] = useIntersectionObserver<HTMLDivElement>({
     options: { threshold: 0.15 }
   })
 
@@ -87,7 +88,12 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
       {isOpen ? (
         <NavBarDropDownStyled className='navbar-drop-down__container'>
           <div className='navbar-drop-down__container__menu_items'>
-            <MenuItems list={list} hasBullets={hasBullets} initialActiveContent={initialActiveContent} />
+            <MenuItemsDeprecated
+              isTestAB21644={isTestAB21644}
+              list={list}
+              hasBullets={hasBullets}
+              initialActiveContent={initialActiveContent}
+            />
           </div>
           <div ref={ref} className='navbar-drop-down__container__shadow' onClick={closeMenu}></div>
         </NavBarDropDownStyled>

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDownProps.types.d.ts

@@ -10,5 +10,6 @@ export interface NavBarDropDownProps {
     setEnableScrollbarOnClose: React.Dispatch<React.SetStateAction<(() => void) | undefined>>;
     setIsOpen: (open: boolean) => void;
     list: List[];
+    isTestAB21644?: boolean;
 }
 export {};

package/dist/src/components/molecules/NavBarDropDown/NavBarDropDownProps.types.ts

@@ -10,4 +10,5 @@ export interface NavBarDropDownProps {
   setEnableScrollbarOnClose: React.Dispatch<React.SetStateAction<(() => void) | undefined>>
   setIsOpen: (open: boolean) => void
   list: List[]
+  isTestAB21644?: boolean
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type NavMobileContactBarProps } from './NavMobileContactBarProps.types';
+declare const NavMobileContactBar: React.FC<NavMobileContactBarProps>;
+export default NavMobileContactBar;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms/Button';
+import { NavMobileContactBarStyled } from './NavMobileContactBar.styled';
+const NavMobileContactBar = ({ phone, schedule }) => {
+    return (_jsxs(NavMobileContactBarStyled, { className: 'nav-mobile-contact-bar', children: [_jsx(Button, { centered: true, isExternal: true, link: `tel:${phone}`, gtmTag: 'clicked_phone_menu', givenClass: 'nav-mobile-contact-bar_phone e-button e-button--link e-button--primary-1 e-button--center', label: phone, dataQa: 'nav_mobile_contact_phone' }), schedule && _jsx("p", { className: 'nav-mobile-contact-bar_schedule', children: schedule })] }));
+};
+export default NavMobileContactBar;

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

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

@@ -0,0 +1,34 @@
+import phoneIconSvg from '../../../../images/svg/icon-web-24px.svg';
+import styled from 'styled-components';
+export const NavMobileContactBarStyled = styled.div `
+  display: flex;
+  flex-flow: column;
+  border-top: 1px solid get-color(neutral, neutral-4);
+  padding: 1.5rem 0;
+  margin: 0 1.5rem;
+
+  &:last-child {
+    border-top: none;
+    padding-top: 0px;
+  }
+
+  .nav-mobile-contact-bar_phone {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &:before {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background: url(${phoneIconSvg}) no-repeat center center / contain;
+      margin-right: 0.5rem;
+    }
+  }
+
+  .nav-mobile-contact-bar_schedule {
+    color: get-color(neutral, neutral-2);
+    text-align: center;
+    margin: 0.5rem auto;
+  }
+`;

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

@@ -0,0 +1,35 @@
+import phoneIconSvg from '../../../../images/svg/icon-web-24px.svg'
+import styled from 'styled-components'
+
+export const NavMobileContactBarStyled = styled.div`
+  display: flex;
+  flex-flow: column;
+  border-top: 1px solid get-color(neutral, neutral-4);
+  padding: 1.5rem 0;
+  margin: 0 1.5rem;
+
+  &:last-child {
+    border-top: none;
+    padding-top: 0px;
+  }
+
+  .nav-mobile-contact-bar_phone {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &:before {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background: url(${phoneIconSvg}) no-repeat center center / contain;
+      margin-right: 0.5rem;
+    }
+  }
+
+  .nav-mobile-contact-bar_schedule {
+    color: get-color(neutral, neutral-2);
+    text-align: center;
+    margin: 0.5rem auto;
+  }
+`

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

@@ -0,0 +1,23 @@
+import { Button } from '../../atoms/Button'
+import React from 'react'
+
+import { type NavMobileContactBarProps } from './NavMobileContactBarProps.types'
+import { NavMobileContactBarStyled } from './NavMobileContactBar.styled'
+const NavMobileContactBar: React.FC<NavMobileContactBarProps> = ({ phone, schedule }) => {
+  return (
+    <NavMobileContactBarStyled className='nav-mobile-contact-bar'>
+      <Button
+        centered
+        isExternal
+        link={`tel:${phone}`}
+        gtmTag='clicked_phone_menu'
+        givenClass='nav-mobile-contact-bar_phone e-button e-button--link e-button--primary-1 e-button--center'
+        label={phone}
+        dataQa={'nav_mobile_contact_phone'}
+      />
+      {schedule && <p className='nav-mobile-contact-bar_schedule'>{schedule}</p>}
+    </NavMobileContactBarStyled>
+  )
+}
+
+export default NavMobileContactBar