@npm_leadtech/legal-lib-components 7.25.5 → 7.26.0

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/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.js

@@ -7,9 +7,7 @@ const TryOurFreeLegalBlogsContent = ({ title, image, children, type = TryOurFree
     const classTry = classNames({
         'try-our-free-legal-blogs-section-content': true,
         'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
-        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
-        'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
-        'try-our-free-legal-blogs-section-content--how-it-works-first-image': TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type
+        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
     });
     return (_jsxs(TryOurFreeLegalBlogsContentStyled, { className: classTry, children: [_jsxs("div", { className: 'try-our-free-legal-blogs-section__texts', children: [_jsx("h2", { className: 'try-our-free-legal-blogs-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'try-our-free-legal-blogs-section__texts__body', children: children })] }), _jsx("div", { className: 'try-our-free-legal-blogs-section__image', children: image })] }));
 };

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

@@ -7,8 +7,7 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     flex-direction: row;
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission,
-  &.try-our-free-legal-blogs-section-content--how-it-works {
+  &.try-our-free-legal-blogs-section-content--our-mission {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -31,8 +30,7 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     }
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission-first-image,
-  &.try-our-free-legal-blogs-section-content--how-it-works-first-image {
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;

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

@@ -8,8 +8,7 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
     flex-direction: row;
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission,
-  &.try-our-free-legal-blogs-section-content--how-it-works {
+  &.try-our-free-legal-blogs-section-content--our-mission {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -32,8 +31,7 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
     }
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission-first-image,
-  &.try-our-free-legal-blogs-section-content--how-it-works-first-image {
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;

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

@@ -18,10 +18,7 @@ const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({
     'try-our-free-legal-blogs-section-content': true,
     'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
     'try-our-free-legal-blogs-section-content--our-mission-first-image':
-      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
-    'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
-    'try-our-free-legal-blogs-section-content--how-it-works-first-image':
-      TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type
+      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
   })
   return (
     <TryOurFreeLegalBlogsContentStyled className={classTry}>

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts

@@ -1,9 +1,7 @@
 export declare enum TryOurFreeLegalBlogsContentType {
     default = "Default",
     ourMission = "Our Mission",
-    ourMissionFirstImage = "Our Mission First Image",
-    howItWorks = "How It Works",
-    howItWorksFirstImage = "How It Works First Image"
+    ourMissionFirstImage = "Our Mission First Image"
 }
 export interface TryOurFreeLegalBlogsContentProps {
     title: string;

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js

@@ -3,6 +3,4 @@ export var TryOurFreeLegalBlogsContentType;
     TryOurFreeLegalBlogsContentType["default"] = "Default";
     TryOurFreeLegalBlogsContentType["ourMission"] = "Our Mission";
     TryOurFreeLegalBlogsContentType["ourMissionFirstImage"] = "Our Mission First Image";
-    TryOurFreeLegalBlogsContentType["howItWorks"] = "How It Works";
-    TryOurFreeLegalBlogsContentType["howItWorksFirstImage"] = "How It Works First Image";
 })(TryOurFreeLegalBlogsContentType || (TryOurFreeLegalBlogsContentType = {}));

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts

@@ -1,9 +1,7 @@
 export enum TryOurFreeLegalBlogsContentType {
   default = 'Default',
   ourMission = 'Our Mission',
-  ourMissionFirstImage = 'Our Mission First Image',
-  howItWorks = 'How It Works',
-  howItWorksFirstImage = 'How It Works First Image'
+  ourMissionFirstImage = 'Our Mission First Image'
 }
 
 export interface TryOurFreeLegalBlogsContentProps {

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/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.js

@@ -1,15 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent';
 import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled';
-import classNames from 'classnames';
 const TryOurFreeLegalBlogsSection = ({ contentTryOurFreeLegalBlogs }) => {
-    const classTry = classNames({
-        default: contentTryOurFreeLegalBlogs.type === 'Default',
-        'our-mission': contentTryOurFreeLegalBlogs.type === 'Our Mission',
-        'our-mission-first-image': contentTryOurFreeLegalBlogs.type === 'Our Mission First Image',
-        'how-it-works': contentTryOurFreeLegalBlogs.type === 'How It Works',
-        'how-it-works-first-image': contentTryOurFreeLegalBlogs.type === 'How It Works First Image'
-    });
-    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: `try-our-free-legal-blogs-section wrapper wrapper--responsive ${classTry}`, children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, type: contentTryOurFreeLegalBlogs.type, children: contentTryOurFreeLegalBlogs.children }) }));
+    return (_jsx(TryOurFreeLegalBlogsSectionStyled, { className: 'try-our-free-legal-blogs-section wrapper wrapper--responsive', children: _jsx(TryOurFreeLegalBlogsContent, { title: contentTryOurFreeLegalBlogs.title, image: contentTryOurFreeLegalBlogs.image, type: contentTryOurFreeLegalBlogs.type, children: contentTryOurFreeLegalBlogs.children }) }));
 };
 export default TryOurFreeLegalBlogsSection;

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

@@ -7,8 +7,4 @@ export const TryOurFreeLegalBlogsSectionStyled = styled.section `
   @media ${device['landscape-tablets']} {
     flex-flow: row nowrap;
   }
-
-  &.how-it-works-first-image {
-    background-color: var(--neutral-neutral-6);
-  }
 `;

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

@@ -8,8 +8,4 @@ export const TryOurFreeLegalBlogsSectionStyled = styled.section`
   @media ${device['landscape-tablets']} {
     flex-flow: row nowrap;
   }
-
-  &.how-it-works-first-image {
-    background-color: var(--neutral-neutral-6);
-  }
 `

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

@@ -3,20 +3,10 @@ import React, { type FC } from 'react'
 import { TryOurFreeLegalBlogsContent } from '../../organisms/TryOurFreeLegalBlogsContent'
 import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types'
 import { TryOurFreeLegalBlogsSectionStyled } from './TryOurFreeLegalBlogsSection.styled'
-import classNames from 'classnames'
 
 const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps> = ({ contentTryOurFreeLegalBlogs }) => {
-  const classTry = classNames({
-    default: contentTryOurFreeLegalBlogs.type === 'Default',
-    'our-mission': contentTryOurFreeLegalBlogs.type === 'Our Mission',
-    'our-mission-first-image': contentTryOurFreeLegalBlogs.type === 'Our Mission First Image',
-    'how-it-works': contentTryOurFreeLegalBlogs.type === 'How It Works',
-    'how-it-works-first-image': contentTryOurFreeLegalBlogs.type === 'How It Works First Image'
-  })
   return (
-    <TryOurFreeLegalBlogsSectionStyled
-      className={`try-our-free-legal-blogs-section wrapper wrapper--responsive ${classTry}`}
-    >
+    <TryOurFreeLegalBlogsSectionStyled className='try-our-free-legal-blogs-section wrapper wrapper--responsive'>
       <TryOurFreeLegalBlogsContent
         title={contentTryOurFreeLegalBlogs.title}
         image={contentTryOurFreeLegalBlogs.image}

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

@@ -14,9 +14,7 @@ export * from './GuidelinesSection';
 export * from './HowGetYourFormsSection';
 export * from './JumbotronRatafiaSection';
 export * from './JumbotronSimplifiedSection';
-export * from './LawGeniusCardsSection';
 export * from './LegalSection';
-export * from './LawGeniusCardsSection';
 export * from './MidBannerRatafiaSection';
 export * from './MoreDocsSection';
 export * from './PeopleSayAboutUsSection';
@@ -24,7 +22,6 @@ export * from './StepsRatafiaSection';
 export * from './TryItRatafiaSection';
 export * from './TryOurFreeLegalBlogsSection';
 export * from './TryUsSection';
-export * from './TryNowSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';

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

@@ -14,9 +14,7 @@ export * from './GuidelinesSection';
 export * from './HowGetYourFormsSection';
 export * from './JumbotronRatafiaSection';
 export * from './JumbotronSimplifiedSection';
-export * from './LawGeniusCardsSection';
 export * from './LegalSection';
-export * from './LawGeniusCardsSection';
 export * from './MidBannerRatafiaSection';
 export * from './MoreDocsSection';
 export * from './PeopleSayAboutUsSection';
@@ -24,7 +22,6 @@ export * from './StepsRatafiaSection';
 export * from './TryItRatafiaSection';
 export * from './TryOurFreeLegalBlogsSection';
 export * from './TryUsSection';
-export * from './TryNowSection';
 export * from './UnsubscribeSection';
 export * from './WhyLawDistrictSection';
 export * from './LearnMoreSection';

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

@@ -14,9 +14,7 @@ export * from './GuidelinesSection'
 export * from './HowGetYourFormsSection'
 export * from './JumbotronRatafiaSection'
 export * from './JumbotronSimplifiedSection'
-export * from './LawGeniusCardsSection'
 export * from './LegalSection'
-export * from './LawGeniusCardsSection'
 export * from './MidBannerRatafiaSection'
 export * from './MoreDocsSection'
 export * from './PeopleSayAboutUsSection'
@@ -24,7 +22,6 @@ export * from './StepsRatafiaSection'
 export * from './TryItRatafiaSection'
 export * from './TryOurFreeLegalBlogsSection'
 export * from './TryUsSection'
-export * from './TryNowSection'
 export * from './UnsubscribeSection'
 export * from './WhyLawDistrictSection'
 export * from './LearnMoreSection'

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})`