@npm_leadtech/legal-lib-components 2.2.3 → 2.3.1

package/dist/cjs/legal-lib-components.css

@@ -543,11 +543,11 @@
 
 .react-datepicker {
   font-family: "Helvetica Neue", helvetica, arial, sans-serif;
-  font-size: 0.8rem;
+  font-size: 0.8em;
   background-color: #fff;
   color: #000;
   border: 1px solid #aeaeae;
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   display: inline-block;
   position: relative;
 }
@@ -560,8 +560,8 @@
 }
 .react-datepicker--time-only .react-datepicker__time,
 .react-datepicker--time-only .react-datepicker__time-box {
-  border-bottom-left-radius: 0.3rem;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-left-radius: 0.3em;
+  border-bottom-right-radius: 0.3em;
 }
 
 .react-datepicker__triangle {
@@ -601,7 +601,7 @@
   text-align: center;
   background-color: #f0f0f0;
   border-bottom: 1px solid #aeaeae;
-  border-top-left-radius: 0.3rem;
+  border-top-left-radius: 0.3em;
   padding: 8px 0;
   position: relative;
 }
@@ -614,7 +614,7 @@
   border-top-left-radius: 0;
 }
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
-  border-top-right-radius: 0.3rem;
+  border-top-right-radius: 0.3em;
 }
 
 .react-datepicker__year-dropdown-container--select,
@@ -633,7 +633,7 @@
   margin-top: 0;
   color: #000;
   font-weight: bold;
-  font-size: 0.944rem;
+  font-size: 0.944em;
 }
 
 .react-datepicker-time__header {
@@ -711,7 +711,7 @@
 }
 
 .react-datepicker__year {
-  margin: 0.4rem;
+  margin: 0.4em;
   text-align: center;
 }
 .react-datepicker__year-wrapper {
@@ -721,18 +721,18 @@
 }
 .react-datepicker__year .react-datepicker__year-text {
   display: inline-block;
-  width: 4rem;
+  width: 4em;
   margin: 2px;
 }
 
 .react-datepicker__month {
-  margin: 0.4rem;
+  margin: 0.4em;
   text-align: center;
 }
 .react-datepicker__month .react-datepicker__month-text,
 .react-datepicker__month .react-datepicker__quarter-text {
   display: inline-block;
-  width: 4rem;
+  width: 4em;
   margin: 2px;
 }
 
@@ -777,7 +777,7 @@
 .react-datepicker__time-container--with-today-button {
   display: inline;
   border: 1px solid #aeaeae;
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   position: absolute;
   right: -87px;
   top: 0;
@@ -785,19 +785,19 @@
 .react-datepicker__time-container .react-datepicker__time {
   position: relative;
   background: white;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3em;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
   width: 85px;
   overflow-x: hidden;
   margin: 0 auto;
   text-align: center;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3em;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
   list-style: none;
   margin: 0;
-  height: calc(195px + (1.7rem / 2));
+  height: calc(195px + (1.7em / 2));
   overflow-y: scroll;
   padding-right: 0;
   padding-left: 0;
@@ -832,16 +832,16 @@
 .react-datepicker__week-number {
   color: #ccc;
   display: inline-block;
-  width: 1.7rem;
-  line-height: 1.7rem;
+  width: 1.7em;
+  line-height: 1.7em;
   text-align: center;
-  margin: 0.166rem;
+  margin: 0.166em;
 }
 .react-datepicker__week-number.react-datepicker__week-number--clickable {
   cursor: pointer;
 }
 .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   background-color: #f0f0f0;
 }
 
@@ -859,35 +859,10 @@
 .react-datepicker__time-name {
   color: #000;
   display: inline-block;
-  width: 1.7rem;
-  line-height: 1.7rem;
+  width: 1.7em;
+  line-height: 1.7em;
   text-align: center;
-  margin: 0.166rem;
-}
-
-.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
-.react-datepicker__quarter--selected,
-.react-datepicker__quarter--in-selecting-range,
-.react-datepicker__quarter--in-range {
-  border-radius: 0.3rem;
-  background-color: #216ba5;
-  color: #fff;
-}
-.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
-.react-datepicker__quarter--selected:hover,
-.react-datepicker__quarter--in-selecting-range:hover,
-.react-datepicker__quarter--in-range:hover {
-  background-color: #1d5d90;
-}
-.react-datepicker__month--disabled,
-.react-datepicker__quarter--disabled {
-  color: #ccc;
-  pointer-events: none;
-}
-.react-datepicker__month--disabled:hover,
-.react-datepicker__quarter--disabled:hover {
-  cursor: default;
-  background-color: transparent;
+  margin: 0.166em;
 }
 
 .react-datepicker__day,
@@ -900,7 +875,7 @@
 .react-datepicker__month-text:hover,
 .react-datepicker__quarter-text:hover,
 .react-datepicker__year-text:hover {
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   background-color: #f0f0f0;
 }
 .react-datepicker__day--today,
@@ -913,7 +888,7 @@
 .react-datepicker__month-text--highlighted,
 .react-datepicker__quarter-text--highlighted,
 .react-datepicker__year-text--highlighted {
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   background-color: #3dcc4a;
   color: #fff;
 }
@@ -945,7 +920,7 @@
 .react-datepicker__year-text--selected,
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   background-color: #216ba5;
   color: #fff;
 }
@@ -965,7 +940,7 @@
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   background-color: #bad9f1;
   color: rgb(0, 0, 0);
 }
@@ -1026,18 +1001,6 @@
   background-color: transparent;
 }
 
-.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
-.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
-.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
-.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
-.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
-  background-color: #216ba5;
-}
-.react-datepicker__month-text:hover,
-.react-datepicker__quarter-text:hover {
-  background-color: #f0f0f0;
-}
-
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;
@@ -1045,7 +1008,7 @@
 }
 .react-datepicker__input-container .react-datepicker__calendar-icon {
   position: absolute;
-  padding: 0.5rem;
+  padding: 0.5em;
 }
 
 .react-datepicker__view-calendar-icon input {
@@ -1056,7 +1019,7 @@
 .react-datepicker__month-read-view,
 .react-datepicker__month-year-read-view {
   border: 1px solid transparent;
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   position: relative;
 }
 .react-datepicker__year-read-view:hover,
@@ -1090,7 +1053,7 @@
   top: 30px;
   z-index: 1;
   text-align: center;
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
   border: 1px solid #aeaeae;
 }
 .react-datepicker__year-dropdown:hover,
@@ -1117,8 +1080,8 @@
 .react-datepicker__year-option:first-of-type,
 .react-datepicker__month-option:first-of-type,
 .react-datepicker__month-year-option:first-of-type {
-  border-top-left-radius: 0.3rem;
-  border-top-right-radius: 0.3rem;
+  border-top-left-radius: 0.3em;
+  border-top-right-radius: 0.3em;
 }
 .react-datepicker__year-option:last-of-type,
 .react-datepicker__month-option:last-of-type,
@@ -1127,8 +1090,8 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border-bottom-left-radius: 0.3rem;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-left-radius: 0.3em;
+  border-bottom-right-radius: 0.3em;
 }
 .react-datepicker__year-option:hover,
 .react-datepicker__month-option:hover,
@@ -1206,27 +1169,27 @@
 .react-datepicker__portal .react-datepicker__day-name,
 .react-datepicker__portal .react-datepicker__day,
 .react-datepicker__portal .react-datepicker__time-name {
-  width: 3rem;
-  line-height: 3rem;
+  width: 3em;
+  line-height: 3em;
 }
 @media (max-width: 400px), (max-height: 550px) {
   .react-datepicker__portal .react-datepicker__day-name,
   .react-datepicker__portal .react-datepicker__day,
   .react-datepicker__portal .react-datepicker__time-name {
-    width: 2rem;
-    line-height: 2rem;
+    width: 2em;
+    line-height: 2em;
   }
 }
 .react-datepicker__portal .react-datepicker__current-month,
 .react-datepicker__portal .react-datepicker-time__header {
-  font-size: 1.44rem;
+  font-size: 1.44em;
 }
 
 .react-datepicker__children-container {
-  width: 13.8rem;
-  margin: 0.4rem;
-  padding-right: 0.2rem;
-  padding-left: 0.2rem;
+  width: 13.8em;
+  margin: 0.4em;
+  padding-right: 0.2em;
+  padding-left: 0.2em;
   height: auto;
 }
 
@@ -3365,25 +3328,6 @@
       width: 24px;
       margin: 0; }
 
-.how-it-works-wrapper {
-  background-color: #F8F9FA; }
-  @media (min-width: 960px) {
-    .how-it-works-wrapper {
-      background-repeat: no-repeat;
-      background-position: top right;
-      background-size: 21rem; } }
-  @media only screen and (max-width: 960px) {
-    .how-it-works-wrapper {
-      background-image: none !important; } }
-  .how-it-works-wrapper .works-title {
-    width: auto;
-    font-family: "Lora", serif;
-    text-align: center;
-    padding-top: 4rem; }
-    @media only screen and (max-width: 960px) {
-      .how-it-works-wrapper .works-title {
-        padding-top: 2.5rem; } }
-
 .blog {
   text-align: center;
   margin: 0 auto 3rem;
@@ -3408,6 +3352,64 @@
       .blog .cta-button {
         width: auto; } }
 
+.how-it-works-wrapper {
+  background-color: #F8F9FA; }
+  @media (min-width: 960px) {
+    .how-it-works-wrapper {
+      background-repeat: no-repeat;
+      background-position: top right;
+      background-size: 21rem; } }
+  @media only screen and (max-width: 960px) {
+    .how-it-works-wrapper {
+      background-image: none !important; } }
+  .how-it-works-wrapper .works-title {
+    width: auto;
+    font-family: "Lora", serif;
+    text-align: center;
+    padding-top: 4rem; }
+    @media only screen and (max-width: 960px) {
+      .how-it-works-wrapper .works-title {
+        padding-top: 2.5rem; } }
+
+.try-our-free-legal-blogs-section {
+  display: flex;
+  flex-direction: column; }
+  @media (min-width: 720px) {
+    .try-our-free-legal-blogs-section {
+      flex-flow: row nowrap; } }
+  .try-our-free-legal-blogs-section__texts {
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 1rem;
+    margin-right: 0;
+    color: #3D4042;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.3px; }
+    @media (min-width: 720px) {
+      .try-our-free-legal-blogs-section__texts {
+        margin-right: 3rem;
+        margin-bottom: 0; } }
+    .try-our-free-legal-blogs-section__texts__title {
+      font-family: "Lora", serif;
+      font-size: 28px;
+      line-height: 42px;
+      margin-bottom: 2rem;
+      text-align: center; }
+      @media (min-width: 720px) {
+        .try-our-free-legal-blogs-section__texts__title {
+          text-align: left; } }
+    .try-our-free-legal-blogs-section__texts__body {
+      font-family: "Inter", sans-serif;
+      font-size: 16px;
+      line-height: 22px; }
+      .try-our-free-legal-blogs-section__texts__body a {
+        color: #078080; }
+  .try-our-free-legal-blogs-section__image {
+    flex-basis: 50%; }
+
 .about-us-content {
   display: flex;
   flex-flow: row wrap;

package/dist/cjs/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { type TryOurFreeLegalBlogsSectionProps } from './TryOurFreeLegalBlogsSectionProps.types';
+import './TryOurFreeLegalBlogsSection.scss';
+declare const TryOurFreeLegalBlogsSection: FC<TryOurFreeLegalBlogsSectionProps>;
+export default TryOurFreeLegalBlogsSection;

package/dist/cjs/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSectionProps.types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface TryOurFreeLegalBlogsSectionProps {
+    title: string;
+    image: React.ReactNode;
+    children?: string | React.ReactNode;
+}

package/dist/cjs/src/components/sections/TryOurFreeLegalBlogsSection/__stories__/TryOurFreeLegalBlogsSection.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TryOurFreeLegalBlogsSection from '../TryOurFreeLegalBlogsSection';
+declare const meta: Meta<typeof TryOurFreeLegalBlogsSection>;
+export default meta;
+type Story = StoryObj<typeof TryOurFreeLegalBlogsSection>;
+export declare const Default: Story;

package/dist/cjs/src/components/sections/TryOurFreeLegalBlogsSection/index.d.ts

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

package/dist/cjs/src/components/sections/index.d.ts

@@ -1,3 +1,4 @@
-export * from './HowGetYourFormsSection';
 export * from './BlogSection';
+export * from './HowGetYourFormsSection';
+export * from './TryOurFreeLegalBlogsSection';
 export * from './AboutUsSection';