@npm_leadtech/legal-lib-components 5.7.8 → 5.9.0

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { BaseBox } from '../../atoms';
-// import './BaseBoxList.scss'
+import { BaseBoxListStyled } from './BaseBoxList.styled';
 const BaseBoxList = ({ list, padded, children, givenClass = '' }) => {
     if (children === undefined && list?.length === 0)
         return null;
     const classes = classNames(`base-box-group ${givenClass}`, {
         'base-box-group--padded': padded
     });
-    return _jsx("div", { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) });
+    return (_jsx(BaseBoxListStyled, { className: classes, children: children ?? list?.map((box, index) => _jsx(BaseBox, { ...box }, index)) }));
 };
 export default BaseBoxList;

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

@@ -0,0 +1 @@
+export declare const BaseBoxListStyled: 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/BaseBoxList/{BaseBoxList.scss → BaseBoxList.styled.js}

@@ -1,7 +1,5 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
-
-.base-box-group {
+import styled from 'styled-components';
+export const BaseBoxListStyled = styled.div `
   display: block;
   .base-box {
     &:first-child:not(:last-child) {
@@ -18,9 +16,10 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  &--padded {
+
+  .base-box-group--padded {
     .base-box {
       padding: 2rem;
     }
   }
-}
+`;

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const BaseBoxListStyled = styled.div`
+  display: block;
+  .base-box {
+    &:first-child:not(:last-child) {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &:not(:last-child):not(:first-child) {
+      border-top: none;
+      border-radius: 0;
+    }
+
+    &:last-child:not(:first-child) {
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .base-box-group--padded {
+    .base-box {
+      padding: 2rem;
+    }
+  }
+`

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

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { BaseBox } from '../../atoms'
 import { type BaseBoxListProps } from './BaseBoxListProps.types'
-// import './BaseBoxList.scss'
+import { BaseBoxListStyled } from './BaseBoxList.styled'
 
 const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass = '' }) => {
   if (children === undefined && list?.length === 0) return null
@@ -12,7 +12,11 @@ const BaseBoxList: FC<BaseBoxListProps> = ({ list, padded, children, givenClass
     'base-box-group--padded': padded
   })
 
-  return <div className={classes}>{children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}</div>
+  return (
+    <BaseBoxListStyled className={classes}>
+      {children ?? list?.map((box, index) => <BaseBox key={index} {...box} />)}
+    </BaseBoxListStyled>
+  )
 }
 
 export default BaseBoxList

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BenefitRatafiaCard } from '../../atoms';
-// import './BenefitRatafiaCardList.scss'
+import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
 const BenefitRatafiaCardList = ({ benefits = [] }) => {
     if (benefits.length === 0)
         return null;
-    return (_jsx("div", { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
 };
 export default BenefitRatafiaCardList;

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

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

@@ -0,0 +1,15 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BenefitRatafiaCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BenefitRatafiaCardListStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 1rem;
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`

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;