@ssa-ui-kit/core 0.0.7-alpha → 0.0.8-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.7-alpha",
+  "version": "0.0.8-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Icon/Icon.tsx

@@ -1,7 +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} />;
+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,10 +1,15 @@
+import { css, SerializedStyles } from '@emotion/react';
 import Icon from '@components/Icon';
 import { iconsList } from '@components/Icon';
-import { screen, waitFor } from '../../../customTest';
+import { screen } from '../../../customTest';
 import { IMapIcons } from './types';
 
-const renderIcon = async (icon: keyof IMapIcons) => {
-  render(<Icon name={icon} size={12} color="#fff" />);
+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');
 
@@ -29,35 +34,56 @@ const checkFillOrStrokeAttrs = (
     try {
       expect(el).toHaveAttribute('stroke');
     } catch (e) {
-      throw new Error(`the icon ${name} is missing attribute fill or stroke`);
+      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);
+    it(`Renders "${iconName}" icon with attributes`, async () => {
+      const [, path] = await renderIcon(iconName as keyof IMapIcons);
+
+      checkFillOrStrokeAttrs(path, iconName);
+    });
 
-      await waitFor(() => {
-        expect(icon).toBeInTheDocument();
-        expect(icon).toHaveAttribute('height', '12px');
+    it(`Renders "${iconName}" icon with custom styles`, async () => {
+      const [icon] = await renderIcon(
+        iconName as keyof IMapIcons,
+        undefined,
+        css`
+          background-color: magenta;
+        `,
+      );
 
-        checkFillOrStrokeAttrs(path, iconName);
-      });
+      expect(icon).toHaveStyle(`
+        background-color: magenta;
+      `);
     });
-  });
 
-  it('Default render with 24px', async () => {
-    render(<Icon name="calendar" color="#fff" />);
+    it(`Renders "${iconName}" icon with the default size`, async () => {
+      const [icon] = await renderIcon(iconName as keyof IMapIcons);
 
-    await waitFor(() => {
-      const icon = screen
-        .getByTitle('Calendar')
-        .closest('svg') as unknown as HTMLElement;
+      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();
-      expect(icon).toHaveAttribute('height', '24px');
+
+      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

@@ -45,7 +45,13 @@ export const Default: StoryObj<typeof Icon> = (
       `}>
       {iconsList.map((iconName) => (
         <div css={iconWrapper} key={iconName}>
-          <Icon name={iconName} size={args.size} color={args.color} />
+          <Icon
+            name={iconName}
+            size={
+              args.size && (iconName === 'robot' ? args.size * 2 : args.size)
+            }
+            color={args.color}
+          />
           <Typography variant="body1">{iconName}</Typography>
         </div>
       ))}

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Archive = ({ fill = '#000', size = 15 }: SVGProps) => (
+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">
+    fill="none"
+    {...props}>
     <title>Archive</title>
     <g clipPath="url(#clip0_532_12720)">
       <path

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const ArrowDown = ({ fill = '#000', size = 24 }: SVGProps) => (
+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">
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
     <title>Arrow Down</title>
     <path
       d="M3.1779 7.07707L3.1779 0.922729"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const ArrowUp = ({ fill = '#000', size = 24 }: SVGProps) => (
+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">
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
     <title>Arrow Up</title>
     <path
       d="M3.17757 0.92293L3.17757 7.07727"

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

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

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Bin = ({ fill = '#000', size = 15 }: SVGProps) => (
+export const Bin = ({ 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">
+    fill="none"
+    {...props}>
     <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"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Calendar = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Calendar = ({ fill = '#000', size = 24, ...props }: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <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"

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

@@ -1,12 +1,17 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const CarrotDown = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const CarrotDown = ({
+  fill = '#000',
+  size = 24,
+  ...props
+}: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Carrot down</title>
     <path
       d="M17 1L9 9L1 1"

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

@@ -1,12 +1,17 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const CarrotLeft = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const CarrotLeft = ({
+  fill = '#000',
+  size = 24,
+  ...props
+}: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Carrot left</title>
     <path
       d="M9.5 0.999999L1.5 9L9.5 17"

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

@@ -1,12 +1,17 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const CarrotRight = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const CarrotRight = ({
+  fill = '#000',
+  size = 24,
+  ...props
+}: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Carrot right</title>
     <path
       d="M1.5 0.999999L9.5 9L1.5 17"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const CarrotUp = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const CarrotUp = ({ fill = '#000', size = 24, ...props }: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Carrot up</title>
     <path
       d="M17 9.5L9 1.5L1 9.5"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Change = ({ fill = '#000', size = 15 }: SVGProps) => (
+export const Change = ({ 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">
+    fill="none"
+    {...props}>
     <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"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Chart = ({ fill = '#000', size = 15 }: SVGProps) => (
+export const Chart = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 22 22"
-    fill="none">
+    fill="none"
+    {...props}>
     <title>Chart</title>
     <g clipPath="url(#clip0_2353_10249)">
       <path

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Check = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Check = ({ fill = '#000', size = 24, ...props }: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Check</title>
     <path
       d="M1 3.83L3.83 6.66L9.5 1"

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

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

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

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

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Clock = ({ fill = '#000', size = 15 }: SVGProps) => (
+export const Clock = ({ fill = '#000', size = 15, ...props }: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 24 24"
-    fill="none">
+    fill="none"
+    {...props}>
     <title>Clock</title>
     <circle
       cx="12.1001"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Copy = ({ fill = '#000', size = 15 }: SVGProps) => (
+export const Copy = ({ 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">
+    fill="none"
+    {...props}>
     <title>Copy</title>
     <g clipPath="url(#clip0_532_12716)">
       <path

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Cross = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Cross = ({ fill = '#000', size = 24, ...props }: 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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Cross</title>
     <path
       d="M1 6.66L6.66 1"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Diet = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Diet = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Diet</title>
     <path
       d="M15.3794 1.6875C15.3294 1.68734 15.2788 1.69189 15.2278 1.70215C14.1195 1.92375 13.0319 2.82406 12.4431 3.96241C8.37168 4.3361 5.25 9.29549 5.25 15.5625C5.25 19.2844 8.27812 22.3125 12 22.3125C15.7219 22.3125 18.75 19.2844 18.75 15.5625C18.75 13.7303 18.0635 12.4566 17.3994 11.2251C16.7443 10.009 16.125 8.86013 16.125 7.125C16.125 5.77573 15.2807 4.62307 14.094 4.1587C14.5181 3.61873 15.077 3.26196 15.5222 3.17286C15.9283 3.09186 16.1917 2.69641 16.1104 2.29029C16.0395 1.93493 15.7292 1.68864 15.3794 1.6875ZM12.9441 5.43824C13.8714 5.4419 14.625 6.19689 14.625 7.125C14.625 9.2385 15.3982 10.6714 16.0796 11.9363C16.7077 13.1018 17.25 14.1086 17.25 15.5625C17.25 18.4575 14.895 20.8125 12 20.8125C9.105 20.8125 6.75 18.4575 6.75 15.5625C6.75 10.0089 9.49693 5.4871 12.884 5.4397C12.9054 5.44185 12.9236 5.43802 12.9441 5.43824ZM12 11.4375C10.2319 11.4375 9 13.6247 9 15.5874C9 17.5599 10.2337 18.9375 12 18.9375C13.7662 18.9375 15 17.5599 15 15.5874C15 13.6247 13.7681 11.4375 12 11.4375ZM12 12.9375C12.6611 12.9375 13.5 14.1849 13.5 15.5874C13.5 16.7109 12.9113 17.4375 12 17.4375C11.0887 17.4375 10.5 16.7109 10.5 15.5874C10.5 14.1849 11.3389 12.9375 12 12.9375Z"

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Email = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Email = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     fill="none"
     viewBox="0 0 18 14"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Email</title>
     <path
       fillRule="evenodd"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Filter = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Filter = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 21 20"
-    fill="none">
+    fill="none"
+    {...props}>
     <title>Filter</title>
     <path
       fillRule="evenodd"

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

@@ -1,12 +1,13 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Home = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Home = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 18 20"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Home</title>
     <path
       d="M8.97559 0.250119C8.81566 0.25558 8.66168 0.312041 8.53613 0.411252L1.42969 6.00988C0.527739 6.7207 0 7.80687 0 8.9552V18.5001C0 19.1819 0.568203 19.7501 1.25 19.7501H6.25C6.9318 19.7501 7.5 19.1819 7.5 18.5001V13.5001C7.5 13.3526 7.60248 13.2501 7.75 13.2501H10.25C10.3975 13.2501 10.5 13.3526 10.5 13.5001V18.5001C10.5 19.1819 11.0682 19.7501 11.75 19.7501H16.75C17.4318 19.7501 18 19.1819 18 18.5001V8.9552C18 7.80687 17.4723 6.7207 16.5703 6.00988L9.46387 0.411252C9.32518 0.301689 9.15225 0.244623 8.97559 0.250119ZM9 1.9552L15.6426 7.1886C16.1846 7.61578 16.5 8.26552 16.5 8.9552V18.2501H12V13.5001C12 12.5426 11.2075 11.7501 10.25 11.7501H7.75C6.79252 11.7501 6 12.5426 6 13.5001V18.2501H1.5V8.9552C1.5 8.26552 1.81537 7.61578 2.35742 7.1886L9 1.9552Z"

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

@@ -1,13 +1,18 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Information = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Information = ({
+  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">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Information</title>
     <path
       d="M9.99998 17.8889C14.3651 17.8889 17.9365 14.3175 17.9365 9.95238C17.9365 5.5873 14.3651 2.01587 9.99998 2.01587C5.6349 2.01587 2.06348 5.5873 2.06348 9.95238C2.06348 14.3175 5.6349 17.8889 9.99998 17.8889Z"

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Invisible = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Invisible = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Invisible</title>
     <path
       d="M14.5299 9.46992L9.46992 14.5299C8.81992 13.8799 8.41992 12.9899 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C12.9899 8.41992 13.8799 8.81992 14.5299 9.46992Z"

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const Lock = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const Lock = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     fill="none"
     viewBox="0 0 16 21"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Lock</title>
     <path
       d="M13.625 8.41602H13V5.91602C13 3.15852 10.7575 0.916016 8 0.916016C5.2425 0.916016 3 3.15852 3 5.91602V8.41602H2.375C1.34167 8.41602 0.5 9.25685 0.5 10.291V19.041C0.5 20.0752 1.34167 20.916 2.375 20.916H13.625C14.6583 20.916 15.5 20.0752 15.5 19.041V10.291C15.5 9.25685 14.6583 8.41602 13.625 8.41602ZM4.66667 5.91602C4.66667 4.07768 6.16167 2.58268 8 2.58268C9.83833 2.58268 11.3333 4.07768 11.3333 5.91602V8.41602H4.66667V5.91602ZM8.83333 14.851V16.7493C8.83333 17.2093 8.46083 17.5827 8 17.5827C7.53917 17.5827 7.16667 17.2093 7.16667 16.7493V14.851C6.67083 14.5618 6.33333 14.0302 6.33333 13.416C6.33333 12.4968 7.08083 11.7493 8 11.7493C8.91917 11.7493 9.66667 12.4968 9.66667 13.416C9.66667 14.0302 9.32917 14.5618 8.83333 14.851Z"

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const LogIn = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const LogIn = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     fill="none"
     viewBox="0 0 15 20"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Log in</title>
     <path
       d="M7.39504 9.17067C8.58623 9.17067 9.61771 8.74344 10.4605 7.90051C11.3033 7.05773 11.7305 6.02652 11.7305 4.8352C11.7305 3.64428 11.3033 2.61294 10.4604 1.76988C9.61743 0.92723 8.58609 0.5 7.39504 0.5C6.20371 0.5 5.17251 0.92723 4.32972 1.77002C3.48694 2.6128 3.05957 3.64414 3.05957 4.8352C3.05957 6.02652 3.48694 7.05786 4.32986 7.90065C5.17279 8.7433 6.20413 9.17067 7.39504 9.17067Z"

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

@@ -1,13 +1,14 @@
 import { SVGProps } from '@components/Icon/types';
 
-export const LogOut = ({ fill = '#000', size = 24 }: SVGProps) => (
+export const LogOut = ({ fill = '#000', size = 24, ...props }: SVGProps) => (
   <svg
     width={`${size}px`}
     height={`${size}px`}
     fill="none"
     viewBox="0 0 16 15"
     xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink">
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}>
     <title>Log out</title>
     <path
       d="M7.9751 13.7292H2.36876C2.0249 13.7292 1.74585 13.4502 1.74585 13.1063V1.89369C1.74585 1.54983 2.02493 1.27078 2.36876 1.27078H7.9751C8.31957 1.27078 8.59801 0.992344 8.59801 0.647871C8.59801 0.303398 8.31957 0.0249023 7.9751 0.0249023H2.36876C1.33845 0.0249023 0.5 0.863379 0.5 1.89369V13.1063C0.5 14.1366 1.33845 14.9751 2.36876 14.9751H7.9751C8.31957 14.9751 8.59801 14.6966 8.59801 14.3522C8.59801 14.0077 8.31957 13.7292 7.9751 13.7292Z"