@npm_leadtech/legal-lib-components 5.7.5 → 5.7.7

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { BenefitRatafiaCard } from '../../atoms'
 import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
-// import './BenefitRatafiaCardList.scss'
+import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
 
 const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = [] }) => {
   if (benefits.length === 0) return null
 
   return (
-    <div className='benefit-ratafia-card-list'>
+    <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
       {benefits.map((benefit) => (
         <BenefitRatafiaCard key={benefit.id} {...benefit} />
       ))}
-    </div>
+    </BenefitRatafiaCardListStyled>
   )
 }
 export default BenefitRatafiaCardList

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, RichTextInner } from '../../atoms';
-// import './BottomFixedBar.scss'
+import { BottomFixedBarStyled } from './BottomFixedBar.styled';
 const BottomFixedBar = ({ text, button }) => {
     if (text === undefined || button === undefined)
         return null;
-    return (_jsxs("div", { className: 'bottom-fixed-bar', children: [_jsx(RichTextInner, { customClass: 'bottom-fixed-bar__text sans-serif --extra-small', children: text }), _jsx("div", { className: 'bottom-fixed-bar__button-container', children: _jsx(Button, { noLink: true, color: 'primary3', ...button }) })] }));
+    return (_jsxs(BottomFixedBarStyled, { className: 'bottom-fixed-bar', children: [_jsx(RichTextInner, { customClass: 'bottom-fixed-bar__text sans-serif --extra-small', children: text }), _jsx("div", { className: 'bottom-fixed-bar__button-container', children: _jsx(Button, { noLink: true, color: 'primary3', ...button }) })] }));
 };
 export default BottomFixedBar;

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

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

@@ -0,0 +1,50 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BottomFixedBarStyled = styled.div `
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  .bottom-fixed-bar {
+    &__text {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      max-width: 48rem;
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 1.5rem;
+      }
+
+      @media ${device.laptop} {
+        margin-right: 2.5rem;
+      }
+
+      a {
+        text-decoration: underline;
+        color: var(--others-white);
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    &__button-container > .e-button {
+      white-space: nowrap;
+    }
+  }
+`;

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

@@ -0,0 +1,51 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BottomFixedBarStyled = styled.div`
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  .bottom-fixed-bar {
+    &__text {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      max-width: 48rem;
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 1.5rem;
+      }
+
+      @media ${device.laptop} {
+        margin-right: 2.5rem;
+      }
+
+      a {
+        text-decoration: underline;
+        color: var(--others-white);
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    &__button-container > .e-button {
+      white-space: nowrap;
+    }
+  }
+`

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

@@ -3,18 +3,18 @@ import React, { type FC } from 'react'
 
 import { Button, RichTextInner } from '../../atoms'
 import { type BottomFixedBarProps } from './BottomFixedBarProps.types'
-// import './BottomFixedBar.scss'
+import { BottomFixedBarStyled } from './BottomFixedBar.styled'
 
 const BottomFixedBar: FC<BottomFixedBarProps> = ({ text, button }) => {
   if (text === undefined || button === undefined) return null
 
   return (
-    <div className='bottom-fixed-bar'>
+    <BottomFixedBarStyled className='bottom-fixed-bar'>
       <RichTextInner customClass='bottom-fixed-bar__text sans-serif --extra-small'>{text}</RichTextInner>
       <div className='bottom-fixed-bar__button-container'>
         <Button noLink color='primary3' {...button} />
       </div>
-    </div>
+    </BottomFixedBarStyled>
   )
 }
 

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
-// import './BottomOverlay.scss'
+import { BottomOverlayStyled } from './BottomOverlay.styled';
 const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer }) => {
     const [scrollingDown, setScrollingDown] = useState(false);
     const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : '';
@@ -45,6 +45,6 @@ const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer
                 onClose();
         }
     };
-    return (_jsxs("div", { className: `bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`, ...handlers, children: [_jsx("div", { ref: overlayBackground, className: 'bottom-overlay__background' }), _jsxs("nav", { ref: overlayMessage, className: 'bottom-overlay__nav', children: [_jsx("div", { className: `overlay__delimiter ${scrollingShadow}` }), header, _jsx("div", { className: 'overlay__scrollable-section', onScroll: handleScroll, children: body }), footer !== undefined && _jsx("div", { className: 'overlay__footer', children: footer })] })] }));
+    return (_jsxs(BottomOverlayStyled, { className: `bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`, ...handlers, children: [_jsx("div", { ref: overlayBackground, className: 'bottom-overlay__background' }), _jsxs("nav", { ref: overlayMessage, className: 'bottom-overlay__nav', children: [_jsx("div", { className: `overlay__delimiter ${scrollingShadow}` }), header, _jsx("div", { className: 'overlay__scrollable-section', onScroll: handleScroll, children: body }), footer !== undefined && _jsx("div", { className: 'overlay__footer', children: footer })] })] }));
 };
 export default BottomOverlay;

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

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

@@ -0,0 +1,94 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BottomOverlayStyled = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  .bottom-overlay {
+    &__background {
+      background-color: var(--primary-main-dark-2);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      opacity: 0;
+      transition: opacity ease-out 0.3s;
+    }
+
+    &__nav {
+      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%);
+      transition: transform 0.5s ease-in-out;
+      width: 100%;
+      z-index: 2;
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        transform: translateY(0);
+      }
+
+      .overlay__delimiter {
+        padding: 0.5rem 0 1.5rem;
+
+        @media ${device['landscape-tablets']} {
+          display: none;
+        }
+
+        &:after {
+          content: '';
+          background: var(--neutral-neutral-3);
+          border-radius: var(--global-border-radius);
+          display: block;
+          height: 0.25rem;
+          margin: 0 auto;
+          width: 7.5rem;
+        }
+
+        &.overlay__delimiter__scrolling {
+          box-shadow: var(--box-shadow-small);
+          position: relative;
+          z-index: 1;
+        }
+      }
+
+      .overlay__scrollable-section {
+        position: sticky;
+        max-height: 21rem;
+        min-height: 8.5rem;
+        display: flex;
+        overflow-y: scroll;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        width: 100%;
+      }
+
+      .overlay__footer {
+        border-top: solid 1px var(--neutral-neutral-4);
+        padding: 1.5rem 1.5rem 2rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,95 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BottomOverlayStyled = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  .bottom-overlay {
+    &__background {
+      background-color: var(--primary-main-dark-2);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      opacity: 0;
+      transition: opacity ease-out 0.3s;
+    }
+
+    &__nav {
+      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%);
+      transition: transform 0.5s ease-in-out;
+      width: 100%;
+      z-index: 2;
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        transform: translateY(0);
+      }
+
+      .overlay__delimiter {
+        padding: 0.5rem 0 1.5rem;
+
+        @media ${device['landscape-tablets']} {
+          display: none;
+        }
+
+        &:after {
+          content: '';
+          background: var(--neutral-neutral-3);
+          border-radius: var(--global-border-radius);
+          display: block;
+          height: 0.25rem;
+          margin: 0 auto;
+          width: 7.5rem;
+        }
+
+        &.overlay__delimiter__scrolling {
+          box-shadow: var(--box-shadow-small);
+          position: relative;
+          z-index: 1;
+        }
+      }
+
+      .overlay__scrollable-section {
+        position: sticky;
+        max-height: 21rem;
+        min-height: 8.5rem;
+        display: flex;
+        overflow-y: scroll;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        width: 100%;
+      }
+
+      .overlay__footer {
+        border-top: solid 1px var(--neutral-neutral-4);
+        padding: 1.5rem 1.5rem 2rem;
+      }
+    }
+  }
+`

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

@@ -3,7 +3,7 @@ import React, { type FC, useEffect, useRef, useState } from 'react'
 import { useSwipeable } from 'react-swipeable'
 
 import { type BottomOverlayProps } from './BottomOverlayProps.types'
-// import './BottomOverlay.scss'
+import { BottomOverlayStyled } from './BottomOverlay.styled'
 
 const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open = false, onClose, footer }) => {
   const [scrollingDown, setScrollingDown] = useState<boolean>(false)
@@ -57,7 +57,7 @@ const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open
   }
 
   return (
-    <div className={`bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`} {...handlers}>
+    <BottomOverlayStyled className={`bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`} {...handlers}>
       <div ref={overlayBackground} className='bottom-overlay__background'></div>
       <nav ref={overlayMessage} className='bottom-overlay__nav'>
         <div className={`overlay__delimiter ${scrollingShadow}`} />
@@ -67,7 +67,7 @@ const BottomOverlay: FC<BottomOverlayProps> = ({ givenClass, header, body, open
         </div>
         {footer !== undefined && <div className='overlay__footer'>{footer}</div>}
       </nav>
-    </div>
+    </BottomOverlayStyled>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Button } from '../../atoms';
-// import './BoxForm.scss'
+import { BoxFormStyled } from './BoxForm.styled';
 const BoxForm = ({ title, body, footer, closeInsideModal, closeModalAndReloadPage, hideHeader = false }) => {
     const [buttonProps] = React.useState(() => {
         if (footer == null)
@@ -16,6 +16,6 @@ const BoxForm = ({ title, body, footer, closeInsideModal, closeModalAndReloadPag
             ...(onClick != null ? { onClick, noLink: true } : { link })
         };
     });
-    return (_jsxs("div", { className: 'box--form', children: [!hideHeader && (_jsx("div", { className: 'box--form__header', children: closeInsideModal === true ? (_jsxs(_Fragment, { children: [_jsx("h3", { className: 'box--form__title sans-serif --big', children: title }), _jsx("div", { className: 'box--form__close', onClick: closeModalAndReloadPage, children: "\u00D7" })] })) : (_jsx("h3", { className: 'box--form__title sans-serif --big', children: title })) })), _jsxs("div", { className: 'box--form__main', children: [_jsx("div", { className: 'box--form__body', children: body }), footer !== undefined && (_jsxs("div", { className: 'box--form__footer', children: [_jsx("span", { className: 'box--form__footer__text', children: footer.text }), buttonProps !== undefined && _jsx(Button, { ...buttonProps })] }))] })] }));
+    return (_jsxs(BoxFormStyled, { className: 'box--form', children: [!hideHeader && (_jsx("div", { className: 'box--form__header', children: closeInsideModal === true ? (_jsxs(_Fragment, { children: [_jsx("h3", { className: 'box--form__title sans-serif --big', children: title }), _jsx("div", { className: 'box--form__close', onClick: closeModalAndReloadPage, children: "\u00D7" })] })) : (_jsx("h3", { className: 'box--form__title sans-serif --big', children: title })) })), _jsxs("div", { className: 'box--form__main', children: [_jsx("div", { className: 'box--form__body', children: body }), footer !== undefined && (_jsxs("div", { className: 'box--form__footer', children: [_jsx("span", { className: 'box--form__footer__text', children: footer.text }), buttonProps !== undefined && _jsx(Button, { ...buttonProps })] }))] })] }));
 };
 export default BoxForm;

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

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

@@ -0,0 +1,127 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BoxFormStyled = styled.div `
+  background: var(--others-white);
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-container);
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+
+  @media ${device.desktop} {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .box--form__title {
+    color: var(--neutral-neutral-1);
+    font-family: var(--font-sans);
+    font-weight: bold;
+    width: 95%;
+
+    @media (max-width: 369px) {
+      font-size: 1rem;
+    }
+  }
+
+  .box--form__close {
+    display: flex;
+    line-height: 1rem;
+    color: var(--neutral-neutral-1);
+    font-size: 35px;
+    font-weight: lighter;
+    justify-content: flex-end;
+
+    &:hover,
+    &:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  .box--form__header {
+    display: flex;
+    border-bottom: solid 1px var(--neutral-neutral-4);
+    padding: 1.5rem 0 1rem;
+  }
+
+  .box--form__main {
+    padding: 2rem 0;
+
+    @media (max-width: 369px) {
+      padding: 0.5rem 0;
+    }
+  }
+
+  .box--form__body:not(:last-child) {
+    padding-bottom: 1.5rem;
+
+    @media (max-width: 369px) {
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  .box--form__body__footer {
+    text-align: center;
+  }
+
+  .box--form__button--main {
+    margin-bottom: 1rem;
+  }
+
+  .box--form__button-annotation {
+    color: var(--neutral-neutral-1);
+  }
+
+  .box--form__footer {
+    align-items: center;
+    border-top: solid 1px var(--neutral-neutral-4);
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem 0 1rem 0;
+
+    @media ${device['portrait-tablets']} {
+      .e-button {
+        white-space: nowrap;
+      }
+    }
+
+    @media (max-width: 369px) {
+      padding: 0.5rem 0 1rem 0;
+    }
+  }
+
+  .box--form__footer__text {
+    margin-right: 5px;
+    width: 60%;
+
+    @media ${device['portrait-tablets']} {
+      white-space: nowrap;
+    }
+  }
+
+  .box--form__link {
+    color: var(--button-hover);
+  }
+
+  .body-container {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+      font-weight: 900;
+      margin-top: 10px;
+    }
+
+    .input {
+      margin-top: 10px;
+    }
+
+    .input.password {
+      margin-bottom: 15px;
+    }
+
+    .body-button {
+      margin-top: 90px;
+    }
+  }
+`;

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

@@ -0,0 +1,128 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BoxFormStyled = styled.div`
+  background: var(--others-white);
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-container);
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+
+  @media ${device.desktop} {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .box--form__title {
+    color: var(--neutral-neutral-1);
+    font-family: var(--font-sans);
+    font-weight: bold;
+    width: 95%;
+
+    @media (max-width: 369px) {
+      font-size: 1rem;
+    }
+  }
+
+  .box--form__close {
+    display: flex;
+    line-height: 1rem;
+    color: var(--neutral-neutral-1);
+    font-size: 35px;
+    font-weight: lighter;
+    justify-content: flex-end;
+
+    &:hover,
+    &:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  .box--form__header {
+    display: flex;
+    border-bottom: solid 1px var(--neutral-neutral-4);
+    padding: 1.5rem 0 1rem;
+  }
+
+  .box--form__main {
+    padding: 2rem 0;
+
+    @media (max-width: 369px) {
+      padding: 0.5rem 0;
+    }
+  }
+
+  .box--form__body:not(:last-child) {
+    padding-bottom: 1.5rem;
+
+    @media (max-width: 369px) {
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  .box--form__body__footer {
+    text-align: center;
+  }
+
+  .box--form__button--main {
+    margin-bottom: 1rem;
+  }
+
+  .box--form__button-annotation {
+    color: var(--neutral-neutral-1);
+  }
+
+  .box--form__footer {
+    align-items: center;
+    border-top: solid 1px var(--neutral-neutral-4);
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem 0 1rem 0;
+
+    @media ${device['portrait-tablets']} {
+      .e-button {
+        white-space: nowrap;
+      }
+    }
+
+    @media (max-width: 369px) {
+      padding: 0.5rem 0 1rem 0;
+    }
+  }
+
+  .box--form__footer__text {
+    margin-right: 5px;
+    width: 60%;
+
+    @media ${device['portrait-tablets']} {
+      white-space: nowrap;
+    }
+  }
+
+  .box--form__link {
+    color: var(--button-hover);
+  }
+
+  .body-container {
+    display: flex;
+    flex-direction: column;
+
+    .label {
+      font-weight: 900;
+      margin-top: 10px;
+    }
+
+    .input {
+      margin-top: 10px;
+    }
+
+    .input.password {
+      margin-bottom: 15px;
+    }
+
+    .body-button {
+      margin-top: 90px;
+    }
+  }
+`