@ssa-ui-kit/core 0.0.11-alpha → 0.0.12-alpha

package/src/components/FormRadioGroup/FormRadioGroup.tsx

@@ -1,35 +1,35 @@
-import { useController } from 'react-hook-form';
-import type { FieldValues } from 'react-hook-form';
-
-import RadioGroup from '@components/RadioGroup';
-
-import { IFormRadioGroupProps } from './types';
-import { ChangeEvent } from 'react';
-
-const FormRadioGroup = <T extends FieldValues>({
-  name,
-  isRequired = false,
-  control,
-  children,
-  ...props
-}: IFormRadioGroupProps<T>) => {
-  const { field } = useController<T>({
-    control,
-    name,
-    rules: { required: isRequired },
-  });
-
-  return (
-    <RadioGroup
-      name={field.name}
-      onChange={(value) => {
-        field.onChange(value as unknown as ChangeEvent);
-      }}
-      isRequired={isRequired}
-      {...props}>
-      {children}
-    </RadioGroup>
-  );
-};
-
-export default FormRadioGroup;
+import { useController } from 'react-hook-form';
+import type { FieldValues } from 'react-hook-form';
+
+import RadioGroup from '@components/RadioGroup';
+
+import { IFormRadioGroupProps } from './types';
+import { ChangeEvent } from 'react';
+
+const FormRadioGroup = <T extends FieldValues>({
+  name,
+  isRequired = false,
+  control,
+  children,
+  ...props
+}: IFormRadioGroupProps<T>) => {
+  const { field } = useController<T>({
+    control,
+    name,
+    rules: { required: isRequired },
+  });
+
+  return (
+    <RadioGroup
+      name={field.name}
+      onChange={(value) => {
+        field.onChange(value as unknown as ChangeEvent);
+      }}
+      isRequired={isRequired}
+      {...props}>
+      {children}
+    </RadioGroup>
+  );
+};
+
+export default FormRadioGroup;

package/src/components/FormRadioGroup/index.ts

@@ -1 +1 @@
-export { default } from './FormRadioGroup';
+export { default } from './FormRadioGroup';

package/src/components/FormRadioGroup/types.ts

@@ -1,12 +1,12 @@
-import { FieldPath, Control, FieldValues } from 'react-hook-form';
-
-import { IRadioGroupProps } from '@components/RadioGroup/types';
-import { CommonProps } from '@global-types/emotion';
-
-export type IFormRadioGroupProps<T extends FieldValues> = Omit<
-  IRadioGroupProps,
-  'name' | 'onChange'
-> & {
-  name: FieldPath<T>;
-  control: Control<T>;
-} & CommonProps;
+import { FieldPath, Control, FieldValues } from 'react-hook-form';
+
+import { IRadioGroupProps } from '@components/RadioGroup/types';
+import { CommonProps } from '@global-types/emotion';
+
+export type IFormRadioGroupProps<T extends FieldValues> = Omit<
+  IRadioGroupProps,
+  'name' | 'onChange'
+> & {
+  name: FieldPath<T>;
+  control: Control<T>;
+} & CommonProps;

package/src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
-import { IconProps } from './types';
-import IconsMap from './icons';
-
-const Icon = ({ name, color = '#000', size, ...props }: IconProps) => {
-  return <IconsMap name={name} color={color} size={size} {...props} />;
-};
-export default Icon;
+import { IconProps } from './types';
+import IconsMap from './icons';
+
+const Icon = ({ name, color = '#000', size, ...props }: IconProps) => {
+  return <IconsMap name={name} color={color} size={size} {...props} />;
+};
+export default Icon;

package/src/components/Icon/Icons.spec.tsx

@@ -1,89 +1,89 @@
-import { css, SerializedStyles } from '@emotion/react';
-import Icon from '@components/Icon';
-import { iconsList } from '@components/Icon';
-import { screen } from '../../../customTest';
-import { IMapIcons } from './types';
-
-const renderIcon = async (
-  icon: keyof IMapIcons,
-  size?: number,
-  css?: SerializedStyles,
-) => {
-  render(<Icon name={icon} size={size} color="#fff" css={css} />);
-
-  const iconTitle = new RegExp(icon.replace('-', ' '), 'i');
-
-  const titleEl = await screen.findByTitle(iconTitle);
-  const svg = titleEl.closest('svg') as unknown as HTMLElement;
-  const element =
-    svg.querySelector('path') ||
-    svg.querySelector('rect') ||
-    svg.querySelector('circle');
-
-  return [svg, element];
-};
-
-const checkFillOrStrokeAttrs = (
-  el: HTMLElement | SVGPathElement | null,
-  name: string,
-) => {
-  expect(el).toBeInTheDocument();
-  try {
-    expect(el).toHaveAttribute('fill');
-  } catch {
-    try {
-      expect(el).toHaveAttribute('stroke');
-    } catch (e) {
-      throw new Error(`the icon "${name}" is missing attribute fill or stroke`);
-    }
-  }
-};
-
-describe('Icons', () => {
-  iconsList.forEach((iconName) => {
-    it(`Renders "${iconName}" icon with attributes`, async () => {
-      const [, path] = await renderIcon(iconName as keyof IMapIcons);
-
-      checkFillOrStrokeAttrs(path, iconName);
-    });
-
-    it(`Renders "${iconName}" icon with custom styles`, async () => {
-      const [icon] = await renderIcon(
-        iconName as keyof IMapIcons,
-        undefined,
-        css`
-          background-color: magenta;
-        `,
-      );
-
-      expect(icon).toHaveStyle(`
-        background-color: magenta;
-      `);
-    });
-
-    it(`Renders "${iconName}" icon with the default size`, async () => {
-      const [icon] = await renderIcon(iconName as keyof IMapIcons);
-
-      expect(icon).toBeInTheDocument();
-      const width = (icon as unknown as SVGElement).getAttribute('width');
-      const height = (icon as unknown as SVGElement).getAttribute('height');
-
-      const sizeRegEx = /^\d+px$/;
-      expect(width).toMatch(sizeRegEx);
-      expect(height).toMatch(sizeRegEx);
-    });
-
-    it(`Renders "${iconName}" icon with a custom size`, async () => {
-      const [icon] = await renderIcon(iconName as keyof IMapIcons, 12);
-
-      expect(icon).toBeInTheDocument();
-
-      if (iconName === 'more-vertical') {
-        expect(icon).toHaveAttribute('width', '3px');
-      } else {
-        expect(icon).toHaveAttribute('width', '12px');
-      }
-      expect(icon).toHaveAttribute('height', '12px');
-    });
-  });
-});
+import { css, SerializedStyles } from '@emotion/react';
+import Icon from '@components/Icon';
+import { iconsList } from '@components/Icon';
+import { screen } from '../../../customTest';
+import { IMapIcons } from './types';
+
+const renderIcon = async (
+  icon: keyof IMapIcons,
+  size?: number,
+  css?: SerializedStyles,
+) => {
+  render(<Icon name={icon} size={size} color="#fff" css={css} />);
+
+  const iconTitle = new RegExp(icon.replace('-', ' '), 'i');
+
+  const titleEl = await screen.findByTitle(iconTitle);
+  const svg = titleEl.closest('svg') as unknown as HTMLElement;
+  const element =
+    svg.querySelector('path') ||
+    svg.querySelector('rect') ||
+    svg.querySelector('circle');
+
+  return [svg, element];
+};
+
+const checkFillOrStrokeAttrs = (
+  el: HTMLElement | SVGPathElement | null,
+  name: string,
+) => {
+  expect(el).toBeInTheDocument();
+  try {
+    expect(el).toHaveAttribute('fill');
+  } catch {
+    try {
+      expect(el).toHaveAttribute('stroke');
+    } catch (e) {
+      throw new Error(`the icon "${name}" is missing attribute fill or stroke`);
+    }
+  }
+};
+
+describe('Icons', () => {
+  iconsList.forEach((iconName) => {
+    it(`Renders "${iconName}" icon with attributes`, async () => {
+      const [, path] = await renderIcon(iconName as keyof IMapIcons);
+
+      checkFillOrStrokeAttrs(path, iconName);
+    });
+
+    it(`Renders "${iconName}" icon with custom styles`, async () => {
+      const [icon] = await renderIcon(
+        iconName as keyof IMapIcons,
+        undefined,
+        css`
+          background-color: magenta;
+        `,
+      );
+
+      expect(icon).toHaveStyle(`
+        background-color: magenta;
+      `);
+    });
+
+    it(`Renders "${iconName}" icon with the default size`, async () => {
+      const [icon] = await renderIcon(iconName as keyof IMapIcons);
+
+      expect(icon).toBeInTheDocument();
+      const width = (icon as unknown as SVGElement).getAttribute('width');
+      const height = (icon as unknown as SVGElement).getAttribute('height');
+
+      const sizeRegEx = /^\d+px$/;
+      expect(width).toMatch(sizeRegEx);
+      expect(height).toMatch(sizeRegEx);
+    });
+
+    it(`Renders "${iconName}" icon with a custom size`, async () => {
+      const [icon] = await renderIcon(iconName as keyof IMapIcons, 12);
+
+      expect(icon).toBeInTheDocument();
+
+      if (iconName === 'more-vertical') {
+        expect(icon).toHaveAttribute('width', '3px');
+      } else {
+        expect(icon).toHaveAttribute('width', '12px');
+      }
+      expect(icon).toHaveAttribute('height', '12px');
+    });
+  });
+});

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

@@ -1,62 +1,62 @@
-import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Typography from '@components/Typography/Typography';
-import Icon, { iconsList } from './index';
-
-export default {
-  title: 'Components/Icons',
-  component: Icon,
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-  argTypes: {
-    color: { control: 'color' },
-  },
-} as Meta<typeof Icon>;
-
-const iconWrapper = css`
-  width: 120px;
-  height: 120px;
-  border: 1px solid grey;
-  border-radius: 5px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-`;
-
-export const Default: StoryObj<typeof Icon> = (
-  args: Parameters<typeof Icon>[0],
-) => {
-  return (
-    <div
-      css={css`
-        display: flex;
-        flex-flow: row wrap;
-        align-items: flex-start;
-        padding-bottom: 54px;
-        gap: 12px;
-      `}>
-      {iconsList.map((iconName) => (
-        <div css={iconWrapper} key={iconName}>
-          <Icon
-            name={iconName}
-            size={
-              args.size && (iconName === 'robot' ? args.size * 2 : args.size)
-            }
-            color={args.color}
-          />
-          <Typography variant="body1">{iconName}</Typography>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-Default.storyName = 'Icons';
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from '@components/Typography/Typography';
+import Icon, { iconsList } from './index';
+
+export default {
+  title: 'Components/Icons',
+  component: Icon,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  argTypes: {
+    color: { control: 'color' },
+  },
+} as Meta<typeof Icon>;
+
+const iconWrapper = css`
+  width: 120px;
+  height: 120px;
+  border: 1px solid grey;
+  border-radius: 5px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`;
+
+export const Default: StoryObj<typeof Icon> = (
+  args: Parameters<typeof Icon>[0],
+) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-flow: row wrap;
+        align-items: flex-start;
+        padding-bottom: 54px;
+        gap: 12px;
+      `}>
+      {iconsList.map((iconName) => (
+        <div css={iconWrapper} key={iconName}>
+          <Icon
+            name={iconName}
+            size={
+              args.size && (iconName === 'robot' ? args.size * 2 : args.size)
+            }
+            color={args.color}
+          />
+          <Typography variant="body1">{iconName}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Default.storyName = 'Icons';

package/src/components/Icon/icons/Archive.tsx

@@ -1,36 +1,36 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Archive = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 15 15"
-    fill="none"
-    {...props}>
-    <title>Archive</title>
-    <g clipPath="url(#clip0_532_12720)">
-      <path
-        d="M12.5 14.2188H2.5C2.04426 14.2184 1.60728 14.0372 1.28503 13.715C0.96277 13.3927 0.781581 12.9557 0.78125 12.5V5C0.78125 4.87568 0.830636 4.75645 0.918544 4.66854C1.00645 4.58064 1.12568 4.53125 1.25 4.53125H13.75C13.8743 4.53125 13.9936 4.58064 14.0815 4.66854C14.1694 4.75645 14.2188 4.87568 14.2188 5V12.5C14.2184 12.9557 14.0372 13.3927 13.715 13.715C13.3927 14.0372 12.9557 14.2184 12.5 14.2188ZM1.71875 5.46875V12.5C1.71908 12.7071 1.8015 12.9056 1.94794 13.0521C2.09438 13.1985 2.2929 13.2809 2.5 13.2813H12.5C12.7071 13.2809 12.9056 13.1985 13.0521 13.0521C13.1985 12.9056 13.2809 12.7071 13.2813 12.5V5.46875H1.71875Z"
-        fill={fill}
-      />
-      <path
-        d="M13.75 5.46876H1.24998C1.17011 5.46875 1.09156 5.44834 1.02179 5.40945C0.952017 5.37056 0.893342 5.31449 0.851329 5.24656C0.809316 5.17862 0.78536 5.10108 0.781733 5.02129C0.778107 4.94149 0.794931 4.8621 0.830609 4.79063L2.53311 1.38563C2.62339 1.20356 2.76288 1.05043 2.93577 0.943609C3.10865 0.836785 3.30801 0.780542 3.51123 0.781257H11.4887C11.692 0.780526 11.8915 0.836833 12.0644 0.943779C12.2373 1.05073 12.3767 1.20402 12.4669 1.38626L14.1694 4.79063C14.205 4.8621 14.2219 4.94149 14.2182 5.02129C14.2146 5.10108 14.1907 5.17862 14.1486 5.24656C14.1066 5.31449 14.048 5.37056 13.9782 5.40945C13.9084 5.44834 13.8299 5.46875 13.75 5.46876ZM2.00873 4.53126H12.9912L11.6281 1.80501C11.6153 1.779 11.5955 1.75711 11.5708 1.74186C11.5462 1.7266 11.5177 1.7186 11.4887 1.71876H3.51123C3.48234 1.71869 3.45401 1.72666 3.42939 1.74178C3.40477 1.7569 3.38485 1.77858 3.37186 1.80438L2.00873 4.53126Z"
-        fill={fill}
-      />
-      <path
-        d="M7.5 11.7188C7.37568 11.7188 7.25645 11.6694 7.16854 11.5815C7.08064 11.4935 7.03125 11.3743 7.03125 11.25V7.5C7.03125 7.37568 7.08064 7.25645 7.16854 7.16854C7.25645 7.08064 7.37568 7.03125 7.5 7.03125C7.62432 7.03125 7.74355 7.08064 7.83146 7.16854C7.91936 7.25645 7.96875 7.37568 7.96875 7.5V11.25C7.96875 11.3743 7.91936 11.4935 7.83146 11.5815C7.74355 11.6694 7.62432 11.7188 7.5 11.7188Z"
-        fill={fill}
-      />
-      <path
-        d="M7.50003 11.7188C7.43846 11.7189 7.37747 11.7069 7.32061 11.6832C7.26375 11.6596 7.21214 11.625 7.16878 11.5813L5.29378 9.70628C5.21098 9.61742 5.1659 9.49989 5.16804 9.37845C5.17018 9.25701 5.21938 9.14115 5.30526 9.05526C5.39115 8.96938 5.50701 8.92018 5.62845 8.91804C5.74989 8.9159 5.86742 8.96098 5.95628 9.04378L7.50003 10.5869L9.04378 9.04378C9.13264 8.96098 9.25016 8.9159 9.3716 8.91804C9.49304 8.92018 9.60891 8.96938 9.69479 9.05526C9.78067 9.14115 9.82987 9.25701 9.83201 9.37845C9.83415 9.49989 9.78908 9.61742 9.70628 9.70628L7.83128 11.5813C7.78791 11.625 7.7363 11.6596 7.67944 11.6832C7.62258 11.7069 7.56159 11.7189 7.50003 11.7188Z"
-        fill={fill}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_532_12720">
-        <rect width={size} height={size} fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Archive = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none"
+    {...props}>
+    <title>Archive</title>
+    <g clipPath="url(#clip0_532_12720)">
+      <path
+        d="M12.5 14.2188H2.5C2.04426 14.2184 1.60728 14.0372 1.28503 13.715C0.96277 13.3927 0.781581 12.9557 0.78125 12.5V5C0.78125 4.87568 0.830636 4.75645 0.918544 4.66854C1.00645 4.58064 1.12568 4.53125 1.25 4.53125H13.75C13.8743 4.53125 13.9936 4.58064 14.0815 4.66854C14.1694 4.75645 14.2188 4.87568 14.2188 5V12.5C14.2184 12.9557 14.0372 13.3927 13.715 13.715C13.3927 14.0372 12.9557 14.2184 12.5 14.2188ZM1.71875 5.46875V12.5C1.71908 12.7071 1.8015 12.9056 1.94794 13.0521C2.09438 13.1985 2.2929 13.2809 2.5 13.2813H12.5C12.7071 13.2809 12.9056 13.1985 13.0521 13.0521C13.1985 12.9056 13.2809 12.7071 13.2813 12.5V5.46875H1.71875Z"
+        fill={fill}
+      />
+      <path
+        d="M13.75 5.46876H1.24998C1.17011 5.46875 1.09156 5.44834 1.02179 5.40945C0.952017 5.37056 0.893342 5.31449 0.851329 5.24656C0.809316 5.17862 0.78536 5.10108 0.781733 5.02129C0.778107 4.94149 0.794931 4.8621 0.830609 4.79063L2.53311 1.38563C2.62339 1.20356 2.76288 1.05043 2.93577 0.943609C3.10865 0.836785 3.30801 0.780542 3.51123 0.781257H11.4887C11.692 0.780526 11.8915 0.836833 12.0644 0.943779C12.2373 1.05073 12.3767 1.20402 12.4669 1.38626L14.1694 4.79063C14.205 4.8621 14.2219 4.94149 14.2182 5.02129C14.2146 5.10108 14.1907 5.17862 14.1486 5.24656C14.1066 5.31449 14.048 5.37056 13.9782 5.40945C13.9084 5.44834 13.8299 5.46875 13.75 5.46876ZM2.00873 4.53126H12.9912L11.6281 1.80501C11.6153 1.779 11.5955 1.75711 11.5708 1.74186C11.5462 1.7266 11.5177 1.7186 11.4887 1.71876H3.51123C3.48234 1.71869 3.45401 1.72666 3.42939 1.74178C3.40477 1.7569 3.38485 1.77858 3.37186 1.80438L2.00873 4.53126Z"
+        fill={fill}
+      />
+      <path
+        d="M7.5 11.7188C7.37568 11.7188 7.25645 11.6694 7.16854 11.5815C7.08064 11.4935 7.03125 11.3743 7.03125 11.25V7.5C7.03125 7.37568 7.08064 7.25645 7.16854 7.16854C7.25645 7.08064 7.37568 7.03125 7.5 7.03125C7.62432 7.03125 7.74355 7.08064 7.83146 7.16854C7.91936 7.25645 7.96875 7.37568 7.96875 7.5V11.25C7.96875 11.3743 7.91936 11.4935 7.83146 11.5815C7.74355 11.6694 7.62432 11.7188 7.5 11.7188Z"
+        fill={fill}
+      />
+      <path
+        d="M7.50003 11.7188C7.43846 11.7189 7.37747 11.7069 7.32061 11.6832C7.26375 11.6596 7.21214 11.625 7.16878 11.5813L5.29378 9.70628C5.21098 9.61742 5.1659 9.49989 5.16804 9.37845C5.17018 9.25701 5.21938 9.14115 5.30526 9.05526C5.39115 8.96938 5.50701 8.92018 5.62845 8.91804C5.74989 8.9159 5.86742 8.96098 5.95628 9.04378L7.50003 10.5869L9.04378 9.04378C9.13264 8.96098 9.25016 8.9159 9.3716 8.91804C9.49304 8.92018 9.60891 8.96938 9.69479 9.05526C9.78067 9.14115 9.82987 9.25701 9.83201 9.37845C9.83415 9.49989 9.78908 9.61742 9.70628 9.70628L7.83128 11.5813C7.78791 11.625 7.7363 11.6596 7.67944 11.6832C7.62258 11.7069 7.56159 11.7189 7.50003 11.7188Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_532_12720">
+        <rect width={size} height={size} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/Icon/icons/ArrowDown.tsx

@@ -1,27 +1,27 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const ArrowDown = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 7 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}>
-    <title>Arrow Down</title>
-    <path
-      d="M3.1779 7.07707L3.1779 0.922729"
-      stroke={fill}
-      strokeWidth="0.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5.93896 4.59485L3.17796 7.0771L0.416504 4.59485"
-      stroke={fill}
-      strokeWidth="0.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const ArrowDown = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <title>Arrow Down</title>
+    <path
+      d="M3.1779 7.07707L3.1779 0.922729"
+      stroke={fill}
+      strokeWidth="0.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5.93896 4.59485L3.17796 7.0771L0.416504 4.59485"
+      stroke={fill}
+      strokeWidth="0.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/Icon/icons/ArrowUp.tsx

@@ -1,27 +1,27 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const ArrowUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 7 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}>
-    <title>Arrow Up</title>
-    <path
-      d="M3.17757 0.92293L3.17757 7.07727"
-      stroke={fill}
-      strokeWidth="0.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M0.416507 3.40515L3.17751 0.922901L5.93896 3.40515"
-      stroke={fill}
-      strokeWidth="0.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const ArrowUp = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <title>Arrow Up</title>
+    <path
+      d="M3.17757 0.92293L3.17757 7.07727"
+      stroke={fill}
+      strokeWidth="0.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M0.416507 3.40515L3.17751 0.922901L5.93896 3.40515"
+      stroke={fill}
+      strokeWidth="0.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/Icon/icons/Attention.tsx

@@ -1,23 +1,23 @@
-import { SVGProps } from '@components/Icon/types';
-
-export const Attention = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
-  <svg
-    width={`${size}px`}
-    height={`${size}px`}
-    fill="none"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    {...props}>
-    <title>Attention</title>
-    <path
-      d="M10 1.90479L2.85718 6.1905V13.8095L10 18.5715L17.1429 13.8095V6.1905L10 1.90479Z"
-      stroke={fill}
-      strokeWidth="1.2"
-    />
-    <path
-      d="M10.7004 6.19048C10.7004 5.80388 10.387 5.49048 10.0004 5.49048C9.6138 5.49048 9.3004 5.80388 9.3004 6.19048V10.1587C9.3004 10.5453 9.6138 10.8587 10.0004 10.8587C10.387 10.8587 10.7004 10.5453 10.7004 10.1587V6.19048ZM9.99622 12.1746C9.44393 12.1746 8.99622 12.6224 8.99622 13.1746C8.99622 13.7269 9.44393 14.1746 9.99622 14.1746H10.0033C10.5556 14.1746 11.0033 13.7269 11.0033 13.1746C11.0033 12.6224 10.5556 12.1746 10.0033 12.1746H9.99622Z"
-      fill={fill}
-    />
-  </svg>
-);
+import { SVGProps } from '@components/Icon/types';
+
+export const Attention = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
+    <title>Attention</title>
+    <path
+      d="M10 1.90479L2.85718 6.1905V13.8095L10 18.5715L17.1429 13.8095V6.1905L10 1.90479Z"
+      stroke={fill}
+      strokeWidth="1.2"
+    />
+    <path
+      d="M10.7004 6.19048C10.7004 5.80388 10.387 5.49048 10.0004 5.49048C9.6138 5.49048 9.3004 5.80388 9.3004 6.19048V10.1587C9.3004 10.5453 9.6138 10.8587 10.0004 10.8587C10.387 10.8587 10.7004 10.5453 10.7004 10.1587V6.19048ZM9.99622 12.1746C9.44393 12.1746 8.99622 12.6224 8.99622 13.1746C8.99622 13.7269 9.44393 14.1746 9.99622 14.1746H10.0033C10.5556 14.1746 11.0033 13.7269 11.0033 13.1746C11.0033 12.6224 10.5556 12.1746 10.0033 12.1746H9.99622Z"
+      fill={fill}
+    />
+  </svg>
+);