@npm_leadtech/legal-lib-components 7.82.0 → 7.82.52

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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    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.sm}) {
-    display: flex;
-    justify-content: center;
-  }
-`

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

@@ -1,133 +0,0 @@
-import { FeatureItem, PlanCard } from '../../atoms'
-import {
-  FeaturesGrid,
-  FeaturesSection,
-  PlanSelector,
-  PlanWrapper,
-  PlansWrapper,
-  PricingContainerStyled,
-  SelectorButton
-} from './PricingPlansPage.styled'
-import { PricingPageHeader } from '../../organisms'
-import { PricingPlansPageProps } from './PricingPlansPageProps'
-import React from 'react'
-import { StickyPlanBar } from '../../molecules/StickyPlanBar'
-import { throttle } from '../../../utils/throttle'
-
-export const PricingPlansPage: React.FC<PricingPlansPageProps> = ({
-  subscriptionPlans,
-  features,
-  onPlanSelect,
-  headerDivider,
-  siteName = 'Legalfinity',
-  phoneNumber,
-  isRedirectingToPayment
-}) => {
-  const [activePlanIndex, setActivePlanIndex] = React.useState(0)
-  const plansWrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const lastScrollYRef = React.useRef(0)
-  const [showStickyBar, setShowStickyBar] = React.useState(false)
-
-  const activePlan = subscriptionPlans[activePlanIndex]
-
-  React.useEffect(() => {
-    const handleScroll = () => {
-      if (!plansWrapperRef.current) return
-
-      const currentScrollY = window.scrollY
-      const isMobile = window.innerWidth < 720
-
-      if (!isMobile) {
-        if (showStickyBar) {
-          setShowStickyBar(false)
-        }
-        return
-      }
-
-      const isScrollingUp = currentScrollY < lastScrollYRef.current - 10 ? 'up' : null
-
-      const scrollDirection = currentScrollY > lastScrollYRef.current + 10 ? 'down' : isScrollingUp
-      if (!scrollDirection) return
-
-      const targetRect = plansWrapperRef.current.getBoundingClientRect()
-      const isPastWrapper = targetRect.bottom < 400
-
-      if (scrollDirection === 'down' && isPastWrapper) {
-        if (!showStickyBar) {
-          setShowStickyBar(true)
-        }
-      } else if (scrollDirection === 'up' || !isPastWrapper) {
-        if (showStickyBar && !isPastWrapper) {
-          setShowStickyBar(false)
-        }
-      }
-
-      lastScrollYRef.current = currentScrollY
-    }
-
-    const handleResize = () => {
-      if (window.innerWidth >= 720) {
-        setShowStickyBar(false)
-      }
-    }
-
-    const throttledHandleScroll = throttle(handleScroll, 100)
-
-    window.addEventListener('scroll', throttledHandleScroll)
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('scroll', throttledHandleScroll)
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [showStickyBar])
-
-  return (
-    <>
-      <PricingPageHeader siteName={siteName} phoneNumber={phoneNumber} />
-      {headerDivider}
-      {subscriptionPlans?.length > 0 && (
-        <PricingContainerStyled>
-          <PlanSelector>
-            {subscriptionPlans.map((plan, index) => (
-              <SelectorButton
-                key={`selector-${plan?.pricingLabel}`}
-                isActive={index === activePlanIndex}
-                onClick={() => setActivePlanIndex(index)}
-                dataQa={`selector-${plan.subscription_type?.name.replaceAll(' ', '')}`}
-              >
-                {plan?.subscription_type?.name}
-              </SelectorButton>
-            ))}
-          </PlanSelector>
-          <PlansWrapper ref={plansWrapperRef}>
-            {subscriptionPlans.map((plan, index) => (
-              <PlanWrapper
-                key={plan.pricingLabel}
-                isHighlighted={plan.highlightPlan}
-                isActive={index === activePlanIndex}
-                className={`pricing-plan__element-container ${plan?.highlightPlan ? 'highlight' : ''} ${index === activePlanIndex ? 'active' : ''}`}
-              >
-                <PlanCard
-                  isRedirectingToPayment={isRedirectingToPayment}
-                  onSelect={onPlanSelect ?? (() => {})}
-                  plan={plan}
-                />
-              </PlanWrapper>
-            ))}
-          </PlansWrapper>
-          {features && features.length > 0 && (
-            <FeaturesSection>
-              <FeaturesGrid>
-                {features.map((feature) => (
-                  <FeatureItem feature={feature} key={feature.description} />
-                ))}
-              </FeaturesGrid>
-            </FeaturesSection>
-          )}
-          <StickyPlanBar activePlan={activePlan} showStickyBar={showStickyBar} onPlanSelect={onPlanSelect} />
-        </PricingContainerStyled>
-      )}
-    </>
-  )
-}

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

@@ -1,10 +0,0 @@
-import { FeatureItemProp, SubscriptionPlan } from '../../atoms';
-export interface PricingPlansPageProps {
-    subscriptionPlans: SubscriptionPlan[];
-    features?: FeatureItemProp[];
-    onPlanSelect?: (sku: string) => void;
-    headerDivider?: React.ReactNode;
-    siteName?: string;
-    phoneNumber?: string;
-    isRedirectingToPayment?: boolean;
-}

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

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

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

@@ -1,11 +0,0 @@
-import { FeatureItemProp, SubscriptionPlan } from '../../atoms'
-
-export interface PricingPlansPageProps {
-  subscriptionPlans: SubscriptionPlan[]
-  features?: FeatureItemProp[]
-  onPlanSelect?: (sku: string) => void
-  headerDivider?: React.ReactNode
-  siteName?: string
-  phoneNumber?: string
-  isRedirectingToPayment?: boolean
-}

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

@@ -1,2 +0,0 @@
-export * from './PricingPlansPage';
-export * from './PricingPlansPageProps';

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

@@ -1,2 +0,0 @@
-export * from './PricingPlansPage';
-export * from './PricingPlansPageProps';

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

@@ -1,2 +0,0 @@
-export * from './PricingPlansPage'
-export * from './PricingPlansPageProps'

package/dist/src/components/sections/AppHeader/AppHeader.d.ts

@@ -1,4 +0,0 @@
-import { AppHeaderProps } from './AppHeaderProps';
-import React from 'react';
-import './AppHeader.scss';
-export declare const AppHeader: React.FC<AppHeaderProps>;

package/dist/src/components/sections/AppHeader/AppHeader.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled';
-import { DesktopMenu, MobileMenu } from '../../organisms';
-import { Logo } from '../../atoms';
-import './AppHeader.scss';
-export const AppHeader = ({ siteName = 'LawDistrict', homeUrl = '/', sitePhone, scheduleText, headerFullWidth, menuList, toggleMenuHelpOpen, toggleMenuPersonalOpen, isHelpActive, isPersonalActive, userActions, helpTriggerImage, userTriggerImage, handleClickLogo, headerClassnames, closeText = 'Close', showTopBar }) => {
-    return (_jsx(AppHeaderStyled, { className: headerClassnames, children: _jsxs(AppHeaderWrapper, { itemScope: true, itemType: 'https://schema.org/Brand', className: `${headerFullWidth ? '--no-grid' : 'wrapper'}`, children: [_jsx("a", { className: 'header__logo', onClick: (event) => handleClickLogo(event, homeUrl), href: homeUrl, children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(DesktopMenu, { phoneNumber: sitePhone, menuList: menuList, userActions: userActions, homeUrl: homeUrl }), _jsx(MobileMenu, { closeText: closeText, helpTriggerImage: helpTriggerImage, isHelpActive: isHelpActive, isPersonalActive: isPersonalActive, toggleMenuHelpOpen: toggleMenuHelpOpen, toggleMenuPersonalOpen: toggleMenuPersonalOpen, userTriggerImage: userTriggerImage, homeUrl: homeUrl, menuList: menuList, scheduleText: scheduleText, sitePhone: sitePhone, userActions: userActions, showTopBar: showTopBar })] }) }));
-};

package/dist/src/components/sections/AppHeader/AppHeader.scss

@@ -1,35 +0,0 @@
-.navigation-pane__user-menu {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .login-button {
-    margin-right: 1rem;
-  }
-  .navigation-pane__user-name {
-    margin-right: 1rem;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 6rem;
-  }
-
-  .longer-text {
-    width: 11rem;
-    margin-right: 1.5rem;
-    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
-    color: var(--button-hover);
-  }
-
-  .go-to-dashboard-button,
-  .go-to-free-account-button {
-    background-color: transparent;
-
-    &:hover {
-      background-color: #e4f8f3;
-    }
-  }
-  .navigation-pane__button {
-    width: 100%;
-  }
-}

package/dist/src/components/sections/AppHeader/AppHeader.styled.d.ts

@@ -1,2 +0,0 @@
-export declare const AppHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const AppHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/src/components/sections/AppHeader/AppHeader.styled.js

@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-export const AppHeaderStyled = styled.header `
-  background-color: var(--others-white);
-  position: sticky;
-  z-index: 999;
-  &.product-header-background {
-    background-color: var(--secondary-main-light-4);
-  }
-
-  &.create-password-header-background {
-    background-color: var(--neutral-neutral-6);
-  }
-
-  &.payment-details-header-background {
-    background-color: var(--neutral-neutral-6);
-  }
-
-  &.payment-header-background-8814 {
-    background-color: var(--primary-main-light-5);
-  }
-
-  &.transparent-header-background {
-    background-color: transparent;
-  }
-
-  &.form-header-background {
-    background-color: var(--others-white);
-  }
-`;
-export const AppHeaderWrapper = styled.span `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem 1rem 1.5rem;
-`;

package/dist/src/components/sections/AppHeader/AppHeader.styled.ts

@@ -1,36 +0,0 @@
-import styled from 'styled-components'
-
-export const AppHeaderStyled = styled.header`
-  background-color: var(--others-white);
-  position: sticky;
-  z-index: 999;
-  &.product-header-background {
-    background-color: var(--secondary-main-light-4);
-  }
-
-  &.create-password-header-background {
-    background-color: var(--neutral-neutral-6);
-  }
-
-  &.payment-details-header-background {
-    background-color: var(--neutral-neutral-6);
-  }
-
-  &.payment-header-background-8814 {
-    background-color: var(--primary-main-light-5);
-  }
-
-  &.transparent-header-background {
-    background-color: transparent;
-  }
-
-  &.form-header-background {
-    background-color: var(--others-white);
-  }
-`
-export const AppHeaderWrapper = styled.span`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem 1rem 1.5rem;
-`

package/dist/src/components/sections/AppHeader/AppHeader.tsx

@@ -1,58 +0,0 @@
-import { AppHeaderStyled, AppHeaderWrapper } from './AppHeader.styled'
-import { DesktopMenu, MobileMenu } from '../../organisms'
-import { AppHeaderProps } from './AppHeaderProps'
-import { Logo } from '../../atoms'
-import React from 'react'
-import './AppHeader.scss'
-
-export const AppHeader: React.FC<AppHeaderProps> = ({
-  siteName = 'LawDistrict',
-  homeUrl = '/',
-  sitePhone,
-  scheduleText,
-  headerFullWidth,
-  menuList,
-  toggleMenuHelpOpen,
-  toggleMenuPersonalOpen,
-  isHelpActive,
-  isPersonalActive,
-  userActions,
-  helpTriggerImage,
-  userTriggerImage,
-  handleClickLogo,
-  headerClassnames,
-  closeText = 'Close',
-  showTopBar
-}) => {
-  return (
-    <AppHeaderStyled className={headerClassnames}>
-      <AppHeaderWrapper
-        itemScope
-        itemType='https://schema.org/Brand'
-        className={`${headerFullWidth ? '--no-grid' : 'wrapper'}`}
-      >
-        <a className='header__logo' onClick={(event) => handleClickLogo(event, homeUrl)} href={homeUrl}>
-          <Logo siteName={siteName} width='188' height='32' />
-        </a>
-
-        <DesktopMenu phoneNumber={sitePhone} menuList={menuList} userActions={userActions} homeUrl={homeUrl} />
-
-        <MobileMenu
-          closeText={closeText}
-          helpTriggerImage={helpTriggerImage}
-          isHelpActive={isHelpActive}
-          isPersonalActive={isPersonalActive}
-          toggleMenuHelpOpen={toggleMenuHelpOpen}
-          toggleMenuPersonalOpen={toggleMenuPersonalOpen}
-          userTriggerImage={userTriggerImage}
-          homeUrl={homeUrl}
-          menuList={menuList}
-          scheduleText={scheduleText}
-          sitePhone={sitePhone}
-          userActions={userActions}
-          showTopBar={showTopBar}
-        />
-      </AppHeaderWrapper>
-    </AppHeaderStyled>
-  )
-}

package/dist/src/components/sections/AppHeader/AppHeaderProps.d.ts

@@ -1,26 +0,0 @@
-export interface MenuListItem {
-    title: string;
-    url: string;
-}
-export interface AppHeaderProps {
-    siteName: string;
-    homeUrl: string;
-    sitePhone: string;
-    scheduleText: string;
-    headerFullWidth: boolean;
-    menuList?: {
-        title: string;
-        items: MenuListItem[];
-    };
-    toggleMenuHelpOpen: () => void;
-    toggleMenuPersonalOpen: () => void;
-    isHelpActive: boolean;
-    isPersonalActive: boolean;
-    userActions: React.ReactNode;
-    helpTriggerImage: string;
-    userTriggerImage: string;
-    handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void;
-    headerClassnames: string;
-    closeText: string;
-    showTopBar?: boolean;
-}

package/dist/src/components/sections/AppHeader/AppHeaderProps.js

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

package/dist/src/components/sections/AppHeader/AppHeaderProps.ts

@@ -1,27 +0,0 @@
-export interface MenuListItem {
-  title: string
-  url: string
-}
-
-export interface AppHeaderProps {
-  siteName: string
-  homeUrl: string
-  sitePhone: string
-  scheduleText: string
-  headerFullWidth: boolean
-  menuList?: {
-    title: string
-    items: MenuListItem[]
-  }
-  toggleMenuHelpOpen: () => void
-  toggleMenuPersonalOpen: () => void
-  isHelpActive: boolean
-  isPersonalActive: boolean
-  userActions: React.ReactNode
-  helpTriggerImage: string
-  userTriggerImage: string
-  handleClickLogo: (event: React.MouseEvent<HTMLElement>, url: string) => void
-  headerClassnames: string
-  closeText: string
-  showTopBar?: boolean
-}

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

@@ -1,2 +0,0 @@
-export * from './AppHeader';
-export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.js

@@ -1,2 +0,0 @@
-export * from './AppHeader';
-export * from './AppHeaderProps';

package/dist/src/components/sections/AppHeader/index.ts

@@ -1,2 +0,0 @@
-export * from './AppHeader'
-export * from './AppHeaderProps'

package/dist/src/components/sections/CardBoxSection/CardBoxSection.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type CardBoxSectionProps } from './CardBoxSectionProps';
-export declare const CardBoxMinimalSection: React.FC<CardBoxSectionProps>;
-export declare const CardBoxFeaturedSection: React.FC<CardBoxSectionProps>;

package/dist/src/components/sections/CardBoxSection/CardBoxSection.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CardBoxFeaturedSectionStyled, CardBoxMinimalSectionStyled } from './CardBoxSection.styled';
-import { CardBox } from '../../atoms';
-export const CardBoxMinimalSection = ({ cards }) => {
-    return (_jsx(CardBoxMinimalSectionStyled, { children: cards?.map(({ text, icon, id }) => _jsx(CardBox, { text: text, icon: icon }, id)) }));
-};
-export const CardBoxFeaturedSection = ({ cards }) => {
-    return (_jsx(CardBoxFeaturedSectionStyled, { children: cards?.map(({ text, icon, id }) => (_jsx(CardBox, { text: text, icon: icon, padding: '16px', gap: '0.5rem', borderRadius: '8px' }, id))) }));
-};

package/dist/src/components/sections/CardBoxSection/CardBoxSection.styled.d.ts

@@ -1,2 +0,0 @@
-export declare const CardBoxMinimalSectionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBoxFeaturedSectionStyled: 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/sections/CardBoxSection/CardBoxSection.styled.js

@@ -1,33 +0,0 @@
-import { device } from '../../../globalStyles/breakpoints';
-import styled from 'styled-components';
-export const CardBoxMinimalSectionStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 48px 24px;
-  gap: 16px;
-  align-self: stretch;
-  background: var(--neutral-neutral-6);
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`;
-export const CardBoxFeaturedSectionStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 24px 24px;
-  gap: 16px;
-  background: var(--neutral-neutral-6);
-  border-radius: 16px;
-  margin-bottom: 80px;
-  margin-top: 32px;
-  @media ${device.desktop} {
-    min-width: 1200px;
-  }
-
-  @media ${device['landscape-tablets']} {
-    flex-direction: row;
-  }
-`;