@fibery/ui-kit 1.42.0 → 2.0.1

package/src/file-item.tsx

@@ -1,322 +1,365 @@
 import {css, cx} from "@linaria/core";
-import {useCallback, useEffect, useState} from "react";
-import {ActionsMenu, ActionsMenuItem} from "./actions-menu";
+import {CSSProperties, useState} from "react";
+import {ActionsMenu} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
-import {Item} from "./item";
-import {border, fontWeight, space, textStyles, themeVars} from "./design-system";
+import {border, fontSize, fontWeight, lineHeight, space, themeVars} from "./design-system";
 import {makeButtonColors} from "./button/make-button-colors";
 import {useTheme} from "./theme-provider";
-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";
-import {isPhoneApp} from "./use-is-phone";
+import Spinner from "./icons/react/Spinner";
+import {Icon} from "./icons/Icon";
+import {FileIcon} from "./file-item/file-icon";
+import {FileMenuItems} from "./file-item/file-menu-items";
+import {UploadFileWithContent} from "./file-item/types";
+import {FileTitle as FileTitleInner} from "./file-item/file-title";
 
 const fileItemStyle = css`
-  ${{
-    display: "block",
-    height: "100%",
-    backgroundColor: themeVars.entityCardBgColor,
-    backgroundSize: "cover",
-    textDecoration: "none",
-    borderRadius: border.radius6,
-    boxShadow: themeVars.entityCardShadow,
-    "&:focus": {textDecoration: "none"},
-  }}
+  display: block;
+  height: 100%;
+  background-color: ${themeVars.transparent};
+  background-size: cover;
+  text-decoration: none;
+  border-radius: ${space.s8}px;
+  background-clip: padding-box;
+  &:focus {
+    text-decoration: none;
+  }
 `;
 
-const overlayStyle = css`
-  ${{
-    width: "100%",
-    height: "100%",
-    padding: space.s12,
-    overflow: "hidden",
-    color: themeVars.textColor,
-    borderRadius: border.radius6,
-  }}
+const thumbnailStyle = css`
+  border: 1px solid ${themeVars.separatorColor};
 `;
 
-const nameStyle = css`
-  ${{
-    wordBreak: "break-word",
-    textDecoration: "none",
-    height: textStyles.regular.fontSize * textStyles.regular.lineHeight * 5,
-    overflow: "hidden",
-    marginTop: space.s2,
-  }}
+const iconOnlyStyle = css`
+  border: 1px solid ${themeVars.colorBorderButtonOutlineNeutralDefault};
+`;
+
+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: "linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%)",
-    backgroundSize: "100% 200%",
-    backgroundPosition: "0 100%",
-    transition: "0.2s all ease-in-out",
-    color: themeVars.transparent,
-    borderRadius: border.radius6,
-    "&:hover": {
-      backgroundPosition: "0% 0%",
-      color: themeVars.inversedTextColor,
-    },
-  }}
+  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`
-  ${{
-    background: "transparent",
-  }}
+  opacity: 1;
+  background: transparent;
 `;
 
-export type FileItemType = {
-  uid: string;
-  name: string;
-  url: string;
-  thumbnailUrl: string | null;
-  previewData: null | {
-    type: "image" | "video" | "iframe";
-    previewSrc: string | null;
-    originalSrc: string;
-    contentType: string;
-  };
-  downloadUrl?: string | null;
-  status?: string;
-};
+const actionsButtonStyle = css`
+  position: absolute;
+  top: ${space.s8}px;
+  right: ${space.s8}px;
+  opacity: 0;
+`;
 
 export type FileItemProps = {
-  data: FileItemType;
+  data: UploadFileWithContent;
   onDownloadClick?: () => void;
-  onRemoveClick?: (x: FileItemType) => void;
+  onRemoveClick?: () => void;
+  onRenameClick?: (file: {id: string; name: string}) => void;
+  onClick?: () => void;
   disabled?: boolean;
-  onRenameClick?: (p: {id: string; name: string}) => void;
 };
 
+export const minFileTileWidth = 120;
+
 export function FileItem(props: FileItemProps) {
   const theme = useTheme();
-  const {onDownloadClick, onRemoveClick} = props;
-  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();
+  const {onDownloadClick, onRemoveClick, onClick} = props;
+  const {name, thumbnailUrl, status, contentType} = props.data;
+  const isPending = status === "uploading" || status === "deleting";
+  const [isThumbnailLoadFailed, setIsThumbnailLoadFailed] = useState(false);
+  const isBackgroundReady = !isThumbnailLoadFailed && Boolean(thumbnailUrl && !isPending);
+  const [isActionsOpened, setIsActionsOpened] = useState(false);
 
-  useEffect(() => {
-    if (!preview) {
-      return undefined;
-    }
-
-    imagesRegistry.set(preview.originalSrc, {
-      type: preview.type,
-      src: preview.originalSrc,
-      label: name,
-      contentType: preview.contentType,
-      zoomed: false,
-      setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-    });
-    return () => {
-      imagesRegistry.delete(preview.originalSrc);
-    };
-  }, [imagesRegistry, name, preview, onDownloadClick]);
-
-  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,
-        label: name,
-        contentType: preview.contentType,
-        zoomed,
-        setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
-      });
-    }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
-
-  const onContainerClick = useCallback(() => {
-    if (preview) {
-      setZoomed(true);
-    } else {
-      onDownloadClick?.();
-    }
-  }, [preview, onDownloadClick]);
+  const showFileIcon = !isPending && !isBackgroundReady;
 
   return (
-    <div
-      className={cx(
-        css`
-          position: relative;
-          height: 100%;
-          cursor: pointer;
-        `,
-        isBackgroundReady &&
-          css`
-            &:hover .${overlayStyle} {
-              background-position: 0 0;
-              color: ${themeVars.inversedTextColor};
-            }
-          `
-      )}
-    >
+    <>
       <div
-        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
-        onClick={onContainerClick}
         className={cx(
-          fileItemStyle,
-          isActive &&
+          css`
+            flex: 1 0 0;
+            height: 100%;
+            min-width: ${minFileTileWidth}px;
+          `,
+          isBackgroundReady &&
             css`
-              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              &:hover .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          isBackgroundReady &&
+            isActionsOpened &&
+            css`
+              .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          !isBackgroundReady &&
+            css`
+              &:hover .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              &:hover .${actionsButtonStyle} {
+                opacity: 1;
+              }
+            `,
+          !isBackgroundReady &&
+            isActionsOpened &&
+            css`
+              .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              .${actionsButtonStyle} {
+                opacity: 1;
+              }
             `
         )}
       >
-        <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
-          <Item
-            multiline
-            textClassName={nameStyle}
-            rightContainer={
+        <div
+          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+          onClick={onClick}
+          className={cx(
+            css`
+              flex-shrink: 0;
+            `,
+            fileItemStyle,
+            showFileIcon ? iconOnlyStyle : thumbnailStyle,
+            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,
+                css`
+                  position: relative;
+                `
+              )}
+            >
               <div
                 className={css`
                   display: flex;
-                  align-items: center;
-                  gap: ${space.s4}px;
+                  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;
                 `}
               >
-                <ActionsMenu
-                  trigger={
-                    <ActionsButtonCompact
-                      className={css`
-                        z-index: 1;
-                      `}
-                      style={
-                        isBackgroundReady ? makeButtonColors(themeVars.inversedTextColor, "ghost", theme) : undefined
-                      }
-                    />
-                  }
+                <Icon containerSize={40} iconSize={40}>
+                  <FileIcon contentType={contentType} />
+                </Icon>
+                <div
+                  className={css`
+                    display: flex;
+                    width: 100%;
+                    justify-content: center;
+                    gap: 10px;
+                    flex-shrink: 0;
+                    color: ${themeVars.colorTextMenuItem};
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                  `}
                 >
-                  <CopyFileUrlActionMenuItem url={url} />
-                  <a href={url} target="_blank" rel="noopener noreferrer">
-                    <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
-                  </a>
-                  {isPhoneApp() ? (
-                    <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
-                      Download
-                    </ActionsMenuItem>
-                  ) : (
-                    <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={() => onRemoveClick?.(props.data)}
-                    dangerous
+                  <FileTitle
+                    title={name}
+                    className={css`
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    `}
+                  />
+                </div>
+              </div>
+              <div className={actionsButtonStyle}>
+                <FileActionsMenu
+                  setIsActionsOpened={setIsActionsOpened}
+                  data={props.data}
+                  disabled={props.disabled}
+                  onDownloadClick={onDownloadClick}
+                  onRemoveClick={onRemoveClick}
+                  onRenameClick={props.onRenameClick}
+                />
+              </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}
-                  >
-                    Delete
-                  </ActionsMenuItem>
-                </ActionsMenu>
+                    actionsButtonStyle={
+                      isBackgroundReady ? makeButtonColors(themeVars.inversedTextColor, "ghost", theme) : undefined
+                    }
+                    onDownloadClick={onDownloadClick}
+                    onRemoveClick={props.onRemoveClick}
+                    onRenameClick={props.onRenameClick}
+                  />
+                </div>
+                <div
+                  className={css`
+                    display: flex;
+                    width: 100%;
+                    align-self: flex-start;
+                    align-items: flex-end;
+                    text-overflow: ellipsis;
+                    box-sizing: border-box;
+                  `}
+                >
+                  <FileTitle title={name} />
+                </div>
               </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>
+        {thumbnailUrl ? (
+          <img
+            style={{display: "none"}}
+            onError={() => setIsThumbnailLoadFailed(true)}
+            src={thumbnailUrl}
+            alt="invisible"
+          />
+        ) : null}
       </div>
-    </div>
+    </>
   );
 }
 
-function CopyFileUrlActionMenuItem({url}: {url: string}) {
-  const toast = useToast();
+function FileActionsMenu({
+  data,
+  disabled,
+  setIsActionsOpened,
+  onDownloadClick,
+  onRemoveClick,
+  onRenameClick,
+  actionsButtonStyle,
+}: {
+  data: UploadFileWithContent;
+  onDownloadClick?: () => void;
+  onRemoveClick?: () => void;
+  onRenameClick?: (data: {id: string; name: string}) => void;
+  disabled?: boolean;
+  setIsActionsOpened: (val: boolean) => void;
+  actionsButtonStyle?: CSSProperties;
+}) {
   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}));
-      }}
+    <ActionsMenu
+      onOpenChange={setIsActionsOpened}
+      trigger={
+        <ActionsButtonCompact
+          className={css`
+            z-index: 1;
+          `}
+          style={actionsButtonStyle}
+        />
+      }
     >
-      Copy file URL
-    </ActionsMenuItem>
+      {
+        <FileMenuItems
+          file={data}
+          disabled={disabled}
+          onDownloadClick={onDownloadClick}
+          onRemoveClick={onRemoveClick}
+          onRenameClick={onRenameClick}
+        />
+      }
+    </ActionsMenu>
   );
 }
 
-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, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
-  if (isPhoneApp()) {
-    return (
-      <>
-        <a href={url} target="_blank" rel="noopener noreferrer">
-          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
-        </a>
-        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
-          Download
-        </ActionsMenuItem>
-      </>
-    );
-  }
-
+function FileTitle({title, className}: {title: string; className?: 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>
-    </>
+    <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;
+          overflow: hidden;
+          font-size: ${fontSize.mini}px;
+          font-weight: ${fontWeight.medium};
+          line-height: ${lineHeight.heading};
+          text-transform: none;
+          text-overflow: ellipsis;
+          &:hover {
+            text-decoration: none;
+            color: inherit;
+          }
+        `,
+        className
+      )}
+    >
+      <FileTitleInner
+        title={title}
+        containerCss={css`
+          max-width: 180px;
+        `}
+      />
+    </div>
   );
 }

package/src/icons/ast/AddDatabase.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AddDatabase: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M5.835 8.738c-.35-.17-.66-.37-.92-.603C4.454 7.725 4 7.045 4 6.401 4 4.002 6.686 3 10 3s6 .972 6 3.4c0 .65-.448 1.332-.91 1.746-.262.233-.572.433-.925.603-1.079.52-2.547.751-4.165.751-1.618 0-3.086-.239-4.165-.762ZM2.5 13.599c0 1.904 1.127 3.202 2.58 3.938 1.46.74 3.347.991 5.215.96a.723.723 0 0 0 .705-.73.78.78 0 0 0-.797-.768c-1.94.023-4.927-.181-5.93-2.187a2.783 2.783 0 0 1-.257-1.528c.017-.16.046-.313.088-.46.406.396.89.703 1.405.939 1.498.688 3.213.837 4.844.804a.666.666 0 0 0 .647-.673.715.715 0 0 0-.733-.705c-1.499.024-3.105-.103-4.468-.778a3.92 3.92 0 0 1-.93-.626c-.264-.244-.71-.72-.795-1.083A2.868 2.868 0 0 1 4 10.044c0-.276.036-.535.104-.775.394.384.871.694 1.405.939 1.256.577 2.85.808 4.491.808 1.638 0 3.232-.224 4.49-.797a4.934 4.934 0 0 0 1.41-.94c.034.122.06.25.076.382.025.196.024.392.024.589a.75.75 0 0 0 1.5 0V6.4c0-1.914-1.122-3.215-2.583-3.95-1.385-.697-3.153-.95-4.917-.95-1.77 0-3.538.262-4.92.963C3.626 3.199 2.5 4.497 2.5 6.4v7.198Zm13.25-.849a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-database"};
+const AddDatabase: 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":"M5.835 8.738c-.35-.17-.66-.37-.92-.603C4.454 7.725 4 7.045 4 6.401 4 4.002 6.686 3 10 3s6 .972 6 3.4c0 .65-.448 1.332-.91 1.746-.262.233-.572.433-.925.603-1.079.52-2.547.751-4.165.751-1.618 0-3.086-.239-4.165-.762ZM2.5 13.599c0 1.904 1.127 3.202 2.58 3.938 1.46.74 3.347.991 5.215.96a.723.723 0 0 0 .705-.73.78.78 0 0 0-.797-.768c-1.94.023-4.927-.181-5.93-2.187a2.783 2.783 0 0 1-.257-1.528c.017-.16.046-.313.088-.46.406.396.89.703 1.405.939 1.498.688 3.213.837 4.844.804a.666.666 0 0 0 .647-.673.715.715 0 0 0-.733-.705c-1.499.024-3.105-.103-4.468-.778a3.92 3.92 0 0 1-.93-.626c-.264-.244-.71-.72-.795-1.083A2.868 2.868 0 0 1 4 10.044c0-.276.036-.535.104-.775.394.384.871.694 1.405.939 1.256.577 2.85.808 4.491.808 1.638 0 3.232-.224 4.49-.797a4.934 4.934 0 0 0 1.41-.94c.034.122.06.25.076.382.025.196.024.392.024.589a.75.75 0 0 0 1.5 0V6.4c0-1.914-1.122-3.215-2.583-3.95-1.385-.697-3.153-.95-4.917-.95-1.77 0-3.538.262-4.92.963C3.626 3.199 2.5 4.497 2.5 6.4v7.198Zm13.25-.849a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-database"};
 
 export default AddDatabase;

package/src/icons/ast/AddIntegration.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AddIntegration: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"m8.435 6.627-.7-.7a.803.803 0 0 1 0-1.136l.634-.634a5.283 5.283 0 0 1 6.861-.523l1.376-1.375a.804.804 0 1 1 1.135 1.135L16.366 4.77c1.022 1.394 1.296 3.324.709 4.983-.148.419-.674.592-1.075.348-.358-.218-.48-.672-.375-1.077.375-1.45.044-2.77-.918-3.731a3.655 3.655 0 0 0-5.203 0l-.066.066L13.076 9A.81.81 0 0 1 12 10.21L9.57 7.761l-.699.7a.803.803 0 1 1-1.135-1.136l.699-.7Zm1.272 10.451a5.305 5.305 0 0 1-4.952-.698l-1.377 1.378a.805.805 0 0 1-1.318-.256.803.803 0 0 1 .182-.88l1.378-1.377a5.283 5.283 0 0 1 .523-6.862l.634-.634a.803.803 0 0 1 1.135 0l4.182 4.17A.804.804 0 0 1 9 13.095L5.344 9.452l-.066.067a3.658 3.658 0 0 0 0 5.203c.922.922 2.407 1.14 3.667.84.486-.114 1.029.111 1.18.587.12.377-.046.793-.418.93Zm6.043-4.328a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-integration"};
+const AddIntegration: 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":"m8.435 6.627-.7-.7a.803.803 0 0 1 0-1.136l.634-.634a5.283 5.283 0 0 1 6.861-.523l1.376-1.375a.804.804 0 1 1 1.135 1.135L16.366 4.77c1.022 1.394 1.296 3.324.709 4.983-.148.419-.674.592-1.075.348-.358-.218-.48-.672-.375-1.077.375-1.45.044-2.77-.918-3.731a3.655 3.655 0 0 0-5.203 0l-.066.066L13.076 9A.81.81 0 0 1 12 10.21L9.57 7.761l-.699.7a.803.803 0 1 1-1.135-1.136l.699-.7Zm1.272 10.451a5.305 5.305 0 0 1-4.952-.698l-1.377 1.378a.805.805 0 0 1-1.318-.256.803.803 0 0 1 .182-.88l1.378-1.377a5.283 5.283 0 0 1 .523-6.862l.634-.634a.803.803 0 0 1 1.135 0l4.182 4.17A.804.804 0 0 1 9 13.095L5.344 9.452l-.066.067a3.658 3.658 0 0 0 0 5.203c.922.922 2.407 1.14 3.667.84.486-.114 1.029.111 1.18.587.12.377-.046.793-.418.93Zm6.043-4.328a.75.75 0 0 0-1.5 0v1.5h-1.5a.75.75 0 0 0 0 1.5h1.5v1.5a.75.75 0 1 0 1.5 0v-1.5h1.5a.75.75 0 0 0 0-1.5h-1.5v-1.5Z"},"children":[]}],"metadata":""}]},"name":"add-integration"};
 
 export default AddIntegration;

package/src/icons/ast/ArrowsRightLeft.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const ArrowsRightLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20","fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M3.223 13.386a.75.75 0 0 0 0 1.061l2.833 2.833a.75.75 0 0 0 1.061-1.06l-1.553-1.553H16.25a.75.75 0 0 0 0-1.5H5.564l1.553-1.553a.75.75 0 0 0-1.06-1.061l-2.834 2.833ZM3 6.083c0 .415.336.75.75.75h10.686l-1.553 1.553a.75.75 0 1 0 1.06 1.061l2.834-2.833a.75.75 0 0 0 0-1.061L13.944 2.72a.75.75 0 0 0-1.061 1.06l1.553 1.553H3.75a.75.75 0 0 0-.75.75Z"},"children":[]}],"metadata":""}]},"name":"arrows-right-left"};
+const ArrowsRightLeft: 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":"M3.223 13.386a.75.75 0 0 0 0 1.061l2.833 2.833a.75.75 0 0 0 1.061-1.06l-1.553-1.553H16.25a.75.75 0 0 0 0-1.5H5.564l1.553-1.553a.75.75 0 0 0-1.06-1.061l-2.834 2.833ZM3 6.083c0 .415.336.75.75.75h10.686l-1.553 1.553a.75.75 0 1 0 1.06 1.061l2.834-2.833a.75.75 0 0 0 0-1.061L13.944 2.72a.75.75 0 0 0-1.061 1.06l1.553 1.553H3.75a.75.75 0 0 0-.75.75Z"},"children":[]}],"metadata":""}]},"name":"arrows-right-left"};
 
 export default ArrowsRightLeft;