@npm_leadtech/legal-lib-components 7.25.3 → 7.25.5

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

@@ -55,7 +55,7 @@ export const FixedFooterStyled = styled.div `
     margin: auto;
     padding: 2.75rem 1rem 1rem;
   }
-  @media (min-width: 1024px) {
+  @media (min-width: 720px) {
     footer .language-selector-mobile-container {
       display: none;
     }

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

@@ -56,7 +56,7 @@ export const FixedFooterStyled = styled.div`
     margin: auto;
     padding: 2.75rem 1rem 1rem;
   }
-  @media (min-width: 1024px) {
+  @media (min-width: 720px) {
     footer .language-selector-mobile-container {
       display: none;
     }

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

@@ -1,7 +1,6 @@
 .ratafia-landing-icon {
-  padding: 1px 4px;
+  padding: 0.25rem 0.5rem;
   border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-1);
   background: var(--secondary-main-light-3);
-  font-size: 12px;
 }

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

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
@@ -25,7 +23,6 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
 };
 const SearchSelect = (props) => {
     const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
-    const [menuPortalTarget, setMenuPortalTarget] = useState();
     const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
     const defaultValue = props.defaultValue;
     const classnames = classNames({
@@ -34,9 +31,6 @@ const SearchSelect = (props) => {
         [customClass]: props.customClass,
         '--group-invalid': !props.isValidGroup
     });
-    useEffect(() => {
-        setMenuPortalTarget(document.body);
-    }, []);
     const handleChange = (selectedOption) => {
         const selectObject = {
             target: {
@@ -57,6 +51,6 @@ const SearchSelect = (props) => {
                                 };
                             },
                             menuPortal: (base) => ({ ...base, zIndex: 9999 })
-                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
+                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: document.body, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
 };
 export default SearchSelect;

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, { type FC, useEffect, useState } from 'react'
+import React, { type FC } from 'react'
 import Select from 'react-select'
 
 import { type SearchSelectProps } from './SearchSelectProps.types'
@@ -28,7 +28,6 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
 
 const SearchSelect: FC<SearchSelectProps> = (props) => {
   const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
-  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
   const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
   const defaultValue = props.defaultValue as unknown as string
 
@@ -39,10 +38,6 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     '--group-invalid': !props.isValidGroup
   })
 
-  useEffect(() => {
-    setMenuPortalTarget(document.body)
-  }, [])
-
   const handleChange = (selectedOption): void => {
     const selectObject = {
       target: {
@@ -95,7 +90,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           options={sortedItems}
           escapeClearsValue={true}
           isClearable={true}
-          menuPortalTarget={menuPortalTarget}
+          menuPortalTarget={document.body}
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}

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: 1024px) {
+    @media (min-width: 828px) {
       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: 1024px) {
+    @media (min-width: 828px) {
       display: none;
     }
   }

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LawGeniusInfoCardStyled } from './LawGeniusInfoCard.styled';
+export const LawGeniusInfoCard = ({ icon, title = '', text = '' }) => {
+    return (_jsx(LawGeniusInfoCardStyled, { className: 'info-card', children: _jsx("div", { className: 'info-card-wrapper', children: _jsxs("div", { className: 'content', children: [_jsxs("p", { className: 'title', children: [_jsx("div", { className: 'info-icon', children: icon }), title] }), _jsx("p", { className: 'text', children: text })] }) }) }));
+};

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

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

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+export const LawGeniusInfoCardStyled = styled.div `
+  width: 100%;
+  background-color: var(--others-white);
+  border-radius: var(--s-border-radius);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+
+  .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 {
+    display: flex;
+    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);
+  }
+`;

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const LawGeniusInfoCardStyled = styled.div`
+  width: 100%;
+  background-color: var(--others-white);
+  border-radius: var(--s-border-radius);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+
+  .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 {
+    display: flex;
+    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);
+  }
+`

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

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { LawGeniusInfoCardProps } from './LawGeniusInfoCardProps'
+import { LawGeniusInfoCardStyled } from './LawGeniusInfoCard.styled'
+
+export const LawGeniusInfoCard: React.FC<LawGeniusInfoCardProps> = ({ icon, title = '', text = '' }) => {
+  return (
+    <LawGeniusInfoCardStyled className='info-card'>
+      <div className='info-card-wrapper'>
+        <div className='content'>
+          <p className='title'>
+            <div className='info-icon'>{icon}</div>
+            {title}
+          </p>
+          <p className='text'>{text}</p>
+        </div>
+      </div>
+    </LawGeniusInfoCardStyled>
+  )
+}

package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.d.ts

@@ -0,0 +1,5 @@
+export interface LawGeniusInfoCardProps {
+    title: string;
+    text: string;
+    icon: React.ReactNode;
+}

package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.js

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

package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.ts

@@ -0,0 +1,5 @@
+export interface LawGeniusInfoCardProps {
+  title: string
+  text: string
+  icon: React.ReactNode
+}

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

@@ -0,0 +1,2 @@
+export * from './LawGeniusInfoCard';
+export * from './LawGeniusInfoCardProps';

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

@@ -0,0 +1,2 @@
+export * from './LawGeniusInfoCard';
+export * from './LawGeniusInfoCardProps';

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

@@ -0,0 +1,2 @@
+export * from './LawGeniusInfoCard'
+export * from './LawGeniusInfoCardProps'

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

@@ -39,7 +39,6 @@ export const MenuItemsStyled = styled.div `
   .left-nav {
     display: flex;
     align-items: center;
-    gap: 1rem;
   }
 
   .header-phone {
@@ -88,6 +87,7 @@ export const MenuItemsStyled = styled.div `
     .navigation-pane__products__container,
     .navigation-pane__resources__container {
       display: flex;
+      gap: 0.5rem;
       display: none;
 
       @media ${device['landscape-tablets']} {
@@ -103,10 +103,12 @@ export const MenuItemsStyled = styled.div `
   .navigation-pane__resources,
   .navigation-pane__help {
     position: relative;
+    margin-left: 0.5rem;
     padding: 0.75rem 0;
     cursor: pointer;
 
     @media ${device['portrait-tablets']} {
+      margin-right: 1.5rem;
       padding-bottom: 0.5rem;
     }
 
@@ -337,10 +339,6 @@ export const MenuItemsStyled = styled.div `
     align-items: center;
     min-width: 18rem;
 
-    @media (max-width: 1024px) {
-      gap: 1rem;
-    }
-
     @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
       min-width: 12rem;
     }
@@ -369,7 +367,7 @@ export const MenuItemsStyled = styled.div `
     .navigation-pane.--is-mobile {
       display: flex;
 
-      @media (max-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: none;
       }
 

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

@@ -40,7 +40,6 @@ export const MenuItemsStyled = styled.div`
   .left-nav {
     display: flex;
     align-items: center;
-    gap: 1rem;
   }
 
   .header-phone {
@@ -89,6 +88,7 @@ export const MenuItemsStyled = styled.div`
     .navigation-pane__products__container,
     .navigation-pane__resources__container {
       display: flex;
+      gap: 0.5rem;
       display: none;
 
       @media ${device['landscape-tablets']} {
@@ -104,10 +104,12 @@ export const MenuItemsStyled = styled.div`
   .navigation-pane__resources,
   .navigation-pane__help {
     position: relative;
+    margin-left: 0.5rem;
     padding: 0.75rem 0;
     cursor: pointer;
 
     @media ${device['portrait-tablets']} {
+      margin-right: 1.5rem;
       padding-bottom: 0.5rem;
     }
 
@@ -338,10 +340,6 @@ export const MenuItemsStyled = styled.div`
     align-items: center;
     min-width: 18rem;
 
-    @media (max-width: 1024px) {
-      gap: 1rem;
-    }
-
     @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
       min-width: 12rem;
     }
@@ -370,7 +368,7 @@ export const MenuItemsStyled = styled.div`
     .navigation-pane.--is-mobile {
       display: flex;
 
-      @media (max-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: none;
       }
 

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

@@ -27,10 +27,6 @@ export const NavMenuStyled = styled.nav `
       .left-nav {
         display: flex;
         align-items: center;
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
-        gap: 2rem;
       }
 
       .header-phone {
@@ -53,17 +49,7 @@ export const NavMenuStyled = styled.nav `
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-end;
-        gap: 2rem;
-
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
-
-        .nav-menu-item {
-          @media (max-width: 1024px) {
-            display: none;
-          }
-        }
+        gap: 1.5rem;
 
         .search {
           width: 100%;
@@ -71,7 +57,7 @@ export const NavMenuStyled = styled.nav `
         }
       }
 
-      @media (min-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -90,10 +76,12 @@ export const NavMenuStyled = styled.nav `
       .navigation-pane__help,
       .navigation-pane__resources {
         position: relative;
+        margin-left: 0.5rem;
         padding: 0.75rem 0;
         cursor: pointer;
 
         @media ${device['portrait-tablets']} {
+          margin-right: 1.5rem;
           padding-bottom: 0.5rem;
         }
 
@@ -312,11 +300,6 @@ export const NavMenuStyled = styled.nav `
         display: flex;
         align-items: center;
         min-width: 18rem;
-        gap: 2rem;
-
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
 
         @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
           min-width: 12rem;
@@ -349,7 +332,7 @@ export const NavMenuStyled = styled.nav `
       display: flex;
       flex-direction: column;
 
-      @media (max-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: none;
       }
       .navigation-pane__user-menu {

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

@@ -28,10 +28,6 @@ export const NavMenuStyled = styled.nav`
       .left-nav {
         display: flex;
         align-items: center;
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
-        gap: 2rem;
       }
 
       .header-phone {
@@ -54,17 +50,7 @@ export const NavMenuStyled = styled.nav`
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-end;
-        gap: 2rem;
-
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
-
-        .nav-menu-item {
-          @media (max-width: 1024px) {
-            display: none;
-          }
-        }
+        gap: 1.5rem;
 
         .search {
           width: 100%;
@@ -72,7 +58,7 @@ export const NavMenuStyled = styled.nav`
         }
       }
 
-      @media (min-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -91,10 +77,12 @@ export const NavMenuStyled = styled.nav`
       .navigation-pane__help,
       .navigation-pane__resources {
         position: relative;
+        margin-left: 0.5rem;
         padding: 0.75rem 0;
         cursor: pointer;
 
         @media ${device['portrait-tablets']} {
+          margin-right: 1.5rem;
           padding-bottom: 0.5rem;
         }
 
@@ -313,11 +301,6 @@ export const NavMenuStyled = styled.nav`
         display: flex;
         align-items: center;
         min-width: 18rem;
-        gap: 2rem;
-
-        @media (max-width: 1024px) {
-          gap: 1rem;
-        }
 
         @media (min-width: ${size.sm}) and (max-width: ${size.lg}) {
           min-width: 12rem;
@@ -350,7 +333,7 @@ export const NavMenuStyled = styled.nav`
       display: flex;
       flex-direction: column;
 
-      @media (max-width: ${size.sm}) {
+      @media ${device['landscape-tablets']} {
         display: none;
       }
       .navigation-pane__user-menu {

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

@@ -7,7 +7,9 @@ const TryOurFreeLegalBlogsContent = ({ title, image, children, type = TryOurFree
     const classTry = classNames({
         'try-our-free-legal-blogs-section-content': true,
         'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
-        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
+        'try-our-free-legal-blogs-section-content--our-mission-first-image': TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
+        'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
+        'try-our-free-legal-blogs-section-content--how-it-works-first-image': TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type
     });
     return (_jsxs(TryOurFreeLegalBlogsContentStyled, { className: classTry, children: [_jsxs("div", { className: 'try-our-free-legal-blogs-section__texts', children: [_jsx("h2", { className: 'try-our-free-legal-blogs-section__texts__title', children: title }), _jsx(RichTextInner, { customClass: 'try-our-free-legal-blogs-section__texts__body', children: children })] }), _jsx("div", { className: 'try-our-free-legal-blogs-section__image', children: image })] }));
 };

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

@@ -7,7 +7,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     flex-direction: row;
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission {
+  &.try-our-free-legal-blogs-section-content--our-mission,
+  &.try-our-free-legal-blogs-section-content--how-it-works {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -30,7 +31,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div `
     }
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image,
+  &.try-our-free-legal-blogs-section-content--how-it-works-first-image {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;

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

@@ -8,7 +8,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
     flex-direction: row;
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission {
+  &.try-our-free-legal-blogs-section-content--our-mission,
+  &.try-our-free-legal-blogs-section-content--how-it-works {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;
@@ -31,7 +32,8 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
     }
   }
 
-  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image,
+  &.try-our-free-legal-blogs-section-content--how-it-works-first-image {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     align-items: center;

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

@@ -18,7 +18,10 @@ const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({
     'try-our-free-legal-blogs-section-content': true,
     'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
     'try-our-free-legal-blogs-section-content--our-mission-first-image':
-      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
+      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type,
+    'try-our-free-legal-blogs-section-content--how-it-works': TryOurFreeLegalBlogsContentType.howItWorks === type,
+    'try-our-free-legal-blogs-section-content--how-it-works-first-image':
+      TryOurFreeLegalBlogsContentType.howItWorksFirstImage === type
   })
   return (
     <TryOurFreeLegalBlogsContentStyled className={classTry}>

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts

@@ -1,7 +1,9 @@
 export declare enum TryOurFreeLegalBlogsContentType {
     default = "Default",
     ourMission = "Our Mission",
-    ourMissionFirstImage = "Our Mission First Image"
+    ourMissionFirstImage = "Our Mission First Image",
+    howItWorks = "How It Works",
+    howItWorksFirstImage = "How It Works First Image"
 }
 export interface TryOurFreeLegalBlogsContentProps {
     title: string;

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js

@@ -3,4 +3,6 @@ export var TryOurFreeLegalBlogsContentType;
     TryOurFreeLegalBlogsContentType["default"] = "Default";
     TryOurFreeLegalBlogsContentType["ourMission"] = "Our Mission";
     TryOurFreeLegalBlogsContentType["ourMissionFirstImage"] = "Our Mission First Image";
+    TryOurFreeLegalBlogsContentType["howItWorks"] = "How It Works";
+    TryOurFreeLegalBlogsContentType["howItWorksFirstImage"] = "How It Works First Image";
 })(TryOurFreeLegalBlogsContentType || (TryOurFreeLegalBlogsContentType = {}));

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts

@@ -1,7 +1,9 @@
 export enum TryOurFreeLegalBlogsContentType {
   default = 'Default',
   ourMission = 'Our Mission',
-  ourMissionFirstImage = 'Our Mission First Image'
+  ourMissionFirstImage = 'Our Mission First Image',
+  howItWorks = 'How It Works',
+  howItWorksFirstImage = 'How It Works First Image'
 }
 
 export interface TryOurFreeLegalBlogsContentProps {

package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.d.ts

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

package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeroSection, LawGeniusCardsSection, TryNowSection, TryOurFreeLegalBlogsSection } from '../../sections';
+export const HowItWorksPage = ({ aboutUsSectionProps, howItWorksStep1Props, howItWorksStep2Props, howItWorksStep3Props, howItWorksStep4Props, lawGeniusCardsSectionProps, tryNowSectionProps }) => {
+    return (_jsxs(_Fragment, { children: [aboutUsSectionProps != null && _jsx(HeroSection, { ...aboutUsSectionProps }), howItWorksStep1Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep1Props }), howItWorksStep2Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep2Props }), howItWorksStep3Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep3Props }), howItWorksStep4Props != null && _jsx(TryOurFreeLegalBlogsSection, { ...howItWorksStep4Props }), lawGeniusCardsSectionProps != null && _jsx(LawGeniusCardsSection, { ...lawGeniusCardsSectionProps }), tryNowSectionProps != null && _jsx(TryNowSection, { ...tryNowSectionProps })] }));
+};