@npm_leadtech/legal-lib-components 5.0.2 → 5.1.0

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React, { type FC, useEffect, useRef, useState } from 'react'
 
 import { type CountDownMessageProps } from './CountDownMessageProps.types'

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

@@ -25,7 +25,7 @@ const Feedback = ({ theme = 'success', title, text, button, cancel, large, fluid
             buttons.push(_jsx(Button, { ...button }, 'feedback-accept-button'));
         }
         if (cancel?.onClick != null) {
-            buttons.push(_jsx("a", { className: 'feedback__cancel__a', onClick: cancel.onClick, children: cancel.label ?? 'Cancel' }, 'feedback-cancel-button'));
+            buttons.push(_jsx("a", { className: 'feedback__cancel__a', onClick: cancel.onClick, children: cancel?.label ?? 'Cancel' }, 'feedback-cancel-button'));
         }
         if (buttons.length === 0) {
             return null;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
@@ -48,7 +47,7 @@ const Feedback: FC<FeedbackProps> = ({
     if (cancel?.onClick != null) {
       buttons.push(
         <a key='feedback-cancel-button' className='feedback__cancel__a' onClick={cancel.onClick}>
-          {cancel.label ?? 'Cancel'}
+          {cancel?.label ?? 'Cancel'}
         </a>
       )
     }

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC } from 'react'

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
 import { MenuItems } from '../../atoms'

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useEffect } from 'react';
@@ -18,7 +17,6 @@ export const NavBarDropDown = ({ isOpen, list, hasBullets = true, initialActiveC
     };
     const onTouchMove = (event) => {
         const touchEndPosY = event.changedTouches[0];
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (isDisabledScroll && touchEndPosY?.screenY - touchStartPosY?.screenY > 0) {
             enableScrollbarOnClose(true);
             isDisabledScroll = false;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC, useEffect } from 'react'
@@ -29,7 +28,6 @@ export const NavBarDropDown: FC<NavBarDropDownProps> = ({
 
   const onTouchMove = (event: TouchEvent): void => {
     const touchEndPosY = event.changedTouches[0]
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (isDisabledScroll && touchEndPosY?.screenY - touchStartPosY?.screenY > 0) {
       enableScrollbarOnClose(true)
       isDisabledScroll = false

package/dist/src/components/molecules/Pagination/PageStepControl.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useCallback } from 'react';

package/dist/src/components/molecules/Pagination/PageStepControl.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC, useCallback } from 'react'

package/dist/src/components/molecules/Pagination/PageSteps.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { type FC, type MouseEventHandler } from 'react'

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { useCallback, useState } from 'react';
 import PageStepControl from './PageStepControl';
 import PageSteps from './PageSteps';

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC, type SyntheticEvent, useCallback, useState } from 'react'
 
 import PageStepControl from './PageStepControl'

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React from 'react'
 
 import ContactPhoneIcon from '../../../../images/webp/customer-support.webp'

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import React from 'react'
 
 import { Button } from '../../atoms'

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { useState } from 'react';
 import { Button, Message } from '../../atoms';
 // import './PricingCard.scss'
@@ -7,7 +6,7 @@ const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false,
     const [cardState, setCardState] = useState({ expanded: false });
     if (planName === undefined ||
         (onChangeRadio != null && subscriptionId === undefined) ||
-        (featuresList.length === 0 && children === undefined)) {
+        (featuresList?.length === 0 && children === undefined)) {
         return null;
     }
     const isSelectableCard = onChangeRadio != null;
@@ -25,7 +24,7 @@ const PricingCard = ({ order, subscriptionId, onChangeRadio, isChecked = false,
     };
     const renderMoreMobileButton = (_jsx(Button, { dataQa: '', givenClass: 'see-more-button', color: 'tertiary', label: cardState.expanded ? 'See less' : 'See more', noLink: true, onClick: toggleCardContent }));
     const renderHeaderContent = (_jsx("div", { className: 'pricing-card__header', children: _jsx("h5", { className: 'sans-serif --big pricing-card__header__text', children: _jsx("strong", { children: planName }) }) }));
-    const renderBodyContent = (_jsxs("div", { className: 'pricing-card__body', children: [Boolean(price) && (_jsxs("div", { className: 'sans-serif pricing-card__body__price', children: [_jsx("strong", { children: price }), _jsx("span", { children: currency }), Boolean(underPricingText) && _jsx("div", { className: 'pricing-card__body__text', children: underPricingText })] })), Boolean(featuresList.length) && (_jsxs("div", { className: `pricing-card__body__features-list ${expandedContentClass}`, children: [_jsx("hr", {}), _jsx("ul", { children: featuresList.map((feature) => (_jsx("li", { className: 'pricing-card__body__features-list__item', children: feature }, 'feature-item-' + feature))) })] })), children, featuresList != null && renderMoreMobileButton, cardButton, message != null && _jsx(Message, { ...message })] }));
+    const renderBodyContent = (_jsxs("div", { className: 'pricing-card__body', children: [Boolean(price) && (_jsxs("div", { className: 'sans-serif pricing-card__body__price', children: [_jsx("strong", { children: price }), _jsx("span", { children: currency }), Boolean(underPricingText) && _jsx("div", { className: 'pricing-card__body__text', children: underPricingText })] })), Boolean(featuresList?.length) && (_jsxs("div", { className: `pricing-card__body__features-list ${expandedContentClass}`, children: [_jsx("hr", {}), _jsx("ul", { children: featuresList?.map((feature) => (_jsx("li", { className: 'pricing-card__body__features-list__item', children: feature }, 'feature-item-' + feature))) })] })), children, featuresList != null && renderMoreMobileButton, cardButton, message != null && _jsx(Message, { ...message })] }));
     return (_jsxs("li", { style: style, className: `pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`, children: [_jsx("div", { className: 'pricing-card__wrapper', children: isSelectableCard ? (_jsxs("label", { className: 'pricing-card__radio-label', "data-qa": planName, children: [_jsx("input", { className: 'radio-input', type: 'radio', value: subscriptionId, onChange: onChangeRadio, name: 'pricing', checked: isChecked }), _jsx("span", { className: 'radio-checkbox' }), renderHeaderContent, renderBodyContent] })) : (_jsxs(_Fragment, { children: [renderHeaderContent, renderBodyContent] })) }), Boolean(disclaimer) && (_jsx("div", { className: 'pricing-card__disclaimer', children: _jsx("small", { children: disclaimer }) }))] }));
 };
 export default PricingCard;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC, useState } from 'react'
 
 import { Button, Message } from '../../atoms'
@@ -24,7 +23,7 @@ const PricingCard: FC<PricingCardProps> = ({
   if (
     planName === undefined ||
     (onChangeRadio != null && subscriptionId === undefined) ||
-    (featuresList.length === 0 && children === undefined)
+    (featuresList?.length === 0 && children === undefined)
   ) {
     return null
   }
@@ -72,11 +71,11 @@ const PricingCard: FC<PricingCardProps> = ({
           {Boolean(underPricingText) && <div className={'pricing-card__body__text'}>{underPricingText}</div>}
         </div>
       )}
-      {Boolean(featuresList.length) && (
+      {Boolean(featuresList?.length) && (
         <div className={`pricing-card__body__features-list ${expandedContentClass}`}>
           <hr />
           <ul>
-            {featuresList.map((feature) => (
+            {featuresList?.map((feature) => (
               <li key={'feature-item-' + feature} className='pricing-card__body__features-list__item'>
                 {feature}
               </li>

package/dist/src/components/molecules/PricingCard/PricingCardProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type MessageProps } from '../../atoms'
 
 export interface PricingCardProps {

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */

package/dist/src/components/molecules/Snackbar/SnackbarProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface SnackbarProps {
   type?: 'welcome' | 'success' | 'error' | 'reminder'
   title?: string

package/dist/src/components/molecules/TextInput/Input.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState } from 'react';

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState } from 'react'

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

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { NumericFormat } from 'react-number-format';
 import React from 'react';
 import classNames from 'classnames';
@@ -9,14 +7,14 @@ import { TextInputLabel } from './TextInputLabel';
 import { TextInputMessage } from './TextInputMessage';
 import { TextInputTooltip } from './TextInputTooltip';
 // import './TextInput.scss'
-const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, ref) => {
+const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, mask = ' ', format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
         'e-text--group-invalid': !isValidGroup
     });
     const handleChange = (event) => {
-        onChange(event);
+        onChange?.(event);
     };
     const handleKeyDown = (event) => {
         onKeyDown?.(event);

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { NumericFormat } from 'react-number-format'
 import React from 'react'
 import classNames from 'classnames'
@@ -18,6 +16,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       value,
       validate = true,
       isValidGroup = true,
+      mask = ' ',
       format = undefined,
       name,
       placeholder,
@@ -45,7 +44,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     })
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-      onChange(event)
+      onChange?.(event)
     }
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {

package/dist/src/components/molecules/TextInput/TextInputMessage.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React, { type FC } from 'react'
 
 import error from '../../../../images/svg/info-error_24px_outlined.svg'

package/dist/src/components/molecules/TextInput/TextInputProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface TextInputProps {
   label?: string
   name?: string

package/dist/src/components/molecules/TextInput/TextInputTooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
 interface TextInputTooltipProps {

package/dist/src/components/molecules/TooltipMenu/TooltipMenuProps.types.d.ts

@@ -1,9 +1,9 @@
 export interface TooltipMenuProps {
-    options: {
+    options: Array<{
         content: string;
         image: React.FC;
         onClick: () => void;
-    }[];
+    }>;
     onClick: () => void;
     label: string;
 }

package/dist/src/components/molecules/TooltipMenu/TooltipMenuProps.types.ts

@@ -1,9 +1,9 @@
 export interface TooltipMenuProps {
-  options: {
+  options: Array<{
     content: string
     image: React.FC
     onClick: () => void
-  }[]
+  }>
   onClick: () => void
   label: string
 }

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
 import { Button, RichTextStrapi } from '../../atoms'

package/dist/src/components/organisms/Accordion/Accordion.context.d.ts

@@ -37,7 +37,7 @@ interface AccordionProviderProps {
     children: React.ReactNode;
     elements: number;
 }
-declare function AccordionProvider({ children, elements }: AccordionProviderProps): React.JSX.Element;
+declare function AccordionProvider({ children, elements }: AccordionProviderProps): JSX.Element;
 declare function useDispatchDataAccordionItem(): {
     dispatch: Dispatch;
 };

package/dist/src/components/organisms/Accordion/Accordion.context.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import React from 'react';
 const AccordionContext = React.createContext(undefined);

package/dist/src/components/organisms/Accordion/Accordion.context.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import React from 'react'
 
@@ -81,12 +79,12 @@ const actions = {
 
 function accordionDataReducer(state: State, action: Action): State {
   if (actions[action.type]) {
-    return actions[action.type](state, action)!
+    return actions[action.type](state, action) as State
   }
   throw new Error(`Unhandled action type: ${action.type}`)
 }
 
-function AccordionProvider({ children, elements }: AccordionProviderProps): React.JSX.Element {
+function AccordionProvider({ children, elements }: AccordionProviderProps): JSX.Element {
   const itemsDataAccordion = {
     itemsDataAccordion: Array.from(Array(elements).keys()).map(() => ({
       isLoading: false,

package/dist/src/components/organisms/Accordion/Accordion.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { type AccordionProps } from './AccordionProps.types';
-export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem }: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ({ data, defaultActiveIndex, defaultHeightItem }: AccordionProps) => JSX.Element;

package/dist/src/components/organisms/Accordion/Accordion.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { useState } from 'react';
 import { AccordionItem } from '../../molecules';
 import { AccordionProvider } from './Accordion.context';

package/dist/src/components/organisms/Accordion/Accordion.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { useState } from 'react'
 import { AccordionItem } from '../../molecules'
 import { type AccordionProps } from './AccordionProps.types'
@@ -6,7 +5,7 @@ import { AccordionProvider } from './Accordion.context'
 
 // import './Accordion.scss'
 
-export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): React.JSX.Element => {
+export const Accordion = ({ data, defaultActiveIndex = 0, defaultHeightItem }: AccordionProps): JSX.Element => {
   const [activeIndex, setActiveIndex] = useState(defaultActiveIndex)
 
   const handleItemClick = (index: number): void => {

package/dist/src/components/organisms/ArticlesList/ArticlesList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
 import { Article, type ArticleProps } from '../../molecules'

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type CardFunctionalityProps } from './CardFunctionalityProps';
+import './CardFunctionality.scss';
+export declare const CardFunctionality: React.FC<CardFunctionalityProps>;

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Tag } from '../../atoms';
+import './CardFunctionality.scss';
+export const CardFunctionality = ({ icon, title, text, tags, cta }) => {
+    return (_jsxs("article", { className: 'card-functionality', children: [_jsxs("div", { className: 'content-tags', children: [_jsxs("div", { className: 'content', children: [_jsxs("div", { className: 'header', children: [_jsx("div", { className: 'icon', children: icon }), _jsx("p", { className: 'title', children: title })] }), _jsx("div", { title: text, className: 'text', children: text })] }), _jsx("div", { className: 'tags', children: tags.map((tag) => (_jsx(Tag, { ...tag }, tag.id))) })] }), _jsx(Button, { ...cta, givenClass: 'cta-card' })] }));
+};

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.scss

@@ -0,0 +1,61 @@
+@import '../../../globalStyles/variables.scss';
+
+.card-functionality {
+  border-radius: $global-border-radius;
+  box-shadow: $box-shadow-medium;
+  display: flex;
+  flex-direction: column;
+  gap: $global-gap;
+  padding: 1em;
+
+  .content-tags {
+    display: flex;
+    flex-direction: column;
+    gap: $global-gap;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: $global-gap/2;
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-direction: row;
+
+        .icon {
+          padding: 2px;
+          border-radius: $global-border-radius;
+          background: get-color(primary, main-light-5);
+        }
+
+        .title {
+          color: get-color(neutral, neutral-1);
+          font-weight: 700;
+        }
+      }
+
+      .text {
+        overflow: hidden;
+        color: get-color(neutral, neutral-1);
+        font-size: 14px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .tags {
+      display: flex;
+      gap: $global-gap * 2;
+      flex-wrap: wrap;
+    }
+  }
+
+  .cta-card {
+    align-self: flex-start;
+    margin-top: 0;
+  }
+}

package/dist/src/components/organisms/CardFunctionality/CardFunctionality.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { Button, Tag } from '../../atoms'
+import { type CardFunctionalityProps } from './CardFunctionalityProps'
+import './CardFunctionality.scss'
+
+export const CardFunctionality: React.FC<CardFunctionalityProps> = ({ icon, title, text, tags, cta }) => {
+  return (
+    <article className='card-functionality'>
+      <div className='content-tags'>
+        <div className='content'>
+          <div className='header'>
+            <div className='icon'>{icon}</div>
+            <p className='title'>{title}</p>
+          </div>
+          <div title={text} className='text'>
+            {text}
+          </div>
+        </div>
+        <div className='tags'>
+          {tags.map((tag) => (
+            <Tag key={tag.id} {...tag} />
+          ))}
+        </div>
+      </div>
+      <Button {...cta} givenClass='cta-card' />
+    </article>
+  )
+}

package/dist/src/components/organisms/CardFunctionality/CardFunctionalityProps.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps, type TagProps } from '../../atoms';
+export interface CardFunctionalityProps {
+    icon: React.ReactNode;
+    title: string;
+    text: string;
+    tags: TagProps[];
+    cta: ButtonProps;
+    id: string;
+}

package/dist/src/components/organisms/CardFunctionality/CardFunctionalityProps.js

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

package/dist/src/components/organisms/CardFunctionality/CardFunctionalityProps.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps, type TagProps } from '../../atoms'
+
+export interface CardFunctionalityProps {
+  icon: React.ReactNode
+  title: string
+  text: string
+  tags: TagProps[]
+  cta: ButtonProps
+  id: string
+}

package/dist/src/components/organisms/CardFunctionality/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardFunctionality';
+export * from './CardFunctionalityProps';

package/dist/src/components/organisms/CardFunctionality/index.js

@@ -0,0 +1,2 @@
+export * from './CardFunctionality';
+export * from './CardFunctionalityProps';

package/dist/src/components/organisms/CardFunctionality/index.ts

@@ -0,0 +1,2 @@
+export * from './CardFunctionality'
+export * from './CardFunctionalityProps'

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBar.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, { type FC } from 'react'
 import classNames from 'classnames'
 

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBarProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface MobileBottomBarProps {
   active?: boolean
   list?: any[]

package/dist/src/components/organisms/index.d.ts

@@ -2,7 +2,7 @@ export * from './AboutUsContent';
 export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
-export * from './CardFuncionality';
+export * from './CardFunctionality';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.js

@@ -2,7 +2,7 @@ export * from './AboutUsContent';
 export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';
-export * from './CardFuncionality';
+export * from './CardFunctionality';
 export * from './ContactJumbotron';
 export * from './CookiePolicyBar';
 export * from './ErrorContentRatafia';

package/dist/src/components/organisms/index.ts

@@ -2,7 +2,7 @@ export * from './AboutUsContent'
 export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'
-export * from './CardFuncionality'
+export * from './CardFunctionality'
 export * from './ContactJumbotron'
 export * from './CookiePolicyBar'
 export * from './ErrorContentRatafia'

package/dist/src/components/pages/AboutUsPage/AboutUsPage.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from 'react'
 
 import {

package/dist/src/components/pages/ErrorRatafiaPage/ErrorRatafiaPageProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DisclaimerRatafiaProps } from '../../atoms'
 import { type ErrorContentRatafiaProps } from '../../organisms'
 import { type HeaderRatafiaProps } from '../../molecules'

package/dist/src/components/pages/KeyFactsResultRatafiaPage/KeyFactsResultRatafiaPageProps.types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DisclaimerRatafiaProps, ReviewKeyFactsResultRatafiaProps } from '../../atoms'
 import { type HeaderRatafiaProps } from '../../molecules'
 import { type KeyFactsResultProps } from '../../organisms'

package/dist/src/components/sections/AboutUsSection/AboutUsSection.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React, { type FC } from 'react'
 
 import { AboutUsContent } from '../../organisms/AboutUsContent'

package/dist/src/components/sections/AsideMenuSection/AsideMenuSectionProps.d.ts

@@ -1,9 +1,9 @@
 export interface AsideMenuSectionProps {
-    items: {
+    items: Array<{
         id: string;
         text: string;
         slug: string;
-    }[];
+    }>;
     title?: string;
     onClickHandler?: React.MouseEventHandler<HTMLLIElement>;
 }