@scottish-government/designsystem-react 0.5.1 → 0.6.0

package/src/components/file-download/file-download.test.tsx

@@ -0,0 +1,167 @@
+import { test, expect } from 'vitest';
+import { screen, render } from '@testing-library/react';
+import FileDownload from './file-download';
+
+const title = 'Scotland\'s Artificial Intelligence Strategy - Trustworthy, Ethical and Inclusive';
+const fileUrl = 'my-file.file';
+
+test('inset text renders correctly', () => {
+    render(
+        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const fileDownload = screen.getByTestId('file-download');
+
+    const thumbnailImage = screen.getByRole('img', {hidden: true});
+    const thumbnailLink = thumbnailImage.parentElement;
+    const thumbnailContainer = thumbnailLink?.parentElement;
+
+    const fileLink = screen.getByRole('link');
+    const contentContainer = fileLink.parentElement;
+
+    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
+    expect(thumbnailImage).toHaveAttribute('aria-label', '');
+    expect(thumbnailImage.tagName).toEqual('svg');
+
+    expect(thumbnailLink).toHaveClass('ds_file-download__thumbnail-link');
+    expect(thumbnailLink).toHaveAttribute('aria-hidden', 'true');
+    expect(thumbnailLink).toHaveAttribute('tabindex', '-1');
+    expect(thumbnailLink).toHaveAttribute('href', fileUrl);
+    expect(thumbnailLink?.tagName).toEqual('A');
+
+    expect(thumbnailContainer).toHaveClass('ds_file-download__thumbnail');
+    expect(thumbnailContainer?.tagName).toEqual('DIV');
+    expect(thumbnailContainer?.parentElement).toEqual(fileDownload);
+
+    expect(contentContainer).toHaveClass('ds_file-download__content');
+    expect(contentContainer?.tagName).toEqual('DIV');
+    expect(contentContainer?.parentElement).toEqual(fileDownload);
+
+    expect(fileLink).toHaveClass('ds_file-download__title');
+    expect(fileLink).toHaveAttribute('href', fileUrl);
+    expect(fileLink?.tagName).toEqual('A');
+    expect(fileLink?.textContent).toEqual(title);
+});
+
+test('highlighted file download', () => {
+    render(
+        <FileDownload highlighted fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const fileDownload = screen.getByTestId('file-download');
+
+    expect(fileDownload).toHaveClass('ds_file-download--highlighted');
+});
+
+// test('file download with specific icon', () => {
+
+// });
+
+test('file download with cover image', () => {
+    const coverUrl = 'my-image.png';
+
+    render(
+        <FileDownload cover={coverUrl} fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const thumbnailImage = screen.getByRole('presentation', {hidden: true});
+
+    expect(thumbnailImage).toHaveClass('ds_file-download__thumbnail-image');
+    expect(thumbnailImage).toHaveAttribute('alt', '');
+    expect(thumbnailImage).toHaveAttribute('src', coverUrl);
+    expect(thumbnailImage.tagName).toEqual('IMG');
+});
+
+test('file download with file size', () => {
+    const fileSize = '1.2 MB';
+
+    render(
+        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const metadataKey = screen.getByRole('term');
+    const metadataValue = screen.getByRole('definition');
+    const metadataItem = metadataKey.parentElement;
+    const metadataList = metadataItem?.parentElement;
+    const downloadDetails = metadataList?.parentElement;
+
+    expect(downloadDetails).toHaveClass('ds_file-download__details');
+    expect(downloadDetails?.tagName).toEqual('DIV');
+
+    expect(metadataList).toHaveClass('ds_metadata', 'ds_metadata--inline');
+    expect(metadataList?.tagName).toEqual('DL');
+
+    expect(metadataItem).toHaveClass('ds_metadata__item');
+    expect(metadataItem?.tagName).toEqual('DIV');
+
+    expect(metadataKey).toHaveClass('ds_metadata__key', 'visually-hidden');
+    expect(metadataKey.textContent).toEqual('File size');
+
+    expect(metadataValue).toHaveClass('ds_metadata__value');
+    expect(metadataValue.textContent).toEqual(fileSize);
+    expect(metadataValue.previousElementSibling).toEqual(metadataKey);
+});
+
+test('file download with file type', () => {
+    const fileType = '5 page PDF';
+
+    render(
+        <FileDownload fileType={fileType} fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const metadataKey = screen.getByRole('term');
+    const metadataValue = screen.getByRole('definition');
+    const metadataItem = metadataKey.parentElement;
+    const metadataList = metadataItem?.parentElement;
+    const downloadDetails = metadataList?.parentElement;
+
+    expect(downloadDetails).toHaveClass('ds_file-download__details');
+    expect(downloadDetails?.tagName).toEqual('DIV');
+
+    expect(metadataList).toHaveClass('ds_metadata', 'ds_metadata--inline');
+    expect(metadataList?.tagName).toEqual('DL');
+
+    expect(metadataItem).toHaveClass('ds_metadata__item');
+    expect(metadataItem?.tagName).toEqual('DIV');
+
+    expect(metadataKey).toHaveClass('ds_metadata__key', 'visually-hidden');
+    expect(metadataKey.textContent).toEqual('File type');
+
+    expect(metadataValue).toHaveClass('ds_metadata__value');
+    expect(metadataValue.textContent).toEqual(fileType + ',');
+    expect(metadataValue.previousElementSibling).toEqual(metadataKey);
+});
+
+test('association of metadata with file link', () => {
+    const fileSize = '1.2 MB';
+
+    render(
+        <FileDownload fileSize={fileSize} fileUrl={fileUrl} title={title} data-testid="file-download" />
+    );
+
+    const fileLink = screen.getByRole('link');
+    const metadataKey = screen.getByRole('term');
+    const metadataItem = metadataKey.parentElement;
+    const metadataList = metadataItem?.parentElement;
+    const downloadDetails = metadataList?.parentElement;
+
+    expect(fileLink).toHaveAttribute('aria-describedby', downloadDetails?.id);
+});
+
+test('passing additional props', () => {
+    render(
+        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" data-test="foo" />
+    );
+
+    const fileDownload = screen.getByTestId('file-download');
+    expect(fileDownload?.dataset.test).toEqual('foo');
+});
+
+test('passing additional CSS classes', () => {
+    render(
+        <FileDownload fileUrl={fileUrl} title={title} data-testid="file-download" className="foo" />
+    );
+
+    const fileDownload = screen.getByTestId('file-download');
+    expect(fileDownload).toHaveClass('foo');
+});

package/src/components/file-download/file-download.tsx

@@ -0,0 +1,67 @@
+import { useId } from 'react';
+import FileIcon from '../../common/file-icon';
+
+const FileDownload: React.FC<SGDS.Component.FileDownload> = ({
+    className,
+    cover,
+    highlighted,
+    icon = 'Generic',
+    fileSize,
+    fileType,
+    fileUrl,
+    title,
+    ...props
+}) => {
+    const hasMetadata = !!fileType || !!fileSize;
+    const metaContainerId = `file-download-${useId()}`;
+
+    return (
+        <div className={[
+            'ds_file-download',
+            highlighted && 'ds_file-download--highlighted',
+            className
+        ].join(' ')}
+            {...props}
+        >
+            <div className="ds_file-download__thumbnail">
+                <a className="ds_file-download__thumbnail-link" aria-hidden="true" tabIndex={-1} href={fileUrl}>
+                    {cover ?
+                        <img alt="" className="ds_file-download__thumbnail-image" src={cover}/>
+                    :
+                        <FileIcon ariaLabel="" className="ds_file-download__thumbnail-image" icon={icon} />
+                    }
+                </a>
+            </div>
+
+            <div className="ds_file-download__content">
+                <a href={fileUrl} className="ds_file-download__title" aria-describedby={hasMetadata ? metaContainerId : undefined}>
+                    {title}
+                </a>
+
+                {hasMetadata &&
+                    <div id={metaContainerId} className="ds_file-download__details">
+                        <dl className="ds_metadata  ds_metadata--inline">
+                            {fileType &&
+                                <div className="ds_metadata__item">
+                                    <dt className="ds_metadata__key  visually-hidden">File type</dt>
+                                    <dd className="ds_metadata__value">{fileType}<span className="visually-hidden">,</span></dd>
+                                </div>
+                            }
+
+                            {fileSize &&
+                                <div className="ds_metadata__item">
+                                    <dt className="ds_metadata__key  visually-hidden">File size</dt>
+                                    <dd className="ds_metadata__value">{fileSize}</dd>
+                                </div>
+                            }
+                        </dl>
+                    </div>
+                }
+            </div>
+        </div>
+    );
+};
+
+FileDownload.displayName = 'FileDownload';
+
+export default FileDownload;

package/src/images/documents/audio.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgAudio = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118h58.5857l19.4142 19.4142v98.5858z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <path d="m80 20-20-20v20z" fill="#5e5e5e" />
+    <path
+      d="m1 119v-118h58.5857l19.4142 19.4142v98.5858z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <path d="m80 20-20-20v20z" fill="#5e5e5e" />
+    <path d="m9.99951 27.5h59.9999v27.5h-59.9999z" fill="#5e5e5e" />
+    <path
+      d="m23.2514 37.1863-3.3837 10.3137h-2.7259l4.6228-12.4414h1.7346zm2.8113 10.3137-3.3923-10.3137-.2734-2.1277h1.7517l4.6484 12.4414zm-.1538-4.6313v2.008h-6.571v-2.008zm9.2542 2.4182v-7.0325h2.4609v9.2456h-2.3157zm.2734-1.897.7263-.0171c0 .6152-.0712 1.1878-.2136 1.7175-.1424.5241-.3561.9799-.6409 1.3672-.2848.3817-.6437.6808-1.0766.8972-.433.2108-.9428.3162-1.5296.3162-.45 0-.8659-.0627-1.2475-.188-.376-.131-.7007-.3332-.9742-.6067-.2677-.2791-.4785-.6352-.6323-1.0681-.1481-.4386-.2222-.9656-.2222-1.5808v-5.9729h2.461v5.99c0 .2734.0313.5041.094.6921.0683.188.1623.3418.282.4615.1196.1196.2592.205.4187.2563.1652.0513.3475.0769.5468.0769.507 0 .9058-.1025 1.1963-.3076.2962-.2051.5042-.4842.6238-.8374.1253-.3589.188-.7577.188-1.1963zm9.5276 2.0935v-11.1084h2.478v13.125h-2.2302zm-5.8448-2.4951v-.1795c0-.7063.0798-1.3472.2393-1.9226.1595-.581.3931-1.0795.7007-1.4953.3076-.4159.6864-.7377 1.1365-.9656.45-.2279.9627-.3418 1.538-.3418.5412 0 1.014.1139 1.4185.3418.4102.2279.7576.5526 1.0425.9741.2905.4159.5241.9086.7007 1.4783.1766.564.3047 1.182.3845 1.8542v.3931c-.0798.6437-.2079 1.2419-.3845 1.7944-.1766.5526-.4102 1.0368-.7007 1.4527-.2849.4101-.6323.7291-1.0425.957s-.8887.3418-1.4355.3418c-.5754 0-1.0881-.1168-1.5381-.3503-.4444-.2336-.8203-.5612-1.128-.9827-.3019-.4216-.5326-.9172-.6921-1.4868-.1595-.5697-.2393-1.1906-.2393-1.8628zm2.461-.1795v.1795c0 .3817.0285.7377.0854 1.0681.0627.3304.1624.6238.2991.8801.1424.2507.3247.4472.5469.5896.2278.1367.5041.2051.8288.2051.4216 0 .7691-.094 1.0425-.282.2734-.1937.4814-.4586.6238-.7947.1481-.3361.2335-.7234.2563-1.1621v-1.1193c-.0171-.3589-.0683-.6808-.1538-.9656-.0797-.2905-.1994-.5383-.3589-.7434-.1538-.2051-.3475-.3646-.581-.4785-.2279-.114-.4985-.1709-.8118-.1709-.319 0-.5924.074-.8203.2221-.2279.1424-.413.339-.5554.5896-.1367.2507-.2393.5469-.3076.8887-.0627.3361-.094.7007-.094 1.0937zm10.382-4.5544v9.2456h-2.4694v-9.2456zm-2.6232-2.4097c0-.3588.1253-.6551.3759-.8886.2507-.2336.5868-.3504 1.0083-.3504.4159 0 .7491.1168.9998.3504.2563.2335.3845.5298.3845.8886 0 .3589-.1282.6552-.3845.8887-.2507.2336-.5839.3504-.9998.3504-.4215 0-.7576-.1168-1.0083-.3504-.2506-.2335-.3759-.5298-.3759-.8887zm4.2639 7.1265v-.1794c0-.6779.0968-1.3017.2905-1.8714.1937-.5753.4757-1.0738.8459-1.4953.3703-.4216.826-.7491 1.3672-.9827.5412-.2393 1.1621-.3589 1.8628-.3589s1.3245.1196 1.8713.3589c.5469.2336 1.0055.5611 1.3758.9827.376.4215.6608.92.8545 1.4953.1937.5697.2905 1.1935.2905 1.8714v.1794c0 .6722-.0968 1.296-.2905 1.8713-.1937.5697-.4785 1.0681-.8545 1.4954-.3703.4215-.826.7491-1.3672.9827-.5412.2335-1.1621.3503-1.8628.3503s-1.3245-.1168-1.8713-.3503c-.5412-.2336-.9998-.5612-1.3758-.9827-.3702-.4273-.6522-.9257-.8459-1.4954-.1937-.5753-.2905-1.1991-.2905-1.8713zm2.4609-.1794v.1794c0 .3874.0342.7491.1025 1.0852.0684.3361.1766.6323.3247.8887.1539.2506.3532.4472.5982.5896.2449.1424.544.2136.8972.2136.3418 0 .6352-.0712.8801-.2136.245-.1424.4415-.339.5896-.5896.1481-.2564.2564-.5526.3247-.8887.0741-.3361.1111-.6978.1111-1.0852v-.1794c0-.376-.037-.7292-.1111-1.0596-.0683-.3361-.1794-.6323-.3332-.8887-.1481-.262-.3447-.4671-.5896-.6152-.245-.1481-.5412-.2222-.8887-.2222s-.6437.0741-.8887.2222c-.2392.1481-.4357.3532-.5896.6152-.1481.2564-.2563.5526-.3247.8887-.0683.3304-.1025.6836-.1025 1.0596z"
+      fill="#fff"
+    />
+    <circle cx={38.9619} cy={84.5315} fill="#5e5e5e" r={19.857} />
+    <path d="m51.0889 84.1858-18.6227 10.6068v-21.2137z" fill="#fff" />
+  </svg>
+);
+export default SvgAudio;

package/src/images/documents/csv.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgCsv = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118h58.5858l19.4142 19.4142v98.5858z"
+      fill="#fff"
+      stroke="#428542"
+      strokeWidth={2}
+    />
+    <g fill="#428542">
+      <path d="m80 20-20-20v20z" />
+      <path d="m10 65h12.5v5h-12.5z" />
+      <path d="m25.833 64.9999h12.5v5h-12.5z" />
+      <path d="m41.667 64.9999h12.5v5h-12.5z" />
+      <path d="m57.5 64.9999h12.5v5h-12.5z" />
+      <path d="m10 74.9999h12.5v5h-12.5z" />
+      <path d="m25.833 74.9999h12.5v5h-12.5z" />
+      <path d="m41.667 74.9999h12.5v5h-12.5z" />
+      <path d="m57.5 74.9999h12.5v5h-12.5z" />
+      <path d="m10 84.9999h12.5v5h-12.5z" />
+      <path d="m25.833 84.9999h12.5v5h-12.5z" />
+      <path d="m41.667 84.9999h12.5v5h-12.5z" />
+      <path d="m57.5 84.9999h12.5v5h-12.5z" />
+      <path d="m10 28h60v27h-60z" />
+    </g>
+    <path
+      d="m31.4893 43.8728h2.5549c-.0513.8374-.282 1.5808-.6921 2.2302-.4045.6494-.9713 1.1564-1.7005 1.521-.7235.3646-1.595.5469-2.6147.5469-.7976 0-1.5125-.1367-2.1448-.4102-.6323-.2791-1.1735-.6779-1.6235-1.1962-.4444-.5184-.7833-1.1451-1.0169-1.8799-.2336-.7349-.3503-1.5581-.3503-2.4695v-.863c0-.9115.1196-1.7347.3589-2.4695.2449-.7406.5924-1.3701 1.0424-1.8885.4558-.5184.9998-.9171 1.6321-1.1962.6323-.2792 1.3387-.4187 2.1192-.4187 1.0367 0 1.9112.1879 2.6232.5639.7178.376 1.2732.8944 1.6663 1.5552.3988.6608.638 1.4128.7178 2.2559h-2.5635c-.0285-.5014-.1282-.9257-.2991-1.2732-.1709-.3532-.4301-.6181-.7776-.7947-.3418-.1823-.7975-.2735-1.3671-.2735-.4273 0-.8004.0798-1.1194.2393s-.5868.4016-.8033.7263c-.2164.3247-.3788.7349-.487 1.2305-.1026.4899-.1538 1.0653-.1538 1.7261v.8801c0 .6437.0484 1.2105.1452 1.7004.0969.4842.245.8944.4444 1.2305.2051.3304.4671.5811.7861.7519.3247.1653.7149.2479 1.1707.2479.5354 0 .9769-.0855 1.3244-.2564s.6124-.4244.7947-.7605c.188-.3361.2991-.7548.3333-1.2561zm10.7153.8716c0-.2222-.0342-.4216-.1025-.5982-.0627-.1823-.1823-.3475-.3589-.4956-.1766-.1538-.4244-.3047-.7434-.4528-.3191-.1482-.7321-.302-1.2391-.4615-.5639-.1823-1.0994-.3873-1.6064-.6152-.5013-.2279-.9456-.4928-1.333-.7947-.3817-.3076-.6836-.6636-.9058-1.0681-.2164-.4045-.3247-.8744-.3247-1.4099 0-.5184.114-.9884.3418-1.4099.2279-.4273.5469-.7919.957-1.0938.4102-.3076.8944-.544 1.4527-.7092.5639-.1652 1.182-.2478 1.8542-.2478.9172 0 1.7176.1652 2.4012.4956.6835.3304 1.2133.7833 1.5893 1.3586.3817.5754.5725 1.2334.5725 1.9739h-2.5464c0-.3646-.0769-.6836-.2307-.957-.1481-.2791-.376-.4985-.6836-.658-.3019-.1595-.6836-.2392-1.145-.2392-.4443 0-.8146.0683-1.1108.2051-.2963.131-.5184.3104-.6665.5383-.1481.2221-.2222.4728-.2222.7519 0 .2108.0513.4016.1538.5725.1082.1709.2677.3304.4785.4786.2108.1481.47.2876.7776.4187.3076.131.6637.2592 1.0681.3845.6779.2051 1.2732.4358 1.7859.6921.5184.2564.9513.544 1.2988.8631.3475.319.6096.6807.7862 1.0852.1766.4044.2649.863.2649 1.3757 0 .5412-.1054 1.0254-.3162 1.4526-.2108.4273-.5155.789-.9143 1.0852-.3988.2963-.8744.5213-1.427.6751s-1.1707.2307-1.8543.2307c-.6152 0-1.2219-.0798-1.82-.2393-.5982-.1652-1.1422-.413-1.6321-.7434-.4842-.3304-.8716-.7519-1.1621-1.2646s-.4358-1.1194-.4358-1.8201h2.572c0 .3874.0598.7149.1795.9827.1196.2677.2876.4842.5041.6494.2222.1652.4842.2848.7861.3589.3077.074.6438.1111 1.0083.1111.4444 0 .809-.0627 1.0938-.188.2905-.1253.5041-.2991.6409-.5213.1424-.2221.2136-.4728.2136-.7519zm8.7927.6579 2.9309-9.8437h2.854l-4.3322 12.4414h-1.8799zm-2.7002-9.8437 2.9224 9.8437.4443 2.5977h-1.897l-4.3066-12.4414z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgCsv;

package/src/images/documents/excel.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgExcel = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118h58.5858l19.4142 19.4142v98.5858z"
+      fill="#fff"
+      stroke="#428542"
+      strokeWidth={2}
+    />
+    <g fill="#428542">
+      <path d="m80 20-20-20v20z" />
+      <path d="m10 65h12.5v5h-12.5z" />
+      <path d="m25.833 64.9999h12.5v5h-12.5z" />
+      <path d="m41.667 64.9999h12.5v5h-12.5z" />
+      <path d="m57.5 64.9999h12.5v5h-12.5z" />
+      <path d="m10 74.9999h12.5v5h-12.5z" />
+      <path d="m25.833 74.9999h12.5v5h-12.5z" />
+      <path d="m41.667 74.9999h12.5v5h-12.5z" />
+      <path d="m57.5 74.9999h12.5v5h-12.5z" />
+      <path d="m10 84.9999h12.5v5h-12.5z" />
+      <path d="m25.833 84.9999h12.5v5h-12.5z" />
+      <path d="m41.667 84.9999h12.5v5h-12.5z" />
+      <path d="m57.5 84.9999h12.5v5h-12.5z" />
+      <path d="m10 28h60v27h-60z" />
+    </g>
+    <path
+      d="m28.5669 46.0005v1.9995h-6.6223v-1.9995zm-5.7849-10.4419v12.4414h-2.5635v-12.4414zm4.9219 5.0671v1.9483h-5.7593v-1.9483zm.8544-5.0671v2.0081h-6.6137v-2.0081zm3.3326 3.1958 1.5295 2.8113 1.5723-2.8113h2.6233l-2.6148 4.5203 2.7344 4.7253h-2.6318l-1.6663-2.9736-1.6663 2.9736h-2.6318l2.7344-4.7253-2.6148-4.5203zm10.57 7.4939c.302 0 .5697-.057.8033-.1709.2335-.1196.4158-.2848.5468-.4956.1368-.2165.208-.47.2137-.7605h2.3156c-.0057.6494-.1794 1.2276-.5212 1.7346-.3418.5013-.8004.8972-1.3757 1.1878-.5754.2848-1.2191.4272-1.9312.4272-.7178 0-1.3444-.1196-1.8799-.3589-.5298-.2392-.9712-.5696-1.3244-.9912-.3532-.4272-.6181-.9229-.7947-1.4868-.1766-.5697-.2649-1.1792-.2649-1.8286v-.2478c0-.6551.0883-1.2647.2649-1.8286.1766-.5697.4415-1.0653.7947-1.4869.3532-.4272.7946-.7605 1.3244-.9997.5298-.2393 1.1507-.3589 1.8628-.3589.7577 0 1.4213.1453 1.991.4358.5753.2905 1.0254.7064 1.3501 1.2475.3304.5355.4984 1.1707.5041 1.9056h-2.3156c-.0057-.3077-.0712-.5868-.1966-.8374-.1196-.2507-.2962-.4501-.5298-.5982-.2278-.1538-.5098-.2307-.8459-.2307-.3589 0-.6523.0769-.8801.2307-.2279.1481-.4045.3532-.5298.6153-.1253.2563-.2136.5497-.2649.8801-.0456.3247-.0684.6665-.0684 1.0254v.2478c0 .3589.0228.7035.0684 1.0339s.131.6238.2563.8801c.1311.2564.3105.4586.5384.6067.2278.1481.5241.2222.8886.2222zm9.5618 1.9226c-.7178 0-1.3615-.1139-1.9311-.3418-.5697-.2336-1.0539-.5554-1.4527-.9656-.3931-.4101-.695-.8858-.9057-1.427-.2108-.5469-.3162-1.1279-.3162-1.7431v-.3418c0-.7007.0997-1.3416.2991-1.9226.1993-.5811.4842-1.0852.8545-1.5125.3759-.4272.8317-.7548 1.3671-.9827.5355-.2335 1.1394-.3503 1.8116-.3503.6551 0 1.2361.1082 1.7431.3247s.9314.5241 1.2732.9229c.3475.3987.6096.8772.7862 1.4355.1766.5526.2649 1.1678.2649 1.8457v1.0254h-7.3487v-1.6406h4.9304v-.188c0-.3418-.0626-.6466-.188-.9143-.1196-.2735-.3019-.4899-.5468-.6494-.245-.1595-.5583-.2393-.94-.2393-.3247 0-.6038.0712-.8374.2136-.2335.1424-.4244.3418-.5725.5982-.1424.2563-.2506.5582-.3247.9057-.0683.3418-.1025.7178-.1025 1.128v.3418c0 .3702.0512.712.1538 1.0254.1082.3133.2592.5839.4529.8117.1993.2279.4386.4045.7177.5298.2849.1253.6067.188.9656.188.4443 0 .8574-.0855 1.239-.2564.3874-.1766.7206-.4414.9998-.7946l1.1963 1.2988c-.1937.2791-.4586.5469-.7947.8032-.3304.2564-.7292.4671-1.1963.6323-.4671.1595-.9998.2393-1.5979.2393zm7.793-13.2959v13.125h-2.4695v-13.125z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgExcel;

package/src/images/documents/file.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgFile = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118.000244h58.5858l19.4142 19.414244v98.586z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <g fill="#5e5e5e">
+      <path d="m80 19.9998-20-20.00004414v20.00004414z" />
+      <path d="m10 59.9998h59.9997v5h-59.9997z" />
+      <path d="m10 69.9998h59.9997v5h-59.9997z" />
+      <path d="m10 79.9998h30v5h-30z" />
+      <path d="m10 27.9998h60v27h-60z" />
+    </g>
+    <path
+      d="m29.5154 35.5583v12.4415h-2.5635v-12.4415zm4.956 5.315v1.9995h-5.6567v-1.9995zm.5982-5.315v2.0081h-6.2549v-2.0081zm3.9306 3.1959v9.2456h-2.4694v-9.2456zm-2.6232-2.4097c0-.3589.1253-.6551.3759-.8887.2507-.2336.5868-.3503 1.0083-.3503.4159 0 .7491.1167.9998.3503.2563.2336.3845.5298.3845.8887s-.1282.6551-.3845.8887c-.2507.2335-.5839.3503-.9998.3503-.4215 0-.7576-.1168-1.0083-.3503-.2506-.2336-.3759-.5298-.3759-.8887zm7.2546-1.4697v13.125h-2.4695v-13.125zm6.2891 13.2959c-.7178 0-1.3615-.114-1.9312-.3418-.5697-.2336-1.0539-.5555-1.4526-.9656-.3931-.4102-.695-.8858-.9058-1.427-.2108-.5469-.3162-1.128-.3162-1.7432v-.3418c0-.7007.0997-1.3415.2991-1.9226.1994-.581.4842-1.0852.8545-1.5124.376-.4273.8317-.7548 1.3672-.9827.5355-.2336 1.1393-.3503 1.8115-.3503.6551 0 1.2362.1082 1.7432.3247.507.2164.9314.524 1.2732.9228.3475.3988.6095.8773.7861 1.4356.1766.5525.2649 1.1678.2649 1.8457v1.0254h-7.3486v-1.6407h4.9304v-.188c0-.3418-.0627-.6465-.188-.9143-.1196-.2734-.3019-.4899-.5469-.6494-.2449-.1595-.5582-.2392-.9399-.2392-.3247 0-.6039.0712-.8374.2136-.2336.1424-.4244.3418-.5725.5981-.1424.2564-.2507.5583-.3247.9058-.0684.3418-.1026.7178-.1026 1.1279v.3418c0 .3703.0513.7121.1538 1.0254.1083.3133.2592.5839.4529.8118.1994.2278.4387.4044.7178.5298.2848.1253.6067.1879.9656.1879.4443 0 .8573-.0854 1.239-.2563.3873-.1766.7206-.4415.9997-.7947l1.1963 1.2988c-.1937.2792-.4586.5469-.7947.8033-.3304.2563-.7291.4671-1.1962.6323-.4672.1595-.9998.2393-1.5979.2393z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgFile;

package/src/images/documents/generic.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgGeneric = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118.000244h58.5858l19.4142 19.414244v98.586z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <g fill="#5e5e5e">
+      <path d="m80 19.9998-20-20.00004414v20.00004414z" />
+      <path d="m10 27.9998h59.9997v5h-59.9997z" />
+      <path d="m10 37.9998h59.9997v5h-59.9997z" />
+      <path d="m10 47.9998h59.9997v5h-59.9997z" />
+      <path d="m10 57.9998h30v5h-30z" />
+    </g>
+  </svg>
+);
+export default SvgGeneric;

package/src/images/documents/geodata.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgGeodata = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m.999512 119v-118h58.585788l19.4142 19.4142v98.5858z"
+      fill="#fff"
+      stroke="#428542"
+      strokeWidth={2}
+    />
+    <path d="m79.9995 20-20-20v20z" fill="#428542" />
+    <path d="m9.99951 78h60v27h-60z" fill="#428542" />
+    <path
+      d="m22.7784 90.8907v3.8739c-.1521.1836-.3871.3827-.7049.5976-.3178.2104-.7273.3916-1.2287.5438-.5013.1522-1.1077.2283-1.8194.2283-.6311 0-1.2063-.103-1.7255-.3089-.5192-.2103-.9668-.5169-1.3427-.9198-.3715-.4028-.658-.8951-.8594-1.477-.2014-.5864-.3021-1.2555-.3021-2.0075v-.6109c0-.752.0962-1.4211.2887-2.0075.1969-.5863.4766-1.0809.8392-1.4837.3625-.4029.7945-.7095 1.2958-.9198.5013-.2104 1.0585-.3156 1.6717-.3156.8504 0 1.5487.1388 2.0947.4163.5461.273.9624.6535 1.2488 1.1413.291.4834.47 1.0384.5371 1.6651h-1.9537c-.0492-.3312-.1432-.6199-.282-.8661-.1387-.2462-.3379-.4387-.5975-.5774-.2552-.1388-.5864-.2081-.9937-.2081-.3357 0-.6356.0693-.8996.2081-.2596.1343-.479.3334-.658.5975s-.3155.5908-.4095.9803c-.094.3894-.141.8414-.141 1.3562v.6243c0 .5103.0492.9624.1477 1.3562.0984.3894.2439.7184.4364.987.1969.2641.4386.4632.7251.5975.2864.1343.6199.2014 1.0003.2014.3178 0 .5819-.0268.7923-.0805.2148-.0537.3871-.1186.5169-.1947.1343-.0806.2373-.1567.3089-.2283v-1.7322h-1.8396v-1.4368zm4.8475 5.2436c-.564 0-1.0698-.0895-1.5174-.2686-.4476-.1835-.828-.4364-1.1413-.7586-.3089-.3223-.5461-.696-.7117-1.1213-.1656-.4296-.2484-.8862-.2484-1.3696v-.2685c0-.5506.0783-1.0541.235-1.5107.1566-.4565.3804-.8526.6714-1.1883.2954-.3357.6534-.5931 1.0742-.7721.4207-.1835.8952-.2753 1.4233-.2753.5147 0 .9713.0851 1.3696.2551.3984.1701.7319.4118 1.0004.7251.273.3134.4789.6893.6177 1.128.1387.4341.2081.9175.2081 1.4502v.8056h-5.7739v-1.289h3.8739v-.1477c0-.2686-.0492-.5081-.1477-.7184-.094-.2149-.2372-.3849-.4297-.5103-.1925-.1253-.4386-.188-.7385-.188-.2552 0-.4745.056-.658.1679s-.3334.2685-.4498.47c-.1119.2014-.197.4386-.2551.7116-.0538.2686-.0806.564-.0806.8863v.2685c0 .2909.0403.5595.1208.8057.0851.2462.2037.4588.3559.6378.1566.179.3446.3178.5639.4163.2238.0984.4767.1477.7587.1477.3491 0 .6736-.0672.9735-.2015.3044-.1387.5662-.3468.7855-.6243l.94 1.0205c-.1522.2193-.3603.4296-.6244.6311-.2596.2014-.5729.367-.94.4968-.367.1253-.7855.188-1.2554.188zm3.7731-3.6926v-.141c0-.5327.0761-1.0228.2283-1.4704.1522-.452.3738-.8437.6647-1.1749s.649-.5886 1.0742-.7721c.4252-.188.9131-.282 1.4636-.282.5506 0 1.0407.094 1.4704.282.4297.1835.79.4409 1.0809.7721.2954.3312.5192.7229.6714 1.1749.1522.4476.2283.9377.2283 1.4704v.141c0 .5281-.0761 1.0182-.2283 1.4703-.1522.4476-.376.8392-.6714 1.1749-.2909.3312-.649.5886-1.0742.7721s-.9131.2753-1.4636.2753c-.5506 0-1.0407-.0918-1.4704-.2753-.4252-.1835-.7855-.4409-1.0809-.7721-.2909-.3357-.5125-.7273-.6647-1.1749-.1522-.4521-.2283-.9422-.2283-1.4703zm1.9336-.141v.141c0 .3043.0269.5885.0806.8526s.1388.4968.2551.6983c.1209.1969.2775.3513.47.4632s.4275.1679.705.1679c.2685 0 .499-.056.6915-.1679s.3469-.2663.4632-.4632c.1164-.2015.2015-.4342.2552-.6983.0582-.2641.0873-.5483.0873-.8526v-.141c0-.2955-.0291-.573-.0873-.8326-.0537-.264-.141-.4968-.2619-.6982-.1163-.2059-.2708-.367-.4632-.4834-.1925-.1164-.4252-.1746-.6983-.1746-.273 0-.5057.0582-.6982.1746-.188.1164-.3424.2775-.4633.4834-.1163.2014-.2014.4342-.2551.6982-.0537.2596-.0806.5371-.0806.8326zm10.4267 2.1148v-8.728h1.947v10.3125h-1.7523zm-4.5923-1.9604v-.141c0-.555.0627-1.0586.188-1.5106.1253-.4566.3088-.8482.5505-1.175.2417-.3267.5394-.5796.893-.7586.3536-.1791.7564-.2686 1.2085-.2686.4252 0 .7967.0895 1.1145.2686.3222.179.5953.4341.8191.7654.2282.3267.4117.7139.5505 1.1615.1387.4431.2395.9287.3021 1.4569v.3088c-.0626.5058-.1634.9757-.3021 1.4099-.1388.4342-.3223.8146-.5505 1.1414-.2238.3222-.4969.5729-.8191.7519-.3223.1791-.6983.2686-1.128.2686-.452 0-.8549-.0918-1.2085-.2753-.3491-.1835-.6445-.4409-.8862-.7721-.2372-.3312-.4185-.7206-.5438-1.1682s-.188-.9355-.188-1.4636zm1.9336-.141v.141c0 .2999.0224.5796.0671.8392.0493.2596.1276.4901.235.6915.1119.197.2551.3514.4297.4633.179.1074.3961.1611.6512.1611.3313 0 .6043-.0738.8191-.2215.2149-.1522.3782-.3603.4901-.6244.1164-.2641.1836-.5685.2015-.9131v-.8795c-.0135-.282-.0537-.5349-.1209-.7587-.0626-.2283-.1566-.423-.282-.5841-.1208-.1611-.273-.2865-.4565-.376-.179-.0895-.3917-.1342-.6378-.1342-.2507 0-.4655.0581-.6446.1745-.179.1119-.3245.2663-.4364.4633-.1074.1969-.188.4297-.2417.6982-.0492.2641-.0738.5505-.0738.8594zm10.0372 2.0477v-3.2361c0-.2327-.038-.4319-.1141-.5975-.0761-.1701-.1947-.3021-.3559-.3961-.1566-.094-.3603-.141-.6109-.141-.2149 0-.4006.038-.5573.1141-.1566.0716-.2775.1768-.3625.3156-.0851.1343-.1276.2931-.1276.4767h-1.9336c0-.3089.0716-.602.2149-.8796.1432-.2775.3513-.5214.6244-.7318.273-.2148.5975-.3827.9735-.5035.3804-.1209.8056-.1813 1.2756-.1813.564 0 1.0653.094 1.5039.282.4387.188.7833.47 1.0339.8459.2552.376.3827.846.3827 1.41v3.1085c0 .3983.0247.7251.0739.9802.0492.2507.1208.47.2148.658v.1141h-1.9537c-.094-.1969-.1656-.4431-.2148-.7385-.0448-.2999-.0672-.5998-.0672-.8997zm.2551-2.7862.0135 1.0943h-1.081c-.2551 0-.4766.0291-.6646.0873s-.3424.141-.4633.2484c-.1208.103-.2104.2238-.2685.3626-.0538.1387-.0806.2909-.0806.4565s.038.3156.1141.4498c.0761.1298.1858.2328.329.3089.1432.0716.3111.1074.5035.1074.291 0 .5439-.0582.7587-.1746.2149-.1163.3805-.2596.4968-.4297.1209-.17.1835-.3312.188-.4834l.5103.8191c-.0716.1836-.1701.3738-.2954.5707-.1209.197-.2753.3827-.4633.5573-.188.1701-.414.311-.6781.4229-.2641.1075-.5774.1612-.9399.1612-.461 0-.8795-.0918-1.2555-.2753-.3715-.188-.6669-.4453-.8863-.7721-.2148-.3312-.3222-.7072-.3222-1.1279 0-.3805.0716-.7184.2148-1.0138.1433-.2954.3536-.5438.6311-.7452.282-.2059.6334-.3604 1.0541-.4633.4207-.1074.9086-.1611 1.4636-.1611zm6.7408-2.84v1.3696h-4.2298v-1.3696zm-3.1824-1.7926h1.9336v6.8683c0 .2103.0268.3715.0806.4834.0581.1119.1432.1902.2551.235.1119.0402.2529.0604.423.0604.1208 0 .2282-.0045.3222-.0134.0985-.0135.1813-.0269.2484-.0403l.0067 1.4233c-.1656.0537-.3446.0962-.5371.1276-.1924.0313-.405.047-.6378.047-.4252 0-.7967-.0694-1.1145-.2082-.3133-.1432-.555-.3715-.7251-.6848s-.2551-.7251-.2551-1.2353zm8.2043 7.4188v-3.2361c0-.2327-.038-.4319-.1141-.5975-.0761-.1701-.1947-.3021-.3558-.3961-.1567-.094-.3603-.141-.611-.141-.2148 0-.4006.038-.5572.1141-.1567.0716-.2776.1768-.3626.3156-.085.1343-.1276.2931-.1276.4767h-1.9335c0-.3089.0716-.602.2148-.8796.1432-.2775.3514-.5214.6244-.7318.273-.2148.5975-.3827.9735-.5035.3804-.1209.8057-.1813 1.2756-.1813.564 0 1.0653.094 1.5039.282.4387.188.7833.47 1.034.8459.2551.376.3827.846.3827 1.41v3.1085c0 .3983.0246.7251.0738.9802.0492.2507.1209.47.2149.658v.1141h-1.9538c-.094-.1969-.1656-.4431-.2148-.7385-.0448-.2999-.0672-.5998-.0672-.8997zm.2552-2.7862.0134 1.0943h-1.0809c-.2552 0-.4767.0291-.6647.0873s-.3424.141-.4633.2484c-.1208.103-.2103.2238-.2685.3626-.0537.1387-.0806.2909-.0806.4565s.0381.3156.1141.4498c.0761.1298.1858.2328.329.3089.1433.0716.3111.1074.5036.1074.2909 0 .5438-.0582.7586-.1746.2149-.1163.3805-.2596.4969-.4297.1208-.17.1835-.3312.1879-.4834l.5103.8191c-.0716.1836-.1701.3738-.2954.5707-.1209.197-.2753.3827-.4633.5573-.188.1701-.414.311-.6781.4229-.264.1075-.5774.1612-.9399.1612-.461 0-.8795-.0918-1.2555-.2753-.3715-.188-.6669-.4453-.8862-.7721-.2149-.3312-.3223-.7072-.3223-1.1279 0-.3805.0716-.7184.2148-1.0138.1433-.2954.3536-.5438.6312-.7452.2819-.2059.6333-.3604 1.054-.4633.4208-.1074.9086-.1611 1.4637-.1611z"
+      fill="#fff"
+    />
+    <path
+      d="m40.0007 20.8333c-9.2143 0-16.6667 7.4004-16.6667 16.5504 0 12.4128 16.6667 30.7364 16.6667 30.7364s16.6666-18.3236 16.6666-30.7364c0-9.15-7.4524-16.5504-16.6666-16.5504zm0 22.4612c-3.2858 0-5.9524-2.648-5.9524-5.9108s2.6666-5.9109 5.9524-5.9109c3.2857 0 5.9523 2.6481 5.9523 5.9109s-2.6666 5.9108-5.9523 5.9108z"
+      fill="#428542"
+    />
+  </svg>
+);
+export default SvgGeodata;

package/src/images/documents/ical.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcal = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118.000244h58.5858l19.4142 19.414244v98.586z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <g fill="#5e5e5e">
+      <path d="m80 19.9998-20-20.00004414v20.00004414z" />
+      <path d="m10 59.9998h59.9997v5h-59.9997z" />
+      <path d="m10 69.9998h59.9997v5h-59.9997z" />
+      <path d="m10 79.9998h30v5h-30z" />
+      <path d="m10 27.9998h60v27h-60z" />
+    </g>
+    <path
+      d="m28.5156 38.7542v9.2456h-2.4695v-9.2456zm-2.6233-2.4097c0-.3589.1254-.6551.376-.8887.2507-.2336.5868-.3503 1.0083-.3503.4159 0 .7491.1167.9998.3503.2563.2336.3845.5298.3845.8887s-.1282.6551-.3845.8887c-.2507.2335-.5839.3503-.9998.3503-.4215 0-.7576-.1168-1.0083-.3503-.2506-.2336-.376-.5298-.376-.8887zm12.0227 7.5281h2.555c-.0513.8374-.282 1.5808-.6922 2.2302-.4044.6494-.9712 1.1564-1.7004 1.521-.7235.3646-1.5951.5469-2.6148.5469-.7975 0-1.5124-.1368-2.1447-.4102-.6324-.2791-1.1735-.6779-1.6236-1.1963-.4443-.5184-.7832-1.145-1.0168-1.8799-.2336-.7348-.3504-1.558-.3504-2.4695v-.863c0-.9115.1197-1.7346.3589-2.4695.245-.7405.5925-1.37 1.0425-1.8884.4557-.5184.9998-.9172 1.6321-1.1963s1.3387-.4187 2.1191-.4187c1.0368 0 1.9113.188 2.6233.564.7178.3759 1.2732.8943 1.6663 1.5551.3988.6609.638 1.4128.7178 2.2559h-2.5635c-.0285-.5013-.1282-.9257-.2991-1.2732-.1709-.3532-.4301-.6181-.7776-.7947-.3418-.1823-.7975-.2734-1.3672-.2734-.4272 0-.8003.0798-1.1193.2393-.3191.1595-.5868.4016-.8033.7263-.2164.3247-.3788.7348-.487 1.2304-.1026.49-.1538 1.0653-.1538 1.7261v.8801c0 .6438.0484 1.2106.1452 1.7005.0969.4842.245.8944.4444 1.2305.205.3304.4671.581.7861.7519.3247.1652.7149.2478 1.1706.2478.5355 0 .977-.0854 1.3245-.2563s.6124-.4244.7947-.7605c.188-.3361.2991-.7548.3332-1.2561zm9.0747 2.0422v-4.1187c0-.2962-.0484-.5497-.1452-.7605-.0969-.2164-.2478-.3845-.4529-.5041-.1994-.1196-.4586-.1794-.7776-.1794-.2734 0-.5098.0484-.7092.1452-.1994.0912-.3532.225-.4614.4016-.1083.1709-.1624.3732-.1624.6067h-2.4609c0-.3931.0911-.7662.2734-1.1194s.4472-.6636.7947-.9314c.3475-.2734.7605-.487 1.239-.6408.4842-.1538 1.0254-.2307 1.6235-.2307.7178 0 1.3558.1196 1.9141.3588.5583.2393.9969.5982 1.3159 1.0767.3247.4785.4871 1.0767.4871 1.7944v3.9563c0 .507.0313.9229.094 1.2476.0626.319.1538.5981.2734.8374v.1453h-2.4866c-.1196-.2507-.2107-.564-.2734-.94-.057-.3817-.0855-.7633-.0855-1.145zm.3248-3.5461.017 1.3928h-1.3757c-.3247 0-.6067.037-.8459.1111-.2393.074-.4358.1794-.5896.3161-.1538.131-.2678.2849-.3418.4614-.0684.1766-.1026.3703-.1026.5811s.0484.4016.1453.5725c.0968.1652.2364.2962.4187.3931.1823.0911.3959.1367.6409.1367.3702 0 .6921-.0741.9655-.2222.2735-.1481.4843-.3304.6324-.5468.1538-.2165.2335-.4216.2392-.6153l.6494 1.0425c-.0911.2336-.2164.4757-.3759.7263-.1539.2507-.3504.4871-.5896.7092-.2393.2165-.527.396-.8631.5384-.3361.1367-.7348.2051-1.1963.2051-.5867 0-1.1194-.1168-1.5979-.3504-.4728-.2392-.8488-.5668-1.1279-.9827-.2734-.4215-.4102-.9-.4102-1.4355 0-.4842.0912-.9143.2735-1.2903s.45-.6921.8032-.9485c.3589-.262.8061-.4585 1.3416-.5896.5354-.1367 1.1564-.205 1.8628-.205zm6.6479-7.4939v13.125h-2.4695v-13.125z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgIcal;

package/src/images/documents/ico.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIco = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m1 119v-118.000244h58.5858l19.4142 19.414244v98.586z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <g fill="#5e5e5e">
+      <path d="m80 19.9998-20-20.00004414v20.00004414z" />
+      <path d="m10 59.9998h59.9997v5h-59.9997z" />
+      <path d="m10 69.9998h59.9997v5h-59.9997z" />
+      <path d="m10 79.9998h30v5h-30z" />
+      <path d="m10 27.9998h60v27h-60z" />
+    </g>
+    <path
+      d="m29.5154 35.5583v12.4415h-2.555v-12.4415zm9.613 8.3143h2.5549c-.0512.8374-.2819 1.5808-.6921 2.2302-.4044.6494-.9713 1.1564-1.7004 1.521-.7235.3646-1.5951.5469-2.6148.5469-.7975 0-1.5124-.1368-2.1448-.4102-.6323-.2791-1.1735-.6779-1.6235-1.1963-.4443-.5184-.7833-1.145-1.0168-1.8799-.2336-.7348-.3504-1.558-.3504-2.4695v-.863c0-.9115.1197-1.7346.3589-2.4695.245-.7405.5925-1.37 1.0425-1.8884.4557-.5184.9998-.9172 1.6321-1.1963s1.3387-.4187 2.1191-.4187c1.0368 0 1.9112.188 2.6233.564.7178.3759 1.2732.8943 1.6663 1.5551.3987.6609.638 1.4128.7177 2.2559h-2.5634c-.0285-.5013-.1282-.9257-.2991-1.2732-.1709-.3532-.4301-.6181-.7776-.7947-.3418-.1823-.7975-.2734-1.3672-.2734-.4272 0-.8004.0798-1.1194.2393s-.5867.4016-.8032.7263-.3788.7348-.4871 1.2304c-.1025.49-.1538 1.0653-.1538 1.7261v.8801c0 .6438.0485 1.2106.1453 1.7005.0968.4842.245.8944.4443 1.2305.2051.3304.4672.581.7862.7519.3247.1652.7149.2478 1.1706.2478.5355 0 .977-.0854 1.3245-.2563s.6124-.4244.7947-.7605c.188-.3361.299-.7548.3332-1.2561zm14.458-2.3841v.5896c0 .9457-.1281 1.7945-.3845 2.5464-.2563.752-.6181 1.3928-1.0852 1.9226-.4671.5241-1.0254.9257-1.6748 1.2049-.6437.2791-1.3586.4187-2.1448.4187-.7804 0-1.4953-.1396-2.1448-.4187-.6437-.2792-1.2019-.6808-1.6748-1.2049-.4728-.5298-.8402-1.1706-1.1023-1.9226-.2563-.7519-.3845-1.6007-.3845-2.5464v-.5896c0-.9513.1282-1.8001.3845-2.5464.2564-.7519.6181-1.3928 1.0852-1.9226.4729-.5298 1.0311-.9342 1.6749-1.2133.6494-.2792 1.3643-.4187 2.1447-.4187.7862 0 1.5011.1395 2.1448.4187.6494.2791 1.2077.6835 1.6748 1.2133.4728.5298.8374 1.1707 1.0938 1.9226.262.7463.393 1.5951.393 2.5464zm-2.5891.5896v-.6067c0-.6608-.0598-1.2418-.1794-1.7431-.1197-.5013-.2963-.9229-.5298-1.2647-.2336-.3418-.5184-.5981-.8545-.769-.3361-.1766-.7206-.2649-1.1536-.2649-.4329 0-.8174.0883-1.1535.2649-.3304.1709-.6124.4272-.846.769-.2278.3418-.4016.7634-.5212 1.2647-.1197.5013-.1795 1.0823-.1795 1.7431v.6067c0 .6551.0598 1.2362.1795 1.7432.1196.5013.2962.9257.5298 1.2732.2335.3418.5184.601.8545.7776s.7206.2649 1.1535.2649c.433 0 .8175-.0883 1.1536-.2649s.6181-.4358.8459-.7776c.2279-.3475.4016-.7719.5213-1.2732.1196-.507.1794-1.0881.1794-1.7432z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgIco;

package/src/images/documents/image.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgImage = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    viewBox="0 0 80 120"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="m.999512 119v-118.000244h58.585788l19.4142 19.414244v98.586z"
+      fill="#fff"
+      stroke="#5e5e5e"
+      strokeWidth={2}
+    />
+    <path d="m79.9995 19.9998-20-20.00004414v20.00004414z" fill="#5e5e5e" />
+    <path
+      d="m63.9773 27.9998h-47.4546c-2.6363 0-5.2727 2.6666-5.2727 5.3333v37.3333c0 2.9334 2.3727 5.3334 5.2727 5.3334h47.4546c2.6363 0 5.2727-2.6667 5.2727-5.3334v-37.3333c0-2.6667-2.6364-5.3333-5.2727-5.3333zm-42.1818 37.3333 9.2272-12 6.5909 8.0267 9.2273-12.0267 11.8636 16z"
+      fill="#5e5e5e"
+    />
+    <circle cx={39.5833} cy={43.6246} fill="#fff" r={3.33333} />
+  </svg>
+);
+export default SvgImage;

package/src/images/documents/index.ts

@@ -0,0 +1,22 @@
+export { default as Audio } from "./audio";
+export { default as Csv } from "./csv";
+export { default as Excel } from "./excel";
+export { default as File } from "./file";
+export { default as Generic } from "./generic";
+export { default as Geodata } from "./geodata";
+export { default as Ical } from "./ical";
+export { default as Ico } from "./ico";
+export { default as Image } from "./image";
+export { default as Odf } from "./odf";
+export { default as Odg } from "./odg";
+export { default as Odp } from "./odp";
+export { default as Ods } from "./ods";
+export { default as Odt } from "./odt";
+export { default as Pdf } from "./pdf";
+export { default as Ppt } from "./ppt";
+export { default as Rtf } from "./rtf";
+export { default as Text } from "./text";
+export { default as Video } from "./video";
+export { default as Word } from "./word";
+export { default as Xml } from "./xml";
+export { default as Zip } from "./zip";

package/src/images/documents/odf.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgOdf = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 80 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    {...props}
+  >
+    <path
+      d="M59.5859 0.999756L79 20.4138V119H1V0.999756H59.5859Z"
+      fill="white"
+      stroke="#5E5E5E"
+      strokeWidth={2}
+    />
+    <path d="M80 19.9998L60 -0.000244141V19.9998H80Z" fill="#5E5E5E" />
+    <rect x={10} y={59.9998} width={59.9997} height={5} fill="#5E5E5E" />
+    <rect x={10} y={69.9998} width={59.9997} height={5} fill="#5E5E5E" />
+    <rect x={10} y={79.9998} width={30} height={5} fill="#5E5E5E" />
+    <rect x={10} y={27.9998} width={60} height={27} fill="#5E5E5E" />
+    <path
+      d="M34.8047 41.4885V42.0781C34.8047 43.0238 34.6765 43.8726 34.4202 44.6245C34.1638 45.3765 33.8021 46.0173 33.335 46.5471C32.8678 47.0712 32.3096 47.4728 31.6602 47.752C31.0164 48.0311 30.3015 48.1707 29.5154 48.1707C28.7349 48.1707 28.02 48.0311 27.3706 47.752C26.7269 47.4728 26.1686 47.0712 25.6958 46.5471C25.223 46.0173 24.8556 45.3765 24.5935 44.6245C24.3372 43.8726 24.209 43.0238 24.209 42.0781V41.4885C24.209 40.5372 24.3372 39.6884 24.5935 38.9421C24.8499 38.1902 25.2116 37.5493 25.6787 37.0195C26.1515 36.4897 26.7098 36.0853 27.3535 35.8062C28.0029 35.527 28.7179 35.3875 29.4983 35.3875C30.2844 35.3875 30.9993 35.527 31.6431 35.8062C32.2925 36.0853 32.8507 36.4897 33.3179 37.0195C33.7907 37.5493 34.1553 38.1902 34.4116 38.9421C34.6737 39.6884 34.8047 40.5372 34.8047 41.4885ZM32.2156 42.0781V41.4714C32.2156 40.8106 32.1558 40.2296 32.0361 39.7283C31.9165 39.227 31.7399 38.8054 31.5063 38.4636C31.2728 38.1218 30.988 37.8655 30.6519 37.6946C30.3158 37.518 29.9312 37.4297 29.4983 37.4297C29.0653 37.4297 28.6808 37.518 28.3447 37.6946C28.0143 37.8655 27.7323 38.1218 27.4988 38.4636C27.2709 38.8054 27.0972 39.227 26.9775 39.7283C26.8579 40.2296 26.7981 40.8106 26.7981 41.4714V42.0781C26.7981 42.7332 26.8579 43.3143 26.9775 43.8213C27.0972 44.3226 27.2738 44.747 27.5073 45.0945C27.7409 45.4363 28.0257 45.6955 28.3618 45.8721C28.6979 46.0487 29.0824 46.137 29.5154 46.137C29.9483 46.137 30.3328 46.0487 30.6689 45.8721C31.005 45.6955 31.287 45.4363 31.5149 45.0945C31.7428 44.747 31.9165 44.3226 32.0361 43.8213C32.1558 43.3143 32.2156 42.7332 32.2156 42.0781ZM40.47 47.9998H37.7612L37.7783 46.0002H40.47C41.1422 46.0002 41.709 45.8493 42.1704 45.5474C42.6318 45.2397 42.9793 44.7926 43.2129 44.2058C43.4521 43.6191 43.5718 42.9098 43.5718 42.0781V41.4714C43.5718 40.8334 43.5034 40.2723 43.3667 39.7881C43.2357 39.3039 43.0391 38.8966 42.7771 38.5662C42.5151 38.2358 42.1932 37.988 41.8115 37.8228C41.4299 37.6519 40.9912 37.5664 40.4956 37.5664H37.71V35.5583H40.4956C41.3273 35.5583 42.0878 35.7008 42.7771 35.9856C43.4721 36.2647 44.0731 36.6663 44.5801 37.1904C45.0871 37.7145 45.4773 38.3411 45.7507 39.0703C46.0299 39.7938 46.1694 40.5999 46.1694 41.4885V42.0781C46.1694 42.9611 46.0299 43.7672 45.7507 44.4963C45.4773 45.2255 45.0871 45.8521 44.5801 46.3762C44.0788 46.8946 43.4778 47.2962 42.7771 47.5811C42.0821 47.8602 41.3131 47.9998 40.47 47.9998ZM39.2139 35.5583V47.9998H36.6504V35.5583H39.2139ZM50.5957 35.5583V47.9998H48.0322V35.5583H50.5957ZM55.5518 40.8733V42.8728H49.895V40.8733H55.5518ZM56.1499 35.5583V37.5664H49.895V35.5583H56.1499Z"
+      fill="white"
+    />
+  </svg>
+);
+export default SvgOdf;