@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextAreaStyled } from './TextArea.styled';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
+const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa, maxLength }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa, maxLength: maxLength }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

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

@@ -15,7 +15,8 @@ const TextArea: FC<TextAreaProps> = ({
   tooltip,
   validate = false,
   value,
-  dataQa
+  dataQa,
+  maxLength
 }) => {
   const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`
@@ -37,6 +38,7 @@ const TextArea: FC<TextAreaProps> = ({
         value={value}
         disabled={disabled}
         data-qa={dataQa}
+        maxLength={maxLength}
       />
       {Boolean(label) && (
         <div className={'e-textarea__inner'}>

package/dist/src/components/atoms/TextArea/TextAreaProps.types.d.ts

@@ -10,4 +10,5 @@ export interface TextAreaProps {
     validate?: boolean;
     disabled?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    maxLength?: number;
 }

package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts

@@ -10,4 +10,5 @@ export interface TextAreaProps {
   validate?: boolean
   disabled?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  maxLength?: number
 }

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

@@ -11,7 +11,7 @@ export const TopBarStyled = styled.div `
       height: 0;
     }
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       display: block;
     }
     @media ${device.mobile} {
@@ -26,7 +26,7 @@ export const TopBarStyled = styled.div `
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -50,6 +50,53 @@ export const TopBarStyled = styled.div `
           display: inherit;
         }
       }
+
+      &-mobile {
+        background-color: var(--neutral-neutral-5);
+        display: flex;
+        padding: 0.5rem 1rem;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: var(--s-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+        position: fixed;
+        top: 0.5rem;
+        left: 0.5rem;
+        right: 0.5rem;
+
+        &.fade-In {
+          visibility: visible;
+          opacity: 1;
+          transition:
+            visibility 0s linear 0s,
+            opacity 300ms;
+        }
+
+        &.fade-Out {
+          visibility: hidden;
+          opacity: 0;
+          transition:
+            visibility 0s linear 300ms,
+            opacity 300ms;
+        }
+
+        > b {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          a {
+            display: contents;
+          }
+
+          img {
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
   }
 `;

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

@@ -12,7 +12,7 @@ export const TopBarStyled = styled.div`
       height: 0;
     }
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       display: block;
     }
     @media ${device.mobile} {
@@ -27,7 +27,7 @@ export const TopBarStyled = styled.div`
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: flex-end;
+      align-items: center;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -51,6 +51,53 @@ export const TopBarStyled = styled.div`
           display: inherit;
         }
       }
+
+      &-mobile {
+        background-color: var(--neutral-neutral-5);
+        display: flex;
+        padding: 0.5rem 1rem;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: var(--s-border-radius);
+        box-shadow: var(--box-shadow-container);
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.3px;
+        position: fixed;
+        top: 0.5rem;
+        left: 0.5rem;
+        right: 0.5rem;
+
+        &.fade-In {
+          visibility: visible;
+          opacity: 1;
+          transition:
+            visibility 0s linear 0s,
+            opacity 300ms;
+        }
+
+        &.fade-Out {
+          visibility: hidden;
+          opacity: 0;
+          transition:
+            visibility 0s linear 300ms,
+            opacity 300ms;
+        }
+
+        > b {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          a {
+            display: contents;
+          }
+
+          img {
+            margin-right: 0.5rem;
+          }
+        }
+      }
     }
   }
 `

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

@@ -14,7 +14,7 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   return (
     <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
-        <div className={'top-bar-content'}>{children}</div>
+        <div className='top-bar-content'>{children}</div>
       </div>
     </TopBarStyled>
   )

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

@@ -3,6 +3,6 @@ import { WhyLawDistrictItemsStyled } from './WhyLawDistrictItems.styled';
 export const WhyLawDistrictItems = ({ items }) => {
     if (items.length === 0)
         return null;
-    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
+    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyItems', children: items.map((item) => (_jsx("li", { className: 'whyItems__item', children: item.reasons }, item.id))) }));
 };
 export default WhyLawDistrictItems;

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

@@ -13,7 +13,7 @@ export const WhyLawDistrictItemsStyled = styled.ul `
     padding: 0 1rem;
   }
 
-  .whyLawDistrictItems {
+  .whyItems {
     &__item {
       max-width: 100%;
       color: var(--neutral-neutral-2);

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

@@ -14,7 +14,7 @@ export const WhyLawDistrictItemsStyled = styled.ul`
     padding: 0 1rem;
   }
 
-  .whyLawDistrictItems {
+  .whyItems {
     &__item {
       max-width: 100%;
       color: var(--neutral-neutral-2);

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

@@ -7,9 +7,9 @@ export const WhyLawDistrictItems: React.FC<WhyLawDistrictItemsProps> = ({ items
   if (items.length === 0) return null
 
   return (
-    <WhyLawDistrictItemsStyled className={'whyLawDistrictItems'}>
+    <WhyLawDistrictItemsStyled className={'whyItems'}>
       {items.map((item) => (
-        <li className={'whyLawDistrictItems__item'} key={item.id}>
+        <li className={'whyItems__item'} key={item.id}>
           {item.reasons}
         </li>
       ))}

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

@@ -18,14 +18,24 @@ export const WideInfoBarStyled = styled.div `
       justify-content: space-between;
       padding: 1rem 2rem;
 
+      @media ${device.tablets} {
+        flex-flow: row;
+        font-size: 0.9rem;
+        padding: 1rem 2rem;
+        gap: 1rem;
+        flex-wrap: wrap;
+      }
+
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
         padding: 0;
+        gap: 0.5rem;
       }
 
       @media ${device.desktop} {
         padding: 0;
+        gap: 1rem;
       }
     }
   }

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

@@ -19,14 +19,24 @@ export const WideInfoBarStyled = styled.div`
       justify-content: space-between;
       padding: 1rem 2rem;
 
+      @media ${device.tablets} {
+        flex-flow: row;
+        font-size: 0.9rem;
+        padding: 1rem 2rem;
+        gap: 1rem;
+        flex-wrap: wrap;
+      }
+
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
         padding: 0;
+        gap: 0.5rem;
       }
 
       @media ${device.desktop} {
         padding: 0;
+        gap: 1rem;
       }
     }
   }

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

@@ -1,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitRatafiaCard';
+export * from './BenefitCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
+export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';
@@ -15,6 +16,7 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
+export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -30,7 +32,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItems';
+export * from './MenuItemsDeprecated';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -60,8 +62,12 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
-export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
+export * from './MobileTrigger';
+export * from './PhoneNumberDisplay';
+export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -1,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitRatafiaCard';
+export * from './BenefitCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
+export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';
@@ -15,6 +16,7 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
+export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -30,7 +32,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItems';
+export * from './MenuItemsDeprecated';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -60,8 +62,12 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
-export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
+export * from './MobileTrigger';
+export * from './PhoneNumberDisplay';
+export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -1,12 +1,13 @@
 export * from './ActionButtonHeaderRatafiaCard'
 export * from './AddButton'
 export * from './BaseBox'
-export * from './BenefitRatafiaCard'
+export * from './BenefitCard'
 export * from './BillCard'
 export * from './BottomOverlayMenu'
 export * from './BreadcrumItem'
 export * from './Button'
 export * from './ButtonIcon'
+export * from './CardBox'
 export * from './CardPane'
 export * from './Checkbox'
 export * from './ContactCard'
@@ -15,6 +16,7 @@ export * from './DialogMenuIcon'
 export * from './Disclaimer'
 export * from './DisclaimerRatafia'
 export * from './Divider'
+export * from './DropdownInput'
 export * from './DocumentStatus'
 export * from './DocumentTag'
 export * from './ExpertCard'
@@ -30,7 +32,7 @@ export * from './JumbotronStatic'
 export * from './KeyFactRatafiaCard'
 export * from './Logo'
 export * from './LogoText'
-export * from './MenuItems'
+export * from './MenuItemsDeprecated'
 export * from './Message'
 export * from './MessageInformation'
 export * from './MoreDocsItem'
@@ -60,8 +62,12 @@ export * from './TextArea'
 export * from './Toggle'
 export * from './Tooltip'
 export * from './TopBar'
-export * from './TopBarMobile'
 export * from './TrustPilot'
 export * from './Video'
 export * from './WhyLawDistrictItems'
 export * from './WideInfoBar'
+export * from './MobileTrigger'
+export * from './PhoneNumberDisplay'
+export * from './ContactInformationHeader'
+export * from './FeatureItem'
+export * from './PlanCard'

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type AccordionItemProps } from './AccordionItemProps.types';
-export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title }: AccordionItemProps) => React.JSX.Element;
+export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title, heightAutoChange }: AccordionItemProps) => React.JSX.Element;

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

@@ -1,21 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
 import { AccordionItemStyled } from './AccordionItem.styled';
-export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
+export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
     const { dispatch } = useDispatchDataAccordionItem();
+    const [heightAccordionItem, setHeightAccordionItem] = React.useState(defaultHeightItem);
     useEffect(() => {
         if (state.locked.actionType === 'unlocked') {
             onClick();
             dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
         }
     }, [state.locked.actionType]);
+    useEffect(() => {
+        let intervalId;
+        if (heightAutoChange) {
+            intervalId = setInterval(() => {
+                const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem;
+                if (heightAccordionItem !== height) {
+                    setHeightAccordionItem(height);
+                }
+            }, 500);
+        }
+        else {
+            setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem);
+        }
+        return () => {
+            if (intervalId !== undefined) {
+                clearInterval(intervalId);
+            }
+        };
+    }, []);
     return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();
-                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }, children: children })] }));
+                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
 };

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

@@ -33,7 +33,7 @@ export const AccordionItemStyled = styled.div `
     letter-spacing: -0.3px;
 
     &.--success {
-      background: #eff7f5;
+      background: var(--primary-main-light-6);
     }
 
     &.--locked {
@@ -55,6 +55,10 @@ export const AccordionItemStyled = styled.div `
 
     &.--locked {
       color: var(--neutral-neutral-2);
+
+      html[data-theme='primaryblue'] & {
+        color: var(--primary-main-dark-1);
+      }
     }
   }
 
@@ -64,5 +68,6 @@ export const AccordionItemStyled = styled.div `
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
+    color: black;
   }
 `;

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

@@ -34,7 +34,7 @@ export const AccordionItemStyled = styled.div`
     letter-spacing: -0.3px;
 
     &.--success {
-      background: #eff7f5;
+      background: var(--primary-main-light-6);
     }
 
     &.--locked {
@@ -56,6 +56,10 @@ export const AccordionItemStyled = styled.div`
 
     &.--locked {
       color: var(--neutral-neutral-2);
+
+      html[data-theme='primaryblue'] & {
+        color: var(--primary-main-dark-1);
+      }
     }
   }
 
@@ -65,5 +69,6 @@ export const AccordionItemStyled = styled.div`
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
+    color: black;
   }
 `

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

@@ -12,11 +12,13 @@ export const AccordionItem = ({
   index,
   isOpen,
   onClick,
-  title
+  title,
+  heightAutoChange = false
 }: AccordionItemProps): React.JSX.Element => {
   const contenReftHeight = useRef<HTMLInputElement>(null)
   const { state } = useStateDataAccordionItem(index)
   const { dispatch } = useDispatchDataAccordionItem()
+  const [heightAccordionItem, setHeightAccordionItem] = React.useState<number>(defaultHeightItem)
 
   useEffect(() => {
     if (state.locked.actionType === 'unlocked') {
@@ -25,6 +27,25 @@ export const AccordionItem = ({
     }
   }, [state.locked.actionType])
 
+  useEffect(() => {
+    let intervalId: ReturnType<typeof setInterval> | undefined
+    if (heightAutoChange) {
+      intervalId = setInterval(() => {
+        const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem
+        if (heightAccordionItem !== height) {
+          setHeightAccordionItem(height)
+        }
+      }, 500)
+    } else {
+      setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem)
+    }
+    return () => {
+      if (intervalId !== undefined) {
+        clearInterval(intervalId)
+      }
+    }
+  }, [])
+
   return (
     <AccordionItemStyled className='accordion__container'>
       <button
@@ -42,7 +63,7 @@ export const AccordionItem = ({
       <div
         ref={contenReftHeight}
         className={`accordion__content ${!isOpen ? '--closed' : ''}`}
-        style={isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }}
+        style={isOpen ? { height: heightAccordionItem } : { height: '0px' }}
       >
         {children}
       </div>

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.d.ts

@@ -6,4 +6,5 @@ export interface AccordionItemProps {
     isOpen?: boolean;
     onClick: () => void;
     title?: string;
+    heightAutoChange?: boolean;
 }

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.ts

@@ -6,4 +6,5 @@ export interface AccordionItemProps {
   isOpen?: boolean
   onClick: () => void
   title?: string
+  heightAutoChange?: boolean
 }

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AllTypeDocumentsItemMenuStyled } from './AllTypeDocumentsItemMenu.styled';
+export const AllTypeDocumentsItemMenu = ({ type, slug, seeAllTypeDocs, routes, hasSubCategoryPage }) => {
+    const url = hasSubCategoryPage ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(slug) : routes.LEGAL_DOCUMENTS_WITH_HASH(slug);
+    return (_jsx(AllTypeDocumentsItemMenuStyled, { className: 'products__list__section__li all-item', children: _jsx("a", { title: seeAllTypeDocs.replace(/{{type}}/g, type), "data-qa": `Mobile_Header_Menu_All_${slug}`, href: url, children: seeAllTypeDocs.replace(/{{type}}/g, type) }) }));
+};

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

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const AllTypeDocumentsItemMenuStyled = styled.li `
+  list-style: none;
+  margin-top: 1rem;
+  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+
+  &.all-item {
+    font-weight: bold;
+  }
+
+  &:last-child {
+    margin-bottom: 1.5rem;
+  }
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+`;

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const AllTypeDocumentsItemMenuStyled = styled.li`
+  list-style: none;
+  margin-top: 1rem;
+  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+
+  &.all-item {
+    font-weight: bold;
+  }
+
+  &:last-child {
+    margin-bottom: 1.5rem;
+  }
+
+  &:hover {
+    background-color: var(--primary-main-light-5);
+  }
+`