@npm_leadtech/legal-lib-components 7.25.5 → 7.26.0

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/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,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
@@ -23,6 +25,7 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
 };
 const SearchSelect = (props) => {
     const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
+    const [menuPortalTarget, setMenuPortalTarget] = useState();
     const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
     const defaultValue = props.defaultValue;
     const classnames = classNames({
@@ -31,6 +34,9 @@ const SearchSelect = (props) => {
         [customClass]: props.customClass,
         '--group-invalid': !props.isValidGroup
     });
+    useEffect(() => {
+        setMenuPortalTarget(document.body);
+    }, []);
     const handleChange = (selectedOption) => {
         const selectObject = {
             target: {
@@ -51,6 +57,6 @@ const SearchSelect = (props) => {
                                 };
                             },
                             menuPortal: (base) => ({ ...base, zIndex: 9999 })
-                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: document.body, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
+                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
 };
 export default SearchSelect;

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,6 +28,7 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
 
 const SearchSelect: FC<SearchSelectProps> = (props) => {
   const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
+  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
   const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
   const defaultValue = props.defaultValue as unknown as string
 
@@ -38,6 +39,10 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     '--group-invalid': !props.isValidGroup
   })
 
+  useEffect(() => {
+    setMenuPortalTarget(document.body)
+  }, [])
+
   const handleChange = (selectedOption): void => {
     const selectObject = {
       target: {
@@ -90,7 +95,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           options={sortedItems}
           escapeClearsValue={true}
           isClearable={true}
-          menuPortalTarget={document.body}
+          menuPortalTarget={menuPortalTarget}
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}

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/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;