@integrigo/integrigo-ui 1.6.12 → 1.6.14-a

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@ export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
 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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "dice-five" | "edit" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "users" | undefined;
+    icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "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/organisms/Setting/Setting.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { IconType } from "../../atoms/Icon";
+import React from 'react';
+import { IconType } from '../../atoms/Icon';
 export interface SettingProps {
     icon?: IconType;
     title: string;

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from "./components/atoms";
-export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, } from "./components/molecules";
-export { Menu, Setting } from "./components/organisms";
-export { GlobalStyles as IntegrigoUI, Color } from "./styles";
+export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from './components/atoms';
+export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, } from './components/molecules';
+export { Menu, Setting } 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.12",
+  "version": "1.6.14a",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/rollup.config.js

@@ -9,6 +9,7 @@ const packageJson = require("./package.json");
 
 export default {
   input: "src/index.ts",
+  inlineDynamicImports: true,
   output: [
     {
       file: packageJson.main,

package/src/components/atoms/Card/Card.tsx

@@ -1,8 +1,8 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export interface CardProps {
   inverse?: boolean;
-  size?: "s" | "m" | "l";
+  size?: 's' | 'm' | 'l';
   flat?: boolean;
 }
 
@@ -23,11 +23,11 @@ const sizeVariants = {
 
 export const Card = styled.div<CardProps>`
   background-color: ${(p) =>
-    p.inverse ? "var(--color-navy)" : "var(--color-white)"};
-  box-shadow: ${(p) => (p.flat ? "none" : "0px 4px 4px rgba(0, 0, 0, 0.25)")};
-  color: ${(p) => (p.inverse ? "var(--color-white)" : "var(--color-navy)")};
-  padding: ${(p) => sizeVariants[p.size || "l"].padding}px;
-  border-radius: ${(p) => sizeVariants[p.size || "l"].borderRadius}px;
+    p.inverse ? 'var(--color-navy)' : 'var(--color-white)'};
+  box-shadow: ${(p) => (p.flat ? 'none' : '0px 4px 4px rgba(0, 0, 0, 0.25)')};
+  color: ${(p) => (p.inverse ? 'var(--color-white)' : 'var(--color-navy)')};
+  padding: ${(p) => sizeVariants[p.size || 'l'].padding}px;
+  border-radius: ${(p) => sizeVariants[p.size || 'l'].borderRadius}px;
 `;
 
-Card.displayName = "Card";
+Card.displayName = 'Card';

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

@@ -17,6 +17,7 @@ export const AllIcons = () => (
   <div
     style={{
       display: 'flex',
+      flexWrap: 'wrap',
     }}
   >
     {Object.keys(iconHashMap).map((type) => (
@@ -25,6 +26,7 @@ export const AllIcons = () => (
         style={{
           padding: '12px',
           borderRight: '1px solid black',
+          borderBottom: '1px solid black',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',

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

@@ -1,68 +1,42 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Color } from "../../../styles";
 
-import AngleDown from "./icons/AngleDown";
-import ArrowLeft from "./icons/ArrowLeft";
-import Bars from "./icons/Bars";
-import Bell from "./icons/Bell";
-import CheckCircle from "./icons/CheckCircle";
-import CheckSquare from "./icons/ChechSquare";
-import ClipboardNotes from "./icons/ClipboardNotes";
-import Close from "./icons/Close";
-import DiceFive from "./icons/DiceFive";
-import Edit from "./icons/Edit";
-import Envelope from "./icons/Envelope";
-import ExclamationCircle from "./icons/ExclamationCircle";
-import ExclamationTriangle from "./icons/ExclamationTriangle";
-import Exit from "./icons/Exit";
-import Facebook from "./icons/Facebook";
-import Home from "./icons/Home";
-import ImageEdit from "./icons/ImageEdit";
-import Instagram from "./icons/Instagram";
-import Linkedin from "./icons/Linkedin";
-import Lock from "./icons/Lock";
-import Minus from "./icons/Minus";
-import Phone from "./icons/Phone";
-import Plus from "./icons/Plus";
-import PointsCircle from "./icons/PointsCircle";
-import Process from "./icons/Process";
-import Redo from "./icons/Redo";
-import Setting from "./icons/Setting";
-import User from "./icons/User";
-import UserCircle from "./icons/UserCircle";
-import Users from "./icons/Users";
-
 export const iconHashMap = {
-  "angle-down": AngleDown,
-  "arrow-left": ArrowLeft,
-  bars: Bars,
-  bell: Bell,
-  "check-circle": CheckCircle,
-  "check-square": CheckSquare,
-  "clipboad-notes": ClipboardNotes,
-  close: Close,
-  "dice-five": DiceFive,
-  edit: Edit,
-  envelope: Envelope,
-  "exclamation-circle": ExclamationCircle,
-  "exclamation-triangle": ExclamationTriangle,
-  exit: Exit,
-  facebook: Facebook,
-  home: Home,
-  "image-edit": ImageEdit,
-  instagram: Instagram,
-  linkedin: Linkedin,
-  lock: Lock,
-  minus: Minus,
-  phone: Phone,
-  plus: Plus,
-  process: Process,
-  "points-circle": PointsCircle,
-  redo: Redo,
-  setting: Setting,
-  user: User,
-  "user-circle": UserCircle,
-  users: Users,
+  "angle-down": "AngleDown",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  bars: "Bars",
+  bell: "Bell",
+  "check-circle": "CheckCircle",
+  "check-square": "CheckSquare",
+  "clipboad-notes": "ClipboardNotes",
+  close: "Close",
+  "create-dashboard": "CreateDashboard",
+  "dice-five": "DiceFive",
+  edit: "Edit",
+  "ellipsis-horizontal": "EllipsisHorizontal",
+  "ellipsis-vertical": "EllipsisVertical",
+  envelope: "Envelope",
+  "exclamation-circle": "ExclamationCircle",
+  "exclamation-triangle": "ExclamationTriangle",
+  exit: "Exit",
+  facebook: "Facebook",
+  home: "Home",
+  "image-edit": "ImageEdit",
+  instagram: "Instagram",
+  linkedin: "Linkedin",
+  lock: "Lock",
+  minus: "Minus",
+  phone: "Phone",
+  plus: "Plus",
+  process: "Process",
+  "points-circle": "PointsCircle",
+  redo: "Redo",
+  setting: "Setting",
+  user: "User",
+  "user-circle": "UserCircle",
+  "user-plus": "UserPlus",
+  users: "Users",
 };
 
 export type IconType = keyof typeof iconHashMap;
@@ -102,10 +76,26 @@ export const Icon: React.FCS<IconProps> = ({
   size = "ultra-small",
   ...props
 }) => {
-  const Component = iconHashMap[type];
+  const Component = React.lazy(() => import("./icons/" + iconHashMap[type]));
   const sizes = typeof size === "string" ? sizeHashMap[size] : size;
 
   return (
-    <Component className={className} fill={Color.Navy} {...sizes} {...props} />
+    <Suspense
+      fallback={
+        <svg
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      }
+    >
+      <Component
+        className={className}
+        fill={Color.Navy}
+        {...sizes}
+        {...props}
+      />
+    </Suspense>
   );
 };

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const AngleDown: React.FCS = (props) => (
-  <svg viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M11 1.17a1 1 0 0 0-1.41 0L6 4.71 2.46 1.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1 1 0 0 0 1.42 0L11 2.59a.998.998 0 0 0 0-1.42Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M16.9999 9.17C16.8126 8.98375 16.5591 8.87921 16.2949 8.87921C16.0308 8.87921 15.7773 8.98375 15.5899 9.17L11.9999 12.71L8.45995 9.17C8.27259 8.98375 8.01913 8.87921 7.75495 8.87921C7.49076 8.87921 7.23731 8.98375 7.04995 9.17C6.95622 9.26296 6.88183 9.37356 6.83106 9.49542C6.78029 9.61728 6.75415 9.74799 6.75415 9.88C6.75415 10.012 6.78029 10.1427 6.83106 10.2646C6.88183 10.3864 6.95622 10.497 7.04995 10.59L11.2899 14.83C11.3829 14.9237 11.4935 14.9981 11.6154 15.0489C11.7372 15.0997 11.8679 15.1258 11.9999 15.1258C12.132 15.1258 12.2627 15.0997 12.3845 15.0489C12.5064 14.9981 12.617 14.9237 12.7099 14.83L16.9999 10.59C17.0937 10.497 17.1681 10.3864 17.2188 10.2646C17.2696 10.1427 17.2957 10.012 17.2957 9.88C17.2957 9.74799 17.2696 9.61728 17.2188 9.49542C17.1681 9.37356 17.0937 9.26296 16.9999 9.17Z" />
   </svg>
 );
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const ArrowLeft: React.FCS = (props) => (
-  <svg viewBox="0 0 12 14" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M11 6H3.41l3.3-3.29a1.004 1.004 0 0 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1 1 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L3.41 8H11a1 1 0 1 0 0-2Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 11H9.41002L12.71 7.71C12.8983 7.5217 13.0041 7.2663 13.0041 7C13.0041 6.7337 12.8983 6.47831 12.71 6.29C12.5217 6.1017 12.2663 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29L6.29002 11.29C6.19898 11.3851 6.12761 11.4973 6.08002 11.62C5.98 11.8635 5.98 12.1365 6.08002 12.38C6.12761 12.5028 6.19898 12.6149 6.29002 12.71L11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5065 17.8781 12.6171 17.8037 12.71 17.71C12.8037 17.617 12.8781 17.5064 12.9289 17.3846C12.9797 17.2627 13.0058 17.132 13.0058 17C13.0058 16.868 12.9797 16.7373 12.9289 16.6154C12.8781 16.4936 12.8037 16.383 12.71 16.29L9.41002 13H17C17.2652 13 17.5196 12.8946 17.7071 12.7071C17.8947 12.5196 18 12.2652 18 12C18 11.7348 17.8947 11.4804 17.7071 11.2929C17.5196 11.1054 17.2652 11 17 11Z" />
   </svg>
 );
 

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ArrowRight: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z" />
+  </svg>
+);
+
+export default ArrowRight;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const Bars: React.FCS = (props) => (
-  <svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M1 2h18a1 1 0 1 0 0-2H1a1 1 0 0 0 0 2Zm18 8H1a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H1a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" />
   </svg>
 );
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const Bell: React.FCS = (props) => (
-  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M14 11.18V8a6 6 0 0 0-5-5.91V1a1 1 0 0 0-2 0v1.09A6 6 0 0 0 2 8v3.18A3 3 0 0 0 0 14v2a1 1 0 0 0 1 1h3.14a4 4 0 0 0 7.72 0H15a1 1 0 0 0 1-1v-2a3 3 0 0 0-2-2.82ZM4 8a4 4 0 0 1 8 0v3H4V8Zm4 10a2 2 0 0 1-1.72-1h3.44A2 2 0 0 1 8 18Zm6-3H2v-1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" />
   </svg>
 );
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const CheckCircle: React.FCS = (props) => (
-  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="m12.72 6.79-4.29 4.3-1.65-1.65a1 1 0 1 0-1.41 1.41l2.35 2.36a1 1 0 0 0 1.41 0l5-5a1 1 0 1 0-1.41-1.42ZM10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14.72 8.79L10.43 13.09L8.78 11.44C8.69036 11.3353 8.58004 11.2503 8.45597 11.1903C8.33191 11.1303 8.19678 11.0965 8.05906 11.0912C7.92134 11.0859 7.78401 11.1091 7.65568 11.1594C7.52736 11.2096 7.41081 11.2859 7.31335 11.3833C7.2159 11.4808 7.13964 11.5974 7.08937 11.7257C7.03909 11.854 7.01589 11.9913 7.02121 12.1291C7.02653 12.2668 7.06026 12.4019 7.12028 12.526C7.1803 12.65 7.26532 12.7604 7.37 12.85L9.72 15.21C9.81344 15.3027 9.92426 15.376 10.0461 15.4258C10.1679 15.4755 10.2984 15.5008 10.43 15.5C10.6923 15.4989 10.9437 15.3947 11.13 15.21L16.13 10.21C16.2237 10.117 16.2981 10.0064 16.3489 9.88458C16.3997 9.76272 16.4258 9.63201 16.4258 9.5C16.4258 9.36799 16.3997 9.23728 16.3489 9.11542C16.2981 8.99356 16.2237 8.88296 16.13 8.79C15.9426 8.60375 15.6892 8.49921 15.425 8.49921C15.1608 8.49921 14.9074 8.60375 14.72 8.79ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" />
   </svg>
 );
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CheckSquare: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.21 14.75C10.303 14.8437 10.4136 14.9181 10.5354 14.9689C10.6573 15.0197 10.788 15.0458 10.92 15.0458C11.052 15.0458 11.1827 15.0197 11.3046 14.9689C11.4264 14.9181 11.537 14.8437 11.63 14.75L15.71 10.67C15.8983 10.4817 16.0041 10.2263 16.0041 9.96C16.0041 9.6937 15.8983 9.4383 15.71 9.25C15.5217 9.0617 15.2663 8.95591 15 8.95591C14.7337 8.95591 14.4783 9.0617 14.29 9.25L10.92 12.63L9.71 11.41C9.5217 11.2217 9.2663 11.1159 9 11.1159C8.7337 11.1159 8.4783 11.2217 8.29 11.41C8.1017 11.5983 7.99591 11.8537 7.99591 12.12C7.99591 12.3863 8.1017 12.6417 8.29 12.83L10.21 14.75ZM21 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM20 20H4V4H20V20Z" />
+  </svg>
+);
+
+export default CheckSquare;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const ClipboardNotes: React.FCS = (props) => (
-  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M9 12H5a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2Zm4-10h-1.18A3 3 0 0 0 9 0H7a3 3 0 0 0-2.82 2H3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3ZM6 3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1H6V3Zm8 14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4h1a1 1 0 0 1 1 1v12Zm-3-9H5a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13 14H9C8.73478 14 8.48043 14.1054 8.29289 14.2929C8.10536 14.4804 8 14.7348 8 15C8 15.2652 8.10536 15.5196 8.29289 15.7071C8.48043 15.8946 8.73478 16 9 16H13C13.2652 16 13.5196 15.8946 13.7071 15.7071C13.8946 15.5196 14 15.2652 14 15C14 14.7348 13.8946 14.4804 13.7071 14.2929C13.5196 14.1054 13.2652 14 13 14ZM17 4H15.82C15.6137 3.41645 15.2319 2.911 14.7271 2.55294C14.2222 2.19488 13.6189 2.00174 13 2H11C10.3811 2.00174 9.7778 2.19488 9.27293 2.55294C8.76807 2.911 8.38631 3.41645 8.18 4H7C6.20435 4 5.44129 4.31607 4.87868 4.87868C4.31607 5.44129 4 6.20435 4 7V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V7C20 6.20435 19.6839 5.44129 19.1213 4.87868C18.5587 4.31607 17.7956 4 17 4ZM10 5C10 4.73478 10.1054 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4H13C13.2652 4 13.5196 4.10536 13.7071 4.29289C13.8946 4.48043 14 4.73478 14 5V6H10V5ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V7C6 6.73478 6.10536 6.48043 6.29289 6.29289C6.48043 6.10536 6.73478 6 7 6H8V7C8 7.26522 8.10536 7.51957 8.29289 7.70711C8.48043 7.89464 8.73478 8 9 8H15C15.2652 8 15.5196 7.89464 15.7071 7.70711C15.8946 7.51957 16 7.26522 16 7V6H17C17.2652 6 17.5196 6.10536 17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19ZM15 10H9C8.73478 10 8.48043 10.1054 8.29289 10.2929C8.10536 10.4804 8 10.7348 8 11C8 11.2652 8.10536 11.5196 8.29289 11.7071C8.48043 11.8946 8.73478 12 9 12H15C15.2652 12 15.5196 11.8946 15.7071 11.7071C15.8946 11.5196 16 11.2652 16 11C16 10.7348 15.8946 10.4804 15.7071 10.2929C15.5196 10.1054 15.2652 10 15 10Z" />
   </svg>
 );
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const Close: React.FCS = (props) => (
-  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="m8.41 7 4.3-4.29a1.004 1.004 0 1 0-1.42-1.42L7 5.59l-4.29-4.3a1.004 1.004 0 0 0-1.42 1.42L5.59 7l-4.3 4.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0L7 8.41l4.29 4.3a.998.998 0 0 0 1.42 0 .997.997 0 0 0 .219-1.095.998.998 0 0 0-.22-.325L8.41 7Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z" />
   </svg>
 );
 

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CreateDashboard: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10 13H4C3.73478 13 3.48043 13.1054 3.29289 13.2929C3.10536 13.4804 3 13.7348 3 14V20C3 20.2652 3.10536 20.5196 3.29289 20.7071C3.48043 20.8946 3.73478 21 4 21H10C10.2652 21 10.5196 20.8946 10.7071 20.7071C10.8946 20.5196 11 20.2652 11 20V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 19H5V15H9V19ZM20 3H14C13.7348 3 13.4804 3.10536 13.2929 3.29289C13.1054 3.48043 13 3.73478 13 4V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H20C20.2652 11 20.5196 10.8946 20.7071 10.7071C20.8946 10.5196 21 10.2652 21 10V4C21 3.73478 20.8946 3.48043 20.7071 3.29289C20.5196 3.10536 20.2652 3 20 3ZM19 9H15V5H19V9ZM20 16H18V14C18 13.7348 17.8946 13.4804 17.7071 13.2929C17.5196 13.1054 17.2652 13 17 13C16.7348 13 16.4804 13.1054 16.2929 13.2929C16.1054 13.4804 16 13.7348 16 14V16H14C13.7348 16 13.4804 16.1054 13.2929 16.2929C13.1054 16.4804 13 16.7348 13 17C13 17.2652 13.1054 17.5196 13.2929 17.7071C13.4804 17.8946 13.7348 18 14 18H16V20C16 20.2652 16.1054 20.5196 16.2929 20.7071C16.4804 20.8946 16.7348 21 17 21C17.2652 21 17.5196 20.8946 17.7071 20.7071C17.8946 20.5196 18 20.2652 18 20V18H20C20.2652 18 20.5196 17.8946 20.7071 17.7071C20.8946 17.5196 21 17.2652 21 17C21 16.7348 20.8946 16.4804 20.7071 16.2929C20.5196 16.1054 20.2652 16 20 16ZM10 3H4C3.73478 3 3.48043 3.10536 3.29289 3.29289C3.10536 3.48043 3 3.73478 3 4V10C3 10.2652 3.10536 10.5196 3.29289 10.7071C3.48043 10.8946 3.73478 11 4 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V4C11 3.73478 10.8946 3.48043 10.7071 3.29289C10.5196 3.10536 10.2652 3 10 3ZM9 9H5V5H9V9Z" />
+  </svg>
+);
+
+export default CreateDashboard;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 const DiceFive: React.FCS = (props) => (
-  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M15 0H5a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10ZM6 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm4-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 2H7C5.67392 2 4.40215 2.52678 3.46447 3.46447C2.52678 4.40215 2 5.67392 2 7V17C2 18.3261 2.52678 19.5979 3.46447 20.5355C4.40215 21.4732 5.67392 22 7 22H17C18.3261 22 19.5979 21.4732 20.5355 20.5355C21.4732 19.5979 22 18.3261 22 17V7C22 5.67392 21.4732 4.40215 20.5355 3.46447C19.5979 2.52678 18.3261 2 17 2V2ZM20 17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V7C4 6.20435 4.31607 5.44129 4.87868 4.87868C5.44129 4.31607 6.20435 4 7 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17ZM8 15C7.80222 15 7.60888 15.0586 7.44443 15.1685C7.27998 15.2784 7.15181 15.4346 7.07612 15.6173C7.00043 15.8 6.98063 16.0011 7.01921 16.1951C7.0578 16.3891 7.15304 16.5673 7.29289 16.7071C7.43275 16.847 7.61093 16.9422 7.80491 16.9808C7.99889 17.0194 8.19996 16.9996 8.38268 16.9239C8.56541 16.8482 8.72159 16.72 8.83147 16.5556C8.94135 16.3911 9 16.1978 9 16C9 15.7348 8.89464 15.4804 8.70711 15.2929C8.51957 15.1054 8.26522 15 8 15V15ZM12 11C11.8022 11 11.6089 11.0586 11.4444 11.1685C11.28 11.2784 11.1518 11.4346 11.0761 11.6173C11.0004 11.8 10.9806 12.0011 11.0192 12.1951C11.0578 12.3891 11.153 12.5673 11.2929 12.7071C11.4327 12.847 11.6109 12.9422 11.8049 12.9808C11.9989 13.0194 12.2 12.9996 12.3827 12.9239C12.5654 12.8482 12.7216 12.72 12.8315 12.5556C12.9414 12.3911 13 12.1978 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM8 7C7.80222 7 7.60888 7.05865 7.44443 7.16853C7.27998 7.27841 7.15181 7.43459 7.07612 7.61732C7.00043 7.80004 6.98063 8.00111 7.01921 8.19509C7.0578 8.38907 7.15304 8.56725 7.29289 8.70711C7.43275 8.84696 7.61093 8.9422 7.80491 8.98079C7.99889 9.01937 8.19996 8.99957 8.38268 8.92388C8.56541 8.84819 8.72159 8.72002 8.83147 8.55557C8.94135 8.39112 9 8.19778 9 8C9 7.73478 8.89464 7.48043 8.70711 7.29289C8.51957 7.10536 8.26522 7 8 7V7ZM16 15C15.8022 15 15.6089 15.0586 15.4444 15.1685C15.28 15.2784 15.1518 15.4346 15.0761 15.6173C15.0004 15.8 14.9806 16.0011 15.0192 16.1951C15.0578 16.3891 15.153 16.5673 15.2929 16.7071C15.4327 16.847 15.6109 16.9422 15.8049 16.9808C15.9989 17.0194 16.2 16.9996 16.3827 16.9239C16.5654 16.8482 16.7216 16.72 16.8315 16.5556C16.9414 16.3911 17 16.1978 17 16C17 15.7348 16.8946 15.4804 16.7071 15.2929C16.5196 15.1054 16.2652 15 16 15ZM16 7C15.8022 7 15.6089 7.05865 15.4444 7.16853C15.28 7.27841 15.1518 7.43459 15.0761 7.61732C15.0004 7.80004 14.9806 8.00111 15.0192 8.19509C15.0578 8.38907 15.153 8.56725 15.2929 8.70711C15.4327 8.84696 15.6109 8.9422 15.8049 8.98079C15.9989 9.01937 16.2 8.99957 16.3827 8.92388C16.5654 8.84819 16.7216 8.72002 16.8315 8.55557C16.9414 8.39112 17 8.19778 17 8C17 7.73478 16.8946 7.48043 16.7071 7.29289C16.5196 7.10536 16.2652 7 16 7Z" />
   </svg>
 );
 

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

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 
 const Edit: React.FCS = (props) => (
-  <svg viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M3 17h4.24a.999.999 0 0 0 .71-.29l6.92-6.93L17.71 7a1.001 1.001 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0L9.23 4.12l-6.94 6.93a1.001 1.001 0 0 0-.29.71V16a1 1 0 0 0 1 1Zm9.76-13.59 2.83 2.83-1.42 1.42-2.83-2.83 1.42-1.42ZM4 12.17l5.93-5.93 2.83 2.83L6.83 15H4v-2.83ZM19 19H1a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2Z" />
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5 17.9999H9.24C9.37161 18.0007 9.50207 17.9755 9.62391 17.9257C9.74574 17.8759 9.85656 17.8026 9.95 17.7099L16.87 10.7799L19.71 7.99994C19.8037 7.90698 19.8781 7.79637 19.9289 7.67452C19.9797 7.55266 20.0058 7.42195 20.0058 7.28994C20.0058 7.15793 19.9797 7.02722 19.9289 6.90536C19.8781 6.7835 19.8037 6.6729 19.71 6.57994L15.47 2.28994C15.377 2.19621 15.2664 2.12182 15.1446 2.07105C15.0227 2.02028 14.892 1.99414 14.76 1.99414C14.628 1.99414 14.4973 2.02028 14.3754 2.07105C14.2536 2.12182 14.143 2.19621 14.05 2.28994L11.23 5.11994L4.29 12.0499C4.19732 12.1434 4.12399 12.2542 4.07423 12.376C4.02446 12.4979 3.99924 12.6283 4 12.7599V16.9999C4 17.2652 4.10536 17.5195 4.29289 17.707C4.48043 17.8946 4.73478 17.9999 5 17.9999ZM14.76 4.40994L17.59 7.23994L16.17 8.65994L13.34 5.82994L14.76 4.40994ZM6 13.1699L11.93 7.23994L14.76 10.0699L8.83 15.9999H6V13.1699ZM21 19.9999H3C2.73478 19.9999 2.48043 20.1053 2.29289 20.2928C2.10536 20.4804 2 20.7347 2 20.9999C2 21.2652 2.10536 21.5195 2.29289 21.707C2.48043 21.8946 2.73478 21.9999 3 21.9999H21C21.2652 21.9999 21.5196 21.8946 21.7071 21.707C21.8946 21.5195 22 21.2652 22 20.9999C22 20.7347 21.8946 20.4804 21.7071 20.2928C21.5196 20.1053 21.2652 19.9999 21 19.9999Z" />
   </svg>
 );
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const EllipsisHorizontal: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" />
+  </svg>
+);
+
+export default EllipsisHorizontal;