@npm_leadtech/legal-lib-components 5.67.3 → 5.68.1

package/dist/src/components/atoms/RatafiaReviewResult/RatafiaReviewResultProps.types.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler } from 'react'
+
+export interface RatafiaReviewResultProps {
+  reviewQuestion: string
+  reviewPositiveIcon?: React.ReactNode
+  reviewPositiveText: string
+  reviewPositiveDataQa: string
+  handleOnClickReviewPositive?: MouseEventHandler
+  reviewNegativeIcon?: React.ReactNode
+  reviewNegativeText: string
+  reviewNegativeDataQa: string
+  handleOnClickReviewNegative?: MouseEventHandler
+  reviewFeedbackText: string
+  review: boolean | null
+}

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

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

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

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

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

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

package/dist/src/components/atoms/index.d.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/atoms/index.js

@@ -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/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/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 = ({ result }) => {
+    if (result.length === 0)
+        return null;
+    return (_jsx(RatafiaResultCardListStyled, { className: 'ratafia-result-card-list', children: result.map((resultItem) => (_jsx(RatafiaResultCard, { ...resultItem }, resultItem.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> = ({ result }) => {
+  if (result.length === 0) return null
+
+  return (
+    <RatafiaResultCardListStyled className='ratafia-result-card-list'>
+      {result.map((resultItem) => (
+        <RatafiaResultCard key={resultItem.id} {...resultItem} />
+      ))}
+    </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 {
+    result: 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 {
+  result: 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/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;
+    }
+  }
+`

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

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { type RatafiaLoadingResultContentProps } from './RatafiaLoadingResultContentProps.types'
+import { RatafiaLoadingResultContentStyled } from './RatafiaLoadingResultContent.styled'
+
+export const RatafiaLoadingResultContent: React.FC<RatafiaLoadingResultContentProps> = ({
+  documentName,
+  icon,
+  text
+}) => {
+  return (
+    <RatafiaLoadingResultContentStyled>
+      <h2 className='sans-serif --bold-weight ratafia-result-loading-content__document-name'>{documentName}</h2>
+      <div className='ratafia-result-loading-content__animation-wrapper'>
+        <div className='ratafia-result-loading-content__animation-wrapper__animation animation-1'>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-1'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-6'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-2'></div>
+        </div>
+        <div className='ratafia-result-loading-content__animation-wrapper__animation animation-2'>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-3'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-4'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-5'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-6'></div>
+        </div>
+        <div className='ratafia-result-loading-content__animation-wrapper__animation animation-3'>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-1'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-7'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-4'></div>
+        </div>
+        <div className='ratafia-result-loading-content__animation-wrapper__animation animation-4'>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-3'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-8'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-2'></div>
+          <div className='ratafia-result-loading-content__animation-wrapper__animation__loader item-6'></div>
+        </div>
+      </div>
+      <div className='ratafia-result-loading-content__message'>
+        <div className='ratafia-result-loading-content__message__icon'>{icon}</div>
+        <span className='sans-serif --medium ratafia-result-loading-content__message__text'>{text}</span>
+      </div>
+    </RatafiaLoadingResultContentStyled>
+  )
+}
+
+export default RatafiaLoadingResultContent