@npm_leadtech/legal-lib-components 7.5.1 → 7.5.2

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

@@ -0,0 +1,61 @@
+import React, { FC, ReactNode } from 'react'
+
+import { BenefitProps, RatafiaSubscriptionCardProps } from './RatafiaSubscriptionCardProps.types'
+import { Button, IconSvgURLWithThemeColor, RichTextStrapi } from '../../atoms'
+import { RatafiaSubscriptionCardStyled } from './RatafiaSubscriptionCard.styled'
+import { stringSlugify } from '../../../utils/stringSlugify'
+
+const RatafiaSubscriptionCard: FC<RatafiaSubscriptionCardProps> = ({
+  cardStyle = 'primary',
+  iconTitle,
+  title,
+  priceText,
+  mainFeatures,
+  AIFeatures,
+  buttonText,
+  dataQa,
+  handleClick
+}) => {
+  if (!title) return null
+  const buttonStyle = cardStyle === 'Secondary' ? 'primary3' : 'primary'
+  const renderFeatures = (features: BenefitProps[], className?: string): ReactNode =>
+    features.map((feature) => (
+      <div key={feature.title} className={`ratafia-card__feature ${className ?? ''}`}>
+        {feature.image?.url && <IconSvgURLWithThemeColor url={feature.image.url} height='16' width='16' />}
+        <RichTextStrapi html={feature.title} />
+      </div>
+    ))
+
+  return (
+    <RatafiaSubscriptionCardStyled className={`ratafia-card ${cardStyle ? stringSlugify(cardStyle) : 'primary'}`}>
+      <div className='ratafia-card__header'>
+        {title && (
+          <div className='ratafia-card__title'>
+            {iconTitle?.url && <IconSvgURLWithThemeColor url={iconTitle.url} height='26' width='26' />}
+            <RichTextStrapi html={title} />
+          </div>
+        )}
+        {priceText && <div className='ratafia-card__price-text'>{priceText}</div>}
+      </div>
+      <hr />
+      <div className='ratafia-card__body'>
+        {mainFeatures && renderFeatures(mainFeatures as unknown as BenefitProps[], 'main-feature')}
+        {AIFeatures && renderFeatures(AIFeatures as unknown as BenefitProps[], 'ratafia-feature')}
+      </div>
+      {buttonText && (
+        <div className='ratafia-card__footer'>
+          <Button
+            dataQa={`${dataQa ?? 'ratafia-card-button'}`}
+            givenClass='ratafia-card__button'
+            color={buttonStyle}
+            label={buttonText}
+            noLink
+            onClick={handleClick}
+          />
+        </div>
+      )}
+    </RatafiaSubscriptionCardStyled>
+  )
+}
+
+export default RatafiaSubscriptionCard

package/dist/src/components/molecules/{SubscriptionCard/RatafiaSubscriptionCard → RatafiaSubscriptionCard}/RatafiaSubscriptionCardProps.types.d.ts

@@ -4,7 +4,8 @@ export interface RatafiaSubscriptionCardProps {
     iconTitle?: IconTitleProps;
     title?: string;
     priceText?: string;
-    features?: FeatureProps[];
+    mainFeatures?: BenefitProps[];
+    AIFeatures?: BenefitProps[];
     buttonText?: string;
     dataQa?: string;
     handleClick?: () => void;
@@ -13,10 +14,9 @@ interface IconTitleProps {
     name?: string;
     url: string;
 }
-export interface FeatureProps {
+export interface BenefitProps {
     title?: string;
     description: string;
-    isHighlighted: boolean;
     image?: {
         name: string;
         url: string;

package/dist/src/components/molecules/{SubscriptionCard/RatafiaSubscriptionCard → RatafiaSubscriptionCard}/RatafiaSubscriptionCardProps.types.ts

@@ -4,7 +4,8 @@ export interface RatafiaSubscriptionCardProps {
   iconTitle?: IconTitleProps
   title?: string
   priceText?: string
-  features?: FeatureProps[]
+  mainFeatures?: BenefitProps[]
+  AIFeatures?: BenefitProps[]
   buttonText?: string
   dataQa?: string
   handleClick?: () => void
@@ -15,10 +16,9 @@ interface IconTitleProps {
   url: string
 }
 
-export interface FeatureProps {
+export interface BenefitProps {
   title?: string
   description: string
-  isHighlighted: boolean
   image?: {
     name: string
     url: string

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

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

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

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

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

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

package/dist/src/components/molecules/TextInput/Input.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 interface InputProps {
     name: string;
     placeholder: string;
-    prefix: string;
     maxLength: number;
     value: string;
     type: 'password' | 'text' | 'number' | 'tel';
@@ -13,7 +12,6 @@ interface InputProps {
     onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    country: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/components/molecules/TextInput/Input.js

@@ -1,36 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import currencyEuro from '../../../../images/svg/currencyDE.svg';
-import currencyOthers from '../../../../images/svg/currencyUS.svg';
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
 import eyeIcon from '../../../../images/svg/eye-24-px.svg';
-import percent from '../../../../images/svg/percent.svg';
-export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix }, ref) => {
+export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength }, ref) => {
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
             setHidden(!hidden);
     };
-    const isCurrency = prefix === 'currency';
-    const isPercent = prefix === 'percent';
-    const euro = country === 'DE';
-    const otherCurrency = country !== 'DE';
-    let finalClassName = className;
-    if (isCurrency && otherCurrency) {
-        finalClassName += ' has-currency-prefix';
-    }
-    else if (isCurrency && euro) {
-        finalClassName += ' has-currency-suffix';
-    }
-    else if (isPercent) {
-        finalClassName += ' has-percent-suffix';
-    }
-    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("img", { src: currencyOthers, alt: 'currency' }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: finalClassName, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: className, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
                     if (e.key === 'Enter')
                         showPassword();
-                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency
-                ? !!prefix &&
-                    euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currencyEuro, alt: 'currency' }) }))
-                : isPercent && (_jsx("div", { className: 'input-icon-percent-suffix', children: _jsx("img", { src: percent, alt: 'percent' }) }))] }));
+                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) }))] }));
 });
 Input.displayName = 'Input';

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -1,15 +1,11 @@
 import React, { useState } from 'react'
 
-import currencyEuro from '../../../../images/svg/currencyDE.svg'
-import currencyOthers from '../../../../images/svg/currencyUS.svg'
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
-import percent from '../../../../images/svg/percent.svg'
 
 interface InputProps {
   name: string
   placeholder: string
-  prefix: string
   maxLength: number
   value: string
   type: 'password' | 'text' | 'number' | 'tel'
@@ -20,7 +16,6 @@ interface InputProps {
   onBlur: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  country: string
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -37,9 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onKeyUp,
       disabled,
       type = 'text',
-      maxLength,
-      country,
-      prefix
+      maxLength
     }: InputProps,
     ref
   ) => {
@@ -49,33 +42,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       if (value !== null) setHidden(!hidden)
     }
 
-    const isCurrency = prefix === 'currency'
-    const isPercent = prefix === 'percent'
-    const euro = country === 'DE'
-    const otherCurrency = country !== 'DE'
-
-    let finalClassName = className
-
-    if (isCurrency && otherCurrency) {
-      finalClassName += ' has-currency-prefix'
-    } else if (isCurrency && euro) {
-      finalClassName += ' has-currency-suffix'
-    } else if (isPercent) {
-      finalClassName += ' has-percent-suffix'
-    }
-
     return (
       <>
-        {isCurrency && !!prefix && otherCurrency && (
-          <div className='input-icon-currency-prefix'>
-            <img src={currencyOthers} alt='currency' />
-          </div>
-        )}
         <input
           type={!hidden && type === 'password' ? 'text' : type}
           name={name}
           id={name}
-          className={finalClassName}
+          className={className}
           maxLength={maxLength}
           placeholder={placeholder}
           onChange={onChange}
@@ -100,18 +73,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <img src={hidden ? eyeIcon : eyeCloseIcon} alt='' />
           </button>
         )}
-        {isCurrency
-          ? !!prefix &&
-            euro && (
-              <div className='input-icon-currency-suffix'>
-                <img src={currencyEuro} alt='currency' />
-              </div>
-            )
-          : isPercent && (
-              <div className='input-icon-percent-suffix'>
-                <img src={percent} alt='percent' />
-              </div>
-            )}
       </>
     )
   }

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

@@ -6,12 +6,11 @@ import { Input } from './Input';
 import { TextInputLabel } from './TextInputLabel';
 import { TextInputMessage } from './TextInputMessage';
 import { TextInputTooltip } from './TextInputTooltip';
-const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country }, ref) => {
+const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
-        'e-text--group-invalid': !isValidGroup,
-        'e-text--has-prefix': !!prefix
+        'e-text--group-invalid': !isValidGroup
     });
     const handleChange = (event) => {
         onChange(event);
@@ -24,9 +23,14 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
     };
     const renderInput = () => {
         if (Boolean(format) && type !== 'number' && type !== 'tel') {
-            return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', onChange: onChange, onClick: onClick, value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
+            return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', 
+                // mask={mask}
+                // format={format}
+                onChange: onChange, onClick: onClick, 
+                // maskchar={null}
+                value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
         }
-        return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country }));
+        return (_jsx(Input, { name: name ?? '', type: type, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }));
     };
     return (_jsxs("div", { className: classnames, children: [Boolean(children) && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
 });

package/dist/src/components/molecules/TextInput/TextInput.scss

@@ -148,26 +148,6 @@
     }
   }
 
-  &--has-prefix {
-    width: 100%;
-
-    @include portrait-tablets {
-      width: 50%;
-    }
-
-    .has-currency-prefix {
-      padding-left: 2rem;
-    }
-
-    .has-currency-suffix {
-      padding-right: 2rem;
-    }
-
-    .has-percent-suffix {
-      padding-left: 0.75rem;
-    }
-  }
-
   .input-icon {
     position: absolute;
     transform: translate(-15%, -65%);
@@ -184,30 +164,6 @@
     border: none;
   }
 
-  .input-icon-currency-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
-  }
-
-  .input-icon-currency-prefix {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
-  }
-
-  .input-icon-percent-suffix {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    background: none;
-    border: none;
-  }
-
   .formgroup--input__button {
     align-self: flex-start;
     font-size: 0.75rem;

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

@@ -23,7 +23,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       onKeyDown,
       onKeyUp,
-      prefix = '',
       disabled,
       type = 'text',
       maxLength,
@@ -32,16 +31,14 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       dialogMenuTip,
       tooltip = '',
       givenClass = '',
-      children,
-      country
+      children
     }: TextInputProps,
     ref
   ) => {
     const classnames = classNames('e-text', {
       [givenClass]: givenClass,
       'e-text--is-invalid': !validate,
-      'e-text--group-invalid': !isValidGroup,
-      'e-text--has-prefix': !!prefix
+      'e-text--group-invalid': !isValidGroup
     })
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -64,8 +61,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             id={name}
             placeholder={placeholder}
             className='e-text-input'
+            // mask={mask}
+            // format={format}
             onChange={onChange}
             onClick={onClick}
+            // maskchar={null}
             value={value}
             data-qa={name}
             disabled={disabled}
@@ -79,7 +79,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         <Input
           name={name ?? ''}
           type={type}
-          prefix={prefix}
           placeholder={placeholder ?? ''}
           className='e-text-input'
           onChange={handleChange}
@@ -92,7 +91,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           ref={ref}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
-          country={country}
         />
       )
     }

package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts

@@ -20,7 +20,5 @@ export interface TextInputProps {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    prefix?: string;
     children?: React.ReactNode;
-    country: string;
 }

package/dist/src/components/molecules/TextInput/TextInputProps.types.ts

@@ -21,7 +21,5 @@ export interface TextInputProps {
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  prefix?: string
   children?: React.ReactNode
-  country: string
 }

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -123,36 +123,3 @@ export const MaskInput: Story = {
     placeholder: 'eg. 2111 1111 1111 1111'
   }
 }
-
-export const WithPrefixEuro: Story = {
-  args: {
-    name: 'prefix',
-    label: 'Price:',
-    value: '20.30',
-    type: 'text',
-    prefix: 'currency',
-    country: 'DE'
-  }
-}
-
-export const WithPrefixNoEuro: Story = {
-  args: {
-    name: 'prefix',
-    label: 'Price:',
-    value: '20.30',
-    type: 'text',
-    prefix: 'currency',
-    country: 'US'
-  }
-}
-
-export const WithPrefixPercent: Story = {
-  args: {
-    name: 'prefix',
-    label: 'Price:',
-    value: '20.30',
-    type: 'text',
-    prefix: 'percent',
-    country: 'US'
-  }
-}

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

@@ -33,7 +33,7 @@ export * from './PopularDocs';
 export * from './PricingCard';
 export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
-export * from './SubscriptionCard';
+export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';

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

@@ -33,7 +33,7 @@ export * from './PopularDocs';
 export * from './PricingCard';
 export * from './RatafiaResultCardList';
 export * from './RatafiaResultTabList';
-export * from './SubscriptionCard';
+export * from './RatafiaSubscriptionCard';
 export * from './Snackbar';
 export * from './StepGetForm';
 export * from './StepRatafiaCardList';

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

@@ -33,7 +33,7 @@ export * from './PopularDocs'
 export * from './PricingCard'
 export * from './RatafiaResultCardList'
 export * from './RatafiaResultTabList'
-export * from './SubscriptionCard'
+export * from './RatafiaSubscriptionCard'
 export * from './Snackbar'
 export * from './StepGetForm'
 export * from './StepRatafiaCardList'

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AboutUsContentStyled } from './AboutUsContent.styled';
+import { Button } from '../../atoms';
+const AboutUsContent = ({ children, image, button }) => {
+    return (_jsxs(AboutUsContentStyled, { children: [_jsx("div", { className: 'about-us-content__image', children: image }), _jsxs("div", { className: 'about-us-content__body', children: [children, button != null && (_jsx("div", { className: 'about-us-content__body__button', children: _jsx(Button, { ...button }) }))] })] }));
+};
+export default AboutUsContent;

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

@@ -0,0 +1 @@
+export declare const AboutUsContentStyled: 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/{HeroContent/HeroContent.styled.js → AboutUsContent/AboutUsContent.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const HeroContentStyled = styled.div `
+export const AboutUsContentStyled = styled.div `
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
@@ -9,7 +9,7 @@ export const HeroContentStyled = styled.div `
     flex-flow: row nowrap;
   }
 
-  .hero-content__body {
+  .about-us-content__body {
     margin-top: 1rem;
     font-family: var(--font-sans);
 
@@ -45,7 +45,7 @@ export const HeroContentStyled = styled.div `
     }
   }
 
-  .hero-content__image {
+  .about-us-content__image {
     margin-bottom: 1rem;
 
     @media ${device['landscape-tablets']} {

package/dist/src/components/organisms/{HeroContent/HeroContent.styled.ts → AboutUsContent/AboutUsContent.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const HeroContentStyled = styled.div`
+export const AboutUsContentStyled = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
@@ -10,7 +10,7 @@ export const HeroContentStyled = styled.div`
     flex-flow: row nowrap;
   }
 
-  .hero-content__body {
+  .about-us-content__body {
     margin-top: 1rem;
     font-family: var(--font-sans);
 
@@ -46,7 +46,7 @@ export const HeroContentStyled = styled.div`
     }
   }
 
-  .hero-content__image {
+  .about-us-content__image {
     margin-bottom: 1rem;
 
     @media ${device['landscape-tablets']} {

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { type AboutUsContentProps } from './AboutUsContentProps.types'
+import { AboutUsContentStyled } from './AboutUsContent.styled'
+import { Button } from '../../atoms'
+
+const AboutUsContent: FC<AboutUsContentProps> = ({ children, image, button }) => {
+  return (
+    <AboutUsContentStyled>
+      <div className={'about-us-content__image'}>{image}</div>
+      <div className={'about-us-content__body'}>
+        {children}
+        {button != null && (
+          <div className={'about-us-content__body__button'}>
+            <Button {...button} />
+          </div>
+        )}
+      </div>
+    </AboutUsContentStyled>
+  )
+}
+
+export default AboutUsContent

package/dist/src/components/organisms/{HeroContent/HeroContentPropsProps.types.d.ts → AboutUsContent/AboutUsContentProps.types.d.ts}

@@ -1,5 +1,5 @@
 import { type ButtonProps } from '../../atoms';
-export interface HeroContentProps {
+export interface AboutUsContentProps {
     children: React.ReactNode;
     image: React.ReactNode;
     button?: ButtonProps;

package/dist/src/components/organisms/{HeroContent/HeroContentPropsProps.types.ts → AboutUsContent/AboutUsContentProps.types.ts}

@@ -1,6 +1,6 @@
 import { type ButtonProps } from '../../atoms'
 
-export interface HeroContentProps {
+export interface AboutUsContentProps {
   children: React.ReactNode
   image: React.ReactNode
   button?: ButtonProps

package/dist/src/components/organisms/AboutUsContent/index.d.ts

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

package/dist/src/components/organisms/AboutUsContent/index.js

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

package/dist/src/components/organisms/AboutUsContent/index.ts

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

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

@@ -1,4 +1,4 @@
-export * from './HeroContent';
+export * from './AboutUsContent';
 export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';

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

@@ -1,4 +1,4 @@
-export * from './HeroContent';
+export * from './AboutUsContent';
 export * from './Accordion';
 export * from './ArticlesList';
 export * from './AsSeeInContent';

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

@@ -1,4 +1,4 @@
-export * from './HeroContent'
+export * from './AboutUsContent'
 export * from './Accordion'
 export * from './ArticlesList'
 export * from './AsSeeInContent'