@npm_leadtech/legal-lib-components 7.15.0 → 7.16.1

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

@@ -0,0 +1,27 @@
+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;
+    }
+  }
+`

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/NavBarDropDown/NavBarDropDown.js

@@ -2,7 +2,7 @@ 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;
@@ -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, { 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'
@@ -87,7 +87,7 @@ 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 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/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

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

@@ -0,0 +1,4 @@
+export interface NavMobileContactBarProps {
+    phone: string;
+    schedule?: string;
+}

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

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

package/dist/src/components/molecules/NavMobileContactBar/NavMobileContactBarProps.types.ts

@@ -0,0 +1,4 @@
+export interface NavMobileContactBarProps {
+  phone: string
+  schedule?: string
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProductListMenuStyled } from './ProductListMenu.styled';
+export const ProductListMenu = ({ slug, linkText, categoryUrl, routes, setCookiePolicyFunc }) => {
+    return (_jsx(ProductListMenuStyled, { className: 'products__list__section__li', children: _jsx("a", { title: linkText, "data-qa": `${slug}_Document_List`, onClick: () => setCookiePolicyFunc, href: routes.CUSTOM_URL_FROM_TARGET_ADDRESS(categoryUrl ? `${categoryUrl}/${slug}` : slug), children: linkText }) }));
+};

package/dist/src/components/molecules/ProductListMenu/ProductListMenu.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/ProductListMenu/ProductListMenu.styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const ProductListMenuStyled = 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/ProductListMenu/ProductListMenu.styled.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const ProductListMenuStyled = 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/ProductListMenu/ProductListMenu.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { type ProductListMenuProps } from './ProductListMenuProps.types'
+import { ProductListMenuStyled } from './ProductListMenu.styled'
+
+export const ProductListMenu: React.FC<ProductListMenuProps> = ({
+  slug,
+  linkText,
+  categoryUrl,
+  routes,
+  setCookiePolicyFunc
+}) => {
+  return (
+    <ProductListMenuStyled className='products__list__section__li'>
+      <a
+        title={linkText}
+        data-qa={`${slug}_Document_List`}
+        onClick={() => setCookiePolicyFunc}
+        href={routes.CUSTOM_URL_FROM_TARGET_ADDRESS(categoryUrl ? `${categoryUrl}/${slug}` : slug)}
+      >
+        {linkText}
+      </a>
+    </ProductListMenuStyled>
+  )
+}

package/dist/src/components/molecules/ProductListMenu/ProductListMenuProps.types.d.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../sections/Header/HeaderProps.types';
+export interface ProductListMenuProps {
+    slug: string;
+    linkText: string;
+    categoryUrl?: string;
+    routes: Routes;
+    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
+}

package/dist/src/components/molecules/ProductListMenu/ProductListMenuProps.types.js

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

package/dist/src/components/molecules/ProductListMenu/ProductListMenuProps.types.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../sections/Header/HeaderProps.types'
+
+export interface ProductListMenuProps {
+  slug: string
+  linkText: string
+  categoryUrl?: string
+  routes: Routes
+  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
+import { useWindowSize } from '../../../hooks/useWindowSize';
+import { SearchBarStyled } from './SearchBar.styled';
+export const SearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
+    const [results, setResults] = useState([]);
+    const windowSize = useWindowSize();
+    const _placeholder = windowSize.width === null || windowSize.width >= 720 ? '' : searchBarTexts.placeholder;
+    const searchFunction = (text) => {
+        const searchTerm = text.toLowerCase();
+        const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm));
+        const results = productsFiltered
+            .map((item) => {
+            const product = item.linkText;
+            const preMatch = product.slice(0, product.toLowerCase().indexOf(searchTerm));
+            const match = product.slice(product.toLowerCase().indexOf(searchTerm), preMatch.length + searchTerm.length);
+            const postMatch = product.slice(product.toLowerCase().indexOf(searchTerm) + searchTerm.length, product.length);
+            const link = item.categoryUrl ? `${item.categoryUrl}/${item.slug}` : item.slug;
+            return (_jsx("li", { className: 'dropdown_input__item', children: _jsxs("a", { href: routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link), className: 'dropdown_input__link', onClick: (e) => {
+                        e.preventDefault();
+                        handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link));
+                    }, title: product, children: [preMatch, _jsx("strong", { className: 'dropdown_input__link__emphasis', children: match }), postMatch] }, item.linkText) }, searchBarTexts.title));
+        })
+            .slice(0, 9);
+        results.push(_jsx("li", { className: 'dropdown_input__item', children: _jsx("a", { className: 'dropdown_input__link--all', title: searchBarTexts.title, href: routes.LEGAL_DOCUMENTS, children: searchBarTexts.title }) }, searchBarTexts.title));
+        setResults(results);
+    };
+    return (_jsx(SearchBarStyled, { children: _jsx(DropdownInput, { name: 'search', className: 'search', placeholder: _placeholder, icon: _jsx(SearchIcon, {}), onChange: (text) => {
+                searchFunction(text);
+            }, results: results }) }));
+};

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

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

@@ -0,0 +1,62 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const SearchBarStyled = styled.div `
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        width: 10rem;
+        margin: 0 1.5rem 0 0;
+      }
+
+      @media ${device['desktop']} {
+        width: 14rem;
+      }
+
+      .dropdown_input__results {
+        transition: all 0.25s;
+        min-width: 100%;
+        width: max-content;
+      }
+
+      .dropdown_input__link {
+        color: var(--neutral-neutral-3);
+        animation: newLine 0.5s;
+
+        &:hover {
+          color: var(--others-black);
+        }
+
+        &__emphasis {
+          font-style: normal;
+          font-weight: normal;
+          color: var(--others-black);
+        }
+
+        &--all {
+          font-weight: bold;
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes newLine {
+    0% {
+      opacity: 0;
+      line-height: 0rem;
+    }
+
+    100% {
+      opacity: 1;
+      line-height: 1.5rem;
+    }
+  }
+`;

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

@@ -0,0 +1,63 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const SearchBarStyled = styled.div`
+  .dropdown_input {
+    .search {
+      width: calc(100% - 3rem);
+      margin: 0 1.5rem;
+
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        width: 10rem;
+        margin: 0 1.5rem 0 0;
+      }
+
+      @media ${device['desktop']} {
+        width: 14rem;
+      }
+
+      .dropdown_input__results {
+        transition: all 0.25s;
+        min-width: 100%;
+        width: max-content;
+      }
+
+      .dropdown_input__link {
+        color: var(--neutral-neutral-3);
+        animation: newLine 0.5s;
+
+        &:hover {
+          color: var(--others-black);
+        }
+
+        &__emphasis {
+          font-style: normal;
+          font-weight: normal;
+          color: var(--others-black);
+        }
+
+        &--all {
+          font-weight: bold;
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes newLine {
+    0% {
+      opacity: 0;
+      line-height: 0rem;
+    }
+
+    100% {
+      opacity: 1;
+      line-height: 1.5rem;
+    }
+  }
+`

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

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+
+import { type SearchBarProps } from './SearchBarProps.types'
+import { SearchBarStyled } from './SearchBar.styled'
+
+export const SearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
+  const [results, setResults] = useState<React.JSX.Element[]>([])
+
+  const windowSize = useWindowSize()
+  const _placeholder = windowSize.width === null || windowSize.width >= 720 ? '' : searchBarTexts.placeholder
+  const searchFunction = (text: string): void => {
+    const searchTerm = text.toLowerCase()
+
+    const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm))
+    const results = productsFiltered
+      .map((item) => {
+        const product = item.linkText
+        const preMatch = product.slice(0, product.toLowerCase().indexOf(searchTerm))
+        const match = product.slice(product.toLowerCase().indexOf(searchTerm), preMatch.length + searchTerm.length)
+        const postMatch = product.slice(product.toLowerCase().indexOf(searchTerm) + searchTerm.length, product.length)
+        const link = item.categoryUrl ? `${item.categoryUrl}/${item.slug}` : item.slug
+        return (
+          <li key={searchBarTexts.title} className='dropdown_input__item'>
+            <a
+              href={routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link)}
+              className='dropdown_input__link'
+              key={item.linkText}
+              onClick={(e) => {
+                e.preventDefault()
+                handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link))
+              }}
+              title={product}
+            >
+              {preMatch}
+              <strong className='dropdown_input__link__emphasis'>{match}</strong>
+              {postMatch}
+            </a>
+          </li>
+        )
+      })
+      .slice(0, 9)
+
+    results.push(
+      <li key={searchBarTexts.title} className='dropdown_input__item'>
+        <a className='dropdown_input__link--all' title={searchBarTexts.title} href={routes.LEGAL_DOCUMENTS}>
+          {searchBarTexts.title}
+        </a>
+      </li>
+    )
+
+    setResults(results)
+  }
+
+  return (
+    <SearchBarStyled>
+      <DropdownInput
+        name='search'
+        className='search'
+        placeholder={_placeholder}
+        icon={<SearchIcon />}
+        onChange={(text: string) => {
+          searchFunction(text)
+        }}
+        results={results}
+      />
+    </SearchBarStyled>
+  )
+}

package/dist/src/components/molecules/SearchBar/SearchBarProps.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/SearchBar/SearchBarProps.types.js

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