@true-engineering/true-react-common-ui-kit 3.28.3 → 3.29.0

package/src/components/FlexibleTable/helpers.ts

@@ -1,16 +1,16 @@
-import { format } from 'date-fns';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { DEFAULT_DATE_FORMAT } from './constants';
-import { IFlexibleTableConfigType, IHeaderContent, ITableRow } from './types';
-
-export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
-  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
-
-export const formatCellContent = <
-  Values extends ITableRow,
-  HeaderContent extends IHeaderContent<Values>,
->(
-  value: unknown,
-  config?: IFlexibleTableConfigType<Values, HeaderContent>[keyof Values],
-): string =>
-  value instanceof Date ? format(value, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);
+import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { IFlexibleTableConfigType, IHeaderContent, ITableRow } from './types';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+
+export const formatCellContent = <
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values>,
+>(
+  value: unknown,
+  config?: IFlexibleTableConfigType<Values, HeaderContent>[keyof Values],
+): string =>
+  value instanceof Date ? format(value, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);

package/src/components/FlexibleTable/index.ts

@@ -1,4 +1,4 @@
-export * from './FlexibleTable';
-export * from './types';
-export type { IFlexibleTableStyles } from './FlexibleTable.styles';
-export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';
+export * from './FlexibleTable';
+export * from './types';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';

package/src/components/FlexibleTable/types.ts

@@ -1,58 +1,64 @@
-import { CSSProperties, ReactNode } from 'react';
-import { IRenderNode } from '../../types';
-
-export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export type ITableRow = Record<string, any>;
-
-export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
-
-export interface ITitleComponentProps<Value> {
-  value?: Value;
-}
-
-export interface IValueComponentProps<Values, Value> {
-  value: Value;
-  row: Values;
-  isFocusedRow?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
-}
-
-export type IFlexibleTableConfigType<
-  Values extends ITableRow,
-  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
-> = {
-  [Key in keyof Values]?: {
-    title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
-    component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
-    dateFormat?: string;
-    minWidth?: string | number;
-    width?: string | number;
-    maxWidth?: string | number;
-    /** @default 'left' */
-    titleAlign?: CSSProperties['textAlign'];
-    cellAlign?: CSSProperties['textAlign'];
-    cellVerticalAlign?: CSSProperties['verticalAlign'];
-    position?: CSSProperties['position'];
-    right?: number;
-    left?: number;
-    shouldRenderDataId?: boolean;
-  };
-};
-
-export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
-  isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
-}
-
-export interface INestedComponent {
-  isOpen: boolean;
-  component?: ReactNode;
-  cellKey?: string;
-}
+import { CSSProperties, ReactNode } from 'react';
+import { IRenderNode } from '../../types';
+
+export type IFlexibleTableRenderMode = 'table' | 'divs';
+
+export type IFlexibleTableRender = Record<
+  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
+  keyof JSX.IntrinsicElements
+>;
+
+// TODO: Заменить Record<string, any> на Record<string, unknown>
+export type ITableRow = Record<string, any>;
+
+export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
+
+export interface ITitleComponentProps<Value> {
+  value?: Value;
+}
+
+export interface IValueComponentProps<Values, Value> {
+  value: Value;
+  row: Values;
+  isFocusedRow?: boolean;
+  isActiveRow?: boolean;
+  isNestedComponentExpanded: boolean;
+  isRowNestedComponentExpanded: boolean;
+  onSetNestedComponent: (component?: ReactNode) => void;
+}
+
+export type IFlexibleTableConfigType<
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> = {
+  [Key in keyof Values]?: {
+    title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
+    component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
+    dateFormat?: string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+    /** @default 'left' */
+    titleAlign?: CSSProperties['textAlign'];
+    cellAlign?: CSSProperties['textAlign'];
+    cellVerticalAlign?: CSSProperties['verticalAlign'];
+    position?: CSSProperties['position'];
+    right?: number;
+    left?: number;
+    shouldRenderDataId?: boolean;
+  };
+};
+
+export interface IInfinityScrollConfig {
+  activePage: number;
+  totalPages: number;
+  isLoading: boolean;
+  isLastPage: boolean;
+  onInfinityScroll: (skip: number) => void;
+}
+
+export interface INestedComponent {
+  isOpen: boolean;
+  component?: ReactNode;
+  cellKey?: string;
+}

package/src/components/Icon/Icon.stories.tsx

@@ -1,86 +1,86 @@
-import { Icon } from './Icon';
-import { complexIcons } from './complexIcons';
-import { iconsList } from './icons-list';
-import { IIconType } from './types';
-
-const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
-  title: 'Data Display/Icon',
-};
-
-export const Default = () => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      // color: color('Container color', colors.GREEN_FOCUS),
-      display: 'flex',
-      // width: number('Container width', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-      // height: number('Container height', 40, {
-      //   range: true,
-      //   min: 0,
-      //   max: 200,
-      //   step: 10,
-      // }),
-    }}
-  >
-    {/* <Icon type={select('type', types, types[0])} /> */}
-  </div>
-);
-
-export const Gallery = () => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      width: '80vw',
-    }}
-  >
-    {types.map((type) => (
-      <div
-        key={type}
-        style={{
-          width: 100,
-          height: 100,
-          margin: 1,
-          background: '#f7f7f7',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
-        <div
-          style={{
-            width: 32,
-            height: 32,
-            margin: '10px 0',
-            display: 'flex',
-            alignItems: 'center',
-            color: '#888',
-          }}
-        >
-          <Icon type={type} />
-        </div>
-        <div
-          style={{
-            fontFamily: 'Arial',
-            fontSize: 13,
-            color: '#747679',
-            overflow: 'hidden',
-            padding: '0 5px',
-          }}
-        >
-          {type}
-        </div>
-      </div>
-    ))}
-  </div>
-);
+import { Icon } from './Icon';
+import { complexIcons } from './complexIcons';
+import { iconsList } from './icons-list';
+import { IIconType } from './types';
+
+const types: IIconType[] = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Data Display/Icon',
+};
+
+export const Default = () => (
+  <div
+    style={{
+      border: '1px dotted rgba(0,0,0,.2)',
+      // color: color('Container color', colors.GREEN_FOCUS),
+      display: 'flex',
+      // width: number('Container width', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+      // height: number('Container height', 40, {
+      //   range: true,
+      //   min: 0,
+      //   max: 200,
+      //   step: 10,
+      // }),
+    }}
+  >
+    {/* <Icon type={select('type', types, types[0])} /> */}
+  </div>
+);
+
+export const Gallery = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      width: '80vw',
+    }}
+  >
+    {types.map((type) => (
+      <div
+        key={type}
+        style={{
+          width: 100,
+          height: 100,
+          margin: 1,
+          background: '#f7f7f7',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            margin: '10px 0',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#888',
+          }}
+        >
+          <Icon type={type} />
+        </div>
+        <div
+          style={{
+            fontFamily: 'Arial',
+            fontSize: 13,
+            color: '#747679',
+            overflow: 'hidden',
+            padding: '0 5px',
+          }}
+        >
+          {type}
+        </div>
+      </div>
+    ))}
+  </div>
+);

package/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Icon', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
-export type IIconStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Icon', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export type IIconStyles = ITweakStyles<typeof useStyles>;

package/src/components/Icon/Icon.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ComplexIconBoilerplate, IconBoilerplate } from './components';
-import { isComplexIcon } from './helpers';
-import { IIconType } from './types';
-import { useStyles, IIconStyles } from './Icon.styles';
-
-export interface IIconProps extends ICommonProps<IIconStyles> {
-  type: IIconType;
-}
-
-export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isComplexIcon(type) ? (
-        <ComplexIconBoilerplate type={type} />
-      ) : (
-        <IconBoilerplate type={type} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { ComplexIconBoilerplate, IconBoilerplate } from './components';
+import { isComplexIcon } from './helpers';
+import { IIconType } from './types';
+import { useStyles, IIconStyles } from './Icon.styles';
+
+export interface IIconProps extends ICommonProps<IIconStyles> {
+  type: IIconType;
+}
+
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isComplexIcon(type) ? (
+        <ComplexIconBoilerplate type={type} />
+      ) : (
+        <IconBoilerplate type={type} />
+      )}
+    </div>
+  );
+};

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/fileExcel.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
-  <rect width="20" height="20" rx="4" fill="#21A366"/>
-  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>
-  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>
-  <defs>
-    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.245559"/>
-      <stop offset="1" stop-opacity="0.498578"/>
-    </linearGradient>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
+  <rect width="20" height="20" rx="4" fill="#21A366"/>
+  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>
+  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>
+  <defs>
+    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.245559"/>
+      <stop offset="1" stop-opacity="0.498578"/>
+    </linearGradient>
+  </defs>
 </svg>

package/src/components/Icon/complexIcons/fileImage.svg

@@ -1,13 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
-  <rect width="20" height="20" rx="4" fill="#FF991F"/>
-  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>
-  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>
-  <defs>
-    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.245559"/>
-      <stop offset="1" stop-opacity="0.498578"/>
-    </linearGradient>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
+  <rect width="20" height="20" rx="4" fill="#FF991F"/>
+  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>
+  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>
+  <defs>
+    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.245559"/>
+      <stop offset="1" stop-opacity="0.498578"/>
+    </linearGradient>
+  </defs>
 </svg>

package/src/components/Icon/complexIcons/fileOther.svg

@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="#AABFFC"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="url(#paint0_linear_0_16113)" style="mix-blend-mode:overlay"/>
-  <defs>
-    <linearGradient id="paint0_linear_0_16113" x1="-5.9615" y1="9.95168" x2="13.4572" y2="25.4862" gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.245559"/>
-      <stop offset="1" stop-opacity="0.498578"/>
-    </linearGradient>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="#AABFFC"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="url(#paint0_linear_0_16113)" style="mix-blend-mode:overlay"/>
+  <defs>
+    <linearGradient id="paint0_linear_0_16113" x1="-5.9615" y1="9.95168" x2="13.4572" y2="25.4862" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.245559"/>
+      <stop offset="1" stop-opacity="0.498578"/>
+    </linearGradient>
+  </defs>
 </svg>

package/src/components/Icon/complexIcons/filePdf.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
-  <rect width="20" height="20" rx="4" fill="#FF5630"/>
-  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16087)" style="mix-blend-mode:overlay"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55535 13.6488V11.0388H4.92535C5.65535 11.0388 5.93535 10.9988 6.27535 10.8688C6.97535 10.5988 7.36535 9.92876 7.36535 8.99876C7.36535 8.21876 7.07535 7.57876 6.57535 7.25876C6.27535 7.06876 5.82535 6.97876 5.09535 6.97876H2.98535V13.6488H4.55535ZM4.84535 9.90876H4.54535V8.10876H4.84535C5.51535 8.10876 5.75535 8.34876 5.75535 9.02876C5.75535 9.66876 5.51535 9.90876 4.84535 9.90876ZM11.6393 13.4388C11.2793 13.5988 10.9993 13.6488 10.4393 13.6488H8.21935V6.97876H10.2593C11.2393 6.97876 11.7193 7.11876 12.1093 7.52876C12.5993 8.02876 12.7693 8.71876 12.7693 10.1388C12.7693 10.9388 12.7093 11.6788 12.6093 12.1588C12.4893 12.7388 12.1193 13.2188 11.6393 13.4388ZM10.0793 12.5188H9.79935V8.10876H10.0193C10.9713 8.10876 11.1466 8.35839 11.1586 9.95112L11.1593 10.1488C11.1593 12.2088 11.0193 12.5188 10.0793 12.5188ZM15.3333 10.8188V13.6488H13.7533V6.97876H17.6033V8.23876H15.3333V9.58876H17.4433V10.8188H15.3333Z" fill="white"/>
-  <defs>
-    <linearGradient id="paint0_linear_0_16087" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.245559"/>
-      <stop offset="1" stop-opacity="0.498578"/>
-    </linearGradient>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">
+  <rect width="20" height="20" rx="4" fill="#FF5630"/>
+  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16087)" style="mix-blend-mode:overlay"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55535 13.6488V11.0388H4.92535C5.65535 11.0388 5.93535 10.9988 6.27535 10.8688C6.97535 10.5988 7.36535 9.92876 7.36535 8.99876C7.36535 8.21876 7.07535 7.57876 6.57535 7.25876C6.27535 7.06876 5.82535 6.97876 5.09535 6.97876H2.98535V13.6488H4.55535ZM4.84535 9.90876H4.54535V8.10876H4.84535C5.51535 8.10876 5.75535 8.34876 5.75535 9.02876C5.75535 9.66876 5.51535 9.90876 4.84535 9.90876ZM11.6393 13.4388C11.2793 13.5988 10.9993 13.6488 10.4393 13.6488H8.21935V6.97876H10.2593C11.2393 6.97876 11.7193 7.11876 12.1093 7.52876C12.5993 8.02876 12.7693 8.71876 12.7693 10.1388C12.7693 10.9388 12.7093 11.6788 12.6093 12.1588C12.4893 12.7388 12.1193 13.2188 11.6393 13.4388ZM10.0793 12.5188H9.79935V8.10876H10.0193C10.9713 8.10876 11.1466 8.35839 11.1586 9.95112L11.1593 10.1488C11.1593 12.2088 11.0193 12.5188 10.0793 12.5188ZM15.3333 10.8188V13.6488H13.7533V6.97876H17.6033V8.23876H15.3333V9.58876H17.4433V10.8188H15.3333Z" fill="white"/>
+  <defs>
+    <linearGradient id="paint0_linear_0_16087" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.245559"/>
+      <stop offset="1" stop-opacity="0.498578"/>
+    </linearGradient>
+  </defs>
 </svg>