@npm_leadtech/legal-lib-components 7.63.9 → 7.63.11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.d.ts

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

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled';
-import { Logo } from '../../atoms';
-import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
-export const PricingPageHeader = ({ siteName = 'Legalfinity', phoneNumber }) => {
-    return (_jsxs(PricingHeaderStyled, { children: [_jsx(Logo, { siteName: siteName, width: '150', height: '26' }), _jsxs(PhoneNumberStyled, { children: [_jsx(PhoneIcon, { width: 16, height: 16, fill: '#6d7275' }), _jsx("strong", { children: phoneNumber })] }), _jsxs(PhoneButtonStyled, { href: `tel:${phoneNumber}`, target: '__self', children: [_jsx(PhoneIcon, { width: 24, height: 24, fill: 'currentColor' }), _jsx("strong", { children: 'Call Us' })] })] }));
-};

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.d.ts

@@ -1,3 +0,0 @@
-export declare const PricingHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const PhoneButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const PhoneNumberStyled: 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/organisms/PricingPageHeader/PricingPageHeader.styled.js

@@ -1,35 +0,0 @@
-import { size } from '../../../globalStyles/breakpoints';
-import styled from 'styled-components';
-export const PricingHeaderStyled = styled.header `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-`;
-export const PhoneButtonStyled = styled.a `
-  display: none;
-  align-items: center;
-  gap: 0.25rem;
-  height: 2.5rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid var(--neutral-neutral-4);
-  font-size: 14px;
-  color: var(--primary-main);
-  @media (max-width: ${size.tab}) {
-    display: flex;
-  }
-`;
-export const PhoneNumberStyled = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--neutral-neutral-2);
-  height: 2.5rem;
-
-  @media (max-width: ${size.tab}) {
-    display: none;
-  }
-`;

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeader.styled.tsx

@@ -1,38 +0,0 @@
-import { size } from '../../../globalStyles/breakpoints'
-import styled from 'styled-components'
-
-export const PricingHeaderStyled = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-`
-
-export const PhoneButtonStyled = styled.a`
-  display: none;
-  align-items: center;
-  gap: 0.25rem;
-  height: 2.5rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  text-decoration: none;
-  cursor: pointer;
-  border: 1px solid var(--neutral-neutral-4);
-  font-size: 14px;
-  color: var(--primary-main);
-  @media (max-width: ${size.tab}) {
-    display: flex;
-  }
-`
-
-export const PhoneNumberStyled = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--neutral-neutral-2);
-  height: 2.5rem;
-
-  @media (max-width: ${size.tab}) {
-    display: none;
-  }
-`

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

@@ -1,21 +0,0 @@
-import { PhoneButtonStyled, PhoneNumberStyled, PricingHeaderStyled } from './PricingPageHeader.styled'
-import { Logo } from '../../atoms'
-import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon'
-import { PricingHeaderProps } from './PricingPageHeaderProps'
-import React from 'react'
-
-export const PricingPageHeader: React.FC<PricingHeaderProps> = ({ siteName = 'Legalfinity', phoneNumber }) => {
-  return (
-    <PricingHeaderStyled>
-      <Logo siteName={siteName} width='150' height='26' />
-      <PhoneNumberStyled>
-        <PhoneIcon width={16} height={16} fill='#6d7275' />
-        <strong>{phoneNumber}</strong>
-      </PhoneNumberStyled>
-      <PhoneButtonStyled href={`tel:${phoneNumber}`} target='__self'>
-        <PhoneIcon width={24} height={24} fill='currentColor' />
-        <strong>{'Call Us'}</strong>
-      </PhoneButtonStyled>
-    </PricingHeaderStyled>
-  )
-}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.d.ts

@@ -1,4 +0,0 @@
-export interface PricingHeaderProps {
-    siteName?: string;
-    phoneNumber?: string;
-}

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.js

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

package/dist/src/components/organisms/PricingPageHeader/PricingPageHeaderProps.ts

@@ -1,4 +0,0 @@
-export interface PricingHeaderProps {
-  siteName?: string
-  phoneNumber?: string
-}

package/dist/src/components/organisms/PricingPageHeader/index.d.ts

@@ -1,2 +0,0 @@
-export * from './PricingPageHeader';
-export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.js

@@ -1,2 +0,0 @@
-export * from './PricingPageHeader';
-export * from './PricingPageHeaderProps';

package/dist/src/components/organisms/PricingPageHeader/index.ts

@@ -1,2 +0,0 @@
-export * from './PricingPageHeader'
-export * from './PricingPageHeaderProps'

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

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

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FeatureItem, PlanCard } from '../../atoms';
-import { FeaturesGrid, FeaturesSection, PlanSelector, PlanWrapper, PlansWrapper, PricingContainerStyled, SelectorButton } from './PricingPlansPage.styled';
-import { PricingPageHeader } from '../../organisms';
-import React from 'react';
-export const PricingPlansPage = ({ subscriptionPlans, features, onPlanSelect, headerDivider, siteName = 'Legalfinity', phoneNumber }) => {
-    const [activePlanIndex, setActivePlanIndex] = React.useState(0);
-    return (_jsxs(_Fragment, { children: [_jsx(PricingPageHeader, { siteName: siteName, phoneNumber: phoneNumber }), headerDivider, subscriptionPlans?.length > 0 && (_jsxs(PricingContainerStyled, { children: [_jsx(PlanSelector, { children: subscriptionPlans.map((plan, index) => (_jsx(SelectorButton, { isActive: index === activePlanIndex, onClick: () => setActivePlanIndex(index), dataQa: `selector-${plan.subscription_type?.name.replaceAll(' ', '')}`, children: plan?.subscription_type?.name }, `selector-${plan?.pricingLabel}`))) }), _jsx(PlansWrapper, { children: subscriptionPlans.map((plan, index) => (_jsx(PlanWrapper, { isHighlighted: plan.highlightPlan, isActive: index === activePlanIndex, className: `pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`, children: _jsx(PlanCard, { onSelect: onPlanSelect ?? (() => { }), plan: plan }) }, plan.pricingLabel))) }), features && features.length > 0 && (_jsx(FeaturesSection, { children: _jsx(FeaturesGrid, { children: features.map((feature) => (_jsx(FeatureItem, { feature: feature }, feature.description))) }) }))] }))] }));
-};

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.d.ts

@@ -1,16 +0,0 @@
-type PlanWrapperProps = {
-    isActive: boolean;
-    isHighlighted?: boolean;
-};
-type SelectorButton = {
-    isActive: boolean;
-    dataQa: string;
-};
-export declare const PricingContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const PlanSelector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, SelectorButton>> & string;
-export declare const PlansWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PlanWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlanWrapperProps>> & string;
-export declare const FeaturesSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FeaturesGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export {};

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.js

@@ -1,88 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../../globalStyles/breakpoints';
-export const PricingContainerStyled = styled.section `
-  margin: 0 auto 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 996px;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-  padding: 0 1.5rem;
-`;
-export const PlanSelector = styled.div `
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 1rem;
-  padding: 0.5rem;
-
-  @media (min-width: ${size.tab}) {
-    display: none;
-  }
-`;
-export const SelectorButton = styled.button `
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  border: none;
-  outline: inherit;
-  flex: 1;
-  font-size: 12px;
-  font-weight: 700;
-  background-color: var(--neutral-neutral-4);
-  color: var(--neutral-neutral-1);
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  ${({ isActive }) => isActive &&
-    css `
-      background-color: var(--primary-main);
-      color: white;
-    `}
-`;
-export const PlansWrapper = styled.div `
-  display: flex;
-  height: 100%;
-  gap: 1rem;
-  width: 100%;
-  max-width: 327px;
-
-  @media (min-width: ${size.tab}) {
-    max-width: none;
-    gap: 20px;
-  }
-`;
-export const PlanWrapper = styled.div `
-  max-width: 327px;
-  border-radius: 1rem;
-  flex: 1;
-  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
-  background-color: white;
-
-  ${({ isHighlighted }) => isHighlighted &&
-    css `
-      border: 2px solid var(--primary-main);
-    `}
-
-  @media (min-width: ${size.tab}) {
-    display: block;
-    max-width: none;
-  }
-`;
-export const FeaturesSection = styled.div `
-  width: 100%;
-`;
-export const FeaturesGrid = styled.ul `
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  @media (min-width: ${size.tab}) {
-    display: flex;
-    justify-content: center;
-  }
-`;

package/dist/src/components/pages/PricingPlansPage/PricingPlansPage.styled.ts

@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components'
-import { size } from '../../../globalStyles/breakpoints'
-
-type PlanWrapperProps = {
-  isActive: boolean
-  isHighlighted?: boolean
-}
-
-type SelectorButton = {
-  isActive: boolean
-  dataQa: string
-}
-
-export const PricingContainerStyled = styled.section`
-  margin: 0 auto 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 996px;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-  padding: 0 1.5rem;
-`
-
-export const PlanSelector = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 1rem;
-  padding: 0.5rem;
-
-  @media (min-width: ${size.tab}) {
-    display: none;
-  }
-`
-
-export const SelectorButton = styled.button<SelectorButton>`
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  border: none;
-  outline: inherit;
-  flex: 1;
-  font-size: 12px;
-  font-weight: 700;
-  background-color: var(--neutral-neutral-4);
-  color: var(--neutral-neutral-1);
-  cursor: pointer;
-  transition: background-color 0.3s;
-
-  ${({ isActive }) =>
-    isActive &&
-    css`
-      background-color: var(--primary-main);
-      color: white;
-    `}
-`
-
-export const PlansWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  gap: 1rem;
-  width: 100%;
-  max-width: 327px;
-
-  @media (min-width: ${size.tab}) {
-    max-width: none;
-    gap: 20px;
-  }
-`
-
-export const PlanWrapper = styled.div<PlanWrapperProps>`
-  max-width: 327px;
-  border-radius: 1rem;
-  flex: 1;
-  display: ${({ isActive }) => (isActive ? 'block' : 'none')};
-  background-color: white;
-
-  ${({ isHighlighted }) =>
-    isHighlighted &&
-    css`
-      border: 2px solid var(--primary-main);
-    `}
-
-  @media (min-width: ${size.tab}) {
-    display: block;
-    max-width: none;
-  }
-`
-
-export const FeaturesSection = styled.div`
-  width: 100%;
-`
-
-export const FeaturesGrid = styled.ul`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  @media (min-width: ${size.tab}) {
-    display: flex;
-    justify-content: center;
-  }
-`