@npm_leadtech/legal-lib-components 7.20.0 → 7.21.0

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

@@ -0,0 +1,18 @@
+import { HelpSectionLink, HelpSectionList, HelpSectionStyled } from './HelpSection.styled'
+import { HelpSectionProps } from './HelpSectionProps'
+import React from 'react'
+
+export const HelpSection: React.FC<HelpSectionProps> = ({ title, items, homeUrl = '/' }) => {
+  return (
+    <HelpSectionStyled>
+      <p>{title}</p>
+      <HelpSectionList>
+        {items.map((item) => (
+          <HelpSectionLink key={item.title} title={item.title}>
+            <a href={`${homeUrl}${item.url}`}>{item.title}</a>
+          </HelpSectionLink>
+        ))}
+      </HelpSectionList>
+    </HelpSectionStyled>
+  )
+}

package/dist/src/components/molecules/HelpSection/HelpSectionProps.d.ts

@@ -0,0 +1,6 @@
+import { MenuItem } from '../HelpPanelList/HelpPanelListProps';
+export interface HelpSectionProps {
+    title: string;
+    items: MenuItem[];
+    homeUrl?: string;
+}

package/dist/src/components/molecules/HelpSection/HelpSectionProps.js

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

package/dist/src/components/molecules/HelpSection/HelpSectionProps.ts

@@ -0,0 +1,7 @@
+import { MenuItem } from '../HelpPanelList/HelpPanelListProps'
+
+export interface HelpSectionProps {
+  title: string
+  items: MenuItem[]
+  homeUrl?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './HelpSection';
+export * from './HelpSectionProps';

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

@@ -0,0 +1,2 @@
+export * from './HelpSection';
+export * from './HelpSectionProps';

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

@@ -0,0 +1,2 @@
+export * from './HelpSection'
+export * from './HelpSectionProps'

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

@@ -56,3 +56,5 @@ 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

@@ -56,3 +56,5 @@ 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

@@ -56,3 +56,5 @@ export * from './TypeModulesList'
 export * from './UploadRatafiaZone'
 export * from './WarningBox'
 export * from './InfoBarFooter'
+export * from './HelpSection'
+export * from './HelpPanelList'

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DesktopMenuStyled } from './DesktopMenu.styled';
+import { HelpSection } from '../../molecules';
+import { PhoneNumberDisplay } from '../../atoms';
+export const DesktopMenu = ({ phoneNumber, menuList, userActions, homeUrl }) => {
+    return (_jsxs(DesktopMenuStyled, { children: [phoneNumber && _jsx(PhoneNumberDisplay, { phoneNumber: phoneNumber }), menuList?.items?.length && _jsx(HelpSection, { ...menuList, homeUrl: homeUrl }), userActions] }));
+};

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

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+export const DesktopMenuStyled = styled.nav `
+  display: flex;
+  gap: 2rem;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  @media (max-width: 720px) {
+    display: none;
+  }
+  @media (min-width: 721px) and (max-width: 849px) {
+    gap: 1rem;
+    flex-direction: column;
+    align-items: end;
+  }
+`;

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+export const DesktopMenuStyled = styled.nav`
+  display: flex;
+  gap: 2rem;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  @media (max-width: 720px) {
+    display: none;
+  }
+  @media (min-width: 721px) and (max-width: 849px) {
+    gap: 1rem;
+    flex-direction: column;
+    align-items: end;
+  }
+`

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

@@ -0,0 +1,15 @@
+import { DesktopMenuProps } from './DesktopMenuProps'
+import { DesktopMenuStyled } from './DesktopMenu.styled'
+import { HelpSection } from '../../molecules'
+import { PhoneNumberDisplay } from '../../atoms'
+import React from 'react'
+
+export const DesktopMenu: React.FC<DesktopMenuProps> = ({ phoneNumber, menuList, userActions, homeUrl }) => {
+  return (
+    <DesktopMenuStyled>
+      {phoneNumber && <PhoneNumberDisplay phoneNumber={phoneNumber} />}
+      {menuList?.items?.length && <HelpSection {...menuList} homeUrl={homeUrl} />}
+      {userActions}
+    </DesktopMenuStyled>
+  )
+}

package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.d.ts

@@ -0,0 +1,7 @@
+import { HelpSectionProps } from 'src/components/molecules/HelpSection';
+export interface DesktopMenuProps {
+    phoneNumber: string;
+    menuList?: HelpSectionProps;
+    userActions: React.ReactNode;
+    homeUrl: string;
+}

package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.js

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

package/dist/src/components/organisms/DesktopMenu/DesktopMenuProps.ts

@@ -0,0 +1,8 @@
+import { HelpSectionProps } from 'src/components/molecules/HelpSection'
+
+export interface DesktopMenuProps {
+  phoneNumber: string
+  menuList?: HelpSectionProps
+  userActions: React.ReactNode
+  homeUrl: string
+}

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

@@ -0,0 +1,2 @@
+export * from './DesktopMenu';
+export * from './DesktopMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './DesktopMenu';
+export * from './DesktopMenuProps';

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

@@ -0,0 +1,2 @@
+export * from './DesktopMenu'
+export * from './DesktopMenuProps'

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactInformation, MobileTrigger } from '../../atoms';
+import { MobileMenuWrapper, UserActionsPanel } from './MobileMenu.styled';
+import { HelpPanelList } from '../../molecules';
+import { MobilePanel } from '../MobilePanel';
+export const MobileMenu = ({ isHelpActive, isPersonalActive, toggleMenuHelpOpen, toggleMenuPersonalOpen, menuList, sitePhone, scheduleText, homeUrl, userActions, helpTriggerImage, userTriggerImage, closeText, showTopBar }) => {
+    return (_jsxs(MobileMenuWrapper, { children: [_jsx(MobileTrigger, { onClick: toggleMenuHelpOpen, isActive: isHelpActive, imageUrl: helpTriggerImage, altText: 'Help and contact menu' }), _jsx(MobileTrigger, { onClick: toggleMenuPersonalOpen, isActive: isPersonalActive, imageUrl: userTriggerImage, altText: 'User actions menu' }), _jsxs(MobilePanel, { showTopBar: showTopBar, closeText: closeText, isActive: isHelpActive, onClose: toggleMenuHelpOpen, children: [menuList?.items?.length && _jsx(HelpPanelList, { ...menuList, homeUrl: homeUrl }), sitePhone && _jsx(ContactInformation, { phoneNumber: sitePhone, scheduleText: scheduleText })] }), _jsx(MobilePanel, { showTopBar: showTopBar, closeText: closeText, isActive: isPersonalActive, onClose: toggleMenuPersonalOpen, children: _jsx(UserActionsPanel, { children: userActions }) })] }));
+};

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

@@ -0,0 +1,7 @@
+type MobileMenuTriggerProps = {
+    isActive: boolean;
+};
+export declare const MobileMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const MobilePersonalTrigger: 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 UserActionsPanel: 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/MobileMenu/MobileMenu.styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+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 `
+  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.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,53 @@
+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,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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,12 @@
+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/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,35 @@
+.navigation-pane__user-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .login-button {
+    margin-right: 1rem;
+  }
+  .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;
+`;