@npm_leadtech/legal-lib-components 5.7.8 → 5.8.0

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

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+export const MoreDocsMobileStyled = styled.div `
+  .more-docs-mobile {
+    margin: 0px 24px 40px 24px;
+    padding: 5px 0;
+    border-radius: 4px;
+    border: solid 2px #dfe5e8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    .box-closed {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .icon-see-more {
+        transform: rotate(-90deg);
+
+        &:before,
+        &:after {
+          background-color: get-color(others, black);
+        }
+
+        &.open {
+          transform: rotate(90deg);
+        }
+
+        svg {
+          width: 40px;
+          height: 40px;
+        }
+      }
+
+      .box-title {
+        align-self: center;
+        margin-right: 4rem;
+      }
+    }
+  }
+
+  .more-docs-list {
+    margin: -40px 24px 40px 24px;
+    padding: 16px 8px 16px 8px;
+    border-radius: 4px;
+    border: solid 2px #dfe5e8;
+    display: flex;
+    flex-direction: column;
+
+    .docs-list {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      .separation-line {
+        width: calc(100% - 20px);
+        height: 1px;
+        margin: 16px 10px;
+        background-color: var(--neutral-neutral-3);
+      }
+
+      &:last-child {
+        margin-bottom: 1rem;
+        .separation-line {
+          display: none;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,73 @@
+import styled from 'styled-components'
+
+export const MoreDocsMobileStyled = styled.div`
+  .more-docs-mobile {
+    margin: 0px 24px 40px 24px;
+    padding: 5px 0;
+    border-radius: 4px;
+    border: solid 2px #dfe5e8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    .box-closed {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .icon-see-more {
+        transform: rotate(-90deg);
+
+        &:before,
+        &:after {
+          background-color: get-color(others, black);
+        }
+
+        &.open {
+          transform: rotate(90deg);
+        }
+
+        svg {
+          width: 40px;
+          height: 40px;
+        }
+      }
+
+      .box-title {
+        align-self: center;
+        margin-right: 4rem;
+      }
+    }
+  }
+
+  .more-docs-list {
+    margin: -40px 24px 40px 24px;
+    padding: 16px 8px 16px 8px;
+    border-radius: 4px;
+    border: solid 2px #dfe5e8;
+    display: flex;
+    flex-direction: column;
+
+    .docs-list {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      .separation-line {
+        width: calc(100% - 20px);
+        height: 1px;
+        margin: 16px 10px;
+        background-color: var(--neutral-neutral-3);
+      }
+
+      &:last-child {
+        margin-bottom: 1rem;
+        .separation-line {
+          display: none;
+        }
+      }
+    }
+  }
+`

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

@@ -3,13 +3,13 @@ import React from 'react'
 import { ChevronRight24px } from '../../../../images/componentsSvg/ChevronRight24px'
 import { MoreDocsItem } from '../../atoms'
 import { type MoreDocsMobileProps } from './MoreDocsMobileProps'
-// import './MoreDocsMobile.scss'
+import { MoreDocsMobileStyled } from './MoreDocsMobile.styled'
 
 export const MoreDocsMobile: React.FC<MoreDocsMobileProps> = ({ title, documents }) => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   return (
-    <>
+    <MoreDocsMobileStyled>
       <div
         className='more-docs-mobile'
         onClick={() => {
@@ -42,6 +42,6 @@ export const MoreDocsMobile: React.FC<MoreDocsMobileProps> = ({ title, documents
           })}
         </div>
       )}
-    </>
+    </MoreDocsMobileStyled>
   )
 }

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

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useEffect } from 'react';
 import { MenuItems } from '../../atoms';
+import { NavBarDropDownStyled } from './NavBarDropDown.styled';
 import { useIntersectionObserver } from '../../../hooks';
-// import './NavBarDropDown.scss'
 let scrollPosition = 0;
 let touchStartPosY;
 let isDisabledScroll = false;
@@ -65,5 +65,5 @@ export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveC
     useEffect(() => {
         setEnableScrollbarOnClose(() => enableScrollbarOnClose);
     }, []);
-    return (_jsx(_Fragment, { children: isOpen ? (_jsxs("div", { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItems, { list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
+    return (_jsx(_Fragment, { children: isOpen ? (_jsxs(NavBarDropDownStyled, { className: 'navbar-drop-down__container', children: [_jsx("div", { className: 'navbar-drop-down__container__menu_items', children: _jsx(MenuItems, { list: list, hasBullets: hasBullets, initialActiveContent: initialActiveContent }) }), _jsx("div", { ref: ref, className: 'navbar-drop-down__container__shadow', onClick: closeMenu })] })) : null }));
 };

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

@@ -0,0 +1 @@
+export declare const NavBarDropDownStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+export const NavBarDropDownStyled = styled.div `
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  z-index: 4;
+
+  .navbar-drop-down__container {
+    &__menu_items {
+      background: var(--others-white);
+      padding: 1.5rem;
+      box-shadow: var(--box-shadow-container);
+      ul {
+        li {
+          margin-bottom: 1rem;
+          padding: 0.5rem 1rem;
+        }
+
+        li:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &__shadow {
+      position: absolute;
+      background: var(--neutral-neutral-3);
+      opacity: 0.4;
+      width: 100%;
+      height: 100vh;
+    }
+  }
+`;

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components'
+
+export const NavBarDropDownStyled = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  z-index: 4;
+
+  .navbar-drop-down__container {
+    &__menu_items {
+      background: var(--others-white);
+      padding: 1.5rem;
+      box-shadow: var(--box-shadow-container);
+      ul {
+        li {
+          margin-bottom: 1rem;
+          padding: 0.5rem 1rem;
+        }
+
+        li:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &__shadow {
+      position: absolute;
+      background: var(--neutral-neutral-3);
+      opacity: 0.4;
+      width: 100%;
+      height: 100vh;
+    }
+  }
+`

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

@@ -4,8 +4,8 @@
 import React, { type FC, useEffect } from 'react'
 import { MenuItems } from '../../atoms'
 import { type NavBarDropDownProps } from './NavBarDropDownProps.types'
+import { NavBarDropDownStyled } from './NavBarDropDown.styled'
 import { useIntersectionObserver } from '../../../hooks'
-// import './NavBarDropDown.scss'
 
 let scrollPosition = 0
 let touchStartPosY: Touch
@@ -86,12 +86,12 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
   return (
     <>
       {isOpen ? (
-        <div className='navbar-drop-down__container'>
+        <NavBarDropDownStyled className='navbar-drop-down__container'>
           <div className='navbar-drop-down__container__menu_items'>
             <MenuItems list={list} hasBullets={hasBullets} initialActiveContent={initialActiveContent} />
           </div>
           <div ref={ref} className='navbar-drop-down__container__shadow' onClick={closeMenu}></div>
-        </div>
+        </NavBarDropDownStyled>
       ) : null}
     </>
   )

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import PageStepControl from './PageStepControl';
 import PageSteps from './PageSteps';
-// import './Pagination.scss'
+import { PaginationStyled } from './Pagination.styled';
 const Pagination = ({ activePage, totalPages, onChange, nextControl = 'next', prevControl = 'prev' }) => {
     const [active, setActive] = useState(activePage);
     const handleControl = useCallback((direction) => {
@@ -20,6 +20,6 @@ const Pagination = ({ activePage, totalPages, onChange, nextControl = 'next', pr
     }, []);
     if (totalPages === undefined)
         return null;
-    return (_jsxs("div", { className: 'pagination', children: [_jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: prevControl }), _jsx(PageSteps, { activePage: active, onClick: handleCurrentPage, totalPages: totalPages }), _jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: nextControl })] }));
+    return (_jsxs(PaginationStyled, { className: 'pagination', children: [_jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: prevControl }), _jsx(PageSteps, { activePage: active, onClick: handleCurrentPage, totalPages: totalPages }), _jsx(PageStepControl, { activePage: active, totalPages: totalPages, onClick: handleControl, direction: nextControl })] }));
 };
 export default Pagination;

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

@@ -0,0 +1 @@
+export declare const PaginationStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+export const PaginationStyled = styled.div `
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  .pagination {
+    &__control {
+      display: flex;
+      svg {
+        cursor: pointer;
+        fill: var(--neutral-neutral-2);
+        width: 1rem;
+        path {
+          pointer-events: none;
+        }
+      }
+      &--prev svg {
+        transform: rotate(180deg);
+      }
+      &--hidden {
+        cursor: default;
+        pointer-events: none;
+        visibility: hidden;
+      }
+    }
+
+    &__page-wrapper {
+      display: flex;
+      margin: 0 1rem;
+    }
+
+    &__page {
+      align-items: center;
+      background: var(--neutral-neutral-6);
+      border: 2px solid var(--neutral-neutral-3);
+      border-radius: 4px;
+      box-sizing: border-box;
+      color: var(--neutral-neutral-2);
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      height: 2.125rem;
+      margin: 0 0.25rem;
+      min-width: 2.125rem;
+      padding: 0.3rem;
+
+      &--active {
+        background: var(--neutral-neutral-4);
+        border: 2px solid var(--neutral-neutral-2);
+        color: var(--neutral-neutral-1);
+      }
+
+      &--ellipsis {
+        cursor: default;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,64 @@
+import styled from 'styled-components'
+
+export const PaginationStyled = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  .pagination {
+    &__control {
+      display: flex;
+      svg {
+        cursor: pointer;
+        fill: var(--neutral-neutral-2);
+        width: 1rem;
+        path {
+          pointer-events: none;
+        }
+      }
+      &--prev svg {
+        transform: rotate(180deg);
+      }
+      &--hidden {
+        cursor: default;
+        pointer-events: none;
+        visibility: hidden;
+      }
+    }
+
+    &__page-wrapper {
+      display: flex;
+      margin: 0 1rem;
+    }
+
+    &__page {
+      align-items: center;
+      background: var(--neutral-neutral-6);
+      border: 2px solid var(--neutral-neutral-3);
+      border-radius: 4px;
+      box-sizing: border-box;
+      color: var(--neutral-neutral-2);
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      height: 2.125rem;
+      margin: 0 0.25rem;
+      min-width: 2.125rem;
+      padding: 0.3rem;
+
+      &--active {
+        background: var(--neutral-neutral-4);
+        border: 2px solid var(--neutral-neutral-2);
+        color: var(--neutral-neutral-1);
+      }
+
+      &--ellipsis {
+        cursor: default;
+      }
+    }
+  }
+`

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

@@ -4,7 +4,7 @@ import React, { type FC, type SyntheticEvent, useCallback, useState } from 'reac
 import PageStepControl from './PageStepControl'
 import PageSteps from './PageSteps'
 import { type PaginationProps } from './PaginationProps.types'
-// import './Pagination.scss'
+import { PaginationStyled } from './Pagination.styled'
 
 const Pagination: FC<PaginationProps> = ({
   activePage,
@@ -32,11 +32,11 @@ const Pagination: FC<PaginationProps> = ({
   if (totalPages === undefined) return null
 
   return (
-    <div className='pagination'>
+    <PaginationStyled className='pagination'>
       <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={prevControl} />
       <PageSteps activePage={active} onClick={handleCurrentPage} totalPages={totalPages} />
       <PageStepControl activePage={active} totalPages={totalPages} onClick={handleControl} direction={nextControl} />
-    </div>
+    </PaginationStyled>
   )
 }
 

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ContactPhoneIcon from '../../../../images/webp/customer-support.webp';
 import ContactPhoneIconIE from '../../../../images/png/customer-support.png';
+import { PhoneContactBoxDesktopStyled } from './PhoneContactBoxDesktop.styled';
 // import './PhoneContactBoxDesktop.scss'
 export const PhoneContactBoxDesktop = ({ phones, schedule }) => {
-    return (_jsxs("div", { className: 'phone-contact-box-container', children: [_jsx("img", { src: ContactPhoneIcon, alt: 'Contact phone icon', width: '40', height: '40' }), _jsx("img", { src: ContactPhoneIconIE, className: 'onlyIE', alt: 'Contact phone icon', width: '40', height: '40' }), _jsxs("div", { className: 'phone-contact-info', children: [phones.map((phone, index) => (_jsx("p", { className: 'phone-contact-phone', children: phone }, `${phone}-${index}`))), _jsx("p", { className: 'email-contact-text', children: schedule })] })] }));
+    return (_jsxs(PhoneContactBoxDesktopStyled, { className: 'phone-contact-box-container', children: [_jsx("img", { src: ContactPhoneIcon, alt: 'Contact phone icon', width: '40', height: '40' }), _jsx("img", { src: ContactPhoneIconIE, className: 'onlyIE', alt: 'Contact phone icon', width: '40', height: '40' }), _jsxs("div", { className: 'phone-contact-info', children: [phones.map((phone, index) => (_jsx("p", { className: 'phone-contact-phone', children: phone }, `${phone}-${index}`))), _jsx("p", { className: 'email-contact-text', children: schedule })] })] }));
 };

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

@@ -0,0 +1 @@
+export declare const PhoneContactBoxDesktopStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,59 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PhoneContactBoxDesktopStyled = styled.div `
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+  display: none;
+  padding: 2rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+  }
+
+  img {
+    align-self: center;
+    &:not(.onlyIE) {
+      display: block;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: none;
+      }
+    }
+    &.onlyIE {
+      display: none;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+  }
+
+  .phone-contact {
+    &-info {
+      margin-left: 1.5rem;
+    }
+
+    &-phone {
+      font-size: 1.5rem;
+      color: var(--primary-main-dark-1);
+      font-weight: bold;
+      text-decoration: none;
+
+      @media ${device.laptop} {
+        font-size: 1.7rem;
+      }
+    }
+
+    &-text {
+      color: var(--neutral-neutral-2);
+    }
+  }
+`;

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

@@ -0,0 +1,60 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const PhoneContactBoxDesktopStyled = styled.div`
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 2rem;
+  display: none;
+  padding: 2rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+  }
+
+  img {
+    align-self: center;
+    &:not(.onlyIE) {
+      display: block;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: none;
+      }
+    }
+    &.onlyIE {
+      display: none;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+  }
+
+  .phone-contact {
+    &-info {
+      margin-left: 1.5rem;
+    }
+
+    &-phone {
+      font-size: 1.5rem;
+      color: var(--primary-main-dark-1);
+      font-weight: bold;
+      text-decoration: none;
+
+      @media ${device.laptop} {
+        font-size: 1.7rem;
+      }
+    }
+
+    &-text {
+      color: var(--neutral-neutral-2);
+    }
+  }
+`

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

@@ -5,11 +5,12 @@ import React from 'react'
 import ContactPhoneIcon from '../../../../images/webp/customer-support.webp'
 import ContactPhoneIconIE from '../../../../images/png/customer-support.png'
 import { type PhoneContactBoxDesktopProps } from './PhoneContactBoxDesktopProps.types'
+import { PhoneContactBoxDesktopStyled } from './PhoneContactBoxDesktop.styled'
 // import './PhoneContactBoxDesktop.scss'
 
 export const PhoneContactBoxDesktop: React.FC<PhoneContactBoxDesktopProps> = ({ phones, schedule }) => {
   return (
-    <div className='phone-contact-box-container'>
+    <PhoneContactBoxDesktopStyled className='phone-contact-box-container'>
       <img src={ContactPhoneIcon} alt='Contact phone icon' width='40' height='40'></img>
       <img src={ContactPhoneIconIE} className='onlyIE' alt='Contact phone icon' width='40' height='40'></img>
       <div className='phone-contact-info'>
@@ -20,6 +21,6 @@ export const PhoneContactBoxDesktop: React.FC<PhoneContactBoxDesktopProps> = ({
         ))}
         <p className='email-contact-text'>{schedule}</p>
       </div>
-    </div>
+    </PhoneContactBoxDesktopStyled>
   )
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../atoms';
-// import './PhoneContactBoxMobile.scss'
+import { PhoneContactBoxMobileStyled } from './PhoneContactBoxMobile.styled';
 export const PhoneContactBoxMobile = ({ phones, schedule }) => {
-    return (_jsxs("div", { className: 'phone-mobile-contact-box-container wrapper wrapper--responsive', children: [phones.map((phone, index) => (_jsx(Button, { centered: true, isExternal: true, link: `tel:${phone}`, gtmTag: 'clicked_phone_contactus', givenClass: 'phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center', label: phone, dataQa: 'phone_contact_box' }, `${phone}-${index}`))), _jsx("p", { className: 'phone-mobile-contact-text', children: schedule })] }));
+    return (_jsxs(PhoneContactBoxMobileStyled, { className: 'phone-mobile-contact-box-container wrapper wrapper--responsive', children: [phones.map((phone, index) => (_jsx(Button, { centered: true, isExternal: true, link: `tel:${phone}`, gtmTag: 'clicked_phone_contactus', givenClass: 'phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center', label: phone, dataQa: 'phone_contact_box' }, `${phone}-${index}`))), _jsx("p", { className: 'phone-mobile-contact-text', children: schedule })] }));
 };

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

@@ -0,0 +1 @@
+export declare const PhoneContactBoxMobileStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,32 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const PhoneContactBoxMobileStyled = styled.div `
+  display: block;
+  padding-top: 1rem;
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+
+  .phone-mobile-contact {
+    &-button {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 1rem;
+
+      &:before {
+        content: '';
+        width: 20px;
+        height: 20px;
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iZXA3dHIycDdyYSIgZD0iTTIwLjAxIDE1LjM4Yy0xLjIzIDAtMi40Mi0uMi0zLjUzLS41Ni0uMzUtLjEyLS43NC0uMDMtMS4wMS4yNGwtMS41NyAxLjk3Yy0yLjgzLTEuMzUtNS40OC0zLjktNi44OS02LjgzbDEuOTUtMS42NmMuMjctLjI4LjM1LS42Ny4yNC0xLjAyLS4zNy0xLjExLS41Ni0yLjMtLjU2LTMuNTMgMC0uNTQtLjQ1LS45OS0uOTktLjk5SDQuMTlDMy42NSAzIDMgMy4yNCAzIDMuOTkgMyAxMy4yOCAxMC43MyAyMSAyMC4wMSAyMWMuNzEgMCAuOTktLjYzLjk5LTEuMTh2LTMuNDVjMC0uNTQtLjQ1LS45OS0uOTktLjk5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc2LjAwMDAwMCwgLTMxNC4wMDAwMDApIHRyYW5zbGF0ZSgzMjguMDAwMDAwLCAyMDUuMDAwMDAwKSB0cmFuc2xhdGUoMzIuMDAwMDAwLCA5MC4wMDAwMDApIHRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSI3dHZidm9pbXpiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2VwN3RyMnA3cmEiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBjbGFzcz0iaWNvbi13ZWItMjQtcCIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCM3dHZidm9pbXpiKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+        margin-right: 0.5rem;
+      }
+    }
+
+    &-text {
+      color: var(--neutral-neutral-2);
+      text-align: center;
+      margin: 0rem 0 2rem;
+    }
+  }
+`;