[WEB-5236] chore: attachment icon revamp

packages/propel/src/icons/attachments/audio-file-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const AudioFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M7.33325 13.9999V1.99992C7.33325 1.63173 7.63173 1.33325 7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992V13.9999C8.66659 14.3681 8.36811 14.6666 7.99992 14.6666C7.63173 14.6666 7.33325 14.3681 7.33325 13.9999ZM4.33325 11.9999V3.99992C4.33325 3.63173 4.63173 3.33325 4.99992 3.33325C5.36811 3.33325 5.66659 3.63173 5.66659 3.99992V11.9999C5.66659 12.3681 5.36811 12.6666 4.99992 12.6666C4.63173 12.6666 4.33325 12.3681 4.33325 11.9999ZM10.3333 11.9999V3.99992C10.3333 3.63173 10.6317 3.33325 10.9999 3.33325C11.3681 3.33325 11.6666 3.63173 11.6666 3.99992V11.9999C11.6666 12.3681 11.3681 12.6666 10.9999 12.6666C10.6317 12.6666 10.3333 12.3681 10.3333 11.9999ZM1.33325 9.33325V6.66659C1.33325 6.2984 1.63173 5.99992 1.99992 5.99992C2.36811 5.99992 2.66659 6.2984 2.66659 6.66659V9.33325C2.66659 9.70144 2.36811 9.99992 1.99992 9.99992C1.63173 9.99992 1.33325 9.70144 1.33325 9.33325ZM13.3333 9.33325V6.66659C13.3333 6.2984 13.6317 5.99992 13.9999 5.99992C14.3681 5.99992 14.6666 6.2984 14.6666 6.66659V9.33325C14.6666 9.70144 14.3681 9.99992 13.9999 9.99992C13.6317 9.99992 13.3333 9.70144 13.3333 9.33325Z"
+      fill={color}
+    />
+  </IconWrapper>
+);

packages/propel/src/icons/attachments/code-file-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const CodeFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M9.4687 1.39001C9.8056 1.46493 10.0182 1.79918 9.94331 2.1361L7.27632 14.1361C7.20136 14.473 6.86713 14.6856 6.53023 14.6107C6.19351 14.5357 5.98174 14.2014 6.05659 13.8646L8.72261 1.86462C8.79753 1.52772 9.13178 1.31514 9.4687 1.39001ZM4.22456 4.22497C4.46865 3.98105 4.86433 3.98095 5.10835 4.22497C5.35237 4.46899 5.35227 4.86467 5.10835 5.10876L2.21675 8.00036L5.10835 10.892C5.35227 11.1361 5.35237 11.5317 5.10835 11.7758C4.86433 12.0198 4.46865 12.0197 4.22456 11.7758L0.890578 8.44274C0.6465 8.19866 0.6465 7.80205 0.890578 7.55798L4.22456 4.22497ZM10.8906 4.22497C11.1347 3.98089 11.5313 3.98089 11.7753 4.22497L15.1084 7.55798C15.3524 7.80205 15.3524 8.19866 15.1084 8.44274L11.7753 11.7758C11.5313 12.0198 11.1347 12.0198 10.8906 11.7758C10.6468 11.5318 10.6469 11.136 10.8906 10.892L13.7822 8.00036L10.8906 5.10876C10.6469 4.86471 10.6468 4.46895 10.8906 4.22497Z"
+      fill={color}
+    />
+  </IconWrapper>
+);

packages/propel/src/icons/attachments/document-file-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const DocumentFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M2.04175 11.4666V4.533C2.04175 3.98348 2.04127 3.53353 2.07105 3.16874C2.10144 2.79669 2.1666 2.45803 2.32788 2.1414C2.57955 1.64747 2.98141 1.24561 3.47534 0.99394C3.79198 0.832661 4.13063 0.767502 4.50269 0.737104C4.86747 0.707329 5.31742 0.707807 5.86694 0.707807H8.00757C8.46696 0.707807 8.79907 0.703532 9.11792 0.780072C9.26977 0.816533 9.41679 0.868859 9.55933 0.93144C9.57519 0.93761 9.59002 0.945526 9.60523 0.952924C9.63564 0.966985 9.66715 0.978716 9.69702 0.99394L9.87671 1.09453L10.0798 1.23613C10.278 1.39031 10.4692 1.58448 10.7126 1.82792L12.8376 3.9539C13.1626 4.2788 13.4007 4.51024 13.572 4.78984C13.6272 4.87997 13.6747 4.97428 13.7185 5.07011C13.7232 5.08016 13.728 5.09005 13.7322 5.10038C13.7961 5.24493 13.8485 5.39451 13.8855 5.54863C13.962 5.86738 13.9587 6.19877 13.9587 6.658V11.4666C13.9587 12.0161 13.9592 12.4661 13.9294 12.8309C13.899 13.2029 13.8339 13.5415 13.6726 13.8582C13.4524 14.2904 13.1171 14.6519 12.7058 14.9041L12.5251 15.0047C12.2084 15.166 11.87 15.2311 11.4978 15.2615C11.133 15.2913 10.6832 15.2908 10.1335 15.2908H5.86694C5.31741 15.2908 4.86747 15.2913 4.50269 15.2615C4.13058 15.2311 3.79201 15.166 3.47534 15.0047C2.9815 14.7531 2.57957 14.352 2.32788 13.8582C2.16656 13.5415 2.10146 13.2029 2.07105 12.8309C2.04124 12.4661 2.04175 12.0161 2.04175 11.4666ZM3.29175 11.4666C3.29175 12.0367 3.29246 12.4272 3.31714 12.7293C3.34124 13.0238 3.38456 13.1797 3.44116 13.2908C3.57298 13.5495 3.78405 13.7596 4.04273 13.8914C4.15382 13.948 4.30958 13.9923 4.60425 14.0164C4.90636 14.0411 5.29672 14.0408 5.86694 14.0408H10.1335C10.7039 14.0408 11.0941 14.0411 11.3962 14.0164C11.691 13.9923 11.8466 13.948 11.9578 13.8914C12.2164 13.7597 12.4265 13.5494 12.5584 13.2908C12.615 13.1797 12.6593 13.0238 12.6834 12.7293C12.708 12.4272 12.7087 12.0367 12.7087 11.4666V6.658C12.7087 6.27204 12.7063 6.08602 12.6912 5.95781H10.4001C10.2238 5.95781 10.0534 5.95871 9.91089 5.94706C9.76121 5.93481 9.5877 5.90574 9.41382 5.81718C9.17068 5.69331 8.97316 5.49555 8.84937 5.25273C8.76065 5.07863 8.73172 4.9045 8.71948 4.75468C8.70786 4.61227 8.70874 4.44258 8.70874 4.2664V1.97441C8.58046 1.95924 8.39393 1.95781 8.00757 1.95781H5.86694C5.29669 1.95781 4.90637 1.95853 4.60425 1.9832C4.3097 2.00726 4.15382 2.05069 4.04273 2.10722C3.784 2.23905 3.57299 2.45006 3.44116 2.70878C3.38463 2.81988 3.3412 2.97576 3.31714 3.27031C3.29247 3.57243 3.29175 3.96275 3.29175 4.533V11.4666ZM9.96558 4.65312C9.96701 4.67068 9.96918 4.68335 9.97046 4.69218L9.97339 4.69609C9.98224 4.69738 9.99547 4.6995 10.0134 4.70097C10.0932 4.70746 10.2034 4.70781 10.4001 4.70781H11.824L9.95874 2.8416V4.2664C9.95874 4.46323 9.95906 4.57334 9.96558 4.65312Z"
+      fill={color}
+    />
+  </IconWrapper>
+);

packages/propel/src/icons/attachments/image-file-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ImageFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 10.2598L10.9785 7.86328C10.8392 7.72401 10.7612 7.64557 10.7002 7.59375C10.6869 7.58245 10.676 7.57561 10.6689 7.57031C10.6672 7.57021 10.6658 7.5702 10.6641 7.57031C10.657 7.57563 10.6461 7.58247 10.6328 7.59375C10.5718 7.64558 10.4938 7.72399 10.3545 7.86328L4.84277 13.373C4.9535 13.3734 5.07242 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V10.2598ZM6.375 5.66699C6.375 5.2759 6.05805 4.95818 5.66699 4.95801C5.27579 4.95801 4.95801 5.27579 4.95801 5.66699C4.95818 6.05805 5.2759 6.375 5.66699 6.375C6.05794 6.37482 6.37482 6.05794 6.375 5.66699ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.89654 12.8637 3.08734 13.0607 3.32031 13.1934C3.36428 13.122 3.40913 13.0651 3.44238 13.0254C3.53706 12.9123 3.66771 12.7815 3.80176 12.6475L9.4707 6.97852C9.59527 6.85395 9.7153 6.73407 9.82422 6.6416C9.93879 6.54434 10.0817 6.44122 10.2676 6.38086L10.3652 6.35352C10.5962 6.29805 10.8392 6.30699 11.0664 6.38086C11.2524 6.44121 11.3952 6.54433 11.5098 6.6416C11.6187 6.7341 11.7387 6.85398 11.8633 6.97852L13.375 8.49023V5.2002ZM7.625 5.66699C7.62482 6.74829 6.74829 7.62482 5.66699 7.625C4.58554 7.625 3.70818 6.7484 3.70801 5.66699C3.70801 4.58543 4.58543 3.70801 5.66699 3.70801C6.7484 3.70818 7.625 4.58554 7.625 5.66699ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H4.62109C4.43152 14.625 4.24652 14.6253 4.09961 14.6123C4.09609 14.612 4.09257 14.6107 4.08887 14.6104C4.00037 14.6064 3.91608 14.6022 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+      fill={color}
+    />
+  </IconWrapper>
+);

packages/propel/src/icons/attachments/index.ts

@@ -0,0 +1,5 @@
+export * from "./audio-file-icon";
+export * from "./code-file-icon";
+export * from "./document-file-icon";
+export * from "./image-file-icon";
+export * from "./video-file-icon";

packages/propel/src/icons/attachments/video-file-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const VideoFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M8.13281 2.70801C8.68235 2.70801 9.13229 2.70753 9.49707 2.73731C9.86914 2.7677 10.2078 2.83287 10.5244 2.99414C11.0184 3.24582 11.4202 3.64768 11.6719 4.1416C11.8332 4.45823 11.8983 4.79689 11.9287 5.16895C11.9577 5.52422 11.957 5.96009 11.957 6.49023L13.3135 5.13477C13.4475 5.00076 13.5783 4.87006 13.6914 4.77539C13.7887 4.69397 13.9861 4.53702 14.2578 4.51563L14.3721 4.51367C14.6367 4.52445 14.8872 4.64455 15.0615 4.84863C15.2385 5.05589 15.2681 5.30626 15.2793 5.43262C15.2923 5.57953 15.291 5.76453 15.291 5.9541V10.0449C15.291 10.2344 15.2923 10.4195 15.2793 10.5664C15.2681 10.6927 15.2386 10.9431 15.0615 11.1504C14.8872 11.3546 14.6367 11.4745 14.3721 11.4854L14.2578 11.4834C13.9864 11.462 13.7888 11.3061 13.6914 11.2246C13.5783 11.1299 13.4475 10.9983 13.3135 10.8643L11.957 9.50781C11.957 10.0388 11.9578 10.4754 11.9287 10.8311C11.8983 11.2031 11.8332 11.5417 11.6719 11.8584C11.4202 12.3522 11.0183 12.7533 10.5244 13.0049C10.2077 13.1662 9.86919 13.2313 9.49707 13.2617C9.13229 13.2915 8.68236 13.291 8.13281 13.291H4.5332C3.98367 13.291 3.53373 13.2915 3.16895 13.2617C2.79684 13.2313 2.45827 13.1662 2.1416 13.0049C1.64776 12.7533 1.24583 12.3522 0.994141 11.8584C0.832817 11.5417 0.76772 11.2031 0.737305 10.8311C0.707503 10.4663 0.708008 10.0163 0.708008 9.4668V6.5332C0.708008 5.98368 0.707531 5.53373 0.737305 5.16895C0.767704 4.79689 0.832862 4.45824 0.994141 4.1416C1.24581 3.64767 1.64767 3.24581 2.1416 2.99414C2.45824 2.83286 2.79689 2.7677 3.16895 2.73731C3.53373 2.70753 3.98368 2.70801 4.5332 2.70801H8.13281ZM12.2168 7.99902L14.041 9.82324V6.17578L12.2168 7.99902ZM1.95801 9.4668C1.95801 10.0369 1.95872 10.4274 1.9834 10.7295C2.0075 11.024 2.05082 11.1799 2.10742 11.291C2.23924 11.5497 2.45031 11.7598 2.70898 11.8916C2.82008 11.9482 2.97584 11.9925 3.27051 12.0166C3.57262 12.0413 3.96298 12.041 4.5332 12.041H8.13281C8.70305 12.041 9.0934 12.0413 9.39551 12.0166C9.69012 11.9925 9.84589 11.9482 9.95703 11.8916C10.2157 11.7598 10.4268 11.5497 10.5586 11.291C10.6152 11.1799 10.6585 11.024 10.6826 10.7295C10.7073 10.4274 10.708 10.0369 10.708 9.4668V6.5332C10.708 5.96295 10.7073 5.57263 10.6826 5.27051C10.6586 4.97596 10.6151 4.82008 10.5586 4.70898C10.4268 4.45026 10.2157 4.23924 9.95703 4.10742C9.8459 4.05089 9.69 4.00746 9.39551 3.9834C9.09339 3.95873 8.70308 3.95801 8.13281 3.95801H4.5332C3.96295 3.95801 3.57263 3.95873 3.27051 3.9834C2.97596 4.00746 2.82008 4.05089 2.70898 4.10742C2.45026 4.23925 2.23925 4.45026 2.10742 4.70898C2.05089 4.82008 2.00746 4.97596 1.9834 5.27051C1.95873 5.57263 1.95801 5.96295 1.95801 6.5332V9.4668Z"
+      fill={color}
+    />
+  </IconWrapper>
+);

packages/propel/src/icons/icon-wrapper.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+interface IIconWrapper extends ISvgIcons {
+  children: React.ReactNode;
+  clipPathId?: string;
+  viewBox?: string;
+}
+
+export const IconWrapper: React.FC<IIconWrapper> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  children,
+  clipPathId,
+  viewBox = "0 0 16 16",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    {clipPathId ? (
+      <>
+        <g clipPath={`url(#${clipPathId})`}>{children}</g>
+        <defs>
+          <clipPath id={clipPathId}>
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </>
+    ) : (
+      children
+    )}
+  </svg>
+);

packages/propel/src/icons/index.ts

@@ -5,6 +5,7 @@ export * from "./ai-icon";
 export * from "./analytics-icon";
 export * from "./archive-icon";
 export * from "./at-risk-icon";
+export * from "./attachments";
 export * from "./bar-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";