@npm_leadtech/legal-lib-components 7.19.1 → 7.19.2

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+type MobileMenuTriggerProps = {
+  isActive: boolean
+}
+
+export const MobileMenuWrapper = styled.nav`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
+  @media (min-width: 720px) {
+    display: none;
+  }
+`
+
+export const MobilePersonalTrigger = styled.div<MobileMenuTriggerProps>`
+  border: 1px solid var(--neutral-neutral-3);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  background-color: ${(props) => (props.isActive ? 'var(--primary-main)' : 'var(--others-white)')};
+`
+
+export const UserActionsPanel = styled.div`
+  padding: 1.5rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -0,0 +1,54 @@
+// src/components/organisms/MobileMenu/MobileMenu.tsx
+import { ContactInformation, MobileTrigger } from '../../atoms'
+import { MobileMenuWrapper, UserActionsPanel } from './MobileMenu.styled'
+import { HelpPanelList } from '../../molecules'
+import { MobileMenuProps } from './MobileMenuProps'
+import { MobilePanel } from '../MobilePanel'
+import React from 'react'
+
+export const MobileMenu: React.FC<MobileMenuProps> = ({
+  isHelpActive,
+  isPersonalActive,
+  toggleMenuHelpOpen,
+  toggleMenuPersonalOpen,
+  menuList,
+  sitePhone,
+  scheduleText,
+  homeUrl,
+  userActions,
+  helpTriggerImage,
+  userTriggerImage,
+  closeText,
+  showTopBar
+}) => {
+  return (
+    <MobileMenuWrapper>
+      <MobileTrigger
+        onClick={toggleMenuHelpOpen}
+        isActive={isHelpActive}
+        imageUrl={helpTriggerImage}
+        altText='Help and contact menu'
+      />
+      <MobileTrigger
+        onClick={toggleMenuPersonalOpen}
+        isActive={isPersonalActive}
+        imageUrl={userTriggerImage}
+        altText='User actions menu'
+      />
+
+      <MobilePanel showTopBar={showTopBar} closeText={closeText} isActive={isHelpActive} onClose={toggleMenuHelpOpen}>
+        {menuList?.items?.length && <HelpPanelList {...menuList} homeUrl={homeUrl} />}
+        {sitePhone && <ContactInformation phoneNumber={sitePhone} scheduleText={scheduleText} />}
+      </MobilePanel>
+
+      <MobilePanel
+        showTopBar={showTopBar}
+        closeText={closeText}
+        isActive={isPersonalActive}
+        onClose={toggleMenuPersonalOpen}
+      >
+        <UserActionsPanel>{userActions}</UserActionsPanel>
+      </MobilePanel>
+    </MobileMenuWrapper>
+  )
+}

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.d.ts

@@ -0,0 +1,16 @@
+import { HelpPanelListProps } from 'src/components/molecules/HelpPanelList/HelpPanelListProps';
+export interface MobileMenuProps {
+    isHelpActive: boolean;
+    isPersonalActive: boolean;
+    toggleMenuHelpOpen: () => void;
+    toggleMenuPersonalOpen: () => void;
+    menuList?: HelpPanelListProps;
+    sitePhone?: string;
+    scheduleText?: string;
+    homeUrl?: string;
+    userActions?: React.ReactNode;
+    helpTriggerImage: string;
+    userTriggerImage: string;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.js

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

package/dist/src/components/organisms/MobileMenu/MobileMenuProps.ts

@@ -0,0 +1,18 @@
+import { HelpPanelListProps } from 'src/components/molecules/HelpPanelList/HelpPanelListProps'
+
+export interface MobileMenuProps {
+  isHelpActive: boolean
+  isPersonalActive: boolean
+  toggleMenuHelpOpen: () => void
+  toggleMenuPersonalOpen: () => void
+
+  menuList?: HelpPanelListProps
+  sitePhone?: string
+  scheduleText?: string
+  homeUrl?: string
+  userActions?: React.ReactNode
+  helpTriggerImage: string
+  userTriggerImage: string
+  closeText: string
+  showTopBar?: boolean
+}

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu';
+export * from './MobileMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu';
+export * from './MobileMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileMenu'
+export * from './MobileMenuProps'

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/molecules/MobilePanel/MobilePanel.tsx
+import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled';
+export const MobilePanel = ({ showTopBar, isActive, onClose, children, closeText }) => (_jsx(PanelMobileWrapper, { isActive: isActive, showTopBar: showTopBar, children: _jsxs(PanelMenu, { children: [children, _jsx(CloseButton, { onClick: onClose, children: closeText })] }) }));

package/dist/src/components/organisms/MobilePanel/MobilePanel.styled.d.ts

@@ -0,0 +1,8 @@
+type MobileMenuTriggerProps = {
+    isActive: boolean;
+    showTopBar?: boolean;
+};
+export declare const PanelMobileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MobileMenuTriggerProps>> & string;
+export declare const PanelMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const PanelMobileWrapper = styled.div `
+  display: ${(props) => (props.isActive ? 'block' : 'none')};
+  position: fixed;
+  box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  top: ${(props) => (props.showTopBar ? '6.3rem' : '4rem')};
+  @media (min-width: 576px) and (max-width: 720px) {
+    top: ${(props) => props.showTopBar && '4rem'};
+  }
+  left: 0;
+  background-color: rgba(109, 114, 117, 0.3019607843);
+`;
+export const PanelMenu = styled.div `
+  background: var(--others-white);
+  box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  padding: 0 1.5rem;
+`;
+export const CloseButton = styled.div `
+  padding: 1.5rem 0;
+  color: var(--primary-main);
+  font-weight: 700;
+  border-top: 1px solid var(--neutral-neutral-4);
+  cursor: pointer;
+`;

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+type MobileMenuTriggerProps = {
+  isActive: boolean
+  showTopBar?: boolean
+}
+
+export const PanelMobileWrapper = styled.div<MobileMenuTriggerProps>`
+  display: ${(props) => (props.isActive ? 'block' : 'none')};
+  position: fixed;
+  box-shadow: 0 0.25rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  top: ${(props) => (props.showTopBar ? '6.3rem' : '4rem')};
+  @media (min-width: 576px) and (max-width: 720px) {
+    top: ${(props) => props.showTopBar && '4rem'};
+  }
+  left: 0;
+  background-color: rgba(109, 114, 117, 0.3019607843);
+`
+
+export const PanelMenu = styled.div`
+  background: var(--others-white);
+  box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(2, 55, 74, 0.2);
+  padding: 0 1.5rem;
+`
+
+export const CloseButton = styled.div`
+  padding: 1.5rem 0;
+  color: var(--primary-main);
+  font-weight: 700;
+  border-top: 1px solid var(--neutral-neutral-4);
+  cursor: pointer;
+`

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

@@ -0,0 +1,13 @@
+// src/components/molecules/MobilePanel/MobilePanel.tsx
+import { CloseButton, PanelMenu, PanelMobileWrapper } from './MobilePanel.styled'
+import { MobilePanelProps } from './MobilePanelProps'
+import React from 'react'
+
+export const MobilePanel: React.FC<MobilePanelProps> = ({ showTopBar, isActive, onClose, children, closeText }) => (
+  <PanelMobileWrapper isActive={isActive} showTopBar={showTopBar}>
+    <PanelMenu>
+      {children}
+      <CloseButton onClick={onClose}>{closeText}</CloseButton>
+    </PanelMenu>
+  </PanelMobileWrapper>
+)

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.d.ts

@@ -0,0 +1,7 @@
+export interface MobilePanelProps {
+    isActive: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    closeText: string;
+    showTopBar?: boolean;
+}

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.js

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

package/dist/src/components/organisms/MobilePanel/MobilePanelProps.ts

@@ -0,0 +1,7 @@
+export interface MobilePanelProps {
+  isActive: boolean
+  onClose: () => void
+  children: React.ReactNode
+  closeText: string
+  showTopBar?: boolean
+}

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel';
+export * from './MobilePanelProps';

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel';
+export * from './MobilePanelProps';

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

@@ -0,0 +1,2 @@
+export * from './MobilePanel'
+export * from './MobilePanelProps'

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

@@ -32,3 +32,6 @@ 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,3 +32,6 @@ 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,3 +32,6 @@ 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 { 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 })] }));
+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 })] }));
 };

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,
-  contactInfoBoxMobileProps,
+  phoneContactBox,
   contactProps,
   isJonSnow = false
 }) => {
   return (
     <>
       <JumbotronSimplifiedSection {...jumbotronSimplifiedSectionProps} />
-      {!isJonSnow && <ContactInfoBoxMobile {...contactInfoBoxMobileProps} />}
+      {!isJonSnow && <PhoneContactBoxMobile {...phoneContactBox} />}
       <ContactSection {...contactProps} />
     </>
   )

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { AppHeaderProps } from './AppHeaderProps';
+import React from 'react';
+import './AppHeader.scss';
+export declare const AppHeader: React.FC<AppHeaderProps>;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
+import { DesktopMenu, MobileMenu } from '../../organisms';
+import { Logo } from '../../atoms';
+import './AppHeader.scss';
+export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
+    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
+};

package/dist/src/components/sections/AppHeader/AppHeader.scss

@@ -0,0 +1,32 @@
+.navigation-pane__user-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .navigation-pane__user-name {
+    margin-right: 1rem;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 6rem;
+  }
+
+  .longer-text {
+    width: 11rem;
+    margin-right: 1.5rem;
+    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+    color: var(--button-hover);
+  }
+
+  .go-to-dashboard-button,
+  .go-to-free-account-button {
+    background-color: transparent;
+
+    &:hover {
+      background-color: #e4f8f3;
+    }
+  }
+  .navigation-pane__button {
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+export const AppHeaderStyled = styled.header `
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`;
+export const AppHeaderWrapper = styled.span `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`;

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const AppHeaderStyled = styled.header`
+  background-color: var(--others-white);
+  position: sticky;
+  z-index: 999;
+  &.product-header-background {
+    background-color: var(--secondary-main-light-4);
+  }
+
+  &.create-password-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-details-header-background {
+    background-color: var(--neutral-neutral-6);
+  }
+
+  &.payment-header-background-8814 {
+    background-color: var(--primary-main-light-5);
+  }
+
+  &.transparent-header-background {
+    background-color: transparent;
+  }
+
+  &.form-header-background {
+    background-color: var(--others-white);
+  }
+`
+export const AppHeaderWrapper = styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem 1rem 1.5rem;
+`

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

@@ -0,0 +1,58 @@
+import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled'
+import { DesktopMenu, MobileMenu } from '../../organisms'
+import { AppHeaderProps } from './AppHeaderProps'
+import { Logo } from '../../atoms'
+import React from 'react'
+import './AppHeader.scss'
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+  siteName = 'LawDistrict',
+  homeUrl = '/',
+  sitePhone,
+  scheduleText,
+  headerFullWidth,
+  menuList,
+  toggleMenuHelpOpen,
+  toggleMenuPersonalOpen,
+  isHelpActive,
+  isPersonalActive,
+  userActions,
+  helpTriggerImage,
+  userTriggerImage,
+  handleClickLogo,
+  headerClassnames,
+  closeText = 'Close',
+  showTopBar
+}) => {
+  return (
+    <AppHeaderStyled className={headerClassnames}>
+      <AppHeaderWrapper
+        itemScope
+        itemType='https://schema.org/Brand'
+        className={`${headerFullWidth ? '--no-grid' : 'wrapper'}`}
+      >
+        <a className='header__logo' onClick={(event) => handleClickLogo(event, homeUrl)} href={homeUrl}>
+          <Logo siteName={siteName} width='188' height='32' />
+        </a>
+
+        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
+
+        <MobileMenu
+          closeText={closeText}
+          helpTriggerImage={helpTriggerImage}
+          isHelpActive={isHelpActive}
+          isPersonalActive={isPersonalActive}
+          toggleMenuHelpOpen={toggleMenuHelpOpen}
+          toggleMenuPersonalOpen={toggleMenuPersonalOpen}
+          userTriggerImage={userTriggerImage}
+          homeUrl={homeUrl}
+          menuList={menuList}
+          scheduleText={scheduleText}
+          sitePhone={sitePhone}
+          userActions={userActions}
+          showTopBar={showTopBar}
+        />
+      </AppHeaderWrapper>
+    </AppHeaderStyled>
+  )
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -30,12 +30,10 @@ 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,12 +31,10 @@ 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,3 +28,4 @@ export * from './LearnMoreSection';
 export * from './CardStorySection';
 export * from './Header';
 export * from './Footer';
+export * from './AppHeader';