@npm_leadtech/legal-lib-components 7.106.1 → 7.106.3

package/dist/images/BenefitsCheckout/benefits-ai.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8205 1.28252C14.5643 0.572493 13.5602 0.572493 13.304 1.28252L12.9295 2.32031C12.8481 2.54592 12.6704 2.72356 12.4448 2.80497L11.407 3.17946C10.697 3.43567 10.697 4.43983 11.407 4.69604L12.4448 5.07053C12.6704 5.15194 12.8481 5.32958 12.9295 5.55519L13.304 6.59298C13.5602 7.303 14.5643 7.303 14.8205 6.59298L15.195 5.55519C15.2764 5.32958 15.4541 5.15194 15.6797 5.07053L16.7175 4.69604C17.4275 4.43983 17.4275 3.43567 16.7175 3.17946L15.6797 2.80497C15.4541 2.72356 15.2764 2.54592 15.195 2.32031L14.8205 1.28252ZM9.03846 4.77127C8.52604 3.35122 6.51773 3.35122 6.0053 4.77127L5.15122 7.13813C4.9884 7.58935 4.63312 7.94463 4.1819 8.10745L1.81504 8.96153C0.394985 9.47396 0.394987 11.4823 1.81504 11.9947L4.1819 12.8488C4.63312 13.0116 4.9884 13.3669 5.15122 13.8181L6.0053 16.185C6.51773 17.605 8.52604 17.605 9.03846 16.185L9.89254 13.8181C10.0554 13.3669 10.4107 13.0116 10.8619 12.8488L13.2287 11.9947C14.6488 11.4823 14.6488 9.47396 13.2287 8.96153L10.8619 8.10745C10.4107 7.94463 10.0554 7.58935 9.89254 7.13813L9.03846 4.77127Z" fill="#05646E"/>
+</svg>

package/dist/images/BenefitsCheckout/benefits-check.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.60002 11.925L3.97502 9.29998C3.68508 9.01003 3.21497 9.01003 2.92502 9.29998C2.63507 9.58992 2.63507 10.06 2.92502 10.35L6.40002 13.825C6.51048 13.9354 6.68957 13.9354 6.80002 13.825L15.075 5.54997C15.365 5.26003 15.365 4.78993 15.075 4.49998C14.7851 4.21003 14.315 4.21003 14.025 4.49998L6.60002 11.925Z" fill="#05646E"/>
+</svg>

package/dist/images/SocialProofBar/social-proof-star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 14.3917L13.1211 16.2755C13.8784 16.7325 14.8126 16.0536 14.6117 15.1921L13.7834 11.6417L16.542 9.25197C17.2106 8.67276 16.8532 7.5745 15.9718 7.49972L12.3417 7.19175L10.9208 3.83912C10.5762 3.02609 9.42395 3.02609 9.07936 3.83912L7.65841 7.19175L4.02838 7.49972C3.14695 7.5745 2.78954 8.67276 3.45814 9.25197L6.21675 11.6417L5.38849 15.1921C5.18753 16.0536 6.12177 16.7325 6.87908 16.2755L10.0001 14.3917Z" fill="#F2BD6A"/>
+</svg>

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

@@ -0,0 +1,25 @@
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
+import { ArrowRight } from '../ArrowRight'
+
+describe('ArrowRight', () => {
+  afterEach(cleanup)
+
+  test('renders the right arrow svg and its path', () => {
+    const { container } = render(<ArrowRight />)
+
+    expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 492.004 492.004')
+    expect(container.querySelector('svg path')).toBeInTheDocument()
+  })
+
+  test('forwards className and invokes onClick from the svg', () => {
+    const handleClick = jest.fn()
+    const { container } = render(<ArrowRight className='custom-arrow' onClick={handleClick} />)
+    const svg = container.querySelector('svg') as SVGSVGElement
+
+    expect(svg).toHaveClass('custom-arrow')
+    fireEvent.click(svg)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { BalanceSvg } from '../Balance'
+
+describe('BalanceSvg', () => {
+  afterEach(cleanup)
+
+  test('renders its balance artwork with the default fill', () => {
+    const { container } = render(<BalanceSvg />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('viewBox', '0 0 20 20')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill', '#05646E')
+  })
+
+  test('forwards a custom class and path fill', () => {
+    const { container } = render(<BalanceSvg className='balance-icon' fill='#123456' />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveClass('balance-icon')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill', '#123456')
+  })
+})

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

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { ChevronExpandLess } from '../ChevronExpandLess'
+
+describe('ChevronExpandLess', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px upward chevron with its path fill', () => {
+    const { container } = render(<ChevronExpandLess />)
+    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('path')).toHaveAttribute('fill', '#1E2021')
+  })
+})

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

@@ -0,0 +1,23 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { ChevronExpandMore } from '../ChevronExpandMore'
+
+describe('ChevronExpandMore', () => {
+  afterEach(cleanup)
+
+  test('renders the expand-more svg with its default class and fill', () => {
+    const { container } = render(<ChevronExpandMore />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveClass('chevron-expand-more')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('path')).toHaveAttribute('fill', '#1E2021')
+  })
+
+  test('applies a custom fill to the chevron path', () => {
+    const { container } = render(<ChevronExpandMore fill='tomato' />)
+
+    expect(container.querySelector('svg path')).toHaveAttribute('fill', 'tomato')
+  })
+})

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

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { ChevronRight } from '../ChevronRight'
+
+describe('ChevronRight', () => {
+  afterEach(cleanup)
+
+  test('renders the right-facing 24px chevron and its path', () => {
+    const { container } = render(<ChevronRight />)
+    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('g path')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,26 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { ChevronRight24px } from '../ChevronRight24px'
+
+describe('ChevronRight24px', () => {
+  afterEach(cleanup)
+
+  test('renders the chevron with its expected dimensions and class', () => {
+    const { container } = render(<ChevronRight24px />)
+    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).toHaveClass('chevron-right24px')
+  })
+
+  test('renders the masked chevron shape with its main fill class', () => {
+    const { container } = render(<ChevronRight24px />)
+
+    expect(container.querySelector('svg defs path')).toBeInTheDocument()
+    expect(container.querySelector('svg mask use')).toBeInTheDocument()
+    expect(container.querySelector('svg .main-fill')).toHaveAttribute('fill', '#3D4042')
+  })
+})

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

@@ -0,0 +1,23 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { CloseIcon } from '../CloseIcon'
+
+describe('CloseIcon', () => {
+  afterEach(cleanup)
+
+  test('renders the close path in its 9px svg', () => {
+    const { container } = render(<CloseIcon />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '9')
+    expect(svg).toHaveAttribute('height', '9')
+    expect(svg?.querySelector('path')).toBeInTheDocument()
+  })
+
+  test('forwards a custom class to the svg', () => {
+    const { container } = render(<CloseIcon className='close-control' />)
+
+    expect(container.querySelector('svg')).toHaveClass('close-control')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Delete24p } from '../Delete24p'
+
+describe('Delete24p', () => {
+  afterEach(cleanup)
+
+  test('renders the delete artwork in its 24px svg viewport', () => {
+    const { container } = render(<Delete24p />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 16 16')
+    expect(svg?.querySelector('defs path')).toBeInTheDocument()
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+
+  test('forwards a custom class to the svg', () => {
+    const { container } = render(<Delete24p className='delete-control' />)
+
+    expect(container.querySelector('svg')).toHaveClass('delete-control')
+  })
+})

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

@@ -0,0 +1,24 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Done24px } from '../Done24px'
+
+describe('Done24px', () => {
+  afterEach(cleanup)
+
+  test('renders the compact checkmark svg', () => {
+    const { container } = render(<Done24px />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '12')
+    expect(svg).toHaveAttribute('height', '9')
+    expect(svg).toHaveAttribute('viewBox', '0 0 12 9')
+    expect(svg?.querySelector('path')).toBeInTheDocument()
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<Done24px className='success-check' />)
+
+    expect(container.querySelector('svg')).toHaveClass('success-check')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Done24pxOutline } from '../Done24pxoutlined'
+
+describe('Done24pxOutline', () => {
+  afterEach(cleanup)
+
+  test('renders a 16-unit checkmark with its outlined shape definition', () => {
+    const { container } = render(<Done24pxOutline />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '100%')
+    expect(svg).toHaveAttribute('height', '100%')
+    expect(svg).toHaveAttribute('viewBox', '0 0 16 16')
+    expect(svg?.querySelector('defs polygon')).toBeInTheDocument()
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+
+  test('applies the brand fill to the masked checkmark', () => {
+    const { container } = render(<Done24pxOutline />)
+
+    expect(container.querySelector('svg g[mask]')).toHaveAttribute('fill', '#05646E')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Edit24p } from '../Edit24p'
+
+describe('Edit24p', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px edit icon with a 16-unit artwork viewport', () => {
+    const { container } = render(<Edit24p />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '24')
+    expect(svg).toHaveAttribute('height', '24')
+    expect(svg).toHaveAttribute('viewBox', '0 0 16 16')
+    expect(svg?.querySelector('defs path')).toBeInTheDocument()
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<Edit24p className='edit-action' />)
+
+    expect(container.querySelector('svg')).toHaveClass('edit-action')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { EditText24px } from '../EditText24px'
+
+describe('EditText24px', () => {
+  afterEach(cleanup)
+
+  test('renders the 24px text-edit icon and its named artwork layer', () => {
+    const { container } = render(<EditText24px />)
+    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('#edit-text-svg')).toHaveAttribute('fill', '#1E2021')
+    expect(svg?.querySelector('mask use')).toBeInTheDocument()
+  })
+
+  test('forwards a custom className', () => {
+    const { container } = render(<EditText24px className='edit-text-action' />)
+
+    expect(container.querySelector('svg')).toHaveClass('edit-text-action')
+  })
+})

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

@@ -0,0 +1,19 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { EmploymentIcon } from '../EmploymentIcon'
+
+describe('EmploymentIcon', () => {
+  afterEach(cleanup)
+
+  test('renders the employment artwork at 20px with its branded path', () => {
+    const { container } = render(<EmploymentIcon />)
+    const svg = container.querySelector('svg')
+    const path = svg?.querySelector('#icon-employment')
+
+    expect(svg).toHaveAttribute('width', '20px')
+    expect(svg).toHaveAttribute('height', '20px')
+    expect(svg).toHaveAttribute('viewBox', '0 0 20 20')
+    expect(path).toHaveAttribute('fill', '#078080')
+  })
+})

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

@@ -0,0 +1,26 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { Eye24pxOptimized } from '../Eye24pxOptimized'
+
+describe('Eye24pxOptimized', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px eye icon with its masked eye shape', () => {
+    const { container } = render(<Eye24pxOptimized />)
+    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 neutral icon fill and forwards a className', () => {
+    const { container } = render(<Eye24pxOptimized className='password-visibility' />)
+
+    expect(container.querySelector('svg')).toHaveClass('password-visibility')
+    expect(container.querySelector('svg g[mask]')).toHaveAttribute('fill', '#6D7275')
+  })
+})

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

@@ -0,0 +1,31 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { GdprLockSvg } from '../GdprLockSvg'
+
+describe('GdprLockSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the lock and badge using the default fills', () => {
+    const { container } = render(<GdprLockSvg />)
+    const svg = container.querySelector('svg')
+    const paths = svg?.querySelectorAll('path')
+
+    expect(svg).toHaveAttribute('width', '20')
+    expect(svg).toHaveAttribute('height', '20')
+    expect(svg).toHaveAttribute('viewBox', '0 0 20 20')
+    expect(paths).toHaveLength(2)
+    expect(paths?.[0]).toHaveAttribute('fill', 'white')
+    expect(paths?.[1]).toHaveAttribute('fill', '#024DA1')
+  })
+
+  test('applies custom class and independent fills', () => {
+    const { container } = render(<GdprLockSvg className='privacy-lock' fill='black' fill2='gold' />)
+    const svg = container.querySelector('svg')
+    const paths = svg?.querySelectorAll('path')
+
+    expect(svg).toHaveClass('privacy-lock')
+    expect(paths?.[0]).toHaveAttribute('fill', 'black')
+    expect(paths?.[1]).toHaveAttribute('fill', 'gold')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { IconDuplicate24px } from '../IconDuplicate24px'
+
+describe('IconDuplicate24px', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px duplicate icon and its masked shape', () => {
+    const { container } = render(<IconDuplicate24px />)
+    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('forwards a custom class to the svg', () => {
+    const { container } = render(<IconDuplicate24px className='duplicate-control' />)
+
+    expect(container.querySelector('svg')).toHaveClass('duplicate-control')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { IconWeb } from '../IconWeb'
+
+describe('IconWeb', () => {
+  afterEach(cleanup)
+
+  test('renders the web icon in its 24px viewport', () => {
+    const { container } = render(<IconWeb />)
+    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('renders the icon using its named fill layer', () => {
+    const { container } = render(<IconWeb />)
+
+    expect(container.querySelector('.icon-web-24-p')).toHaveAttribute('fill', '#000')
+  })
+})

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

@@ -0,0 +1,28 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { InfoError24pxOutlined } from '../InfoError24pxOutlined'
+
+describe('InfoError24pxOutlined', () => {
+  afterEach(cleanup)
+
+  test('renders the titled info-error icon with default viewBox', () => {
+    const { container } = render(<InfoError24pxOutlined />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveAttribute('width', '100%')
+    expect(svg).toHaveAttribute('height', '100%')
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(svg?.querySelector('title')).toHaveTextContent('icon/info-error_24px_outlined')
+    expect(svg?.querySelector('use')).toBeInTheDocument()
+  })
+
+  test('accepts a custom class, fill, and viewBox', () => {
+    const { container } = render(<InfoError24pxOutlined className='warning-icon' fill='orange' viewBox='0 0 16 16' />)
+    const svg = container.querySelector('svg')
+
+    expect(svg).toHaveClass('warning-icon')
+    expect(svg).toHaveAttribute('fill', 'orange')
+    expect(svg).toHaveAttribute('viewBox', '0 0 16 16')
+  })
+})

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

@@ -0,0 +1,19 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { InfoLocationSvg } from '../InfoLocationSvg'
+
+describe('InfoLocationSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the location artwork and its map-pin path', () => {
+    const { container } = render(<InfoLocationSvg />)
+    const svgs = container.querySelectorAll('svg')
+
+    expect(svgs).toHaveLength(2)
+    expect(svgs[0]).toHaveAttribute('width', '20')
+    expect(svgs[0]).toHaveAttribute('height', '20')
+    expect(svgs[0]).toHaveAttribute('viewBox', '0 0 20 20')
+    expect(svgs[1].querySelector('path')).toHaveAttribute('fill', '#02374A')
+  })
+})

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

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { InfoMailSvg } from '../InfoMailSvg'
+
+describe('InfoMailSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the 20px informational mail artwork', () => {
+    const { container } = render(<InfoMailSvg />)
+    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', '#02374A')
+  })
+})

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

@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { InfoPhoneSvg } from '../InfoPhoneSvg'
+
+describe('InfoPhoneSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the 20px phone artwork with the expected path fill', () => {
+    const { container } = render(<InfoPhoneSvg />)
+    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', '#02374A')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { LogoutSvg } from '../LogoutSvg'
+
+describe('LogoutSvg', () => {
+  afterEach(cleanup)
+
+  test('renders a 24px logout icon with its masked shape', () => {
+    const { container } = render(<LogoutSvg />)
+    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 neutral logout artwork color', () => {
+    const { container } = render(<LogoutSvg />)
+
+    expect(container.querySelector('svg g[mask]')).toHaveAttribute('fill', '#B5BABD')
+  })
+})

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

@@ -0,0 +1,25 @@
+import { cleanup, render } from '@testing-library/react'
+import React from 'react'
+
+import { MailSvg } from '../MailSvg'
+
+describe('MailSvg', () => {
+  afterEach(cleanup)
+
+  test('renders the email icon with its expected dimensions and default class', () => {
+    const { container } = render(<MailSvg />)
+    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).toHaveClass('email-icon')
+  })
+
+  test('renders the envelope path with its default fill', () => {
+    const { container } = render(<MailSvg />)
+
+    expect(container.querySelector('svg #path')).toHaveAttribute('fill', '#1E2021')
+    expect(container.querySelector('svg #path')).toHaveAttribute('fill-rule', 'evenodd')
+  })
+})

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()
+  })
+})