@npm_leadtech/legal-lib-components 7.45.0 → 7.45.1

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

@@ -0,0 +1,11 @@
+import { MobileTriggerProps } from './MobileTriggerProps'
+import { MobileTriggerStyled } from './MobileTrigger.styled'
+import React from 'react'
+
+export const MobileTrigger: React.FC<MobileTriggerProps> = ({ onClick, isActive, imageUrl, altText }) => {
+  return (
+    <MobileTriggerStyled onClick={onClick} isActive={isActive}>
+      <img src={imageUrl} alt={altText} />
+    </MobileTriggerStyled>
+  )
+}

package/dist/src/components/atoms/MobileTrigger/MobileTriggerProps.d.ts

@@ -0,0 +1,6 @@
+export interface MobileTriggerProps {
+    onClick: () => void;
+    isActive: boolean;
+    imageUrl: string;
+    altText: string;
+}

package/dist/src/components/atoms/MobileTrigger/MobileTriggerProps.ts

@@ -0,0 +1,6 @@
+export interface MobileTriggerProps {
+  onClick: () => void
+  isActive: boolean
+  imageUrl: string
+  altText: string
+}

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

@@ -0,0 +1,2 @@
+export * from './MobileTrigger';
+export * from './MobileTriggerProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileTrigger';
+export * from './MobileTriggerProps';

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

@@ -0,0 +1,2 @@
+export * from './MobileTrigger'
+export * from './MobileTriggerProps'

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

@@ -0,0 +1,3 @@
+import { PhoneNumberDisplayProps } from './PhoneNumberDisplayProps';
+import React from 'react';
+export declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon';
+import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled';
+export const PhoneNumberDisplay = ({ phoneNumber }) => {
+    return (_jsxs(PhoneNumberDisplayStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("p", { children: _jsx("strong", { children: phoneNumber }) })] }));
+};

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

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export const PhoneNumberDisplayStyled = styled.nav `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  p {
+    margin: 0;
+  }
+  border-right: 1px solid var(--neutral-neutral-3);
+  padding-right: 2rem;
+  height: 2.5rem;
+  @media (min-width: 721px) and (max-width: 849px) {
+    padding-right: 0;
+    border-right: none;
+  }
+`;

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const PhoneNumberDisplayStyled = styled.nav`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--neutral-neutral-2);
+  p {
+    margin: 0;
+  }
+  border-right: 1px solid var(--neutral-neutral-3);
+  padding-right: 2rem;
+  height: 2.5rem;
+  @media (min-width: 721px) and (max-width: 849px) {
+    padding-right: 0;
+    border-right: none;
+  }
+`

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

@@ -0,0 +1,15 @@
+import { PhoneIcon } from './../../../../images/componentsSvg/PhoneIcon'
+import { PhoneNumberDisplayProps } from './PhoneNumberDisplayProps'
+import { PhoneNumberDisplayStyled } from './PhoneNumberDisplay.styled'
+import React from 'react'
+
+export const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ phoneNumber }) => {
+  return (
+    <PhoneNumberDisplayStyled>
+      <PhoneIcon width={16} height={16} fill='#6d7275' />
+      <p>
+        <strong>{phoneNumber}</strong>
+      </p>
+    </PhoneNumberDisplayStyled>
+  )
+}

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.d.ts

@@ -0,0 +1,3 @@
+export interface PhoneNumberDisplayProps {
+    phoneNumber?: string;
+}

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.js

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

package/dist/src/components/atoms/PhoneNumberDisplay/PhoneNumberDisplayProps.ts

@@ -0,0 +1,3 @@
+export interface PhoneNumberDisplayProps {
+  phoneNumber?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay';
+export * from './PhoneNumberDisplayProps';

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

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay';
+export * from './PhoneNumberDisplayProps';

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

@@ -0,0 +1,2 @@
+export * from './PhoneNumberDisplay'
+export * from './PhoneNumberDisplayProps'

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

@@ -25,6 +25,10 @@ export const PopularDocsItemStyled = styled.a `
     margin-left: 0.5rem;
   }
 
+  @media ${device.mobile} {
+    gap: 1rem;
+  }
+
   .category-icon svg {
     fill: var(--primary-main-dark-1);
   }
@@ -45,6 +49,11 @@ export const PopularDocsItemStyled = styled.a `
       line-height: 1.33;
       margin-top: 0.3rem;
     }
+    media ${device.mobile} {
+      strong {
+        font-size: 0.9rem;
+      }
+    }
   }
 
   .icon-left svg {

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

@@ -26,6 +26,10 @@ export const PopularDocsItemStyled = styled.a`
     margin-left: 0.5rem;
   }
 
+  @media ${device.mobile} {
+    gap: 1rem;
+  }
+
   .category-icon svg {
     fill: var(--primary-main-dark-1);
   }
@@ -46,6 +50,11 @@ export const PopularDocsItemStyled = styled.a`
       line-height: 1.33;
       margin-top: 0.3rem;
     }
+    media ${device.mobile} {
+      strong {
+        font-size: 0.9rem;
+      }
+    }
   }
 
   .icon-left svg {

package/dist/src/components/atoms/Radio/Radio.scss

@@ -243,7 +243,7 @@
   .label {
     color: var(--neutral-neutral-1);
     display: block;
-    margin-bottom: 1rem;
+    margin: 1rem 0;
   }
 
   &.default {
@@ -255,6 +255,7 @@
   }
 
   &.tabs {
+    margin-top: 1rem;
     @include tabsStyles;
   }
 

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss

@@ -1,6 +1,7 @@
 .ratafia-landing-icon {
-  padding: 0.25rem 0.5rem;
+  padding: 1px 4px;
   border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-1);
   background: var(--secondary-main-light-3);
+  font-size: 12px;
 }

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, reviewFeedBackTextDataQa = 'lawgenius_review_feedback_text', 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', "data-qa": reviewFeedBackTextDataQa, 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);
+          }
+        }
+      }
+    }
+  }
+`