@npm_leadtech/legal-lib-components 7.19.0 → 7.19.2

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;
+  }
+`

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/NavBarDropDown/NavBarDropDown.tsx

@@ -18,7 +18,7 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   setEnableScrollbarOnClose,
   setIsOpen
 }): React.ReactElement | null => {
-  const [ref, isIntersectingWithElement] = useIntersectionObserver<HTMLDivElement>({
+  const [ref, isIntersectingWithElement] = useIntersectionObserver({
     options: { threshold: 0.15 }
   })
 

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

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SocialList } from './SocialLinks.styled';
-import { useIntersectionObserver } from '../../../hooks';
 export const SocialLinks = ({ links }) => {
-    return (_jsx(SocialList, { children: links.map((social) => {
-            const [ref, isIntersecting] = useIntersectionObserver({});
-            return (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { ref: ref, src: isIntersecting ? social.iconSrc : '', alt: social.alt, width: '20', height: '20' }) }) }, social.url));
-        }) }));
+    return (_jsx(SocialList, { children: links.map((social) => (_jsx("li", { children: _jsx("a", { href: social.url, rel: 'noopener noreferrer', target: '_blank', children: _jsx("img", { src: social.iconSrc, alt: social.alt, width: '20', height: '20' }) }) }, social.url))) }));
 };

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

@@ -1,21 +1,17 @@
 import React from 'react'
 import { SocialLinksProps } from './SocialLinksProps.types'
 import { SocialList } from './SocialLinks.styled'
-import { useIntersectionObserver } from '../../../hooks'
 
 export const SocialLinks: React.FC<SocialLinksProps> = ({ links }) => {
   return (
     <SocialList>
-      {links.map((social) => {
-        const [ref, isIntersecting] = useIntersectionObserver<HTMLImageElement>({})
-        return (
-          <li key={social.url}>
-            <a href={social.url} rel='noopener noreferrer' target='_blank'>
-              <img ref={ref} src={isIntersecting ? social.iconSrc : ''} alt={social.alt} width='20' height='20' />
-            </a>
-          </li>
-        )
-      })}
+      {links.map((social) => (
+        <li key={social.url}>
+          <a href={social.url} rel='noopener noreferrer' target='_blank'>
+            <img src={social.iconSrc} alt={social.alt} width='20' height='20' />
+          </a>
+        </li>
+      ))}
     </SocialList>
   )
 }

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -55,10 +55,6 @@
     font-weight: bold;
   }
 
-  .e-text__inner {
-    grid-row: 1;
-  }
-
   .form-group__label-icon {
     color: var(--neutral-neutral-1);
     font-weight: bold;
@@ -154,8 +150,6 @@
 
   &--has-prefix {
     width: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
 
     @include portrait-tablets {
       width: 50%;
@@ -163,23 +157,14 @@
 
     .has-currency-prefix {
       padding-left: 2rem;
-      grid-column: 1;
-      grid-row: 2;
-      align-self: center;
     }
 
     .has-currency-suffix {
       padding-right: 2rem;
-      grid-column: 1;
-      grid-row: 2;
-      align-self: center;
     }
 
     .has-percent-suffix {
       padding-left: 0.75rem;
-      grid-column: 1;
-      grid-row: 2;
-      align-self: center;
     }
   }
 
@@ -200,28 +185,27 @@
   }
 
   .input-icon-currency-suffix {
-    grid-column: 1;
-    grid-row: 2;
-    align-self: center;
-    margin-left: calc(100% - 30px);
-    width: fit-content;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    background: none;
+    border: none;
   }
 
   .input-icon-currency-prefix {
-    grid-column: 1;
-    grid-row: 2;
-    align-self: center;
-    z-index: 1;
-    padding-left: 0.87rem;
-    width: fit-content;
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background: none;
+    border: none;
   }
 
   .input-icon-percent-suffix {
-    grid-column: 1;
-    grid-row: 2;
-    align-self: center;
-    margin-left: calc(100% - 30px);
-    width: fit-content;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    background: none;
+    border: none;
   }
 
   .formgroup--input__button {

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -124,7 +124,7 @@ export const MaskInput: Story = {
   }
 }
 
-export const WithSufixEuro: Story = {
+export const WithPrefixEuro: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -146,7 +146,7 @@ export const WithPrefixNoEuro: Story = {
   }
 }
 
-export const WithSufixPercent: Story = {
+export const WithPrefixPercent: Story = {
   args: {
     name: 'prefix',
     label: 'Price:',
@@ -156,14 +156,3 @@ export const WithSufixPercent: Story = {
     country: 'US'
   }
 }
-
-export const WithPrefixPercent: Story = {
-  args: {
-    name: 'prefix',
-    label: 'Price:',
-    value: '20.30',
-    type: 'text',
-    prefix: 'currency',
-    country: 'CA'
-  }
-}

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

@@ -12,8 +12,6 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
-export * from './ContactInfoBox';
-export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';
@@ -56,3 +54,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

@@ -12,8 +12,6 @@ export * from './Breadcrumb';
 export * from './ContactBox';
 export * from './ContactCardList';
 export * from './ContactInfo';
-export * from './ContactInfoBox';
-export * from './ContactInfoBoxMobile';
 export * from './ContinueEditingBanner';
 export * from './CountDownMessage';
 export * from './DocumentListMenuSection';
@@ -56,3 +54,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

@@ -12,8 +12,6 @@ export * from './Breadcrumb'
 export * from './ContactBox'
 export * from './ContactCardList'
 export * from './ContactInfo'
-export * from './ContactInfoBox'
-export * from './ContactInfoBoxMobile'
 export * from './ContinueEditingBanner'
 export * from './CountDownMessage'
 export * from './DocumentListMenuSection'
@@ -56,3 +54,5 @@ export * from './TypeModulesList'
 export * from './UploadRatafiaZone'
 export * from './WarningBox'
 export * from './InfoBarFooter'
+export * from './HelpSection'
+export * from './HelpPanelList'

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules';
 import { Button } from '../../atoms';
-import { ContactInfoBox } from '../../molecules/ContactInfoBox';
 import { ContactJumbotronStyled } from './ContactJumbotron.styled';
-export const ContactJumbotron = ({ faqsTitle, visitFaqPageLabel, children, isJonSnow = false, items }) => {
-    return (_jsxs(ContactJumbotronStyled, { children: [_jsx(ContactInfoBox, { items: items }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' }))] }));
+export const ContactJumbotron = ({ phoneBoxDesktopProps, emailContactBoxProps, faqsTitle, visitFaqPageLabel, children, isJonSnow = false }) => {
+    return (_jsxs(ContactJumbotronStyled, { children: [!isJonSnow && _jsx(PhoneContactBoxDesktop, { ...phoneBoxDesktopProps }), _jsx("h2", { className: 'contact__text__title sans-serif', children: faqsTitle }), _jsx("div", { className: 'contact__text__subtitle sans-serif', children: children }), !isJonSnow && (_jsx(Button, { givenClass: 'faq-button', color: 'secondary', label: visitFaqPageLabel, link: '/faqs/', dataQa: 'visitFaq' })), _jsx(EmailContactBox, { ...emailContactBoxProps })] }));
 };

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

@@ -35,6 +35,7 @@ export const ContactJumbotronStyled = styled.article `
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
+    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

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

@@ -36,6 +36,7 @@ export const ContactJumbotronStyled = styled.article`
   .faq-button {
     display: inline-block;
     margin-top: 1rem;
+    width: 100%;
     @media ${device['portrait-tablets']} {
       width: 10rem;
     }

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

@@ -1,20 +1,21 @@
 import React from 'react'
 
+import { EmailContactBox, PhoneContactBoxDesktop } from '../../molecules'
 import { Button } from '../../atoms'
-import { ContactInfoBox } from '../../molecules/ContactInfoBox'
 import { type ContactJumbotronProps } from './ContactJumbotronProps.types'
 import { ContactJumbotronStyled } from './ContactJumbotron.styled'
 
 export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
+  phoneBoxDesktopProps,
+  emailContactBoxProps,
   faqsTitle,
   visitFaqPageLabel,
   children,
-  isJonSnow = false,
-  items
+  isJonSnow = false
 }) => {
   return (
     <ContactJumbotronStyled>
-      <ContactInfoBox items={items} />
+      {!isJonSnow && <PhoneContactBoxDesktop {...phoneBoxDesktopProps} />}
       <h2 className='contact__text__title sans-serif'>{faqsTitle}</h2>
       <div className='contact__text__subtitle sans-serif'>{children}</div>
       {!isJonSnow && (
@@ -26,6 +27,7 @@ export const ContactJumbotron: React.FC<ContactJumbotronProps> = ({
           dataQa={'visitFaq'}
         />
       )}
+      <EmailContactBox {...emailContactBoxProps} />
     </ContactJumbotronStyled>
   )
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.d.ts

@@ -1,9 +1,10 @@
-import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard';
 import type React from 'react';
+import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules';
 export interface ContactJumbotronProps {
+    phoneBoxDesktopProps: PhoneContactBoxDesktopProps;
+    emailContactBoxProps: EmailContactBoxProps;
     faqsTitle: string;
     visitFaqPageLabel: string;
     children: React.ReactNode;
     isJonSnow?: boolean;
-    items: ContactInfoCardProps[];
 }

package/dist/src/components/organisms/ContactJumbotron/ContactJumbotronProps.types.ts

@@ -1,10 +1,12 @@
-import { ContactInfoCardProps } from 'src/components/molecules/ContactInfoCard'
 import type React from 'react'
 
+import { type EmailContactBoxProps, type PhoneContactBoxDesktopProps } from '../../molecules'
+
 export interface ContactJumbotronProps {
+  phoneBoxDesktopProps: PhoneContactBoxDesktopProps
+  emailContactBoxProps: EmailContactBoxProps
   faqsTitle: string
   visitFaqPageLabel: string
   children: React.ReactNode
   isJonSnow?: boolean
-  items: ContactInfoCardProps[]
 }

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,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/organisms/MobileMenu/MobileMenu.tsx
+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;
+`;