@npm_leadtech/legal-lib-components 7.85.1 → 7.85.3

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const ContactInformation = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: var(--neutral-neutral-6);
+  @media (max-width: 575px) {
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .language-selector-mobile-container {
+    background-color: var(--primary-main-dark-1);
+    margin-bottom: 1rem;
+    width: 100%;
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+  .site-phone {
+    @media (max-width: 575px) {
+      display: none;
+    }
+  }
+  .site-schedule {
+    @media (max-width: 575px) {
+      font-size: 1rem;
+      margin-top: 1rem;
+    }
+  }
+`
+
+export const PhoneButton = styled.a`
+  @media (min-width: 575px) {
+    display: none;
+  }
+  width: 100%;
+  background-color: var(--primary-main);
+  padding: 0.7rem 1rem 0.7rem 1rem;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  span {
+    color: var(--neutral-neutral-6);
+    font-weight: 700;
+  }
+`

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

@@ -0,0 +1,18 @@
+import { ContactInformation, PhoneButton } from './ContactInfo.styled'
+import { ContactInfoProps } from './ContactInfoProps.types'
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
+import React from 'react'
+
+export const ContactInfo: React.FC<ContactInfoProps> = ({ phoneNumber, schedule, languageSelector }) => (
+  <ContactInformation>
+    {Boolean(languageSelector) && <div className='language-selector-mobile-container'>{languageSelector}</div>}
+    <b className='sans-serif --extra-small --bold-weight site-phone'>{phoneNumber}</b>
+    {phoneNumber && (
+      <PhoneButton>
+        <PhoneIcon fill='white' width={20} height={20} />
+        <span>{phoneNumber}</span>
+      </PhoneButton>
+    )}
+    <span className='sans-serif --extra-small site-schedule'>{schedule}</span>
+  </ContactInformation>
+)

package/dist/src/components/molecules/ContactInfo/ContactInfoProps.types.ts

@@ -0,0 +1,5 @@
+export interface ContactInfoProps {
+  phoneNumber: string
+  schedule: string
+  languageSelector?: React.ReactNode
+}

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

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

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

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ContactInfoBoxStyled = styled.div`
+  display: none;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+    flex-direction: column;
+  }
+`

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { type ContactInfoBoxProps } from './ContactInfoBoxProps.types'
+import { ContactInfoBoxStyled } from './ContactInfoBox.styled'
+import { ContactInfoCard } from '../ContactInfoCard'
+
+export const ContactInfoBox: React.FC<ContactInfoBoxProps> = ({ items }) => {
+  return (
+    <ContactInfoBoxStyled className='contact-info-box-container'>
+      {items.map((item, index) => (
+        <ContactInfoCard key={index} {...item} />
+      ))}
+    </ContactInfoBoxStyled>
+  )
+}

package/dist/src/components/molecules/ContactInfoBox/ContactInfoBoxProps.types.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard'
+export interface ContactInfoBoxProps {
+  items: ContactInfoCardProps[]
+}

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

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

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

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ContactInfoBoxMobileStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+`

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { type ContactInfoBoxMobileProps } from './ContactInfoBoxMobileProps.types'
+import { ContactInfoBoxMobileStyled } from './ContactInfoBoxMobile.styled'
+import { ContactInfoCard } from '../ContactInfoCard'
+
+export const ContactInfoBoxMobile: React.FC<ContactInfoBoxMobileProps> = ({ items }) => {
+  return (
+    <ContactInfoBoxMobileStyled className='contact-info-box-container'>
+      {items.map((item, index) => (
+        <ContactInfoCard key={index} {...item} />
+      ))}
+    </ContactInfoBoxMobileStyled>
+  )
+}

package/dist/src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard'
+export interface ContactInfoBoxMobileProps {
+  items: ContactInfoCardProps[]
+}

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

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

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const ContactInfoCardStyled = styled.div`
+  width: 100%;
+  background-color: var(--neutral-neutral-6);
+  border-radius: var(--s-border-radius);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+
+  &.phone-mobile {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    .phone-mobile-contact {
+      &-button {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+        width: 100%;
+
+        &:before {
+          content: '';
+          width: 20px;
+          height: 20px;
+          background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iZXA3dHIycDdyYSIgZD0iTTIwLjAxIDE1LjM4Yy0xLjIzIDAtMi40Mi0uMi0zLjUzLS41Ni0uMzUtLjEyLS43NC0uMDMtMS4wMS4yNGwtMS41NyAxLjk3Yy0yLjgzLTEuMzUtNS40OC0zLjktNi44OS02LjgzbDEuOTUtMS42NmMuMjctLjI4LjM1LS42Ny4yNC0xLjAyLS4zNy0xLjExLS41Ni0yLjMtLjU2LTMuNTMgMC0uNTQtLjQ1LS45OS0uOTktLjk5SDQuMTlDMy42NSAzIDMgMy4yNCAzIDMuOTkgMyAxMy4yOCAxMC43MyAyMSAyMC4wMSAyMWMuNzEgMCAuOTktLjYzLjk5LTEuMTh2LTMuNDVjMC0uNTQtLjQ1LS45OS0uOTktLjk5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc2LjAwMDAwMCwgLTMxNC4wMDAwMDApIHRyYW5zbGF0ZSgzMjguMDAwMDAwLCAyMDUuMDAwMDAwKSB0cmFuc2xhdGUoMzIuMDAwMDAwLCA5MC4wMDAwMDApIHRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSI3dHZidm9pbXpiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2VwN3RyMnA3cmEiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBjbGFzcz0iaWNvbi13ZWItMjQtcCIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCM3dHZidm9pbXpiKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+          margin-right: 0.5rem;
+        }
+      }
+
+      &-text {
+        color: var(--neutral-neutral-2);
+        text-align: center;
+        margin: 0 0 2rem;
+      }
+    }
+  }
+
+  .info-card-wrapper {
+    display: flex;
+  }
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  .info-icon {
+    margin-top: 0.1rem;
+    margin-right: 0.5rem;
+
+    path {
+      fill: var(--primary-main-dark-1);
+    }
+  }
+
+  .title {
+    color: var(--primary-main-dark-1);
+    font-size: 1rem;
+    font-weight: bold;
+
+    &.email {
+      text-decoration: underline;
+    }
+
+    a {
+      color: var(--primary-main-dark-1);
+    }
+  }
+
+  .text {
+    font-size: 0.875rem;
+    color: var(--neutral-neutral-2);
+  }
+`

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

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { Button } from '../../atoms'
+
+import { ContactInfoCardProps } from './ContactInfoCardProps'
+import { ContactInfoCardStyled } from './ContactInfoCard.styled'
+
+import { InfoLocationSvg } from '../../../../images/componentsSvg/InfoLocationSvg'
+import { InfoMailSvg } from '../../../../images/componentsSvg/InfoMailSvg'
+import { InfoPhoneSvg } from '../../../../images/componentsSvg/InfoPhoneSvg'
+
+const iconMap = {
+  email: <InfoMailSvg />,
+  phone: <InfoPhoneSvg />,
+  location: <InfoLocationSvg />
+}
+
+export const ContactInfoCard: React.FC<ContactInfoCardProps> = ({ type, isMobile = false, title, text }) => {
+  if (type === 'phone' && isMobile) {
+    return (
+      <ContactInfoCardStyled className='contact-info-card phone-mobile'>
+        <Button
+          key={title}
+          centered
+          isExternal
+          link={`tel:${title}`}
+          gtmTag={'clicked_phone_contactus'}
+          givenClass='phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center'
+          label={title ?? ''}
+          dataQa={'phone_contact_box'}
+        />
+        <p className='text'>{text}</p>
+      </ContactInfoCardStyled>
+    )
+  } else {
+    return (
+      <ContactInfoCardStyled className='contact-info-card'>
+        <div className='info-card-wrapper'>
+          <div className='info-icon'>{iconMap[type]}</div>
+          <div className='content'>
+            {title && (
+              <p className={`title${type === 'email' ? ' email' : ''}`}>
+                {type === 'email' ? (
+                  <a href={`mailto:${title}`}>{title}</a>
+                ) : type === 'phone' ? (
+                  <a href={`tel:${title}`}>{title}</a>
+                ) : (
+                  title
+                )}
+              </p>
+            )}
+            <p className='text'>{text}</p>
+          </div>
+        </div>
+      </ContactInfoCardStyled>
+    )
+  }
+}

package/dist/src/components/molecules/ContactInfoCard/ContactInfoCardProps.ts

@@ -0,0 +1,8 @@
+export type ContactInfoType = 'phone' | 'email' | 'location'
+
+export interface ContactInfoCardProps {
+  type: ContactInfoType
+  isMobile?: boolean
+  title?: string
+  text: string
+}

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

@@ -0,0 +1,2 @@
+export * from './ContactInfoCard'
+export * from './ContactInfoCardProps'

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

@@ -0,0 +1,49 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const DesktopSearchBarStyled = styled.div`
+  display: none;
+
+  @media ${device.tablets} {
+    display: block;
+    position: absolute;
+    top: 75px;
+    left: 0;
+    z-index: 10000;
+    width: 400px;
+    max-width: 90vw;
+    background: transparent;
+
+    .modal_searchbar__content {
+      background-color: var(--others-white);
+      border-radius: 8px;
+      width: 300px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+      @media ${device['laptop']} {
+        padding: 0;
+        width: 100%;
+      }
+    }
+
+    .modal_searchbar__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .modal_searchbar__title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: var(--others-black);
+    }
+
+    .dropdown_input {
+      .search {
+        width: 100%;
+        margin: 0;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react'
+import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
+import { DesktopSearchBarStyled } from './DesktopSearchBar.styled'
+import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
+import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
+import { useSearchFunction } from '../../../hooks/useSearchFunction'
+
+interface DesktopSearchBarProps extends SearchBarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
+  products,
+  searchBarTexts,
+  routes,
+  handleResultClick,
+  isOpen,
+  onClose
+}) => {
+  const { results, searchFunction } = useSearchFunction({
+    products,
+    searchBarTexts,
+    routes,
+    handleResultClick,
+    onClose
+  })
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const searchBarContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose()
+      }
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.addEventListener('mousedown', handleClickOutside)
+      if (searchInputRef.current) {
+        searchInputRef.current.focus()
+      }
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <DesktopSearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
+      <div className='modal_searchbar__content'>
+        <DropdownInput
+          ref={searchInputRef}
+          name='desktop-search'
+          className='search'
+          placeholder={searchBarTexts.placeholder}
+          icon={<CloseIcon />}
+          onChange={searchFunction}
+          results={results}
+          onClose={onClose}
+        />
+      </div>
+    </DesktopSearchBarStyled>
+  )
+}

package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.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 DesktopSearchBarProps {
+  products: Products[]
+  searchBarTexts: StrapiSearchBar
+  routes: Routes
+  handleResultClick: (product: string, link: string) => void
+}

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

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

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.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.ts

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

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

@@ -4,12 +4,11 @@ import styled from 'styled-components'
 export const ExpertCardListStyled = styled.div`
   display: flex;
   flex-flow: column;
-  gap: 0 2rem;
+  gap: 2rem;
   justify-content: center;
-  margin: 2rem 0 3rem 0;
+  margin: 2rem 0 0 0;
 
   @media ${device['landscape-tablets']} {
     flex-flow: row wrap;
-    gap: 5rem 2rem;
   }
 `

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

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+export const FooterMenuStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  color: var(--neutral-neutral-6);
+`
+
+export const FooterMenuTitle = styled.p`
+  color: var(--primary-main-light-4);
+`
+
+export const FooterMenuList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+`
+
+export const FooterStyledLink = styled.a`
+  color: var(--neutral-neutral-6);
+  text-decoration: none;
+
+  &.ai-link::after,
+  &.ki-link::after {
+    color: var(--neutral-neutral-1);
+    font-weight: 600;
+    font-size: 0.625rem;
+    padding: 4px;
+    margin-left: 4px;
+    border-radius: 4px;
+    background-color: var(--secondary-main-light-3);
+    display: inline-block;
+    line-height: 1;
+  }
+
+  &.ai-link.lowercase::after {
+    content: 'Ai';
+  }
+
+  &.ai-link.uppercase::after {
+    content: 'AI';
+  }
+
+  &.ki-link::after {
+    content: 'KI';
+  }
+`

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

@@ -0,0 +1,22 @@
+import { FooterMenuList, FooterMenuStyled, FooterMenuTitle, FooterStyledLink } from './FooterMenu.styled'
+import { FooterMenuProps } from './FooterMenuProps.types'
+import React from 'react'
+
+export const FooterMenu: React.FC<FooterMenuProps> = ({ title, links }) => (
+  <FooterMenuStyled>
+    <FooterMenuTitle className='sans-serif --small --bold-weight'>{title}</FooterMenuTitle>
+    <FooterMenuList>
+      {links.map((link) => (
+        <li key={link.url}>
+          <FooterStyledLink
+            href={link.url}
+            className={`sans-serif --extra-small ${link.customClass ?? ''}`}
+            data-qa={link.dataQa}
+          >
+            {link.name}
+          </FooterStyledLink>
+        </li>
+      ))}
+    </FooterMenuList>
+  </FooterMenuStyled>
+)