@npm_leadtech/legal-lib-components 5.64.14 → 5.64.16

package/dist/images/componentsSvg/flags/CAFlag.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CAFlag: React.FC;

package/dist/images/componentsSvg/flags/CAFlag.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CAFlag = () => {
+    return (_jsxs("svg", { width: '21', height: '16', viewBox: '0 0 21 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsxs("g", { id: 'Flag', children: [_jsxs("g", { clipPath: 'url(#clip0_1667_1471)', children: [_jsx("mask", { id: 'path-1-inside-1_1667_1471', fill: 'white', children: _jsx("path", { d: 'M0 2.5C0 1.39543 0.895431 0.5 2 0.5H19C20.1046 0.5 21 1.39543 21 2.5V13.5C21 14.6046 20.1046 15.5 19 15.5H2C0.89543 15.5 0 14.6046 0 13.5V2.5Z' }) }), _jsx("path", { id: 'Vector', d: 'M4.92516 0.5H16.0716V15.5H4.92188L4.92516 0.5Z', fill: 'white' }), _jsx("path", { id: 'Vector_2', d: 'M-0.646484 0.5H4.92508V15.5H-0.646484V0.5ZM16.0715 0.5H21.643V15.5H16.0748L16.0715 0.5ZM6.59523 7.75L6.15883 7.8875L8.17352 9.575C8.32774 10.0031 8.12102 10.1312 7.98977 10.3562L10.1751 10.0938L10.1226 12.1875L10.5787 12.1781L10.477 10.0969L12.6655 10.3469C12.531 10.075 12.4096 9.93125 12.5343 9.49687L14.5457 7.90312L14.1946 7.77812C13.9059 7.56562 14.3193 6.75938 14.3784 6.25C14.3784 6.25 13.207 6.63438 13.1315 6.43125L12.8296 5.88438L11.7599 7.00313C11.6451 7.03125 11.5959 6.9875 11.5663 6.89375L12.0585 4.55625L11.2776 4.975C11.2076 5.00208 11.1507 4.97917 11.107 4.90625L10.3523 3.46875L9.57789 4.9625C9.51664 5.01458 9.46195 5.02187 9.41383 4.98438L8.66242 4.5875L9.11195 6.90312C9.07586 6.99687 8.99055 7.02188 8.89211 6.97188L7.86836 5.86875C7.73711 6.07188 7.64524 6.40313 7.46805 6.47813C7.29086 6.55312 6.69695 6.3375 6.29992 6.25938C6.43773 6.72188 6.85773 7.49687 6.59523 7.75Z', fill: '#D52B1E' })] }), _jsx("path", { d: 'M0 2.5C0 1.28497 0.984974 0.3 2.2 0.3H18.8C20.015 0.3 21 1.28497 21 2.5C21 1.50589 20.1046 0.7 19 0.7H2C0.895431 0.7 0 1.50589 0 2.5ZM21 13.5C21 14.715 20.015 15.7 18.8 15.7H2.2C0.984974 15.7 0 14.715 0 13.5C0 14.4941 0.895431 15.3 2 15.3H19C20.1046 15.3 21 14.4941 21 13.5ZM0 15.5V0.5V15.5ZM21 0.5V15.5V0.5Z', fill: '#DBE1E5', mask: 'url(#path-1-inside-1_1667_1471)' })] }), _jsx("defs", { children: _jsx("clipPath", { id: 'clip0_1667_1471', children: _jsx("path", { d: 'M0 2.5C0 1.39543 0.895431 0.5 2 0.5H19C20.1046 0.5 21 1.39543 21 2.5V13.5C21 14.6046 20.1046 15.5 19 15.5H2C0.89543 15.5 0 14.6046 0 13.5V2.5Z', fill: 'white' }) }) })] }));
+};

package/dist/images/componentsSvg/flags/CAFlag.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export const CAFlag: React.FC = () => {
+  return (
+    <svg width='21' height='16' viewBox='0 0 21 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g id='Flag'>
+        <g clipPath='url(#clip0_1667_1471)'>
+          <mask id='path-1-inside-1_1667_1471' fill='white'>
+            <path d='M0 2.5C0 1.39543 0.895431 0.5 2 0.5H19C20.1046 0.5 21 1.39543 21 2.5V13.5C21 14.6046 20.1046 15.5 19 15.5H2C0.89543 15.5 0 14.6046 0 13.5V2.5Z' />
+          </mask>
+          <path id='Vector' d='M4.92516 0.5H16.0716V15.5H4.92188L4.92516 0.5Z' fill='white' />
+          <path
+            id='Vector_2'
+            d='M-0.646484 0.5H4.92508V15.5H-0.646484V0.5ZM16.0715 0.5H21.643V15.5H16.0748L16.0715 0.5ZM6.59523 7.75L6.15883 7.8875L8.17352 9.575C8.32774 10.0031 8.12102 10.1312 7.98977 10.3562L10.1751 10.0938L10.1226 12.1875L10.5787 12.1781L10.477 10.0969L12.6655 10.3469C12.531 10.075 12.4096 9.93125 12.5343 9.49687L14.5457 7.90312L14.1946 7.77812C13.9059 7.56562 14.3193 6.75938 14.3784 6.25C14.3784 6.25 13.207 6.63438 13.1315 6.43125L12.8296 5.88438L11.7599 7.00313C11.6451 7.03125 11.5959 6.9875 11.5663 6.89375L12.0585 4.55625L11.2776 4.975C11.2076 5.00208 11.1507 4.97917 11.107 4.90625L10.3523 3.46875L9.57789 4.9625C9.51664 5.01458 9.46195 5.02187 9.41383 4.98438L8.66242 4.5875L9.11195 6.90312C9.07586 6.99687 8.99055 7.02188 8.89211 6.97188L7.86836 5.86875C7.73711 6.07188 7.64524 6.40313 7.46805 6.47813C7.29086 6.55312 6.69695 6.3375 6.29992 6.25938C6.43773 6.72188 6.85773 7.49687 6.59523 7.75Z'
+            fill='#D52B1E'
+          />
+        </g>
+        <path
+          d='M0 2.5C0 1.28497 0.984974 0.3 2.2 0.3H18.8C20.015 0.3 21 1.28497 21 2.5C21 1.50589 20.1046 0.7 19 0.7H2C0.895431 0.7 0 1.50589 0 2.5ZM21 13.5C21 14.715 20.015 15.7 18.8 15.7H2.2C0.984974 15.7 0 14.715 0 13.5C0 14.4941 0.895431 15.3 2 15.3H19C20.1046 15.3 21 14.4941 21 13.5ZM0 15.5V0.5V15.5ZM21 0.5V15.5V0.5Z'
+          fill='#DBE1E5'
+          mask='url(#path-1-inside-1_1667_1471)'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_1667_1471'>
+          <path
+            d='M0 2.5C0 1.39543 0.895431 0.5 2 0.5H19C20.1046 0.5 21 1.39543 21 2.5V13.5C21 14.6046 20.1046 15.5 19 15.5H2C0.89543 15.5 0 14.6046 0 13.5V2.5Z'
+            fill='white'
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/dist/images/componentsSvg/flags/DEFlag.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DEFlag: React.FC;

package/dist/images/componentsSvg/flags/DEFlag.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DEFlag = () => {
+    return (_jsxs("svg", { width: '21', height: '16', viewBox: '0 0 21 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("g", { id: 'Flag', children: _jsxs("g", { clipPath: 'url(#clip0_1607_4659)', children: [_jsx("path", { id: 'Vector', d: 'M0 10.5H21V15.5H0V10.5Z', fill: '#FFCC00' }), _jsx("path", { id: 'Vector_2', d: 'M0 0.5H21V5.5H0V0.5Z', fill: '#000001' }), _jsx("path", { id: 'Vector_3', d: 'M0 5.5H21V10.5H0V5.5Z', fill: '#FF0000' })] }) }), _jsx("defs", { children: _jsx("clipPath", { id: 'clip0_1607_4659', children: _jsx("rect", { y: '0.5', width: '21', height: '15', rx: '2', fill: 'white' }) }) })] }));
+};

package/dist/images/componentsSvg/flags/DEFlag.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export const DEFlag: React.FC = () => {
+  return (
+    <svg width='21' height='16' viewBox='0 0 21 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g id='Flag'>
+        <g clipPath='url(#clip0_1607_4659)'>
+          <path id='Vector' d='M0 10.5H21V15.5H0V10.5Z' fill='#FFCC00' />
+          <path id='Vector_2' d='M0 0.5H21V5.5H0V0.5Z' fill='#000001' />
+          <path id='Vector_3' d='M0 5.5H21V10.5H0V5.5Z' fill='#FF0000' />
+        </g>
+      </g>
+      <defs>
+        <clipPath id='clip0_1607_4659'>
+          <rect y='0.5' width='21' height='15' rx='2' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardStoryItemStyled } from './CardStoryItem.styled';
+const CardStoryItem = ({ image, title, text }) => {
+    return (_jsxs(CardStoryItemStyled, { className: 'card-story-item', children: [_jsx("span", { className: 'card-story-item__bullet' }), _jsx("div", { className: 'card-story-item__image', children: _jsx("div", { className: 'card-story-item__image__content', children: _jsx("img", { className: 'card-story-item__image__item', src: image, alt: '', role: 'img', width: '24', height: '24' }) }) }), _jsxs("div", { className: 'card-story-item__content', children: [_jsx("p", { className: 'card-story-item__content__title', children: title }), _jsx("div", { className: 'card-story-item__content__text', children: text })] })] }));
+};
+export default CardStoryItem;

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

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

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

@@ -0,0 +1,91 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const CardStoryItemStyled = styled.li `
+  position: relative;
+  background: var(--neutral-neutral-6);
+  padding: 1.5rem;
+  border-radius: var(--l-border-radius);
+  margin-top: 16px;
+  list-style-type: none;
+
+  &:first-child {
+    margin-top: 0;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: calc(50% + 5px);
+      left: -26px;
+      width: 10px;
+      background: var(--others-white);
+    }
+  }
+
+  &:last-child:before {
+    content: '';
+    position: absolute;
+    top: calc(50% + 5px);
+    bottom: 0;
+    left: -26px;
+    width: 10px;
+    background: var(--others-white);
+  }
+
+  .card-story-item {
+    &__bullet {
+      position: absolute;
+      top: calc(50% - 5px);
+      left: -26px;
+      width: 10px;
+      height: 10px;
+      background-color: #333;
+      border-radius: 50%;
+    }
+    &__image {
+      &__content {
+        border-radius: var(--m-border-radius);
+        background: var(--neutral-neutral-4);
+        padding: 8px;
+        width: 40px;
+      }
+      &__item {
+        display: block;
+      }
+    }
+    &__content {
+      &__title {
+        margin-top: 1rem;
+        font-family: var(--font-sans);
+        font-size: 1.15rem;
+        font-weight: 700;
+        color: var(--neutral-neutral-1);
+      }
+      &__text {
+        font-family: var(--font-sans);
+        margin-top: 0.5rem;
+        font-weight: 400;
+        font-size: 1rem;
+        color: var(--neutral-neutral-1);
+
+        .m-richText p:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+    .card-story-item {
+      &__content {
+        flex: 1;
+        padding-left: 1rem;
+
+        &__title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,92 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const CardStoryItemStyled = styled.li`
+  position: relative;
+  background: var(--neutral-neutral-6);
+  padding: 1.5rem;
+  border-radius: var(--l-border-radius);
+  margin-top: 16px;
+  list-style-type: none;
+
+  &:first-child {
+    margin-top: 0;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: calc(50% + 5px);
+      left: -26px;
+      width: 10px;
+      background: var(--others-white);
+    }
+  }
+
+  &:last-child:before {
+    content: '';
+    position: absolute;
+    top: calc(50% + 5px);
+    bottom: 0;
+    left: -26px;
+    width: 10px;
+    background: var(--others-white);
+  }
+
+  .card-story-item {
+    &__bullet {
+      position: absolute;
+      top: calc(50% - 5px);
+      left: -26px;
+      width: 10px;
+      height: 10px;
+      background-color: #333;
+      border-radius: 50%;
+    }
+    &__image {
+      &__content {
+        border-radius: var(--m-border-radius);
+        background: var(--neutral-neutral-4);
+        padding: 8px;
+        width: 40px;
+      }
+      &__item {
+        display: block;
+      }
+    }
+    &__content {
+      &__title {
+        margin-top: 1rem;
+        font-family: var(--font-sans);
+        font-size: 1.15rem;
+        font-weight: 700;
+        color: var(--neutral-neutral-1);
+      }
+      &__text {
+        font-family: var(--font-sans);
+        margin-top: 0.5rem;
+        font-weight: 400;
+        font-size: 1rem;
+        color: var(--neutral-neutral-1);
+
+        .m-richText p:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+    .card-story-item {
+      &__content {
+        flex: 1;
+        padding-left: 1rem;
+
+        &__title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+`

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

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react'
+
+import { type CardStoryItemProps } from './CardStoryItemProps.types'
+import { CardStoryItemStyled } from './CardStoryItem.styled'
+
+const CardStoryItem: FC<CardStoryItemProps> = ({ image, title, text }) => {
+  return (
+    <CardStoryItemStyled className='card-story-item'>
+      <span className='card-story-item__bullet'></span>
+      <div className='card-story-item__image'>
+        <div className='card-story-item__image__content'>
+          <img className='card-story-item__image__item' src={image} alt='' role='img' width='24' height='24'></img>
+        </div>
+      </div>
+      <div className='card-story-item__content'>
+        <p className='card-story-item__content__title'>{title}</p>
+        <div className='card-story-item__content__text'>{text}</div>
+      </div>
+    </CardStoryItemStyled>
+  )
+}
+
+export default CardStoryItem

package/dist/src/components/atoms/CardStoryItem/CardStoryItemProps.types.d.ts

@@ -0,0 +1,5 @@
+export interface CardStoryItemProps {
+    image: string;
+    title: string;
+    text: React.JSX.Element;
+}

package/dist/src/components/atoms/CardStoryItem/CardStoryItemProps.types.js

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

package/dist/src/components/atoms/CardStoryItem/CardStoryItemProps.types.ts

@@ -0,0 +1,5 @@
+export interface CardStoryItemProps {
+  image: string
+  title: string
+  text: React.JSX.Element
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardStoryItem } from '../../atoms/CardStoryItem';
+import { CardStoryStyled } from './CardStory.styled';
+const CardStory = ({ cardStoryItems }) => {
+    return (_jsx(CardStoryStyled, { className: 'card-story', children: cardStoryItems.map((item) => (_jsx(CardStoryItem, { ...item }, item.title))) }));
+};
+export default CardStory;

package/dist/src/components/molecules/CardStory/CardStory.styled.d.ts

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

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+export const CardStoryStyled = styled.ul `
+  position: relative;
+  padding-left: 26px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 0px;
+    bottom: 0;
+    background-image: repeating-linear-gradient(
+      180deg,
+      var(--neutral-neutral-3),
+      var(--neutral-neutral-3) 11px,
+      transparent 11px,
+      transparent 18px
+    );
+    background-position: left -4px;
+    background-repeat: repeat-y;
+    background-size: 2px 100%;
+    width: 2px;
+  }
+`;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+export const CardStoryStyled = styled.ul`
+  position: relative;
+  padding-left: 26px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 0px;
+    bottom: 0;
+    background-image: repeating-linear-gradient(
+      180deg,
+      var(--neutral-neutral-3),
+      var(--neutral-neutral-3) 11px,
+      transparent 11px,
+      transparent 18px
+    );
+    background-position: left -4px;
+    background-repeat: repeat-y;
+    background-size: 2px 100%;
+    width: 2px;
+  }
+`

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

@@ -0,0 +1,17 @@
+import React, { type FC } from 'react'
+
+import { CardStoryItem } from '../../atoms/CardStoryItem'
+import { CardStoryProps } from './CardStoryProps.types'
+import { CardStoryStyled } from './CardStory.styled'
+
+const CardStory: FC<CardStoryProps> = ({ cardStoryItems }) => {
+  return (
+    <CardStoryStyled className='card-story'>
+      {cardStoryItems.map((item) => (
+        <CardStoryItem key={item.title} {...item} />
+      ))}
+    </CardStoryStyled>
+  )
+}
+
+export default CardStory

package/dist/src/components/molecules/CardStory/CardStoryProps.types.d.ts

@@ -0,0 +1,4 @@
+import { CardStoryItemProps } from 'src/components/atoms/CardStoryItem';
+export interface CardStoryProps {
+    cardStoryItems: CardStoryItemProps[];
+}

package/dist/src/components/molecules/CardStory/CardStoryProps.types.js

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

package/dist/src/components/molecules/CardStory/CardStoryProps.types.ts

@@ -0,0 +1,5 @@
+import { CardStoryItemProps } from 'src/components/atoms/CardStoryItem'
+
+export interface CardStoryProps {
+  cardStoryItems: CardStoryItemProps[]
+}

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

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

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

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

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

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

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

@@ -16,11 +16,9 @@ export const KeyFactCardListRatafiaStyled = styled.div `
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);
 
-  height: max(calc(100vh - 24.5rem), 15rem;
-
+  height: calc(100vh - 24.5rem);
   @media ${device['portrait-tablets']} {
-    height: max(calc(100vh - 33.5rem), 15rem);
+    height: calc(100vh - 33.5rem);
   }
-
   overflow-y: auto;
 `;

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

@@ -17,11 +17,9 @@ export const KeyFactCardListRatafiaStyled = styled.div`
   border-bottom: 8px solid var(--neutral-neutral-6);
   background: var(--neutral-neutral-6);
 
-  height: max(calc(100vh - 24.5rem), 15rem;
-
+  height: calc(100vh - 24.5rem);
   @media ${device['portrait-tablets']} {
-    height: max(calc(100vh - 33.5rem), 15rem);
+    height: calc(100vh - 33.5rem);
   }
-
   overflow-y: auto;
 `

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

@@ -11,13 +11,19 @@ export const AboutUsContentStyled = styled.div `
 
   .about-us-content__body {
     margin-top: 1rem;
-    margin-bottom: 2rem;
     font-family: var(--font-sans);
 
     @media ${device['landscape-tablets']} {
-      flex-basis: 50%;
+      flex-basis: 56%;
       margin-top: 0;
-      margin-bottom: 3rem;
+    }
+
+    @media ${device.laptop} {
+      flex-basis: 59%;
+    }
+
+    @media ${device.desktop} {
+      flex-basis: 60%;
     }
 
     .m-richText {
@@ -44,16 +50,28 @@ export const AboutUsContentStyled = styled.div `
 
     @media ${device['landscape-tablets']} {
       margin-bottom: 0;
-      margin-right: 1rem;
-      flex-basis: 50%;
+      margin-right: 1.5rem;
+      flex-basis: 42%;
     }
 
     @media ${device.laptop} {
-      margin-bottom: -3rem;
+      flex-basis: 39%;
+      margin-right: 2.5rem;
+    }
+
+    @media ${device.desktop} {
+      flex-basis: 36.3%;
     }
 
     img {
       width: 100%;
+      border-radius: 16px;
+    }
+
+    .gatsby-image-wrapper-constrained {
+      @media ${device['landscape-tablets']} {
+        height: 100%;
+      }
     }
   }
 `;

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

@@ -12,13 +12,19 @@ export const AboutUsContentStyled = styled.div`
 
   .about-us-content__body {
     margin-top: 1rem;
-    margin-bottom: 2rem;
     font-family: var(--font-sans);
 
     @media ${device['landscape-tablets']} {
-      flex-basis: 50%;
+      flex-basis: 56%;
       margin-top: 0;
-      margin-bottom: 3rem;
+    }
+
+    @media ${device.laptop} {
+      flex-basis: 59%;
+    }
+
+    @media ${device.desktop} {
+      flex-basis: 60%;
     }
 
     .m-richText {
@@ -45,16 +51,28 @@ export const AboutUsContentStyled = styled.div`
 
     @media ${device['landscape-tablets']} {
       margin-bottom: 0;
-      margin-right: 1rem;
-      flex-basis: 50%;
+      margin-right: 1.5rem;
+      flex-basis: 42%;
     }
 
     @media ${device.laptop} {
-      margin-bottom: -3rem;
+      flex-basis: 39%;
+      margin-right: 2.5rem;
+    }
+
+    @media ${device.desktop} {
+      flex-basis: 36.3%;
     }
 
     img {
       width: 100%;
+      border-radius: 16px;
+    }
+
+    .gatsby-image-wrapper-constrained {
+      @media ${device['landscape-tablets']} {
+        height: 100%;
+      }
     }
   }
 `

package/dist/src/components/organisms/LanguageSelector/useLanguagesSelector.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { CAFlag } from '../../../../images/componentsSvg/flags/CAFlag';
+import { DEFlag } from '../../../../images/componentsSvg/flags/DEFlag';
 import { GBFlag } from '../../../../images/componentsSvg/flags/GBFlag';
 import { USFlag } from '../../../../images/componentsSvg/flags/USFlag';
 export const useLanguagesSelector = (languages) => {
     const flags = new Map([
         ['en-US', _jsx(USFlag, {}, 'us-flag')],
-        ['en-GB', _jsx(GBFlag, {}, 'gb-flag')]
+        ['en-GB', _jsx(GBFlag, {}, 'gb-flag')],
+        ['en-CA', _jsx(CAFlag, {}, 'ca-flag')],
+        ['de-DE', _jsx(DEFlag, {}, 'de-flag')]
     ]);
     const initSelector = () => {
         if (languages.length === 0)

package/dist/src/components/organisms/LanguageSelector/useLanguagesSelector.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { CAFlag } from '../../../../images/componentsSvg/flags/CAFlag'
+import { DEFlag } from '../../../../images/componentsSvg/flags/DEFlag'
 import { GBFlag } from '../../../../images/componentsSvg/flags/GBFlag'
 import { type LenguageSelectorItem } from './LenguageSelectorItem'
 import { USFlag } from '../../../../images/componentsSvg/flags/USFlag'
@@ -9,7 +11,9 @@ export const useLanguagesSelector = (
 ): { languagesSelector: LenguageSelectorItem[] } => {
   const flags = new Map<string, React.ReactNode>([
     ['en-US', <USFlag key='us-flag' />],
-    ['en-GB', <GBFlag key='gb-flag' />]
+    ['en-GB', <GBFlag key='gb-flag' />],
+    ['en-CA', <CAFlag key='ca-flag' />],
+    ['de-DE', <DEFlag key='de-flag' />]
   ])
 
   const initSelector = (): LenguageSelectorItem[] => {

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

@@ -17,8 +17,7 @@ export const LayoutRatafiaStyled = styled.div `
     justify-content: space-between;
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
-    height: unset;
-    min-height: calc(100vh - 8.375rem);
+    height: calc(100vh - 8.375rem);
     border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);

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

@@ -18,8 +18,7 @@ export const LayoutRatafiaStyled = styled.div`
     justify-content: space-between;
     padding: 1.5rem 1.5rem 0 1.5rem;
     width: 100%;
-    height: unset;
-    min-height: calc(100vh - 8.375rem);
+    height: calc(100vh - 8.375rem);
     border-radius: var(--l-border-radius) var(--l-border-radius) 0 0;
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);