@npm_leadtech/legal-lib-components 7.25.4 → 7.25.6

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

@@ -4,7 +4,7 @@ export const DropdownInputStyled = styled.div `
   position: relative;
   padding: 1.5rem;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     padding: 16px 24px;
   }
 
@@ -18,7 +18,7 @@ export const DropdownInputStyled = styled.div `
     transition: all 0.25s;
     border-bottom: 1px solid var(--neutral-neutral-4);
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       border-top: 2px solid transparent;
       border-bottom: none;
     }
@@ -26,7 +26,7 @@ export const DropdownInputStyled = styled.div `
     &:focus-within {
       border-bottom: 2px var(--neutral-neutral-4) solid;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         border-bottom: none;
       }
 
@@ -69,7 +69,7 @@ export const DropdownInputStyled = styled.div `
       color: var(--neutral-neutral-3);
       fill: var(--neutral-neutral-3);
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         cursor: pointer;
       }
 
@@ -97,7 +97,7 @@ export const DropdownInputStyled = styled.div `
         .dropdown_input__container__icon__main {
           display: none;
 
-          @media ${device['landscape-tablets']} {
+          @media ${device.tablets} {
             display: block;
           }
         }
@@ -105,7 +105,7 @@ export const DropdownInputStyled = styled.div `
         .dropdown_input__container__icon__clear {
           opacity: 1;
 
-          @media ${device['landscape-tablets']} {
+          @media ${device.tablets} {
             display: none;
           }
         }
@@ -134,7 +134,7 @@ export const DropdownInputStyled = styled.div `
     border-top: none;
     padding: 1rem 2rem;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       opacity: 1;
       left: 0;
       top: 100%;

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

@@ -5,7 +5,7 @@ export const DropdownInputStyled = styled.div`
   position: relative;
   padding: 1.5rem;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     padding: 16px 24px;
   }
 
@@ -19,7 +19,7 @@ export const DropdownInputStyled = styled.div`
     transition: all 0.25s;
     border-bottom: 1px solid var(--neutral-neutral-4);
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       border-top: 2px solid transparent;
       border-bottom: none;
     }
@@ -27,7 +27,7 @@ export const DropdownInputStyled = styled.div`
     &:focus-within {
       border-bottom: 2px var(--neutral-neutral-4) solid;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         border-bottom: none;
       }
 
@@ -70,7 +70,7 @@ export const DropdownInputStyled = styled.div`
       color: var(--neutral-neutral-3);
       fill: var(--neutral-neutral-3);
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         cursor: pointer;
       }
 
@@ -98,7 +98,7 @@ export const DropdownInputStyled = styled.div`
         .dropdown_input__container__icon__main {
           display: none;
 
-          @media ${device['landscape-tablets']} {
+          @media ${device.tablets} {
             display: block;
           }
         }
@@ -106,7 +106,7 @@ export const DropdownInputStyled = styled.div`
         .dropdown_input__container__icon__clear {
           opacity: 1;
 
-          @media ${device['landscape-tablets']} {
+          @media ${device.tablets} {
             display: none;
           }
         }
@@ -135,7 +135,7 @@ export const DropdownInputStyled = styled.div`
     border-top: none;
     padding: 1rem 2rem;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       opacity: 1;
       left: 0;
       top: 100%;

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

@@ -55,7 +55,7 @@ export const FixedFooterStyled = styled.div `
     margin: auto;
     padding: 2.75rem 1rem 1rem;
   }
-  @media (min-width: 720px) {
+  @media (min-width: 1024px) {
     footer .language-selector-mobile-container {
       display: none;
     }

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

@@ -56,7 +56,7 @@ export const FixedFooterStyled = styled.div`
     margin: auto;
     padding: 2.75rem 1rem 1rem;
   }
-  @media (min-width: 720px) {
+  @media (min-width: 1024px) {
     footer .language-selector-mobile-container {
       display: none;
     }

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

@@ -43,6 +43,6 @@ const LOGOS = {
         white: lawdistrictonlineWhite
     }
 };
-export const Logo = ({ className, siteName = 'lawdistrict', type = 'default', width, height, isLoadingLazy = false }) => {
-    return (_jsx("img", { className: className, src: LOGOS[siteName.toLowerCase()][type], alt: `${siteName} logo`, width: width, height: height, loading: isLoadingLazy ? 'lazy' : 'eager' }));
+export const Logo = ({ className, siteName = 'lawdistrict', type = 'default', width, height }) => {
+    return (_jsx("img", { className: className, src: LOGOS[siteName.toLowerCase()][type], alt: `${siteName} logo`, width: width, height: height }));
 };

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

@@ -55,8 +55,7 @@ export const Logo: FC<LogoProps> = ({
   siteName = 'lawdistrict',
   type = 'default',
   width,
-  height,
-  isLoadingLazy = false
+  height
 }): React.ReactElement => {
   return (
     <img
@@ -65,7 +64,6 @@ export const Logo: FC<LogoProps> = ({
       alt={`${siteName} logo`}
       width={width}
       height={height}
-      loading={isLoadingLazy ? 'lazy' : 'eager'}
     />
   )
 }

package/dist/src/components/atoms/Logo/LogoProps.types.d.ts

@@ -4,5 +4,4 @@ export interface LogoProps {
     width?: string;
     height?: string;
     type?: string;
-    isLoadingLazy?: boolean;
 }

package/dist/src/components/atoms/Logo/LogoProps.types.ts

@@ -4,5 +4,4 @@ export interface LogoProps {
   width?: string
   height?: string
   type?: string
-  isLoadingLazy?: boolean
 }

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss

@@ -1,6 +1,7 @@
 .ratafia-landing-icon {
-  padding: 0.25rem 0.5rem;
+  padding: 1px 4px;
   border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-1);
   background: var(--secondary-main-light-3);
+  font-size: 12px;
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
+import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
@@ -25,7 +25,7 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
 };
 const SearchSelect = (props) => {
     const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
-    const [menuPortalTarget, setMenuPortalTarget] = React.useState();
+    const [menuPortalTarget, setMenuPortalTarget] = useState();
     const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
     const defaultValue = props.defaultValue;
     const classnames = classNames({
@@ -34,7 +34,7 @@ const SearchSelect = (props) => {
         [customClass]: props.customClass,
         '--group-invalid': !props.isValidGroup
     });
-    React.useEffect(() => {
+    useEffect(() => {
         setMenuPortalTarget(document.body);
     }, []);
     const handleChange = (selectedOption) => {

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, { type FC } from 'react'
+import React, { type FC, useEffect, useState } from 'react'
 import Select from 'react-select'
 
 import { type SearchSelectProps } from './SearchSelectProps.types'
@@ -28,7 +28,7 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
 
 const SearchSelect: FC<SearchSelectProps> = (props) => {
   const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
-  const [menuPortalTarget, setMenuPortalTarget] = React.useState<HTMLElement | undefined>()
+  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
   const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
   const defaultValue = props.defaultValue as unknown as string
 
@@ -39,7 +39,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     '--group-invalid': !props.isValidGroup
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     setMenuPortalTarget(document.body)
   }, [])
 

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} {

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} {

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: 828px) {
+    @media (min-width: 1024px) {
       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: 828px) {
+    @media (min-width: 1024px) {
       display: none;
     }
   }

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const DesktopSearchBarStyled = styled.div `
   display: none;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: block;
     position: absolute;
     top: 75px;

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

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const DesktopSearchBarStyled = styled.div`
   display: none;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: block;
     position: absolute;
     top: 75px;

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

@@ -4,7 +4,7 @@ export const MobileSearchBarStyled = styled.div `
   display: block;
   width: 100%;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: none;
   }
 

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

@@ -5,7 +5,7 @@ export const MobileSearchBarStyled = styled.div`
   display: block;
   width: 100%;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: none;
   }
 

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

@@ -4,7 +4,7 @@ export const SearchBarStyled = styled.div `
   .search-icon-container {
     display: none;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       display: block;
     }
   }

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

@@ -5,7 +5,7 @@ export const SearchBarStyled = styled.div`
   .search-icon-container {
     display: none;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       display: block;
     }
   }

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

@@ -3,5 +3,5 @@ import { BottomFooterStyled, BottomFooterText, BottomFooterWrapper, CompanyLink,
 import { Logo } from '../../atoms/Logo/Logo';
 import { SocialLinks } from '../../molecules/SocialLinks';
 export const BottomFooter = ({ siteName, companyLinks, socialLinks, disclaimerText, copyrightText }) => {
-    return (_jsx(BottomFooterWrapper, { children: _jsxs(BottomFooterStyled, { children: [_jsxs(LogoSocialsWrapper, { className: 'footer__logo', children: [_jsx(Logo, { className: 'footer__lawdistrict', siteName: siteName, width: '138', height: '24', type: 'white', isLoadingLazy: true }), socialLinks && _jsx(SocialLinks, { links: socialLinks })] }), _jsx("div", { children: _jsx(CompanyList, { children: companyLinks?.map((link) => (_jsx("li", { children: _jsx(CompanyLink, { href: link.url, className: 'sans-serif --extra-small', "data-qa": link.dataQa, rel: link.rel, children: link.name }) }, link.url))) }) }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: disclaimerText }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: copyrightText })] }) }));
+    return (_jsx(BottomFooterWrapper, { children: _jsxs(BottomFooterStyled, { children: [_jsxs(LogoSocialsWrapper, { className: 'footer__logo', children: [_jsx(Logo, { className: 'footer__lawdistrict', siteName: siteName, width: '138', height: '24', type: 'white' }), socialLinks && _jsx(SocialLinks, { links: socialLinks })] }), _jsx("div", { children: _jsx(CompanyList, { children: companyLinks?.map((link) => (_jsx("li", { children: _jsx(CompanyLink, { href: link.url, className: 'sans-serif --extra-small', "data-qa": link.dataQa, rel: link.rel, children: link.name }) }, link.url))) }) }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: disclaimerText }), _jsx(BottomFooterText, { className: 'sans-serif --extra-small', children: copyrightText })] }) }));
 };

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

@@ -22,14 +22,7 @@ export const BottomFooter: React.FC<BottomFooterProps> = ({
     <BottomFooterWrapper>
       <BottomFooterStyled>
         <LogoSocialsWrapper className={'footer__logo'}>
-          <Logo
-            className='footer__lawdistrict'
-            siteName={siteName}
-            width='138'
-            height='24'
-            type='white'
-            isLoadingLazy
-          />
+          <Logo className='footer__lawdistrict' siteName={siteName} width='138' height='24' type='white' />
           {socialLinks && <SocialLinks links={socialLinks} />}
         </LogoSocialsWrapper>
         <div>

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

@@ -7,7 +7,7 @@ export const DocumentListMenuStyled = styled.div `
   width: 100%;
   padding: 1rem 0;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: none;
   }
 
@@ -17,7 +17,7 @@ export const DocumentListMenuStyled = styled.div `
     align-items: flex-start;
     margin: auto;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       width: 696px;
     }
 
@@ -33,7 +33,7 @@ export const DocumentListMenuStyled = styled.div `
       text-align: left;
       width: 100%;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         width: 33%;
         padding-right: 1rem;
         &:nth-child(3) {

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

@@ -8,7 +8,7 @@ export const DocumentListMenuStyled = styled.div`
   width: 100%;
   padding: 1rem 0;
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: none;
   }
 
@@ -18,7 +18,7 @@ export const DocumentListMenuStyled = styled.div`
     align-items: flex-start;
     margin: auto;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       width: 696px;
     }
 
@@ -34,7 +34,7 @@ export const DocumentListMenuStyled = styled.div`
       text-align: left;
       width: 100%;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         width: 33%;
         padding-right: 1rem;
         &:nth-child(3) {

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

@@ -39,6 +39,7 @@ export const MenuItemsStyled = styled.div `
   .left-nav {
     display: flex;
     align-items: center;
+    gap: 1rem;
   }
 
   .header-phone {
@@ -69,7 +70,7 @@ export const MenuItemsStyled = styled.div `
     }
   }
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -87,10 +88,9 @@ export const MenuItemsStyled = styled.div `
     .navigation-pane__products__container,
     .navigation-pane__resources__container {
       display: flex;
-      gap: 0.5rem;
       display: none;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         display: flex;
       }
     }
@@ -103,12 +103,10 @@ export const MenuItemsStyled = styled.div `
   .navigation-pane__resources,
   .navigation-pane__help {
     position: relative;
-    margin-left: 0.5rem;
     padding: 0.75rem 0;
     cursor: pointer;
 
     @media ${device['portrait-tablets']} {
-      margin-right: 1.5rem;
       padding-bottom: 0.5rem;
     }
 
@@ -137,7 +135,7 @@ export const MenuItemsStyled = styled.div `
     .products__list,
     .help__list,
     .resources__list {
-      @media (min-width: 720px) {
+      @media (min-width: ${size.tab}) {
         border-radius: var(--s-border-radius);
         padding: 0.75rem 1rem;
         display: flex;
@@ -255,7 +253,7 @@ export const MenuItemsStyled = styled.div `
       width: 100%;
     }
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: none;
     }
 
@@ -339,7 +337,11 @@ export const MenuItemsStyled = styled.div `
     align-items: center;
     min-width: 18rem;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
+    @media (max-width: 1024px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: ${size.tab}) and (max-width: ${size.lg}) {
       min-width: 12rem;
     }
 
@@ -367,7 +369,7 @@ export const MenuItemsStyled = styled.div `
     .navigation-pane.--is-mobile {
       display: flex;
 
-      @media ${device['landscape-tablets']} {
+      @media (max-width: ${size.tab}) {
         display: none;
       }
 
@@ -639,12 +641,12 @@ export const MenuItemsStyled = styled.div `
   .is-tablet {
     display: none;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: flex;
     }
   }
 
-  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+  @media (min-width: ${size.xxs}) and (max-width: ${size.tab}) {
     .navigation-pane__wrapper {
       display: flex;
       flex-direction: column;

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

@@ -40,6 +40,7 @@ export const MenuItemsStyled = styled.div`
   .left-nav {
     display: flex;
     align-items: center;
+    gap: 1rem;
   }
 
   .header-phone {
@@ -70,7 +71,7 @@ export const MenuItemsStyled = styled.div`
     }
   }
 
-  @media ${device['landscape-tablets']} {
+  @media ${device.tablets} {
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -88,10 +89,9 @@ export const MenuItemsStyled = styled.div`
     .navigation-pane__products__container,
     .navigation-pane__resources__container {
       display: flex;
-      gap: 0.5rem;
       display: none;
 
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         display: flex;
       }
     }
@@ -104,12 +104,10 @@ export const MenuItemsStyled = styled.div`
   .navigation-pane__resources,
   .navigation-pane__help {
     position: relative;
-    margin-left: 0.5rem;
     padding: 0.75rem 0;
     cursor: pointer;
 
     @media ${device['portrait-tablets']} {
-      margin-right: 1.5rem;
       padding-bottom: 0.5rem;
     }
 
@@ -138,7 +136,7 @@ export const MenuItemsStyled = styled.div`
     .products__list,
     .help__list,
     .resources__list {
-      @media (min-width: 720px) {
+      @media (min-width: ${size.tab}) {
         border-radius: var(--s-border-radius);
         padding: 0.75rem 1rem;
         display: flex;
@@ -256,7 +254,7 @@ export const MenuItemsStyled = styled.div`
       width: 100%;
     }
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: none;
     }
 
@@ -340,7 +338,11 @@ export const MenuItemsStyled = styled.div`
     align-items: center;
     min-width: 18rem;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
+    @media (max-width: 1024px) {
+      gap: 1rem;
+    }
+
+    @media (min-width: ${size.tab}) and (max-width: ${size.lg}) {
       min-width: 12rem;
     }
 
@@ -368,7 +370,7 @@ export const MenuItemsStyled = styled.div`
     .navigation-pane.--is-mobile {
       display: flex;
 
-      @media ${device['landscape-tablets']} {
+      @media (max-width: ${size.tab}) {
         display: none;
       }
 
@@ -640,12 +642,12 @@ export const MenuItemsStyled = styled.div`
   .is-tablet {
     display: none;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: flex;
     }
   }
 
-  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+  @media (min-width: ${size.xxs}) and (max-width: ${size.tab}) {
     .navigation-pane__wrapper {
       display: flex;
       flex-direction: column;

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

@@ -11,7 +11,7 @@ export const NavMenuStyled = styled.nav `
       flex: 1;
     }
     &.--is-mobile {
-      @media (min-width: ${size.sm}) {
+      @media (min-width: ${size.tab}) {
         display: none;
       }
     }
@@ -27,6 +27,10 @@ export const NavMenuStyled = styled.nav `
       .left-nav {
         display: flex;
         align-items: center;
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
+        gap: 2rem;
       }
 
       .header-phone {
@@ -49,7 +53,17 @@ export const NavMenuStyled = styled.nav `
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-end;
-        gap: 1.5rem;
+        gap: 2rem;
+
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
+
+        .nav-menu-item {
+          @media (max-width: 1024px) {
+            display: none;
+          }
+        }
 
         .search {
           width: 100%;
@@ -57,7 +71,7 @@ export const NavMenuStyled = styled.nav `
         }
       }
 
-      @media ${device['landscape-tablets']} {
+      @media (min-width: ${size.tab}) {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -76,12 +90,10 @@ export const NavMenuStyled = styled.nav `
       .navigation-pane__help,
       .navigation-pane__resources {
         position: relative;
-        margin-left: 0.5rem;
         padding: 0.75rem 0;
         cursor: pointer;
 
         @media ${device['portrait-tablets']} {
-          margin-right: 1.5rem;
           padding-bottom: 0.5rem;
         }
 
@@ -218,7 +230,7 @@ export const NavMenuStyled = styled.nav `
           width: 100%;
         }
 
-        @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+        @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
           display: none;
         }
 
@@ -300,8 +312,13 @@ export const NavMenuStyled = styled.nav `
         display: flex;
         align-items: center;
         min-width: 18rem;
+        gap: 2rem;
+
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
 
-        @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
+        @media (min-width: ${size.tab}) and (max-width: ${size.lg}) {
           min-width: 12rem;
         }
 
@@ -332,7 +349,7 @@ export const NavMenuStyled = styled.nav `
       display: flex;
       flex-direction: column;
 
-      @media ${device['landscape-tablets']} {
+      @media (max-width: ${size.tab}) {
         display: none;
       }
       .navigation-pane__user-menu {
@@ -579,12 +596,12 @@ export const NavMenuStyled = styled.nav `
   .is-tablet {
     display: none;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: flex;
     }
   }
 
-  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+  @media (min-width: ${size.xxs}) and (max-width: ${size.tab}) {
     .navigation-pane__wrapper {
       display: flex;
       flex-direction: column;

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

@@ -12,7 +12,7 @@ export const NavMenuStyled = styled.nav`
       flex: 1;
     }
     &.--is-mobile {
-      @media (min-width: ${size.sm}) {
+      @media (min-width: ${size.tab}) {
         display: none;
       }
     }
@@ -28,6 +28,10 @@ export const NavMenuStyled = styled.nav`
       .left-nav {
         display: flex;
         align-items: center;
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
+        gap: 2rem;
       }
 
       .header-phone {
@@ -50,7 +54,17 @@ export const NavMenuStyled = styled.nav`
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-end;
-        gap: 1.5rem;
+        gap: 2rem;
+
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
+
+        .nav-menu-item {
+          @media (max-width: 1024px) {
+            display: none;
+          }
+        }
 
         .search {
           width: 100%;
@@ -58,7 +72,7 @@ export const NavMenuStyled = styled.nav`
         }
       }
 
-      @media ${device['landscape-tablets']} {
+      @media (min-width: ${size.tab}) {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -77,12 +91,10 @@ export const NavMenuStyled = styled.nav`
       .navigation-pane__help,
       .navigation-pane__resources {
         position: relative;
-        margin-left: 0.5rem;
         padding: 0.75rem 0;
         cursor: pointer;
 
         @media ${device['portrait-tablets']} {
-          margin-right: 1.5rem;
           padding-bottom: 0.5rem;
         }
 
@@ -219,7 +231,7 @@ export const NavMenuStyled = styled.nav`
           width: 100%;
         }
 
-        @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+        @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
           display: none;
         }
 
@@ -301,8 +313,13 @@ export const NavMenuStyled = styled.nav`
         display: flex;
         align-items: center;
         min-width: 18rem;
+        gap: 2rem;
+
+        @media (max-width: 1024px) {
+          gap: 1rem;
+        }
 
-        @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
+        @media (min-width: ${size.tab}) and (max-width: ${size.lg}) {
           min-width: 12rem;
         }
 
@@ -333,7 +350,7 @@ export const NavMenuStyled = styled.nav`
       display: flex;
       flex-direction: column;
 
-      @media ${device['landscape-tablets']} {
+      @media (max-width: ${size.tab}) {
         display: none;
       }
       .navigation-pane__user-menu {
@@ -580,12 +597,12 @@ export const NavMenuStyled = styled.nav`
   .is-tablet {
     display: none;
 
-    @media (min-width: ${size.sm}) and (max-width: ${size.md}) {
+    @media (min-width: ${size.tab}) and (max-width: ${size.md}) {
       display: flex;
     }
   }
 
-  @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
+  @media (min-width: ${size.xxs}) and (max-width: ${size.tab}) {
     .navigation-pane__wrapper {
       display: flex;
       flex-direction: column;

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

@@ -5,7 +5,7 @@ import { HeaderStyled } from './Header.styled';
 import { NavMenu } from '../../organisms/NavMenu';
 const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
     const { classnames, siteName } = mainHeaderProps;
-    return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: 'wrapper flex header__inner', children: [_jsx("a", { "data-qa": 'Header_Logo', className: 'header__logo', href: '/', children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(NavMenu, { ...navMenuProps })] })] }));
+    return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: 'flex header__inner', children: [_jsx("a", { "data-qa": 'Header_Logo', className: 'header__logo', href: '/', children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(NavMenu, { ...navMenuProps })] })] }));
 });
 Header.displayName = 'Header';
 export default Header;

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

@@ -6,7 +6,7 @@ export const HeaderStyled = styled.header `
   transition: all 0.3s ease;
   z-index: 1000;
 
-  @media (max-width: ${size.sm}) {
+  @media (max-width: ${size.tab}) {
     position: sticky;
     top: 0;
     width: 100%;
@@ -24,11 +24,10 @@ export const HeaderStyled = styled.header `
   .header__inner {
     align-items: center;
     justify-content: space-between;
-    max-width: 1200px;
     padding: 1rem 1.5rem;
 
-    @media (min-width: ${size.sm}) {
-      padding: 1rem 1rem 1.5rem 1rem;
+    @media (min-width: ${size.tab}) {
+      padding: 1rem 2rem 1rem 2rem;
     }
   }
 
@@ -39,7 +38,7 @@ export const HeaderStyled = styled.header `
 
   .top-bar-wrapper {
     .top-bar {
-      @media (max-width: ${size.sm}) {
+      @media (max-width: ${size.tab}) {
         font-size: 0.78rem;
         letter-spacing: -0.5px;
       }
@@ -49,7 +48,7 @@ export const HeaderStyled = styled.header `
       width: 100%;
       display: flex;
       justify-content: space-around;
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         justify-content: center;
         width: auto;
       }
@@ -72,7 +71,7 @@ export const HeaderStyled = styled.header `
   &.hide-header-in-mobile {
     position: relative;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       position: sticky;
     }
   }
@@ -83,7 +82,7 @@ export const HeaderStyled = styled.header `
     align-items: center;
     justify-content: space-between;
 
-    @media (min-width: ${size.sm}) {
+    @media (min-width: ${size.tab}) {
       padding: 1rem;
     }
   }
@@ -91,6 +90,13 @@ export const HeaderStyled = styled.header `
   .header__logo {
     z-index: 200;
     min-width: max-content;
+
+    img {
+      @media (max-width: 1024px) {
+        width: 141px;
+        height: auto;
+      }
+    }
   }
 
   &.product-header-background {

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

@@ -7,7 +7,7 @@ export const HeaderStyled = styled.header`
   transition: all 0.3s ease;
   z-index: 1000;
 
-  @media (max-width: ${size.sm}) {
+  @media (max-width: ${size.tab}) {
     position: sticky;
     top: 0;
     width: 100%;
@@ -25,11 +25,10 @@ export const HeaderStyled = styled.header`
   .header__inner {
     align-items: center;
     justify-content: space-between;
-    max-width: 1200px;
     padding: 1rem 1.5rem;
 
-    @media (min-width: ${size.sm}) {
-      padding: 1rem 1rem 1.5rem 1rem;
+    @media (min-width: ${size.tab}) {
+      padding: 1rem 2rem 1rem 2rem;
     }
   }
 
@@ -40,7 +39,7 @@ export const HeaderStyled = styled.header`
 
   .top-bar-wrapper {
     .top-bar {
-      @media (max-width: ${size.sm}) {
+      @media (max-width: ${size.tab}) {
         font-size: 0.78rem;
         letter-spacing: -0.5px;
       }
@@ -50,7 +49,7 @@ export const HeaderStyled = styled.header`
       width: 100%;
       display: flex;
       justify-content: space-around;
-      @media ${device['landscape-tablets']} {
+      @media ${device.tablets} {
         justify-content: center;
         width: auto;
       }
@@ -73,7 +72,7 @@ export const HeaderStyled = styled.header`
   &.hide-header-in-mobile {
     position: relative;
 
-    @media ${device['landscape-tablets']} {
+    @media ${device.tablets} {
       position: sticky;
     }
   }
@@ -84,7 +83,7 @@ export const HeaderStyled = styled.header`
     align-items: center;
     justify-content: space-between;
 
-    @media (min-width: ${size.sm}) {
+    @media (min-width: ${size.tab}) {
       padding: 1rem;
     }
   }
@@ -92,6 +91,13 @@ export const HeaderStyled = styled.header`
   .header__logo {
     z-index: 200;
     min-width: max-content;
+
+    img {
+      @media (max-width: 1024px) {
+        width: 141px;
+        height: auto;
+      }
+    }
   }
 
   &.product-header-background {

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

@@ -12,7 +12,7 @@ const Header = forwardRef<HTMLDivElement, HeaderProps>(
     return (
       <HeaderStyled className={`header ${classnames}`} ref={ref} id='header'>
         <TopBar {...topBarProps} />
-        <span itemScope itemType='https://www.schema.org/Brand' className={'wrapper flex header__inner'}>
+        <span itemScope itemType='https://www.schema.org/Brand' className={'flex header__inner'}>
           <a data-qa={'Header_Logo'} className='header__logo' href='/'>
             <Logo siteName={siteName} width='188' height='32' />
           </a>

package/dist/src/globalStyles/breakpoints.d.ts

@@ -2,6 +2,7 @@ interface Size {
     xxs: string;
     xs: string;
     sm: string;
+    tab: string;
     md: string;
     lg: string;
     xl: string;
@@ -12,6 +13,7 @@ export declare const device: {
     mobile: string;
     'portrait-tablets': string;
     'landscape-tablets': string;
+    tablets: string;
     laptop: string;
     desktop: string;
     'desktop-xl': string;

package/dist/src/globalStyles/breakpoints.js

@@ -2,6 +2,7 @@ export const size = {
     xxs: '328px', // for very small screen mobile
     xs: '575px', // for small screen mobile
     sm: '720px', // for mobile screen
+    tab: '768px', // for tablets in portrait
     md: '960px', // for tablets
     lg: '1200px', // for laptops
     xl: '1600px', // for desktop / monitors
@@ -11,6 +12,7 @@ export const device = {
     mobile: `(max-width: ${size.xs})`,
     'portrait-tablets': `(min-width: ${size.xs})`,
     'landscape-tablets': `(min-width: ${size.sm})`,
+    tablets: `(min-width: ${size.tab})`,
     laptop: `(min-width: ${size.md})`,
     desktop: `(min-width: ${size.lg})`,
     'desktop-xl': `(min-width: ${size.xl})`

package/dist/src/globalStyles/breakpoints.ts

@@ -2,6 +2,7 @@ interface Size {
   xxs: string
   xs: string
   sm: string
+  tab: string
   md: string
   lg: string
   xl: string
@@ -12,6 +13,7 @@ export const size: Size = {
   xxs: '328px', // for very small screen mobile
   xs: '575px', // for small screen mobile
   sm: '720px', // for mobile screen
+  tab: '768px', // for tablets in portrait
   md: '960px', // for tablets
   lg: '1200px', // for laptops
   xl: '1600px', // for desktop / monitors
@@ -22,6 +24,7 @@ export const device = {
   mobile: `(max-width: ${size.xs})`,
   'portrait-tablets': `(min-width: ${size.xs})`,
   'landscape-tablets': `(min-width: ${size.sm})`,
+  tablets: `(min-width: ${size.tab})`,
   laptop: `(min-width: ${size.md})`,
   desktop: `(min-width: ${size.lg})`,
   'desktop-xl': `(min-width: ${size.xl})`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.25.4",
+  "version": "7.25.6",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",