@npm_leadtech/legal-lib-components 7.5.2 → 7.5.5

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface InputProps {
     name: string;
     placeholder: string;
+    prefix: string;
     maxLength: number;
     value: string;
     type: 'password' | 'text' | 'number' | 'tel';
@@ -12,6 +13,7 @@ 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,16 +1,36 @@
 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';
-export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength }, ref) => {
+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) => {
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
         if (value !== null)
             setHidden(!hidden);
     };
-    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) => {
+    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) => {
                     if (e.key === 'Enter')
                         showPassword();
-                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) }))] }));
+                }, 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' }) }))] }));
 });
 Input.displayName = 'Input';

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

@@ -1,11 +1,15 @@
 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'
@@ -16,6 +20,7 @@ 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>(
@@ -32,7 +37,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onKeyUp,
       disabled,
       type = 'text',
-      maxLength
+      maxLength,
+      country,
+      prefix
     }: InputProps,
     ref
   ) => {
@@ -42,13 +49,33 @@ 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={className}
+          className={finalClassName}
           maxLength={maxLength}
           placeholder={placeholder}
           onChange={onChange}
@@ -73,6 +100,18 @@ 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,11 +6,12 @@ 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, disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children }, ref) => {
+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 classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
-        'e-text--group-invalid': !isValidGroup
+        'e-text--group-invalid': !isValidGroup,
+        'e-text--has-prefix': !!prefix
     });
     const handleChange = (event) => {
         onChange(event);
@@ -23,14 +24,9 @@ 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', 
-                // mask={mask}
-                // format={format}
-                onChange: onChange, onClick: onClick, 
-                // maskchar={null}
-                value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
+            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(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 (_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 (_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,6 +148,26 @@
     }
   }
 
+  &--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%);
@@ -164,6 +184,30 @@
     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,6 +23,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       onKeyDown,
       onKeyUp,
+      prefix = '',
       disabled,
       type = 'text',
       maxLength,
@@ -31,14 +32,16 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       dialogMenuTip,
       tooltip = '',
       givenClass = '',
-      children
+      children,
+      country
     }: TextInputProps,
     ref
   ) => {
     const classnames = classNames('e-text', {
       [givenClass]: givenClass,
       'e-text--is-invalid': !validate,
-      'e-text--group-invalid': !isValidGroup
+      'e-text--group-invalid': !isValidGroup,
+      'e-text--has-prefix': !!prefix
     })
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -61,11 +64,8 @@ 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,6 +79,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         <Input
           name={name ?? ''}
           type={type}
+          prefix={prefix}
           placeholder={placeholder ?? ''}
           className='e-text-input'
           onChange={handleChange}
@@ -91,6 +92,7 @@ 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,5 +20,7 @@ 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,5 +21,7 @@ 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,3 +123,36 @@ 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 './RatafiaSubscriptionCard';
+export * from './SubscriptionCard';
 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 './RatafiaSubscriptionCard';
+export * from './SubscriptionCard';
 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 './RatafiaSubscriptionCard'
+export * from './SubscriptionCard'
 export * from './Snackbar'
 export * from './StepGetForm'
 export * from './StepRatafiaCardList'

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/components/organisms/HeroContent/HeroContentPropsProps.types.js

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

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

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

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

@@ -0,0 +1,2 @@
+export { default as HeroContent } from './HeroContent';
+export { type HeroContentProps } from './HeroContentPropsProps.types';

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

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

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

@@ -0,0 +1,2 @@
+export { default as HeroContent } from './HeroContent'
+export { type HeroContentProps } from './HeroContentPropsProps.types'

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

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

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

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

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

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

package/dist/src/components/pages/AboutUsPage/AboutUsPage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AboutUsSection, AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, MidBannerRatafiaSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
+import { AsSeeInSection, CardStorySection, ExpertsSection, GuidelinesSection, HeroSection, MidBannerRatafiaSection, PeopleSayAboutUsSection, TryOurFreeLegalBlogsSection } from '../../sections';
 import { ContactContent, HowWeHelp } from '../../organisms';
 export const AboutUsPage = ({ aboutUsSectionProps, ourMissionBlogsSectionProps, ourCoreValuesBlogsSectionProps, cardStorySection, howWeHelp, peopleSayAboutUsSectionProps, guidelinesSectionProps, expertsSectionProps, asSeeInSectionProps, midBannerSectionProps, contactContentProps, isJonSnow = false }) => {
-    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(AboutUsSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps }), !isJonSnow && midBannerSectionProps != null && _jsx(MidBannerRatafiaSection, { ...midBannerSectionProps }), !isJonSnow && contactContentProps != null && _jsx(ContactContent, { ...contactContentProps })] }));
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), ourMissionBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourMissionBlogsSectionProps }), ourCoreValuesBlogsSectionProps != null && _jsx(TryOurFreeLegalBlogsSection, { ...ourCoreValuesBlogsSectionProps }), cardStorySection != null && _jsx(CardStorySection, { ...cardStorySection }), howWeHelp != null && _jsx(HowWeHelp, { ...howWeHelp }), guidelinesSectionProps != null && (_jsx(GuidelinesSection, { ...guidelinesSectionProps, children: guidelinesSectionProps.contentGuidelines?.children })), expertsSectionProps != null && _jsx(ExpertsSection, { ...expertsSectionProps }), !isJonSnow && peopleSayAboutUsSectionProps != null && (_jsx(PeopleSayAboutUsSection, { ...peopleSayAboutUsSectionProps })), !isJonSnow && asSeeInSectionProps != null && _jsx(AsSeeInSection, { ...asSeeInSectionProps }), !isJonSnow && midBannerSectionProps != null && _jsx(MidBannerRatafiaSection, { ...midBannerSectionProps }), !isJonSnow && contactContentProps != null && _jsx(ContactContent, { ...contactContentProps })] }));
 };

package/dist/src/components/pages/AboutUsPage/AboutUsPage.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
 import {
-  AboutUsSection,
   AsSeeInSection,
   CardStorySection,
   ExpertsSection,
   GuidelinesSection,
+  HeroSection,
   MidBannerRatafiaSection,
   PeopleSayAboutUsSection,
   TryOurFreeLegalBlogsSection
@@ -29,7 +29,7 @@ export const AboutUsPage: React.FC<AboutUsPageProps> = ({
 }) => {
   return (
     <>
-      {aboutUsSectionProps != null && <AboutUsSection {...aboutUsSectionProps} />}
+      {aboutUsSectionProps != null && <HeroSection {...aboutUsSectionProps} />}
       {ourMissionBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourMissionBlogsSectionProps} />}
       {ourCoreValuesBlogsSectionProps != null && <TryOurFreeLegalBlogsSection {...ourCoreValuesBlogsSectionProps} />}
       {cardStorySection != null && <CardStorySection {...cardStorySection} />}

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.d.ts

@@ -1,7 +1,7 @@
-import type { AboutUsSectionProps, AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, MidBannerRatafiaSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
+import type { AsSeeInSectionProps, CardStorySectionProps, ExpertsSectionProps, GuidelinesSectionProps, HeroSectionProps, MidBannerRatafiaSectionProps, PeopleSayAboutUsSectionProps, TryOurFreeLegalBlogsSectionProps, TryUsSectionProps } from '../../sections';
 import { ContactContentProps, HowWeHelpProps } from '../../organisms';
 export interface AboutUsPageProps {
-    aboutUsSectionProps?: AboutUsSectionProps;
+    aboutUsSectionProps?: HeroSectionProps;
     ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
     ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps;
     cardStorySection?: CardStorySectionProps;

package/dist/src/components/pages/AboutUsPage/AboutUsPageProps.ts

@@ -1,9 +1,9 @@
 import type {
-  AboutUsSectionProps,
   AsSeeInSectionProps,
   CardStorySectionProps,
   ExpertsSectionProps,
   GuidelinesSectionProps,
+  HeroSectionProps,
   MidBannerRatafiaSectionProps,
   PeopleSayAboutUsSectionProps,
   TryOurFreeLegalBlogsSectionProps,
@@ -12,7 +12,7 @@ import type {
 import { ContactContentProps, HowWeHelpProps } from '../../organisms'
 
 export interface AboutUsPageProps {
-  aboutUsSectionProps?: AboutUsSectionProps
+  aboutUsSectionProps?: HeroSectionProps
   ourMissionBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
   ourCoreValuesBlogsSectionProps?: TryOurFreeLegalBlogsSectionProps
   cardStorySection?: CardStorySectionProps

package/dist/src/components/pages/PricingPage/PricingPage.d.ts

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

package/dist/src/components/pages/PricingPage/PricingPage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBoxFeaturedSection, CardBoxMinimalSection, FaqSection, HeroSection } from '../../sections';
+import { BenefitCard } from '../../atoms';
+import { PlanBoxPricingSubscriptionCard } from '../../molecules';
+import { PricingPageStyled } from './PricingPage.styled';
+export const PricingPage = ({ benefitsContent, faqsContent, helpResourcesCards, pricingPlanContent, pricingSection, supportContent }) => {
+    return (_jsxs(PricingPageStyled, { children: [pricingSection != null && _jsx(HeroSection, { ...pricingSection }), _jsxs("div", { className: 'pricing-plans wrapper wrapper--responsive', children: [pricingPlanContent?.title && _jsx("h2", { className: 'pricing-plans__title', children: pricingPlanContent.title }), _jsx("div", { className: 'pricing-plans__cards', children: pricingPlanContent?.plans?.length > 0 &&
+                            pricingPlanContent?.plans?.map((plan) => _jsx(PlanBoxPricingSubscriptionCard, { ...plan }, plan?.id)) })] }), _jsx(CardBoxMinimalSection, { cards: helpResourcesCards }), _jsx("div", { className: 'wrapper wrapper--responsive', children: _jsxs("div", { className: 'benefits', children: [benefitsContent?.title && _jsx("h2", { className: 'benefits__title', children: benefitsContent.title }), _jsx("div", { className: 'benefits__cards', children: benefitsContent?.benefitsList?.length > 0 &&
+                                benefitsContent?.benefitsList?.map((benefit) => (_jsx(BenefitCard, { hasShadow: false, ...benefit }, benefit?.id))) })] }) }), _jsxs("div", { className: 'support-section', children: [supportContent?.title && (_jsxs("div", { className: 'support-section__content', children: [_jsx("h2", { children: supportContent.title }), supportContent.description] })), _jsx(CardBoxFeaturedSection, { cards: supportContent?.benefitsList })] }), _jsx("div", { className: 'faqs-section', children: _jsx(FaqSection, { groups: faqsContent?.faqItems, givenClass: 'faqs-section__content wrapper wrapper--responsive' }) })] }));
+};

package/dist/src/components/pages/PricingPage/PricingPage.styled.d.ts

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