@npm_leadtech/legal-lib-components 7.19.2 → 7.20.0

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   setEnableScrollbarOnClose,
   setIsOpen
 }): React.ReactElement | null => {
-  const [ref, isIntersectingWithElement] = useIntersectionObserver({
+  const [ref, isIntersectingWithElement] = useIntersectionObserver<HTMLDivElement>({
     options: { threshold: 0.15 }
   })
 

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

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SocialList } from './SocialLinks.styled';
+import { useIntersectionObserver } from '../../../hooks';
 export const SocialLinks = ({ links }) => {
-    return (_jsx(SocialList, { children: links.map((social) => (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: social.iconSrc, alt: social.alt, width: '20', height: '20' }) }) }, social.url))) }));
+    return (_jsx(SocialList, { children: links.map((social) => {
+            const [ref, isIntersecting] = useIntersectionObserver({});
+            return (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { ref: ref, src: isIntersecting ? social.iconSrc : '', alt: social.alt, width: '20', height: '20' }) }) }, social.url));
+        }) }));
 };

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

@@ -1,17 +1,21 @@
 import React from 'react'
 import { SocialLinksProps } from './SocialLinksProps.types'
 import { SocialList } from './SocialLinks.styled'
+import { useIntersectionObserver } from '../../../hooks'
 
 export const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
   return (
     <SocialList>
-      {links.map((social) => (
-        <li key={social.url}>
-          <a href={social.url} rel='noopener noreferrer' target='_blank'>
-            <img src={social.iconSrc} alt={social.alt} width='20' height='20' />
-          </a>
-        </li>
-      ))}
+      {links.map((social) => {
+        const [ref, isIntersecting] = useIntersectionObserver<HTMLImageElement>({})
+        return (
+          <li key={social.url}>
+            <a href={social.url} rel='noopener noreferrer' target='_blank'>
+              <img ref={ref} src={isIntersecting ? social.iconSrc : ''} alt={social.alt} width='20' height='20' />
+            </a>
+          </li>
+        )
+      })}
     </SocialList>
   )
 }

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -55,6 +55,10 @@
     font-weight: bold;
   }
 
+  .e-text__inner {
+    grid-row: 1;
+  }
+
   .form-group__label-icon {
     color: var(--neutral-neutral-1);
     font-weight: bold;
@@ -150,6 +154,8 @@
 
   &--has-prefix {
     width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
 
     @include portrait-tablets {
       width: 50%;
@@ -157,14 +163,23 @@
 
     .has-currency-prefix {
       padding-left: 2rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
 
     .has-currency-suffix {
       padding-right: 2rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
 
     .has-percent-suffix {
       padding-left: 0.75rem;
+      grid-column: 1;
+      grid-row: 2;
+      align-self: center;
     }
   }
 
@@ -185,27 +200,28 @@
   }
 
   .input-icon-currency-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    margin-left: calc(100% - 30px);
+    width: fit-content;
   }
 
   .input-icon-currency-prefix {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    z-index: 1;
+    padding-left: 0.87rem;
+    width: fit-content;
   }
 
   .input-icon-percent-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    margin-left: calc(100% - 30px);
+    width: fit-content;
   }
 
   .formgroup--input__button {

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -124,7 +124,7 @@ export const MaskInput: Story = {
   }
 }
 
-export const WithPrefixEuro: Story = {
+export const WithSufixEuro: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -146,7 +146,7 @@ export const WithPrefixNoEuro: Story = {
   }
 }
 
-export const WithPrefixPercent: Story = {
+export const WithSufixPercent: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -156,3 +156,14 @@ export const WithPrefixPercent: Story = {
     country: 'US'
   }
 }
+
+export const WithPrefixPercent: Story = {
+  args: {
+    name: 'prefix',
+    label: 'Price:',
+    value: '20.30',
+    type: 'text',
+    prefix: 'currency',
+    country: 'CA'
+  }
+}

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';
@@ -54,5 +56,3 @@ export * from './TypeModulesList';
 export * from './UploadRatafiaZone';
 export * from './WarningBox';
 export * from './InfoBarFooter';
-export * from './HelpSection';
-export * from './HelpPanelList';

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
+export * from './ContactInfoBox';
+export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';
@@ -54,5 +56,3 @@ export * from './TypeModulesList';
 export * from './UploadRatafiaZone';
 export * from './WarningBox';
 export * from './InfoBarFooter';
-export * from './HelpSection';
-export * from './HelpPanelList';

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

@@ -12,6 +12,8 @@ export * from './Breadcrumb'
 export * from './ContactBox'
 export * from './ContactCardList'
 export * from './ContactInfo'
+export * from './ContactInfoBox'
+export * from './ContactInfoBoxMobile'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './DocumentListMenuSection'
@@ -54,5 +56,3 @@ export * from './TypeModulesList'
 export * from './UploadRatafiaZone'
 export * from './WarningBox'
 export * from './InfoBarFooter'
-export * from './HelpSection'
-export * from './HelpPanelList'

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
+import { ContactInfoBox } from '../../molecules/ContactInfoBox';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
+export const ContactJumbotron = ({ faqsTitle, visitFaqPageLabel, children, isJonSnow = false, items }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [_jsx(ContactInfoBox, { items: items }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' }))] }));
 };

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.js

@@ -35,7 +35,6 @@ export const ContactJumbotronStyled = styled.article `
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.styled.ts

@@ -36,7 +36,6 @@ export const ContactJumbotronStyled = styled.article`
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
-    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotron.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
 
-import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
+import { ContactInfoBox } from '../../molecules/ContactInfoBox'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
 import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
-  phoneBoxDesktopProps,
-  emailContactBoxProps,
   faqsTitle,
   visitFaqPageLabel,
   children,
-  isJonSnow = false
+  isJonSnow = false,
+  items
 }) => {
   return (
     <ContactJumbotronStyled>
-      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
+      <ContactInfoBox items={items} />
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
       {!isJonSnow && (
@@ -27,7 +26,6 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
           dataQa={'visitFaq'}
         />
       )}
-      <EmailContactBox {...emailContactBoxProps} />
     </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -1,10 +1,9 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard';
 import type React from 'react';
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules';
 export interface ContactJumbotronProps {
-    phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
-    emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
     visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
+    items: ContactInfoCardProps[];
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -1,12 +1,10 @@
+import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard'
 import type React from 'react'
 
-import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
-
 export interface ContactJumbotronProps {
-  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
-  emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
   visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
+  items: ContactInfoCardProps[]
 }

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

@@ -32,6 +32,3 @@ export * from './TopFooter';
 export * from './TryOurFreeLegalBlogsContent';
 export * from './Wizard';
 export * from './HowWeHelp';
-export * from './MobileMenu';
-export * from './MobilePanel';
-export * from './DesktopMenu';

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

@@ -32,6 +32,3 @@ export * from './TopFooter';
 export * from './TryOurFreeLegalBlogsContent';
 export * from './Wizard';
 export * from './HowWeHelp';
-export * from './MobileMenu';
-export * from './MobilePanel';
-export * from './DesktopMenu';

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

@@ -32,6 +32,3 @@ export * from './TopFooter'
 export * from './TryOurFreeLegalBlogsContent'
 export * from './Wizard'
 export * from './HowWeHelp'
-export * from './MobileMenu'
-export * from './MobilePanel'
-export * from './DesktopMenu'

package/dist/src/components/pages/ContactUsPage/ContactUsPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections';
-import { PhoneContactBoxMobile } from '../../molecules';
-export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, phoneContactBox, contactProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(PhoneContactBoxMobile, { ...phoneContactBox }), _jsx(ContactSection, { ...contactProps })] }));
+import { ContactInfoBoxMobile } from '../../molecules';
+export const ContactUsPage = ({ jumbotronSimplifiedSectionProps, contactInfoBoxMobileProps, contactProps, isJonSnow = false }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(JumbotronSimplifiedSection, { ...jumbotronSimplifiedSectionProps }), !isJonSnow && _jsx(ContactInfoBoxMobile, { ...contactInfoBoxMobileProps }), _jsx(ContactSection, { ...contactProps })] }));
 };

package/dist/src/components/pages/ContactUsPage/ContactUsPage.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 
 import { ContactSection, JumbotronSimplifiedSection } from '../../sections'
+import { ContactInfoBoxMobile } from '../../molecules'
 import { type ContactUsPageProps } from './ContactUsPageProps'
-import { PhoneContactBoxMobile } from '../../molecules'
 
 export const ContactUsPage: React.FC<ContactUsPageProps> = ({
   jumbotronSimplifiedSectionProps,
-  phoneContactBox,
+  contactInfoBoxMobileProps,
   contactProps,
   isJonSnow = false
 }) => {
   return (
     <>
       <JumbotronSimplifiedSection {...jumbotronSimplifiedSectionProps} />
-      {!isJonSnow && <PhoneContactBoxMobile {...phoneContactBox} />}
+      {!isJonSnow && <ContactInfoBoxMobile {...contactInfoBoxMobileProps} />}
       <ContactSection {...contactProps} />
     </>
   )

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.d.ts

@@ -1,8 +1,8 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections';
-import { type PhoneContactBoxMobileProps } from '../../molecules';
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types';
 export interface ContactUsPageProps {
     jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps;
-    phoneContactBox: PhoneContactBoxMobileProps;
+    contactInfoBoxMobileProps: ContactInfoBoxMobileProps;
     contactProps: ContactSectionProps;
     isJonSnow?: boolean;
 }

package/dist/src/components/pages/ContactUsPage/ContactUsPageProps.ts

@@ -1,9 +1,9 @@
 import { type ContactSectionProps, type JumbotronSimplifiedSectionProps } from '../../sections'
-import { type PhoneContactBoxMobileProps } from '../../molecules'
+import { ContactInfoBoxMobileProps } from 'src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types'
 
 export interface ContactUsPageProps {
   jumbotronSimplifiedSectionProps: JumbotronSimplifiedSectionProps
-  phoneContactBox: PhoneContactBoxMobileProps
+  contactInfoBoxMobileProps: ContactInfoBoxMobileProps
   contactProps: ContactSectionProps
   isJonSnow?: boolean
 }

package/dist/src/components/sections/ContactSection/ContactSection.styled.js

@@ -30,10 +30,12 @@ export const ContactSectionStyled = styled.section `
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

package/dist/src/components/sections/ContactSection/ContactSection.styled.ts

@@ -31,10 +31,12 @@ export const ContactSectionStyled = styled.section`
   .contact-left-container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    margin-bottom: 2.5rem;
 
     @media ${device['portrait-tablets']} {
       padding-left: 0;
       padding-right: 0;
+      margin-bottom: 1.5rem;
       width: 45%;
     }
   }

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

@@ -28,4 +28,3 @@ export * from './LearnMoreSection';
 export * from './CardStorySection';
 export * from './Header';
 export * from './Footer';
-export * from './AppHeader';

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

@@ -28,4 +28,3 @@ export * from './LearnMoreSection';
 export * from './CardStorySection';
 export * from './Header';
 export * from './Footer';
-export * from './AppHeader';

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

@@ -28,4 +28,3 @@ export * from './LearnMoreSection'
 export * from './CardStorySection'
 export * from './Header'
 export * from './Footer'
-export * from './AppHeader'

package/dist/src/hooks/useIntersectionObserver.d.ts

@@ -1,5 +1,7 @@
-import { type LegacyRef } from 'react';
-export declare function useIntersectionObserver({ options, defaultIntersecting }: {
-    options?: {} | undefined;
-    defaultIntersecting?: boolean | undefined;
-}): [LegacyRef<HTMLDivElement> | undefined, boolean];
+import { RefObject } from 'react';
+interface UseIntersectionObserverParams {
+    options?: IntersectionObserverInit;
+    defaultIntersecting?: boolean;
+}
+export declare function useIntersectionObserver<T extends HTMLElement>({ options, defaultIntersecting }?: UseIntersectionObserverParams): [RefObject<T | null>, boolean];
+export {};