@npm_leadtech/legal-lib-components 7.81.0 → 7.82.52

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

@@ -0,0 +1,50 @@
+import styled from 'styled-components'
+
+export const TopBarMobileStyled = styled.div`
+  background-color: var(--neutral-neutral-5);
+  display: flex;
+  padding: 0.5rem 1rem;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: var(--s-border-radius);
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+
+  &.top-bar-mobile {
+    &.fade-In {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+
+    &.fade-Out {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0s linear 300ms,
+        opacity 300ms;
+    }
+
+    > b {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      a {
+        display: contents;
+      }
+
+      img {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react'
+import { TopBarMobileStyled } from './TopBarMobile.styled'
+
+interface TopBarMobileProps {
+  children: React.ReactNode
+  isVisible: boolean
+}
+
+export const TopBarMobile: React.FC<TopBarMobileProps> = ({
+  children,
+  isVisible = false
+}): React.ReactElement | null => {
+  const [isSSR, setIsSSR] = useState(false)
+  useEffect(() => {
+    setIsSSR(true)
+  }, [])
+  return isSSR ? (
+    <TopBarMobileStyled className={`top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`}>
+      {children}
+    </TopBarMobileStyled>
+  ) : null
+}

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

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

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

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

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

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

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

@@ -3,6 +3,6 @@ import { WhyLawDistrictItemsStyled } from './WhyLawDistrictItems.styled';
 export const WhyLawDistrictItems = ({ items }) => {
     if (items.length === 0)
         return null;
-    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyItems', children: items.map((item) => (_jsx("li", { className: 'whyItems__item', children: item.reasons }, item.id))) }));
+    return (_jsx(WhyLawDistrictItemsStyled, { className: 'whyLawDistrictItems', children: items.map((item) => (_jsx("li", { className: 'whyLawDistrictItems__item', children: item.reasons }, item.id))) }));
 };
 export default WhyLawDistrictItems;

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

@@ -13,7 +13,7 @@ export const WhyLawDistrictItemsStyled = styled.ul `
     padding: 0 1rem;
   }
 
-  .whyItems {
+  .whyLawDistrictItems {
     &__item {
       max-width: 100%;
       color: var(--neutral-neutral-2);

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

@@ -14,7 +14,7 @@ export const WhyLawDistrictItemsStyled = styled.ul`
     padding: 0 1rem;
   }
 
-  .whyItems {
+  .whyLawDistrictItems {
     &__item {
       max-width: 100%;
       color: var(--neutral-neutral-2);

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

@@ -7,9 +7,9 @@ export const WhyLawDistrictItems: React.FC<WhyLawDistrictItemsProps> = ({ items
   if (items.length === 0) return null
 
   return (
-    <WhyLawDistrictItemsStyled className={'whyItems'}>
+    <WhyLawDistrictItemsStyled className={'whyLawDistrictItems'}>
       {items.map((item) => (
-        <li className={'whyItems__item'} key={item.id}>
+        <li className={'whyLawDistrictItems__item'} key={item.id}>
           {item.reasons}
         </li>
       ))}

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

@@ -18,24 +18,14 @@ export const WideInfoBarStyled = styled.div `
       justify-content: space-between;
       padding: 1rem 2rem;
 
-      @media ${device.tablets} {
-        flex-flow: row;
-        font-size: 0.9rem;
-        padding: 1rem 2rem;
-        gap: 1rem;
-        flex-wrap: wrap;
-      }
-
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
         padding: 0;
-        gap: 0.5rem;
       }
 
       @media ${device.desktop} {
         padding: 0;
-        gap: 1rem;
       }
     }
   }

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

@@ -19,24 +19,14 @@ export const WideInfoBarStyled = styled.div`
       justify-content: space-between;
       padding: 1rem 2rem;
 
-      @media ${device.tablets} {
-        flex-flow: row;
-        font-size: 0.9rem;
-        padding: 1rem 2rem;
-        gap: 1rem;
-        flex-wrap: wrap;
-      }
-
       @media ${device['landscape-tablets']} {
         flex-flow: row;
         font-size: 0.9rem;
         padding: 0;
-        gap: 0.5rem;
       }
 
       @media ${device.desktop} {
         padding: 0;
-        gap: 1rem;
       }
     }
   }

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitCard';
+export * from './BenefitRatafiaCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
-export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';
@@ -16,7 +15,6 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
-export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -32,7 +30,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItemsDeprecated';
+export * from './MenuItems';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -62,12 +60,8 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
+export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
-export * from './MobileTrigger';
-export * from './PhoneNumberDisplay';
-export * from './ContactInformationHeader';
-export * from './FeatureItem';
-export * from './PlanCard';

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard';
 export * from './AddButton';
 export * from './BaseBox';
-export * from './BenefitCard';
+export * from './BenefitRatafiaCard';
 export * from './BillCard';
 export * from './BottomOverlayMenu';
 export * from './BreadcrumItem';
 export * from './Button';
 export * from './ButtonIcon';
-export * from './CardBox';
 export * from './CardPane';
 export * from './Checkbox';
 export * from './ContactCard';
@@ -16,7 +15,6 @@ export * from './DialogMenuIcon';
 export * from './Disclaimer';
 export * from './DisclaimerRatafia';
 export * from './Divider';
-export * from './DropdownInput';
 export * from './DocumentStatus';
 export * from './DocumentTag';
 export * from './ExpertCard';
@@ -32,7 +30,7 @@ export * from './JumbotronStatic';
 export * from './KeyFactRatafiaCard';
 export * from './Logo';
 export * from './LogoText';
-export * from './MenuItemsDeprecated';
+export * from './MenuItems';
 export * from './Message';
 export * from './MessageInformation';
 export * from './MoreDocsItem';
@@ -62,12 +60,8 @@ export * from './TextArea';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './TopBar';
+export * from './TopBarMobile';
 export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
-export * from './MobileTrigger';
-export * from './PhoneNumberDisplay';
-export * from './ContactInformationHeader';
-export * from './FeatureItem';
-export * from './PlanCard';

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

@@ -1,13 +1,12 @@
 export * from './ActionButtonHeaderRatafiaCard'
 export * from './AddButton'
 export * from './BaseBox'
-export * from './BenefitCard'
+export * from './BenefitRatafiaCard'
 export * from './BillCard'
 export * from './BottomOverlayMenu'
 export * from './BreadcrumItem'
 export * from './Button'
 export * from './ButtonIcon'
-export * from './CardBox'
 export * from './CardPane'
 export * from './Checkbox'
 export * from './ContactCard'
@@ -16,7 +15,6 @@ export * from './DialogMenuIcon'
 export * from './Disclaimer'
 export * from './DisclaimerRatafia'
 export * from './Divider'
-export * from './DropdownInput'
 export * from './DocumentStatus'
 export * from './DocumentTag'
 export * from './ExpertCard'
@@ -32,7 +30,7 @@ export * from './JumbotronStatic'
 export * from './KeyFactRatafiaCard'
 export * from './Logo'
 export * from './LogoText'
-export * from './MenuItemsDeprecated'
+export * from './MenuItems'
 export * from './Message'
 export * from './MessageInformation'
 export * from './MoreDocsItem'
@@ -62,12 +60,8 @@ export * from './TextArea'
 export * from './Toggle'
 export * from './Tooltip'
 export * from './TopBar'
+export * from './TopBarMobile'
 export * from './TrustPilot'
 export * from './Video'
 export * from './WhyLawDistrictItems'
 export * from './WideInfoBar'
-export * from './MobileTrigger'
-export * from './PhoneNumberDisplay'
-export * from './ContactInformationHeader'
-export * from './FeatureItem'
-export * from './PlanCard'

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

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

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

@@ -1,41 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
 import { AccordionItemStyled } from './AccordionItem.styled';
-export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title, heightAutoChange = false }) => {
+export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
     const { dispatch } = useDispatchDataAccordionItem();
-    const [heightAccordionItem, setHeightAccordionItem] = React.useState(defaultHeightItem);
     useEffect(() => {
         if (state.locked.actionType === 'unlocked') {
             onClick();
             dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
         }
     }, [state.locked.actionType]);
-    useEffect(() => {
-        let intervalId;
-        if (heightAutoChange) {
-            intervalId = setInterval(() => {
-                const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem;
-                if (heightAccordionItem !== height) {
-                    setHeightAccordionItem(height);
-                }
-            }, 500);
-        }
-        else {
-            setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem);
-        }
-        return () => {
-            if (intervalId !== undefined) {
-                clearInterval(intervalId);
-            }
-        };
-    }, []);
     return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();
-                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: heightAccordionItem } : { height: '0px' }, children: children })] }));
+                }, children: [_jsx("p", { className: `accordion__title ${state.locked.isLocked ? '--locked' : ''}`, children: title }), accordionRightContent] }), _jsx("div", { ref: contenReftHeight, className: `accordion__content ${!isOpen ? '--closed' : ''}`, style: isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }, children: children })] }));
 };

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

@@ -33,7 +33,7 @@ export const AccordionItemStyled = styled.div `
     letter-spacing: -0.3px;
 
     &.--success {
-      background: var(--primary-main-light-6);
+      background: #eff7f5;
     }
 
     &.--locked {
@@ -55,10 +55,6 @@ export const AccordionItemStyled = styled.div `
 
     &.--locked {
       color: var(--neutral-neutral-2);
-
-      html[data-theme='primaryblue'] & {
-        color: var(--primary-main-dark-1);
-      }
     }
   }
 
@@ -68,6 +64,5 @@ export const AccordionItemStyled = styled.div `
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
-    color: black;
   }
 `;

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

@@ -34,7 +34,7 @@ export const AccordionItemStyled = styled.div`
     letter-spacing: -0.3px;
 
     &.--success {
-      background: var(--primary-main-light-6);
+      background: #eff7f5;
     }
 
     &.--locked {
@@ -56,10 +56,6 @@ export const AccordionItemStyled = styled.div`
 
     &.--locked {
       color: var(--neutral-neutral-2);
-
-      html[data-theme='primaryblue'] & {
-        color: var(--primary-main-dark-1);
-      }
     }
   }
 
@@ -69,6 +65,5 @@ export const AccordionItemStyled = styled.div`
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
-    color: black;
   }
 `

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

@@ -12,13 +12,11 @@ export const AccordionItem = ({
   index,
   isOpen,
   onClick,
-  title,
-  heightAutoChange = false
+  title
 }: AccordionItemProps): React.JSX.Element => {
   const contenReftHeight = useRef<HTMLInputElement>(null)
   const { state } = useStateDataAccordionItem(index)
   const { dispatch } = useDispatchDataAccordionItem()
-  const [heightAccordionItem, setHeightAccordionItem] = React.useState<number>(defaultHeightItem)
 
   useEffect(() => {
     if (state.locked.actionType === 'unlocked') {
@@ -27,25 +25,6 @@ export const AccordionItem = ({
     }
   }, [state.locked.actionType])
 
-  useEffect(() => {
-    let intervalId: ReturnType<typeof setInterval> | undefined
-    if (heightAutoChange) {
-      intervalId = setInterval(() => {
-        const height = contenReftHeight.current?.children[0].getBoundingClientRect().height ?? defaultHeightItem
-        if (heightAccordionItem !== height) {
-          setHeightAccordionItem(height)
-        }
-      }, 500)
-    } else {
-      setHeightAccordionItem(contenReftHeight?.current?.scrollHeight ?? defaultHeightItem)
-    }
-    return () => {
-      if (intervalId !== undefined) {
-        clearInterval(intervalId)
-      }
-    }
-  }, [])
-
   return (
     <AccordionItemStyled className='accordion__container'>
       <button
@@ -63,7 +42,7 @@ export const AccordionItem = ({
       <div
         ref={contenReftHeight}
         className={`accordion__content ${!isOpen ? '--closed' : ''}`}
-        style={isOpen ? { height: heightAccordionItem } : { height: '0px' }}
+        style={isOpen ? { height: contenReftHeight?.current?.scrollHeight ?? defaultHeightItem } : { height: '0px' }}
       >
         {children}
       </div>

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

@@ -6,5 +6,4 @@ export interface AccordionItemProps {
     isOpen?: boolean;
     onClick: () => void;
     title?: string;
-    heightAutoChange?: boolean;
 }

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

@@ -6,5 +6,4 @@ export interface AccordionItemProps {
   isOpen?: boolean
   onClick: () => void
   title?: string
-  heightAutoChange?: boolean
 }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-const Article = ({ image, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
-    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("div", { className: isCategoryProductPage ? 'image image-category' : 'image', children: image }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
+    return (_jsxs(ArticleStyled, { className: 'article', children: [_jsx("img", { src: imageUrl, className: isCategoryProductPage ? 'image image-category' : 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: isCategoryProductPage ? 'information information-category' : 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: readMoreText, dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
 };
 export default Article;

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

@@ -14,19 +14,11 @@ export const ArticleStyled = styled.div `
   }
 
   .image {
+    object-fit: cover;
+    object-position: 25%;
     height: 13em;
     width: 100%;
 
-    .gatsby-image-wrapper {
-      height: 100%;
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        object-position: 25%;
-      }
-    }
-
     @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;

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

@@ -15,19 +15,11 @@ export const ArticleStyled = styled.div`
   }
 
   .image {
+    object-fit: cover;
+    object-position: 25%;
     height: 13em;
     width: 100%;
 
-    .gatsby-image-wrapper {
-      height: 100%;
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        object-position: 25%;
-      }
-    }
-
     @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;

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

@@ -6,10 +6,15 @@ import { type ArticleProps } from './ArticleProps.types'
 import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
 
-const Article: FC<ArticleProps> = ({ image, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage, readMoreText }) => {
   return (
     <ArticleStyled className='article'>
-      <div className={isCategoryProductPage ? 'image image-category' : 'image'}>{image}</div>
+      <img
+        src={imageUrl}
+        className={isCategoryProductPage ? 'image image-category' : 'image'}
+        loading='lazy'
+        alt={title}
+      />
       <div className={isCategoryProductPage ? 'information information-category' : 'information'}>
         <a href={articleUrl} target='_blank'>
           <p className='title sans-serif --big'>{title} </p>

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -1,5 +1,5 @@
 export interface ArticleProps {
-    image: React.ReactNode;
+    imageUrl: string;
     title: string;
     articleUrl: string;
     summary: string;

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -1,5 +1,5 @@
 export interface ArticleProps {
-  image: React.ReactNode
+  imageUrl: string
   title: string
   articleUrl: string
   summary: string

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BenefitCard } from '../../atoms';
+import { BenefitRatafiaCard } from '../../atoms';
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
 const BenefitRatafiaCardList = ({ benefits = [] }) => {
     if (benefits.length === 0)
         return null;
-    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitCard, { ...benefit }, benefit.id))) }));
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
 };
 export default BenefitRatafiaCardList;

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

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 
-import { BenefitCard } from '../../atoms'
+import { BenefitRatafiaCard } from '../../atoms'
 import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
 import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
 
@@ -10,7 +10,7 @@ const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = []
   return (
     <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
       {benefits.map((benefit) => (
-        <BenefitCard key={benefit.id} {...benefit} />
+        <BenefitRatafiaCard key={benefit.id} {...benefit} />
       ))}
     </BenefitRatafiaCardListStyled>
   )

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.d.ts

@@ -1,4 +1,4 @@
-import { type BenefitCardProps } from '../../atoms';
+import { type BenefitRatafiaCardProps } from '../../atoms';
 export interface BenefitRatafiaCardListProps {
-    benefits: BenefitCardProps[];
+    benefits: BenefitRatafiaCardProps[];
 }

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.ts

@@ -1,5 +1,5 @@
-import { type BenefitCardProps } from '../../atoms'
+import { type BenefitRatafiaCardProps } from '../../atoms'
 
 export interface BenefitRatafiaCardListProps {
-  benefits: BenefitCardProps[]
+  benefits: BenefitRatafiaCardProps[]
 }

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

@@ -78,13 +78,6 @@ export const BoxFormStyled = styled.div `
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
-    flex-wrap: wrap;
-    gap: 1rem;
-
-    .e-button {
-      flex: 1;
-      text-wrap: nowrap;
-    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -98,7 +91,8 @@ export const BoxFormStyled = styled.div `
   }
 
   .box--form__footer__text {
-    margin-right: 1rem;
+    margin-right: 5px;
+    width: 60%;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;