@npm_leadtech/legal-lib-components 7.44.6 → 7.45.0

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -1,26 +0,0 @@
-export interface MenuListItem {
-    title: string;
-    url: string;
-}
-export interface AppHeaderProps {
-    siteName: string;
-    homeUrl: string;
-    sitePhone: string;
-    scheduleText: string;
-    headerFullWidth: boolean;
-    menuList?: {
-        title: string;
-        items: MenuListItem[];
-    };
-    toggleMenuHelpOpen: () => void;
-    toggleMenuPersonalOpen: () => void;
-    isHelpActive: boolean;
-    isPersonalActive: boolean;
-    userActions: React.ReactNode;
-    helpTriggerImage: string;
-    userTriggerImage: string;
-    handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void;
-    headerClassnames: string;
-    closeText: string;
-    showTopBar?: boolean;
-}

package/dist/src/components/sections/AppHeader/AppHeaderProps.js

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

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -1,27 +0,0 @@
-export interface MenuListItem {
-  title: string
-  url: string
-}
-
-export interface AppHeaderProps {
-  siteName: string
-  homeUrl: string
-  sitePhone: string
-  scheduleText: string
-  headerFullWidth: boolean
-  menuList?: {
-    title: string
-    items: MenuListItem[]
-  }
-  toggleMenuHelpOpen: () => void
-  toggleMenuPersonalOpen: () => void
-  isHelpActive: boolean
-  isPersonalActive: boolean
-  userActions: React.ReactNode
-  helpTriggerImage: string
-  userTriggerImage: string
-  handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void
-  headerClassnames: string
-  closeText: string
-  showTopBar?: boolean
-}

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

@@ -1,2 +0,0 @@
-export * from './AppHeader';
-export * from './AppHeaderProps';

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

@@ -1,2 +0,0 @@
-export * from './AppHeader';
-export * from './AppHeaderProps';

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

@@ -1,2 +0,0 @@
-export * from './AppHeader'
-export * from './AppHeaderProps'

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type CardBoxSectionProps } from './CardBoxSectionProps';
-export declare const CardBoxMinimalSection: React.FC<CardBoxSectionProps>;
-export declare const CardBoxFeaturedSection: React.FC<CardBoxSectionProps>;

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled';
-import { CardBox } from '../../atoms';
-export const CardBoxMinimalSection = ({ cards }) => {
-    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => _jsx(CardBox, { text: text, icon: icon }, id)) }));
-};
-export const CardBoxFeaturedSection = ({ cards }) => {
-    return (_jsx(CardBoxFeaturedSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon, padding: '16px', gap: '0.5rem', borderRadius: '8px' }, id))) }));
-};

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

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

@@ -1,33 +0,0 @@
-import { device } from '../../../globalStyles/breakpoints';
-import styled from 'styled-components';
-export const CardBoxMinimalSectionStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 48px 24px;
-  gap: 16px;
-  align-self: stretch;
-  background: var(--neutral-neutral-6);
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`;
-export const CardBoxFeaturedSectionStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 24px 24px;
-  gap: 16px;
-  background: var(--neutral-neutral-6);
-  border-radius: 16px;
-  margin-bottom: 80px;
-  margin-top: 32px;
-  @media ${device.desktop} {
-    min-width: 1200px;
-  }
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`;

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

@@ -1,35 +0,0 @@
-import { device } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
-
-export const CardBoxMinimalSectionStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 48px 24px;
-  gap: 16px;
-  align-self: stretch;
-  background: var(--neutral-neutral-6);
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`
-
-export const CardBoxFeaturedSectionStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 24px 24px;
-  gap: 16px;
-  background: var(--neutral-neutral-6);
-  border-radius: 16px;
-  margin-bottom: 80px;
-  margin-top: 32px;
-  @media ${device.desktop} {
-    min-width: 1200px;
-  }
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`

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

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled'
-import { CardBox } from '../../atoms'
-import { type CardBoxSectionProps } from './CardBoxSectionProps'
-
-export const CardBoxMinimalSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
-  return (
-    <CardBoxMinimalSectionStyled>
-      {cards?.map(({ text, icon, id }) => <CardBox key={id} text={text} icon={icon} />)}
-    </CardBoxMinimalSectionStyled>
-  )
-}
-
-export const CardBoxFeaturedSection: React.FC<CardBoxSectionProps> = ({ cards }) => {
-  return (
-    <CardBoxFeaturedSectionStyled>
-      {cards?.map(({ text, icon, id }) => (
-        <CardBox key={id} text={text} icon={icon} padding='16px' gap='0.5rem' borderRadius='8px' />
-      ))}
-    </CardBoxFeaturedSectionStyled>
-  )
-}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.d.ts

@@ -1,4 +0,0 @@
-import { CardBoxProps } from 'src/components/atoms';
-export interface CardBoxSectionProps {
-    cards: CardBoxProps[];
-}

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.js

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

package/dist/src/components/sections/CardBoxSection/CardBoxSectionProps.ts

@@ -1,5 +0,0 @@
-import { CardBoxProps } from 'src/components/atoms'
-
-export interface CardBoxSectionProps {
-  cards: CardBoxProps[]
-}

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

@@ -1,2 +0,0 @@
-export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';
-export { type CardBoxSectionProps } from './CardBoxSectionProps';

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

@@ -1 +0,0 @@
-export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection';

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

@@ -1,2 +0,0 @@
-export { CardBoxFeaturedSection, CardBoxMinimalSection } from './CardBoxSection'
-export { type CardBoxSectionProps } from './CardBoxSectionProps'

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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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='lawdistrict'] {
-    .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;
-    }
-  }
-`;