@npm_leadtech/legal-lib-components 7.102.1 → 7.102.3

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

@@ -4,7 +4,7 @@ import { type VideoProps } from './VideoProps.types'
 
 const Video = ({
   videoSrcURL,
-  videoMimeType = 'video/webm',
+  videoMimeType = '',
   title = '',
   controls = true,
   autoPlay = false,
@@ -26,6 +26,7 @@ const Video = ({
       muted={muted}
       preload={preload}
       poster={poster}
+      playsInline
     >
       <source src={videoSrcURL} type={videoMimeType} />
       {track && <track src={track.src} kind={track.kind} srcLang={track.srclang} label={track.label} />}

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

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

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

@@ -1 +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;
+export declare const WideInfoBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/src/components/molecules/AccordionItem/AccordionItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type AccordionItemProps } from './AccordionItemProps.types';
-export declare const AccordionItem: ({ accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title, heightAutoChange }: AccordionItemProps) => React.JSX.Element;
+export declare const AccordionItem: ({ noPadding, accordionRightContent, children, defaultHeightItem, index, isOpen, onClick, title, heightAutoChange }: AccordionItemProps) => React.JSX.Element;

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
 import { AccordionItemStyled } from './AccordionItem.styled';
-export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
+export const AccordionItem = ({ noPadding = false, accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
     const { dispatch } = useDispatchDataAccordionItem();
@@ -33,9 +33,12 @@ export const AccordionItem = ({ accordionRightContent, children, defaultHeightIt
             }
         };
     }, []);
-    return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
+    return (_jsxs(AccordionItemStyled, { className: `accordion__container 
+      ${state.handler === 'success' ? 'accordion__container--success' : ''} 
+      ${state.locked.isLocked ? 'accordion__container--locked' : ''} 
+      ${!isOpen ? 'accordion__container--closed' : ''}`, children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();
-                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
+                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''} ${noPadding ? 'no-padding' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
 };

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

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

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

@@ -69,5 +69,9 @@ export const AccordionItemStyled = styled.div `
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
     color: black;
+
+    &.no-padding {
+      padding: 0;
+    }
   }
 `;

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

@@ -70,5 +70,9 @@ export const AccordionItemStyled = styled.div`
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
     color: black;
+
+    &.no-padding {
+      padding: 0;
+    }
   }
 `

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

@@ -6,6 +6,7 @@ import { type AccordionItemProps } from './AccordionItemProps.types'
 import { AccordionItemStyled } from './AccordionItem.styled'
 
 export const AccordionItem = ({
+  noPadding = false,
   accordionRightContent,
   children,
   defaultHeightItem = 416,
@@ -47,7 +48,12 @@ export const AccordionItem = ({
   }, [])
 
   return (
-    <AccordionItemStyled className='accordion__container'>
+    <AccordionItemStyled
+      className={`accordion__container 
+      ${state.handler === 'success' ? 'accordion__container--success' : ''} 
+      ${state.locked.isLocked ? 'accordion__container--locked' : ''} 
+      ${!isOpen ? 'accordion__container--closed' : ''}`}
+    >
       <button
         className={`accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
@@ -62,7 +68,7 @@ export const AccordionItem = ({
 
       <div
         ref={contenReftHeight}
-        className={`accordion__content ${!isOpen ? '--closed' : ''}`}
+        className={`accordion__content ${!isOpen ? '--closed' : ''} ${noPadding ? 'no-padding' : ''}`}
         style={isOpen ? { height: heightAccordionItem } : { height: '0px' }}
       >
         {children}

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.d.ts

@@ -1,4 +1,5 @@
 export interface AccordionItemProps {
+    noPadding?: boolean;
     accordionRightContent?: React.ReactNode;
     children?: React.ReactNode;
     defaultHeightItem?: number;

package/dist/src/components/molecules/AccordionItem/AccordionItemProps.types.ts

@@ -1,4 +1,5 @@
 export interface AccordionItemProps {
+  noPadding?: boolean
   accordionRightContent?: React.ReactNode
   children?: React.ReactNode
   defaultHeightItem?: number

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

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

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

@@ -1 +1 @@
-export declare const AllTypeDocumentsItemMenuStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const AllTypeDocumentsItemMenuStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;

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

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

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

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

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

@@ -1 +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;
+export declare const BaseBoxListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -1 +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;
+export declare const BenefitRatafiaCardListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -1 +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;
+export declare const BottomFixedBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -1 +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;
+export declare const BottomOverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

@@ -1 +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;
+export declare const BoxFormStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

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

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

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

package/dist/src/components/molecules/ComplianceBox/ComplianceBox.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type ComplianceBoxProps } from './ComplianceBoxProps.types';
+declare const ComplianceBox: FC<ComplianceBoxProps>;
+export default ComplianceBox;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComplianceBoxStyled } from './ComplianceBox.styled';
+import { GdprLockSvg } from '../../../../images/componentsSvg/GdprLockSvg';
+import { SslShieldSvg } from '../../../../images/componentsSvg/SslShieldSvg';
+const ComplianceBox = ({ title, description, sslBadgeLabel, gdprBadgeLabel, features, legalText, sslIcon, gdprIcon, className = '' }) => {
+    return (_jsxs(ComplianceBoxStyled, { className: `compliance-box ${className}`.trim(), "aria-labelledby": 'compliance-box-title', children: [_jsx("h2", { id: 'compliance-box-title', className: 'compliance-box__title', children: title }), _jsx("p", { className: 'compliance-box__description', children: description }), _jsxs("div", { className: 'compliance-box__badges', children: [_jsxs("div", { className: 'compliance-box__badge', children: [_jsx("span", { className: 'compliance-box__badge-icon', children: sslIcon ?? _jsx(SslShieldSvg, {}) }), _jsx("span", { className: 'compliance-box__badge-label', children: sslBadgeLabel })] }), _jsxs("div", { className: 'compliance-box__badge', children: [_jsx("span", { className: 'compliance-box__badge-icon', children: gdprIcon ?? _jsx(GdprLockSvg, {}) }), _jsx("span", { className: 'compliance-box__badge-label', children: gdprBadgeLabel })] })] }), _jsx("p", { className: 'compliance-box__features', children: features }), _jsx("hr", { className: 'compliance-box__divider' }), _jsx("div", { className: 'compliance-box__legal', children: legalText })] }));
+};
+export default ComplianceBox;

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

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

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

@@ -0,0 +1,113 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ComplianceBoxStyled = styled.section `
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--neutral-neutral-6);
+  font-family: var(--font-sans);
+  color: var(--neutral-neutral-1);
+
+  .compliance-box {
+    &__title {
+      margin: 0 0 0.5rem;
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+      letter-spacing: -0.3px;
+      color: var(--neutral-neutral-1);
+    }
+
+    &__description {
+      margin: 0 0 1rem;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+      color: var(--neutral-neutral-1);
+    }
+
+    &__badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      flex-direction: column;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+      }
+    }
+
+    &__badge {
+      display: inline-flex;
+      align-items: stretch;
+      overflow: hidden;
+      border-radius: 0.25rem;
+    }
+
+    &__badge-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: #024da1;
+      color: var(--primary-main-dark-1);
+      border-radius: 8px 0px 0px 8px;
+      padding: 4px;
+
+      svg {
+        display: block;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    &__badge-label {
+      display: flex;
+      align-items: center;
+      background-color: #17264d;
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1rem;
+      letter-spacing: -0.2px;
+      color: var(--others-white);
+      white-space: nowrap;
+      border-radius: 0px 8px 8px 0px;
+      padding: 6px 8px;
+    }
+
+    &__features {
+      margin: 0 0 1rem;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+      color: var(--neutral-neutral-2);
+    }
+
+    &__divider {
+      margin: 0 0 1rem;
+      border: 0;
+      border-top: 1px solid var(--neutral-neutral-4);
+    }
+
+    &__legal {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+      color: var(--neutral-neutral-2);
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      img {
+        display: inline-block;
+        vertical-align: middle;
+        max-height: 1rem;
+        margin: 0 0.125rem;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,114 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ComplianceBoxStyled = styled.section`
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--neutral-neutral-6);
+  font-family: var(--font-sans);
+  color: var(--neutral-neutral-1);
+
+  .compliance-box {
+    &__title {
+      margin: 0 0 0.5rem;
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+      letter-spacing: -0.3px;
+      color: var(--neutral-neutral-1);
+    }
+
+    &__description {
+      margin: 0 0 1rem;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+      color: var(--neutral-neutral-1);
+    }
+
+    &__badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      flex-direction: column;
+
+      @media ${device['landscape-tablets']} {
+        flex-direction: row;
+      }
+    }
+
+    &__badge {
+      display: inline-flex;
+      align-items: stretch;
+      overflow: hidden;
+      border-radius: 0.25rem;
+    }
+
+    &__badge-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: #024da1;
+      color: var(--primary-main-dark-1);
+      border-radius: 8px 0px 0px 8px;
+      padding: 4px;
+
+      svg {
+        display: block;
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    &__badge-label {
+      display: flex;
+      align-items: center;
+      background-color: #17264d;
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1rem;
+      letter-spacing: -0.2px;
+      color: var(--others-white);
+      white-space: nowrap;
+      border-radius: 0px 8px 8px 0px;
+      padding: 6px 8px;
+    }
+
+    &__features {
+      margin: 0 0 1rem;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+      color: var(--neutral-neutral-2);
+    }
+
+    &__divider {
+      margin: 0 0 1rem;
+      border: 0;
+      border-top: 1px solid var(--neutral-neutral-4);
+    }
+
+    &__legal {
+      margin: 0;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1rem;
+      color: var(--neutral-neutral-2);
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      img {
+        display: inline-block;
+        vertical-align: middle;
+        max-height: 1rem;
+        margin: 0 0.125rem;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,44 @@
+import React, { type FC } from 'react'
+
+import { type ComplianceBoxProps } from './ComplianceBoxProps.types'
+import { ComplianceBoxStyled } from './ComplianceBox.styled'
+import { GdprLockSvg } from '../../../../images/componentsSvg/GdprLockSvg'
+import { SslShieldSvg } from '../../../../images/componentsSvg/SslShieldSvg'
+
+const ComplianceBox: FC<ComplianceBoxProps> = ({
+  title,
+  description,
+  sslBadgeLabel,
+  gdprBadgeLabel,
+  features,
+  legalText,
+  sslIcon,
+  gdprIcon,
+  className = ''
+}) => {
+  return (
+    <ComplianceBoxStyled className={`compliance-box ${className}`.trim()} aria-labelledby='compliance-box-title'>
+      <h2 id='compliance-box-title' className='compliance-box__title'>
+        {title}
+      </h2>
+      <p className='compliance-box__description'>{description}</p>
+
+      <div className='compliance-box__badges'>
+        <div className='compliance-box__badge'>
+          <span className='compliance-box__badge-icon'>{sslIcon ?? <SslShieldSvg />}</span>
+          <span className='compliance-box__badge-label'>{sslBadgeLabel}</span>
+        </div>
+        <div className='compliance-box__badge'>
+          <span className='compliance-box__badge-icon'>{gdprIcon ?? <GdprLockSvg />}</span>
+          <span className='compliance-box__badge-label'>{gdprBadgeLabel}</span>
+        </div>
+      </div>
+
+      <p className='compliance-box__features'>{features}</p>
+      <hr className='compliance-box__divider' />
+      <div className='compliance-box__legal'>{legalText}</div>
+    </ComplianceBoxStyled>
+  )
+}
+
+export default ComplianceBox

package/dist/src/components/molecules/ComplianceBox/ComplianceBoxProps.types.d.ts

@@ -0,0 +1,11 @@
+export interface ComplianceBoxProps {
+    title: string;
+    description: string;
+    sslBadgeLabel: string;
+    gdprBadgeLabel: string;
+    features: string;
+    legalText: React.ReactNode;
+    sslIcon?: React.ReactNode;
+    gdprIcon?: React.ReactNode;
+    className?: string;
+}

package/dist/src/components/molecules/ComplianceBox/ComplianceBoxProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/ComplianceBox/ComplianceBoxProps.types.ts

@@ -0,0 +1,11 @@
+export interface ComplianceBoxProps {
+  title: string
+  description: string
+  sslBadgeLabel: string
+  gdprBadgeLabel: string
+  features: string
+  legalText: React.ReactNode
+  sslIcon?: React.ReactNode
+  gdprIcon?: React.ReactNode
+  className?: string
+}

package/dist/src/components/molecules/ComplianceBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ComplianceBox } from './ComplianceBox';
+export { type ComplianceBoxProps } from './ComplianceBoxProps.types';

package/dist/src/components/molecules/ComplianceBox/index.js

@@ -0,0 +1 @@
+export { default as ComplianceBox } from './ComplianceBox';

package/dist/src/components/molecules/ComplianceBox/index.ts

@@ -0,0 +1,2 @@
+export { default as ComplianceBox } from './ComplianceBox'
+export { type ComplianceBoxProps } from './ComplianceBoxProps.types'

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

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

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

@@ -1,2 +1,2 @@
-export declare const ContactInformation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PhoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const ContactInformation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const PhoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { MessageInformation } from '../../atoms';
 import classNames from 'classnames';
 import { useIsMobileOrTable } from '../../../hooks';
 // import './CountDownMessage.scss'
-const CountDownMessage = ({ noImg = false, text, time, centered = false }) => {
+const CountDownMessage = ({ noImg = false, text, time, centered = false, iconReloj = false }) => {
     const [scrollSuperateCountDown, setScrollSuperateCountDown] = useState(false);
     const { isMobile, isTablet } = useIsMobileOrTable();
     const countDownRef = useRef(null);
@@ -25,7 +25,7 @@ const CountDownMessage = ({ noImg = false, text, time, centered = false }) => {
             window.removeEventListener('scroll', handleScroll);
         };
     }, [isTablet]);
-    const messageInformationHtml = _jsx(MessageInformation, { noImg: noImg, text: text, time: time, centered: centered });
+    const messageInformationHtml = (_jsx(MessageInformation, { noImg: noImg, text: text, time: time, centered: centered, iconReloj: iconReloj }));
     const classCountDownMessageFixed = classNames({
         'count-down-message-fixed': true,
         'count-down-message-fixed--show': scrollSuperateCountDown || isMobile

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

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

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

@@ -8,7 +8,13 @@ import { useIsMobileOrTable } from '../../../hooks'
 
 // import './CountDownMessage.scss'
 
-const CountDownMessage: FC<CountDownMessageProps> = ({ noImg = false, text, time, centered = false }) => {
+const CountDownMessage: FC<CountDownMessageProps> = ({
+  noImg = false,
+  text,
+  time,
+  centered = false,
+  iconReloj = false
+}) => {
   const [scrollSuperateCountDown, setScrollSuperateCountDown] = useState<boolean>(false)
   const { isMobile, isTablet } = useIsMobileOrTable()
   const countDownRef = useRef<null | HTMLDivElement>(null)
@@ -33,7 +39,9 @@ const CountDownMessage: FC<CountDownMessageProps> = ({ noImg = false, text, time
     }
   }, [isTablet])
 
-  const messageInformationHtml = <MessageInformation noImg={noImg} text={text} time={time} centered={centered} />
+  const messageInformationHtml = (
+    <MessageInformation noImg={noImg} text={text} time={time} centered={centered} iconReloj={iconReloj} />
+  )
 
   const classCountDownMessageFixed = classNames({
     'count-down-message-fixed': true,

package/dist/src/components/molecules/CountDownMessage/CountDownMessageProps.types.d.ts

@@ -3,4 +3,5 @@ export interface CountDownMessageProps {
     text: string | React.ReactNode;
     time?: string;
     centered?: boolean;
+    iconReloj?: boolean;
 }

package/dist/src/components/molecules/CountDownMessage/CountDownMessageProps.types.ts

@@ -3,4 +3,5 @@ export interface CountDownMessageProps {
   text: string | React.ReactNode
   time?: string
   centered?: boolean
+  iconReloj?: boolean
 }