@npm_leadtech/legal-lib-components 7.85.1 → 7.85.2

package/dist/css/styles.css

@@ -93,6 +93,19 @@ html {
   --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
   --global-gap: 1rem;
 }
+html[data-theme=primaryblue] {
+  --font-sans: "Poppins", sans-serif;
+  --font-serif: "Poppins", serif;
+  --s-border-radius: 0.25rem;
+  --m-border-radius: 0.5rem;
+  --l-border-radius: 1rem;
+  --box-shadow-small: 0 0.125rem 0.375rem 0 rgba(var(--primary-main-dark-1-rgb), 0.25);
+  --box-shadow-medium: 0 0.25rem 0.5rem 0 rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-menu: 0 0.25rem 0.5rem -0.5rem rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-tippy-box: 0 0.25rem 0.5rem 0.25rem rgba(var(--primary-main-dark-1-rgb), 0.2);
+  --box-shadow-container: 0px 2px 6px 0px rgba(var(--primary-main-dark-1-rgb), 0.25);
+  --global-gap: 1rem;
+}
 *,
 *::before,
 *::after {
@@ -228,8 +241,6 @@ html {
   --snackbar-success-border: #34b2a7;
   --snackbar-reminder-bg: #f2bd6a;
   --snackbar-reminder-border: #cd9a4c;
-}
-html {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -264,8 +275,10 @@ html {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=districtlaws] {
+html[data-theme=secondaryorange] {
   --primary-main-light-6: #fff5ee;
   --primary-main-light-5: #ffe1cc;
   --primary-main-light-4: #ffc59b;
@@ -300,8 +313,10 @@ html[data-theme=districtlaws] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistricts] {
+html[data-theme=secondaryblue] {
   --primary-main-light-6: #f9f9ff;
   --primary-main-light-5: #eceeff;
   --primary-main-light-4: #c3c9ff;
@@ -336,8 +351,10 @@ html[data-theme=lawdistricts] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrict] {
+html[data-theme=primarygreen] {
   --primary-main-light-6: #eff7f5;
   --primary-main-light-5: #e4f8f3;
   --primary-main-light-4: #c0f7e8;
@@ -372,24 +389,26 @@ html[data-theme=lawdistrict] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrict] .document-status.--in-progress {
+html[data-theme=primarygreen] .document-status.--in-progress {
   background-color: var(--secondary-main-light-4);
   border-color: var(--secondary-main-dark-1);
   color: var(--secondary-main-dark-2);
 }
-html[data-theme=lawdistrict] .document-status.--in-progress svg g > g {
+html[data-theme=primarygreen] .document-status.--in-progress svg g > g {
   fill: var(--secondary-main-dark-2);
 }
-html[data-theme=lawdistrict] .document-status.--is-new {
+html[data-theme=primarygreen] .document-status.--is-new {
   background-color: var(--secondary-main-dark-2);
   border-color: var(--secondary-main);
   color: var(--secondary-main-light-4);
 }
-html[data-theme=lawdistrict] .document-status.--is-new .icon {
+html[data-theme=primarygreen] .document-status.--is-new .icon {
   margin-right: 1.4rem;
 }
-html[data-theme=lawsdistrict] {
+html[data-theme=secondarypurple] {
   --primary-main-light-6: #f9f5ff;
   --primary-main-light-5: #e3d1ff;
   --primary-main-light-4: #b68aff;
@@ -424,8 +443,10 @@ html[data-theme=lawsdistrict] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrictinfo] {
+html[data-theme=secondarygreen] {
   --primary-main-light-6: #f1fff7;
   --primary-main-light-5: #d5ffe6;
   --primary-main-light-4: #6affa5;
@@ -460,8 +481,10 @@ html[data-theme=lawdistrictinfo] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=uslawdistrict] {
+html[data-theme=secondarybrown] {
   --primary-main-light-6: #fffbf2;
   --primary-main-light-5: #fff6e5;
   --primary-main-light-4: #ffe6b7;
@@ -496,8 +519,10 @@ html[data-theme=uslawdistrict] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
 }
-html[data-theme=lawdistrictonline] {
+html[data-theme=secondaryyellow] {
   --primary-main-light-6: #f9ffea;
   --primary-main-light-5: #f0ffc4;
   --primary-main-light-4: #e6ff9f;
@@ -532,6 +557,63 @@ html[data-theme=lawdistrictonline] {
   --others-white: #fff;
   --others-disabled: #6b7280;
   --others-black: #000;
+  --font-main: "Inter", sans-serif;
+  --font-secondary: "Lora", serif;
+}
+html[data-theme=primaryblue] {
+  --button: #1039f5;
+  --button-secondary: #1039f5;
+  --button-hover: #3970ff;
+  --button-tertiary: #3970ff;
+  --button-2: #07144b;
+  --button-4: #07144b;
+  --button-2-hover: #163399;
+  --button-4-hover: #163399;
+  --snackbar-success-color: #163399;
+  --button-4-color: #e9f5ff;
+  --button-secondary-hover: #d7ecff;
+  --feeback-success: #d7ecff;
+  --button-tertiary-hover: #b7daff;
+  --snackbar-success-bg: #8bc1ff;
+  --snackbar-success-border: #5e99ff;
+  --snackbar-reminder-bg: #f98116;
+  --snackbar-reminder-border: #ea660c;
+  --primary-main-light-6: #e9f5ff;
+  --primary-main-light-5: #d7ecff;
+  --primary-main-light-4: #b7daff;
+  --primary-main-light-3: #8bc1ff;
+  --primary-main-light-2: #5e99ff;
+  --primary-main-light-1: #1039f5;
+  --primary-main: #3970ff;
+  --primary-main-dark-1: #163399;
+  --primary-main-dark-1-rgb:
+    2,
+    55,
+    74;
+  --primary-main-dark-2: #07144b;
+  --secondary-main-light-5: #fff6ed;
+  --secondary-main-light-4: #fff0d5;
+  --secondary-main-light-3: #fedcaa;
+  --secondary-main-light-2: #fdc374;
+  --secondary-main-light-1: #fb9e3c;
+  --secondary-main: #f98116;
+  --secondary-main-dark-1: #ea660c;
+  --secondary-main-dark-2: #d3530d;
+  --neutral-main: #1f2532;
+  --neutral-neutral-1: #2f3a4b;
+  --neutral-neutral-2: #496080;
+  --neutral-neutral-3: #b5babd;
+  --neutral-neutral-4: #d2d9e5;
+  --neutral-neutral-5: #ebeef3;
+  --neutral-neutral-6: #f5f7fa;
+  --error-main: #d63737;
+  --error-error-2: #f09d9e;
+  --error-error-3: #ffecef;
+  --others-white: #ffffff;
+  --others-disabled: #6b7280;
+  --others-black: #000;
+  --font-main: "Poppins", sans-serif;
+  --font-secondary: "Poppins", sans-serif;
 }
 body {
   min-height: calc(100vh - 3.25rem);
@@ -658,17 +740,17 @@ body {
   background:
     radial-gradient(
       90.31% 103.09% at 74.2% -62.04%,
-      rgba(7, 128, 128, 0.3) 0%,
-      #062f3c 100%),
+      var(--primary-main-dark-2) 0%,
+      var(--primary-main-dark-1) 100%),
     radial-gradient(
       80.63% 44.37% at 73.54% 70.76%,
-      #078080 0%,
-      #052a37 100%),
+      var(--primary-main) 0%,
+      var(--primary-main-dark-2) 100%),
     radial-gradient(
       92.19% 33.51% at 0% 0%,
-      #078080 0%,
-      #042b39 100%),
-    #032a38;
+      var(--primary-main) 0%,
+      var(--primary-main-dark-1) 100%),
+    var(--primary-main-dark-2);
   background-blend-mode:
     lighten,
     lighten,
@@ -777,7 +859,7 @@ body {
 .serif.--normal-weight {
   font-weight: normal;
 }
-html[data-theme=lawdistrict] .e-button.--primary-3 {
+html[data-theme=primarygreen] .e-button.--primary-3 {
   color: var(--neutral-main);
 }
 .e-button {
@@ -837,7 +919,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   border: 2px solid var(--button);
   color: var(--others-white);
   font-weight: bold;
-  height: 100%;
+  max-height: 100%;
 }
 .e-button.--primary-1:hover {
   background-color: var(--button-hover);
@@ -1060,6 +1142,7 @@ html[data-theme=lawdistrict] .e-button.--primary-3 {
   visibility: hidden;
   transform: translate(-50%, 1rem);
   transition: all 0.3s ease;
+  white-space: nowrap;
 }
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
@@ -1770,7 +1853,7 @@ h2.react-datepicker__current-month {
 .e-radio .label {
   color: var(--neutral-neutral-1);
   display: block;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
 }
 .e-radio.default .e-radio__inner {
   display: flex;
@@ -1839,6 +1922,9 @@ h2.react-datepicker__current-month {
     padding: 16px 15px;
   }
 }
+.e-radio.tabs {
+  margin-top: 1rem;
+}
 .e-radio.tabs .e-radio__inner {
   display: flex;
 }
@@ -1852,7 +1938,7 @@ h2.react-datepicker__current-month {
   display: flex;
   height: 42px;
   justify-content: center;
-  width: 80px;
+  min-width: 80px;
 }
 .e-radio.tabs .e-radio__inner .radio-item-container:hover {
   background: var(--neutral-neutral-4);
@@ -2031,6 +2117,9 @@ h2.react-datepicker__current-month {
   margin-bottom: 1rem;
   position: relative;
 }
+.e-text .e-text-input__short {
+  width: 50%;
+}
 .e-text input {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2069,6 +2158,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;
@@ -2110,9 +2202,10 @@ h2.react-datepicker__current-month {
 .e-text--is-invalid .e-text__error {
   display: flex;
   align-content: center;
-  bottom: -5.5rem;
-  margin-top: 0.5rem;
   color: var(--error-main);
+  align-items: center;
+  height: fit-content;
+  margin-top: 0.5rem;
 }
 .e-text--is-invalid .e-text__error-icon {
   display: flex;
@@ -2151,6 +2244,37 @@ h2.react-datepicker__current-month {
   outline: none;
   background-color: var(--neutral-neutral-6);
 }
+.e-text--has-prefix {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 575px) {
+  .e-text--has-prefix {
+    width: 50%;
+  }
+}
+.e-text--has-prefix .tooltip-form {
+  grid-row: 3;
+}
+.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;
   transform: translate(-15%, -65%);
@@ -2162,9 +2286,33 @@ h2.react-datepicker__current-month {
   position: absolute;
   right: 0px;
   bottom: 6px;
+  top: 2.5rem;
+  height: fit-content;
   background: none;
   border: none;
 }
+.e-text .input-icon-currency-suffix {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  margin-left: calc(100% - 30px);
+  width: fit-content;
+}
+.e-text .input-icon-currency-prefix {
+  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 {
+  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;
   font-size: 0.75rem;

package/dist/images/componentsSvg/CloseIcon.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+
+interface Close24Props {
+  className?: string
+}
+
+export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
+  <svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
+      fill='#B5BABD'
+    />
+  </svg>
+)

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.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.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/images/componentsSvg/SearchIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface SearchIcon {
+  className: string
+}
+export const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
+  return (
+    <svg
+      width='17px'
+      height='18px'
+      viewBox='0 0 17 18'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+      className={className}
+    >
+      <title>icon/search_24px</title>
+      <g stroke='none' strokeWidth='1' fillRule='evenodd'>
+        <path
+          d='M12.5006256,11.0006256 L11.7106256,11.0006256 L11.4306256,10.7306256 C12.6306256,9.33062559 13.2506256,7.42062559 12.9106256,5.39062559 C12.4406256,2.61062559 10.1206256,0.390625593 7.32062559,0.0506255931 C3.09062559,-0.469374407 -0.469374407,3.09062559 0.0506255931,7.32062559 C0.390625593,10.1206256 2.61062559,12.4406256 5.39062559,12.9106256 C7.42062559,13.2506256 9.33062559,12.6306256 10.7306256,11.4306256 L11.0006256,11.7106256 L11.0006256,12.5006256 L15.2506256,16.7506256 C15.6606256,17.1606256 16.3306256,17.1606256 16.7406256,16.7506256 C17.1506256,16.3406256 17.1506256,15.6706256 16.7406256,15.2606256 L12.5006256,11.0006256 Z M6.50062559,11.0006256 C4.01062559,11.0006256 2.00062559,8.99062559 2.00062559,6.50062559 C2.00062559,4.01062559 4.01062559,2.00062559 6.50062559,2.00062559 C8.99062559,2.00062559 11.0006256,4.01062559 11.0006256,6.50062559 C11.0006256,8.99062559 8.99062559,11.0006256 6.50062559,11.0006256 Z'
+          fillRule='nonzero'
+        ></path>
+      </g>
+    </svg>
+  )
+}

package/dist/images/svg/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4121 7.49971C14.0877 7.17531 13.5618 7.17503 13.2371 7.49907L9.9999 10.7292L6.76272 7.49907C6.43797 7.17503 5.91212 7.17531 5.58772 7.49971C5.26308 7.82435 5.26308 8.35071 5.58772 8.67535L9.41065 12.4983C9.73608 12.8237 10.2637 12.8237 10.5892 12.4983L14.4121 8.67535C14.7367 8.35071 14.7367 7.82435 14.4121 7.49971Z" fill="#1E2021"/>
+</svg>

package/dist/images/svg/business-type.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4H14V2C14 0.89 13.11 0 12 0H8C6.89 0 6 0.89 6 2V4H2C0.89 4 0.01 4.89 0.01 6L0 17C0 18.11 0.89 19 2 19H18C19.11 19 20 18.11 20 17V6C20 4.89 19.11 4 18 4ZM12 4H8V2H12V4Z" fill="#078080"/>
+</svg>

package/dist/images/svg/clear-24-px.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="prefix__a" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H24V24H0z"/>
+        <mask id="prefix__b" fill="#fff">
+            <use xlink:href="#prefix__a"/>
+        </mask>
+        <g fill="#05646E" mask="url(#prefix__b)">
+            <path d="M0 0H24V24H0z"/>
+        </g>
+    </g>
+</svg>

package/dist/images/svg/close-grey-24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z" fill="#B5BABD"/>
+</svg>

package/dist/images/svg/currencyDE.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 17.5C10.8611 17.5 9.40278 17.0347 8.125 16.1042C6.84722 15.1736 5.94444 13.9722 5.41667 12.5H3.33333C3.09722 12.5 2.89931 12.4201 2.73958 12.2604C2.57986 12.1007 2.5 11.9028 2.5 11.6667C2.5 11.4306 2.57986 11.2326 2.73958 11.0729C2.89931 10.9132 3.09722 10.8333 3.33333 10.8333H5.04167C5.01389 10.6806 5 10.5417 5 10.4167V9.58333C5 9.45833 5.01389 9.31944 5.04167 9.16667H3.33333C3.09722 9.16667 2.89931 9.08681 2.73958 8.92708C2.57986 8.76736 2.5 8.56944 2.5 8.33333C2.5 8.09722 2.57986 7.89931 2.73958 7.73958C2.89931 7.57986 3.09722 7.5 3.33333 7.5H5.41667C5.94444 6.02778 6.84722 4.82639 8.125 3.89583C9.40278 2.96528 10.8611 2.5 12.5 2.5C13.2917 2.5 14.0347 2.61458 14.7292 2.84375C15.4236 3.07292 16.0764 3.38889 16.6875 3.79167C16.9236 3.94444 17.0451 4.15972 17.0521 4.4375C17.059 4.71528 16.9653 4.95139 16.7708 5.14583C16.5764 5.34028 16.3333 5.45486 16.0417 5.48958C15.75 5.52431 15.4792 5.46528 15.2292 5.3125C14.8264 5.07639 14.3924 4.89583 13.9271 4.77083C13.4618 4.64583 12.9861 4.58333 12.5 4.58333C11.4583 4.58333 10.5104 4.85069 9.65625 5.38542C8.80208 5.92014 8.15278 6.625 7.70833 7.5H11.6667C11.9028 7.5 12.1007 7.57986 12.2604 7.73958C12.4201 7.89931 12.5 8.09722 12.5 8.33333C12.5 8.56944 12.4201 8.76736 12.2604 8.92708C12.1007 9.08681 11.9028 9.16667 11.6667 9.16667H7.16667C7.13889 9.31944 7.11806 9.45833 7.10417 9.58333C7.09028 9.70833 7.08333 9.84722 7.08333 10C7.08333 10.1528 7.09028 10.2917 7.10417 10.4167C7.11806 10.5417 7.13889 10.6806 7.16667 10.8333H11.6667C11.9028 10.8333 12.1007 10.9132 12.2604 11.0729C12.4201 11.2326 12.5 11.4306 12.5 11.6667C12.5 11.9028 12.4201 12.1007 12.2604 12.2604C12.1007 12.4201 11.9028 12.5 11.6667 12.5H7.70833C8.15278 13.375 8.80208 14.0799 9.65625 14.6146C10.5104 15.1493 11.4583 15.4167 12.5 15.4167C12.9861 15.4167 13.4618 15.3576 13.9271 15.2396C14.3924 15.1215 14.8264 14.9444 15.2292 14.7083C15.4792 14.5556 15.75 14.4931 16.0417 14.5208C16.3333 14.5486 16.5764 14.6597 16.7708 14.8542C16.9653 15.0486 17.059 15.2847 17.0521 15.5625C17.0451 15.8403 16.9236 16.0556 16.6875 16.2083C16.0764 16.6111 15.4236 16.9271 14.7292 17.1562C14.0347 17.3854 13.2917 17.5 12.5 17.5Z" fill="#6D7275"/>
+</svg>

package/dist/images/svg/currencyUS.svg

@@ -0,0 +1,3 @@
+<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>

package/dist/images/svg/men.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="#078080" fill-rule="evenodd">
+        <path d="M0 5H24V7H0zM6 11H24V13H6zM12 17H24V19H12z"/>
+    </g>
+</svg>

package/dist/images/svg/percent.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25004 9.16671C5.44448 9.16671 4.75699 8.88198 4.18754 8.31254C3.6181 7.7431 3.33337 7.0556 3.33337 6.25004C3.33337 5.44448 3.6181 4.75699 4.18754 4.18754C4.75699 3.6181 5.44448 3.33337 6.25004 3.33337C7.0556 3.33337 7.7431 3.6181 8.31254 4.18754C8.88198 4.75699 9.16671 5.44448 9.16671 6.25004C9.16671 7.0556 8.88198 7.7431 8.31254 8.31254C7.7431 8.88198 7.0556 9.16671 6.25004 9.16671ZM6.25004 7.50004C6.59726 7.50004 6.8924 7.37851 7.13546 7.13546C7.37851 6.8924 7.50004 6.59726 7.50004 6.25004C7.50004 5.90282 7.37851 5.60768 7.13546 5.36462C6.8924 5.12157 6.59726 5.00004 6.25004 5.00004C5.90282 5.00004 5.60768 5.12157 5.36462 5.36462C5.12157 5.60768 5.00004 5.90282 5.00004 6.25004C5.00004 6.59726 5.12157 6.8924 5.36462 7.13546C5.60768 7.37851 5.90282 7.50004 6.25004 7.50004ZM13.75 16.6667C12.9445 16.6667 12.257 16.382 11.6875 15.8125C11.1181 15.2431 10.8334 14.5556 10.8334 13.75C10.8334 12.9445 11.1181 12.257 11.6875 11.6875C12.257 11.1181 12.9445 10.8334 13.75 10.8334C14.5556 10.8334 15.2431 11.1181 15.8125 11.6875C16.382 12.257 16.6667 12.9445 16.6667 13.75C16.6667 14.5556 16.382 15.2431 15.8125 15.8125C15.2431 16.382 14.5556 16.6667 13.75 16.6667ZM13.75 15C14.0973 15 14.3924 14.8785 14.6355 14.6355C14.8785 14.3924 15 14.0973 15 13.75C15 13.4028 14.8785 13.1077 14.6355 12.8646C14.3924 12.6216 14.0973 12.5 13.75 12.5C13.4028 12.5 13.1077 12.6216 12.8646 12.8646C12.6216 13.1077 12.5 13.4028 12.5 13.75C12.5 14.0973 12.6216 14.3924 12.8646 14.6355C13.1077 14.8785 13.4028 15 13.75 15ZM3.91671 16.0834C3.76393 15.9306 3.68754 15.7362 3.68754 15.5C3.68754 15.2639 3.76393 15.0695 3.91671 14.9167L14.9167 3.91671C15.0695 3.76393 15.2639 3.68754 15.5 3.68754C15.7362 3.68754 15.9306 3.76393 16.0834 3.91671C16.2362 4.06949 16.3125 4.26393 16.3125 4.50004C16.3125 4.73615 16.2362 4.9306 16.0834 5.08337L5.08337 16.0834C4.9306 16.2362 4.73615 16.3125 4.50004 16.3125C4.26393 16.3125 4.06949 16.2362 3.91671 16.0834Z" fill="#6D7275"/>
+</svg>

package/dist/images/svg/search_24px.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.83105 13.9947C6.10828 13.9947 4.65024 13.3981 3.45694 12.2048C2.26364 11.0115 1.66699 9.55346 1.66699 7.83069C1.66699 6.10791 2.26364 4.64987 3.45694 3.45657C4.65024 2.26328 6.10828 1.66663 7.83105 1.66663C9.55383 1.66663 11.0119 2.26328 12.2052 3.45657C13.3985 4.64987 13.9951 6.10791 13.9951 7.83069C13.9951 8.52612 13.8845 9.18204 13.6632 9.79844C13.4419 10.4148 13.1416 10.9601 12.7623 11.4343L18.0729 16.7449C18.2467 16.9187 18.3337 17.14 18.3337 17.4087C18.3337 17.6774 18.2467 17.8986 18.0729 18.0725C17.899 18.2464 17.6777 18.3333 17.4091 18.3333C17.1404 18.3333 16.9191 18.2464 16.7452 18.0725L11.4347 12.7619C10.9605 13.1413 10.4152 13.4416 9.79881 13.6628C9.1824 13.8841 8.52648 13.9947 7.83105 13.9947ZM7.83105 12.0981C9.01645 12.0981 10.024 11.6832 10.8538 10.8534C11.6836 10.0237 12.0985 9.01608 12.0985 7.83069C12.0985 6.64529 11.6836 5.6377 10.8538 4.80793C10.024 3.97815 9.01645 3.56326 7.83105 3.56326C6.64566 3.56326 5.63807 3.97815 4.80829 4.80793C3.97851 5.6377 3.56363 6.64529 3.56363 7.83069C3.56363 9.01608 3.97851 10.0237 4.80829 10.8534C5.63807 11.6832 6.64566 12.0981 7.83105 12.0981Z" fill="#078080"/>
+</svg>

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

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { type BenefitCardProps } from './BenefitCardProps.types'
+import { BenefitCardStyled } from './BenefitCardStyled.styled'
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor'
+
+export const BenefitCard: React.FC<BenefitCardProps> = ({
+  description,
+  hasShadow = true,
+  hasBigFontSize = true,
+  title,
+  image
+}) => {
+  return (
+    <BenefitCardStyled className={`benefit-card ${hasShadow && 'has-shadow'}`}>
+      {image && (
+        <div className={`benefit-card__icon ${hasShadow && 'has-shadow'}`}>
+          <IconSvgURLWithThemeColor url={image} height='32' width='32' />
+        </div>
+      )}
+
+      <div className='benefit-card__content'>
+        <div className={`sans-serif ${hasBigFontSize && '--big'} --bold-weight benefit-card__content__title`}>
+          {title}
+        </div>
+        <p className='sans-serif --medium benefit-ratafia-card__content__description'>{description}</p>
+      </div>
+    </BenefitCardStyled>
+  )
+}

package/dist/src/components/atoms/BenefitCard/BenefitCardProps.types.ts

@@ -0,0 +1,8 @@
+export interface BenefitCardProps {
+  id: string
+  title: string
+  image?: string
+  description: string
+  hasShadow?: boolean
+  hasBigFontSize?: boolean
+}

package/dist/src/components/atoms/BenefitCard/BenefitCardStyled.styled.ts

@@ -0,0 +1,57 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BenefitCardStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  padding: 1.5rem;
+  gap: var(--global-gap);
+
+  border-radius: var(--s-border-radius);
+  background: rgba(255, 255, 255, 0.8);
+
+  &.has-shadow {
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  }
+
+  @media ${device['landscape-tablets']} {
+    flex-direction: row;
+  }
+  @media ${device.laptop} {
+    flex-direction: column;
+  }
+
+  .benefit-card {
+    &__icon {
+      display: flex;
+      align-items: flex-start;
+      padding: 0.25rem;
+      gap: 0.625rem;
+
+      border-radius: var(--s-border-radius);
+      background: rgba(255, 255, 255, 0.8);
+
+      &.has-shadow {
+        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+      }
+    }
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      gap: 0.5rem;
+
+      &__title {
+        color: var(--primary-main-dark-2);
+      }
+      &__description {
+        color: var(--neutral-neutral-1);
+      }
+    }
+  }
+`

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

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

package/dist/src/components/atoms/Button/Button.scss

@@ -1,7 +1,7 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-html[data-theme='lawdistrict'] {
+html[data-theme='primarygreen'] {
   .e-button {
     &.--primary {
       &-3 {
@@ -73,7 +73,7 @@ html[data-theme='lawdistrict'] {
       border: 2px solid var(--button);
       color: get-color(others, white);
       font-weight: bold;
-      height: 100%;
+      max-height: 100%;
 
       &:hover {
         background-color: var(--button-hover);