@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpertCardList } from '../../molecules';
 import { ExpertsSectionStyled } from './ExpertsSection.styled';
-const ExpertsSection = ({ title, contentExpertCardList }) => {
+const ExpertsSection = ({ title, description, contentExpertCardList }) => {
     if (contentExpertCardList.contentExpertCard.length === 0) {
         return null;
     }
-    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
+    return (_jsxs(ExpertsSectionStyled, { className: 'experts-section', children: [_jsx("h2", { className: 'experts-section__title', children: title }), _jsx("div", { className: 'experts-section__description', children: description }), _jsx(ExpertCardList, { contentExpertCard: contentExpertCardList.contentExpertCard })] }));
 };
 export default ExpertsSection;

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

@@ -4,13 +4,19 @@ export const ExpertsSectionStyled = styled.div `
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--neutral-neutral-6);
+  background-color: var(--primary-main-light-6);
+  padding: 0 1.5rem 2rem 1.5rem;
+
+  @media ${device['landscape-tablets']} {
+    padding: 0 1.5rem 3rem 1.5rem;
+  }
 
   .experts-section {
     &__title {
-      font-family: var(--font-serif);
-      font-size: 32px;
-      font-weight: 400;
+      font-family: var(--font-sans);
+      font-size: 1.75rem;
+      color: var(--neutral-neutral-1);
+      font-weight: 700;
       line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
@@ -22,5 +28,9 @@ export const ExpertsSectionStyled = styled.div `
         width: 100%;
       }
     }
+
+    &__description {
+      text-align: center;
+    }
   }
 `;

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

@@ -5,13 +5,19 @@ export const ExpertsSectionStyled = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--neutral-neutral-6);
+  background-color: var(--primary-main-light-6);
+  padding: 0 1.5rem 2rem 1.5rem;
+
+  @media ${device['landscape-tablets']} {
+    padding: 0 1.5rem 3rem 1.5rem;
+  }
 
   .experts-section {
     &__title {
-      font-family: var(--font-serif);
-      font-size: 32px;
-      font-weight: 400;
+      font-family: var(--font-sans);
+      font-size: 1.75rem;
+      color: var(--neutral-neutral-1);
+      font-weight: 700;
       line-height: 42px;
       letter-spacing: -0.3px;
       text-align: center;
@@ -23,5 +29,9 @@ export const ExpertsSectionStyled = styled.div`
         width: 100%;
       }
     }
+
+    &__description {
+      text-align: center;
+    }
   }
 `

package/dist/src/components/sections/ExpertsSection/ExpertsSection.tsx

@@ -4,7 +4,7 @@ import { ExpertCardList } from '../../molecules'
 import { type ExpertsSectionProps } from './ExpertsSectionProps.types'
 import { ExpertsSectionStyled } from './ExpertsSection.styled'
 
-const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList }) => {
+const ExpertsSection: FC<ExpertsSectionProps> = ({ title, description, contentExpertCardList }) => {
   if (contentExpertCardList.contentExpertCard.length === 0) {
     return null
   }
@@ -12,6 +12,7 @@ const ExpertsSection: FC<ExpertsSectionProps> = ({ title, contentExpertCardList
   return (
     <ExpertsSectionStyled className='experts-section'>
       <h2 className='experts-section__title'>{title}</h2>
+      <div className='experts-section__description'>{description}</div>
       <ExpertCardList contentExpertCard={contentExpertCardList.contentExpertCard} />
     </ExpertsSectionStyled>
   )

package/dist/src/components/sections/ExpertsSection/ExpertsSectionProps.types.d.ts

@@ -1,5 +1,7 @@
 import { type ExpertCardListProps } from '../../molecules/ExpertCardList';
+import React from 'react';
 export interface ExpertsSectionProps {
     title: string;
+    description: React.ReactNode;
     contentExpertCardList: ExpertCardListProps;
 }

package/dist/src/components/sections/ExpertsSection/ExpertsSectionProps.types.ts

@@ -1,6 +1,8 @@
 import { type ExpertCardListProps } from '../../molecules/ExpertCardList'
+import React from 'react'
 
 export interface ExpertsSectionProps {
   title: string
+  description: React.ReactNode
   contentExpertCardList: ExpertCardListProps
 }

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

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { FaqGroup } from '../../organisms';
 import { FaqSectionStyled } from './FaqSection.styled';
 export const FaqSection = ({ groups, givenClass }) => {
+    if (!groups?.length)
+        return null;
     const classnames = classNames(`faqSection ${givenClass ?? ''}`);
-    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups.map((group) => (_jsx(FaqGroup, { ...group }, group.id))) }));
+    return (_jsx(FaqSectionStyled, { className: classnames, itemScope: true, itemType: 'https://www.schema.org/FAQPage', children: groups?.map((group) => _jsx(FaqGroup, { ...group }, group.id)) }));
 };

package/dist/src/components/sections/FaqSection/FaqSection.tsx

@@ -6,13 +6,12 @@ import { type FaqSectionProps } from './FaqSectionProps'
 import { FaqSectionStyled } from './FaqSection.styled'
 
 export const FaqSection: React.FC<FaqSectionProps> = ({ groups, givenClass }) => {
+  if (!groups?.length) return null
   const classnames = classNames(`faqSection ${givenClass ?? ''}`)
 
   return (
     <FaqSectionStyled className={classnames} itemScope itemType='https://www.schema.org/FAQPage'>
-      {groups.map((group) => (
-        <FaqGroup key={group.id} {...group} />
-      ))}
+      {groups?.map((group) => <FaqGroup key={group.id} {...group} />)}
     </FaqSectionStyled>
   )
 }

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

@@ -39,7 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
-        min-width: 50%;
+        width: 100%;
 
         @media ${device.desktop} {
           display: flex;
@@ -48,6 +48,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
         }
         img {
           width: 100%;
+          height: auto;
         }
       }
     }

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

@@ -40,7 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
-        min-width: 50%;
+        width: 100%;
 
         @media ${device.desktop} {
           display: flex;
@@ -49,6 +49,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
         }
         img {
           width: 100%;
+          height: auto;
         }
       }
     }

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomFooter } from '../../organisms/BottomFooter/BottomFooter';
+import { FooterStyled } from './Footer.styled';
+import { TopFooter } from '../../organisms/TopFooter/TopFooter';
+export const Footer = ({ footerTopProps, footerBottomProps }) => {
+    return (_jsxs(FooterStyled, { className: 'footer', children: [_jsx(TopFooter, { ...footerTopProps }), footerBottomProps && _jsx(BottomFooter, { ...footerBottomProps })] }));
+};

package/dist/src/components/sections/Footer/Footer.mocks.d.ts

@@ -0,0 +1,10 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter';
+import { ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types';
+import { FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types';
+import { SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types';
+import { TopFooterProps } from 'src/components/organisms/TopFooter';
+export declare const mockMenu: FooterMenuProps;
+export declare const mockSocialLinks: SocialLink[];
+export declare const mockContactInfo: ContactInfoProps;
+export declare const mockTopFooterArgs: TopFooterProps;
+export declare const mockBottomFooterArgs: BottomFooterProps;

package/dist/src/components/sections/Footer/Footer.mocks.js

@@ -0,0 +1,65 @@
+import facebookIcon from '../../../../images/svg/facebook.svg';
+import linkedinIcon from '../../../../images/svg/linkedin.svg';
+import pinterestIcon from '../../../../images/svg/pinterest.svg';
+import xIcon from '../../../../images/svg/x.svg';
+export const mockMenu = {
+    title: 'SERVICES',
+    links: [
+        { name: 'Legal Documents and Forms', url: '#' },
+        { name: 'LawGenius', url: '#', customClass: 'ai-link' },
+        { name: 'eSignature', url: '#' }
+    ]
+};
+export const mockSocialLinks = [
+    { url: 'https://facebook.com', iconSrc: facebookIcon, alt: 'Facebook' },
+    { url: 'https://twitter.com', iconSrc: xIcon, alt: 'Twitter' },
+    { url: 'https://pinterest.com', iconSrc: pinterestIcon, alt: 'Pinterest' },
+    { url: 'https://linkedin.com', iconSrc: linkedinIcon, alt: 'LinkedIn' }
+];
+export const mockContactInfo = {
+    phoneNumber: '1-800-123-4567',
+    schedule: 'Contact Hours: Sun-Sat 9am - 7pm ET',
+    languageSelector: 'LANGUAGE SELECTOR'
+};
+export const mockTopFooterArgs = {
+    menus: [
+        mockMenu,
+        {
+            title: 'POPULAR DOCUMENTS',
+            links: [
+                { name: 'Bill of Sale', url: '#' },
+                { name: 'Living Will', url: '#' },
+                { name: 'Power of Attorney', url: '#' },
+                { name: 'Residential Lease Agreement', url: '#' }
+            ]
+        },
+        {
+            title: 'RESOURCES',
+            links: [
+                { name: 'Articles', url: '#', rel: 'nofollow' },
+                { name: 'Legal Dictionary', url: '#', dataQa: 'legal-dictionary' }
+            ]
+        },
+        {
+            title: 'Help',
+            links: [
+                { name: 'FAQs', url: '#' },
+                { name: 'Contact Us', url: '#' },
+                { name: 'Pricing', url: '#' }
+            ]
+        }
+    ],
+    contactInfo: mockContactInfo,
+    trustPilotWidget: 'TRUSTPILOTWIDGET'
+};
+export const mockBottomFooterArgs = {
+    siteName: 'LawDistrict',
+    companyLinks: [
+        { name: 'Terms of Service', url: '#' },
+        { name: 'Privacy Policy', url: '#' },
+        { name: 'Cookie Policy', url: '#' }
+    ],
+    socialLinks: mockSocialLinks,
+    disclaimerText: 'Lawdistrict.com offers various models of legal documents, as well as additional functionalities, for different needs and purposes. By using our online document editor you will obtain a completely customized legal document for a fee. We are not a law firm and, therefore, do not provide official legal advice. If you need further legal assistance, we suggest consulting an attorney or a law firm in your jurisdiction that specializes in your specific legal matter. You take sole responsibility for the use of the legal documents and information provided.',
+    copyrightText: `© ${new Date().getFullYear()} www.lawdistrict.com All Rights Reserved.`
+};

package/dist/src/components/sections/Footer/Footer.mocks.ts

@@ -0,0 +1,77 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter'
+import { ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types'
+import { FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types'
+import { SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types'
+import { TopFooterProps } from 'src/components/organisms/TopFooter'
+
+import facebookIcon from '../../../../images/svg/facebook.svg'
+import linkedinIcon from '../../../../images/svg/linkedin.svg'
+import pinterestIcon from '../../../../images/svg/pinterest.svg'
+import xIcon from '../../../../images/svg/x.svg'
+
+export const mockMenu: FooterMenuProps = {
+  title: 'SERVICES',
+  links: [
+    { name: 'Legal Documents and Forms', url: '#' },
+    { name: 'LawGenius', url: '#', customClass: 'ai-link' },
+    { name: 'eSignature', url: '#' }
+  ]
+}
+
+export const mockSocialLinks: SocialLink[] = [
+  { url: 'https://facebook.com', iconSrc: facebookIcon, alt: 'Facebook' },
+  { url: 'https://twitter.com', iconSrc: xIcon, alt: 'Twitter' },
+  { url: 'https://pinterest.com', iconSrc: pinterestIcon, alt: 'Pinterest' },
+  { url: 'https://linkedin.com', iconSrc: linkedinIcon, alt: 'LinkedIn' }
+]
+
+export const mockContactInfo: ContactInfoProps = {
+  phoneNumber: '1-800-123-4567',
+  schedule: 'Contact Hours: Sun-Sat 9am - 7pm ET',
+  languageSelector: 'LANGUAGE SELECTOR'
+}
+
+export const mockTopFooterArgs: TopFooterProps = {
+  menus: [
+    mockMenu,
+    {
+      title: 'POPULAR DOCUMENTS',
+      links: [
+        { name: 'Bill of Sale', url: '#' },
+        { name: 'Living Will', url: '#' },
+        { name: 'Power of Attorney', url: '#' },
+        { name: 'Residential Lease Agreement', url: '#' }
+      ]
+    },
+    {
+      title: 'RESOURCES',
+      links: [
+        { name: 'Articles', url: '#', rel: 'nofollow' },
+        { name: 'Legal Dictionary', url: '#', dataQa: 'legal-dictionary' }
+      ]
+    },
+    {
+      title: 'Help',
+      links: [
+        { name: 'FAQs', url: '#' },
+        { name: 'Contact Us', url: '#' },
+        { name: 'Pricing', url: '#' }
+      ]
+    }
+  ],
+  contactInfo: mockContactInfo,
+  trustPilotWidget: 'TRUSTPILOTWIDGET'
+}
+
+export const mockBottomFooterArgs: BottomFooterProps = {
+  siteName: 'LawDistrict',
+  companyLinks: [
+    { name: 'Terms of Service', url: '#' },
+    { name: 'Privacy Policy', url: '#' },
+    { name: 'Cookie Policy', url: '#' }
+  ],
+  socialLinks: mockSocialLinks,
+  disclaimerText:
+    'Lawdistrict.com offers various models of legal documents, as well as additional functionalities, for different needs and purposes. By using our online document editor you will obtain a completely customized legal document for a fee. We are not a law firm and, therefore, do not provide official legal advice. If you need further legal assistance, we suggest consulting an attorney or a law firm in your jurisdiction that specializes in your specific legal matter. You take sole responsibility for the use of the legal documents and information provided.',
+  copyrightText: `© ${new Date().getFullYear()} www.lawdistrict.com All Rights Reserved.`
+}

package/dist/src/components/sections/Footer/Footer.styled.d.ts

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

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const FooterStyled = styled.footer `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--primary-main-dark-2);
+  width: 100%;
+  margin: 0 auto;
+`;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const FooterStyled = styled.footer`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--primary-main-dark-2);
+  width: 100%;
+  margin: 0 auto;
+`

package/dist/src/components/sections/Footer/Footer.tsx

@@ -0,0 +1,14 @@
+import { BottomFooter } from '../../organisms/BottomFooter/BottomFooter'
+import { FooterProps } from './FooterProps.types'
+import { FooterStyled } from './Footer.styled'
+import React from 'react'
+import { TopFooter } from '../../organisms/TopFooter/TopFooter'
+
+export const Footer: React.FC<FooterProps> = ({ footerTopProps, footerBottomProps }) => {
+  return (
+    <FooterStyled className='footer'>
+      <TopFooter {...footerTopProps} />
+      {footerBottomProps && <BottomFooter {...footerBottomProps} />}
+    </FooterStyled>
+  )
+}

package/dist/src/components/sections/Footer/FooterProps.types.d.ts

@@ -0,0 +1,6 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter';
+import { TopFooterProps } from 'src/components/organisms/TopFooter';
+export interface FooterProps {
+    footerTopProps: TopFooterProps;
+    footerBottomProps?: BottomFooterProps;
+}

package/dist/src/components/sections/Footer/FooterProps.types.js

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

package/dist/src/components/sections/Footer/FooterProps.types.ts

@@ -0,0 +1,7 @@
+import { BottomFooterProps } from 'src/components/organisms/BottomFooter'
+import { TopFooterProps } from 'src/components/organisms/TopFooter'
+
+export interface FooterProps {
+  footerTopProps: TopFooterProps
+  footerBottomProps?: BottomFooterProps
+}

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

@@ -0,0 +1,8 @@
+export { Footer } from './Footer';
+export { type FooterProps } from './FooterProps.types';
+export { type TopFooterProps } from '../../organisms/TopFooter/TopFooterProps.types';
+export { type BottomFooterProps } from '../../organisms/BottomFooter/BottomFooterProps.types';
+export { type Link } from '../../molecules/FooterMenu/FooterMenuProps.types';
+export { type SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types';
+export { type FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types';
+export { type ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types';

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

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

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

@@ -0,0 +1,8 @@
+export { Footer } from './Footer'
+export { type FooterProps } from './FooterProps.types'
+export { type TopFooterProps } from '../../organisms/TopFooter/TopFooterProps.types'
+export { type BottomFooterProps } from '../../organisms/BottomFooter/BottomFooterProps.types'
+export { type Link } from '../../molecules/FooterMenu/FooterMenuProps.types'
+export { type SocialLink } from '../../molecules/SocialLinks/SocialLinksProps.types'
+export { type FooterMenuProps } from '../../molecules/FooterMenu/FooterMenuProps.types'
+export { type ContactInfoProps } from '../../molecules/ContactInfo/ContactInfoProps.types'

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, tryNowText: contentGuidelines.tryNowText, tryNowButtonText: contentGuidelines.tryNowButtonText, tryNowButtonLink: contentGuidelines.tryNowButtonLink, tryNowButtonDataQa: contentGuidelines.tryNowButtonDataQa, tryNowImage: contentGuidelines.tryNowImage, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx

@@ -11,6 +11,11 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
         title={contentGuidelines.title}
         image={contentGuidelines.image}
         detail={contentGuidelines.detail}
+        tryNowText={contentGuidelines.tryNowText}
+        tryNowButtonText={contentGuidelines.tryNowButtonText}
+        tryNowButtonLink={contentGuidelines.tryNowButtonLink}
+        tryNowButtonDataQa={contentGuidelines.tryNowButtonDataQa}
+        tryNowImage={contentGuidelines.tryNowImage}
       >
         {contentGuidelines.children}
       </GuidelinesContent>

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type HeaderProps } from './HeaderProps.types';
+declare const Header: React.ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Header;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Logo, TopBar } from '../../atoms';
+import { HeaderStyled } from './Header.styled';
+import { NavMenu } from '../../organisms/NavMenu';
+const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
+    const { classnames, siteName } = mainHeaderProps;
+    return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: 'flex header__inner', children: [_jsx("a", { "data-qa": 'Header_Logo', className: 'header__logo', href: '/', children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(NavMenu, { ...navMenuProps })] })] }));
+});
+Header.displayName = 'Header';
+export default Header;

package/dist/src/components/sections/Header/Header.styled.d.ts

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

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

@@ -0,0 +1,142 @@
+import { device, size } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const HeaderStyled = styled.header `
+  position: sticky;
+  top: 0;
+  transition: all 0.3s ease;
+  z-index: 1000;
+
+  @media (max-width: ${size.tab}) {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 111111111111;
+  }
+
+  html[data-theme='primarygreen'] {
+    .header {
+      &.product-header-background {
+        background-color: var(--secondary-main-light-4);
+      }
+    }
+  }
+
+  .header__inner {
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem 2rem 1rem 2rem;
+    }
+  }
+
+  &.scrollDown {
+    background-color: var(--others-white) !important;
+    box-shadow: var(--box-shadow-small);
+  }
+
+  .top-bar-wrapper {
+    .top-bar {
+      @media (max-width: ${size.tab}) {
+        font-size: 0.78rem;
+        letter-spacing: -0.5px;
+      }
+    }
+
+    .top-bar-content {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      @media ${device.tablets} {
+        justify-content: center;
+        width: auto;
+      }
+      span {
+        display: none;
+
+        @media ${device['laptop']} {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .top-bar-mobile {
+    font-size: 14px;
+    padding: 8px 10px;
+    letter-spacing: normal;
+  }
+
+  &.hide-header-in-mobile {
+    position: relative;
+
+    @media ${device.tablets} {
+      position: sticky;
+    }
+  }
+
+  &__inner {
+    max-width: 1200px;
+    padding: 1rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (min-width: ${size.tab}) {
+      padding: 1rem;
+    }
+  }
+
+  .header__logo {
+    z-index: 200;
+    min-width: max-content;
+
+    img {
+      @media (max-width: 1024px) {
+        width: 141px;
+        height: auto;
+      }
+    }
+  }
+
+  &.product-header-background {
+    background-color: var(--primary-main-light-6);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+
+  &.esignature-header-background {
+    background-color: var(--neutral-neutral-5);
+  }
+
+  .--no-grid {
+    padding: 0 2rem;
+  }
+
+  &.--is-open {
+    background: var(--others-white);
+    position: fixed;
+    width: 100%;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .refresh-container {
+    height: 70px;
+    padding-top: 10px;
+
+    .e-button {
+      width: 140px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+`;