@npm_leadtech/legal-lib-components 7.44.6 → 7.45.0

package/dist/css/styles.css

@@ -228,6 +228,8 @@ html {
   --snackbar-success-border: #34b2a7;
   --snackbar-reminder-bg: #f2bd6a;
   --snackbar-reminder-border: #cd9a4c;
+}
+html {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -1768,7 +1770,7 @@ h2.react-datepicker__current-month {
 .e-radio .label {
   color: var(--neutral-neutral-1);
   display: block;
-  margin: 1rem 0;
+  margin-bottom: 1rem;
 }
 .e-radio.default .e-radio__inner {
   display: flex;
@@ -1837,9 +1839,6 @@ h2.react-datepicker__current-month {
     padding: 16px 15px;
   }
 }
-.e-radio.tabs {
-  margin-top: 1rem;
-}
 .e-radio.tabs .e-radio__inner {
   display: flex;
 }
@@ -2070,9 +2069,6 @@ h2.react-datepicker__current-month {
   color: var(--neutral-neutral-1);
   font-weight: bold;
 }
-.e-text .e-text__inner {
-  grid-row: 1;
-}
 .e-text .form-group__label-icon {
   color: var(--neutral-neutral-1);
   font-weight: bold;
@@ -2114,11 +2110,9 @@ h2.react-datepicker__current-month {
 .e-text--is-invalid .e-text__error {
   display: flex;
   align-content: center;
+  bottom: -5.5rem;
+  margin-top: 0.5rem;
   color: var(--error-main);
-  position: absolute;
-  bottom: -1.5rem;
-  align-items: center;
-  height: fit-content;
 }
 .e-text--is-invalid .e-text__error-icon {
   display: flex;
@@ -2157,37 +2151,6 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
-.e-text--has-prefix {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-}
-@media (min-width: 575px) {
-  .e-text--has-prefix {
-    width: 50%;
-  }
-}
-.e-text--has-prefix .tooltip-form {
-  grid-row: 3;
-}
-.e-text--has-prefix .has-currency-prefix {
-  padding-left: 2rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
-.e-text--has-prefix .has-currency-suffix {
-  padding-right: 2rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
-.e-text--has-prefix .has-percent-suffix {
-  padding-left: 0.75rem;
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-}
 .e-text .input-icon {
   position: absolute;
   transform: translate(-15%, -65%);
@@ -2202,28 +2165,6 @@ h2.react-datepicker__current-month {
   background: none;
   border: none;
 }
-.e-text .input-icon-currency-suffix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  margin-left: calc(100% - 30px);
-  width: fit-content;
-}
-.e-text .input-icon-currency-prefix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  z-index: 1;
-  padding-left: 0.87rem;
-  width: fit-content;
-}
-.e-text .input-icon-percent-suffix {
-  grid-column: 1;
-  grid-row: 2;
-  align-self: center;
-  margin-left: calc(100% - 30px);
-  width: fit-content;
-}
 .e-text .formgroup--input__button {
   align-self: flex-start;
   font-size: 0.75rem;

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

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface RatafiaIcon24pxProps {
+    className: string;
+}
+export declare const RatafiaIcon24px: FC<RatafiaIcon24pxProps>;
+export {};

package/dist/images/componentsSvg/RatafiaIcon24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatafiaIcon24px = ({ className }) => (_jsx("svg", { width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("g", { id: 'Icon/Symbol/AI_24px', children: _jsx("path", { id: 'path', fillRule: 'evenodd', clipRule: 'evenodd', d: 'M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z', fill: '#078080' }) }) }));

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCard.d.ts

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled';
+export const BenefitRatafiaCard = ({ title, image, description }) => {
+    return (_jsxs(BenefitRatafiaCardStyled, { className: 'benefit-ratafia-card', children: [image !== null && _jsx("div", { className: 'benefit-ratafia-card__icon', children: image }), _jsxs("div", { className: 'benefit-ratafia-card__content', children: [_jsx("h3", { className: 'sans-serif --big --bold-weight benefit-ratafia-card__content__title', children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
+};
+export default BenefitRatafiaCard;

package/dist/src/components/atoms/{ContactInformationHeader/ContactInformationHeader.styled.d.ts → BenefitRatafiaCard/BenefitRatafiaCard.styled.d.ts}

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

package/dist/src/components/atoms/{BenefitCard/BenefitCardStyled.styled.js → BenefitRatafiaCard/BenefitRatafiaCard.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const BenefitCardStyled = styled.div `
+export const BenefitRatafiaCardStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -12,10 +12,7 @@ export const BenefitCardStyled = styled.div `
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -24,7 +21,7 @@ export const BenefitCardStyled = styled.div `
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -33,10 +30,7 @@ export const BenefitCardStyled = styled.div `
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-      }
+      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
       img {
         min-width: 32px;

package/dist/src/components/atoms/{BenefitCard/BenefitCardStyled.styled.ts → BenefitRatafiaCard/BenefitRatafiaCard.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const BenefitCardStyled = styled.div`
+export const BenefitRatafiaCardStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,10 +13,7 @@ export const BenefitCardStyled = styled.div`
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-
-  &.has-shadow {
-    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  }
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -25,7 +22,7 @@ export const BenefitCardStyled = styled.div`
     flex-direction: column;
   }
 
-  .benefit-card {
+  .benefit-ratafia-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -34,10 +31,7 @@ export const BenefitCardStyled = styled.div`
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-
-      &.has-shadow {
-        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-      }
+      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
       img {
         min-width: 32px;

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type BenefitRatafiaCardProps } from './BenefitRatafiaCardProps.types'
+import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled'
+
+export const BenefitRatafiaCard: React.FC<BenefitRatafiaCardProps> = ({ title, image, description }) => {
+  return (
+    <BenefitRatafiaCardStyled className='benefit-ratafia-card'>
+      {image !== null && <div className='benefit-ratafia-card__icon'>{image}</div>}
+      <div className='benefit-ratafia-card__content'>
+        <h3 className='sans-serif --big --bold-weight benefit-ratafia-card__content__title'>{title}</h3>
+        <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
+      </div>
+    </BenefitRatafiaCardStyled>
+  )
+}
+
+export default BenefitRatafiaCard

package/dist/src/components/atoms/{BenefitCard/BenefitCardProps.types.d.ts → BenefitRatafiaCard/BenefitRatafiaCardProps.types.d.ts}

@@ -1,8 +1,6 @@
-export interface BenefitCardProps {
+export interface BenefitRatafiaCardProps {
     id: string;
     title: string;
     image?: React.ReactNode;
     description: string;
-    hasShadow?: boolean;
-    hasBigFontSize?: boolean;
 }

package/dist/src/components/atoms/BenefitRatafiaCard/BenefitRatafiaCardProps.types.ts

@@ -0,0 +1,6 @@
+export interface BenefitRatafiaCardProps {
+  id: string
+  title: string
+  image?: React.ReactNode
+  description: string
+}

package/dist/src/components/atoms/BenefitRatafiaCard/index.d.ts

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

package/dist/src/components/atoms/BenefitRatafiaCard/index.js

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

package/dist/src/components/atoms/BenefitRatafiaCard/index.ts

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

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

@@ -1,4 +1,3 @@
-export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
 export interface ButtonProps {
     label: string;
     dataQa: string;
@@ -9,7 +8,7 @@ export interface ButtonProps {
     noLinkNoFunc?: boolean;
     onClick?: (functionParameters?: any) => void;
     functionParameters?: any;
-    color?: Colors;
+    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
     error?: boolean;
     disabled?: boolean;
     fluid?: boolean;

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

@@ -1,2 +1 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

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

@@ -1,21 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
-export type Colors =
-  | 'primary'
-  | 'primary2'
-  | 'primary3'
-  | 'primary4'
-  | 'secondary'
-  | 'secondary2'
-  | 'secondary3'
-  | 'secondary4'
-  | 'secondaryIcon'
-  | 'secondaryIconBold'
-  | 'secondaryIconDark'
-  | 'tertiary'
-  | 'tertiary2'
-  | 'styleless'
-  | 'transparent'
 export interface ButtonProps {
   label: string
   dataQa: string
@@ -26,7 +9,22 @@ export interface ButtonProps {
   noLinkNoFunc?: boolean
   onClick?: (functionParameters?: any) => void
   functionParameters?: any
-  color?: Colors
+  color?:
+    | 'primary'
+    | 'primary2'
+    | 'primary3'
+    | 'primary4'
+    | 'secondary'
+    | 'secondary2'
+    | 'secondary3'
+    | 'secondary4'
+    | 'secondaryIcon'
+    | 'secondaryIconBold'
+    | 'secondaryIconDark'
+    | 'tertiary'
+    | 'tertiary2'
+    | 'styleless'
+    | 'transparent'
   error?: boolean
   disabled?: boolean
   fluid?: boolean

package/dist/src/components/atoms/CardPane/CardPane.styled.js

@@ -80,7 +80,7 @@ export const CardPaneStyled = styled.div `
       }
       &.pane--title--button {
         cursor: pointer;
-        color: --neutral-neutral-2;
+        color: var(--primary-main);
       }
     }
     &--description {

package/dist/src/components/atoms/CardPane/CardPane.styled.ts

@@ -81,7 +81,7 @@ export const CardPaneStyled = styled.div`
       }
       &.pane--title--button {
         cursor: pointer;
-        color: --neutral-neutral-2;
+        color: var(--primary-main);
       }
     }
     &--description {

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ dataQA, description, subdescription, id, title, handleClick }) => {
-    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, "data-qa": dataQA, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ dataQA, description, subdescription, id, title, handleClick }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
   const paneTitle = (
     <>
       {handleClick ? (
-        <button onClick={handleClick} data-qa={dataQA} className='pane--title pane--title--button'>
+        <button onClick={handleClick} className='pane--title pane--title--button'>
           {title}
         </button>
       ) : (

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,6 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
-    dataQA?: string;
     handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,6 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
-  dataQA?: string
   handleClick?: () => void
 }

package/dist/src/components/atoms/ContactCard/ContactCard.styled.js

@@ -9,15 +9,11 @@ export const ContactCardStyled = styled.div `
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     border-radius: var(--s-border-radius);
     min-width: 12.5rem;
+    height: 7.875rem;
     flex-shrink: 0;
     padding: 1rem;
     text-decoration: none;
     color: var(--neutral-neutral-1);
-
-    @media ${device['landscape-tablets']} {
-      height: 100%;
-    }
-
     &__image {
       width: 2rem;
     }

package/dist/src/components/atoms/ContactCard/ContactCard.styled.ts

@@ -10,15 +10,11 @@ export const ContactCardStyled = styled.div`
     box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
     border-radius: var(--s-border-radius);
     min-width: 12.5rem;
+    height: 7.875rem;
     flex-shrink: 0;
     padding: 1rem;
     text-decoration: none;
     color: var(--neutral-neutral-1);
-
-    @media ${device['landscape-tablets']} {
-      height: 100%;
-    }
-
     &__image {
       width: 2rem;
     }

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

@@ -77,7 +77,7 @@ const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStart
             }
         };
     }
-    return (_jsxs(DatePickerCustomStyled, { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { ...propsForMobileDevices, preventOpenOnFocus: true, locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
+    return (_jsxs(DatePickerCustomStyled, { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { ...propsForMobileDevices, locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
                         margin: 10,
                         display: 'flex',
                         justifyContent: 'center'

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

@@ -118,7 +118,6 @@ const DatePickerCustom: FC<DatePickerCustomProps> = ({
       {TooltipObject}
       <DatePicker
         {...propsForMobileDevices}
-        preventOpenOnFocus={true}
         locale={locale}
         dateFormat={dateFormat}
         renderCustomHeader={({