@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
-    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ image, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
+    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("div", { className: isCategoryProductPage ? 'image image-category' : 'image', children: image }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
 };
 export default Article;

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

@@ -14,11 +14,19 @@ export const ArticleStyled = styled.div `
   }
 
   .image {
-    object-fit: cover;
-    object-position: 25%;
     height: 13em;
     width: 100%;
 
+    .gatsby-image-wrapper {
+      height: 100%;
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: 25%;
+      }
+    }
+
     @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;

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

@@ -15,11 +15,19 @@ export const ArticleStyled = styled.div`
   }
 
   .image {
-    object-fit: cover;
-    object-position: 25%;
     height: 13em;
     width: 100%;
 
+    .gatsby-image-wrapper {
+      height: 100%;
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: 25%;
+      }
+    }
+
     @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;

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

@@ -6,15 +6,10 @@ import { type ArticleProps } from './ArticleProps.types'
 import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
+const Article: FC<ArticleProps> = ({ image, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
   return (
     <ArticleStyled className='article'>
-      <img
-        src={imageUrl}
-        className={isCategoryProductPage ? 'image image-category' : 'image'}
-        loading='lazy'
-        alt={title}
-      />
+      <div className={isCategoryProductPage ? 'image image-category' : 'image'}>{image}</div>
       <div className={isCategoryProductPage ? 'information information-category' : 'information'}>
         <a href={articleUrl} target='_blank'>
           <p className='title sans-serif --big'>{title} </p>

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -1,5 +1,5 @@
 export interface ArticleProps {
-    imageUrl: string;
+    image: React.ReactNode;
     title: string;
     articleUrl: string;
     summary: string;

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -1,5 +1,5 @@
 export interface ArticleProps {
-  imageUrl: string
+  image: React.ReactNode
   title: string
   articleUrl: string
   summary: string

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BenefitRatafiaCard } from '../../atoms';
+import { BenefitCard } from '../../atoms';
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
 const BenefitRatafiaCardList = ({ benefits = [] }) => {
     if (benefits.length === 0)
         return null;
-    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitCard, { ...benefit }, benefit.id))) }));
 };
 export default BenefitRatafiaCardList;

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { BenefitRatafiaCard } from '../../atoms'
+import { BenefitCard } from '../../atoms'
 import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
 
@@ -10,7 +10,7 @@ const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = []
   return (
     <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
       {benefits.map((benefit) => (
-        <BenefitRatafiaCard key={benefit.id} {...benefit} />
+        <BenefitCard key={benefit.id} {...benefit} />
       ))}
     </BenefitRatafiaCardListStyled>
   )

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.d.ts

@@ -1,4 +1,4 @@
-import { type BenefitRatafiaCardProps } from '../../atoms';
+import { type BenefitCardProps } from '../../atoms';
 export interface BenefitRatafiaCardListProps {
-    benefits: BenefitRatafiaCardProps[];
+    benefits: BenefitCardProps[];
 }

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.ts

@@ -1,5 +1,5 @@
-import { type BenefitRatafiaCardProps } from '../../atoms'
+import { type BenefitCardProps } from '../../atoms'
 
 export interface BenefitRatafiaCardListProps {
-  benefits: BenefitRatafiaCardProps[]
+  benefits: BenefitCardProps[]
 }

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

@@ -78,6 +78,13 @@ export const BoxFormStyled = styled.div `
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .e-button {
+      flex: 1;
+      text-wrap: nowrap;
+    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -91,8 +98,7 @@ export const BoxFormStyled = styled.div `
   }
 
   .box--form__footer__text {
-    margin-right: 5px;
-    width: 60%;
+    margin-right: 1rem;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;

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

@@ -79,6 +79,13 @@ export const BoxFormStyled = styled.div`
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .e-button {
+      flex: 1;
+      text-wrap: nowrap;
+    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -92,8 +99,7 @@ export const BoxFormStyled = styled.div`
   }
 
   .box--form__footer__text {
-    margin-right: 5px;
-    width: 60%;
+    margin-right: 1rem;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactInformation, PhoneButton } from './ContactInfo.styled';
+import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
+export const ContactInfo = ({ phoneNumber, schedule, languageSelector }) => (_jsxs(ContactInformation, { children: [Boolean(languageSelector) && _jsx("div", { className: 'language-selector-mobile-container', children: languageSelector }), _jsx("b", { className: 'sans-serif --extra-small --bold-weight site-phone', children: phoneNumber }), phoneNumber && (_jsxs(PhoneButton, { children: [_jsx(PhoneIcon, { fill: 'white', width: 20, height: 20 }), _jsx("span", { children: phoneNumber })] })), _jsx("span", { className: 'sans-serif --extra-small site-schedule', children: schedule })] }));

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

@@ -0,0 +1,2 @@
+export declare const ContactInformation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PhoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;

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

@@ -0,0 +1,49 @@
+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.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.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContactInfoBoxStyled } from './ContactInfoBox.styled';
+import { ContactInfoCard } from '../ContactInfoCard';
+export const ContactInfoBox = ({ items }) => {
+    return (_jsx(ContactInfoBoxStyled, { className: 'contact-info-box-container', children: items.map((item, index) => (_jsx(ContactInfoCard, { ...item }, index))) }));
+};

package/dist/src/components/{organisms/AboutUsContent/AboutUsContent.styled.d.ts → molecules/ContactInfoBox/ContactInfoBox.styled.d.ts}

@@ -1 +1 @@
-export declare const AboutUsContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactInfoBoxStyled: 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/ContactInfoBox/ContactInfoBox.styled.js

@@ -0,0 +1,23 @@
+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.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.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContactInfoBoxMobileStyled } from './ContactInfoBoxMobile.styled';
+import { ContactInfoCard } from '../ContactInfoCard';
+export const ContactInfoBoxMobile = ({ items }) => {
+    return (_jsx(ContactInfoBoxMobileStyled, { className: 'contact-info-box-container', children: items.map((item, index) => (_jsx(ContactInfoCard, { ...item }, index))) }));
+};

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

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

@@ -0,0 +1,23 @@
+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.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.d.ts

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

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

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

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

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

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

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