@npm_leadtech/legal-lib-components 5.74.1 → 5.76.0

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaResultCardStyled } from './RatafiaResultCard.styled';
+export const RatafiaResultCard = ({ title, content }) => {
+    return (_jsxs(RatafiaResultCardStyled, { className: 'ratafia-result-item', children: [_jsxs("div", { className: 'ratafia-result-item__wrapper', children: [_jsx("p", { className: 'sans-serif --medium --bold-weight ratafia-result-item__wrapper__title', children: title }), _jsx("p", { className: 'sans-serif --medium ratafia-result-item__wrapper__content', children: content })] }), _jsx("span", { className: 'ratafia-result-item__divider' })] }));
+};
+export default RatafiaResultCard;

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCard.styled.d.ts

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

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+export const RatafiaResultCardStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .ratafia-result-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: var(--global-gap);
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`;

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+export const RatafiaResultCardStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+
+  background: var(--neutral-neutral-6);
+
+  .ratafia-result-item {
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+
+      margin-bottom: 1rem;
+      gap: var(--global-gap);
+
+      &__title {
+        color: var(--neutral-neutral-1);
+        background: var(--neutral-neutral-6);
+        position: sticky;
+        top: 0;
+
+        margin-top: 1rem;
+      }
+
+      &__content {
+        color: var(--neutral-neutral-1);
+        overflow-y: auto;
+      }
+    }
+    &__divider {
+      height: 1px;
+      align-self: stretch;
+      background: var(--neutral-neutral-4);
+    }
+  }
+`

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { type RatafiaResultCardProps } from './RatafiaResultCardProps.types'
+import { RatafiaResultCardStyled } from './RatafiaResultCard.styled'
+
+export const RatafiaResultCard: React.FC<RatafiaResultCardProps> = ({ title, content }) => {
+  return (
+    <RatafiaResultCardStyled className='ratafia-result-item'>
+      <div className='ratafia-result-item__wrapper'>
+        <p className='sans-serif --medium --bold-weight ratafia-result-item__wrapper__title'>{title}</p>
+        <p className='sans-serif --medium ratafia-result-item__wrapper__content'>{content}</p>
+      </div>
+      <span className='ratafia-result-item__divider'></span>
+    </RatafiaResultCardStyled>
+  )
+}
+
+export default RatafiaResultCard

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCardProps.types.d.ts

@@ -0,0 +1,5 @@
+export interface RatafiaResultCardProps {
+    id: string;
+    title: string;
+    content: string;
+}

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCardProps.types.js

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

package/dist/src/components/atoms/RatafiaResultCard/RatafiaResultCardProps.types.ts

@@ -0,0 +1,5 @@
+export interface RatafiaResultCardProps {
+  id: string
+  title: string
+  content: string
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaResultTabStyled } from './RatafiaResultTab.styled';
+const RatafiaResultTab = ({ title, icon, activeIcon, isActive, handleOnClick, dataQa }) => {
+    return (_jsxs(RatafiaResultTabStyled, { className: `ratafia-result-tab${isActive ? ' --is-active' : ''}`, onClick: handleOnClick, "data-qa": dataQa, children: [isActive ? (_jsx(_Fragment, { children: icon !== null && _jsx("div", { className: 'ratafia-result-tab__icon', children: activeIcon }) })) : (_jsx(_Fragment, { children: icon !== null && _jsx("div", { className: 'ratafia-result-tab__icon', children: icon }) })), _jsx("p", { className: 'sans-serif --medium ratafia-result-tab__title', children: title })] }));
+};
+export default RatafiaResultTab;

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTab.styled.d.ts

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

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+export const RatafiaResultTabStyled = styled.div `
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1 0 0;
+
+  border-radius: var(--s-border-radius);
+  background: var(--neutral-neutral-6);
+
+  cursor: default;
+  .ratafia-result-tab {
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
+    }
+  }
+  &:hover {
+    background: var(--neutral-neutral-4);
+  }
+  &.--is-active {
+    background: var(--primary-main-light-4);
+    .ratafia-result-tab {
+      &__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const RatafiaResultTabStyled = styled.div`
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1 0 0;
+
+  border-radius: var(--s-border-radius);
+  background: var(--neutral-neutral-6);
+
+  cursor: default;
+  .ratafia-result-tab {
+    &__icon {
+      width: 20px;
+      height: 20px;
+    }
+    &__title {
+      color: var(--neutral-neutral-2);
+      font-feature-settings:
+        'liga' off,
+        'clig' off;
+    }
+  }
+  &:hover {
+    background: var(--neutral-neutral-4);
+  }
+  &.--is-active {
+    background: var(--primary-main-light-4);
+    .ratafia-result-tab {
+      &__title {
+        color: var(--primary-main-dark-1);
+        font-weight: bold;
+      }
+    }
+  }
+`

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { RatafiaResultTabProps } from './RatafiaResultTabProps.types'
+import { RatafiaResultTabStyled } from './RatafiaResultTab.styled'
+
+const RatafiaResultTab: FC<RatafiaResultTabProps> = ({ title, icon, activeIcon, isActive, handleOnClick, dataQa }) => {
+  return (
+    <RatafiaResultTabStyled
+      className={`ratafia-result-tab${isActive ? ' --is-active' : ''}`}
+      onClick={handleOnClick}
+      data-qa={dataQa}
+    >
+      {isActive ? (
+        <>{icon !== null && <div className='ratafia-result-tab__icon'>{activeIcon}</div>}</>
+      ) : (
+        <>{icon !== null && <div className='ratafia-result-tab__icon'>{icon}</div>}</>
+      )}
+      <p className='sans-serif --medium ratafia-result-tab__title'>{title}</p>
+    </RatafiaResultTabStyled>
+  )
+}
+
+export default RatafiaResultTab

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.d.ts

@@ -0,0 +1,9 @@
+export interface RatafiaResultTabProps {
+    id: string;
+    title: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    isActive: boolean;
+    handleOnClick?: () => void;
+    dataQa: string;
+}

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.js

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

package/dist/src/components/atoms/RatafiaResultTab/RatafiaResultTabProps.types.ts

@@ -0,0 +1,9 @@
+export interface RatafiaResultTabProps {
+  id: string
+  title: string
+  icon?: React.ReactNode
+  activeIcon?: React.ReactNode
+  isActive: boolean
+  handleOnClick?: () => void
+  dataQa: string
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RatafiaReviewResultStyled } from './RatafiaReviewResult.styled';
+export const RatafiaReviewResult = ({ reviewQuestion, reviewPositiveIcon, reviewPositiveText, handleOnClickReviewPositive, reviewPositiveDataQa = true, reviewNegativeIcon, reviewNegativeText, handleOnClickReviewNegative, reviewNegativeDataQa, reviewFeedbackText, review }) => {
+    return (_jsx(RatafiaReviewResultStyled, { className: 'ratafia-review-result', children: review === null ? (_jsxs("div", { className: 'ratafia-review-result__review', children: [_jsx("p", { className: 'sans-serif ratafia-review-result__review__question', children: reviewQuestion }), _jsxs("div", { className: 'ratafia-review-result__review__buttons', children: [_jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewPositive, "data-qa": reviewPositiveDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewPositiveIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text positive', children: reviewPositiveText })] }), _jsxs("button", { className: 'ratafia-review-result__review__buttons__item', onClick: handleOnClickReviewNegative, "data-qa": reviewNegativeDataQa, children: [_jsx("div", { className: 'ratafia-review-result__review__buttons__item__icon', children: reviewNegativeIcon }), _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__buttons__item__text negative', children: reviewNegativeText })] })] })] })) : (_jsx("div", { className: 'ratafia-review-result__review', children: _jsx("p", { className: 'sans-serif --small ratafia-review-result__review__question', children: reviewFeedbackText }) })) }));
+};
+export default RatafiaReviewResult;

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

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

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

@@ -0,0 +1,55 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const RatafiaReviewResultStyled = styled.section `
+  .ratafia-review-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: var(--global-gap);
+
+      border-radius: var(--s-border-radius);
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: var(--s-border-radius);
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,56 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const RatafiaReviewResultStyled = styled.section`
+  .ratafia-review-result {
+    &__review {
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      gap: var(--global-gap);
+
+      border-radius: var(--s-border-radius);
+      background: var(--others-white);
+
+      &__question {
+        color: var(--neutral-neutral-1);
+        font-size: 0.75rem;
+        @media ${device['portrait-tablets']} {
+          font-size: 0.875rem;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        &__item {
+          display: flex;
+          padding: 0.25rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          flex: 1 0 0;
+
+          border: none;
+          border-radius: var(--s-border-radius);
+          background: var(--neutral-neutral-6);
+
+          cursor: pointer;
+
+          &__icon {
+            width: 14px;
+          }
+          .positive {
+            color: var(--primary-main);
+          }
+          .negative {
+            color: var(--error-main);
+          }
+        }
+      }
+    }
+  }
+`

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

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { type RatafiaReviewResultProps } from './RatafiaReviewResultProps.types'
+import { RatafiaReviewResultStyled } from './RatafiaReviewResult.styled'
+
+export const RatafiaReviewResult: React.FC<RatafiaReviewResultProps> = ({
+  reviewQuestion,
+  reviewPositiveIcon,
+  reviewPositiveText,
+  handleOnClickReviewPositive,
+  reviewPositiveDataQa = true,
+  reviewNegativeIcon,
+  reviewNegativeText,
+  handleOnClickReviewNegative,
+  reviewNegativeDataQa,
+  reviewFeedbackText,
+  review
+}) => {
+  return (
+    <RatafiaReviewResultStyled className='ratafia-review-result'>
+      {review === null ? (
+        <div className='ratafia-review-result__review'>
+          <p className='sans-serif ratafia-review-result__review__question'>{reviewQuestion}</p>
+          <div className='ratafia-review-result__review__buttons'>
+            <button
+              className='ratafia-review-result__review__buttons__item'
+              onClick={handleOnClickReviewPositive}
+              data-qa={reviewPositiveDataQa}
+            >
+              <div className='ratafia-review-result__review__buttons__item__icon'>{reviewPositiveIcon}</div>
+              <p className='sans-serif --small ratafia-review-result__review__buttons__item__text positive'>
+                {reviewPositiveText}
+              </p>
+            </button>
+            <button
+              className='ratafia-review-result__review__buttons__item'
+              onClick={handleOnClickReviewNegative}
+              data-qa={reviewNegativeDataQa}
+            >
+              <div className='ratafia-review-result__review__buttons__item__icon'>{reviewNegativeIcon}</div>
+              <p className='sans-serif --small ratafia-review-result__review__buttons__item__text negative'>
+                {reviewNegativeText}
+              </p>
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className='ratafia-review-result__review'>
+          <p className='sans-serif --small ratafia-review-result__review__question'>{reviewFeedbackText}</p>
+        </div>
+      )}
+    </RatafiaReviewResultStyled>
+  )
+}
+
+export default RatafiaReviewResult

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

@@ -0,0 +1,14 @@
+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/RatafiaReviewResultProps.types.js

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

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: max(calc(100vh - 24.5rem), 15rem);
+  @media ${device['portrait-tablets']} {
+    height: max(calc(100vh - 33.5rem), 15rem);
+  }
+  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: max(calc(100vh - 24.5rem), 15rem);
+  @media ${device['portrait-tablets']} {
+    height: max(calc(100vh - 33.5rem), 15rem);
+  }
+  overflow-y: auto;
+`