@npm_leadtech/legal-lib-components 5.64.14 → 5.64.15

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

@@ -41,6 +41,9 @@ export * from './PreFooter'
 export * from './ProgressBar'
 export * from './Radio'
 export * from './RatafiaLandingIcon'
+export * from './RatafiaResultCard'
+export * from './RatafiaResultTab'
+export * from './RatafiaReviewResult'
 export * from './RemoveButton'
 export * from './ReviewKeyFactsResultRatafia'
 export * from './RichTextInner'

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

@@ -16,11 +16,9 @@ export const KeyFactCardListRatafiaStyled = styled.div `
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);
 
-  height: max(calc(100vh - 24.5rem), 15rem;
-
+  height: calc(100vh - 24.5rem);
   @media ${device['portrait-tablets']} {
-    height: max(calc(100vh - 33.5rem), 15rem);
+    height: calc(100vh - 33.5rem);
   }
-
   overflow-y: auto;
 `;

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

@@ -17,11 +17,9 @@ export const KeyFactCardListRatafiaStyled = styled.div`
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);
 
-  height: max(calc(100vh - 24.5rem), 15rem;
-
+  height: calc(100vh - 24.5rem);
   @media ${device['portrait-tablets']} {
-    height: max(calc(100vh - 33.5rem), 15rem);
+    height: calc(100vh - 33.5rem);
   }
-
   overflow-y: auto;
 `

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RatafiaResultCard } from '../../atoms';
+import { RatafiaResultCardListStyled } from './RatafiaResultCardList.styled';
+export const RatafiaResultCardList = ({ keyFacts }) => {
+    if (keyFacts.length === 0)
+        return null;
+    return (_jsx(RatafiaResultCardListStyled, { className: 'ratafia-result-card-list', children: keyFacts.map((keyFact) => (_jsx(RatafiaResultCard, { ...keyFact }, keyFact.id))) }));
+};
+export default RatafiaResultCardList;

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

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

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaResultCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  margin-bottom: 1rem;
+  padding: 0 2rem 1.5rem 1.5rem;
+  gap: 0.5rem;
+
+  border-radius: var(--s-border-radius);
+  border-top: 4px solid var(--neutral-neutral-6);
+  border-bottom: 8px solid var(--neutral-neutral-6);
+  background: var(--neutral-neutral-6);
+
+  height: calc(100vh - 27.5rem);
+  @media ${device['portrait-tablets']} {
+    height: calc(100vh - 35.5rem);
+  }
+  overflow-y: auto;
+`;

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

@@ -0,0 +1,25 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaResultCardListStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  margin-bottom: 1rem;
+  padding: 0 2rem 1.5rem 1.5rem;
+  gap: 0.5rem;
+
+  border-radius: var(--s-border-radius);
+  border-top: 4px solid var(--neutral-neutral-6);
+  border-bottom: 8px solid var(--neutral-neutral-6);
+  background: var(--neutral-neutral-6);
+
+  height: calc(100vh - 27.5rem);
+  @media ${device['portrait-tablets']} {
+    height: calc(100vh - 35.5rem);
+  }
+  overflow-y: auto;
+`

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

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { RatafiaResultCard } from '../../atoms'
+import { type RatafiaResultCardListProps } from './RatafiaResultCardListProps.types'
+import { RatafiaResultCardListStyled } from './RatafiaResultCardList.styled'
+
+export const RatafiaResultCardList: React.FC<RatafiaResultCardListProps> = ({ keyFacts }) => {
+  if (keyFacts.length === 0) return null
+
+  return (
+    <RatafiaResultCardListStyled className='ratafia-result-card-list'>
+      {keyFacts.map((keyFact) => (
+        <RatafiaResultCard key={keyFact.id} {...keyFact} />
+      ))}
+    </RatafiaResultCardListStyled>
+  )
+}
+
+export default RatafiaResultCardList

package/dist/src/components/molecules/RatafiaResultCardList/RatafiaResultCardListProps.types.d.ts

@@ -0,0 +1,4 @@
+import { type RatafiaResultCardProps } from '../../atoms';
+export interface RatafiaResultCardListProps {
+    keyFacts: RatafiaResultCardProps[];
+}

package/dist/src/components/molecules/RatafiaResultCardList/RatafiaResultCardListProps.types.js

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

package/dist/src/components/molecules/RatafiaResultCardList/RatafiaResultCardListProps.types.ts

@@ -0,0 +1,5 @@
+import { type RatafiaResultCardProps } from '../../atoms'
+
+export interface RatafiaResultCardListProps {
+  keyFacts: RatafiaResultCardProps[]
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RatafiaResultTab } from '../../atoms';
+import { RatafiaResultTabListStyled } from './RatafiaResultTabList.styled';
+const RatafiaResultTabList = ({ tabs = [] }) => {
+    if (tabs.length === 0)
+        return null;
+    return (_jsx(RatafiaResultTabListStyled, { className: 'ratafia-result-tab-list', children: tabs.map((tab) => (_jsx(RatafiaResultTab, { ...tab }, tab.id))) }));
+};
+export default RatafiaResultTabList;

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const RatafiaResultTabListStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+`;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const RatafiaResultTabListStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+`

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

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { RatafiaResultTab } from '../../atoms'
+import { RatafiaResultTabListProps } from './RatafiaResultTabListProps.types'
+import { RatafiaResultTabListStyled } from './RatafiaResultTabList.styled'
+
+const RatafiaResultTabList: FC<RatafiaResultTabListProps> = ({ tabs = [] }) => {
+  if (tabs.length === 0) return null
+
+  return (
+    <RatafiaResultTabListStyled className='ratafia-result-tab-list'>
+      {tabs.map((tab) => (
+        <RatafiaResultTab key={tab.id} {...tab} />
+      ))}
+    </RatafiaResultTabListStyled>
+  )
+}
+export default RatafiaResultTabList

package/dist/src/components/molecules/RatafiaResultTabList/RatafiaResultTabListProps.types.d.ts

@@ -0,0 +1,4 @@
+import { RatafiaResultTabProps } from '../../atoms';
+export interface RatafiaResultTabListProps {
+    tabs: RatafiaResultTabProps[];
+}

package/dist/src/components/molecules/RatafiaResultTabList/RatafiaResultTabListProps.types.js

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

package/dist/src/components/molecules/RatafiaResultTabList/RatafiaResultTabListProps.types.ts

@@ -0,0 +1,5 @@
+import { RatafiaResultTabProps } from '../../atoms'
+
+export interface RatafiaResultTabListProps {
+  tabs: RatafiaResultTabProps[]
+}

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

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

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

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

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

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

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

@@ -31,6 +31,8 @@ export * from './PhoneContactBoxDesktop';
 export * from './PhoneContactBoxMobile';
 export * from './PopularDocs';
 export * from './PricingCard';
+export * from './RatafiaResultCardList';
+export * from './RatafiaResultTabList';
 export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';

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

@@ -31,6 +31,8 @@ export * from './PhoneContactBoxDesktop';
 export * from './PhoneContactBoxMobile';
 export * from './PopularDocs';
 export * from './PricingCard';
+export * from './RatafiaResultCardList';
+export * from './RatafiaResultTabList';
 export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';

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

@@ -31,6 +31,8 @@ export * from './PhoneContactBoxDesktop'
 export * from './PhoneContactBoxMobile'
 export * from './PopularDocs'
 export * from './PricingCard'
+export * from './RatafiaResultCardList'
+export * from './RatafiaResultTabList'
 export * from './RatafiaSubscriptionCard'
 export * from './Snackbar'
 export * from './StepGetForm'

package/dist/src/components/organisms/LanguageSelector/useLanguagesSelector.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { CAFlag } from '../../../../images/componentsSvg/flags/CAFlag';
+import { DEFlag } from '../../../../images/componentsSvg/flags/DEFlag';
 import { GBFlag } from '../../../../images/componentsSvg/flags/GBFlag';
 import { USFlag } from '../../../../images/componentsSvg/flags/USFlag';
 export const useLanguagesSelector = (languages) => {
     const flags = new Map([
         ['en-US', _jsx(USFlag, {}, 'us-flag')],
-        ['en-GB', _jsx(GBFlag, {}, 'gb-flag')]
+        ['en-GB', _jsx(GBFlag, {}, 'gb-flag')],
+        ['en-CA', _jsx(CAFlag, {}, 'ca-flag')],
+        ['de-DE', _jsx(DEFlag, {}, 'de-flag')]
     ]);
     const initSelector = () => {
         if (languages.length === 0)

package/dist/src/components/organisms/LanguageSelector/useLanguagesSelector.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { CAFlag } from '../../../../images/componentsSvg/flags/CAFlag'
+import { DEFlag } from '../../../../images/componentsSvg/flags/DEFlag'
 import { GBFlag } from '../../../../images/componentsSvg/flags/GBFlag'
 import { type LenguageSelectorItem } from './LenguageSelectorItem'
 import { USFlag } from '../../../../images/componentsSvg/flags/USFlag'
@@ -9,7 +11,9 @@ export const useLanguagesSelector = (
 ): { languagesSelector: LenguageSelectorItem[] } => {
   const flags = new Map<string, React.ReactNode>([
     ['en-US', <USFlag key='us-flag' />],
-    ['en-GB', <GBFlag key='gb-flag' />]
+    ['en-GB', <GBFlag key='gb-flag' />],
+    ['en-CA', <CAFlag key='ca-flag' />],
+    ['de-DE', <DEFlag key='de-flag' />]
   ])
 
   const initSelector = (): LenguageSelectorItem[] => {

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.js

@@ -17,8 +17,7 @@ export const LayoutRatafiaStyled = styled.div `
     justify-content: space-between;
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
-    height: unset;
-    min-height: calc(100vh - 8.375rem);
+    height: calc(100vh - 8.375rem);
     border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.ts

@@ -18,8 +18,7 @@ export const LayoutRatafiaStyled = styled.div`
     justify-content: space-between;
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
-    height: unset;
-    min-height: calc(100vh - 8.375rem);
+    height: calc(100vh - 8.375rem);
     border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaLoadingResultContentStyled } from './RatafiaLoadingResultContent.styled';
+export const RatafiaLoadingResultContent = ({ documentName, icon, text }) => {
+    return (_jsxs(RatafiaLoadingResultContentStyled, { children: [_jsx("h2", { className: 'sans-serif --bold-weight ratafia-result-loading-content__document-name', children: documentName }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper', children: [_jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-1', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-2', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-5' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-3', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-1' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-7' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-4' })] }), _jsxs("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation animation-4', children: [_jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-3' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-8' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-2' }), _jsx("div", { className: 'ratafia-result-loading-content__animation-wrapper__animation__loader item-6' })] })] }), _jsxs("div", { className: 'ratafia-result-loading-content__message', children: [_jsx("div", { className: 'ratafia-result-loading-content__message__icon', children: icon }), _jsx("span", { className: 'sans-serif --medium ratafia-result-loading-content__message__text', children: text })] })] }));
+};
+export default RatafiaLoadingResultContent;

package/dist/src/components/organisms/RatafiaLoadingResultContent/RatafiaLoadingResultContent.styled.d.ts

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

@@ -0,0 +1,143 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaLoadingResultContentStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--global-gap);
+
+  .ratafia-result-loading-content__document-name {
+    color: var(--neutral-neutral-2);
+    font-size: 1rem;
+    @media ${device['portrait-tablets']} {
+      font-size: 1.125rem;
+    }
+  }
+
+  .ratafia-result-loading-content__animation-wrapper {
+    align-self: stretch;
+
+    padding: 0 2rem 1.5rem 1.5rem;
+
+    overflow: hidden;
+
+    border-radius: var(--s-border-radius);
+    border-top: 4px solid var(--neutral-neutral-6);
+    border-bottom: 4px solid var(--neutral-neutral-6);
+    background: var(--neutral-neutral-6);
+
+    height: calc(100vh - 23.5rem);
+    @media ${device['portrait-tablets']} {
+      height: calc(100vh - 33.5rem);
+    }
+
+    &__animation {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      gap: 0.8rem;
+
+      padding: 2rem 0;
+
+      border-bottom: 1px solid var(--neutral-neutral-4);
+      &__loader {
+        background: var(--neutral-neutral-4);
+        border-radius: var(--l-border-radius);
+      }
+      .item-1 {
+        height: 10px;
+        width: 45%;
+      }
+      .item-2 {
+        height: 7px;
+        width: 30%;
+      }
+      .item-3 {
+        height: 10px;
+        width: 25%;
+      }
+      .item-4 {
+        height: 7px;
+        width: 70%;
+      }
+      .item-5 {
+        height: 7px;
+        width: 55%;
+      }
+      .item-6 {
+        height: 7px;
+        width: 65%;
+      }
+      .item-7 {
+        height: 7px;
+        width: 90%;
+      }
+      .item-8 {
+        height: 7px;
+        width: 90%;
+      }
+    }
+    .animation-1 {
+      animation:
+        appear 4s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-2 {
+      animation:
+        appear 5s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-3 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-4 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+  }
+
+  .ratafia-result-loading-content__message {
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    align-self: stretch;
+
+    padding: 1rem;
+    gap: 0.5rem;
+
+    border-radius: var(--s-border-radius);
+    background: var(--secondary-main-light-4);
+
+    &__icon img {
+      width: 24px;
+    }
+    &__text {
+      color: var(--neutral-neutral-1);
+    }
+  }
+
+  @keyframes fadeInOut {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.2;
+    }
+  }
+
+  @keyframes appear {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

package/dist/src/components/organisms/RatafiaLoadingResultContent/RatafiaLoadingResultContent.styled.ts

@@ -0,0 +1,144 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaLoadingResultContentStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--global-gap);
+
+  .ratafia-result-loading-content__document-name {
+    color: var(--neutral-neutral-2);
+    font-size: 1rem;
+    @media ${device['portrait-tablets']} {
+      font-size: 1.125rem;
+    }
+  }
+
+  .ratafia-result-loading-content__animation-wrapper {
+    align-self: stretch;
+
+    padding: 0 2rem 1.5rem 1.5rem;
+
+    overflow: hidden;
+
+    border-radius: var(--s-border-radius);
+    border-top: 4px solid var(--neutral-neutral-6);
+    border-bottom: 4px solid var(--neutral-neutral-6);
+    background: var(--neutral-neutral-6);
+
+    height: calc(100vh - 23.5rem);
+    @media ${device['portrait-tablets']} {
+      height: calc(100vh - 33.5rem);
+    }
+
+    &__animation {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      gap: 0.8rem;
+
+      padding: 2rem 0;
+
+      border-bottom: 1px solid var(--neutral-neutral-4);
+      &__loader {
+        background: var(--neutral-neutral-4);
+        border-radius: var(--l-border-radius);
+      }
+      .item-1 {
+        height: 10px;
+        width: 45%;
+      }
+      .item-2 {
+        height: 7px;
+        width: 30%;
+      }
+      .item-3 {
+        height: 10px;
+        width: 25%;
+      }
+      .item-4 {
+        height: 7px;
+        width: 70%;
+      }
+      .item-5 {
+        height: 7px;
+        width: 55%;
+      }
+      .item-6 {
+        height: 7px;
+        width: 65%;
+      }
+      .item-7 {
+        height: 7px;
+        width: 90%;
+      }
+      .item-8 {
+        height: 7px;
+        width: 90%;
+      }
+    }
+    .animation-1 {
+      animation:
+        appear 4s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-2 {
+      animation:
+        appear 5s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-3 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+    .animation-4 {
+      animation:
+        appear 6s ease-in-out 1,
+        fadeInOut 4s ease-in-out infinite 4s;
+    }
+  }
+
+  .ratafia-result-loading-content__message {
+    display: flex;
+    justify-content: start;
+    align-items: flex-start;
+    align-self: stretch;
+
+    padding: 1rem;
+    gap: 0.5rem;
+
+    border-radius: var(--s-border-radius);
+    background: var(--secondary-main-light-4);
+
+    &__icon img {
+      width: 24px;
+    }
+    &__text {
+      color: var(--neutral-neutral-1);
+    }
+  }
+
+  @keyframes fadeInOut {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.2;
+    }
+  }
+
+  @keyframes appear {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`