@fibery/ui-kit 1.38.0 → 1.38.1

package/src/file-item-2.tsx

@@ -0,0 +1,408 @@
+import {css, cx} from "@linaria/core";
+import {useCallback, useEffect, useState} from "react";
+import {ActionsMenu, ActionsMenuItem, ActionsMenuSeparator} from "./actions-menu";
+import {ActionsButtonCompact} from "./button/actions-button-compact";
+import {border, colors, space, themeVars} from "./design-system";
+import {makeButtonColors} from "./button/make-button-colors";
+import Delete from "./icons/react/Delete";
+import FileDownload from "./icons/react/FileDownload";
+import Link from "./icons/react/Link";
+import RicheditorOpenLink from "./icons/react/RicheditorOpenLink";
+import Spinner from "./icons/react/Spinner";
+import AppWiki from "./icons/react/AppWiki";
+import {copyToClipboard} from "./copy-to-clipboard";
+import {useToast} from "./toast/toast-provider";
+import {Icon} from "./icons/Icon";
+import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
+
+const fileItemStyle = css`
+  display: block;
+  height: 100%;
+  background-color: ${themeVars.transparent};
+  background-size: cover;
+  text-decoration: none;
+  border-radius: ${space.s8}px;
+  border: 1px solid ${themeVars.separatorColor};
+  background-clip: padding-box;
+  &:focus {
+    text-decoration: none;
+  }
+`;
+
+const overlayStyle = css`
+  width: 100%;
+  height: 100%;
+  padding: ${space.s8}px;
+  overflow: hidden;
+  color: ${themeVars.textColor};
+  border-radius: ${border.radius8}px;
+  cursor: pointer;
+  opacity: 0;
+`;
+
+const imageOverlayStyle = css`
+  background-size: 100% 200%;
+  background-position: 0 100%;
+  color: ${themeVars.transparent};
+  border-radius: ${border.radius6}px;
+  &:hover {
+    background-position: 0 0;
+    color: ${themeVars.inversedTextColor},
+  },
+`;
+
+const fileOverlayStyle = css`
+  opacity: 1;
+  background: transparent;
+`;
+
+export type FileItemType = {
+  name: string;
+  url: string;
+  downloadUrl?: string | null;
+  thumbnailUrl: string | null;
+  previewData: null | {
+    type: "image" | "video" | "iframe";
+    previewSrc: string | null;
+    originalSrc: string;
+  };
+  status?: string;
+};
+
+export type FileItemProps = {
+  data: FileItemType;
+  onRemoveClick?: (x: FileItemType) => void;
+  disabled?: boolean;
+};
+
+export function FileItem(props: FileItemProps) {
+  const {name, url, thumbnailUrl, status, previewData: preview} = props.data;
+  const isPending = status === "uploading" || status === "deleting";
+  const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
+  const [isActionsOpened, setIsActionsOpened] = useState(false);
+
+  const showFileIcon = !isPending && !isBackgroundReady;
+
+  const [zoomed, setZoomed] = useState(false);
+  const imagesRegistry = useImagesGalleryRegistry();
+  const galleryMethods = useImagesGalleryMethods();
+
+  useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
+    imagesRegistry.set(preview.originalSrc, {
+      type: preview.type,
+      src: preview.originalSrc,
+      zoomed: false,
+      setZoomed,
+    });
+  }, [imagesRegistry, preview]);
+
+  useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
+    if (zoomed) {
+      galleryMethods.setActivated(true);
+    }
+    const imageData = imagesRegistry.get(preview.originalSrc);
+    if (imageData) {
+      imageData.zoomed = zoomed;
+    } else {
+      imagesRegistry.set(preview.originalSrc, {
+        type: preview.type,
+        src: preview.originalSrc,
+        zoomed,
+        setZoomed,
+      });
+    }
+  }, [galleryMethods, zoomed, preview, imagesRegistry]);
+
+  const onContainerClick = useCallback(() => {
+    if (preview) {
+      setZoomed(true);
+    } else {
+      stratFileDownload(url, name);
+    }
+  }, [name, preview, url]);
+
+  return (
+    <div
+      className={cx(
+        css`
+          flex: 1 0 0;
+          height: 100%;
+        `,
+        isBackgroundReady &&
+          css`
+            &:hover .${overlayStyle} {
+              opacity: 1;
+              background-position: 0 0;
+              color: ${themeVars.inversedTextColor};
+              background-color: rgba(0, 0, 0, 0.6);
+            }
+          `,
+        isBackgroundReady &&
+          isActionsOpened &&
+          css`
+            .${overlayStyle} {
+              opacity: 1;
+              background-position: 0 0;
+              color: ${themeVars.inversedTextColor};
+              background-color: rgba(0, 0, 0, 0.6);
+            }
+          `
+      )}
+    >
+      <div
+        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+        onClick={onContainerClick}
+        className={cx(
+          css`
+            flex-shrink: 0;
+          `,
+          fileItemStyle,
+          isPending &&
+            css`
+              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+            `
+        )}
+      >
+        {isPending && (
+          <div
+            className={css`
+              display: flex;
+              flex-direction: column;
+              justify-content: center; /* centers vertically */
+              align-items: center; /* centers horizontally */
+              height: 100%;
+              width: 100%;
+            `}
+          >
+            <Spinner />
+          </div>
+        )}
+        {showFileIcon && (
+          <div className={cx(overlayStyle, fileOverlayStyle)}>
+            <div
+              className={css`
+                display: flex;
+                flex-direction: column;
+                justify-content: center; /* centers vertically */
+                align-items: center; /* centers horizontally */
+                height: 100%;
+                width: 100%;
+                padding-top: ${space.s1}px;
+                gap: ${space.s2}px;
+              `}
+            >
+              <Icon containerSize={40} iconSize={40}>
+                <AppWiki />
+              </Icon>
+              <div
+                className={css`
+                  align-content: center;
+
+                  display: flex;
+                  align-items: center;
+                  gap: 10px;
+                  flex-shrink: 0;
+                  color: ${themeVars.colorTextMenuItem};
+                  text-overflow: ellipsis;
+                  overflow: hidden;
+                `}
+              >
+                <FileTitle
+                  title={name}
+                  className={css`
+                    -webkit-line-clamp: 1;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  `}
+                />
+              </div>
+            </div>
+            <div
+              className={css`
+                position: absolute;
+                top: ${space.s8}px;
+                right: ${space.s8}px;
+              `}
+            >
+              <FileActionsMenu
+                setIsActionsOpened={setIsActionsOpened}
+                data={props.data}
+                disabled={props.disabled}
+                isBackgroundReady={isBackgroundReady}
+                onRemoveClick={props.onRemoveClick}
+              />
+            </div>
+          </div>
+        )}
+        {!isPending && !showFileIcon && (
+          <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
+            <div
+              className={css`
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between; /* Top + bottom placement */
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                box-sizing: border-box;
+                gap: ${space.s8}px;
+              `}
+            >
+              <div
+                className={css`
+                  align-self: flex-end;
+                `}
+              >
+                <FileActionsMenu
+                  setIsActionsOpened={setIsActionsOpened}
+                  data={props.data}
+                  disabled={props.disabled}
+                  isBackgroundReady={isBackgroundReady}
+                  onRemoveClick={props.onRemoveClick}
+                />
+              </div>
+              <div
+                className={css`
+                  display: flex;
+                  align-self: flex-start;
+                  align-items: flex-end;
+                  text-overflow: ellipsis;
+                  //overflow: hidden;
+                  box-sizing: border-box;
+
+                  color: ${themeVars.colorBgSidebar};
+                `}
+              >
+                <FileTitle title={name} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FileActionsMenu({
+  data,
+  disabled,
+  setIsActionsOpened,
+  onRemoveClick,
+  isBackgroundReady,
+}: {
+  data: FileItemType;
+  onRemoveClick?: (data: FileItemType) => void;
+  disabled?: boolean;
+  setIsActionsOpened: (val: boolean) => void;
+  isBackgroundReady: boolean;
+}) {
+  const toast = useToast();
+
+  return (
+    <ActionsMenu
+      onOpenChange={setIsActionsOpened}
+      trigger={
+        <ActionsButtonCompact
+          className={css`
+            z-index: 1;
+          `}
+          style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+        />
+      }
+    >
+      <ActionsMenuItem
+        Icon={Link}
+        onSelect={() => {
+          copyToClipboard(`${window.origin}${data.url}`)
+            .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>
+      <a href={data.url} target="_blank" rel="noopener noreferrer">
+        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
+      </a>
+      <a download={data.name} href={`${data.url}?attachment`}>
+        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+      </a>
+      <ActionsMenuSeparator />
+      <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
+        Delete
+      </ActionsMenuItem>
+    </ActionsMenu>
+  );
+}
+
+function FileTitle({title, className}: {title: string; className?: string}) {
+  return (
+    <div
+      className={cx(
+        css`
+          border-radius: ${border.radius4}px;
+          background: ${themeVars.badgeBgColor};
+          padding: ${space.s2}px ${space.s5}px;
+          height: 100%;
+          vertical-align: top;
+
+          text-align: center;
+          justify-content: center;
+
+          word-break: break-word;
+          overflow: hidden;
+          /* UI/Heading/H8 (reg-400, up) */
+          font-family: Inter;
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 125%; /* 12.5px */
+          text-transform: none;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+
+          &:hover {
+            text-decoration: none;
+            color: inherit;
+          }
+        `,
+        className
+      )}
+    >
+      {title}
+    </div>
+  );
+}
+
+function stratFileDownload(url: string, filename: string) {
+  const a = document.createElement("a");
+  a.href = `${url}?attachment`;
+  a.download = filename;
+  a.style.display = "none";
+
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+// const long = `long text long text long text long text long text long text long text long text long text long text long
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text
+// `;

package/src/file-item.tsx

@@ -10,6 +10,8 @@ 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";
 
 const fileItemStyle = css`
   ${{
@@ -67,10 +69,16 @@ const fileOverlayStyle = css`
 `;
 
 export type FileItemType = {
+  uid: string;
   name: string;
   url: string;
   thumbnailUrl: string | null;
-  previewUrl: string | null;
+  previewData: null | {
+    type: "image" | "video" | "iframe";
+    previewSrc: string | null;
+    originalSrc: string;
+  };
+  downloadUrl?: string | null;
   status?: string;
 };
 
@@ -78,26 +86,46 @@ export type FileItemProps = {
   data: FileItemType;
   onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
+  onRenameClick?: (p: {id: string; name: string}) => void;
 };
 
-function ImageZoom({thumbnailUrl, url}: {thumbnailUrl: string; url: string}) {
+function PreviewEntry({
+  preview,
+  actions,
+}: {
+  preview: {type: "image" | "video" | "iframe"; originalSrc: string; previewSrc: string | null};
+  actions: React.ReactNode;
+}) {
   const [zoomed, setZoomed] = useState(false);
   const imagesRegistry = useImagesGalleryRegistry();
   const galleryMethods = useImagesGalleryMethods();
+
   useEffect(() => {
-    imagesRegistry.set(thumbnailUrl, {zoomed: false, setZoomed});
-  }, [imagesRegistry, thumbnailUrl]);
+    imagesRegistry.set(preview.originalSrc, {
+      type: preview.type,
+      src: preview.originalSrc,
+      zoomed: false,
+      setZoomed,
+      actions,
+    });
+  }, [imagesRegistry, preview, actions]);
   useEffect(() => {
     if (zoomed) {
       galleryMethods.setActivated(true);
     }
-    const imageData = imagesRegistry.get(thumbnailUrl);
+    const imageData = imagesRegistry.get(preview.originalSrc);
     if (imageData) {
       imageData.zoomed = zoomed;
     } else {
-      imagesRegistry.set(thumbnailUrl, {zoomed, setZoomed});
+      imagesRegistry.set(preview.originalSrc, {
+        type: preview.type,
+        src: preview.originalSrc,
+        zoomed,
+        setZoomed,
+        actions,
+      });
     }
-  }, [galleryMethods, zoomed, thumbnailUrl, imagesRegistry]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, actions]);
   return (
     <div
       className={css`
@@ -105,7 +133,7 @@ function ImageZoom({thumbnailUrl, url}: {thumbnailUrl: string; url: string}) {
       `}
     >
       <Zoom
-        zoomImg={{src: url}}
+        zoomImg={preview.previewSrc ? {src: preview.previewSrc} : undefined}
         openOnClick={true}
         className={css`
           position: absolute;
@@ -119,7 +147,7 @@ function ImageZoom({thumbnailUrl, url}: {thumbnailUrl: string; url: string}) {
         zoomed={zoomed}
         onZoomedChange={setZoomed}
       >
-        <div role="img" style={{backgroundImage: `url(${thumbnailUrl})`, outline: "none"}} />
+        <div role="img" style={{backgroundImage: `url(${preview.previewSrc})`, outline: "none"}} />
       </Zoom>
       <Tooltip title={"Zoom in"}>
         <IconButton
@@ -152,7 +180,7 @@ export class FileItem extends PureComponent<FileItemProps> {
   }
 
   render() {
-    const {name, url, thumbnailUrl, status, previewUrl} = this.props.data;
+    const {name, url, thumbnailUrl, status, previewData} = this.props.data;
     const isActive = status === "uploading" || status === "deleting";
     const isBackgroundReady = thumbnailUrl && !isActive;
     return (
@@ -210,7 +238,21 @@ export class FileItem extends PureComponent<FileItemProps> {
                     gap: ${space.s4}px;
                   `}
                 >
-                  {previewUrl ? <ImageZoom url={url} thumbnailUrl={previewUrl} /> : null}
+                  {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
@@ -221,9 +263,18 @@ export class FileItem extends PureComponent<FileItemProps> {
                       />
                     }
                   >
-                    <a download={name} href={url}>
+                    <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

package/src/header-layout.tsx

@@ -1,14 +1,22 @@
 import {css} from "@linaria/core";
 import {ReactNode} from "react";
 import {space, textStyles, themeVars} from "./design-system";
+import {mobileRootSelector} from "./mobile-styles";
 
 const containerStyle = css`
   padding: ${space.s8}px;
+  display: flex;
+  align-items: center;
   border-bottom: 1px solid ${themeVars.separatorColor};
+  ${mobileRootSelector} & {
+    padding: ${space.s12}px;
+    min-height: ${space.s60}px;
+  }
 `;
 
 const topGridCompactStyle = css`
   ${textStyles.regular}
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,6 +30,9 @@ export function HeaderLayout({actions, children}: {actions?: ReactNode; children
           className={css`
             ${textStyles.heading4}
             position: relative;
+            ${mobileRootSelector} & {
+              ${textStyles.heading3}
+            }
           `}
         >
           {children}

package/src/html-styles.ts

@@ -3,6 +3,7 @@ import {css} from "@linaria/core";
 import {
   border,
   fontFamily,
+  fontSize,
   fontWeight,
   lineHeight,
   space,
@@ -11,6 +12,7 @@ import {
   transition,
   typeSizes,
 } from "./design-system";
+import {mobileRootSelector} from "./mobile-styles";
 
 export const linkStyles = {
   color: themeVars.linkColor,
@@ -252,7 +254,10 @@ const htmlStyles = {
  Used in comments and view descriptions
  */
 const smallHtmlStyles = {
-  fontSize: typeSizes[4],
+  fontSize: fontSize.xs,
+  [`${mobileRootSelector} &`]: {
+    fontSize: fontSize.md,
+  },
   "& h1": {
     fontFamily,
     fontSize: 24,
@@ -453,11 +458,12 @@ const smallHtmlStyles = {
 /*
  Used in chat
  */
-/*
- Used in chat
- */
+
 const chatHtmlStyles = {
   fontSize: typeSizes[4],
+  [`${mobileRootSelector} &`]: {
+    fontSize: typeSizes[3],
+  },
   "& h1": {
     fontFamily,
     fontSize: 20,
@@ -549,6 +555,9 @@ const chatHtmlStyles = {
     paddingBottom: space.s2,
     ...textStyles.regular,
     lineHeight: lineHeight.text,
+    [`${mobileRootSelector} &`]: {
+      ...textStyles.big,
+    },
   },
   "& .fibery-rich-text-check-item": {
     marginTop: space.s2,

package/src/icons/ast/Back.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const Back: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M9.546 15.584a.8.8 0 0 1-1.13-.037l-5-5.343a.8.8 0 0 1 .01-1.104l5-5.157a.8.8 0 0 1 1.148 1.114l-3.684 3.8H16a.8.8 0 0 1 0 1.6H5.844l3.74 3.996a.8.8 0 0 1-.038 1.131Z"},"children":[]}],"metadata":""}]},"name":"back"};
+const Back: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.47 5.22a.75.75 0 0 1 1.06 1.06L5.56 9.25h10.69a.75.75 0 0 1 0 1.5H5.56l2.97 2.97a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.748.748 0 0 1 0-1.06l4.25-4.25Z"},"children":[]}],"metadata":""}]},"name":"back"};
 
 export default Back;

package/src/icons/ast/ExtensionFiles.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const ExtensionFiles: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M16.824 9.897a.75.75 0 1 0-1.061-1.06l1.06 1.06Zm-6.657 5.596-.53-.53.53.53Zm-2.83 1.173v.75-.75Zm-4.003-4.003h-.75.75Zm1.173-2.83.53.53-.53-.53Zm6.126-6.126-.53-.53.53.53Zm1.887-.782v.75-.75Zm1.887 4.555.53.53-.53-.53Zm-6.134 6.127-.53-.53.53.53ZM6.387 11.72l-.53-.53.53.53Zm6.19-5.123a.75.75 0 0 0-1.06-1.06l1.06 1.06Zm3.186 2.24-6.127 6.126 1.061 1.06 6.127-6.126-1.061-1.06Zm-6.127 6.126c-.61.61-1.437.953-2.3.953v1.5c1.261 0 2.47-.501 3.361-1.392l-1.06-1.06Zm-2.3.953c-.862 0-1.69-.343-2.299-.953l-1.06 1.06a4.752 4.752 0 0 0 3.36 1.393v-1.5Zm-2.299-.953a3.252 3.252 0 0 1-.953-2.3h-1.5c0 1.26.501 2.47 1.392 3.36l1.061-1.06Zm-.953-2.3c0-.862.343-1.69.953-2.3l-1.06-1.06a4.752 4.752 0 0 0-1.393 3.36h1.5Zm.953-2.3 6.127-6.126-1.061-1.06-6.127 6.126 1.061 1.06Zm6.127-6.126c.36-.36.847-.562 1.356-.562v-1.5c-.906 0-1.776.36-2.417 1.001l1.06 1.061Zm1.356-.562c.509 0 .997.202 1.356.562l1.061-1.06a3.418 3.418 0 0 0-2.417-1.002v1.5Zm1.356.562c.36.36.562.848.562 1.356h1.5c0-.906-.36-1.776-1.001-2.417l-1.06 1.061Zm.562 1.356c0 .51-.202.997-.562 1.357l1.061 1.06a3.418 3.418 0 0 0 1.001-2.417h-1.5Zm-.561 1.356-6.134 6.127 1.06 1.061 6.134-6.126-1.06-1.062Zm-6.134 6.127a.584.584 0 0 1-.413.171v1.5c.553 0 1.083-.22 1.474-.61l-1.061-1.06Zm-.413.171a.584.584 0 0 1-.413-.17l-1.06 1.06c.39.39.92.61 1.473.61v-1.5Zm-.413-.17a.584.584 0 0 1-.171-.414h-1.5c0 .553.22 1.083.61 1.474l1.061-1.06Zm-.171-.414c0-.155.061-.303.171-.413l-1.06-1.06c-.392.39-.611.92-.611 1.473h1.5Zm.17-.412 5.66-5.654-1.06-1.06-5.66 5.653 1.06 1.06Z"},"children":[]}],"metadata":""}]},"name":"extension-files"};
+const ExtensionFiles: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.03 6.032c0-.695-.294-1.362-.817-1.854a2.886 2.886 0 0 0-1.974-.767c-.647 0-1.271.212-1.768.594l-.205.173-5.427 5.097c-.855.803-1.336 1.893-1.336 3.03 0 1.136.48 2.225 1.336 3.029a4.718 4.718 0 0 0 3.226 1.255l.226-.006a4.705 4.705 0 0 0 3-1.25l5.426-5.096a.786.786 0 0 1 1.063 0 .676.676 0 0 1 0 .998l-5.426 5.096c-1.067 1.002-2.49 1.592-3.988 1.662l-.3.007c-1.61 0-3.152-.6-4.29-1.669C2.64 15.263 2 13.815 2 12.304c0-1.51.64-2.959 1.777-4.027l5.426-5.096.155-.138A4.454 4.454 0 0 1 12.239 2a4.44 4.44 0 0 1 3.036 1.18 3.913 3.913 0 0 1 1.258 2.852l-.005.2a3.923 3.923 0 0 1-1.253 2.65L9.85 13.98a2.595 2.595 0 0 1-1.535.683l-.249.011c-.669 0-1.31-.25-1.783-.694a2.299 2.299 0 0 1-.74-1.675c0-.628.267-1.23.74-1.675l5.426-5.096a.787.787 0 0 1 1.062 0 .676.676 0 0 1 0 .998l-5.426 5.096a.93.93 0 0 0-.3.677.93.93 0 0 0 .3.678c.191.179.45.28.721.28l.101-.005a1.05 1.05 0 0 0 .62-.275l5.427-5.097c.458-.43.74-.994.804-1.594l.014-.26Z"},"children":[]}],"metadata":""}]},"name":"extension-files"};
 
 export default ExtensionFiles;

package/src/icons/ast/FileUpload.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const FileUpload: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 48 48"},"children":[{"type":"element","tagName":"path","properties":{"d":"M42 30v7.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C39.72 42 38.88 42 37.2 42H10.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C6 39.72 6 38.88 6 37.2V30M34 16 24 6 14 16M24 6v24","stroke":"#6E7A83","strokeWidth":3,"strokeLinecap":"round","strokeLinejoin":"round","fill":"none"},"children":[]}],"metadata":""}]},"name":"file-upload"};
+const FileUpload: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"m13.029 10.72-2.499-2.5a.75.75 0 0 0-1.06 0l-2.499 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v3.94a.75.75 0 1 0 1.499 0v-3.94l1.219 1.22a.75.75 0 1 0 1.06-1.06Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.745 1.5a2.75 2.75 0 0 0-2.748 2.75v11.5a2.75 2.75 0 0 0 2.748 2.75h8.503a2.75 2.75 0 0 0 2.749-2.75V6.747c0-.2-.08-.39-.22-.531l-4.505-4.497a.75.75 0 0 0-.53-.219H5.745Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h5.248v2.913a1.584 1.584 0 0 0 1.582 1.584h2.922v8.253c0 .69-.56 1.25-1.25 1.25H5.746c-.69 0-1.25-.56-1.25-1.25V4.25Zm9.94 1.747-1.943-1.94v1.856a.083.083 0 0 0 .083.084h1.86Z"},"children":[]}],"metadata":""}]},"name":"file-upload"};
 
 export default FileUpload;