@npm_leadtech/legal-lib-components 7.3.1 → 7.4.1

package/dist/css/styles.css

@@ -2154,20 +2154,6 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
-.e-text--has-prefix {
-  width: 100%;
-}
-@media (min-width: 575px) {
-  .e-text--has-prefix {
-    width: 50%;
-  }
-}
-.e-text--has-prefix .has-currency-prefix {
-  padding-left: 2rem;
-}
-.e-text--has-prefix .has-currency-suffix {
-  padding-right: 2rem;
-}
 .e-text .input-icon {
   position: absolute;
   transform: translate(-15%, -65%);
@@ -2182,20 +2168,6 @@ h2.react-datepicker__current-month {
   background: none;
   border: none;
 }
-.e-text .input-icon-currency-suffix {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  background: none;
-  border: none;
-}
-.e-text .input-icon-currency-prefix {
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-  background: none;
-  border: none;
-}
 .e-text .formgroup--input__button {
   align-self: flex-start;
   font-size: 0.75rem;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BenefitRatafiaCardStyled } from './BenefitRatafiaCard.styled';
 export const BenefitRatafiaCard = ({ title, image, description }) => {
-    return (_jsxs(BenefitRatafiaCardStyled, { className: 'benefit-ratafia-card', children: [image !== null && _jsx("div", { className: 'benefit-ratafia-card__icon', children: image }), _jsxs("div", { className: 'benefit-ratafia-card__content', children: [_jsx("h3", { className: 'sans-serif --big --bold-weight benefit-ratafia-card__content__title', children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
+    return (_jsxs(BenefitRatafiaCardStyled, { className: 'benefit-ratafia-card', children: [image !== null && _jsx("div", { className: 'benefit-ratafia-card__icon', children: image }), _jsxs("div", { className: 'benefit-ratafia-card__content', children: [_jsx("p", { className: 'sans-serif --big --bold-weight benefit-ratafia-card__content__title', children: title }), _jsx("p", { className: 'sans-serif --medium benefit-ratafia-card__content__description', children: description })] })] }));
 };
 export default BenefitRatafiaCard;

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

@@ -8,7 +8,7 @@ export const BenefitRatafiaCard: React.FC<BenefitRatafiaCardProps> = ({ title, i
     <BenefitRatafiaCardStyled className='benefit-ratafia-card'>
       {image !== null && <div className='benefit-ratafia-card__icon'>{image}</div>}
       <div className='benefit-ratafia-card__content'>
-        <h3 className='sans-serif --big --bold-weight benefit-ratafia-card__content__title'>{title}</h3>
+        <p className='sans-serif --big --bold-weight benefit-ratafia-card__content__title'>{title}</p>
         <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
       </div>
     </BenefitRatafiaCardStyled>

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeatureRatafiaCardStyled } from './FeatureRatafiaCard.styled';
 export const FeatureRatafiaCard = ({ title, icon, description, isReleased = true, notReleasedText }) => {
-    return (_jsx(FeatureRatafiaCardStyled, { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
+    return (_jsx(FeatureRatafiaCardStyled, { className: 'feature-ratafia-card', children: _jsx("div", { className: isReleased ? 'feature-ratafia-card-released' : 'feature-ratafia-card-not-released', children: _jsxs("div", { className: 'feature-ratafia-card__wrapper', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header', children: [_jsxs("div", { className: 'feature-ratafia-card__wrapper__header__title', children: [icon !== null && _jsx("div", { className: 'feature-ratafia-card__wrapper__header__title__icon', children: icon }), _jsx("p", { className: 'sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text', children: title })] }), !isReleased && (_jsx("p", { className: 'sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released', children: notReleasedText }))] }), _jsx("p", { className: 'sans-serif --medium feature-ratafia-card__wrapper__description', children: description })] }) }) }));
 };
 export default FeatureRatafiaCard;

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

@@ -17,9 +17,9 @@ export const FeatureRatafiaCard: React.FC<FeatureRatafiaCardProps> = ({
           <div className='feature-ratafia-card__wrapper__header'>
             <div className='feature-ratafia-card__wrapper__header__title'>
               {icon !== null && <div className='feature-ratafia-card__wrapper__header__title__icon'>{icon}</div>}
-              <h3 className='sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text'>
+              <p className='sans-serif --big --bold-weight feature-ratafia-card__wrapper__header__title__text'>
                 {title}
-              </h3>
+              </p>
             </div>
             {!isReleased && (
               <p className='sans-serif --small --bold-weight feature-ratafia-card__wrapper__header__not-released'>

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const IconImage = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
-    return (_jsx("img", { className: givenClass, src: `${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`, alt: '', role: 'img' }));
+const IconImage = ({ iconName, baseSrcUrl = 'https://assets.lawdistrict.com/', givenClass, iconFormat = 'svg' }) => {
+    return _jsx("img", { className: givenClass, src: `${baseSrcUrl}${iconName}.${iconFormat}`, alt: '', role: 'img' });
 };
 export default IconImage;

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

@@ -2,15 +2,13 @@ import React from 'react'
 
 import { type IconImageProps } from './IconImageProps.types'
 
-const IconImage: React.FC<IconImageProps> = ({ iconName, baseSrcUrl = undefined, givenClass, iconFormat = 'svg' }) => {
-  return (
-    <img
-      className={givenClass}
-      src={`${baseSrcUrl ?? process.env.ASSETS_URL + '/'}${iconName}.${iconFormat}`}
-      alt=''
-      role='img'
-    />
-  )
+const IconImage: React.FC<IconImageProps> = ({
+  iconName,
+  baseSrcUrl = 'https://assets.lawdistrict.com/',
+  givenClass,
+  iconFormat = 'svg'
+}) => {
+  return <img className={givenClass} src={`${baseSrcUrl}${iconName}.${iconFormat}`} alt='' role='img' />
 }
 
 export default IconImage

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.styled.js

@@ -20,6 +20,12 @@ export const MidBannerRatafiaContentStyled = styled.div `
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

package/dist/src/components/molecules/MidBannerRatafiaContent/MidBannerRatafiaContent.styled.ts

@@ -21,6 +21,12 @@ export const MidBannerRatafiaContentStyled = styled.div`
       &__description {
         align-self: stretch;
         color: var(--neutral-neutral-1);
+
+        .richt-text-strapi {
+          display: flex;
+          flex-direction: column;
+          gap: var(--global-gap);
+        }
       }
     }
     &__cta {

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,24 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import currency 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, 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 euro = country === 'DE';
-    const otherCurrency = country !== 'DE';
-    let finalClassName = className;
-    if (otherCurrency)
-        finalClassName += ' has-currency-prefix';
-    if (euro)
-        finalClassName += ' has-currency-suffix';
-    return (_jsxs(_Fragment, { children: [!!prefix && otherCurrency && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("img", { src: currency, 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: '' }) })), !!prefix && euro && (_jsx("div", { className: 'input-icon-currency-suffix', children: _jsx("img", { src: currency, alt: 'currency' }) }))] }));
+                }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) }))] }));
 });
 Input.displayName = 'Input';

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

@@ -1,13 +1,11 @@
 import React, { useState } from 'react'
 
-import currency from '../../../../images/svg/currencyUS.svg'
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
 
 interface InputProps {
   name: string
   placeholder: string
-  prefix: string
   maxLength: number
   value: string
   type: 'password' | 'text' | 'number' | 'tel'
@@ -18,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>(
@@ -35,9 +32,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onKeyUp,
       disabled,
       type = 'text',
-      maxLength,
-      country,
-      prefix
+      maxLength
     }: InputProps,
     ref
   ) => {
@@ -46,26 +41,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const showPassword = (): void => {
       if (value !== null) setHidden(!hidden)
     }
-    const euro = country === 'DE'
-    const otherCurrency = country !== 'DE'
-
-    let finalClassName = className
-
-    if (otherCurrency) finalClassName += ' has-currency-prefix'
-    if (euro) finalClassName += ' has-currency-suffix'
 
     return (
       <>
-        {!!prefix && otherCurrency && (
-          <div className='input-icon-currency-prefix'>
-            <img src={currency} alt='currency' />
-          </div>
-        )}
         <input
           type={!hidden && type === 'password' ? 'text' : type}
           name={name}
           id={name}
-          className={finalClassName}
+          className={className}
           maxLength={maxLength}
           placeholder={placeholder}
           onChange={onChange}
@@ -90,11 +73,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <img src={hidden ? eyeIcon : eyeCloseIcon} alt='' />
           </button>
         )}
-        {!!prefix && euro && (
-          <div className='input-icon-currency-suffix'>
-            <img src={currency} alt='currency' />
-          </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,22 +148,6 @@
     }
   }
 
-  &--has-prefix {
-    width: 100%;
-
-    @include portrait-tablets {
-      width: 50%;
-    }
-
-    .has-currency-prefix {
-      padding-left: 2rem;
-    }
-
-    .has-currency-suffix {
-      padding-right: 2rem;
-    }
-  }
-
   .input-icon {
     position: absolute;
     transform: translate(-15%, -65%);
@@ -180,22 +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;
-  }
-
   .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,25 +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: '€',
-    country: 'DE'
-  }
-}
-
-export const WithPrefixNoEuro: Story = {
-  args: {
-    name: 'prefix',
-    label: 'Price:',
-    value: '20.30',
-    type: 'text',
-    prefix: '$',
-    country: 'US'
-  }
-}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RichTextInner, RichTextStrapi } from '../../atoms';
+import { Button, RichTextInner, RichTextStrapi } from '../../atoms';
 import { GuideslinesContentStyled } from './GuidelinesContent.styled';
-const GuidelinesContent = ({ title, image, detail, children }) => {
-    return (_jsxs(GuideslinesContentStyled, { children: [_jsxs("div", { className: 'guidelines-section-main wrapper', children: [_jsx("div", { className: 'guidelines-section__image big-devices', children: image }), _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }), _jsx("div", { className: 'guidelines-section__image is-mobile', children: image })] }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) }))] }));
+const GuidelinesContent = ({ title, detail, children, tryNowText, tryNowButtonText, tryNowButtonLink, tryNowButtonDataQa, tryNowImage }) => {
+    return (_jsxs(GuideslinesContentStyled, { children: [_jsx("div", { className: 'guidelines-section-main wrapper', children: _jsxs("div", { className: 'guidelines-section__texts', children: [_jsx("h2", { className: 'guidelines-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: children })] }) }), Array.isArray(detail) && (_jsx("div", { className: 'guidelines-section-detail wrapper', children: detail.map((item, index) => (_jsxs("div", { className: 'guidelines-section-detail__item', children: [_jsx("div", { className: 'guidelines-section-detail__item__image', children: item.image }), _jsx("div", { className: 'guidelines-section-detail__item__title', children: item.title }), _jsx(RichTextStrapi, { html: item.body?.data?.childMarkdownRemark?.html })] }, index))) })), _jsx("div", { className: 'guidelines-section-trial wrapper', children: _jsxs("div", { className: 'guidelines-section-trial__item', children: [_jsx("div", { className: 'guidelines-section__image is-mobile', children: tryNowImage }), _jsxs("div", { className: 'guidelines-section-trial__texts', children: [_jsx(RichTextInner, { customClass: 'guidelines-section__texts__body', children: tryNowText }), _jsx(Button, { givenClass: 'mid-banner-ratafia-content__cta', dataQa: tryNowButtonDataQa, link: tryNowButtonLink, color: 'primary', label: tryNowButtonText })] }), _jsx("div", { className: 'guidelines-section__image big-devices', children: tryNowImage })] }) })] }));
 };
 export default GuidelinesContent;

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.js

@@ -14,7 +14,6 @@ export const GuideslinesContentStyled = styled.div `
   }
 
   .guidelines-section__texts {
-    flex-basis: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -34,10 +33,10 @@ export const GuideslinesContentStyled = styled.div `
       font-family: var(--font-serif);
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 32px;
+      font-size: 28px;
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 32px;
       letter-spacing: -0.3px;
 
       @media ${device['landscape-tablets']} {
@@ -57,31 +56,6 @@ export const GuideslinesContentStyled = styled.div `
     }
   }
 
-  .guidelines-section__image {
-    flex-basis: 50%;
-    margin-bottom: 2rem;
-
-    &.big-devices {
-      display: none;
-
-      @media ${device['landscape-tablets']} {
-        display: flex;
-      }
-    }
-
-    &.is-mobile {
-      display: none;
-
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
-
-      img {
-        display: none;
-      }
-    }
-  }
-
   .guidelines-section-detail {
     display: flex;
     flex-direction: column;
@@ -108,9 +82,9 @@ export const GuideslinesContentStyled = styled.div `
       &__title {
         font-family: var(--font-serif);
         font-style: normal;
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 32px;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
         letter-spacing: -0.3px;
         color: var(--neutral-neutral-1);
         margin: 1.5rem 0 1rem 0;
@@ -135,4 +109,77 @@ export const GuideslinesContentStyled = styled.div `
       }
     }
   }
+
+  .guidelines-section-trial {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin: 2rem 0 1rem 0;
+
+    @media ${device.laptop} {
+      flex-direction: row;
+    }
+
+    &__texts {
+      flex-basis: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      color: var(--neutral-neutral-1);
+      font-style: normal;
+      font-weight: 400;
+      letter-spacing: -0.3px;
+      margin-right: 3rem;
+
+      &__body {
+        font-family: var(--font-sans);
+        font-size: 16px;
+        line-height: 22px;
+        margin-bottom: 1.5rem;
+        a {
+          color: var(--primary-main-light-1);
+          font-weight: 400 !important;
+        }
+      }
+      .e-button {
+        height: auto;
+        align-self: flex-start;
+        margin-top: 2.5rem;
+      }
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      background: var(--others-white);
+      border-radius: var(--m-border-radius);
+      padding: 1.5rem;
+    }
+  }
+
+  .guidelines-section__image {
+    flex-basis: 50%;
+    margin-bottom: 2rem;
+
+    &.big-devices {
+      display: none;
+
+      @media ${device['landscape-tablets']} {
+        display: flex;
+      }
+    }
+
+    &.is-mobile {
+      display: none;
+
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      img {
+        display: none;
+      }
+    }
+  }
 `;

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContent.styled.ts

@@ -15,7 +15,6 @@ export const GuideslinesContentStyled = styled.div`
   }
 
   .guidelines-section__texts {
-    flex-basis: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -35,10 +34,10 @@ export const GuideslinesContentStyled = styled.div`
       font-family: var(--font-serif);
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 32px;
+      font-size: 28px;
       font-style: normal;
-      font-weight: 400;
-      line-height: 42px;
+      font-weight: 700;
+      line-height: 32px;
       letter-spacing: -0.3px;
 
       @media ${device['landscape-tablets']} {
@@ -58,31 +57,6 @@ export const GuideslinesContentStyled = styled.div`
     }
   }
 
-  .guidelines-section__image {
-    flex-basis: 50%;
-    margin-bottom: 2rem;
-
-    &.big-devices {
-      display: none;
-
-      @media ${device['landscape-tablets']} {
-        display: flex;
-      }
-    }
-
-    &.is-mobile {
-      display: none;
-
-      @media ${device['landscape-tablets']} {
-        display: none;
-      }
-
-      img {
-        display: none;
-      }
-    }
-  }
-
   .guidelines-section-detail {
     display: flex;
     flex-direction: column;
@@ -109,9 +83,9 @@ export const GuideslinesContentStyled = styled.div`
       &__title {
         font-family: var(--font-serif);
         font-style: normal;
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 32px;
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
         letter-spacing: -0.3px;
         color: var(--neutral-neutral-1);
         margin: 1.5rem 0 1rem 0;
@@ -136,4 +110,77 @@ export const GuideslinesContentStyled = styled.div`
       }
     }
   }
+
+  .guidelines-section-trial {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin: 2rem 0 1rem 0;
+
+    @media ${device.laptop} {
+      flex-direction: row;
+    }
+
+    &__texts {
+      flex-basis: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      color: var(--neutral-neutral-1);
+      font-style: normal;
+      font-weight: 400;
+      letter-spacing: -0.3px;
+      margin-right: 3rem;
+
+      &__body {
+        font-family: var(--font-sans);
+        font-size: 16px;
+        line-height: 22px;
+        margin-bottom: 1.5rem;
+        a {
+          color: var(--primary-main-light-1);
+          font-weight: 400 !important;
+        }
+      }
+      .e-button {
+        height: auto;
+        align-self: flex-start;
+        margin-top: 2.5rem;
+      }
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      background: var(--others-white);
+      border-radius: var(--m-border-radius);
+      padding: 1.5rem;
+    }
+  }
+
+  .guidelines-section__image {
+    flex-basis: 50%;
+    margin-bottom: 2rem;
+
+    &.big-devices {
+      display: none;
+
+      @media ${device['landscape-tablets']} {
+        display: flex;
+      }
+    }
+
+    &.is-mobile {
+      display: none;
+
+      @media ${device['landscape-tablets']} {
+        display: none;
+      }
+
+      img {
+        display: none;
+      }
+    }
+  }
 `

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

@@ -1,19 +1,26 @@
 import React, { type FC } from 'react'
 
-import { RichTextInner, RichTextStrapi } from '../../atoms'
+import { Button, RichTextInner, RichTextStrapi } from '../../atoms'
 import { type GuidelinesContentProps } from './GuidelinesContentProps.types'
 import { GuideslinesContentStyled } from './GuidelinesContent.styled'
 
-const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, children }) => {
+const GuidelinesContent: FC<GuidelinesContentProps> = ({
+  title,
+  detail,
+  children,
+  tryNowText,
+  tryNowButtonText,
+  tryNowButtonLink,
+  tryNowButtonDataQa,
+  tryNowImage
+}) => {
   return (
     <GuideslinesContentStyled>
       <div className='guidelines-section-main wrapper'>
-        <div className='guidelines-section__image big-devices'>{image}</div>
         <div className='guidelines-section__texts'>
           <h2 className='guidelines-section__texts__title'>{title}</h2>
           <RichTextInner customClass='guidelines-section__texts__body'>{children}</RichTextInner>
         </div>
-        <div className='guidelines-section__image is-mobile'>{image}</div>
       </div>
       {Array.isArray(detail) && (
         <div className='guidelines-section-detail wrapper'>
@@ -26,6 +33,22 @@ const GuidelinesContent: FC<GuidelinesContentProps> = ({ title, image, detail, c
           ))}
         </div>
       )}
+      <div className='guidelines-section-trial wrapper'>
+        <div className='guidelines-section-trial__item'>
+          <div className='guidelines-section__image is-mobile'>{tryNowImage}</div>
+          <div className='guidelines-section-trial__texts'>
+            <RichTextInner customClass='guidelines-section__texts__body'>{tryNowText}</RichTextInner>
+            <Button
+              givenClass='mid-banner-ratafia-content__cta'
+              dataQa={tryNowButtonDataQa}
+              link={tryNowButtonLink}
+              color='primary'
+              label={tryNowButtonText}
+            />
+          </div>
+          <div className='guidelines-section__image big-devices'>{tryNowImage}</div>
+        </div>
+      </div>
     </GuideslinesContentStyled>
   )
 }

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.d.ts

@@ -1,6 +1,12 @@
+import React from 'react';
 export interface GuidelinesContentProps {
     title: string;
-    image: React.ReactNode;
+    image?: React.ReactNode;
     children: React.ReactNode;
     detail?: React.ReactNode;
+    tryNowText: React.ReactNode;
+    tryNowButtonText: string;
+    tryNowButtonLink: string;
+    tryNowButtonDataQa: string;
+    tryNowImage?: React.ReactNode;
 }

package/dist/src/components/organisms/GuidelinesContent/GuidelinesContentProps.types.ts

@@ -1,6 +1,13 @@
+import React from 'react'
+
 export interface GuidelinesContentProps {
   title: string
-  image: React.ReactNode
+  image?: React.ReactNode
   children: React.ReactNode
   detail?: React.ReactNode
+  tryNowText: React.ReactNode
+  tryNowButtonText: string
+  tryNowButtonLink: string
+  tryNowButtonDataQa: string
+  tryNowImage?: React.ReactNode
 }

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.js

@@ -39,7 +39,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
 
       &__children {
         display: none;
-        min-width: 50%;
+        width: 100%;
 
         @media ${device.desktop} {
           display: flex;
@@ -48,6 +48,7 @@ export const FeaturesRatafiaSectionStyled = styled.section `
         }
         img {
           width: 100%;
+          height: auto;
         }
       }
     }

package/dist/src/components/sections/FeaturesRatafiaSection/FeaturesRatafiaSection.styled.ts

@@ -40,7 +40,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
 
       &__children {
         display: none;
-        min-width: 50%;
+        width: 100%;
 
         @media ${device.desktop} {
           display: flex;
@@ -49,6 +49,7 @@ export const FeaturesRatafiaSectionStyled = styled.section`
         }
         img {
           width: 100%;
+          height: auto;
         }
       }
     }

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GuidelinesContent } from '../../organisms/GuidelinesContent';
 import { GuidelinesSectionStyled } from './GuidelinesSection.styled';
 const GuidelinesSection = ({ contentGuidelines }) => {
-    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, children: contentGuidelines.children }) }));
+    return (_jsx(GuidelinesSectionStyled, { className: 'guidelines-section', children: _jsx(GuidelinesContent, { title: contentGuidelines.title, image: contentGuidelines.image, detail: contentGuidelines.detail, tryNowText: contentGuidelines.tryNowText, tryNowButtonText: contentGuidelines.tryNowButtonText, tryNowButtonLink: contentGuidelines.tryNowButtonLink, tryNowButtonDataQa: contentGuidelines.tryNowButtonDataQa, tryNowImage: contentGuidelines.tryNowImage, children: contentGuidelines.children }) }));
 };
 export default GuidelinesSection;

package/dist/src/components/sections/GuidelinesSection/GuidelinesSection.tsx

@@ -11,6 +11,11 @@ const GuidelinesSection: FC<GuidelinesSectionProps> = ({ contentGuidelines }) =>
         title={contentGuidelines.title}
         image={contentGuidelines.image}
         detail={contentGuidelines.detail}
+        tryNowText={contentGuidelines.tryNowText}
+        tryNowButtonText={contentGuidelines.tryNowButtonText}
+        tryNowButtonLink={contentGuidelines.tryNowButtonLink}
+        tryNowButtonDataQa={contentGuidelines.tryNowButtonDataQa}
+        tryNowImage={contentGuidelines.tryNowImage}
       >
         {contentGuidelines.children}
       </GuidelinesContent>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.3.1",
+  "version": "7.4.1",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/images/svg/currencyUS.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.94505 17.3333C4.6827 17.3333 4.4628 17.2446 4.28533 17.0671C4.10786 16.8896 4.01912 16.6697 4.01912 16.4074V15.3426C3.32468 15.1882 2.71511 14.9182 2.19042 14.5324C1.66573 14.1466 1.24135 13.6064 0.917271 12.912C0.809246 12.6959 0.805388 12.4683 0.905697 12.2291C1.00601 11.9899 1.18733 11.8163 1.44968 11.7083C1.66573 11.6157 1.88949 11.6196 2.12097 11.7199C2.35246 11.8202 2.52993 11.9861 2.65338 12.2176C2.91573 12.6805 3.24752 13.0316 3.64875 13.2708C4.04999 13.51 4.54381 13.6296 5.13023 13.6296C5.76295 13.6296 6.29922 13.4868 6.73903 13.2013C7.17884 12.9159 7.39875 12.4722 7.39875 11.8703C7.39875 11.3302 7.229 10.902 6.88949 10.5856C6.54999 10.2692 5.76295 9.91045 4.52838 9.50922C3.20122 9.09255 2.29073 8.59487 1.7969 8.01616C1.30307 7.43746 1.05616 6.73144 1.05616 5.89811C1.05616 4.89502 1.38023 4.1157 2.02838 3.56014C2.67653 3.00459 3.34011 2.68823 4.01912 2.61107V1.59255C4.01912 1.33021 4.10786 1.1103 4.28533 0.93283C4.4628 0.755361 4.6827 0.666626 4.94505 0.666626C5.20739 0.666626 5.4273 0.755361 5.60477 0.93283C5.78224 1.1103 5.87097 1.33021 5.87097 1.59255V2.61107C6.45739 2.70366 6.96665 2.89271 7.39875 3.1782C7.83085 3.46369 8.18579 3.81477 8.46357 4.23144C8.60246 4.43206 8.62946 4.65582 8.54459 4.90274C8.45971 5.14965 8.2861 5.32712 8.02375 5.43514C7.8077 5.52774 7.58394 5.5316 7.35246 5.44672C7.12098 5.36184 6.90493 5.21138 6.70431 4.99533C6.50369 4.77928 6.26835 4.61339 5.99829 4.49764C5.72823 4.3819 5.39258 4.32403 4.99134 4.32403C4.31233 4.32403 3.79536 4.4745 3.44042 4.77542C3.08548 5.07635 2.90801 5.45058 2.90801 5.89811C2.90801 6.40737 3.13949 6.8086 3.60246 7.10181C4.06542 7.39502 4.86789 7.70366 6.00986 8.02774C7.07468 8.33638 7.88101 8.82635 8.42885 9.49765C8.97668 10.1689 9.2506 10.9444 9.2506 11.824C9.2506 12.9197 8.92653 13.753 8.27838 14.324C7.63023 14.895 6.82776 15.25 5.87097 15.3888V16.4074C5.87097 16.6697 5.78224 16.8896 5.60477 17.0671C5.4273 17.2446 5.20739 17.3333 4.94505 17.3333Z" fill="#6D7275"/>
-</svg>