@npm_leadtech/legal-lib-components 7.106.2 → 7.106.5

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+
+import { size } from '../../../globalStyles/breakpoints'
+
+export const BenefitsCheckoutStyled = styled.section`
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.625rem;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  background: var(--neutral-neutral-6);
+  font-family: var(--font-main);
+
+  .benefits-checkout {
+    &__title {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      font-weight: 700;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    &__item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+
+      img {
+        display: block;
+        width: 1.125rem;
+        height: 1.125rem;
+        flex: 0 0 1.125rem;
+      }
+    }
+  }
+
+  @media (max-width: ${size.tab}) {
+    padding: 1rem;
+  }
+`

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

@@ -0,0 +1,34 @@
+import React, { type FC, useId } from 'react'
+
+import { type BenefitsCheckoutProps } from './BenefitsCheckoutProps.types'
+import { BenefitsCheckoutStyled } from './BenefitsCheckout.styled'
+import aiIcon from '../../../../images/BenefitsCheckout/benefits-ai.svg'
+import checkIcon from '../../../../images/BenefitsCheckout/benefits-check.svg'
+
+const iconByType = {
+  ai: aiIcon,
+  check: checkIcon
+}
+
+export const BenefitsCheckout: FC<BenefitsCheckoutProps> = ({ title, benefits, className }) => {
+  const titleId = useId()
+
+  return (
+    <BenefitsCheckoutStyled
+      className={['benefits-checkout', className].filter(Boolean).join(' ')}
+      aria-labelledby={titleId}
+    >
+      <h2 className='benefits-checkout__title' id={titleId}>
+        {title}
+      </h2>
+      <ul className='benefits-checkout__list'>
+        {benefits.map((benefit, index) => (
+          <li className='benefits-checkout__item' key={`${benefit.icon ?? 'check'}-${index}-${benefit.text}`}>
+            <img src={iconByType[benefit.icon ?? 'check']} alt='' aria-hidden='true' />
+            <span>{benefit.text}</span>
+          </li>
+        ))}
+      </ul>
+    </BenefitsCheckoutStyled>
+  )
+}

package/dist/src/components/molecules/BenefitsCheckout/BenefitsCheckoutProps.types.d.ts

@@ -0,0 +1,10 @@
+export type BenefitsCheckoutIcon = 'check' | 'ai';
+export interface CheckoutBenefit {
+    text: string;
+    icon?: BenefitsCheckoutIcon;
+}
+export interface BenefitsCheckoutProps {
+    title: string;
+    benefits: readonly CheckoutBenefit[];
+    className?: string;
+}

package/dist/src/components/molecules/BenefitsCheckout/BenefitsCheckoutProps.types.js

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

package/dist/src/components/molecules/BenefitsCheckout/BenefitsCheckoutProps.types.ts

@@ -0,0 +1,12 @@
+export type BenefitsCheckoutIcon = 'check' | 'ai'
+
+export interface CheckoutBenefit {
+  text: string
+  icon?: BenefitsCheckoutIcon
+}
+
+export interface BenefitsCheckoutProps {
+  title: string
+  benefits: readonly CheckoutBenefit[]
+  className?: string
+}

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

@@ -0,0 +1,2 @@
+export { BenefitsCheckout } from './BenefitsCheckout';
+export { type BenefitsCheckoutIcon, type BenefitsCheckoutProps, type CheckoutBenefit } from './BenefitsCheckoutProps.types';

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

@@ -0,0 +1 @@
+export { BenefitsCheckout } from './BenefitsCheckout';

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

@@ -0,0 +1,6 @@
+export { BenefitsCheckout } from './BenefitsCheckout'
+export {
+  type BenefitsCheckoutIcon,
+  type BenefitsCheckoutProps,
+  type CheckoutBenefit
+} from './BenefitsCheckoutProps.types'

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type CheckoutSummaryProps } from './CheckoutSummaryProps.types';
+export declare const CheckoutSummary: FC<CheckoutSummaryProps>;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { CheckoutSummaryStyled } from './CheckoutSummary.styled';
+import { BalanceSvg } from '../../../../images/componentsSvg/Balance';
+import { LockOutlineIcon } from '../../../../images/componentsSvg/LockOutlineIcon';
+import checkoutSummaryDocument from '../../../../images/CheckoutSummary/checkout-summary-document-56586a.png';
+const hasPreviewContent = (content) => {
+    if (content == null || typeof content === 'boolean')
+        return false;
+    if (typeof content === 'string')
+        return content.trim().length > 0;
+    if (typeof content === 'number')
+        return true;
+    if (Array.isArray(content))
+        return content.some(hasPreviewContent);
+    if (React.isValidElement(content)) {
+        return content.type === React.Fragment ? hasPreviewContent(content.props.children) : true;
+    }
+    return false;
+};
+export const CheckoutSummary = ({ documentName, documentDescription, verificationLabel, totalDueLabel, totalDueAmount, previewImage, className }) => {
+    const previewContent = hasPreviewContent(previewImage) ? previewImage : _jsx("img", { src: checkoutSummaryDocument, alt: '' });
+    return (_jsxs(CheckoutSummaryStyled, { className: ['checkout-summary', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'checkout-summary__document', children: [_jsxs("div", { className: 'checkout-summary__preview', "aria-hidden": 'true', children: [previewContent, _jsx("span", { className: 'checkout-summary__preview-lock', children: _jsx(LockOutlineIcon, {}) })] }), _jsxs("div", { className: 'checkout-summary__content', children: [_jsxs("span", { className: 'checkout-summary__verification', children: [_jsx(BalanceSvg, { fill: '#936C2F' }), _jsx("span", { children: verificationLabel })] }), _jsx("h2", { className: 'checkout-summary__name', children: documentName }), _jsx("p", { className: 'checkout-summary__description', children: documentDescription })] })] }), _jsx("dl", { className: 'checkout-summary__pricing', children: _jsxs("div", { className: 'checkout-summary__total', children: [_jsx("dt", { children: totalDueLabel }), _jsx("dd", { children: totalDueAmount })] }) })] }));
+};

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

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

@@ -0,0 +1,194 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../../globalStyles/breakpoints';
+const mobileStyles = css `
+  gap: 1rem;
+  padding: 0.5rem 0.5rem 1rem;
+
+  .checkout-summary {
+    &__document {
+      gap: 0.5rem;
+    }
+
+    &__content {
+      gap: 0.25rem;
+    }
+
+    &__verification {
+      gap: 0.125rem;
+      padding: 0.125rem;
+      font-size: 0.625rem;
+      line-height: 0.875rem;
+      letter-spacing: -0.03em;
+    }
+
+    &__name {
+      font-size: 0.875rem;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__pricing {
+      gap: 0.5rem;
+      padding: 0 0.5rem;
+    }
+  }
+`;
+const desktopStyles = css `
+  gap: 1.5rem;
+  padding: 1.5rem;
+
+  .checkout-summary {
+    &__document {
+      gap: 1rem;
+    }
+
+    &__content {
+      gap: 0.5rem;
+    }
+
+    &__pricing {
+      gap: 1rem;
+    }
+  }
+`;
+export const CheckoutSummaryStyled = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--neutral-neutral-4);
+  border-radius: 1rem;
+  background: var(--others-white);
+
+  ${desktopStyles}
+
+  @media (max-width: ${size.tab}) {
+    ${mobileStyles}
+  }
+
+  .checkout-summary {
+    &__document {
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      background: var(--secondary-main-light-4);
+    }
+
+    &__preview {
+      position: relative;
+      width: 4.8125rem;
+      height: 6.25rem;
+      flex: 0 0 4.8125rem;
+      overflow: hidden;
+      border: 1px solid var(--neutral-neutral-4);
+      border-radius: 0.25rem;
+      background: var(--others-white);
+
+      > :not(.checkout-summary__preview-lock) {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      img {
+        object-fit: cover;
+      }
+    }
+
+    &__preview-lock {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--neutral-neutral-1);
+      pointer-events: none;
+
+      svg {
+        box-sizing: content-box;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        background: var(--neutral-neutral-4);
+      }
+    }
+
+    &__content {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    &__verification {
+      box-sizing: border-box;
+      display: inline-flex;
+      max-width: 100%;
+      align-items: center;
+      justify-content: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      background: var(--secondary-main-light-2);
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+      text-transform: uppercase;
+
+      svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__name {
+      margin: 0;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+      letter-spacing: -0.0188em;
+      overflow-wrap: anywhere;
+    }
+
+    &__description {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-family: var(--font-main);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+    }
+
+    &__pricing {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+    }
+
+    &__total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+
+      dt,
+      dd {
+        margin: 0;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,198 @@
+import styled, { css } from 'styled-components'
+
+import { size } from '../../../globalStyles/breakpoints'
+
+const mobileStyles = css`
+  gap: 1rem;
+  padding: 0.5rem 0.5rem 1rem;
+
+  .checkout-summary {
+    &__document {
+      gap: 0.5rem;
+    }
+
+    &__content {
+      gap: 0.25rem;
+    }
+
+    &__verification {
+      gap: 0.125rem;
+      padding: 0.125rem;
+      font-size: 0.625rem;
+      line-height: 0.875rem;
+      letter-spacing: -0.03em;
+    }
+
+    &__name {
+      font-size: 0.875rem;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__pricing {
+      gap: 0.5rem;
+      padding: 0 0.5rem;
+    }
+  }
+`
+
+const desktopStyles = css`
+  gap: 1.5rem;
+  padding: 1.5rem;
+
+  .checkout-summary {
+    &__document {
+      gap: 1rem;
+    }
+
+    &__content {
+      gap: 0.5rem;
+    }
+
+    &__pricing {
+      gap: 1rem;
+    }
+  }
+`
+
+export const CheckoutSummaryStyled = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--neutral-neutral-4);
+  border-radius: 1rem;
+  background: var(--others-white);
+
+  ${desktopStyles}
+
+  @media (max-width: ${size.tab}) {
+    ${mobileStyles}
+  }
+
+  .checkout-summary {
+    &__document {
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      background: var(--secondary-main-light-4);
+    }
+
+    &__preview {
+      position: relative;
+      width: 4.8125rem;
+      height: 6.25rem;
+      flex: 0 0 4.8125rem;
+      overflow: hidden;
+      border: 1px solid var(--neutral-neutral-4);
+      border-radius: 0.25rem;
+      background: var(--others-white);
+
+      > :not(.checkout-summary__preview-lock) {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      img {
+        object-fit: cover;
+      }
+    }
+
+    &__preview-lock {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--neutral-neutral-1);
+      pointer-events: none;
+
+      svg {
+        box-sizing: content-box;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        background: var(--neutral-neutral-4);
+      }
+    }
+
+    &__content {
+      display: flex;
+      min-width: 0;
+      flex: 1;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    &__verification {
+      box-sizing: border-box;
+      display: inline-flex;
+      max-width: 100%;
+      align-items: center;
+      justify-content: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      background: var(--secondary-main-light-2);
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+      text-transform: uppercase;
+
+      svg {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__name {
+      margin: 0;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+      letter-spacing: -0.0188em;
+      overflow-wrap: anywhere;
+    }
+
+    &__description {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-family: var(--font-main);
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: -0.025em;
+    }
+
+    &__pricing {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+    }
+
+    &__total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      color: var(--neutral-neutral-1);
+      font-family: var(--font-main);
+      font-size: 1rem;
+      font-weight: 700;
+      line-height: 1.375rem;
+
+      dt,
+      dd {
+        margin: 0;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,59 @@
+import React, { type FC } from 'react'
+
+import { type CheckoutSummaryProps } from './CheckoutSummaryProps.types'
+import { CheckoutSummaryStyled } from './CheckoutSummary.styled'
+
+import { BalanceSvg } from '../../../../images/componentsSvg/Balance'
+import { LockOutlineIcon } from '../../../../images/componentsSvg/LockOutlineIcon'
+import checkoutSummaryDocument from '../../../../images/CheckoutSummary/checkout-summary-document-56586a.png'
+
+const hasPreviewContent = (content: React.ReactNode): boolean => {
+  if (content == null || typeof content === 'boolean') return false
+  if (typeof content === 'string') return content.trim().length > 0
+  if (typeof content === 'number') return true
+  if (Array.isArray(content)) return content.some(hasPreviewContent)
+  if (React.isValidElement<{ children?: React.ReactNode }>(content)) {
+    return content.type === React.Fragment ? hasPreviewContent(content.props.children) : true
+  }
+
+  return false
+}
+
+export const CheckoutSummary: FC<CheckoutSummaryProps> = ({
+  documentName,
+  documentDescription,
+  verificationLabel,
+  totalDueLabel,
+  totalDueAmount,
+  previewImage,
+  className
+}) => {
+  const previewContent = hasPreviewContent(previewImage) ? previewImage : <img src={checkoutSummaryDocument} alt='' />
+
+  return (
+    <CheckoutSummaryStyled className={['checkout-summary', className].filter(Boolean).join(' ')}>
+      <div className='checkout-summary__document'>
+        <div className='checkout-summary__preview' aria-hidden='true'>
+          {previewContent}
+          <span className='checkout-summary__preview-lock'>
+            <LockOutlineIcon />
+          </span>
+        </div>
+        <div className='checkout-summary__content'>
+          <span className='checkout-summary__verification'>
+            <BalanceSvg fill={'#936C2F'} />
+            <span>{verificationLabel}</span>
+          </span>
+          <h2 className='checkout-summary__name'>{documentName}</h2>
+          <p className='checkout-summary__description'>{documentDescription}</p>
+        </div>
+      </div>
+      <dl className='checkout-summary__pricing'>
+        <div className='checkout-summary__total'>
+          <dt>{totalDueLabel}</dt>
+          <dd>{totalDueAmount}</dd>
+        </div>
+      </dl>
+    </CheckoutSummaryStyled>
+  )
+}

package/dist/src/components/molecules/CheckoutSummary/CheckoutSummaryProps.types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface CheckoutSummaryProps {
+    documentName: string;
+    documentDescription: string;
+    verificationLabel: string;
+    totalDueLabel: string;
+    totalDueAmount: string;
+    previewImage?: ReactNode;
+    className?: string;
+}

package/dist/src/components/molecules/CheckoutSummary/CheckoutSummaryProps.types.js

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

package/dist/src/components/molecules/CheckoutSummary/CheckoutSummaryProps.types.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+export interface CheckoutSummaryProps {
+  documentName: string
+  documentDescription: string
+  verificationLabel: string
+  totalDueLabel: string
+  totalDueAmount: string
+  previewImage?: ReactNode
+  className?: string
+}

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

@@ -0,0 +1,2 @@
+export { CheckoutSummary } from './CheckoutSummary';
+export { type CheckoutSummaryProps } from './CheckoutSummaryProps.types';

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

@@ -0,0 +1 @@
+export { CheckoutSummary } from './CheckoutSummary';

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

@@ -0,0 +1,2 @@
+export { CheckoutSummary } from './CheckoutSummary'
+export { type CheckoutSummaryProps } from './CheckoutSummaryProps.types'

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type SocialProofBarProps } from './SocialProofBarProps.types';
+export declare const SocialProofBar: FC<SocialProofBarProps>;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SocialProofBarStyled } from './SocialProofBar.styled';
+import avatar01 from '../../../../images/SocialProofBar/social-proof-avatar-01-avatar-1.png';
+import avatar02 from '../../../../images/SocialProofBar/social-proof-avatar-02-avatar-2.png';
+import avatar03 from '../../../../images/SocialProofBar/social-proof-avatar-03-avatar-3.png';
+import avatar04 from '../../../../images/SocialProofBar/social-proof-avatar-04-avatar-4.png';
+import avatar05 from '../../../../images/SocialProofBar/social-proof-avatar-05-avatar-5.png';
+import ratingStar from '../../../../images/SocialProofBar/social-proof-star.svg';
+const defaultAvatarImages = [avatar01, avatar02, avatar03, avatar04, avatar05];
+const ratingStarIndices = [0, 1, 2, 3, 4];
+export const SocialProofBar = ({ title, documentCount, activityText, ratingLabel, avatarImages = defaultAvatarImages, className }) => (_jsxs(SocialProofBarStyled, { className: ['social-proof-bar', className].filter(Boolean).join(' '), children: [_jsx("div", { className: 'social-proof-bar__avatars', "aria-hidden": 'true', children: avatarImages.slice(0, 5).map((avatar, index) => (_jsx("img", { src: avatar, alt: '' }, `${index}-${avatar}`))) }), _jsxs("div", { className: 'social-proof-bar__content', children: [_jsxs("div", { className: 'social-proof-bar__header', children: [_jsx("span", { className: 'social-proof-bar__title', children: title }), _jsx("span", { className: 'social-proof-bar__rating', role: 'img', "aria-label": ratingLabel, children: ratingStarIndices.map((index) => (_jsx("img", { src: ratingStar, alt: '' }, index))) })] }), _jsxs("p", { className: 'social-proof-bar__activity', children: [_jsx("strong", { children: documentCount }), " ", activityText] })] })] }));

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

@@ -0,0 +1 @@
+export declare const SocialProofBarStyled: 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;