@npm_leadtech/legal-lib-components 7.20.0 → 7.20.1

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeader.d.ts

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

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactInformationStyled } from './ContactInformationHeader.styled';
+export const ContactInformation = ({ phoneNumber, scheduleText }) => {
+    return (_jsxs(ContactInformationStyled, { children: [_jsx("a", { href: `tel:${phoneNumber}`, title: 'Call us', children: _jsx("strong", { children: phoneNumber }) }), _jsx("p", { children: scheduleText })] }));
+};

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeader.styled.d.ts

@@ -0,0 +1 @@
+export declare const ContactInformationStyled: 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/atoms/ContactInformationHeader/ContactInformationHeader.styled.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const ContactInformationStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+  a {
+    background-color: var(--button);
+    border: 2px solid var(--button);
+    color: var(--others-white);
+    font-weight: bold;
+    height: 100%;
+    border-radius: var(--s-border-radius);
+    padding: 0.5rem 1rem;
+    display: block;
+    text-align: center;
+    width: 80%;
+  }
+`;

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeader.styled.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const ContactInformationStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+  a {
+    background-color: var(--button);
+    border: 2px solid var(--button);
+    color: var(--others-white);
+    font-weight: bold;
+    height: 100%;
+    border-radius: var(--s-border-radius);
+    padding: 0.5rem 1rem;
+    display: block;
+    text-align: center;
+    width: 80%;
+  }
+`

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeader.tsx

@@ -0,0 +1,14 @@
+import { ContactInformationProps } from './ContactInformationHeaderProps'
+import { ContactInformationStyled } from './ContactInformationHeader.styled'
+import React from 'react'
+
+export const ContactInformation: React.FC<ContactInformationProps> = ({ phoneNumber, scheduleText }) => {
+  return (
+    <ContactInformationStyled>
+      <a href={`tel:${phoneNumber}`} title='Call us'>
+        <strong>{phoneNumber}</strong>
+      </a>
+      <p>{scheduleText}</p>
+    </ContactInformationStyled>
+  )
+}

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeaderProps.d.ts

@@ -0,0 +1,4 @@
+export interface ContactInformationProps {
+    phoneNumber?: string;
+    scheduleText?: string;
+}

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeaderProps.js

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

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeaderProps.ts

@@ -0,0 +1,4 @@
+export interface ContactInformationProps {
+  phoneNumber?: string
+  scheduleText?: string
+}

package/dist/src/components/atoms/ContactInformationHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader';
+export * from './ContactInformationHeaderProps';

package/dist/src/components/atoms/ContactInformationHeader/index.js

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader';
+export * from './ContactInformationHeaderProps';

package/dist/src/components/atoms/ContactInformationHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader'
+export * from './ContactInformationHeaderProps'

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.d.ts

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

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MobileTriggerStyled } from './MobileTrigger.styled';
+export const MobileTrigger = ({ onClick, isActive, imageUrl, altText }) => {
+    return (_jsx(MobileTriggerStyled, { onClick: onClick, isActive: isActive, children: _jsx("img", { src: imageUrl, alt: altText }) }));
+};

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.styled.d.ts

@@ -0,0 +1,5 @@
+type MobileMenuTriggerProps = {
+    isActive: boolean;
+};
+export declare const MobileTriggerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MobileMenuTriggerProps>> & string;
+export {};

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+export const MobileTriggerStyled = 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)')};
+`;

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+type MobileMenuTriggerProps = {
+  isActive: boolean
+}
+
+export const MobileTriggerStyled = 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)')};
+`

package/dist/src/components/atoms/MobileTrigger/MobileTrigger.tsx

@@ -0,0 +1,11 @@
+import { MobileTriggerProps } from './MobileTriggerProps'
+import { MobileTriggerStyled } from './MobileTrigger.styled'
+import React from 'react'
+
+export const MobileTrigger: React.FC<MobileTriggerProps> = ({ onClick, isActive, imageUrl, altText }) => {
+  return (
+    <MobileTriggerStyled onClick={onClick} isActive={isActive}>
+      <img src={imageUrl} alt={altText} />
+    </MobileTriggerStyled>
+  )
+}

package/dist/src/components/atoms/MobileTrigger/MobileTriggerProps.d.ts

@@ -0,0 +1,6 @@
+export interface MobileTriggerProps {
+    onClick: () => void;
+    isActive: boolean;
+    imageUrl: string;
+    altText: string;
+}

package/dist/src/components/atoms/MobileTrigger/MobileTriggerProps.js

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

package/dist/src/components/atoms/MobileTrigger/MobileTriggerProps.ts

@@ -0,0 +1,6 @@
+export interface MobileTriggerProps {
+  onClick: () => void
+  isActive: boolean
+  imageUrl: string
+  altText: string
+}

package/dist/src/components/atoms/MobileTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MobileTrigger';
+export * from './MobileTriggerProps';

package/dist/src/components/atoms/MobileTrigger/index.js

@@ -0,0 +1,2 @@
+export * from './MobileTrigger';
+export * from './MobileTriggerProps';

package/dist/src/components/atoms/MobileTrigger/index.ts

@@ -0,0 +1,2 @@
+export * from './MobileTrigger'
+export * from './MobileTriggerProps'

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.d.ts

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

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon';
+import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled';
+export const PhoneNumberDisplay = ({ phoneNumber }) => {
+    return (_jsxs(PhoneNumberDisplayStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
+};

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.d.ts

@@ -0,0 +1 @@
+export declare const PhoneNumberDisplayStyled: 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/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export const PhoneNumberDisplayStyled = styled.nav `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  p {
+    margin: 0;
+  }
+  border-right: 1px solid var(--neutral-neutral-3);
+  padding-right: 2rem;
+  height: 2.5rem;
+  @media (min-width: 721px) and (max-width: 849px) {
+    padding-right: 0;
+    border-right: none;
+  }
+`;

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.styled.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const PhoneNumberDisplayStyled = styled.nav`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  p {
+    margin: 0;
+  }
+  border-right: 1px solid var(--neutral-neutral-3);
+  padding-right: 2rem;
+  height: 2.5rem;
+  @media (min-width: 721px) and (max-width: 849px) {
+    padding-right: 0;
+    border-right: none;
+  }
+`

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplay.tsx

@@ -0,0 +1,15 @@
+import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon'
+import { PhoneNumberDisplayProps } from './PhoneNumberDisplayProps'
+import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled'
+import React from 'react'
+
+export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber }) => {
+  return (
+    <PhoneNumberDisplayStyled>
+      <PhoneIcon width={16} height={16} fill='#6d7275' />
+      <p>
+        <strong>{phoneNumber}</strong>
+      </p>
+    </PhoneNumberDisplayStyled>
+  )
+}

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.d.ts

@@ -0,0 +1,3 @@
+export interface PhoneNumberDisplayProps {
+    phoneNumber?: string;
+}

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.js

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

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.ts

@@ -0,0 +1,3 @@
+export interface PhoneNumberDisplayProps {
+  phoneNumber?: string
+}

package/dist/src/components/atoms/PhoneNumberDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay';
+export * from './PhoneNumberDisplayProps';

package/dist/src/components/atoms/PhoneNumberDisplay/index.js

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay';
+export * from './PhoneNumberDisplayProps';

package/dist/src/components/atoms/PhoneNumberDisplay/index.ts

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay'
+export * from './PhoneNumberDisplayProps'

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

@@ -66,3 +66,6 @@ export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
+export * from './MobileTrigger';
+export * from './PhoneNumberDisplay';
+export * from './ContactInformationHeader';

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

@@ -66,3 +66,6 @@ export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
+export * from './MobileTrigger';
+export * from './PhoneNumberDisplay';
+export * from './ContactInformationHeader';

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

@@ -66,3 +66,6 @@ export * from './TrustPilot'
 export * from './Video'
 export * from './WhyLawDistrictItems'
 export * from './WideInfoBar'
+export * from './MobileTrigger'
+export * from './PhoneNumberDisplay'
+export * from './ContactInformationHeader'

package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.js

@@ -13,7 +13,7 @@ export const ContactInformation = styled.div `
     margin-bottom: 1rem;
     width: 100%;
 
-    @media (min-width: 768px) {
+    @media (min-width: 828px) {
       display: none;
     }
   }

package/dist/src/components/molecules/ContactInfo/ContactInfo.styled.ts

@@ -14,7 +14,7 @@ export const ContactInformation = styled.div`
     margin-bottom: 1rem;
     width: 100%;
 
-    @media (min-width: 768px) {
+    @media (min-width: 828px) {
       display: none;
     }
   }

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpPanelLink, HelpPanelListStyled, HelpPanelListTitle, HelpPanelListWrapper } from './HelpPanelList.styled';
+export const HelpPanelList = ({ title, items, homeUrl = '/' }) => {
+    return (_jsxs(HelpPanelListWrapper, { children: [_jsx(HelpPanelListTitle, { children: title }), _jsx(HelpPanelListStyled, { children: items.map((item) => (_jsx(HelpPanelLink, { title: item.title, children: _jsx("a", { href: `${homeUrl}${item.url}`, children: item.title }) }, item.title))) })] }));
+};

package/dist/src/components/molecules/HelpPanelList/HelpPanelList.styled.d.ts

@@ -0,0 +1,4 @@
+export declare const HelpPanelListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const HelpPanelListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HelpPanelListTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const HelpPanelLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/src/components/molecules/HelpPanelList/HelpPanelList.styled.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+export const HelpPanelListStyled = styled.ul `
+  display: flex;
+  flex-direction: column;
+`;
+export const HelpPanelListWrapper = styled.div `
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+`;
+export const HelpPanelListTitle = styled.p `
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-left: 0.25rem;
+`;
+export const HelpPanelLink = styled.li `
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+  list-style: none;
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem;
+
+    background-color: transparent;
+
+    text-decoration: none;
+    color: inherit;
+  }
+`;

package/dist/src/components/molecules/HelpPanelList/HelpPanelList.styled.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+export const HelpPanelListStyled = styled.ul`
+  display: flex;
+  flex-direction: column;
+`
+
+export const HelpPanelListWrapper = styled.div`
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+`
+
+export const HelpPanelListTitle = styled.p`
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-left: 0.25rem;
+`
+
+export const HelpPanelLink = styled.li`
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+  list-style: none;
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem;
+
+    background-color: transparent;
+
+    text-decoration: none;
+    color: inherit;
+  }
+`

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

@@ -0,0 +1,18 @@
+import { HelpPanelLink, HelpPanelListStyled, HelpPanelListTitle, HelpPanelListWrapper } from './HelpPanelList.styled'
+import { HelpPanelListProps } from './HelpPanelListProps'
+import React from 'react'
+
+export const HelpPanelList: React.FC<HelpPanelListProps> = ({ title, items, homeUrl = '/' }) => {
+  return (
+    <HelpPanelListWrapper>
+      <HelpPanelListTitle>{title}</HelpPanelListTitle>
+      <HelpPanelListStyled>
+        {items.map((item) => (
+          <HelpPanelLink key={item.title} title={item.title}>
+            <a href={`${homeUrl}${item.url}`}>{item.title}</a>
+          </HelpPanelLink>
+        ))}
+      </HelpPanelListStyled>
+    </HelpPanelListWrapper>
+  )
+}

package/dist/src/components/molecules/HelpPanelList/HelpPanelListProps.d.ts

@@ -0,0 +1,9 @@
+export interface MenuItem {
+    title: string;
+    url: string;
+}
+export interface HelpPanelListProps {
+    title: string;
+    items: MenuItem[];
+    homeUrl?: string;
+}

package/dist/src/components/molecules/HelpPanelList/HelpPanelListProps.js

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

package/dist/src/components/molecules/HelpPanelList/HelpPanelListProps.ts

@@ -0,0 +1,10 @@
+export interface MenuItem {
+  title: string
+  url: string
+}
+
+export interface HelpPanelListProps {
+  title: string
+  items: MenuItem[]
+  homeUrl?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './HelpPanelList';
+export * from './HelpPanelListProps';

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

@@ -0,0 +1,2 @@
+export * from './HelpPanelList';
+export * from './HelpPanelListProps';

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

@@ -0,0 +1,2 @@
+export * from './HelpPanelList'
+export * from './HelpPanelListProps'

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpSectionLink, HelpSectionList, HelpSectionStyled } from './HelpSection.styled';
+export const HelpSection = ({ title, items, homeUrl = '/' }) => {
+    return (_jsxs(HelpSectionStyled, { children: [_jsx("p", { children: title }), _jsx(HelpSectionList, { children: items.map((item) => (_jsx(HelpSectionLink, { title: item.title, children: _jsx("a", { href: `${homeUrl}${item.url}`, children: item.title }) }, item.title))) })] }));
+};

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

@@ -0,0 +1,3 @@
+export declare const HelpSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HelpSectionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const HelpSectionLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -0,0 +1,64 @@
+import arrowDown from '../../../../images/svg/arrow-down.svg';
+import styled from 'styled-components';
+export const HelpSectionStyled = styled.div `
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 1rem;
+
+  p::before {
+    position: absolute;
+    content: '';
+    background-image: url(${arrowDown});
+    width: 1.5rem;
+    height: 1.5rem;
+    left: 100%;
+    top: 0.2rem;
+    font-weight: 700;
+  }
+
+  p {
+    font-weight: 700;
+  }
+
+  &:hover > ul {
+    display: block;
+  }
+`;
+export const HelpSectionList = styled.ul `
+  display: none;
+  width: 150px;
+  position: absolute;
+  border-radius: 4px;
+  padding: 0.5rem;
+  top: 100%;
+  background: var(--others-white);
+  box-shadow: 0 0.25rem 0.5rem 0.25rem rgba(2, 55, 74, 0.2);
+  flex-flow: column wrap;
+  z-index: 1000;
+  right: -1rem;
+  gap: 0.5rem;
+`;
+export const HelpSectionLink = styled.li `
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+  list-style: none;
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem;
+
+    background-color: transparent;
+
+    text-decoration: none;
+    color: inherit;
+  }
+`;

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

@@ -0,0 +1,66 @@
+import arrowDown from '../../../../images/svg/arrow-down.svg'
+import styled from 'styled-components'
+
+export const HelpSectionStyled = styled.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 1rem;
+
+  p::before {
+    position: absolute;
+    content: '';
+    background-image: url(${arrowDown});
+    width: 1.5rem;
+    height: 1.5rem;
+    left: 100%;
+    top: 0.2rem;
+    font-weight: 700;
+  }
+
+  p {
+    font-weight: 700;
+  }
+
+  &:hover > ul {
+    display: block;
+  }
+`
+export const HelpSectionList = styled.ul`
+  display: none;
+  width: 150px;
+  position: absolute;
+  border-radius: 4px;
+  padding: 0.5rem;
+  top: 100%;
+  background: var(--others-white);
+  box-shadow: 0 0.25rem 0.5rem 0.25rem rgba(2, 55, 74, 0.2);
+  flex-flow: column wrap;
+  z-index: 1000;
+  right: -1rem;
+  gap: 0.5rem;
+`
+
+export const HelpSectionLink = styled.li`
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+  list-style: none;
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+
+  a {
+    display: block;
+    padding: 0.25rem;
+
+    background-color: transparent;
+
+    text-decoration: none;
+    color: inherit;
+  }
+`