@npm_leadtech/legal-lib-components 7.106.11 → 7.106.17

package/README.md

@@ -51,3 +51,9 @@ npx sonarqube-scanner -Dsonar.host.url=http://sonar.legal-contracts.com:9000 -Ds
 ```
 
 - Ejecutar en consola `yarn sonar`
+
+yarn reinstall-force && yarn build && git add . && git commit -m "checkout" --allow-empty && npm config set tag-version-prefix ''
+npm version patch -m "Update patch version number" && git push && git push --tags
+npm publish
+
+yarn upgrade @npm_leadtech/legal-lib-components --latest

package/dist/css/styles.css

@@ -1039,6 +1039,9 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
   color: var(--neutral-neutral-1);
   pointer-events: none;
 }
+.e-button.--processing {
+  pointer-events: none;
+}
 .e-button.--error {
   border-color: var(--error-main);
   color: var(--error-main);

package/dist/images/componentsSvg/BenefitsAi.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const BenefitsAi: FC;

package/dist/images/componentsSvg/BenefitsAi.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BenefitsAi = () => (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M14.8205 1.28252C14.5643 0.572493 13.5602 0.572493 13.304 1.28252L12.9295 2.32031C12.8481 2.54592 12.6704 2.72356 12.4448 2.80497L11.407 3.17946C10.697 3.43567 10.697 4.43983 11.407 4.69604L12.4448 5.07053C12.6704 5.15194 12.8481 5.32958 12.9295 5.55519L13.304 6.59298C13.5602 7.303 14.5643 7.303 14.8205 6.59298L15.195 5.55519C15.2764 5.32958 15.4541 5.15194 15.6797 5.07053L16.7175 4.69604C17.4275 4.43983 17.4275 3.43567 16.7175 3.17946L15.6797 2.80497C15.4541 2.72356 15.2764 2.54592 15.195 2.32031L14.8205 1.28252ZM9.03846 4.77127C8.52604 3.35122 6.51773 3.35122 6.0053 4.77127L5.15122 7.13813C4.9884 7.58935 4.63312 7.94463 4.1819 8.10745L1.81504 8.96153C0.394985 9.47396 0.394987 11.4823 1.81504 11.9947L4.1819 12.8488C4.63312 13.0116 4.9884 13.3669 5.15122 13.8181L6.0053 16.185C6.51773 17.605 8.52604 17.605 9.03846 16.185L9.89254 13.8181C10.0554 13.3669 10.4107 13.0116 10.8619 12.8488L13.2287 11.9947C14.6488 11.4823 14.6488 9.47396 13.2287 8.96153L10.8619 8.10745C10.4107 7.94463 10.0554 7.58935 9.89254 7.13813L9.03846 4.77127Z', fill: 'var(--primary-main-light-1)' }) }));

package/dist/images/componentsSvg/BenefitsAi.tsx

@@ -0,0 +1,12 @@
+import React, { type FC } from 'react'
+
+export const BenefitsAi: FC = () => (
+  <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M14.8205 1.28252C14.5643 0.572493 13.5602 0.572493 13.304 1.28252L12.9295 2.32031C12.8481 2.54592 12.6704 2.72356 12.4448 2.80497L11.407 3.17946C10.697 3.43567 10.697 4.43983 11.407 4.69604L12.4448 5.07053C12.6704 5.15194 12.8481 5.32958 12.9295 5.55519L13.304 6.59298C13.5602 7.303 14.5643 7.303 14.8205 6.59298L15.195 5.55519C15.2764 5.32958 15.4541 5.15194 15.6797 5.07053L16.7175 4.69604C17.4275 4.43983 17.4275 3.43567 16.7175 3.17946L15.6797 2.80497C15.4541 2.72356 15.2764 2.54592 15.195 2.32031L14.8205 1.28252ZM9.03846 4.77127C8.52604 3.35122 6.51773 3.35122 6.0053 4.77127L5.15122 7.13813C4.9884 7.58935 4.63312 7.94463 4.1819 8.10745L1.81504 8.96153C0.394985 9.47396 0.394987 11.4823 1.81504 11.9947L4.1819 12.8488C4.63312 13.0116 4.9884 13.3669 5.15122 13.8181L6.0053 16.185C6.51773 17.605 8.52604 17.605 9.03846 16.185L9.89254 13.8181C10.0554 13.3669 10.4107 13.0116 10.8619 12.8488L13.2287 11.9947C14.6488 11.4823 14.6488 9.47396 13.2287 8.96153L10.8619 8.10745C10.4107 7.94463 10.0554 7.58935 9.89254 7.13813L9.03846 4.77127Z'
+      fill='var(--primary-main-light-1)'
+    />
+  </svg>
+)

package/dist/images/componentsSvg/BenefitsCheck.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const BenefitsCheck: FC;

package/dist/images/componentsSvg/BenefitsCheck.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BenefitsCheck = () => (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M6.60002 11.925L3.97502 9.29998C3.68508 9.01003 3.21497 9.01003 2.92502 9.29998C2.63507 9.58992 2.63507 10.06 2.92502 10.35L6.40002 13.825C6.51048 13.9354 6.68957 13.9354 6.80002 13.825L15.075 5.54997C15.365 5.26003 15.365 4.78993 15.075 4.49998C14.7851 4.21003 14.315 4.21003 14.025 4.49998L6.60002 11.925Z', fill: 'var(--primary-main-light-1)' }) }));

package/dist/images/componentsSvg/BenefitsCheck.tsx

@@ -0,0 +1,10 @@
+import React, { type FC } from 'react'
+
+export const BenefitsCheck: FC = () => (
+  <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M6.60002 11.925L3.97502 9.29998C3.68508 9.01003 3.21497 9.01003 2.92502 9.29998C2.63507 9.58992 2.63507 10.06 2.92502 10.35L6.40002 13.825C6.51048 13.9354 6.68957 13.9354 6.80002 13.825L15.075 5.54997C15.365 5.26003 15.365 4.78993 15.075 4.49998C14.7851 4.21003 14.315 4.21003 14.025 4.49998L6.60002 11.925Z'
+      fill='var(--primary-main-light-1)'
+    />
+  </svg>
+)

package/dist/images/componentsSvg/__tests__/BenefitsAi.test.tsx

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { BenefitsAi } from '../BenefitsAi'
+
+describe('BenefitsAi', () => {
+  afterEach(cleanup)
+
+  test('renders the 18x18 ai icon svg with the themed fill', () => {
+    const { container } = render(<BenefitsAi />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '18')
+    expect(svg).toHaveAttribute('height', '18')
+    expect(svg).toHaveAttribute('viewBox', '0 0 18 18')
+    expect(svg?.querySelector('path[fill="var(--primary-main-light-1)"]')).toBeInTheDocument()
+  })
+})

package/dist/images/componentsSvg/__tests__/BenefitsCheck.test.tsx

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { BenefitsCheck } from '../BenefitsCheck'
+
+describe('BenefitsCheck', () => {
+  afterEach(cleanup)
+
+  test('renders the 18x18 check icon svg with the themed fill', () => {
+    const { container } = render(<BenefitsCheck />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '18')
+    expect(svg).toHaveAttribute('height', '18')
+    expect(svg).toHaveAttribute('viewBox', '0 0 18 18')
+    expect(svg?.querySelector('path[fill="var(--primary-main-light-1)"]')).toBeInTheDocument()
+  })
+})

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
+import { Spinner } from '../Spinner';
+const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, isProcessing = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
     const sizes = {
         S: 'button--small',
         M: 'button--medium'
@@ -24,11 +25,14 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
         '--styleless': color === 'styleless',
         '--transparent': color === 'transparent',
         '--disabled': disabled,
+        '--processing': isProcessing,
         'button--center': centered,
         '--error': error,
         'e-button--fluid': fluid
     });
     const onButtonClick = () => {
+        if (isProcessing)
+            return;
         if (onClick !== undefined)
             onClick(functionParameters);
         if (gtmTag !== undefined) {
@@ -40,16 +44,25 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
             });
         }
     };
-    const buttonContent = (_jsxs(_Fragment, { children: [children ?? null, labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }))] }));
+    const onAnchorClick = (event) => {
+        if (isProcessing) {
+            event?.preventDefault();
+            return;
+        }
+        onButtonClick();
+    };
+    const ariaProcessing = isProcessing || undefined;
+    const labelContent = labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }));
+    const buttonContent = (_jsxs(_Fragment, { children: [isProcessing ? _jsx(Spinner, {}) : null, children && label === '' ? (children) : (_jsxs(_Fragment, { children: [children ?? null, labelContent] }))] }));
     if (isExternal || (!LinkComponent && link)) {
-        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onButtonClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
     }
     if (noLink) {
-        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
     }
     if (noLinkNoFunc) {
-        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, children: children && label === '' ? children : buttonContent }));
+        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
     }
-    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onButtonClick, "data-qa": dataQa, children: buttonContent }));
+    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
 };
 export default Button;

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

@@ -222,6 +222,10 @@ html[data-theme='primarygreen'] {
     pointer-events: none;
   }
 
+  &.--processing {
+    pointer-events: none;
+  }
+
   &.--error {
     border-color: var(--error-main);
     color: var(--error-main);

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

@@ -2,6 +2,7 @@
 import React, { type FC } from 'react'
 import classNames from 'classnames'
 
+import { Spinner } from '../Spinner'
 import { type ButtonProps } from './ButtonProps.types'
 
 const Button: FC<ButtonProps> = ({
@@ -17,6 +18,7 @@ const Button: FC<ButtonProps> = ({
   color = 'primary',
   error,
   disabled = false,
+  isProcessing = false,
   fluid,
   givenClass,
   children,
@@ -52,12 +54,14 @@ const Button: FC<ButtonProps> = ({
     '--styleless': color === 'styleless',
     '--transparent': color === 'transparent',
     '--disabled': disabled,
+    '--processing': isProcessing,
     'button--center': centered,
     '--error': error,
     'e-button--fluid': fluid
   })
 
   const onButtonClick = (): void => {
+    if (isProcessing) return
     if (onClick !== undefined) onClick(functionParameters)
     if (gtmTag !== undefined) {
       if (typeof window !== 'undefined') {
@@ -69,16 +73,36 @@ const Button: FC<ButtonProps> = ({
     }
   }
 
+  const onAnchorClick = (event?: React.MouseEvent<HTMLAnchorElement>): void => {
+    if (isProcessing) {
+      event?.preventDefault()
+      return
+    }
+    onButtonClick()
+  }
+
+  const ariaProcessing = isProcessing || undefined
+
+  const labelContent =
+    labelMobile !== undefined ? (
+      <>
+        <label className='e-button-labelMobile'>{labelMobile}</label>
+        <label className='e-button-labelDesktop'>{label}</label>
+      </>
+    ) : (
+      <label>{label}</label>
+    )
+
   const buttonContent = (
     <>
-      {children ?? null}
-      {labelMobile !== undefined ? (
+      {isProcessing ? <Spinner /> : null}
+      {children && label === '' ? (
+        children
+      ) : (
         <>
-          <label className='e-button-labelMobile'>{labelMobile}</label>
-          <label className='e-button-labelDesktop'>{label}</label>
+          {children ?? null}
+          {labelContent}
         </>
-      ) : (
-        <label>{label}</label>
       )}
     </>
   )
@@ -88,34 +112,56 @@ const Button: FC<ButtonProps> = ({
       <a
         className={`e-button ${classnames}`}
         href={link ?? ''}
-        onClick={onButtonClick}
+        onClick={onAnchorClick}
         data-qa={dataQa}
         rel={hasNoFollow ? 'nofollow' : ''}
         target={target}
+        tabIndex={isProcessing ? -1 : undefined}
+        aria-busy={ariaProcessing}
+        aria-disabled={ariaProcessing}
       >
-        {children && label === '' ? children : buttonContent}
+        {buttonContent}
       </a>
     )
   }
 
   if (noLink) {
     return (
-      <button className={`e-button --noLink ${classnames}`} data-qa={dataQa} onClick={onButtonClick}>
-        {children && label === '' ? children : buttonContent}
+      <button
+        className={`e-button --noLink ${classnames}`}
+        data-qa={dataQa}
+        onClick={onButtonClick}
+        disabled={isProcessing}
+        aria-busy={ariaProcessing}
+      >
+        {buttonContent}
       </button>
     )
   }
 
   if (noLinkNoFunc) {
     return (
-      <button className={`e-button --noLinkNoFunc ${classnames}`} data-qa={dataQa}>
-        {children && label === '' ? children : buttonContent}
+      <button
+        className={`e-button --noLinkNoFunc ${classnames}`}
+        data-qa={dataQa}
+        disabled={isProcessing}
+        aria-busy={ariaProcessing}
+      >
+        {buttonContent}
       </button>
     )
   }
 
   return (
-    <LinkComponent className={`e-button ${classnames}`} to={link ?? ''} onClick={onButtonClick} data-qa={dataQa}>
+    <LinkComponent
+      className={`e-button ${classnames}`}
+      to={link ?? ''}
+      onClick={onAnchorClick}
+      data-qa={dataQa}
+      tabIndex={isProcessing ? -1 : undefined}
+      aria-busy={ariaProcessing}
+      aria-disabled={ariaProcessing}
+    >
       {buttonContent}
     </LinkComponent>
   )

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -12,6 +12,7 @@ export interface ButtonProps {
     color?: Colors;
     error?: boolean;
     disabled?: boolean;
+    isProcessing?: boolean;
     fluid?: boolean;
     givenClass?: string;
     children?: React.ReactNode;

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -30,6 +30,7 @@ export interface ButtonProps {
   color?: Colors
   error?: boolean
   disabled?: boolean
+  isProcessing?: boolean
   fluid?: boolean
   givenClass?: string
   children?: React.ReactNode

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SpinnerStyled } from './Spinner.styled';
 const Spinner = ({ className = '', big = false }) => {
-    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
+    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
 };
 export default Spinner;

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

@@ -5,14 +5,21 @@ import { SpinnerStyled } from './Spinner.styled'
 
 const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
   return !big ? (
-    <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled
+      className={`e-spinner ${className}`}
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+    >
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'
       />
     </SpinnerStyled>
   ) : (
-    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
+    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none' aria-hidden='true'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'

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

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
+import { BenefitsAi } from '../../../../images/componentsSvg/BenefitsAi';
+import { BenefitsCheck } from '../../../../images/componentsSvg/BenefitsCheck';
 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
+    ai: BenefitsAi,
+    check: BenefitsCheck
 };
 export const BenefitsCheckout = ({ title, benefits, className }) => {
     const titleId = useId();
-    return (_jsxs(BenefitsCheckoutStyled, { className: ['benefits-checkout', className].filter(Boolean).join(' '), "aria-labelledby": titleId, children: [_jsx("h2", { className: 'benefits-checkout__title', id: titleId, children: title }), _jsx("ul", { className: 'benefits-checkout__list', children: benefits.map((benefit, index) => (_jsxs("li", { className: 'benefits-checkout__item', children: [_jsx("img", { src: iconByType[benefit.icon ?? 'check'], alt: '', "aria-hidden": 'true' }), _jsx("span", { children: benefit.text })] }, `${benefit.icon ?? 'check'}-${index}-${benefit.text}`))) })] }));
+    return (_jsxs(BenefitsCheckoutStyled, { className: ['benefits-checkout', className].filter(Boolean).join(' '), "aria-labelledby": titleId, children: [_jsx("h2", { className: 'benefits-checkout__title', id: titleId, children: title }), _jsx("ul", { className: 'benefits-checkout__list', children: benefits.map((benefit, index) => {
+                    const Icon = iconByType[benefit.icon ?? 'check'];
+                    return (_jsxs("li", { className: 'benefits-checkout__item', children: [_jsx(Icon, {}), _jsx("span", { children: benefit.text })] }, `${benefit.icon ?? 'check'}-${index}-${benefit.text}`));
+                }) })] }));
 };

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

@@ -41,7 +41,7 @@ export const BenefitsCheckoutStyled = styled.section `
       line-height: 1.125rem;
       letter-spacing: -0.0214em;
 
-      img {
+      svg {
         display: block;
         width: 1.125rem;
         height: 1.125rem;

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

@@ -43,7 +43,7 @@ export const BenefitsCheckoutStyled = styled.section`
       line-height: 1.125rem;
       letter-spacing: -0.0214em;
 
-      img {
+      svg {
         display: block;
         width: 1.125rem;
         height: 1.125rem;

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

@@ -1,13 +1,13 @@
 import React, { type FC, useId } from 'react'
 
+import { BenefitsAi } from '../../../../images/componentsSvg/BenefitsAi'
+import { BenefitsCheck } from '../../../../images/componentsSvg/BenefitsCheck'
 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
+  ai: BenefitsAi,
+  check: BenefitsCheck
 }
 
 export const BenefitsCheckout: FC<BenefitsCheckoutProps> = ({ title, benefits, className }) => {
@@ -22,12 +22,16 @@ export const BenefitsCheckout: FC<BenefitsCheckoutProps> = ({ title, benefits, c
         {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>
-        ))}
+        {benefits.map((benefit, index) => {
+          const Icon = iconByType[benefit.icon ?? 'check']
+
+          return (
+            <li className='benefits-checkout__item' key={`${benefit.icon ?? 'check'}-${index}-${benefit.text}`}>
+              <Icon />
+              <span>{benefit.text}</span>
+            </li>
+          )
+        })}
       </ul>
     </BenefitsCheckoutStyled>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.106.11",
+  "version": "7.106.17",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",