@npm_leadtech/legal-lib-components 7.63.8 → 7.63.10

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeatureCard } from './FeatureItem.styled';
+export const FeatureItem = ({ feature }) => {
+    return (_jsxs(FeatureCard, { children: [_jsx("img", { className: 'feature-icon', src: feature?.icon?.url, alt: 'Feature Icon', width: 16, height: 16 }), _jsx("span", { className: 'feature-description', children: feature?.description })] }));
+};

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

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

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const FeatureCard = styled.li `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1rem 0.5rem 1rem 1rem;
+  border-radius: 1rem;
+  background-color: white;
+
+  .feature-icon {
+    margin-bottom: 0.5rem;
+  }
+
+  .feature-description {
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const FeatureCard = styled.li`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1rem 0.5rem 1rem 1rem;
+  border-radius: 1rem;
+  background-color: white;
+
+  .feature-icon {
+    margin-bottom: 0.5rem;
+  }
+
+  .feature-description {
+    font-size: 14px;
+    font-weight: 400;
+  }
+`

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

@@ -0,0 +1,12 @@
+import { FeatureCard } from './FeatureItem.styled'
+import { FeatureItemProps } from './FeatureItemProps'
+import React from 'react'
+
+export const FeatureItem: React.FC<FeatureItemProps> = ({ feature }) => {
+  return (
+    <FeatureCard>
+      <img className='feature-icon' src={feature?.icon?.url} alt='Feature Icon' width={16} height={16} />
+      <span className='feature-description'>{feature?.description}</span>
+    </FeatureCard>
+  )
+}

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.d.ts

@@ -0,0 +1,9 @@
+export interface FeatureItemProps {
+    feature: FeatureItemProp;
+}
+export interface FeatureItemProp {
+    description?: string;
+    icon: {
+        url?: string;
+    };
+}

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.js

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

package/dist/src/components/atoms/FeatureItem/FeatureItemProps.ts

@@ -0,0 +1,10 @@
+export interface FeatureItemProps {
+  feature: FeatureItemProp
+}
+
+export interface FeatureItemProp {
+  description?: string
+  icon: {
+    url?: string
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './FeatureItem';
+export * from './FeatureItemProps';

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

@@ -0,0 +1,2 @@
+export * from './FeatureItem';
+export * from './FeatureItemProps';

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

@@ -0,0 +1,2 @@
+export * from './FeatureItem'
+export * from './FeatureItemProps'

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

@@ -11,6 +11,8 @@ import lawdistricts from './svg/lawdistricts-logo.svg';
 import lawdistrictsWhite from './svg/lawdistricts-white-logo.svg';
 import lawsdistrict from './svg/lawsdistrict-logo.svg';
 import lawsdistrictWhite from './svg/lawsdistrict-white-logo.svg';
+import legalfinity from './svg/legalfinity-logo.svg';
+import legalfinityWhite from './svg/legalfinity-white-logo.svg';
 import uslawdistrict from './svg/uslawdistrict-logo.svg';
 import uslawdistrictWhite from './svg/uslawdistrict-white-logo.svg';
 const LOGOS = {
@@ -19,8 +21,8 @@ const LOGOS = {
         white: lawdistrictWhite
     },
     legalfinity: {
-        default: lawdistrict,
-        white: lawdistrictWhite
+        default: legalfinity,
+        white: legalfinityWhite
     },
     districtlaws: {
         default: districtlaws,

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

@@ -16,6 +16,8 @@ import lawdistricts from './svg/lawdistricts-logo.svg'
 import lawdistrictsWhite from './svg/lawdistricts-white-logo.svg'
 import lawsdistrict from './svg/lawsdistrict-logo.svg'
 import lawsdistrictWhite from './svg/lawsdistrict-white-logo.svg'
+import legalfinity from './svg/legalfinity-logo.svg'
+import legalfinityWhite from './svg/legalfinity-white-logo.svg'
 import uslawdistrict from './svg/uslawdistrict-logo.svg'
 import uslawdistrictWhite from './svg/uslawdistrict-white-logo.svg'
 
@@ -25,8 +27,8 @@ const LOGOS: Record<string, any> = {
     white: lawdistrictWhite
   },
   legalfinity: {
-    default: lawdistrict,
-    white: lawdistrictWhite
+    default: legalfinity,
+    white: legalfinityWhite
   },
   districtlaws: {
     default: districtlaws,

package/dist/src/components/atoms/Logo/svg/legalfinity-logo.svg

@@ -0,0 +1,15 @@
+<svg width="924" height="76" viewBox="0 0 924 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M880.879 74.3887V44.5078L884.531 54.7467L856.07 4.66569C855.205 3.14322 856.305 1.25353 858.056 1.25353H871.108L894.401 42.3137H884.629L908.021 1.25353H923.714L893.315 54.7467L896.868 44.5078V72.1049C896.868 73.3662 895.846 74.3887 894.584 74.3887H880.879Z" fill="black"/>
+<path d="M802.932 74.3887V15.0447H780.824V3.53731C780.824 2.27601 781.846 1.25353 783.108 1.25353H841.03V15.0447H818.922V72.1049C818.922 73.3662 817.899 74.3887 816.638 74.3887H802.932Z" fill="black"/>
+<path d="M740.814 74.3887V3.53732C740.814 2.27602 741.837 1.25353 743.098 1.25353H756.804V72.1049C756.804 73.3662 755.781 74.3887 754.52 74.3887H740.814Z" fill="black"/>
+<path d="M645.681 74.3887V3.53732C645.681 2.27602 646.704 1.25353 647.965 1.25353H658.907L699.67 53.9108H693.254V1.25353H709.046V72.1049C709.046 73.3662 708.024 74.3887 706.762 74.3887H695.919L655.058 21.7314H661.473V74.3887H645.681Z" fill="black"/>
+<path d="M597.873 74.3887V3.53732C597.873 2.27602 598.896 1.25353 600.157 1.25353H613.863V72.1049C613.863 73.3662 612.84 74.3887 611.579 74.3887H597.873Z" fill="black"/>
+<path d="M535.404 14.8358V72.1049C535.404 73.3662 534.381 74.3887 533.12 74.3887H519.414V16.3249L532.426 1.25353H569.343C570.604 1.25353 571.626 2.27602 571.626 3.53732V14.8358H535.404ZM538.832 40.0687C539.172 39.5038 539.739 39.113 540.387 38.9968L564.696 34.6452C566.096 34.3946 567.382 35.4709 567.382 36.8933V47.7466H534.219L538.832 40.0687Z" fill="black"/>
+<path d="M444.426 74.3887V3.53732C444.426 2.27602 445.448 1.25353 446.71 1.25353H460.415V60.5975H495.059V72.1049C495.059 73.3662 494.036 74.3887 492.775 74.3887H444.426Z" fill="black"/>
+<path d="M344.357 74.3887L374.563 2.65106C374.92 1.80421 375.749 1.25353 376.668 1.25353H390.943L420.496 71.2162C421.132 72.7219 420.027 74.3887 418.393 74.3887H405.058L379.79 9.82079H386.107L360.741 74.3887H344.357ZM359.754 58.7169L363.999 45.866H399.53L403.873 58.7169H359.754Z" fill="black"/>
+<path d="M295.23 75.6426C289.769 75.6426 284.735 74.7371 280.129 72.9262C275.589 71.0456 271.608 68.3988 268.187 64.9858C264.831 61.5728 262.199 57.5678 260.291 52.9707C258.448 48.3737 257.527 43.3239 257.527 37.8213C257.527 32.3188 258.448 27.269 260.291 22.6719C262.199 18.0748 264.864 14.0698 268.285 10.6568C271.707 7.24386 275.721 4.63189 280.327 2.82092C284.933 0.940307 289.999 0 295.527 0C301.646 0 307.14 1.07961 312.009 3.23884C316.944 5.39807 321.09 8.53243 324.446 12.6419L314.181 22.6719C311.68 19.8858 308.95 17.831 305.989 16.5076C303.028 15.1146 299.804 14.4181 296.316 14.4181C292.96 14.4181 289.901 14.9753 287.137 16.0897C284.373 17.2042 281.972 18.8062 279.932 20.8958C277.958 22.9853 276.412 25.458 275.293 28.3137C274.24 31.1695 273.714 34.3387 273.714 37.8213C273.714 41.2343 274.24 44.3687 275.293 47.2244C276.412 50.0802 277.958 52.5876 279.932 54.7469C281.972 56.8365 284.341 58.4385 287.038 59.5529C289.802 60.6673 292.829 61.2246 296.119 61.2246C299.277 61.2246 302.337 60.7022 305.298 59.6574C308.325 58.5429 311.253 56.6971 314.082 54.12L323.162 66.344C319.412 69.3391 315.036 71.6376 310.035 73.2396C305.1 74.8416 300.165 75.6426 295.23 75.6426ZM308.555 64.15V36.672H323.162V66.344L308.555 64.15Z" fill="black"/>
+<path d="M194.938 30.7166H228.2V41.5971C228.2 42.8584 227.177 43.8809 225.916 43.8809H194.938V30.7166ZM196.123 60.8064H233.727V72.1049C233.727 73.3662 232.705 74.3887 231.443 74.3887H180.232V3.53732C180.232 2.27602 181.255 1.25353 182.516 1.25353H232.444V12.552C232.444 13.8133 231.422 14.8358 230.16 14.8358H196.123V60.8064Z" fill="black"/>
+<path d="M116.915 74.3883L105.244 62.034V3.53732C105.244 2.27602 106.266 1.25353 107.527 1.25353H121.233V60.5975H155.876V72.1049C155.876 73.3662 154.854 74.3887 153.593 74.3887L116.915 74.3883Z" fill="black"/>
+<path d="M13.6011 39.4476L57.9441 39.9575C63.4177 40.3864 74.3373 44.3478 74.2273 56.7622C74.1172 69.1767 63.1264 73.2481 57.6447 73.732L0 73.7319L13.6011 39.4476Z" fill="#1039F5"/>
+<path d="M61.0774 35.3714L16.7252 35.2555C11.2472 34.8783 0.291265 31.0459 0.291265 18.7341C0.291265 6.42226 11.2472 2.28814 16.7252 1.76006L74.376 1.2534L61.0774 35.3714Z" fill="#1039F5"/>
+</svg>

package/dist/src/components/atoms/Logo/svg/legalfinity-white-logo.svg

@@ -0,0 +1,15 @@
+<svg width="924" height="76" viewBox="0 0 924 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M880.879 74.3887V44.5078L884.531 54.7467L856.07 4.66569C855.205 3.14322 856.305 1.25353 858.056 1.25353H871.108L894.401 42.3137H884.629L908.021 1.25353H923.714L893.315 54.7467L896.868 44.5078V72.1049C896.868 73.3662 895.846 74.3887 894.584 74.3887H880.879Z" fill="white"/>
+<path d="M802.932 74.3887V15.0447H780.824V3.53731C780.824 2.27601 781.846 1.25353 783.108 1.25353H841.03V15.0447H818.922V72.1049C818.922 73.3662 817.899 74.3887 816.638 74.3887H802.932Z" fill="white"/>
+<path d="M740.814 74.3887V3.53732C740.814 2.27602 741.837 1.25353 743.098 1.25353H756.804V72.1049C756.804 73.3662 755.781 74.3887 754.52 74.3887H740.814Z" fill="white"/>
+<path d="M645.681 74.3887V3.53732C645.681 2.27602 646.704 1.25353 647.965 1.25353H658.907L699.67 53.9108H693.254V1.25353H709.046V72.1049C709.046 73.3662 708.024 74.3887 706.762 74.3887H695.919L655.058 21.7314H661.473V74.3887H645.681Z" fill="white"/>
+<path d="M597.873 74.3887V3.53732C597.873 2.27602 598.896 1.25353 600.157 1.25353H613.863V72.1049C613.863 73.3662 612.84 74.3887 611.579 74.3887H597.873Z" fill="white"/>
+<path d="M535.404 14.8358V72.1049C535.404 73.3662 534.381 74.3887 533.12 74.3887H519.414V16.3249L532.427 1.25353H569.343C570.604 1.25353 571.626 2.27602 571.626 3.53732V14.8358H535.404ZM538.832 40.0687C539.172 39.5038 539.739 39.113 540.387 38.9968L564.696 34.6452C566.096 34.3946 567.382 35.4709 567.382 36.8933V47.7466H534.219L538.832 40.0687Z" fill="white"/>
+<path d="M444.426 74.3887V3.53732C444.426 2.27602 445.448 1.25353 446.71 1.25353H460.415V60.5975H495.059V72.1049C495.059 73.3662 494.036 74.3887 492.775 74.3887H444.426Z" fill="white"/>
+<path d="M344.357 74.3887L374.563 2.65106C374.92 1.80421 375.749 1.25353 376.668 1.25353H390.943L420.496 71.2162C421.132 72.7219 420.027 74.3887 418.393 74.3887H405.058L379.79 9.82079H386.107L360.741 74.3887H344.357ZM359.754 58.7169L363.999 45.866H399.53L403.873 58.7169H359.754Z" fill="white"/>
+<path d="M295.23 75.6426C289.769 75.6426 284.735 74.7371 280.129 72.9262C275.589 71.0456 271.608 68.3988 268.187 64.9858C264.831 61.5728 262.199 57.5678 260.291 52.9707C258.448 48.3737 257.527 43.3239 257.527 37.8213C257.527 32.3188 258.448 27.269 260.291 22.6719C262.199 18.0748 264.864 14.0698 268.285 10.6568C271.707 7.24386 275.721 4.63189 280.327 2.82092C284.933 0.940307 289.999 0 295.527 0C301.646 0 307.14 1.07961 312.009 3.23884C316.944 5.39807 321.09 8.53243 324.445 12.6419L314.181 22.6719C311.68 19.8858 308.95 17.831 305.989 16.5076C303.028 15.1146 299.804 14.4181 296.316 14.4181C292.96 14.4181 289.901 14.9753 287.137 16.0897C284.373 17.2042 281.972 18.8062 279.932 20.8958C277.958 22.9853 276.412 25.458 275.293 28.3137C274.24 31.1695 273.714 34.3387 273.714 37.8213C273.714 41.2343 274.24 44.3686 275.293 47.2244C276.412 50.0802 277.958 52.5876 279.932 54.7469C281.972 56.8364 284.341 58.4385 287.038 59.5529C289.802 60.6673 292.829 61.2246 296.119 61.2246C299.277 61.2246 302.337 60.7022 305.298 59.6574C308.325 58.5429 311.253 56.6971 314.082 54.12L323.162 66.344C319.412 69.3391 315.036 71.6376 310.035 73.2396C305.1 74.8416 300.165 75.6426 295.23 75.6426ZM308.555 64.15V36.672H323.162V66.344L308.555 64.15Z" fill="white"/>
+<path d="M194.938 30.7166H228.2V41.5971C228.2 42.8584 227.177 43.8809 225.916 43.8809H194.938V30.7166ZM196.123 60.8064H233.727V72.1049C233.727 73.3662 232.705 74.3887 231.443 74.3887H180.232V3.53732C180.232 2.27602 181.255 1.25353 182.516 1.25353H232.444V12.552C232.444 13.8133 231.422 14.8358 230.16 14.8358H196.123V60.8064Z" fill="white"/>
+<path d="M116.915 74.3883L105.244 62.034V3.53732C105.244 2.27602 106.266 1.25353 107.527 1.25353H121.233V60.5975H155.876V72.1049C155.876 73.3662 154.854 74.3887 153.593 74.3887L116.915 74.3883Z" fill="white"/>
+<path d="M13.6011 39.4476L57.9441 39.9575C63.4177 40.3864 74.3373 44.3478 74.2273 56.7622C74.1172 69.1767 63.1264 73.2481 57.6447 73.732L0 73.7319L13.6011 39.4476Z" fill="#1039F5"/>
+<path d="M61.0774 35.3714L16.7252 35.2555C11.2472 34.8783 0.291265 31.0459 0.291265 18.7341C0.291265 6.42226 11.2472 2.28814 16.7252 1.76006L74.376 1.2534L61.0774 35.3714Z" fill="#1039F5"/>
+</svg>

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Benefit, BenefitsList, Divider, PlanCardContainer, PlanTitle, Price, PriceLabel, PricingInfo } from './PlanCard.styled';
+import { Button } from '../Button';
+export const PlanCard = ({ plan, onSelect }) => {
+    return (_jsxs(PlanCardContainer, { children: [_jsx(PlanTitle, { className: plan?.highlightPlan ? 'highlight' : 'asdfasdf', children: plan?.subscription_type?.name }), _jsxs(PricingInfo, { children: [_jsx(Price, { children: plan?.pricing }), _jsx(PriceLabel, { children: plan?.pricingLabel })] }), _jsx(Button, { label: plan?.buttonText ?? '', dataQa: `${plan?.subscription_type?.name.replaceAll(' ', '')}-button`, noLink: true, onClick: () => onSelect?.(plan?.subscription_type?.sku ?? ''), givenClass: 'pricing-plan__button', color: plan?.highlightPlan ? 'primary' : 'transparent' }), _jsx(Divider, {}), _jsx(BenefitsList, { children: plan?.benefits?.map((item) => (_jsxs(Benefit, { className: item?.type == 'default' ? 'default' : 'ai-benefit', children: [item?.icon, _jsx("p", { className: 'benefit-text', dangerouslySetInnerHTML: { __html: item?.benefit } })] }, item?.benefit))) })] }));
+};

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

@@ -0,0 +1,8 @@
+export declare const PlanCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PlanTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const PricingInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PriceLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const BenefitsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const Benefit: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+export const PlanCardContainer = styled.div `
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`;
+export const PlanTitle = styled.span `
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`;
+export const PricingInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const Price = styled.h4 `
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`;
+export const PriceLabel = styled.span `
+  font-size: 14px;
+`;
+export const Divider = styled.hr `
+  border: 1px solid var(--neutral-neutral-4);
+  width: 100%;
+`;
+export const BenefitsList = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+export const Benefit = styled.li `
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  .benefit-text {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`;

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+
+export const PlanCardContainer = styled.div`
+  text-align: center;
+  gap: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1.5rem;
+
+  .pricing-plan__button {
+    width: 100%;
+  }
+`
+
+export const PlanTitle = styled.span`
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  background-color: var(--neutral-neutral-4);
+  font-size: large;
+  font-weight: 700;
+  &.highlight {
+    background-color: var(--primary-main-light-4);
+  }
+`
+
+export const PricingInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const Price = styled.h4`
+  font-size: 36px;
+  font-weight: 700;
+  margin: 0 0 -0.5rem 0;
+`
+
+export const PriceLabel = styled.span`
+  font-size: 14px;
+`
+
+export const Divider = styled.hr`
+  border: 1px solid var(--neutral-neutral-4);
+  width: 100%;
+`
+
+export const BenefitsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`
+
+export const Benefit = styled.li`
+  display: flex;
+  align-items: start;
+  box-sizing: border-box;
+  padding: 0 1rem;
+
+  &.ai-benefit {
+    background-color: var(--primary-main-light-5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  .benefit-text {
+    text-align: left;
+    font-size: 14px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 0.3rem;
+    margin-right: 0.5rem;
+  }
+`

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

@@ -0,0 +1,42 @@
+import {
+  Benefit,
+  BenefitsList,
+  Divider,
+  PlanCardContainer,
+  PlanTitle,
+  Price,
+  PriceLabel,
+  PricingInfo
+} from './PlanCard.styled'
+import { Button } from '../Button'
+import { PlanCardProps } from './PlanCardProps'
+import React from 'react'
+
+export const PlanCard: React.FC<PlanCardProps> = ({ plan, onSelect }) => {
+  return (
+    <PlanCardContainer>
+      <PlanTitle className={plan?.highlightPlan ? 'highlight' : 'asdfasdf'}>{plan?.subscription_type?.name}</PlanTitle>
+      <PricingInfo>
+        <Price>{plan?.pricing}</Price>
+        <PriceLabel>{plan?.pricingLabel}</PriceLabel>
+      </PricingInfo>
+      <Button
+        label={plan?.buttonText ?? ''}
+        dataQa={`${plan?.subscription_type?.name.replaceAll(' ', '')}-button`}
+        noLink
+        onClick={() => onSelect?.(plan?.subscription_type?.sku ?? '')}
+        givenClass='pricing-plan__button'
+        color={plan?.highlightPlan ? 'primary' : 'transparent'}
+      />
+      <Divider />
+      <BenefitsList>
+        {plan?.benefits?.map((item) => (
+          <Benefit key={item?.benefit} className={item?.type == 'default' ? 'default' : 'ai-benefit'}>
+            {item?.icon}
+            <p className='benefit-text' dangerouslySetInnerHTML={{ __html: item?.benefit }}></p>
+          </Benefit>
+        ))}
+      </BenefitsList>
+    </PlanCardContainer>
+  )
+}

package/dist/src/components/atoms/PlanCard/PlanCardProps.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface PlanCardProps {
+    plan: SubscriptionPlan;
+    onSelect?: (sku: string) => void;
+}
+export interface SubscriptionPlan {
+    benefits?: Benefit[];
+    pricing?: string;
+    pricingLabel?: string;
+    buttonText?: string;
+    highlightPlan?: boolean;
+    subscription_type?: SubscriptionType;
+}
+interface Benefit {
+    type: 'default' | 'lawgenius';
+    benefit: string;
+    icon: ReactNode;
+}
+interface SubscriptionType {
+    name: string;
+    sku: string;
+}
+export {};

package/dist/src/components/atoms/PlanCard/PlanCardProps.js

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

package/dist/src/components/atoms/PlanCard/PlanCardProps.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+
+export interface PlanCardProps {
+  plan: SubscriptionPlan
+  onSelect?: (sku: string) => void
+}
+
+export interface SubscriptionPlan {
+  benefits?: Benefit[]
+  pricing?: string
+  pricingLabel?: string
+  buttonText?: string
+  highlightPlan?: boolean
+  subscription_type?: SubscriptionType
+}
+
+interface Benefit {
+  type: 'default' | 'lawgenius'
+  benefit: string
+  icon: ReactNode
+}
+
+interface SubscriptionType {
+  name: string
+  sku: string
+}

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

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

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

@@ -0,0 +1,2 @@
+export * from './PlanCard';
+export * from './PlanCardProps';

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

@@ -0,0 +1,2 @@
+export * from './PlanCard'
+export * from './PlanCardProps'

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar';
 export * from './MobileTrigger';
 export * from './PhoneNumberDisplay';
 export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar';
 export * from './MobileTrigger';
 export * from './PhoneNumberDisplay';
 export * from './ContactInformationHeader';
+export * from './FeatureItem';
+export * from './PlanCard';

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

@@ -69,3 +69,5 @@ export * from './WideInfoBar'
 export * from './MobileTrigger'
 export * from './PhoneNumberDisplay'
 export * from './ContactInformationHeader'
+export * from './FeatureItem'
+export * from './PlanCard'

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

@@ -33,7 +33,7 @@ export const AccordionItemStyled = styled.div `
     letter-spacing: -0.3px;
 
     &.--success {
-      background: var(--primary-main-light-6);
+      background: #eff7f5;
     }
 
     &.--locked {
@@ -55,10 +55,6 @@ export const AccordionItemStyled = styled.div `
 
     &.--locked {
       color: var(--neutral-neutral-2);
-
-      html[data-theme='legalfinity'] & {
-        color: var(--primary-main-dark-1);
-      }
     }
   }
 
@@ -68,6 +64,5 @@ export const AccordionItemStyled = styled.div `
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
-    color: black;
   }
 `;

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

@@ -34,7 +34,7 @@ export const AccordionItemStyled = styled.div`
     letter-spacing: -0.3px;
 
     &.--success {
-      background: var(--primary-main-light-6);
+      background: #eff7f5;
     }
 
     &.--locked {
@@ -56,10 +56,6 @@ export const AccordionItemStyled = styled.div`
 
     &.--locked {
       color: var(--neutral-neutral-2);
-
-      html[data-theme='legalfinity'] & {
-        color: var(--primary-main-dark-1);
-      }
     }
   }
 
@@ -69,6 +65,5 @@ export const AccordionItemStyled = styled.div`
     border-right: 1px solid var(--neutral-neutral-4);
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
-    color: black;
   }
 `

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

@@ -78,6 +78,13 @@ export const BoxFormStyled = styled.div `
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .e-button {
+      flex: 1;
+      text-wrap: nowrap;
+    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -91,8 +98,7 @@ export const BoxFormStyled = styled.div `
   }
 
   .box--form__footer__text {
-    margin-right: 5px;
-    width: 60%;
+    margin-right: 1rem;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;

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

@@ -79,6 +79,13 @@ export const BoxFormStyled = styled.div`
     display: flex;
     justify-content: space-between;
     padding: 1.5rem 0 1rem 0;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    .e-button {
+      flex: 1;
+      text-wrap: nowrap;
+    }
 
     @media ${device['portrait-tablets']} {
       .e-button {
@@ -92,8 +99,7 @@ export const BoxFormStyled = styled.div`
   }
 
   .box--form__footer__text {
-    margin-right: 5px;
-    width: 60%;
+    margin-right: 1rem;
 
     @media ${device['portrait-tablets']} {
       white-space: nowrap;

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StickyPlanBarStyled, StickyPlanContent, StickySelectButton } from './StickyPlanBar.styled';
+export const StickyPlanBar = ({ activePlan, showStickyBar, onPlanSelect }) => {
+    return (_jsxs(StickyPlanBarStyled, { className: `sticky-plan-bar ${showStickyBar ? 'visible' : ''}`, children: [_jsxs(StickyPlanContent, { className: 'sticky-plan-info', children: [_jsx("span", { className: 'sticky-plan-name', children: activePlan.subscription_type?.name }), _jsxs("div", { className: 'sticky-plan-pricing', children: [_jsx("span", { className: 'sticky-plan-price', children: activePlan.pricing }), _jsx("span", { className: 'sticky-plan-priceLabel', children: activePlan.pricingLabel })] })] }), _jsx(StickySelectButton, { className: 'sticky-select-button', onClick: () => (onPlanSelect ? onPlanSelect(activePlan?.subscription_type?.sku ?? '') : undefined), children: "Select" })] }));
+};

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

@@ -0,0 +1,3 @@
+export declare const StickyPlanBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StickyPlanContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StickySelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;