@npm_leadtech/legal-lib-components 5.2.7 → 5.2.8

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

@@ -1,20 +1,19 @@
 import React from 'react'
 
 import { type WhyLawDistrictItemsProps } from './WhyLawDistrictItemsProps.types'
-
-// import './WhyLawDistrictItems.scss'
+import { WhyLawDistrictItemsStyled } from './WhyLawDistrictItems.styled'
 
 export const WhyLawDistrictItems: React.FC<WhyLawDistrictItemsProps> = ({ items }) => {
   if (items.length === 0) return null
 
   return (
-    <ul className={'whyLawDistrictItems'}>
+    <WhyLawDistrictItemsStyled className={'whyLawDistrictItems'}>
       {items.map((item) => (
         <li className={'whyLawDistrictItems__item'} key={item.id}>
           {item.reasons}
         </li>
       ))}
-    </ul>
+    </WhyLawDistrictItemsStyled>
   )
 }
 

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { WideInfoBarStyled } from './WideInfoBar.styled';
 const WideInfoBar = ({ children, color }) => {
     if (children === undefined)
         return null;
-    return (_jsx("div", { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper', children: children }) }));
+    return (_jsx(WideInfoBarStyled, { className: `wide-info-bar ${color ?? ''}`, children: _jsx("div", { className: 'wide-info-bar__wrapper', children: children }) }));
 };
 export default WideInfoBar;

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

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

@@ -0,0 +1,33 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const WideInfoBarStyled = styled.div `
+  background-color: var(--neutral-neutral-6);
+  font-family: var(--font-sans);
+  color: var(--neutral-neutral-1);
+
+  &.green {
+    background-color: var(--primary-main-light-6);
+    color: var(--primary-main-dark-1);
+  }
+
+  .wide-info-bar {
+    &__wrapper {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+      max-width: 1200px;
+      margin: auto;
+      padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+
+      @media ${device['landscape-tablets']} {
+        flex-flow: row;
+        font-size: 0.9rem;
+        padding: 1rem 1.5rem;
+      }
+
+      @media ${device.desktop} {
+        padding: 0.5rem 2rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const WideInfoBarStyled = styled.div`
+  background-color: var(--neutral-neutral-6);
+  font-family: var(--font-sans);
+  color: var(--neutral-neutral-1);
+
+  &.green {
+    background-color: var(--primary-main-light-6);
+    color: var(--primary-main-dark-1);
+  }
+
+  .wide-info-bar {
+    &__wrapper {
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-between;
+      max-width: 1200px;
+      margin: auto;
+      padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+
+      @media ${device['landscape-tablets']} {
+        flex-flow: row;
+        font-size: 0.9rem;
+        padding: 1rem 1.5rem;
+      }
+
+      @media ${device.desktop} {
+        padding: 0.5rem 2rem;
+      }
+    }
+  }
+`

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

@@ -1,6 +1,5 @@
 import React, { type FC } from 'react'
-
-// import './WideInfoBar.scss'
+import { WideInfoBarStyled } from './WideInfoBar.styled'
 
 interface WideInfoBarProps {
   children?: React.ReactElement
@@ -10,9 +9,9 @@ interface WideInfoBarProps {
 const WideInfoBar: FC<WideInfoBarProps> = ({ children, color }) => {
   if (children === undefined) return null
   return (
-    <div className={`wide-info-bar ${color ?? ''}`}>
+    <WideInfoBarStyled className={`wide-info-bar ${color ?? ''}`}>
       <div className='wide-info-bar__wrapper'>{children}</div>
-    </div>
+    </WideInfoBarStyled>
   )
 }
 

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

@@ -2,10 +2,10 @@
 
 .accordion__container {
   overflow: hidden;
-  border-bottom: 1px solid get-color(neutral, neutral-4);
+  border-bottom: 1px solid var(--neutral-neutral-4);
 
   &:first-child {
-    border-top: 1px solid get-color(neutral, neutral-4);
+    border-top: 1px solid var(--neutral-neutral-4);
   }
 
   &:last-child {
@@ -14,15 +14,15 @@
   }
 
   .accordion__button {
-    border-right: 1px solid get-color(neutral, neutral-4);
-    border-left: 1px solid get-color(neutral, neutral-4);
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
     width: 100%;
     text-align: left;
     padding: 1rem 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: get-color(neutral, neutral-6);
+    background: var(--neutral-neutral-6);
     border-bottom: none;
     border-top: none;
     cursor: pointer;
@@ -47,7 +47,7 @@
   }
 
   .accordion__title {
-    color: get-color(primary, main-dark-1);
+    color: var(--primary-main-dark-1);
     font-family: Inter;
     font-size: 18px;
     font-style: normal;
@@ -56,15 +56,15 @@
     letter-spacing: -0.3px;
 
     &.--locked {
-      color: get-color(neutral, neutral-2);
+      color: var(--neutral-neutral-2);
     }
   }
 
   .accordion__content {
     padding: 0 1.5rem;
     transition: height 0.7s ease-in-out;
-    border-right: 1px solid get-color(neutral, neutral-4);
-    border-left: 1px solid get-color(neutral, neutral-4);
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
   }
 }

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAs.scss

@@ -3,13 +3,13 @@
 .also-known-as {
   display: flex;
   align-items: center;
-  gap: calc($global-gap / 2);
+  gap: calc(1rem / 2);
   flex-wrap: wrap;
 
   .title {
     display: flex;
     align-items: center;
-    gap: calc($global-gap / 4);
+    gap: calc(1rem / 4);
     flex-wrap: nowrap;
 
     svg {

package/dist/src/components/molecules/Article/Article.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-flow: row wrap;
   flex: 1 1 0;
-  border-radius: $global-border-radius;
+  border-radius: var(--global-border-radius);
   box-shadow: $box-shadow-small;
   max-width: $md;
   margin: 1rem 0;

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.scss

@@ -11,7 +11,7 @@
   justify-content: center;
   width: 100%;
   background-color: black;
-  color: get-color(others, white);
+  color: var(--others-white);
 
   @include portrait-tablets {
     flex-direction: row;
@@ -35,7 +35,7 @@
 
     a {
       text-decoration: underline;
-      color: get-color(others, white);
+      color: var(--others-white);
     }
 
     p {

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.scss

@@ -23,7 +23,7 @@
   }
 
   &__background {
-    background-color: get-color(primary, main-dark-2);
+    background-color: var(--primary-main-dark-2);
     position: absolute;
     width: 100%;
     height: 100%;
@@ -35,9 +35,9 @@
   }
 
   &__nav {
-    background: get-color(others, white);
-    border-top-left-radius: $global-border-radius;
-    border-top-right-radius: $global-border-radius;
+    background: var(--others-white);
+    border-top-left-radius: var(--global-border-radius);
+    border-top-right-radius: var(--global-border-radius);
     bottom: 0;
     position: absolute;
     transform: translateY(100%);
@@ -55,8 +55,8 @@
 
       &:after {
         content: '';
-        background: get-color(neutral, neutral-3);
-        border-radius: $global-border-radius;
+        background: var(--neutral-neutral-3);
+        border-radius: var(--global-border-radius);
         display: block;
         height: 0.25rem;
         margin: 0 auto;
@@ -86,7 +86,7 @@
     }
 
     .overlay__footer {
-      border-top: solid 1px get-color(neutral, neutral-4);
+      border-top: solid 1px var(--neutral-neutral-4);
       padding: 1.5rem 1.5rem 2rem;
     }
   }

package/dist/src/components/molecules/BoxForm/BoxForm.scss

@@ -2,9 +2,9 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .box--form {
-  background: get-color(others, white);
-  border-radius: $global-border-radius;
-  box-shadow: $box-shadow-container;
+  background: var(--others-white);
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-container);
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 
@@ -14,8 +14,8 @@
   }
 
   .box--form__title {
-    color: get-color(neutral, neutral-1);
-    font-family: $font-sans;
+    color: var(--neutral-neutral-1);
+    font-family: var(--font-sans);
     font-weight: bold;
     width: 95%;
 
@@ -27,7 +27,7 @@
   .box--form__close {
     display: flex;
     line-height: 1rem;
-    color: get-color(neutral, neutral-1);
+    color: var(--neutral-neutral-1);
     font-size: 35px;
     font-weight: lighter;
     justify-content: flex-end;
@@ -43,7 +43,7 @@
 
 .box--form__header {
   display: flex;
-  border-bottom: solid 1px get-color(neutral, neutral-4);
+  border-bottom: solid 1px var(--neutral-neutral-4);
   padding: 1.5rem 0 1rem;
 }
 
@@ -72,12 +72,12 @@
 }
 
 .box--form__button-annotation {
-  color: get-color(neutral, neutral-1);
+  color: var(--neutral-neutral-1);
 }
 
 .box--form__footer {
   align-items: center;
-  border-top: solid 1px get-color(neutral, neutral-4);
+  border-top: solid 1px var(--neutral-neutral-4);
   display: flex;
   justify-content: space-between;
   padding: 1.5rem 0 1rem 0;

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BreadcrumItem } from '../../atoms';
 // import './Breadcrumb.scss'
 const Breadcrumb = ({ crumbs }) => {
-    return (_jsx("div", { className: 'breadcrumb-container', children: _jsx("ul", { className: 'inline-list sans-serif', children: crumbs.map((crumb, index) => (_jsx(BreadcrumItem, { text: crumb.text, position: index, url: crumb.url }, `crumb-${crumb.text}`))) }) }));
+    return (_jsx("div", { className: 'breadcrumb-container', children: _jsx("ul", { className: 'breadcrumb-container__list sans-serif', children: crumbs.map((crumb, index) => (_jsx(BreadcrumItem, { text: crumb.text, position: index, url: crumb.url }, `crumb-${crumb.text}`))) }) }));
 };
 export default Breadcrumb;

package/dist/src/components/molecules/Breadcrumb/Breadcrumb.scss

@@ -1,3 +1,7 @@
 .breadcrumb-container {
   margin: 1.5rem 0;
+
+  &__list {
+    display: flex;
+  }
 }

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

@@ -7,7 +7,7 @@ import { type BreadcrumbProps } from './BreadcrumbProps.types'
 const Breadcrumb: FC<BreadcrumbProps> = ({ crumbs }) => {
   return (
     <div className='breadcrumb-container'>
-      <ul className='inline-list sans-serif'>
+      <ul className='breadcrumb-container__list sans-serif'>
         {crumbs.map((crumb, index) => (
           <BreadcrumItem key={`crumb-${crumb.text}`} text={crumb.text} position={index} url={crumb.url} />
         ))}

package/dist/src/components/molecules/ContactBox/ContactBox.scss

@@ -7,7 +7,7 @@
   width: 100%;
 
   &__phone {
-    color: get-color(primary, main);
+    color: var(--primary-main);
     font-size: 0.9rem;
     font-weight: bold;
   }
@@ -22,7 +22,7 @@
 
   &--mobile {
     .contact-box__schedule {
-      color: get-color(neutral, neutral-2);
+      color: var(--neutral-neutral-2);
       font-size: 1rem;
       text-align: center;
       margin: 0.5rem 0;
@@ -32,13 +32,13 @@
 
   &--dark-mode {
     .contact-box__phone {
-      color: get-color(primary, main-light-6);
+      color: var(--primary-main-light-6);
     }
     .contact-box__schedule {
-      color: get-color(neutral, neutral-3);
+      color: var(--neutral-neutral-3);
     }
     .contact-box--mobile.contact-box__schedule {
-      color: get-color(neutral, neutral-3);
+      color: var(--neutral-neutral-3);
     }
   }
 

package/dist/src/components/molecules/ContinueEditingBanner/ContinueEditingBanner.scss

@@ -2,7 +2,7 @@
 @import '../../../globalStyles/mediaqueries.scss';
 
 .continue-banner {
-  background-color: get-color(primary, main-light-6);
+  background-color: var(--primary-main-light-6);
   padding: 0 1rem;
   a.e-button {
     width: 100%;
@@ -11,14 +11,14 @@
     }
   }
   &__tagline {
-    color: get-color(neutral, neutral-4);
-    font-family: $font-sans;
+    color: var(--neutral-neutral-4);
+    font-family: var(--font-sans);
     line-height: 1.38;
     margin-bottom: 1rem;
   }
   &__title {
-    color: get-color(primary, main-light-5);
-    font-family: $font-serif;
+    color: var(--primary-main-light-5);
+    font-family: var(--font-serif);
     font-size: 1.5rem;
     line-height: 1.29;
     @include landscape-tablets {
@@ -27,7 +27,7 @@
   }
   &__wrapper {
     align-items: center;
-    background: get-color(neutral, main);
+    background: var(--neutral-main);
     border-radius: 4px;
     display: flex;
     flex-direction: column;

package/dist/src/components/molecules/EmailContactBox/EmailContactBox.scss

@@ -2,7 +2,7 @@
 
 .email-contact-box-container {
   width: 100%;
-  border: 1px solid get-color(neutral, neutral-3);
+  border: 1px solid var(--neutral-neutral-3);
   border-radius: 4px;
   margin-top: 2rem;
   margin-bottom: 6rem;
@@ -20,16 +20,16 @@
     margin-right: 1rem;
 
     path {
-      fill: get-color(primary, main-light-1);
+      fill: var(--primary-main-light-1);
     }
   }
 
   .email-contact-mail {
-    color: get-color(primary, main-light-1);
+    color: var(--primary-main-light-1);
     font-weight: bold;
   }
 
   .email-contact-text {
-    color: get-color(neutral, neutral-2);
+    color: var(--neutral-neutral-2);
   }
 }

package/dist/src/components/molecules/FaqItem/FaqItem.scss

@@ -2,8 +2,8 @@
 @import '../../../globalStyles/functions.scss';
 
 .faqItem {
-  border-radius: $global-border-radius;
-  background: get-color(others, white);
+  border-radius: var(--global-border-radius);
+  background: var(--others-white);
   box-shadow: $box-shadow-small;
 
   .fakeAnchor {
@@ -24,13 +24,13 @@
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
-      gap: $global-gap;
+      gap: var(--global-gap);
       justify-content: space-between;
       padding: 1rem;
       cursor: pointer;
 
       .title {
-        color: get-color(neutral, neutral-1);
+        color: var(--neutral-neutral-1);
         font-size: 1rem;
         line-height: 1.5rem;
       }
@@ -41,7 +41,7 @@
     }
 
     .answer {
-      color: get-color(neutral, neutral-1);
+      color: var(--neutral-neutral-1);
       line-height: 22px;
       letter-spacing: -0.3px;
       padding: 0 1rem 1rem;

package/dist/src/components/molecules/Feedback/Feedback.scss

@@ -38,11 +38,11 @@
 
   &--error {
     .feedback__icon {
-      background: get-color(error, error-3);
+      background: var(--error-error-3);
     }
 
     .feedback__title {
-      color: get-color(error);
+      color: var(--error-main);
     }
   }
 
@@ -52,7 +52,7 @@
     }
 
     .feedback__title {
-      color: get-color(primary, main-dark-1);
+      color: var(--primary-main-dark-1);
       font-weight: bold;
     }
   }
@@ -90,7 +90,7 @@
   }
 
   &__text--grey {
-    color: get-color(neutral, neutral-2);
+    color: var(--neutral-neutral-2);
   }
 
   &__buttons {
@@ -100,7 +100,7 @@
 
   &__cancel__a {
     margin-top: 0.5rem;
-    color: get-color(primary, main);
+    color: var(--primary-main);
     text-decoration: underline;
     &:hover {
       cursor: pointer;

package/dist/src/components/molecules/FreeDocModalContent/FreeDocModalContent.scss

@@ -34,9 +34,9 @@
 
       &__title {
         padding-bottom: 1rem;
-        border-bottom: 1px solid get-color(neutral, neutral-4);
+        border-bottom: 1px solid var(--neutral-neutral-4);
         font-size: 20px;
-        font-family: $font-sans;
+        font-family: var(--font-sans);
         font-weight: 700;
       }
 
@@ -77,7 +77,7 @@
     left: 325px;
     top: 35px;
     line-height: 1rem;
-    color: get-color(neutral, neutral-1);
+    color: var(--neutral-neutral-1);
     font-size: 35px;
 
     &:hover,

package/dist/src/components/molecules/HeaderRatafia/HeaderRatafia.scss

@@ -21,7 +21,7 @@
     }
     &__text {
       font-family: 'Inter', sans-serif;
-      color: get-color(neutral, neutral-1);
+      color: var(--neutral-neutral-1);
       font-size: 1.125rem;
       @include portrait-tablets {
         font-size: 1.5rem;

package/dist/src/components/molecules/KeyFactCardListRatafia/KeyFactCardListRatafia.scss

@@ -12,9 +12,9 @@
   gap: 0.5rem;
 
   border-radius: 4px;
-  border-top: 4px solid get-color(neutral, neutral-6);
-  border-bottom: 8px solid get-color(neutral, neutral-6);
-  background: get-color(neutral, neutral-6);
+  border-top: 4px solid var(--neutral-neutral-6);
+  border-bottom: 8px solid var(--neutral-neutral-6);
+  background: var(--neutral-neutral-6);
 
   height: 490px;
   overflow-y: auto;

package/dist/src/components/molecules/MenuItemsSection/MenuItemsSection.scss

@@ -10,7 +10,7 @@
   }
 
   &__title-wrapper {
-    background-color: get-color(neutral, neutral-5);
+    background-color: var(--neutral-neutral-5);
     display: flex;
     flex-direction: row;
     justify-content: center;

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.scss

@@ -15,11 +15,11 @@
 
     &__title {
       align-self: stretch;
-      color: get-color(primary, main-dark-2);
+      color: var(--primary-main-dark-2);
     }
     &__description {
       align-self: stretch;
-      color: get-color(neutral, neutral-1);
+      color: var(--neutral-neutral-1);
     }
   }
   &__cta {

package/dist/src/components/molecules/MidBannerRatafiaSample/MidBannerRatafiaSample.scss

@@ -24,9 +24,9 @@
     left: 85px;
     top: -13px;
 
-    background: get-color(primary, main-light-5);
-    border-radius: $global-border-radius;
-    border: 1px solid get-color(primary, main-light-3);
+    background: var(--primary-main-light-5);
+    border-radius: var(--global-border-radius);
+    border: 1px solid var(--primary-main-light-3);
     box-shadow: $box-shadow-small;
 
     &__icon {
@@ -34,7 +34,7 @@
       height: 16px;
     }
     &__text {
-      color: get-color(primary, main);
+      color: var(--primary-main);
     }
   }
   &__feature-tag {
@@ -44,8 +44,8 @@
     padding: 0.5rem;
     gap: 0.25rem;
 
-    background: get-color(neutral, neutral-6);
-    border-radius: $global-border-radius;
+    background: var(--neutral-neutral-6);
+    border-radius: var(--global-border-radius);
     box-shadow: $box-shadow-small;
 
     &__icon {
@@ -53,7 +53,7 @@
       height: 20px;
     }
     &__text {
-      color: get-color(neutral, neutral-2);
+      color: var(--neutral-neutral-2);
     }
   }
   &__feature-tag__key-facts {

package/dist/src/components/molecules/MoreDocsDesktop/MoreDocsDesktop.scss

@@ -22,7 +22,7 @@
 
     .section-title {
       text-align: left;
-      font-family: $font-serif;
+      font-family: var(--font-serif);
       font-size: 32px;
       font-weight: normal;
       line-height: 1.31;
@@ -61,7 +61,7 @@
       .separation-line {
         width: 1px;
         height: 196px;
-        background-color: get-color(primary, main-dark-1);
+        background-color: var(--primary-main-dark-1);
       }
 
       .last-line {