@ssa-ui-kit/core 0.0.1-alpha

package/src/components/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -0,0 +1,90 @@
+import { Fragment } from 'react';
+import { Meta } from '@storybook/react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+import Typography from '@components/Typography';
+import Button from '@components/Button';
+import Radio from '@components/Radio';
+
+import { IFormRadioGroupProps } from './types';
+import FormRadioGroup from './FormRadioGroup';
+
+export default {
+  title: 'Components/Radio Buttons/FormRadioGroup',
+  component: FormRadioGroup,
+  argTypes: {
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    initialState: {
+      control: {
+        disable: true,
+      },
+    },
+    control: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+} as Meta<typeof FormRadioGroup>;
+
+type DemoForm = {
+  tree: string;
+};
+
+export const FormRadioGroupStory = (args: IFormRadioGroupProps<DemoForm>) => {
+  const { name, isRequired, initialState } = args;
+
+  const { handleSubmit, control } = useForm<DemoForm>();
+
+  const onSubmit: SubmitHandler<DemoForm> = (data: DemoForm) =>
+    alert(JSON.stringify(data, null, ' '));
+
+  return (
+    <Fragment>
+      <Typography variant="h4">Form Radio Group</Typography>
+
+      <form onSubmit={handleSubmit(onSubmit)} css={{ marginTop: '10px' }}>
+        <FormRadioGroup
+          name={name}
+          isRequired={isRequired}
+          initialState={initialState}
+          control={control}>
+          <Radio id="radio1" value="oak" text="Oak" />
+          <Radio id="radio2" value="spruce" text="Spruce" />
+          <Radio
+            id="radio3"
+            value="chestnut"
+            text="Chestnut"
+            isDisabled={true}
+          />
+        </FormRadioGroup>
+
+        <Button
+          size="small"
+          type="submit"
+          text="Submit"
+          css={{
+            marginTop: '7px',
+          }}
+        />
+      </form>
+    </Fragment>
+  );
+};
+
+FormRadioGroupStory.args = {
+  name: 'tree',
+  isRequired: true,
+};
+FormRadioGroupStory.storyName = 'FormRadioGroup';

package/src/components/FormRadioGroup/FormRadioGroup.tsx

@@ -0,0 +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;

package/src/components/FormRadioGroup/index.ts

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

package/src/components/FormRadioGroup/types.ts

@@ -0,0 +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;

package/src/components/Icon/Icon.tsx

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

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

@@ -0,0 +1,63 @@
+import Icon from '@components/Icon';
+import { iconsList } from '@components/Icon';
+import { screen, waitFor } from '../../../customTest';
+import { IMapIcons } from './types';
+
+const renderIcon = async (icon: keyof IMapIcons) => {
+  render(<Icon name={icon} size={12} color="#fff" />);
+
+  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(`Render ${iconName} icon with attributes`, async () => {
+      const [icon, path] = await renderIcon(iconName as keyof IMapIcons);
+
+      await waitFor(() => {
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveAttribute('height', '12px');
+
+        checkFillOrStrokeAttrs(path, iconName);
+      });
+    });
+  });
+
+  it('Default render with 24px', async () => {
+    render(<Icon name="calendar" color="#fff" />);
+
+    await waitFor(() => {
+      const icon = screen
+        .getByTitle('Calendar')
+        .closest('svg') as unknown as HTMLElement;
+
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveAttribute('height', '24px');
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+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} color={args.color} />
+          <Typography variant="body1">{iconName}</Typography>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Default.storyName = 'Icons';

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

@@ -0,0 +1,35 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Archive = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none">
+    <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

@@ -0,0 +1,26 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const ArrowDown = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <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

@@ -0,0 +1,26 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const ArrowUp = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <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

@@ -0,0 +1,22 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Attention = ({ fill = '#000', size = 24 }: 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">
+    <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>
+);

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

@@ -0,0 +1,28 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Bin = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none">
+    <title>Bin</title>
+    <path
+      d="M9.14062 11.1328C9.39947 11.1328 9.60938 10.9229 9.60938 10.6641V5.97656C9.60938 5.71772 9.39947 5.50781 9.14062 5.50781C8.88178 5.50781 8.67188 5.71772 8.67188 5.97656V10.6641C8.67188 10.9229 8.88178 11.1328 9.14062 11.1328Z"
+      fill={fill}
+    />
+    <path
+      d="M5.85938 11.1328C6.11822 11.1328 6.32812 10.9229 6.32812 10.6641V5.97656C6.32812 5.71772 6.11822 5.50781 5.85938 5.50781C5.60053 5.50781 5.39062 5.71772 5.39062 5.97656V10.6641C5.39062 10.9229 5.60053 11.1328 5.85938 11.1328Z"
+      fill={fill}
+    />
+    <path
+      d="M9.375 1.99219C9.63384 1.99219 9.84375 1.78228 9.84375 1.52344C9.84375 1.26459 9.63384 1.05469 9.375 1.05469H5.625C5.36616 1.05469 5.15625 1.26459 5.15625 1.52344C5.15625 1.78228 5.36616 1.99219 5.625 1.99219H9.375Z"
+      fill={fill}
+    />
+    <path
+      d="M2.34375 2.46094C2.08491 2.46094 1.875 2.67084 1.875 2.92969C1.875 3.18853 2.08491 3.39844 2.34375 3.39844H2.8125V12.0234C2.8125 13.0828 3.675 13.9453 4.73438 13.9453H10.2656C11.325 13.9453 12.1875 13.0828 12.1875 12.0234V3.39844H12.6562C12.9151 3.39844 13.125 3.18853 13.125 2.92969C13.125 2.67084 12.9151 2.46094 12.6562 2.46094H11.7188H3.28125H2.34375ZM11.25 3.39844V12.0234C11.25 12.5672 10.8094 13.0078 10.2656 13.0078H4.73438C4.19063 13.0078 3.75 12.5672 3.75 12.0234V3.39844H11.25Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -0,0 +1,16 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Calendar = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Calendar</title>
+    <path
+      d="M3.61111 0C1.6267 0 0 1.6267 0 3.61111V16.3889C0 18.3733 1.6267 20 3.61111 20H16.3889C18.3733 20 20 18.3733 20 16.3889V3.61111C20 1.6267 18.3733 0 16.3889 0H3.61111ZM3.61111 1.66667H16.3889C17.4723 1.66667 18.3333 2.52774 18.3333 3.61111V4.44444H1.66667V3.61111C1.66667 2.52774 2.52774 1.66667 3.61111 1.66667ZM1.66667 6.11111H18.3333V16.3889C18.3333 17.4723 17.4723 18.3333 16.3889 18.3333H3.61111C2.52774 18.3333 1.66667 17.4723 1.66667 16.3889V6.11111ZM5.27778 8.33333C4.90942 8.33333 4.55615 8.47966 4.29569 8.74013C4.03522 9.0006 3.88889 9.35387 3.88889 9.72222C3.88889 10.0906 4.03522 10.4438 4.29569 10.7043C4.55615 10.9648 4.90942 11.1111 5.27778 11.1111C5.64613 11.1111 5.9994 10.9648 6.25987 10.7043C6.52034 10.4438 6.66667 10.0906 6.66667 9.72222C6.66667 9.35387 6.52034 9.0006 6.25987 8.74013C5.9994 8.47966 5.64613 8.33333 5.27778 8.33333ZM10 8.33333C9.63164 8.33333 9.27837 8.47966 9.01791 8.74013C8.75744 9.0006 8.61111 9.35387 8.61111 9.72222C8.61111 10.0906 8.75744 10.4438 9.01791 10.7043C9.27837 10.9648 9.63164 11.1111 10 11.1111C10.3684 11.1111 10.7216 10.9648 10.9821 10.7043C11.2426 10.4438 11.3889 10.0906 11.3889 9.72222C11.3889 9.35387 11.2426 9.0006 10.9821 8.74013C10.7216 8.47966 10.3684 8.33333 10 8.33333ZM14.7222 8.33333C14.3539 8.33333 14.0006 8.47966 13.7401 8.74013C13.4797 9.0006 13.3333 9.35387 13.3333 9.72222C13.3333 10.0906 13.4797 10.4438 13.7401 10.7043C14.0006 10.9648 14.3539 11.1111 14.7222 11.1111C15.0906 11.1111 15.4438 10.9648 15.7043 10.7043C15.9648 10.4438 16.1111 10.0906 16.1111 9.72222C16.1111 9.35387 15.9648 9.0006 15.7043 8.74013C15.4438 8.47966 15.0906 8.33333 14.7222 8.33333ZM5.27778 13.3333C4.90942 13.3333 4.55615 13.4797 4.29569 13.7401C4.03522 14.0006 3.88889 14.3539 3.88889 14.7222C3.88889 15.0906 4.03522 15.4438 4.29569 15.7043C4.55615 15.9648 4.90942 16.1111 5.27778 16.1111C5.64613 16.1111 5.9994 15.9648 6.25987 15.7043C6.52034 15.4438 6.66667 15.0906 6.66667 14.7222C6.66667 14.3539 6.52034 14.0006 6.25987 13.7401C5.9994 13.4797 5.64613 13.3333 5.27778 13.3333ZM10 13.3333C9.63164 13.3333 9.27837 13.4797 9.01791 13.7401C8.75744 14.0006 8.61111 14.3539 8.61111 14.7222C8.61111 15.0906 8.75744 15.4438 9.01791 15.7043C9.27837 15.9648 9.63164 16.1111 10 16.1111C10.3684 16.1111 10.7216 15.9648 10.9821 15.7043C11.2426 15.4438 11.3889 15.0906 11.3889 14.7222C11.3889 14.3539 11.2426 14.0006 10.9821 13.7401C10.7216 13.4797 10.3684 13.3333 10 13.3333Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -0,0 +1,20 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const CarrotDown = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 18 10"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Carrot down</title>
+    <path
+      d="M17 1L9 9L1 1"
+      stroke={fill}
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </svg>
+);

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

@@ -0,0 +1,20 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const CarrotLeft = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 11 18"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Carrot left</title>
+    <path
+      d="M9.5 0.999999L1.5 9L9.5 17"
+      stroke={fill}
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </svg>
+);

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

@@ -0,0 +1,20 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const CarrotRight = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 11 18"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Carrot right</title>
+    <path
+      d="M1.5 0.999999L9.5 9L1.5 17"
+      stroke={fill}
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </svg>
+);

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

@@ -0,0 +1,20 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const CarrotUp = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 18 10"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Carrot up</title>
+    <path
+      d="M17 9.5L9 1.5L1 9.5"
+      stroke={fill}
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+    />
+  </svg>
+);

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

@@ -0,0 +1,16 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Change = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none">
+    <title>Change</title>
+    <path
+      d="M4.3628 1.24246C4.20043 1.2473 4.04632 1.31518 3.93312 1.43169L1.43311 3.93289C1.37491 3.99095 1.32874 4.05988 1.29723 4.13582C1.26573 4.21175 1.24951 4.29316 1.24951 4.37537C1.24951 4.45758 1.26573 4.53898 1.29723 4.61492C1.32874 4.69085 1.37491 4.75979 1.43311 4.81785L3.93312 7.31911C3.99087 7.37893 4.05998 7.42662 4.1364 7.4594C4.21283 7.49217 4.29502 7.50939 4.37817 7.51C4.46132 7.51062 4.54376 7.49464 4.62066 7.463C4.69755 7.43136 4.76736 7.38463 4.826 7.32567C4.88463 7.26671 4.93092 7.19671 4.96213 7.11964C4.99335 7.04257 5.00888 6.95999 5.0078 6.87685C5.00673 6.7937 4.98907 6.71159 4.95588 6.63535C4.92268 6.55911 4.8746 6.49028 4.81446 6.43285L3.38258 4.99857H13.1238C13.2897 4.99857 13.4488 4.93265 13.5662 4.81532C13.6835 4.698 13.7494 4.53884 13.7494 4.37292C13.7494 4.20699 13.6835 4.04791 13.5662 3.93058C13.4488 3.81325 13.2897 3.74733 13.1238 3.74733H3.38868L4.81446 2.31788C4.90548 2.23039 4.96787 2.11734 4.99342 1.9937C5.01897 1.87006 5.00647 1.74158 4.95759 1.62518C4.9087 1.50878 4.82571 1.4099 4.71954 1.34158C4.61337 1.27326 4.489 1.23873 4.3628 1.24246ZM10.6189 7.49364C10.4953 7.49464 10.3747 7.53226 10.2725 7.60177C10.1703 7.67128 10.091 7.76955 10.0446 7.88414C9.99819 7.99873 9.98683 8.12455 10.0119 8.2456C10.037 8.36665 10.0974 8.47752 10.1856 8.56423L11.6199 9.99973H1.87623C1.71284 10.0033 1.55734 10.0708 1.44306 10.1876C1.32877 10.3044 1.26477 10.4613 1.26477 10.6247C1.26477 10.7882 1.32877 10.9451 1.44306 11.062C1.55734 11.1788 1.71284 11.2462 1.87623 11.2498H11.6162L10.1856 12.6841C10.1201 12.7401 10.067 12.8091 10.0295 12.8866C9.99196 12.9641 9.97088 13.0486 9.96756 13.1347C9.96424 13.2208 9.97874 13.3066 10.0102 13.3868C10.0416 13.467 10.0893 13.5399 10.1502 13.6009C10.2111 13.6618 10.2839 13.7094 10.3641 13.7409C10.4444 13.7723 10.5302 13.7868 10.6163 13.7835C10.7024 13.7801 10.7868 13.759 10.8644 13.7215C10.9419 13.684 11.0109 13.6309 11.0669 13.5655L13.5669 11.0654C13.6833 10.9483 13.7487 10.7899 13.7487 10.6247C13.7487 10.4596 13.6833 10.3012 13.5669 10.1841L11.0669 7.68287C11.0087 7.623 10.939 7.57537 10.8621 7.54287C10.7851 7.51038 10.7024 7.49364 10.6189 7.49364Z"
+      fill={fill}
+    />
+  </svg>
+);

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

@@ -0,0 +1,20 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Check = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 11 8"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Check</title>
+    <path
+      d="M1 3.83L3.83 6.66L9.5 1"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,26 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const CheckCircle = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <title>Check circle</title>
+    <path
+      d="M10.0003 18.3334C14.5837 18.3334 18.3337 14.5834 18.3337 10.0001C18.3337 5.41675 14.5837 1.66675 10.0003 1.66675C5.41699 1.66675 1.66699 5.41675 1.66699 10.0001C1.66699 14.5834 5.41699 18.3334 10.0003 18.3334Z"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.45801 9.99993L8.81634 12.3583L13.5413 7.6416"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,22 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Circle = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 20 21"
+    fill="#fff">
+    <title>Circle</title>
+    <rect x="0.7" y="1.39995" width="18.6" height="18.6" rx="9.3" fill="none" />
+    <rect
+      x="0.7"
+      y="1.39995"
+      width="18.6"
+      height="18.6"
+      rx="9.3"
+      stroke={fill}
+      strokeWidth="1.4"
+    />
+  </svg>
+);

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

@@ -0,0 +1,23 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Copy = ({ fill = '#000', size = 15 }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={`${size}px`}
+    height={`${size}px`}
+    viewBox="0 0 15 15"
+    fill="none">
+    <title>Copy</title>
+    <g clipPath="url(#clip0_532_12716)">
+      <path
+        d="M12.8755 14.5239H5.40479C4.49601 14.5239 3.75684 13.7848 3.75684 12.876V5.40527C3.75684 4.4965 4.49601 3.75732 5.40479 3.75732H12.8755C13.7843 3.75732 14.5234 4.4965 14.5234 5.40527V12.876C14.5234 13.7848 13.7843 14.5239 12.8755 14.5239ZM5.40479 4.85596C5.10189 4.85596 4.85547 5.10238 4.85547 5.40527V12.876C4.85547 13.1789 5.10189 13.4253 5.40479 13.4253H12.8755C13.1784 13.4253 13.4248 13.1789 13.4248 12.876V5.40527C13.4248 5.10238 13.1784 4.85596 12.8755 4.85596H5.40479ZM2.6582 10.1294H2.10889C1.80599 10.1294 1.55957 9.88297 1.55957 9.58008V2.10938C1.55957 1.80648 1.80599 1.56006 2.10889 1.56006H9.57959C9.88249 1.56006 10.1289 1.80648 10.1289 2.10938V2.63123H11.2275V2.10938C11.2275 1.2006 10.4884 0.461426 9.57959 0.461426H2.10889C1.20011 0.461426 0.460938 1.2006 0.460938 2.10938V9.58008C0.460938 10.4889 1.20011 11.228 2.10889 11.228H2.6582V10.1294Z"
+        fill={fill}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_532_12716">
+        <rect width={size} height={size} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -0,0 +1,27 @@
+import { SVGProps } from '@components/Icon/types';
+
+export const Cross = ({ fill = '#000', size = 24 }: SVGProps) => (
+  <svg
+    width={`${size}px`}
+    height={`${size}px`}
+    fill="none"
+    viewBox="0 0 8 8"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>Cross</title>
+    <path
+      d="M1 6.66L6.66 1"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.66 6.66L1 1"
+      stroke={fill}
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);