@npm_leadtech/legal-lib-components 7.82.52 → 7.83.1

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/PlanCard/PlanCard.d.ts

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Benefit, BenefitsList, Divider, PlanCardContainer, PlanTitle, Price, PriceLabel, PricingInfo } from './PlanCard.styled';
+import { Button } from '../Button';
+export const PlanCard = ({ plan, onSelect, isRedirectingToPayment }) => {
+    return (_jsxs(PlanCardContainer, { children: [_jsx(PlanTitle, { className: plan?.highlightPlan ? 'highlight' : 'asdfasdf', children: plan?.subscription_type?.name }), _jsxs(PricingInfo, { children: [_jsx(Price, { children: plan?.pricing }), _jsx(PriceLabel, { children: plan?.pricingLabel })] }), _jsx(Button, { label: plan?.buttonText ?? '', dataQa: `${plan?.subscription_type?.name.replaceAll(' ', '')}-button`, noLink: true, onClick: () => onSelect?.(plan?.subscription_type?.sku ?? ''), givenClass: 'pricing-plan__button', color: plan?.highlightPlan ? 'primary' : 'transparent', disabled: isRedirectingToPayment }), _jsx(Divider, {}), _jsx(BenefitsList, { children: plan?.benefits?.map((item) => (_jsxs(Benefit, { className: item?.type == 'default' ? 'default' : 'ai-benefit', children: [item?.icon, _jsx("p", { className: 'benefit-text', dangerouslySetInnerHTML: { __html: item?.benefit } })] }, item?.benefit))) })] }));
+};

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

@@ -0,0 +1,8 @@
+export declare const PlanCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PlanTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const PricingInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PriceLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const BenefitsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const Benefit: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+export const PlanCardContainer = styled.div `
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`;
+export const PlanTitle = styled.span `
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`;
+export const PricingInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Price = styled.h4 `
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`;
+export const PriceLabel = styled.span `
+  font-size: 14px;
+`;
+export const Divider = styled.hr `
+  border: 1px solid var(--neutral-neutral-4);
+  width: 100%;
+`;
+export const BenefitsList = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+export const Benefit = styled.li `
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  .benefit-text {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`;

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+
+export const PlanCardContainer = styled.div`
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`
+
+export const PlanTitle = styled.span`
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`
+
+export const PricingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const Price = styled.h4`
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`
+
+export const PriceLabel = styled.span`
+  font-size: 14px;
+`
+
+export const Divider = styled.hr`
+  border: 1px solid var(--neutral-neutral-4);
+  width: 100%;
+`
+
+export const BenefitsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`
+
+export const Benefit = styled.li`
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  .benefit-text {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`

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

@@ -0,0 +1,43 @@
+import {
+  Benefit,
+  BenefitsList,
+  Divider,
+  PlanCardContainer,
+  PlanTitle,
+  Price,
+  PriceLabel,
+  PricingInfo
+} from './PlanCard.styled'
+import { Button } from '../Button'
+import { PlanCardProps } from './PlanCardProps'
+import React from 'react'
+
+export const PlanCard: React.FC<PlanCardProps> = ({ plan, onSelect, isRedirectingToPayment }) => {
+  return (
+    <PlanCardContainer>
+      <PlanTitle className={plan?.highlightPlan ? 'highlight' : 'asdfasdf'}>{plan?.subscription_type?.name}</PlanTitle>
+      <PricingInfo>
+        <Price>{plan?.pricing}</Price>
+        <PriceLabel>{plan?.pricingLabel}</PriceLabel>
+      </PricingInfo>
+      <Button
+        label={plan?.buttonText ?? ''}
+        dataQa={`${plan?.subscription_type?.name.replaceAll(' ', '')}-button`}
+        noLink
+        onClick={() => onSelect?.(plan?.subscription_type?.sku ?? '')}
+        givenClass='pricing-plan__button'
+        color={plan?.highlightPlan ? 'primary' : 'transparent'}
+        disabled={isRedirectingToPayment}
+      />
+      <Divider />
+      <BenefitsList>
+        {plan?.benefits?.map((item) => (
+          <Benefit key={item?.benefit} className={item?.type == 'default' ? 'default' : 'ai-benefit'}>
+            {item?.icon}
+            <p className='benefit-text' dangerouslySetInnerHTML={{ __html: item?.benefit }}></p>
+          </Benefit>
+        ))}
+      </BenefitsList>
+    </PlanCardContainer>
+  )
+}

package/dist/src/components/atoms/PlanCard/PlanCardProps.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface PlanCardProps {
+    plan: SubscriptionPlan;
+    onSelect?: (sku: string) => void;
+    isRedirectingToPayment?: boolean;
+}
+export interface SubscriptionPlan {
+    benefits?: Benefit[];
+    pricing?: string;
+    pricingLabel?: string;
+    buttonText?: string;
+    highlightPlan?: boolean;
+    subscription_type?: SubscriptionType;
+}
+interface Benefit {
+    type: 'default' | 'lawgenius';
+    benefit: string;
+    icon: ReactNode;
+}
+interface SubscriptionType {
+    name: string;
+    sku: string;
+}
+export {};

package/dist/src/components/atoms/PlanCard/PlanCardProps.js

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

package/dist/src/components/atoms/PlanCard/PlanCardProps.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+
+export interface PlanCardProps {
+  plan: SubscriptionPlan
+  onSelect?: (sku: string) => void
+  isRedirectingToPayment?: boolean
+}
+
+export interface SubscriptionPlan {
+  benefits?: Benefit[]
+  pricing?: string
+  pricingLabel?: string
+  buttonText?: string
+  highlightPlan?: boolean
+  subscription_type?: SubscriptionType
+}
+
+interface Benefit {
+  type: 'default' | 'lawgenius'
+  benefit: string
+  icon: ReactNode
+}
+
+interface SubscriptionType {
+  name: string
+  sku: string
+}

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

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

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

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

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

@@ -0,0 +1,2 @@
+export * from './PlanCard'
+export * from './PlanCardProps'

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

@@ -41,7 +41,7 @@
       display: flex;
       height: 42px;
       justify-content: center;
-      width: 80px;
+      min-width: 80px;
 
       &:hover {
         background: var(--neutral-neutral-4);
@@ -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.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type RatafiaLandingIconProps } from './RatafiaLandingIconProps.types';
 import './RatafiaLandingIcon.scss';
-declare const RatafiaLandingIcon: React.FC;
+declare const RatafiaLandingIcon: React.FC<RatafiaLandingIconProps>;
 export default RatafiaLandingIcon;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './RatafiaLandingIcon.scss';
-const RatafiaLandingIcon = () => {
-    return _jsx("span", { className: 'ratafia-landing-icon sans-serif --bold-weight', children: "AI" });
+const RatafiaLandingIcon = ({ aiLabel }) => {
+    return _jsx("span", { className: 'ratafia-landing-icon sans-serif --bold-weight', children: aiLabel });
 };
 export default RatafiaLandingIcon;

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/RatafiaLandingIcon/RatafiaLandingIcon.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
+import { type RatafiaLandingIconProps } from './RatafiaLandingIconProps.types'
 import './RatafiaLandingIcon.scss'
 
-const RatafiaLandingIcon: React.FC = () => {
-  return <span className={'ratafia-landing-icon sans-serif --bold-weight'}>AI</span>
+const RatafiaLandingIcon: React.FC<RatafiaLandingIconProps> = ({ aiLabel }) => {
+  return <span className={'ratafia-landing-icon sans-serif --bold-weight'}>{aiLabel}</span>
 }
 
 export default RatafiaLandingIcon

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIconProps.types.d.ts

@@ -0,0 +1,3 @@
+export interface RatafiaLandingIconProps {
+    aiLabel: string;
+}

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIconProps.types.js

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

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIconProps.types.ts

@@ -0,0 +1,3 @@
+export interface RatafiaLandingIconProps {
+  aiLabel: string
+}

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

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
@@ -23,6 +25,7 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
 };
 const SearchSelect = (props) => {
     const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
+    const [menuPortalTarget, setMenuPortalTarget] = useState();
     const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
     const defaultValue = props.defaultValue;
     const classnames = classNames({
@@ -31,6 +34,9 @@ const SearchSelect = (props) => {
         [customClass]: props.customClass,
         '--group-invalid': !props.isValidGroup
     });
+    useEffect(() => {
+        setMenuPortalTarget(document.body);
+    }, []);
     const handleChange = (selectedOption) => {
         const selectObject = {
             target: {
@@ -49,7 +55,8 @@ const SearchSelect = (props) => {
                                     boxShadow: state.isFocused ? '0 0 0 1px var(--primary-main) !important' : '',
                                     borderStyle: state.isFocused ? 'solid' : 'initial'
                                 };
-                            }
-                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
+                            },
+                            menuPortal: (base) => ({ ...base, zIndex: 9999 })
+                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
 };
 export default SearchSelect;

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

@@ -152,7 +152,7 @@ export const SearchSelectStyled = styled.div `
         display: flex;
         align-content: center;
         position: absolute;
-        bottom: 0;
+        bottom: -12px;
         margin-top: 0.5rem;
         color: var(--error-main);
 

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

@@ -153,7 +153,7 @@ export const SearchSelectStyled = styled.div`
         display: flex;
         align-content: center;
         position: absolute;
-        bottom: 0;
+        bottom: -12px;
         margin-top: 0.5rem;
         color: var(--error-main);
 

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, { type FC } from 'react'
+import React, { type FC, useEffect, useState } from 'react'
 import Select from 'react-select'
 
 import { type SearchSelectProps } from './SearchSelectProps.types'
@@ -28,6 +28,7 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
 
 const SearchSelect: FC<SearchSelectProps> = (props) => {
   const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
+  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
   const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
   const defaultValue = props.defaultValue as unknown as string
 
@@ -38,6 +39,10 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     '--group-invalid': !props.isValidGroup
   })
 
+  useEffect(() => {
+    setMenuPortalTarget(document.body)
+  }, [])
+
   const handleChange = (selectedOption): void => {
     const selectObject = {
       target: {
@@ -77,7 +82,8 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
                 boxShadow: state.isFocused ? '0 0 0 1px var(--primary-main) !important' : '',
                 borderStyle: state.isFocused ? 'solid' : 'initial'
               }
-            }
+            },
+            menuPortal: (base) => ({ ...base, zIndex: 9999 })
           }}
           id={props.name}
           name={props.name}
@@ -89,6 +95,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           options={sortedItems}
           escapeClearsValue={true}
           isClearable={true}
+          menuPortalTarget={menuPortalTarget}
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { MenuItems } from '../MenuItems';
+import { MenuItemsDeprecated } from '../MenuItemsDeprecated';
 import { SidemenuTabStyled } from './SidemenuTab.styled';
 import { Tooltip } from '../Tooltip';
 const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) => {
@@ -12,6 +12,6 @@ const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) =
     if (menu === undefined || menu?.lenght === 0) {
         return renderTab();
     }
-    return (_jsx(Tooltip, { content: _jsx(MenuItems, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
+    return (_jsx(Tooltip, { content: _jsx(MenuItemsDeprecated, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
 };
 export default SidemenuTab;

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import { MenuItems } from '../MenuItems'
+import { MenuItemsDeprecated } from '../MenuItemsDeprecated'
 import { type SideMenuTabProps } from './SideMenuTabProps.types'
 import { SidemenuTabStyled } from './SidemenuTab.styled'
 import { Tooltip } from '../Tooltip'
@@ -26,7 +26,7 @@ const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, i
   }
 
   return (
-    <Tooltip content={<MenuItems list={menu} />} interactive trigger='click'>
+    <Tooltip content={<MenuItemsDeprecated list={menu} />} interactive trigger='click'>
       {renderTab()}
     </Tooltip>
   )

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor';
 import { StepRatafiaCardStyled } from './StepRatafiaCard.styled';
 export const StepRatafiaCard = ({ title, icon, description }) => {
-    return (_jsxs(StepRatafiaCardStyled, { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon !== null && _jsx("div", { className: 'step-ratafia-card__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
+    return (_jsxs(StepRatafiaCardStyled, { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon && _jsx(IconSvgURLWithThemeColor, { url: icon, height: '20', width: '20' }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
 };
 export default StepRatafiaCard;

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

@@ -18,11 +18,6 @@ export const StepRatafiaCardStyled = styled.div `
       align-self: stretch;
 
       color: var(--neutral-neutral-1);
-
-      &__icon {
-        width: 20px;
-        height: 20px;
-      }
     }
   }
 `;

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

@@ -19,11 +19,6 @@ export const StepRatafiaCardStyled = styled.div`
       align-self: stretch;
 
       color: var(--neutral-neutral-1);
-
-      &__icon {
-        width: 20px;
-        height: 20px;
-      }
     }
   }
 `

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

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor'
 import { type StepRatafiaCardProps } from './StepRatafiaCardProps.types'
 import { StepRatafiaCardStyled } from './StepRatafiaCard.styled'
 
@@ -7,7 +8,7 @@ export const StepRatafiaCard: React.FC<StepRatafiaCardProps> = ({ title, icon, d
   return (
     <StepRatafiaCardStyled className='step-ratafia-card'>
       <div className='step-ratafia-card__title'>
-        {icon !== null && <div className='step-ratafia-card__title__icon'>{icon}</div>}
+        {icon && <IconSvgURLWithThemeColor url={icon} height='20' width='20' />}
         <h3 className='sans-serif --medium --bold-weight step-ratafia-card__title__text'>{title}</h3>
       </div>
       <p className='sans-serif --small step-ratafia-card__description'>{description}</p>

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCardProps.types.d.ts

@@ -1,6 +1,6 @@
 export interface StepRatafiaCardProps {
     id: string;
     title: string;
-    icon?: React.ReactNode;
+    icon?: string;
     description: string;
 }

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCardProps.types.ts

@@ -1,6 +1,6 @@
 export interface StepRatafiaCardProps {
   id: string
   title: string
-  icon?: React.ReactNode
+  icon?: string
   description: string
 }