@fibery/ui-kit 1.38.1 → 1.38.2

package/src/file-item.tsx

@@ -1,17 +1,18 @@
 import {css, cx} from "@linaria/core";
-import {PureComponent, useEffect, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import {ActionsMenu, ActionsMenuItem} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
 import {Item} from "./item";
 import {border, colors, fontWeight, space, textStyles, themeVars} from "./design-system";
 import {makeButtonColors} from "./button/make-button-colors";
-import {IconButton} from "./button/icon-button";
-import ZoomIn from "./icons/react/RicheditorImageZoom";
-import {Tooltip} from "./tooltip";
-import {Zoom} from "./images-gallery/zoom";
 import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
 import FileDownload from "./icons/react/FileDownload";
 import RicheditorOpenLink from "./icons/react/RicheditorOpenLink";
+import Delete from "./icons/react/Delete";
+import Link from "./icons/react/Link";
+import Pencil from "./icons/react/Pencil";
+import {copyToClipboard} from "./copy-to-clipboard";
+import {useToast} from "./toast/toast-provider";
 
 const fileItemStyle = css`
   ${{
@@ -77,6 +78,7 @@ export type FileItemType = {
     type: "image" | "video" | "iframe";
     previewSrc: string | null;
     originalSrc: string;
+    contentType: string;
   };
   downloadUrl?: string | null;
   status?: string;
@@ -89,27 +91,38 @@ export type FileItemProps = {
   onRenameClick?: (p: {id: string; name: string}) => void;
 };
 
-function PreviewEntry({
-  preview,
-  actions,
-}: {
-  preview: {type: "image" | "video" | "iframe"; originalSrc: string; previewSrc: string | null};
-  actions: React.ReactNode;
-}) {
+export function FileItem(props: FileItemProps) {
+  const {name, url, thumbnailUrl, status, previewData: preview} = props.data;
+  const isActive = status === "uploading" || status === "deleting";
+  const isBackgroundReady = thumbnailUrl && !isActive;
+
   const [zoomed, setZoomed] = useState(false);
   const imagesRegistry = useImagesGalleryRegistry();
   const galleryMethods = useImagesGalleryMethods();
 
   useEffect(() => {
+    if (!preview) {
+      return undefined;
+    }
+
     imagesRegistry.set(preview.originalSrc, {
       type: preview.type,
       src: preview.originalSrc,
+      contentType: preview.contentType,
       zoomed: false,
       setZoomed,
-      actions,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
     });
-  }, [imagesRegistry, preview, actions]);
+    return () => {
+      imagesRegistry.delete(preview.originalSrc);
+    };
+  }, [imagesRegistry, name, preview]);
+
   useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
     if (zoomed) {
       galleryMethods.setActivated(true);
     }
@@ -120,200 +133,170 @@ function PreviewEntry({
       imagesRegistry.set(preview.originalSrc, {
         type: preview.type,
         src: preview.originalSrc,
+        contentType: preview.contentType,
         zoomed,
         setZoomed,
-        actions,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, actions]);
-  return (
-    <div
-      className={css`
-        position: relative;
-      `}
-    >
-      <Zoom
-        zoomImg={preview.previewSrc ? {src: preview.previewSrc} : undefined}
-        openOnClick={true}
-        className={css`
-          position: absolute;
-          outline: none;
-          bottom: 0;
-          top: 0;
-          left: 0;
-          right: 0;
-          cursor: zoom-in;
-        `}
-        zoomed={zoomed}
-        onZoomedChange={setZoomed}
-      >
-        <div role="img" style={{backgroundImage: `url(${preview.previewSrc})`, outline: "none"}} />
-      </Zoom>
-      <Tooltip title={"Zoom in"}>
-        <IconButton
-          style={makeButtonColors(colors.inversedTextColor, "ghost")}
-          onClick={() => setZoomed(true)}
-          size={"small"}
-          supportMobile={true}
-        >
-          <ZoomIn />
-        </IconButton>
-      </Tooltip>
-    </div>
-  );
-}
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
 
-export class FileItem extends PureComponent<FileItemProps> {
-  _renderStatus() {
-    const {status} = this.props.data;
-    if (status === "done" || status === "remove-error") {
-      return "";
-    }
-    let statusText = `status=${status}`;
-    if (status === "deleting") {
-      statusText = "Deleting…";
-    }
-    if (status === "uploading") {
-      statusText = "Uploading…";
+  const onContainerClick = useCallback(() => {
+    if (preview) {
+      setZoomed(true);
+    } else {
+      const a = document.createElement("a");
+      a.href = `${url}?attachment`;
+      a.download = name;
+      a.style.display = "none";
+
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
     }
-    return <b>{statusText}</b>;
-  }
+  }, [name, preview, url]);
 
-  render() {
-    const {name, url, thumbnailUrl, status, previewData} = this.props.data;
-    const isActive = status === "uploading" || status === "deleting";
-    const isBackgroundReady = thumbnailUrl && !isActive;
-    return (
+  return (
+    <div
+      className={cx(
+        css`
+          position: relative;
+          height: 100%;
+          cursor: pointer;
+        `,
+        isBackgroundReady &&
+          css`
+            &:hover .${overlayStyle} {
+              background-position: 0 0;
+              color: ${themeVars.inversedTextColor};
+            }
+          `
+      )}
+    >
+      {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
       <div
+        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+        onClick={onContainerClick}
         className={cx(
-          css`
-            position: relative;
-            height: 100%;
-          `,
-          isBackgroundReady &&
+          fileItemStyle,
+          isActive &&
             css`
-              &:hover .${overlayStyle} {
-                background-position: 0 0;
-                color: ${themeVars.inversedTextColor};
-              }
+              ${{backgroundColor: themeVars.entityCardSelectedColor}}
             `
         )}
       >
-        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-        <a
-          href={url}
-          className={css`
-            &::before {
-              bottom: 0;
-              content: "";
-              display: block;
-              left: 0;
-              position: absolute;
-              right: 0;
-              top: 0;
-            }
-          `}
-          rel="noopener noreferrer nofollow"
-          target="_blank"
-        />
-        <div
-          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
-          className={cx(
-            fileItemStyle,
-            isActive &&
-              css`
-                ${{backgroundColor: themeVars.entityCardSelectedColor}}
-              `
-          )}
-        >
-          <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
-            <Item
-              multiline
-              textClassName={nameStyle}
-              rightContainer={
-                <div
-                  className={css`
-                    display: flex;
-                    align-items: center;
-                    gap: ${space.s4}px;
-                  `}
-                >
-                  {previewData ? (
-                    <PreviewEntry
-                      preview={previewData}
-                      actions={
-                        <>
-                          <a href={url} target="_blank" rel="noopener noreferrer">
-                            <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
-                          </a>
-                          <a download={name} href={`${url}/attachment`}>
-                            <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
-                          </a>
-                        </>
-                      }
-                    />
-                  ) : null}
-                  <ActionsMenu
-                    trigger={
-                      <ActionsButtonCompact
-                        className={css`
-                          z-index: 1;
-                        `}
-                        style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
-                      />
-                    }
-                  >
-                    <a download={name} href={this.props.data.downloadUrl ?? url}>
-                      <ActionsMenuItem>Download</ActionsMenuItem>
-                    </a>
-                    {this.props.onRenameClick && status === "done" ? (
-                      <ActionsMenuItem
-                        onSelect={() =>
-                          this.props.onRenameClick?.({id: this.props.data.uid, name: this.props.data.name})
-                        }
-                      >
-                        Rename
-                      </ActionsMenuItem>
-                    ) : null}
-                    <ActionsMenuItem
-                      onSelect={() => this.props.onRemoveClick?.(this.props.data)}
-                      dangerous
-                      disabled={this.props.disabled}
-                    >
-                      Delete
-                    </ActionsMenuItem>
-                  </ActionsMenu>
-                </div>
-              }
-            >
+        <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
+          <Item
+            multiline
+            textClassName={nameStyle}
+            rightContainer={
               <div
                 className={css`
-                  ${fontWeight}
+                  display: flex;
+                  align-items: center;
+                  gap: ${space.s4}px;
                 `}
               >
-                {this._renderStatus()}
-              </div>
-              <a
-                className={css`
-                  position: relative;
-                  z-index: 1;
-                  color: inherit;
-                  text-decoration: none;
-                  &:hover {
-                    text-decoration: none;
-                    color: inherit;
+                <ActionsMenu
+                  trigger={
+                    <ActionsButtonCompact
+                      className={css`
+                        z-index: 1;
+                      `}
+                      style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+                    />
                   }
-                `}
-                href={url}
-                target={"_blank"}
-                rel="noreferrer"
-              >
-                {name}
-              </a>
-            </Item>
-          </div>
+                >
+                  <CopyFileUrlActionMenuItem url={url} />
+                  <a href={url} target="_blank" rel="noopener noreferrer">
+                    <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
+                  </a>
+                  <a download={name} href={props.data.downloadUrl ?? url}>
+                    <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+                  </a>
+                  {props.onRenameClick && status === "done" ? (
+                    <ActionsMenuItem
+                      Icon={Pencil}
+                      onSelect={() => props.onRenameClick?.({id: props.data.uid, name: props.data.name})}
+                    >
+                      Rename
+                    </ActionsMenuItem>
+                  ) : null}
+                  <ActionsMenuItem
+                    Icon={Delete}
+                    onSelect={() => props.onRemoveClick?.(props.data)}
+                    dangerous
+                    disabled={props.disabled}
+                  >
+                    Delete
+                  </ActionsMenuItem>
+                </ActionsMenu>
+              </div>
+            }
+          >
+            <div
+              className={css`
+                ${fontWeight}
+              `}
+            >
+              <b>{resolveStatusText(props.data.status)}</b>
+            </div>
+            <span
+              className={css`
+                position: relative;
+                z-index: 1;
+                color: inherit;
+                text-decoration: none;
+              `}
+            >
+              {name}
+            </span>
+          </Item>
         </div>
       </div>
-    );
+    </div>
+  );
+}
+
+function CopyFileUrlActionMenuItem({url}: {url: string}) {
+  const toast = useToast();
+  return (
+    <ActionsMenuItem
+      Icon={Link}
+      onSelect={() => {
+        copyToClipboard(new URL(url, `${window.location}`).href)
+          .then(() => toast.success({title: "Link copied to clipboard"}))
+          .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
+      }}
+    >
+      Copy file URL
+    </ActionsMenuItem>
+  );
+}
+
+function resolveStatusText(status?: string) {
+  if (status === "done" || status === "remove-error") {
+    return "";
+  }
+  let statusText = `status=${status}`;
+  if (status === "deleting") {
+    statusText = "Deleting…";
   }
+  if (status === "uploading") {
+    statusText = "Uploading…";
+  }
+  return statusText;
+}
+
+function FilePreviewActions({url, name}: {url: string; name: string}) {
+  return (
+    <>
+      <a href={url} target="_blank" rel="noopener noreferrer">
+        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
+      </a>
+      <a download={name} href={`${url}/attachment`}>
+        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+      </a>
+    </>
+  );
 }

package/src/icons/ast/FileArchive.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileArchive: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.75 2A2.25 2.25 0 0 1 17 4.25v11.5A2.25 2.25 0 0 1 14.75 18h-9.5A2.25 2.25 0 0 1 3 15.75V4.25A2.25 2.25 0 0 1 5.25 2h9.5Zm-9.5 1.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75h-9.5Zm8 1.5a.75.75 0 0 1 0 1.5H11a1 1 0 0 1-2 0H6.75a.75.75 0 0 1 0-1.5h6.5Z"},"children":[]}],"metadata":""}]},"name":"file-archive"};
+
+export default FileArchive;

package/src/icons/ast/FileBroken.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileBroken: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.742 1.5a.75.75 0 0 1 .53.219l4.504 4.497c.141.14.221.332.221.531v9.003a2.75 2.75 0 0 1-2.749 2.75H5.745a2.749 2.749 0 0 1-2.748-2.75V4.25c0-1.519 1.23-2.75 2.748-2.75h5.997ZM5.745 3c-.69 0-1.249.56-1.249 1.25v11.5c0 .69.56 1.25 1.25 1.25h8.502c.69 0 1.25-.56 1.25-1.25V7.497h-2.923a1.583 1.583 0 0 1-1.582-1.584V3H5.745Zm5.975 6.22a.75.75 0 1 1 1.06 1.06L11.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L10 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L8.94 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06L10 10.94l1.72-1.72Zm.772-3.307a.084.084 0 0 0 .083.084h1.86l-1.943-1.94v1.856Z"},"children":[]}],"metadata":""}]},"name":"file-broken"};
+
+export default FileBroken;

package/src/icons/ast/FileDocument.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileDocument: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.742 1.5a.75.75 0 0 1 .53.219l4.504 4.497c.141.14.221.332.221.531v9.003a2.75 2.75 0 0 1-2.749 2.75H5.745a2.749 2.749 0 0 1-2.748-2.75V4.25c0-1.519 1.23-2.75 2.748-2.75h5.997ZM5.745 3c-.69 0-1.249.56-1.249 1.25v11.5c0 .69.56 1.25 1.25 1.25h8.502c.69 0 1.25-.56 1.25-1.25V7.497h-2.923a1.583 1.583 0 0 1-1.582-1.584V3H5.745Zm6.505 10a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5h5.5Zm-2-3a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5h3.5Zm2.242-4.087a.084.084 0 0 0 .083.084h1.86l-1.943-1.94v1.856Z"},"children":[]}],"metadata":""}]},"name":"file-document"};
+
+export default FileDocument;

package/src/icons/ast/FileImage.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileImage: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 16 14"},"children":[{"type":"element","tagName":"path","properties":{"d":"M13.75 0A2.25 2.25 0 0 1 16 2.25v9.5A2.25 2.25 0 0 1 13.75 14H2.25A2.25 2.25 0 0 1 0 11.75v-9.5A2.25 2.25 0 0 1 2.25 0h11.5ZM2.25 1.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H2.25Zm9.896 8.646a.5.5 0 0 1-.353.854H4.207a.5.5 0 0 1-.353-.854L6 8l1 1 2-2 3.146 3.146ZM12 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"},"children":[]}],"metadata":""}]},"name":"file-image"};
+
+export default FileImage;

package/src/icons/ast/FilePresentation.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FilePresentation: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"m12.762 16.572.056.063a.851.851 0 0 1-.056 1.12.806.806 0 0 1-1.096.058l-.062-.058-1.603-1.64-1.604 1.64a.805.805 0 0 1-1.156 0 .85.85 0 0 1 0-1.183L8.778 15H4.25A2.25 2.25 0 0 1 2 12.75v-7.5A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v7.5A2.25 2.25 0 0 1 15.75 15h-4.526l1.538 1.572ZM4.25 4.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75H4.25ZM10 9h2a2 2 0 1 1-2-2v2Z"},"children":[]}],"metadata":""}]},"name":"file-presentation"};
+
+export default FilePresentation;

package/src/icons/ast/FileTable.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileTable: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.742 1.5a.75.75 0 0 1 .53.219l4.504 4.497c.141.14.221.332.221.531v3.194L17 10c0 .02-.002.039-.003.058v3.883L17 14c0 .02-.002.039-.003.058v1.692a2.75 2.75 0 0 1-2.749 2.75H5.745a2.749 2.749 0 0 1-2.748-2.75V4.25c0-1.519 1.23-2.75 2.748-2.75h5.997ZM8.75 17h5.498c.69 0 1.25-.56 1.25-1.25v-1H8.75V17Zm-4.254-1.25c0 .69.56 1.25 1.25 1.25H7.25v-2.25H4.496v1Zm4.254-2.5h6.747v-2.5H8.75v2.5Zm-4.254 0H7.25v-2.5H4.496v2.5ZM5.746 3c-.69 0-1.25.56-1.25 1.25v5h11.001V7.497h-2.922a1.583 1.583 0 0 1-1.582-1.584V3H5.745Zm6.746 2.913a.084.084 0 0 0 .083.084h1.86l-1.943-1.94v1.856Z"},"children":[]}],"metadata":""}]},"name":"file-table"};
+
+export default FileTable;

package/src/icons/ast/FileVideo.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FileVideo: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.75 4A2.25 2.25 0 0 1 18 6.25v7.5A2.25 2.25 0 0 1 15.75 16H4.25A2.25 2.25 0 0 1 2 13.75v-7.5A2.25 2.25 0 0 1 4.25 4h11.5ZM4.25 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75H4.25ZM7.5 7.809a.5.5 0 0 1 .724-.448l4.381 2.192a.5.5 0 0 1 0 .894l-4.381 2.19a.5.5 0 0 1-.724-.446V7.81Z"},"children":[]}],"metadata":""}]},"name":"file-video"};
+
+export default FileVideo;

package/src/icons/ast/index.tsx

@@ -129,8 +129,15 @@ export { default as FiberyMono } from './FiberyMono';
 export { default as FieldUnit } from './FieldUnit';
 export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
+export { default as FileArchive } from './FileArchive';
+export { default as FileBroken } from './FileBroken';
+export { default as FileDocument } from './FileDocument';
 export { default as FileDownload } from './FileDownload';
+export { default as FileImage } from './FileImage';
+export { default as FilePresentation } from './FilePresentation';
+export { default as FileTable } from './FileTable';
 export { default as FileUpload } from './FileUpload';
+export { default as FileVideo } from './FileVideo';
 export { default as Filter } from './Filter';
 export { default as FitToScreen } from './FitToScreen';
 export { default as FocusModeOff } from './FocusModeOff';

package/src/icons/react/FileArchive.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileArchiveSvg from '../ast/FileArchive';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileArchive = forwardRef<SVGSVGElement, IconBaseProps>(function FileArchive(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileArchiveSvg} />});
+
+export default FileArchive;

package/src/icons/react/FileBroken.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileBrokenSvg from '../ast/FileBroken';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileBroken = forwardRef<SVGSVGElement, IconBaseProps>(function FileBroken(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileBrokenSvg} />});
+
+export default FileBroken;

package/src/icons/react/FileDocument.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileDocumentSvg from '../ast/FileDocument';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileDocument = forwardRef<SVGSVGElement, IconBaseProps>(function FileDocument(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileDocumentSvg} />});
+
+export default FileDocument;

package/src/icons/react/FileImage.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileImageSvg from '../ast/FileImage';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileImage = forwardRef<SVGSVGElement, IconBaseProps>(function FileImage(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileImageSvg} />});
+
+export default FileImage;

package/src/icons/react/FilePresentation.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FilePresentationSvg from '../ast/FilePresentation';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FilePresentation = forwardRef<SVGSVGElement, IconBaseProps>(function FilePresentation(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FilePresentationSvg} />});
+
+export default FilePresentation;

package/src/icons/react/FileTable.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileTableSvg from '../ast/FileTable';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileTable = forwardRef<SVGSVGElement, IconBaseProps>(function FileTable(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileTableSvg} />});
+
+export default FileTable;

package/src/icons/react/FileVideo.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import FileVideoSvg from '../ast/FileVideo';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FileVideo = forwardRef<SVGSVGElement, IconBaseProps>(function FileVideo(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={FileVideoSvg} />});
+
+export default FileVideo;

package/src/icons/react/index.tsx

@@ -129,8 +129,15 @@ export { default as FiberyMono } from './FiberyMono';
 export { default as FieldUnit } from './FieldUnit';
 export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
+export { default as FileArchive } from './FileArchive';
+export { default as FileBroken } from './FileBroken';
+export { default as FileDocument } from './FileDocument';
 export { default as FileDownload } from './FileDownload';
+export { default as FileImage } from './FileImage';
+export { default as FilePresentation } from './FilePresentation';
+export { default as FileTable } from './FileTable';
 export { default as FileUpload } from './FileUpload';
+export { default as FileVideo } from './FileVideo';
 export { default as Filter } from './Filter';
 export { default as FitToScreen } from './FitToScreen';
 export { default as FocusModeOff } from './FocusModeOff';

package/src/icons/svg/file-archive.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M14.75 2C15.9926 2 17 3.0074 17 4.25V15.75C17 16.9926 15.9926 18 14.75 18H5.25C4.00736 18 3 16.9926 3 15.75V4.25C3 3.0074 4.00736 2 5.25 2H14.75ZM5.25 3.5C4.83579 3.5 4.5 3.8358 4.5 4.25V15.75C4.5 16.1642 4.83579 16.5 5.25 16.5H14.75C15.1642 16.5 15.5 16.1642 15.5 15.75V4.25C15.5 3.8358 15.1642 3.5 14.75 3.5H5.25ZM13.25 5C13.6642 5 14 5.33579 14 5.75C14 6.16421 13.6642 6.5 13.25 6.5H11C11 6.63132 10.9741 6.76149 10.9238 6.88281C10.8736 7.00409 10.7999 7.11421 10.707 7.20703C10.6142 7.29986 10.5041 7.37357 10.3828 7.42383C10.2615 7.47408 10.1313 7.5 10 7.5C9.86868 7.5 9.73851 7.47408 9.61719 7.42383C9.49591 7.37357 9.38579 7.29986 9.29297 7.20703C9.20014 7.11421 9.12643 7.00409 9.07617 6.88281C9.02592 6.76149 9 6.63132 9 6.5H6.75C6.33579 6.5 6 6.16421 6 5.75C6 5.33579 6.33579 5 6.75 5H13.25Z" />
+</svg>

package/src/icons/svg/file-broken.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M11.7422 1.5C11.9405 1.5 12.131 1.5787 12.2715 1.71875L16.7764 6.21582C16.9173 6.35652 16.9971 6.54787 16.9971 6.74707V15.75C16.9971 17.2687 15.766 18.4999 14.248 18.5H5.74512C4.22716 18.4999 2.99708 17.2687 2.99707 15.75V4.25C2.99707 2.73127 4.22713 1.50008 5.74512 1.5H11.7422ZM5.74512 3C5.05516 3.00008 4.49609 3.55969 4.49609 4.25V15.75C4.4961 16.4403 5.05519 16.9999 5.74512 17H14.248C14.938 16.9999 15.4971 16.4403 15.4971 15.75V7.49707H12.5752C12.1555 7.49702 11.7528 7.33009 11.4561 7.0332C11.1593 6.73627 10.9932 6.33301 10.9932 5.91309V3H5.74512ZM11.7197 9.21973C12.0126 8.92684 12.4874 8.92683 12.7803 9.21973C13.0732 9.51262 13.0732 9.98738 12.7803 10.2803L11.0605 12L12.7803 13.7197C13.0732 14.0126 13.0732 14.4874 12.7803 14.7803C12.4874 15.0732 12.0126 15.0732 11.7197 14.7803L10 13.0605L8.28027 14.7803C7.98738 15.0732 7.51262 15.0732 7.21973 14.7803C6.92683 14.4874 6.92683 14.0126 7.21973 13.7197L8.93945 12L7.21973 10.2803C6.92683 9.98738 6.92683 9.51262 7.21973 9.21973C7.51262 8.92683 7.98738 8.92683 8.28027 9.21973L10 10.9395L11.7197 9.21973ZM12.4922 5.91309C12.4922 5.93519 12.501 5.95703 12.5166 5.97266C12.5322 5.98808 12.5533 5.99702 12.5752 5.99707H14.4346L12.4922 4.05762V5.91309Z" />
+</svg>

package/src/icons/svg/file-document.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M11.7422 1.5C11.9405 1.5 12.131 1.5787 12.2715 1.71875L16.7764 6.21582C16.9173 6.35652 16.9971 6.54787 16.9971 6.74707V15.75C16.9971 17.2687 15.766 18.4999 14.248 18.5H5.74512C4.22716 18.4999 2.99708 17.2687 2.99707 15.75V4.25C2.99707 2.73127 4.22713 1.50008 5.74512 1.5H11.7422ZM5.74512 3C5.05516 3.00008 4.49609 3.55969 4.49609 4.25V15.75C4.4961 16.4403 5.05519 16.9999 5.74512 17H14.248C14.938 16.9999 15.4971 16.4403 15.4971 15.75V7.49707H12.5752C12.1555 7.49702 11.7528 7.33009 11.4561 7.0332C11.1593 6.73627 10.9932 6.33301 10.9932 5.91309V3H5.74512ZM12.25 13C12.6642 13 13 13.3358 13 13.75C13 14.1642 12.6642 14.5 12.25 14.5H6.75C6.33579 14.5 6 14.1642 6 13.75C6 13.3358 6.33579 13 6.75 13H12.25ZM10.25 10C10.6642 10 11 10.3358 11 10.75C11 11.1642 10.6642 11.5 10.25 11.5H6.75C6.33579 11.5 6 11.1642 6 10.75C6 10.3358 6.33579 10 6.75 10H10.25ZM12.4922 5.91309C12.4922 5.93519 12.501 5.95703 12.5166 5.97266C12.5322 5.98808 12.5533 5.99702 12.5752 5.99707H14.4346L12.4922 4.05762V5.91309Z" />
+</svg>