@npm_leadtech/legal-lib-components 7.19.2 → 7.20.0

package/dist/css/styles.css

@@ -2070,6 +2070,9 @@ h2.react-datepicker__current-month {
   color: var(--neutral-neutral-1);
   font-weight: bold;
 }
+.e-text .e-text__inner {
+  grid-row: 1;
+}
 .e-text .form-group__label-icon {
   color: var(--neutral-neutral-1);
   font-weight: bold;
@@ -2154,6 +2157,8 @@ h2.react-datepicker__current-month {
 }
 .e-text--has-prefix {
   width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
 }
 @media (min-width: 575px) {
   .e-text--has-prefix {
@@ -2162,12 +2167,21 @@ h2.react-datepicker__current-month {
 }
 .e-text--has-prefix .has-currency-prefix {
   padding-left: 2rem;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
 }
 .e-text--has-prefix .has-currency-suffix {
   padding-right: 2rem;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
 }
 .e-text--has-prefix .has-percent-suffix {
   padding-left: 0.75rem;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
 }
 .e-text .input-icon {
   position: absolute;
@@ -2184,25 +2198,26 @@ h2.react-datepicker__current-month {
   border: none;
 }
 .e-text .input-icon-currency-suffix {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  background: none;
-  border: none;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  margin-left: calc(100% - 30px);
+  width: fit-content;
 }
 .e-text .input-icon-currency-prefix {
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-  background: none;
-  border: none;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  z-index: 1;
+  padding-left: 0.87rem;
+  width: fit-content;
 }
 .e-text .input-icon-percent-suffix {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  background: none;
-  border: none;
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  margin-left: calc(100% - 30px);
+  width: fit-content;
 }
 .e-text .formgroup--input__button {
   align-self: flex-start;

package/dist/images/componentsSvg/InfoLocationSvg.d.ts

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

package/dist/images/componentsSvg/InfoLocationSvg.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InfoLocationSvg = () => {
+    return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M10.0002 17.7708C9.80572 17.7708 9.61127 17.7361 9.41683 17.6666C9.22238 17.5972 9.04877 17.493 8.896 17.3541C7.99322 16.5208 7.19461 15.7083 6.50016 14.9166C5.80572 14.125 5.22586 13.3576 4.76058 12.6145C4.2953 11.8715 3.94113 11.1562 3.69808 10.4687C3.45502 9.78121 3.3335 9.12496 3.3335 8.49996C3.3335 6.41663 4.00363 4.7569 5.34391 3.52079C6.68419 2.28468 8.23627 1.66663 10.0002 1.66663C11.7641 1.66663 13.3161 2.28468 14.6564 3.52079C15.9967 4.7569 16.6668 6.41663 16.6668 8.49996C16.6668 9.12496 16.5453 9.78121 16.3022 10.4687C16.0592 11.1562 15.705 11.8715 15.2397 12.6145C14.7745 13.3576 14.1946 14.125 13.5002 14.9166C12.8057 15.7083 12.0071 16.5208 11.1043 17.3541C10.9516 17.493 10.7779 17.5972 10.5835 17.6666C10.3891 17.7361 10.1946 17.7708 10.0002 17.7708ZM10.0002 9.99996C10.4585 9.99996 10.8509 9.83677 11.1772 9.51038C11.5036 9.18399 11.6668 8.79163 11.6668 8.33329C11.6668 7.87496 11.5036 7.4826 11.1772 7.15621C10.8509 6.82982 10.4585 6.66663 10.0002 6.66663C9.54183 6.66663 9.14947 6.82982 8.82308 7.15621C8.49669 7.4826 8.3335 7.87496 8.3335 8.33329C8.3335 8.79163 8.49669 9.18399 8.82308 9.51038C9.14947 9.83677 9.54183 9.99996 10.0002 9.99996Z', fill: '#02374A' }) }) }));
+};

package/dist/images/componentsSvg/InfoLocationSvg.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const InfoLocationSvg: React.FC = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+      <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+        <path
+          d='M10.0002 17.7708C9.80572 17.7708 9.61127 17.7361 9.41683 17.6666C9.22238 17.5972 9.04877 17.493 8.896 17.3541C7.99322 16.5208 7.19461 15.7083 6.50016 14.9166C5.80572 14.125 5.22586 13.3576 4.76058 12.6145C4.2953 11.8715 3.94113 11.1562 3.69808 10.4687C3.45502 9.78121 3.3335 9.12496 3.3335 8.49996C3.3335 6.41663 4.00363 4.7569 5.34391 3.52079C6.68419 2.28468 8.23627 1.66663 10.0002 1.66663C11.7641 1.66663 13.3161 2.28468 14.6564 3.52079C15.9967 4.7569 16.6668 6.41663 16.6668 8.49996C16.6668 9.12496 16.5453 9.78121 16.3022 10.4687C16.0592 11.1562 15.705 11.8715 15.2397 12.6145C14.7745 13.3576 14.1946 14.125 13.5002 14.9166C12.8057 15.7083 12.0071 16.5208 11.1043 17.3541C10.9516 17.493 10.7779 17.5972 10.5835 17.6666C10.3891 17.7361 10.1946 17.7708 10.0002 17.7708ZM10.0002 9.99996C10.4585 9.99996 10.8509 9.83677 11.1772 9.51038C11.5036 9.18399 11.6668 8.79163 11.6668 8.33329C11.6668 7.87496 11.5036 7.4826 11.1772 7.15621C10.8509 6.82982 10.4585 6.66663 10.0002 6.66663C9.54183 6.66663 9.14947 6.82982 8.82308 7.15621C8.49669 7.4826 8.3335 7.87496 8.3335 8.33329C8.3335 8.79163 8.49669 9.18399 8.82308 9.51038C9.14947 9.83677 9.54183 9.99996 10.0002 9.99996Z'
+          fill='#02374A'
+        />
+      </svg>
+    </svg>
+  )
+}

package/dist/images/componentsSvg/InfoMailSvg.d.ts

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

package/dist/images/componentsSvg/InfoMailSvg.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InfoMailSvg = () => {
+    return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M3.33317 16.6667C2.87484 16.6667 2.48248 16.5035 2.15609 16.1771C1.8297 15.8507 1.6665 15.4584 1.6665 15V5.00004C1.6665 4.54171 1.8297 4.14935 2.15609 3.82296C2.48248 3.49657 2.87484 3.33337 3.33317 3.33337H16.6665C17.1248 3.33337 17.5172 3.49657 17.8436 3.82296C18.17 4.14935 18.3332 4.54171 18.3332 5.00004V15C18.3332 15.4584 18.17 15.8507 17.8436 16.1771C17.5172 16.5035 17.1248 16.6667 16.6665 16.6667H3.33317ZM9.99984 10.6875C10.0693 10.6875 10.1422 10.6771 10.2186 10.6563C10.295 10.6355 10.3679 10.6042 10.4373 10.5625L16.3332 6.87504C16.4443 6.8056 16.5276 6.71879 16.5832 6.61462C16.6387 6.51046 16.6665 6.39587 16.6665 6.27087C16.6665 5.9931 16.5485 5.78476 16.3123 5.64587C16.0762 5.50698 15.8332 5.51393 15.5832 5.66671L9.99984 9.16671L4.4165 5.66671C4.1665 5.51393 3.92345 5.51046 3.68734 5.65629C3.45123 5.80212 3.33317 6.00698 3.33317 6.27087C3.33317 6.40976 3.36095 6.53129 3.4165 6.63546C3.47206 6.73962 3.55539 6.81948 3.6665 6.87504L9.56234 10.5625C9.63178 10.6042 9.7047 10.6355 9.78109 10.6563C9.85748 10.6771 9.93039 10.6875 9.99984 10.6875Z', fill: '#02374A' }) }));
+};

package/dist/images/componentsSvg/InfoMailSvg.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const InfoMailSvg: React.FC = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+      <path
+        d='M3.33317 16.6667C2.87484 16.6667 2.48248 16.5035 2.15609 16.1771C1.8297 15.8507 1.6665 15.4584 1.6665 15V5.00004C1.6665 4.54171 1.8297 4.14935 2.15609 3.82296C2.48248 3.49657 2.87484 3.33337 3.33317 3.33337H16.6665C17.1248 3.33337 17.5172 3.49657 17.8436 3.82296C18.17 4.14935 18.3332 4.54171 18.3332 5.00004V15C18.3332 15.4584 18.17 15.8507 17.8436 16.1771C17.5172 16.5035 17.1248 16.6667 16.6665 16.6667H3.33317ZM9.99984 10.6875C10.0693 10.6875 10.1422 10.6771 10.2186 10.6563C10.295 10.6355 10.3679 10.6042 10.4373 10.5625L16.3332 6.87504C16.4443 6.8056 16.5276 6.71879 16.5832 6.61462C16.6387 6.51046 16.6665 6.39587 16.6665 6.27087C16.6665 5.9931 16.5485 5.78476 16.3123 5.64587C16.0762 5.50698 15.8332 5.51393 15.5832 5.66671L9.99984 9.16671L4.4165 5.66671C4.1665 5.51393 3.92345 5.51046 3.68734 5.65629C3.45123 5.80212 3.33317 6.00698 3.33317 6.27087C3.33317 6.40976 3.36095 6.53129 3.4165 6.63546C3.47206 6.73962 3.55539 6.81948 3.6665 6.87504L9.56234 10.5625C9.63178 10.6042 9.7047 10.6355 9.78109 10.6563C9.85748 10.6771 9.93039 10.6875 9.99984 10.6875Z'
+        fill='#02374A'
+      />
+    </svg>
+  )
+}

package/dist/images/componentsSvg/InfoPhoneSvg.d.ts

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

package/dist/images/componentsSvg/InfoPhoneSvg.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InfoPhoneSvg = () => {
+    return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M16.6667 10C16.4444 10 16.2465 9.92014 16.0729 9.76042C15.8993 9.60069 15.7986 9.40278 15.7708 9.16667C15.5903 7.875 15.0451 6.77431 14.1354 5.86458C13.2257 4.95486 12.125 4.40972 10.8333 4.22917C10.5972 4.20139 10.3993 4.10417 10.2396 3.9375C10.0799 3.77083 10 3.56944 10 3.33333C10 3.09722 10.0833 2.89931 10.25 2.73958C10.4167 2.57986 10.6111 2.51389 10.8333 2.54167C12.5833 2.73611 14.0764 3.45139 15.3125 4.6875C16.5486 5.92361 17.2639 7.41667 17.4583 9.16667C17.4861 9.38889 17.4201 9.58333 17.2604 9.75C17.1007 9.91667 16.9028 10 16.6667 10ZM13.1875 10C13.0069 10 12.8472 9.9375 12.7083 9.8125C12.5694 9.6875 12.4653 9.52083 12.3958 9.3125C12.2847 8.90972 12.0729 8.55208 11.7604 8.23958C11.4479 7.92708 11.0903 7.71528 10.6875 7.60417C10.4792 7.53472 10.3125 7.43056 10.1875 7.29167C10.0625 7.15278 10 6.98611 10 6.79167C10 6.51389 10.0972 6.28819 10.2917 6.11458C10.4861 5.94097 10.7014 5.88194 10.9375 5.9375C11.7153 6.11806 12.3854 6.48958 12.9479 7.05208C13.5104 7.61458 13.8819 8.28472 14.0625 9.0625C14.1181 9.29861 14.0556 9.51389 13.875 9.70833C13.6944 9.90278 13.4653 10 13.1875 10ZM16.625 17.5C14.8889 17.5 13.1736 17.1215 11.4792 16.3646C9.78472 15.6076 8.24306 14.5347 6.85417 13.1458C5.46528 11.7569 4.39236 10.2153 3.63542 8.52083C2.87847 6.82639 2.5 5.11111 2.5 3.375C2.5 3.125 2.58333 2.91667 2.75 2.75C2.91667 2.58333 3.125 2.5 3.375 2.5H6.75C6.94444 2.5 7.11806 2.56597 7.27083 2.69792C7.42361 2.82986 7.51389 2.98611 7.54167 3.16667L8.08333 6.08333C8.11111 6.30556 8.10417 6.49306 8.0625 6.64583C8.02083 6.79861 7.94444 6.93056 7.83333 7.04167L5.8125 9.08333C6.09028 9.59722 6.42014 10.0938 6.80208 10.5729C7.18403 11.0521 7.60417 11.5139 8.0625 11.9583C8.49306 12.3889 8.94444 12.7882 9.41667 13.1562C9.88889 13.5243 10.3889 13.8611 10.9167 14.1667L12.875 12.2083C13 12.0833 13.1632 11.9896 13.3646 11.9271C13.566 11.8646 13.7639 11.8472 13.9583 11.875L16.8333 12.4583C17.0278 12.5139 17.1875 12.6146 17.3125 12.7604C17.4375 12.9062 17.5 13.0694 17.5 13.25V16.625C17.5 16.875 17.4167 17.0833 17.25 17.25C17.0833 17.4167 16.875 17.5 16.625 17.5Z', fill: '#02374A' }) }));
+};

package/dist/images/componentsSvg/InfoPhoneSvg.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const InfoPhoneSvg: React.FC = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+      <path
+        d='M16.6667 10C16.4444 10 16.2465 9.92014 16.0729 9.76042C15.8993 9.60069 15.7986 9.40278 15.7708 9.16667C15.5903 7.875 15.0451 6.77431 14.1354 5.86458C13.2257 4.95486 12.125 4.40972 10.8333 4.22917C10.5972 4.20139 10.3993 4.10417 10.2396 3.9375C10.0799 3.77083 10 3.56944 10 3.33333C10 3.09722 10.0833 2.89931 10.25 2.73958C10.4167 2.57986 10.6111 2.51389 10.8333 2.54167C12.5833 2.73611 14.0764 3.45139 15.3125 4.6875C16.5486 5.92361 17.2639 7.41667 17.4583 9.16667C17.4861 9.38889 17.4201 9.58333 17.2604 9.75C17.1007 9.91667 16.9028 10 16.6667 10ZM13.1875 10C13.0069 10 12.8472 9.9375 12.7083 9.8125C12.5694 9.6875 12.4653 9.52083 12.3958 9.3125C12.2847 8.90972 12.0729 8.55208 11.7604 8.23958C11.4479 7.92708 11.0903 7.71528 10.6875 7.60417C10.4792 7.53472 10.3125 7.43056 10.1875 7.29167C10.0625 7.15278 10 6.98611 10 6.79167C10 6.51389 10.0972 6.28819 10.2917 6.11458C10.4861 5.94097 10.7014 5.88194 10.9375 5.9375C11.7153 6.11806 12.3854 6.48958 12.9479 7.05208C13.5104 7.61458 13.8819 8.28472 14.0625 9.0625C14.1181 9.29861 14.0556 9.51389 13.875 9.70833C13.6944 9.90278 13.4653 10 13.1875 10ZM16.625 17.5C14.8889 17.5 13.1736 17.1215 11.4792 16.3646C9.78472 15.6076 8.24306 14.5347 6.85417 13.1458C5.46528 11.7569 4.39236 10.2153 3.63542 8.52083C2.87847 6.82639 2.5 5.11111 2.5 3.375C2.5 3.125 2.58333 2.91667 2.75 2.75C2.91667 2.58333 3.125 2.5 3.375 2.5H6.75C6.94444 2.5 7.11806 2.56597 7.27083 2.69792C7.42361 2.82986 7.51389 2.98611 7.54167 3.16667L8.08333 6.08333C8.11111 6.30556 8.10417 6.49306 8.0625 6.64583C8.02083 6.79861 7.94444 6.93056 7.83333 7.04167L5.8125 9.08333C6.09028 9.59722 6.42014 10.0938 6.80208 10.5729C7.18403 11.0521 7.60417 11.5139 8.0625 11.9583C8.49306 12.3889 8.94444 12.7882 9.41667 13.1562C9.88889 13.5243 10.3889 13.8611 10.9167 14.1667L12.875 12.2083C13 12.0833 13.1632 11.9896 13.3646 11.9271C13.566 11.8646 13.7639 11.8472 13.9583 11.875L16.8333 12.4583C17.0278 12.5139 17.1875 12.6146 17.3125 12.7604C17.4375 12.9062 17.5 13.0694 17.5 13.25V16.625C17.5 16.875 17.4167 17.0833 17.25 17.25C17.0833 17.4167 16.875 17.5 16.625 17.5Z'
+        fill='#02374A'
+      />
+    </svg>
+  )
+}

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

@@ -80,7 +80,7 @@ export const CardPaneStyled = styled.div `
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
+        color: --neutral-neutral-2;
       }
     }
     &--description {

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

@@ -81,7 +81,7 @@ export const CardPaneStyled = styled.div`
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
+        color: --neutral-neutral-2;
       }
     }
     &--description {

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

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

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

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

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

@@ -66,6 +66,3 @@ export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
-export * from './MobileTrigger';
-export * from './PhoneNumberDisplay';
-export * from './ContactInformationHeader';

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

@@ -66,6 +66,3 @@ export * from './TrustPilot';
 export * from './Video';
 export * from './WhyLawDistrictItems';
 export * from './WideInfoBar';
-export * from './MobileTrigger';
-export * from './PhoneNumberDisplay';
-export * from './ContactInformationHeader';

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

@@ -66,6 +66,3 @@ export * from './TrustPilot'
 export * from './Video'
 export * from './WhyLawDistrictItems'
 export * from './WideInfoBar'
-export * from './MobileTrigger'
-export * from './PhoneNumberDisplay'
-export * from './ContactInformationHeader'

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

@@ -13,7 +13,7 @@ export const ContactInformation = styled.div `
     margin-bottom: 1rem;
     width: 100%;
 
-    @media (min-width: 828px) {
+    @media (min-width: 768px) {
       display: none;
     }
   }

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

@@ -14,7 +14,7 @@ export const ContactInformation = styled.div`
     margin-bottom: 1rem;
     width: 100%;
 
-    @media (min-width: 828px) {
+    @media (min-width: 768px) {
       display: none;
     }
   }

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContactInfoBoxStyled } from './ContactInfoBox.styled';
+import { ContactInfoCard } from '../ContactInfoCard';
+export const ContactInfoBox = ({ items }) => {
+    return (_jsx(ContactInfoBoxStyled, { className: 'contact-info-box-container', children: items.map((item, index) => (_jsx(ContactInfoCard, { ...item }, index))) }));
+};

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

@@ -0,0 +1 @@
+export declare const ContactInfoBoxStyled: 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/molecules/ContactInfoBox/ContactInfoBox.styled.js

@@ -0,0 +1,23 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ContactInfoBoxStyled = styled.div `
+  display: none;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+    flex-direction: column;
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ContactInfoBoxStyled = styled.div`
+  display: none;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: flex;
+    flex-direction: column;
+  }
+`

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { type ContactInfoBoxProps } from './ContactInfoBoxProps.types'
+import { ContactInfoBoxStyled } from './ContactInfoBox.styled'
+import { ContactInfoCard } from '../ContactInfoCard'
+
+export const ContactInfoBox: React.FC<ContactInfoBoxProps> = ({ items }) => {
+  return (
+    <ContactInfoBoxStyled className='contact-info-box-container'>
+      {items.map((item, index) => (
+        <ContactInfoCard key={index} {...item} />
+      ))}
+    </ContactInfoBoxStyled>
+  )
+}

package/dist/src/components/molecules/ContactInfoBox/ContactInfoBoxProps.types.d.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard';
+export interface ContactInfoBoxProps {
+    items: ContactInfoCardProps[];
+}

package/dist/src/components/molecules/ContactInfoBox/ContactInfoBoxProps.types.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard'
+export interface ContactInfoBoxProps {
+  items: ContactInfoCardProps[]
+}

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

@@ -0,0 +1,2 @@
+export { ContactInfoBox } from './ContactInfoBox';
+export { type ContactInfoBoxProps } from './ContactInfoBoxProps.types';

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

@@ -0,0 +1 @@
+export { ContactInfoBox } from './ContactInfoBox';

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

@@ -0,0 +1,2 @@
+export { ContactInfoBox } from './ContactInfoBox'
+export { type ContactInfoBoxProps } from './ContactInfoBoxProps.types'

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContactInfoBoxMobileStyled } from './ContactInfoBoxMobile.styled';
+import { ContactInfoCard } from '../ContactInfoCard';
+export const ContactInfoBoxMobile = ({ items }) => {
+    return (_jsx(ContactInfoBoxMobileStyled, { className: 'contact-info-box-container', children: items.map((item, index) => (_jsx(ContactInfoCard, { ...item }, index))) }));
+};

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

@@ -0,0 +1 @@
+export declare const ContactInfoBoxMobileStyled: 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/molecules/ContactInfoBoxMobile/ContactInfoBoxMobile.styled.js

@@ -0,0 +1,23 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ContactInfoBoxMobileStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,24 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const ContactInfoBoxMobileStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--others-white);
+  width: 100%;
+  border-radius: var(--s-border-radius);
+  margin-bottom: 2rem;
+  padding: 0.5rem 1.5rem;
+  text-decoration: none;
+  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  @media ${device['landscape-tablets']} {
+    display: none;
+  }
+`

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { type ContactInfoBoxMobileProps } from './ContactInfoBoxMobileProps.types'
+import { ContactInfoBoxMobileStyled } from './ContactInfoBoxMobile.styled'
+import { ContactInfoCard } from '../ContactInfoCard'
+
+export const ContactInfoBoxMobile: React.FC<ContactInfoBoxMobileProps> = ({ items }) => {
+  return (
+    <ContactInfoBoxMobileStyled className='contact-info-box-container'>
+      {items.map((item, index) => (
+        <ContactInfoCard key={index} {...item} />
+      ))}
+    </ContactInfoBoxMobileStyled>
+  )
+}

package/dist/src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types.d.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard';
+export interface ContactInfoBoxMobileProps {
+    items: ContactInfoCardProps[];
+}

package/dist/src/components/molecules/ContactInfoBoxMobile/ContactInfoBoxMobileProps.types.ts

@@ -0,0 +1,4 @@
+import { type ContactInfoCardProps } from '../ContactInfoCard'
+export interface ContactInfoBoxMobileProps {
+  items: ContactInfoCardProps[]
+}

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

@@ -0,0 +1,2 @@
+export { ContactInfoBoxMobile } from './ContactInfoBoxMobile';
+export { type ContactInfoBoxMobileProps } from './ContactInfoBoxMobileProps.types';

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

@@ -0,0 +1 @@
+export { ContactInfoBoxMobile } from './ContactInfoBoxMobile';

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

@@ -0,0 +1,2 @@
+export { ContactInfoBoxMobile } from './ContactInfoBoxMobile'
+export { type ContactInfoBoxMobileProps } from './ContactInfoBoxMobileProps.types'

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../atoms';
+import { ContactInfoCardStyled } from './ContactInfoCard.styled';
+import { InfoLocationSvg } from '../../../../images/componentsSvg/InfoLocationSvg';
+import { InfoMailSvg } from '../../../../images/componentsSvg/InfoMailSvg';
+import { InfoPhoneSvg } from '../../../../images/componentsSvg/InfoPhoneSvg';
+const iconMap = {
+    email: _jsx(InfoMailSvg, {}),
+    phone: _jsx(InfoPhoneSvg, {}),
+    location: _jsx(InfoLocationSvg, {})
+};
+export const ContactInfoCard = ({ type, isMobile = false, title, text }) => {
+    if (type === 'phone' && isMobile) {
+        return (_jsxs(ContactInfoCardStyled, { className: 'contact-info-card phone-mobile', children: [_jsx(Button, { centered: true, isExternal: true, link: `tel:${title}`, gtmTag: 'clicked_phone_contactus', givenClass: 'phone-mobile-contact-button e-button e-button--link e-button--primary-1 e-button--center', label: title ?? '', dataQa: 'phone_contact_box' }, title), _jsx("p", { className: 'text', children: text })] }));
+    }
+    else {
+        return (_jsx(ContactInfoCardStyled, { className: 'contact-info-card', children: _jsxs("div", { className: 'info-card-wrapper', children: [_jsx("div", { className: 'info-icon', children: iconMap[type] }), _jsxs("div", { className: 'content', children: [title && (_jsx("p", { className: `title${type === 'email' ? ' email' : ''}`, children: type === 'email' ? (_jsx("a", { href: `mailto:${title}`, children: title })) : type === 'phone' ? (_jsx("a", { href: `tel:${title}`, children: title })) : (title) })), _jsx("p", { className: 'text', children: text })] })] }) }));
+    }
+};

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

@@ -0,0 +1 @@
+export declare const ContactInfoCardStyled: 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/molecules/ContactInfoCard/ContactInfoCard.styled.js

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+export const ContactInfoCardStyled = styled.div `
+  width: 100%;
+  background-color: var(--neutral-neutral-6);
+  border-radius: var(--s-border-radius);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+
+  &.phone-mobile {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    .phone-mobile-contact {
+      &-button {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+        width: 100%;
+
+        &:before {
+          content: '';
+          width: 20px;
+          height: 20px;
+          background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iZXA3dHIycDdyYSIgZD0iTTIwLjAxIDE1LjM4Yy0xLjIzIDAtMi40Mi0uMi0zLjUzLS41Ni0uMzUtLjEyLS43NC0uMDMtMS4wMS4yNGwtMS41NyAxLjk3Yy0yLjgzLTEuMzUtNS40OC0zLjktNi44OS02LjgzbDEuOTUtMS42NmMuMjctLjI4LjM1LS42Ny4yNC0xLjAyLS4zNy0xLjExLS41Ni0yLjMtLjU2LTMuNTMgMC0uNTQtLjQ1LS45OS0uOTktLjk5SDQuMTlDMy42NSAzIDMgMy4yNCAzIDMuOTkgMyAxMy4yOCAxMC43MyAyMSAyMC4wMSAyMWMuNzEgMCAuOTktLjYzLjk5LTEuMTh2LTMuNDVjMC0uNTQtLjQ1LS45OS0uOTktLjk5eiIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzc2LjAwMDAwMCwgLTMxNC4wMDAwMDApIHRyYW5zbGF0ZSgzMjguMDAwMDAwLCAyMDUuMDAwMDAwKSB0cmFuc2xhdGUoMzIuMDAwMDAwLCA5MC4wMDAwMDApIHRyYW5zbGF0ZSgxNi4wMDAwMDAsIDE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSI3dHZidm9pbXpiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2VwN3RyMnA3cmEiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBjbGFzcz0iaWNvbi13ZWItMjQtcCIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCM3dHZidm9pbXpiKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMCAwSDI0VjI0SDB6Ii8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+          margin-right: 0.5rem;
+        }
+      }
+
+      &-text {
+        color: var(--neutral-neutral-2);
+        text-align: center;
+        margin: 0 0 2rem;
+      }
+    }
+  }
+
+  .info-card-wrapper {
+    display: flex;
+  }
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      letter-spacing: -1px;
+    }
+  }
+
+  .info-icon {
+    margin-top: 0.1rem;
+    margin-right: 0.5rem;
+
+    path {
+      fill: var(--primary-main-dark-1);
+    }
+  }
+
+  .title {
+    color: var(--primary-main-dark-1);
+    font-size: 1rem;
+    font-weight: bold;
+
+    &.email {
+      text-decoration: underline;
+    }
+
+    a {
+      color: var(--primary-main-dark-1);
+    }
+  }
+
+  .text {
+    font-size: 0.875rem;
+    color: var(--neutral-neutral-2);
+  }
+`;