@npm_leadtech/legal-lib-components 5.2.31 → 5.2.40

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

@@ -6,7 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { DialogMenuIconStyled } from './DialogMenuIcon.styled';
 import cross from '../../../../images/svg/icon-clear-24-px.svg';
 import shape from '../../../../images/svg/shape.svg';
 // import './DialogMenuIcon.scss'
@@ -47,10 +46,10 @@ const DialogMenuIcon = ({ onClose, onOpen, content }) => {
             onClose();
         }
     };
-    return (_jsx(DialogMenuIconStyled, { children: _jsxs("div", { className: classnames, ref: iconContainer, children: [_jsx("img", { className: 'dialog-menu-icon__image', onClick: () => {
-                        onHandleChange(true, false);
-                    }, src: shape, alt: 'shape' }), _jsxs("div", { className: 'dialog-menu-icon__message', ref: messageContainer, children: [_jsx("p", { children: content }), _jsx("img", { onClick: () => {
-                                onHandleChange();
-                            }, src: cross, alt: '' })] })] }) }));
+    return (_jsxs("div", { className: classnames, ref: iconContainer, children: [_jsx("img", { className: 'dialog-menu-icon__image', onClick: () => {
+                    onHandleChange(true, false);
+                }, src: shape, alt: 'shape' }), _jsxs("div", { className: 'dialog-menu-icon__message', ref: messageContainer, children: [_jsx("p", { children: content }), _jsx("img", { onClick: () => {
+                            onHandleChange();
+                        }, src: cross, alt: '' })] })] }));
 };
 export default DialogMenuIcon;

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

@@ -17,8 +17,8 @@
 
   &__message {
     visibility: hidden;
-    background-color: var(--neutral-neutral-1);
-    color: var(--others-white);
+    background-color: get-color(neutral, neutral-1);
+    color: get-color(others, white);
     padding: 1rem 1rem;
     border-radius: 0.3rem;
     font-size: 12px;
@@ -67,7 +67,7 @@
     width: 0;
     height: 0;
     box-shadow: 0 0.25rem 0.5rem -0.5rem;
-    border-bottom: 0.5rem solid var(--neutral-neutral-1);
+    border-bottom: 0.5rem solid get-color(neutral, neutral-1);
     -webkit-transform: translate(-100%, 0);
     transform: translate(-100%, 0);
     top: 1.1rem;

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

@@ -8,7 +8,6 @@ import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 
 import { type DialogMenuIconProps } from './DialogMenuIconProps.types'
-import { DialogMenuIconStyled } from './DialogMenuIcon.styled'
 import cross from '../../../../images/svg/icon-clear-24-px.svg'
 import shape from '../../../../images/svg/shape.svg'
 // import './DialogMenuIcon.scss'
@@ -58,28 +57,26 @@ const DialogMenuIcon: FC<DialogMenuIconProps> = ({ onClose, onOpen, content }) =
   }
 
   return (
-    <DialogMenuIconStyled>
-      <div className={classnames} ref={iconContainer}>
+    <div className={classnames} ref={iconContainer}>
+      <img
+        className='dialog-menu-icon__image'
+        onClick={() => {
+          onHandleChange(true, false)
+        }}
+        src={shape}
+        alt='shape'
+      />
+      <div className='dialog-menu-icon__message' ref={messageContainer}>
+        <p>{content}</p>
         <img
-          className='dialog-menu-icon__image'
           onClick={() => {
-            onHandleChange(true, false)
+            onHandleChange()
           }}
-          src={shape}
-          alt='shape'
-        />
-        <div className='dialog-menu-icon__message' ref={messageContainer}>
-          <p>{content}</p>
-          <img
-            onClick={() => {
-              onHandleChange()
-            }}
-            src={cross}
-            alt=''
-          ></img>
-        </div>
+          src={cross}
+          alt=''
+        ></img>
       </div>
-    </DialogMenuIconStyled>
+    </div>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React from 'react';
-import { DisclaimerStyled } from './Disclaimer.styled';
+// import './Disclaimer.scss'
 const Disclaimer = ({ givenClass, text, disclaimerLinks = false, complexCopyRight, complexCopyRightMobile, simpleCopyRight }) => {
     const showDisclaimerLinks = disclaimerLinks && _jsx(React.Fragment, { children: complexCopyRight });
     const showDisclaimerLinkMobile = disclaimerLinks && (_jsx(React.Fragment, { children: _jsxs("div", { className: 'disclaimer__copy', children: [complexCopyRightMobile, _jsx("p", { children: simpleCopyRight })] }) }));
-    return (_jsx(DisclaimerStyled, { className: `disclaimer__wrapper ${givenClass}`, children: _jsxs("div", { className: 'wrapper disclaimer sans-serif --extra-small', children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
+    return (_jsx("div", { className: `disclaimer__wrapper ${givenClass}`, children: _jsxs("div", { className: 'wrapper disclaimer sans-serif --extra-small', children: [_jsx("div", { className: 'disclaimer__copy', children: text }), disclaimerLinks ? _jsx("p", { className: 'desktop_view', children: showDisclaimerLinks }) : _jsx("p", { children: simpleCopyRight }), disclaimerLinks && _jsx("div", { className: 'disclaimer__copy mobile_view', children: showDisclaimerLinkMobile })] }) }));
 };
 export default Disclaimer;

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

@@ -0,0 +1,45 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.disclaimer {
+  padding: 1rem;
+
+  @include laptop {
+    padding: 1rem 0;
+  }
+
+  &__wrapper {
+    background-color: get-color(neutral, main);
+    color: get-color(neutral, neutral-4);
+
+    .standard {
+      color: get-color(neutral, neutral-4);
+      text-decoration: underline;
+    }
+  }
+}
+
+.grey-color {
+  color: get-color(neutral, neutral-1);
+  background-color: get-color(neutral, neutral-4);
+}
+
+.disclaimer__copy {
+  margin-bottom: 0.5rem;
+}
+
+.desktop_view {
+  display: block;
+
+  @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+    display: none;
+  }
+}
+
+.mobile_view {
+  display: none;
+
+  @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+    display: block;
+  }
+}

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

@@ -2,7 +2,7 @@
 import React, { type FC } from 'react'
 
 import { type DisclaimerProps } from './DisclaimerProps.types'
-import { DisclaimerStyled } from './Disclaimer.styled'
+// import './Disclaimer.scss'
 
 const Disclaimer: FC<DisclaimerProps> = ({
   givenClass,
@@ -24,13 +24,13 @@ const Disclaimer: FC<DisclaimerProps> = ({
   )
 
   return (
-    <DisclaimerStyled className={`disclaimer__wrapper ${givenClass}`}>
+    <div className={`disclaimer__wrapper ${givenClass}`}>
       <div className={'wrapper disclaimer sans-serif --extra-small'}>
         <div className='disclaimer__copy'>{text}</div>
         {disclaimerLinks ? <p className='desktop_view'>{showDisclaimerLinks}</p> : <p>{simpleCopyRight}</p>}
         {disclaimerLinks && <div className='disclaimer__copy mobile_view'>{showDisclaimerLinkMobile}</div>}
       </div>
-    </DisclaimerStyled>
+    </div>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { Button } from '../Button';
 import { ChevronRight } from '../../../../images/componentsSvg/ChevronRight';
-import { DisclaimerRatafiaStyled } from './DisclaimerRatafia.styled';
+// import './DisclaimerRatafia.scss'
 export const DisclaimerRatafia = ({ icon, text, ctaTextShowDisclaimer, ctaTextCloseDisclaimer, legalAdviceText, copyrightText }) => {
     const [disclaimer, toggleDisclaimer] = React.useState(false);
     const handleShowDisclaimer = () => {
@@ -17,6 +17,6 @@ export const DisclaimerRatafia = ({ icon, text, ctaTextShowDisclaimer, ctaTextCl
             ctaTextCloseDisclaimer.onClick();
     };
     const existLegalAdviceText = Boolean(legalAdviceText);
-    return (_jsxs(DisclaimerRatafiaStyled, { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), existLegalAdviceText && (_jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: legalAdviceText })), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
+    return (_jsxs("div", { className: 'disclaimer-ratafia', children: [_jsxs("div", { className: 'disclaimer-ratafia__text-desktop', children: [_jsxs("div", { className: 'disclaimer-ratafia__text', children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__text__text', children: text })] }), existLegalAdviceText && (_jsx("div", { className: 'disclaimer-ratafia__legal-advice', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: legalAdviceText }) })), _jsx("div", { className: 'disclaimer-ratafia__copyright', children: _jsx("span", { className: 'sans-serif --extra-small disclaimer-ratafia__copyright__text', children: copyrightText }) })] }), _jsxs("div", { className: 'disclaimer-ratafia__text-mobile', children: [_jsx("div", { className: 'disclaimer-ratafia__text-mobile-text', children: _jsxs("button", { "data-qa": ctaTextShowDisclaimer.dataQa, className: 'sans-serif --small disclaimer-ratafia__text__text', onClick: handleShowDisclaimer, children: [_jsx("div", { className: 'disclaimer-ratafia__text__icon', children: icon }), ctaTextShowDisclaimer.text, _jsx("div", { className: 'disclaimer-ratafia__text__arrow', children: _jsx(ChevronRight, {}) })] }) }), disclaimer && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'disclaimer-ratafia__disclaimer-background' }), _jsxs("div", { className: 'disclaimer-ratafia__disclaimer-fixed', children: [_jsx("p", { className: 'disclaimer-ratafia__disclaimer-fixed__title', children: ctaTextShowDisclaimer.text }), _jsx("p", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__subTitle', children: text }), existLegalAdviceText && (_jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: legalAdviceText })), _jsx("div", { className: 'sans-serif --small disclaimer-ratafia__disclaimer-fixed__text', children: copyrightText }), _jsx(Button, { color: 'primary', label: ctaTextCloseDisclaimer.text, givenClass: 'disclaimer-ratafia__disclaimer-fixed__cta', onClick: handleCloseDisclaimer, noLink: true, dataQa: ctaTextCloseDisclaimer.dataQa })] })] }))] })] }));
 };
 export default DisclaimerRatafia;

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

@@ -0,0 +1,149 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.disclaimer-ratafia {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+
+  gap: 1rem;
+
+  &__text-desktop {
+    display: none;
+    @include portrait-tablets {
+      display: block;
+    }
+  }
+
+  &__text-mobile {
+    width: 100%;
+    @include portrait-tablets {
+      display: none;
+    }
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 0.5rem;
+    gap: 0.25rem;
+
+    border-radius: 4px;
+    background: get-color(neutral, neutral-6);
+
+    @include portrait-tablets {
+      margin-bottom: 1rem;
+    }
+
+    &__icon {
+      width: 14px;
+      margin-right: 5px;
+    }
+    &__arrow {
+      position: absolute;
+      top: 10px;
+      right: 6px;
+      fill: get-color(neutral, neutral-2);
+      svg {
+        display: block;
+        width: 16px;
+        height: 16px;
+      }
+    }
+    &__text {
+      display: flex;
+      width: 100%;
+      position: relative;
+      color: get-color(neutral, neutral-2);
+      border: none;
+      padding: 8px;
+      border-radius: 4px;
+      @include portrait-tablets {
+        margin-bottom: 0;
+        padding: 0;
+      }
+    }
+  }
+  &__copyright,
+  &__legal-advice {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+
+    &__text {
+      color: get-color(neutral, neutral-2);
+      a {
+        color: get-color(neutral, neutral-2);
+      }
+    }
+  }
+
+  &__legal-advice {
+    margin-bottom: 16px;
+  }
+
+  &__disclaimer-fixed {
+    border-radius: 5px 5px 0 0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    background: get-color(others, white);
+    border-top: 1px solid get-color(neutral, neutral-5);
+    &:after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: calc(50% - 17px);
+      border: 2px solid get-color(neutral, neutral-3);
+      border-radius: 6px;
+      width: 34px;
+    }
+
+    &__title {
+      padding-top: 2rem;
+      font-size: 1.15rem;
+      font-weight: 700;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid get-color(neutral, neutral-4);
+      color: get-color(neutral, neutral-1);
+    }
+    &__subTitle {
+      padding-top: 1.5rem;
+      font-size: 0.9rem;
+      color: get-color(neutral, neutral-2);
+      padding-bottom: 1.5rem;
+    }
+    &__text {
+      padding-bottom: 1.5rem;
+      p {
+        font-size: 12px;
+        color: get-color(neutral, neutral-2);
+      }
+      a {
+        color: get-color(neutral, neutral-2);
+      }
+    }
+    &__cta {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &__disclaimer-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: get-color(neutral, neutral-2);
+    opacity: 30%;
+  }
+}

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

@@ -4,7 +4,7 @@ import React from 'react'
 import { Button } from '../Button'
 import { ChevronRight } from '../../../../images/componentsSvg/ChevronRight'
 import { type DisclaimerRatafiaProps } from './DisclaimerRatafiaProps'
-import { DisclaimerRatafiaStyled } from './DisclaimerRatafia.styled'
+// import './DisclaimerRatafia.scss'
 
 export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
   icon,
@@ -29,7 +29,7 @@ export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
   const existLegalAdviceText = Boolean(legalAdviceText)
 
   return (
-    <DisclaimerRatafiaStyled className='disclaimer-ratafia'>
+    <div className='disclaimer-ratafia'>
       <div className='disclaimer-ratafia__text-desktop'>
         <div className='disclaimer-ratafia__text'>
           <div className='disclaimer-ratafia__text__icon'>{icon}</div>
@@ -82,7 +82,7 @@ export const DisclaimerRatafia: React.FC<DisclaimerRatafiaProps> = ({
           </>
         )}
       </div>
-    </DisclaimerRatafiaStyled>
+    </div>
   )
 }
 

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DividerStyled } from './Divider.styled';
+// import './Divider.scss'
 const Divider = ({ containerClass, lineClass, text, image }) => {
     if (text?.length === 0 || image?.length === 0)
         return null;
-    return (_jsxs(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
+    return (_jsxs("div", { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
 };
 export default Divider;

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

@@ -0,0 +1,20 @@
+@import '../../../globalStyles/variables.scss';
+
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  &__line {
+    width: 45%;
+    height: 0px;
+    border-bottom: 1px solid get-color(neutral, neutral-4);
+  }
+
+  &__word,
+  &__image {
+    width: fit-content;
+    text-align: center;
+    margin: 0 0.75rem;
+  }
+}

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

@@ -3,18 +3,18 @@
 import React, { type FC } from 'react'
 
 import { type DividerProps } from './DividerProps.types'
-import { DividerStyled } from './Divider.styled'
+// import './Divider.scss'
 
 const Divider: FC<DividerProps> = ({ containerClass, lineClass, text, image }) => {
   if (text?.length === 0 || image?.length === 0) return null
 
   return (
-    <DividerStyled className={`divider ${containerClass ?? ''}`}>
+    <div className={`divider ${containerClass ?? ''}`}>
       <div className={`divider__line ${lineClass ?? ''}`}></div>
       {text !== undefined && <p className='divider__word'>{text}</p>}
       {image !== undefined && <img className='divider__image' src={image} alt='' role='img'></img>}
       <div className={`divider__line ${lineClass ?? ''}`}></div>
-    </DividerStyled>
+    </div>
   )
 }
 

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
+// import './DocumentStatus.scss'
 const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
-        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
+        return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
     if (type === 'new') {
-        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
+        return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
     }
-    return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
+    return (_jsxs("div", { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
 };
 export default DocumentStatus;

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

@@ -0,0 +1,91 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+html[data-theme='lawdistrict'] {
+  .document-status {
+    &.--in-progress {
+      background-color: get-color(secondary, main-light-4);
+      border-color: get-color(secondary, main-dark-1);
+      color: get-color(secondary, main-dark-2);
+
+      svg {
+        g > g {
+          fill: get-color(secondary, main-dark-2);
+        }
+      }
+    }
+
+    &.--is-new {
+      background-color: get-color(secondary, main-dark-2);
+      border-color: get-color(secondary);
+      color: get-color(secondary, main-light-4);
+
+      .icon {
+        margin-right: 1.4rem;
+      }
+    }
+  }
+}
+
+.document-status {
+  font-family: $font-sans;
+  border-radius: $global-border-radius;
+  border: 1px solid;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  align-self: center;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+  width: 7.36rem;
+
+  @include laptop {
+    align-self: flex-start;
+  }
+
+  @include landscape-tablets {
+    position: inherit;
+  }
+
+  span {
+    font-weight: bold;
+  }
+
+  .icon {
+    margin-right: 0.25rem;
+  }
+
+  &.--is-completed {
+    background-color: get-color(primary, main-light-5);
+    border-color: get-color(primary, main-light-3);
+    color: get-color(primary);
+
+    svg {
+      path {
+        fill: get-color(primary);
+      }
+    }
+  }
+
+  &.--in-progress {
+    background-color: get-color(neutral, neutral-5);
+    border-color: get-color(neutral, neutral-3);
+    color: get-color(neutral, neutral-1);
+
+    svg {
+      g > g {
+        fill: get-color(neutral, neutral-1);
+      }
+    }
+  }
+
+  &.--is-new {
+    background-color: get-color(primary, main-light-1);
+    border-color: get-color(primary);
+    color: get-color(secondary, main-light-4);
+
+    .icon {
+      margin-right: 1.4rem;
+    }
+  }
+}

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

@@ -1,10 +1,10 @@
 import React, { type FC } from 'react'
 
 import { type DocumentStatusProps } from './DocumentStatusProps.types'
-import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
+// import './DocumentStatus.scss'
 
 const DocumentStatus: FC<DocumentStatusProps> = ({
   type,
@@ -14,23 +14,23 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-completed'}>
+      <div data-testid='document-status' className={'document-status --is-completed'}>
         <Done24px className='icon' /> <span className={'sans-serif --small'}>{statusCompletedText}</span>
-      </DocumentStatusStyled>
+      </div>
     )
   }
   if (type === 'new') {
     return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-new'}>
+      <div data-testid='document-status' className={'document-status --is-new'}>
         <NewRelease24p className='icon' /> <span className={'sans-serif --small'}>{statusNewText}</span>
-      </DocumentStatusStyled>
+      </div>
     )
   }
   return (
-    <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
+    <div data-testid='document-status' className={'document-status --in-progress'}>
       <Time24px className='icon' />
       <span className={'sans-serif --small'}>{statusInProgressText}</span>
-    </DocumentStatusStyled>
+    </div>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DocumentTagStyled } from './DocumentTag.styled';
+// import './DocumentTag.scss'
 export const DocumentTag = ({ text = '' }) => {
     if (text === '')
         return null;
-    return _jsx(DocumentTagStyled, { className: 'document-tag', children: text });
+    return _jsx("p", { className: 'document-tag', children: text });
 };

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

@@ -0,0 +1,13 @@
+@import '../../../globalStyles/variables.scss';
+
+.document-tag {
+  background: get-color(others, white);
+  border: 1px solid get-color(neutral, neutral-4);
+  border-radius: $global-border-radius;
+  color: get-color(neutral, neutral-2);
+  font-size: 0.875rem;
+  letter-spacing: -0.3px;
+  line-height: 1.15rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+}

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

@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { type DocumentTagProps } from './DocumentTagProps'
-import { DocumentTagStyled } from './DocumentTag.styled'
+// import './DocumentTag.scss'
 
 export const DocumentTag: React.FC<DocumentTagProps> = ({ text = '' }) => {
   if (text === '') return null
-  return <DocumentTagStyled className='document-tag'>{text}</DocumentTagStyled>
+  return <p className='document-tag'>{text}</p>
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExpertCardStyled } from './ExpertCard.styled';
+// import './ExpertCard.scss'
 const ExpertCard = ({ title, url, description, image }) => {
-    return (_jsx(ExpertCardStyled, { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
+    return (_jsx("div", { className: 'expert-card', children: _jsxs("div", { className: 'expert-card__box', children: [_jsx("div", { className: 'expert-card__image', children: image }), url != null && (_jsx("a", { className: 'expert-card__title', href: url, children: title })), url == null && _jsx("p", { className: 'expert-card__title', children: title }), _jsx("p", { className: 'expert-card__description', children: description })] }) }));
 };
 export default ExpertCard;