@npm_leadtech/legal-lib-components 7.106.2 → 7.106.5

package/dist/images/componentsSvg/__tests__/MenuCollapse24p.test.tsx

@@ -0,0 +1,28 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { MenuCollapse24p } from '../MenuCollapse24p'
+
+describe('MenuCollapse24p', () => {
+  afterEach(cleanup)
+
+  test('renders the menu icon at 24px and includes its description', () => {
+    const { container } = render(<MenuCollapse24p />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24px')
+    expect(svg).toHaveAttribute('height', '24px')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('title')).toHaveTextContent('735FFC4F-7DB9-4268-8987-12A1D38D3294')
+    expect(svg?.querySelector('desc')).toHaveTextContent('Created with sketchtool.')
+  })
+
+  test('forwards className and renders the neutral fill layer', () => {
+    const { container } = render(<MenuCollapse24p className='menu-more' />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveClass('menu-more')
+    expect(svg?.querySelector('g[mask]')).toHaveAttribute('fill', '#6D7275')
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+})

package/dist/images/componentsSvg/__tests__/NewDocumentSvg.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { NewDocumentSvg } from '../NewDocumentSvg'
+
+describe('NewDocumentSvg', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px document icon with its masked shape', () => {
+    const { container } = render(<NewDocumentSvg />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('defs path')).toBeInTheDocument()
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+
+  test('uses the light artwork fill', () => {
+    const { container } = render(<NewDocumentSvg />)
+
+    expect(container.querySelector('svg g[mask]')).toHaveAttribute('fill', '#F3F7FA')
+  })
+})

package/dist/images/componentsSvg/__tests__/NewRelease24p.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { NewRelease24p } from '../NewRelease24p'
+
+describe('NewRelease24p', () => {
+  afterEach(cleanup)
+
+  test('renders the release information icon at 14px', () => {
+    const { container } = render(<NewRelease24p />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '14')
+    expect(svg).toHaveAttribute('height', '14')
+    expect(svg).toHaveAttribute('viewBox', '0 0 14 14')
+    expect(svg?.querySelector('path')).toBeInTheDocument()
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<NewRelease24p className='release-indicator' />)
+
+    expect(container.querySelector('svg')).toHaveClass('release-indicator')
+  })
+})

package/dist/images/componentsSvg/__tests__/PhoneIcon.test.tsx

@@ -0,0 +1,28 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { PhoneIcon } from '../PhoneIcon'
+
+describe('PhoneIcon', () => {
+  afterEach(cleanup)
+
+  test('uses the default dimensions and fill', () => {
+    const { container } = render(<PhoneIcon />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('fill', 'none')
+    expect(svg?.querySelector('#path')).toBeInTheDocument()
+  })
+
+  test('applies custom dimensions and fill', () => {
+    const { container } = render(<PhoneIcon width={32} height={28} fill='currentColor' />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '32')
+    expect(svg).toHaveAttribute('height', '28')
+    expect(svg).toHaveAttribute('fill', 'currentColor')
+  })
+})

package/dist/images/componentsSvg/__tests__/PhoneIcon24px.test.tsx

@@ -0,0 +1,29 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { PhoneIcon24px } from '../PhoneIcon24px'
+
+describe('PhoneIcon24px', () => {
+  afterEach(cleanup)
+
+  test('renders its default 24px viewport and black fill layer', () => {
+    const { container } = render(<PhoneIcon24px />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('defs path')).toBeInTheDocument()
+    expect(svg?.querySelector('.icon-web-24-p')).toHaveAttribute('fill', '#000')
+  })
+
+  test('accepts custom dimensions, className, and fill', () => {
+    const { container } = render(<PhoneIcon24px width='32' height='18' fill='teal' className='phone-link' />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '32')
+    expect(svg).toHaveAttribute('height', '18')
+    expect(svg).toHaveClass('phone-link')
+    expect(svg?.querySelector('.icon-web-24-p')).toHaveAttribute('fill', 'teal')
+  })
+})

package/dist/images/componentsSvg/__tests__/RatafiaIcon24px.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { RatafiaIcon24px } from '../RatafiaIcon24px'
+
+describe('RatafiaIcon24px', () => {
+  afterEach(cleanup)
+
+  test('renders the Ratafia icon in its 17 by 16 viewport', () => {
+    const { container } = render(<RatafiaIcon24px />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '17')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 17 16')
+    expect(svg?.querySelector('#Icon\\/Symbol\\/AI_24px path')).toHaveAttribute('fill', '#078080')
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<RatafiaIcon24px className='ratafia-mark' />)
+
+    expect(container.querySelector('svg')).toHaveClass('ratafia-mark')
+  })
+})

package/dist/images/componentsSvg/__tests__/SearchIcon.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { SearchIcon } from '../SearchIcon'
+
+describe('SearchIcon', () => {
+  afterEach(cleanup)
+
+  test('renders the search artwork with its title and path', () => {
+    const { container } = render(<SearchIcon />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '17px')
+    expect(svg).toHaveAttribute('height', '18px')
+    expect(svg).toHaveAttribute('viewBox', '0 0 17 18')
+    expect(svg?.querySelector('title')).toHaveTextContent('icon/search_24px')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill-rule', 'nonzero')
+  })
+
+  test('forwards an optional className to the svg', () => {
+    const { container } = render(<SearchIcon className='search-control' />)
+
+    expect(container.querySelector('svg')).toHaveClass('search-control')
+  })
+})

package/dist/images/componentsSvg/__tests__/Sign24px.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Sign24px } from '../Sign24px'
+
+describe('Sign24px', () => {
+  afterEach(cleanup)
+
+  test('renders the signature icon with its configured dimensions', () => {
+    const { container } = render(<Sign24px />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '17')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('#path')).toHaveAttribute('fill', '#6D7275')
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<Sign24px className='signature-action' />)
+
+    expect(container.querySelector('svg')).toHaveClass('signature-action')
+  })
+})

package/dist/images/componentsSvg/__tests__/SslShieldSvg.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { SslShieldSvg } from '../SslShieldSvg'
+
+describe('SslShieldSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the shield using its default fill', () => {
+    const { container } = render(<SslShieldSvg />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '20')
+    expect(svg).toHaveAttribute('height', '20')
+    expect(svg).toHaveAttribute('viewBox', '0 0 20 20')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill', 'white')
+  })
+
+  test('forwards className and custom shield fill', () => {
+    const { container } = render(<SslShieldSvg className='ssl-shield' fill='navy' />)
+
+    expect(container.querySelector('svg')).toHaveClass('ssl-shield')
+    expect(container.querySelector('svg path')).toHaveAttribute('fill', 'navy')
+  })
+})

package/dist/images/componentsSvg/__tests__/SymbolDoc.test.tsx

@@ -0,0 +1,28 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { SymbolDoc } from '../SymbolDoc'
+
+describe('SymbolDoc', () => {
+  afterEach(cleanup)
+
+  test('renders the document symbol in a 24px viewport', () => {
+    const { container } = render(<SymbolDoc />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg).toHaveAttribute('fill', '#1E2021')
+  })
+
+  test('renders the document outline with its expected fill rules', () => {
+    const { container } = render(<SymbolDoc />)
+    const path = container.querySelector('svg path')
+
+    expect(path).toBeInTheDocument()
+    expect(path).toHaveAttribute('fill-rule', 'evenodd')
+    expect(path).toHaveAttribute('clip-rule', 'evenodd')
+    expect(path).toHaveAttribute('fill', 'inherit')
+  })
+})

package/dist/images/componentsSvg/__tests__/Time24px.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Time24px } from '../Time24px'
+
+describe('Time24px', () => {
+  afterEach(cleanup)
+
+  test('renders the clock icon with its default compact dimensions', () => {
+    const { container } = render(<Time24px />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '14')
+    expect(svg).toHaveAttribute('height', '14')
+    expect(svg).toHaveAttribute('viewBox', '0 0 14 14')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill-rule', 'evenodd')
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<Time24px className='time-indicator' />)
+
+    expect(container.querySelector('svg')).toHaveClass('time-indicator')
+  })
+})

package/dist/images/componentsSvg/flags/__tests__/CAFlag.test.tsx

@@ -0,0 +1,26 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { CAFlag } from '../CAFlag'
+
+describe('CAFlag', () => {
+  afterEach(cleanup)
+
+  test('renders the Canadian flag at its expected dimensions', () => {
+    const { container } = render(<CAFlag />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '21')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 21 16')
+    expect(svg?.querySelector('clipPath')).toBeInTheDocument()
+  })
+
+  test('includes the red maple-leaf artwork and white center stripe', () => {
+    const { container } = render(<CAFlag />)
+    const paths = container.querySelectorAll('svg path')
+
+    expect(Array.from(paths).some((path) => path.getAttribute('fill') === '#D52B1E')).toBe(true)
+    expect(Array.from(paths).some((path) => path.getAttribute('fill') === 'white')).toBe(true)
+  })
+})

package/dist/images/componentsSvg/flags/__tests__/DEFlag.test.tsx

@@ -0,0 +1,30 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { DEFlag } from '../DEFlag'
+
+describe('DEFlag', () => {
+  afterEach(cleanup)
+
+  test('renders the German flag with its three horizontal stripe colors', () => {
+    const { container } = render(<DEFlag />)
+    const svg = container.querySelector('svg')
+    const stripes = svg?.querySelectorAll('path[id^="Vector"]')
+
+    expect(svg).toHaveAttribute('width', '21')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 21 16')
+    expect(stripes).toHaveLength(3)
+    expect(Array.from(stripes ?? []).map((path) => path.getAttribute('fill'))).toEqual([
+      '#FFCC00',
+      '#000001',
+      '#FF0000'
+    ])
+  })
+
+  test('clips the artwork to the flag boundary', () => {
+    const { container } = render(<DEFlag />)
+
+    expect(container.querySelector('svg clipPath rect')).toHaveAttribute('rx', '2')
+  })
+})

package/dist/images/componentsSvg/flags/__tests__/GBFlag.test.tsx

@@ -0,0 +1,28 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { GBFlag } from '../GBFlag'
+
+describe('GBFlag', () => {
+  afterEach(cleanup)
+
+  test('renders the flag at the shared flag dimensions', () => {
+    const { container } = render(<GBFlag />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '21')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 21 16')
+    expect(svg?.querySelector('clipPath')).toBeInTheDocument()
+  })
+
+  test('includes the blue field and red-and-white cross artwork', () => {
+    const { container } = render(<GBFlag />)
+    const svg = container.querySelector('svg')
+
+    expect(svg?.querySelector('rect[fill="#0A17A7"]')).toBeInTheDocument()
+    expect(svg?.querySelector('path[fill="#E6273E"]')).toBeInTheDocument()
+    expect(svg?.querySelector('path[fill="white"]')).toBeInTheDocument()
+    expect(svg?.querySelectorAll('path[stroke="#DB1F35"]')).toHaveLength(4)
+  })
+})

package/dist/images/componentsSvg/flags/__tests__/USFlag.test.tsx

@@ -0,0 +1,27 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { USFlag } from '../USFlag'
+
+describe('USFlag', () => {
+  afterEach(cleanup)
+
+  test('renders the flag at the shared flag dimensions', () => {
+    const { container } = render(<USFlag />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '21')
+    expect(svg).toHaveAttribute('height', '16')
+    expect(svg).toHaveAttribute('viewBox', '0 0 21 16')
+    expect(svg?.querySelector('g[clip-path]')).toBeInTheDocument()
+  })
+
+  test('renders the red and white stripes with the blue canton', () => {
+    const { container } = render(<USFlag />)
+    const svg = container.querySelector('svg')
+
+    expect(svg?.querySelector('path[fill="#B22234"]')).toBeInTheDocument()
+    expect(svg?.querySelector('path[fill="#192F5D"]')).toBeInTheDocument()
+    expect(svg?.querySelectorAll('path[fill="white"]').length).toBeGreaterThan(1)
+  })
+})

package/dist/images/componentsSvg/generalCategories/__tests__/BusinessIconCategory.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { BusinessIconCategory } from '../BusinessIconCategory'
+
+describe('BusinessIconCategory', () => {
+  afterEach(cleanup)
+
+  test('exposes its title and default icon dimensions', () => {
+    const { container } = render(<BusinessIconCategory alt='Business' />)
+    const svg = screen.getByRole('img', { name: 'Business' })
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(container.querySelector('#Icon\\/category\\/business_24px path')).toBeInTheDocument()
+  })
+
+  test('accepts custom width and height', () => {
+    render(<BusinessIconCategory alt='Business' width={32} height={18} />)
+
+    expect(screen.getByRole('img', { name: 'Business' })).toHaveAttribute('width', '32')
+    expect(screen.getByRole('img', { name: 'Business' })).toHaveAttribute('height', '18')
+  })
+})

package/dist/images/componentsSvg/generalCategories/__tests__/EmploymentIconCategory.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { EmploymentIconCategory } from '../EmploymentIconCategory'
+
+describe('EmploymentIconCategory', () => {
+  afterEach(cleanup)
+
+  test('renders an accessible employment icon with its path', () => {
+    const { container } = render(<EmploymentIconCategory alt='Employment' />)
+    const svg = screen.getByRole('img', { name: 'Employment' })
+
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(container.querySelector('#Icon\\/category\\/employment_24px path')).toBeInTheDocument()
+  })
+
+  test('uses the alt text as the SVG title', () => {
+    const { container } = render(<EmploymentIconCategory alt='Work and careers' />)
+
+    expect(container.querySelector('svg title')).toHaveTextContent('Work and careers')
+  })
+})

package/dist/images/componentsSvg/generalCategories/__tests__/FinanceIconCategory.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { FinanceIconCategory } from '../FinanceIconCategory'
+
+describe('FinanceIconCategory', () => {
+  afterEach(cleanup)
+
+  test('renders an accessible finance icon with its category path', () => {
+    const { container } = render(<FinanceIconCategory alt='Finance' />)
+    const svg = screen.getByRole('img', { name: 'Finance' })
+
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg).toHaveAttribute('fill', '#1E2021')
+    expect(container.querySelector('#Icon\\/category\\/finance_24px path')).toBeInTheDocument()
+  })
+
+  test('supports non-square dimensions', () => {
+    render(<FinanceIconCategory alt='Finance' width={30} height={22} />)
+    const svg = screen.getByRole('img', { name: 'Finance' })
+
+    expect(svg).toHaveAttribute('width', '30')
+    expect(svg).toHaveAttribute('height', '22')
+  })
+})

package/dist/images/componentsSvg/generalCategories/__tests__/PersonalFamilyIconCategory.test.tsx

@@ -0,0 +1,26 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { PersonalFamilyIconCategory } from '../PersonalFamilyIconCategory'
+
+describe('PersonalFamilyIconCategory', () => {
+  afterEach(cleanup)
+
+  test('renders an accessible family category icon', () => {
+    const { container } = render(<PersonalFamilyIconCategory alt='Personal and family' />)
+    const svg = screen.getByRole('img', { name: 'Personal and family' })
+
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg.querySelector('path')).toBeInTheDocument()
+    expect(svg.querySelector('path')).toHaveAttribute('fill-rule', 'evenodd')
+    expect(container.querySelector('title')).toHaveTextContent('Personal and family')
+  })
+
+  test('allows the icon dimensions to be overridden', () => {
+    render(<PersonalFamilyIconCategory alt='Family' width={40} height={36} />)
+    const svg = screen.getByRole('img', { name: 'Family' })
+
+    expect(svg).toHaveAttribute('width', '40')
+    expect(svg).toHaveAttribute('height', '36')
+  })
+})

package/dist/images/componentsSvg/generalCategories/__tests__/RealEstateIconCategory.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { RealEstateIconCategory } from '../RealEstateIconCategory'
+
+describe('RealEstateIconCategory', () => {
+  afterEach(cleanup)
+
+  test('renders a titled real-estate icon with the default size', () => {
+    const { container } = render(<RealEstateIconCategory alt='Real estate' />)
+    const svg = screen.getByRole('img', { name: 'Real estate' })
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(container.querySelector('svg path')).toBeInTheDocument()
+  })
+
+  test('forwards custom dimensions', () => {
+    render(<RealEstateIconCategory alt='Property' width={48} height={24} />)
+
+    expect(screen.getByRole('img', { name: 'Property' })).toHaveAttribute('width', '48')
+    expect(screen.getByRole('img', { name: 'Property' })).toHaveAttribute('height', '24')
+  })
+})

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { BenefitsCheckoutStyled } from './BenefitsCheckout.styled';
+import aiIcon from '../../../../images/BenefitsCheckout/benefits-ai.svg';
+import checkIcon from '../../../../images/BenefitsCheckout/benefits-check.svg';
+const iconByType = {
+    ai: aiIcon,
+    check: checkIcon
+};
+export const BenefitsCheckout = ({ title, benefits, className }) => {
+    const titleId = useId();
+    return (_jsxs(BenefitsCheckoutStyled, { className: ['benefits-checkout', className].filter(Boolean).join(' '), "aria-labelledby": titleId, children: [_jsx("h2", { className: 'benefits-checkout__title', id: titleId, children: title }), _jsx("ul", { className: 'benefits-checkout__list', children: benefits.map((benefit, index) => (_jsxs("li", { className: 'benefits-checkout__item', children: [_jsx("img", { src: iconByType[benefit.icon ?? 'check'], alt: '', "aria-hidden": 'true' }), _jsx("span", { children: benefit.text })] }, `${benefit.icon ?? 'check'}-${index}-${benefit.text}`))) })] }));
+};

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

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

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

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { size } from '../../../globalStyles/breakpoints';
+export const BenefitsCheckoutStyled = styled.section `
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.625rem;
+  padding: 1.5rem;
+  border-radius: 1rem;
+  background: var(--neutral-neutral-6);
+  font-family: var(--font-main);
+
+  .benefits-checkout {
+    &__title {
+      margin: 0;
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      font-weight: 700;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    &__item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      color: var(--neutral-neutral-2);
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.125rem;
+      letter-spacing: -0.0214em;
+
+      img {
+        display: block;
+        width: 1.125rem;
+        height: 1.125rem;
+        flex: 0 0 1.125rem;
+      }
+    }
+  }
+
+  @media (max-width: ${size.tab}) {
+    padding: 1rem;
+  }
+`;