@integrigo/integrigo-ui 1.6.17-g → 1.6.17-h

package/lib/src/components/atoms/Chip/Chip.stories.d.ts

@@ -1,5 +1,6 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").FCS<import("./Chip").ChipProps>>;
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<React.FCS<import("./Chip").ChipProps>>;
 export default _default;
-export declare const Basic: ComponentStory<import("react").FCS<import("./Chip").ChipProps>>;
-export declare const Clickable: ComponentStory<import("react").FCS<import("./Chip").ChipProps>>;
+export declare const Basic: ComponentStory<React.FCS<import("./Chip").ChipProps>>;
+export declare const Clickable: ComponentStory<React.FCS<import("./Chip").ChipProps>>;

package/lib/src/components/atoms/Dot/Dot.stories.d.ts

@@ -2,7 +2,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const _default: ComponentMeta<import("react").FCS<{
     icon?: (import("react").SVGProps<SVGSVGElement> & {
-        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
+        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
         size?: "big" | "small" | "ultra-small" | "medium" | {
             width: number;
             height: number;
@@ -16,7 +16,7 @@ declare const _default: ComponentMeta<import("react").FCS<{
 export default _default;
 export declare const Icon: ComponentStory<import("react").FCS<{
     icon?: (import("react").SVGProps<SVGSVGElement> & {
-        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
+        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
         size?: "big" | "small" | "ultra-small" | "medium" | {
             width: number;
             height: number;
@@ -29,7 +29,7 @@ export declare const Icon: ComponentStory<import("react").FCS<{
 }>>;
 export declare const Basic: ComponentStory<import("react").FCS<{
     icon?: (import("react").SVGProps<SVGSVGElement> & {
-        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
+        type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
         size?: "big" | "small" | "ultra-small" | "medium" | {
             width: number;
             height: number;

package/lib/src/components/atoms/Icon/Icon.d.ts

@@ -22,6 +22,7 @@ export declare const iconHashMap: {
     "exclamation-circle": React.FCS<{}>;
     "exclamation-triangle": React.FCS<{}>;
     exit: React.FCS<{}>;
+    eye: React.FCS<{}>;
     facebook: React.FCS<{}>;
     heart: React.FCS<{}>;
     "heart-alt": React.FCS<{}>;

package/lib/src/components/atoms/Icon/Icon.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> & {
-    type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
+    type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
     size?: "big" | "small" | "ultra-small" | "medium" | {
         width: number;
         height: number;
@@ -9,7 +9,7 @@ declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> &
 }>>;
 export default _default;
 export declare const SimpleIcon: ComponentStory<React.FCS<React.SVGProps<SVGSVGElement> & {
-    type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
+    type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users";
     size?: "big" | "small" | "ultra-small" | "medium" | {
         width: number;
         height: number;

package/lib/src/components/atoms/Icon/IconAddition.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { IconType } from './Icon';
+import React from "react";
+import { IconType } from "./Icon";
 interface IconAdditionProps {
     disabled?: boolean;
     icon?: IconType;
-    direction?: 'rtl' | 'ltr';
-    colorVariant?: 'grey' | 'white' | 'ghost';
-    size?: 'xl' | 'l' | 'm' | 's';
+    direction?: "rtl" | "ltr";
+    colorVariant?: "grey" | "white" | "ghost";
+    size?: "xl" | "l" | "m" | "s";
     onClick?: () => void;
 }
 export declare const IconAddition: React.FC<IconAdditionProps>;

package/lib/src/components/atoms/Icon/icons/Eye.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Eye: React.FCS;
+export default Eye;

package/lib/src/components/atoms/Icon/icons/Search.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Search: React.FCS;
+export default Search;

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Input/Input.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
-import { FieldProps } from 'formik';
-import { ValidationType } from '../../../types/validation';
-import { IconType } from '../../atoms/Icon';
-export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & FieldProps & {
+import React from "react";
+import { FieldProps } from "formik";
+import { ValidationType } from "../../../types/validation";
+import { IconType } from "../../atoms/Icon";
+export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps & {
     label?: string;
     validationType?: ValidationType;
     icon?: IconType;
-    size?: 'xl' | 'l' | 'm' | 's';
-    direction?: 'ltr' | 'rtl';
+    size?: "xl" | "l" | "m" | "s";
+    direction?: "ltr" | "rtl";
     onIconClick?: () => void;
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: ValidationType | undefined;
-    icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "xl" | "l" | "m" | "s" | undefined;
     direction?: "ltr" | "rtl" | undefined;
     onIconClick?: (() => void) | undefined;

package/lib/src/components/molecules/Input/Input.stories.d.ts

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -12,7 +12,7 @@ export default _default;
 export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -20,7 +20,7 @@ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<
 export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -28,7 +28,7 @@ export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omi
 export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -36,7 +36,7 @@ export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<
 export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -44,7 +44,7 @@ export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Om
 export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -52,7 +52,7 @@ export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omi
 export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -60,7 +60,7 @@ export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omi
 export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
@@ -68,7 +68,7 @@ export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponen
 export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
-    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close-square" | "comment-dots" | "create-dashboard" | "dice-five" | "dice-one" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "eye" | "facebook" | "heart" | "heart-alt" | "home" | "hour-glass" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "points-circle" | "process" | "question-circle" | "redo" | "rocket" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
     size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/organisms/Table/Table.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Column } from '@tanstack/react-table';
+declare type Variant = 'primary' | 'secondary';
+declare type Alignment = 'left' | 'right' | 'center';
+export interface Props<T extends Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
+    data: T[];
+    columns: Column<T>[];
+    variant?: Variant;
+    textAlign?: Alignment;
+}
+export declare const Table: <T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: Props<T>) => JSX.Element;
+export {};

package/lib/src/components/organisms/Table/Table.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Table } from './Table';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<(<T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: import("./Table").Props<T>) => JSX.Element)>;
+export default _default;
+export declare const Primary: ComponentStory<typeof Table>;
+export declare const WithProfile: ComponentStory<typeof Table>;

package/lib/src/components/organisms/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/organisms/Table/index.d.ts

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

package/lib/src/components/organisms/index.d.ts

@@ -2,3 +2,4 @@ export { Menu } from './Menu';
 export { Setting } from './Setting';
 export { Modal } from './Modal';
 export { Select } from './Select';
+export { Table } from './Table';

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from "./components/atoms";
-export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from "./components/molecules";
-export { Menu, Setting, Modal, Select } from "./components/organisms";
-export { GlobalStyles as IntegrigoUI, Color } from "./styles";
+export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from './components/atoms';
+export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from './components/molecules';
+export { Menu, Setting, Modal, Select, Table } from './components/organisms';
+export { GlobalStyles as IntegrigoUI, Color } from './styles';

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.17g",
+  "version": "1.6.17h",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -14,11 +14,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/react": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -55,6 +55,7 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "@tanstack/react-table": "8.5.13",
     "formik": "^2.2.9"
   },
   "peerDependencies": {

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -1,47 +1,48 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { Chip } from "./Chip";
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Chip } from './Chip';
 
 export default {
-  title: "Atoms/Chip",
+  title: 'Atoms/Chip',
   component: Chip,
   argTypes: {
     label: {
-      name: "label",
+      name: 'label',
       type: {
-        name: "string",
+        name: 'string',
         required: true,
       },
-      defaultValue: "Accept",
+      defaultValue: 'Accept',
     },
     size: {
-      name: "size",
+      name: 'size',
       type: {
-        name: "string",
+        name: 'string',
         required: false,
       },
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["s", "m", "l", "xl"],
-      defaultValue: "xl",
+      options: ['s', 'm', 'l', 'xl'],
+      defaultValue: 'xl',
     },
     variant: {
-      name: "variant",
+      name: 'variant',
       type: {
-        name: "string",
+        name: 'string',
         required: false,
       },
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["transparent", "white", "primary", "secondary", "grey"],
-      defaultValue: "primary",
+      options: ['transparent', 'white', 'primary', 'secondary', 'grey'],
+      defaultValue: 'primary',
     },
     onClick: {
-      name: "onClick",
+      name: 'onClick',
       type: {
-        name: "function",
+        name: 'function',
         required: false,
       },
       defaultValue: null,
@@ -55,5 +56,5 @@ export const Basic = Template.bind({});
 
 export const Clickable = Template.bind({});
 Clickable.args = {
-  onClick: action("clicked"),
+  onClick: action('clicked'),
 };

package/src/components/atoms/Icon/Icon.tsx

@@ -23,6 +23,7 @@ import Envelope from "./icons/Envelope";
 import ExclamationCircle from "./icons/ExclamationCircle";
 import ExclamationTriangle from "./icons/ExclamationTriangle";
 import Exit from "./icons/Exit";
+import Eye from "./icons/Eye";
 import Facebook from "./icons/Facebook";
 import Heart from "./icons/Heart";
 import HeartAlt from "./icons/HeartAlt";
@@ -69,6 +70,7 @@ export const iconHashMap = {
   "exclamation-circle": ExclamationCircle,
   "exclamation-triangle": ExclamationTriangle,
   exit: Exit,
+  eye: Eye,
   facebook: Facebook,
   heart: Heart,
   "heart-alt": HeartAlt,

package/src/components/atoms/Icon/IconAddition.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Color } from '../../../styles';
-import { Icon, IconType } from './Icon';
+import React from "react";
+import styled from "styled-components";
+import { Color } from "../../../styles";
+import { Icon, IconType } from "./Icon";
 
 interface IconAdditionProps {
   disabled?: boolean;
   icon?: IconType;
-  direction?: 'rtl' | 'ltr';
-  colorVariant?: 'grey' | 'white' | 'ghost';
-  size?: 'xl' | 'l' | 'm' | 's';
+  direction?: "rtl" | "ltr";
+  colorVariant?: "grey" | "white" | "ghost";
+  size?: "xl" | "l" | "m" | "s";
   onClick?: () => void;
 }
 
 const sizeVariant = {
   xl: {
     size: 24,
-    offset: 16,
+    offset: 14,
   },
   l: {
     size: 20,
-    offset: 12,
+    offset: 10,
   },
   m: {
     size: 16,
@@ -27,16 +27,16 @@ const sizeVariant = {
   },
   s: {
     size: 10,
-    offset: 6,
+    offset: 5,
   },
 };
 
 export const IconAddition: React.FC<IconAdditionProps> = ({
   disabled,
   icon,
-  direction = 'ltr',
-  colorVariant = 'grey',
-  size = 'm',
+  direction = "ltr",
+  colorVariant = "grey",
+  size = "m",
   onClick,
 }) => {
   const clickable = !!onClick;
@@ -56,7 +56,7 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
       direction={direction}
       clickable={clickable && !disabled}
       size={size}
-      narrow={colorVariant === 'ghost'}
+      narrow={colorVariant === "ghost"}
     >
       <Icon
         type={icon}
@@ -70,18 +70,20 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
 
 const IconWrapper = styled.div<{
   clickable?: boolean;
-  direction?: 'rtl' | 'ltr';
+  direction?: "rtl" | "ltr";
   narrow: boolean;
-  size: 'xl' | 'l' | 'm' | 's';
+  size: "xl" | "l" | "m" | "s";
 }>`
   position: absolute;
   z-index: 2;
-  bottom: calc(${(p) => sizeVariant[p.size].offset}px);
+  top: 50%;
+  transform: translateY(-50%);
   height: ${(p) => sizeVariant[p.size].size}px;
   width: ${(p) => sizeVariant[p.size].size}px;
-  cursor: ${(p) => (p.clickable ? 'pointer' : 'auto')};
+  cursor: ${(p) => (p.clickable ? "pointer" : "auto")};
+
   ${(p) =>
-    p.direction === 'ltr'
+    p.direction === "ltr"
       ? `left: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`
       : `right: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`};
 
@@ -91,4 +93,4 @@ const IconWrapper = styled.div<{
   }
 `;
 
-IconWrapper.displayName = 'IconWrapper';
+IconWrapper.displayName = "IconWrapper";

package/src/components/atoms/Icon/icons/Eye.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Eye: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.82994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.82994 6 11.9999 6C15.1699 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1699 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" />
+  </svg>
+);
+
+export default Eye;

package/src/components/atoms/Icon/icons/Search.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Search: React.FCS = (props) => (
+  <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M25.1375 23.3625L20.5 18.7625C22.3001 16.518 23.1719 13.6691 22.936 10.8016C22.7001 7.93413 21.3746 5.26598 19.2319 3.34581C17.0892 1.42564 14.2923 0.39939 11.4162 0.478091C8.54005 0.556791 5.8034 1.73445 3.76893 3.76893C1.73445 5.8034 0.556791 8.54005 0.478091 11.4162C0.39939 14.2923 1.42564 17.0892 3.34581 19.2319C5.26598 21.3746 7.93413 22.7001 10.8016 22.936C13.6691 23.1719 16.518 22.3001 18.7625 20.5L23.3625 25.1C23.4787 25.2172 23.617 25.3102 23.7693 25.3736C23.9216 25.4371 24.085 25.4697 24.25 25.4697C24.415 25.4697 24.5784 25.4371 24.7307 25.3736C24.883 25.3102 25.0213 25.2172 25.1375 25.1C25.3628 24.8669 25.4887 24.5554 25.4887 24.2313C25.4887 23.9071 25.3628 23.5956 25.1375 23.3625ZM11.75 20.5C10.0194 20.5 8.32769 19.9868 6.88876 19.0254C5.44983 18.0639 4.32832 16.6973 3.66606 15.0985C3.00379 13.4996 2.83051 11.7403 3.16813 10.043C3.50575 8.34563 4.33911 6.78653 5.56282 5.56282C6.78653 4.33911 8.34563 3.50575 10.043 3.16813C11.7403 2.83051 13.4996 3.00379 15.0985 3.66606C16.6973 4.32832 18.0639 5.44983 19.0254 6.88876C19.9868 8.32769 20.5 10.0194 20.5 11.75C20.5 14.0706 19.5781 16.2962 17.9372 17.9372C16.2962 19.5781 14.0706 20.5 11.75 20.5Z" fill="#595959"/>
+  </svg>
+);
+
+export default Search;