@integrigo/integrigo-ui 1.6.12 → 1.6.14

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

@@ -1,35 +1,40 @@
 import React from "react";
 export declare const iconHashMap: {
-    "angle-down": React.FCS<{}>;
-    "arrow-left": React.FCS<{}>;
-    bars: React.FCS<{}>;
-    bell: React.FCS<{}>;
-    "check-circle": React.FCS<{}>;
-    "check-square": React.FCS<{}>;
-    "clipboad-notes": React.FCS<{}>;
-    close: React.FCS<{}>;
-    "dice-five": React.FCS<{}>;
-    edit: React.FCS<{}>;
-    envelope: React.FCS<{}>;
-    "exclamation-circle": React.FCS<{}>;
-    "exclamation-triangle": React.FCS<{}>;
-    exit: React.FCS<{}>;
-    facebook: React.FCS<{}>;
-    home: React.FCS<{}>;
-    "image-edit": React.FCS<{}>;
-    instagram: React.FCS<{}>;
-    linkedin: React.FCS<{}>;
-    lock: React.FCS<{}>;
-    minus: React.FCS<{}>;
-    phone: React.FCS<{}>;
-    plus: React.FCS<{}>;
-    process: React.FCS<{}>;
-    "points-circle": React.FCS<{}>;
-    redo: React.FCS<{}>;
-    setting: React.FCS<{}>;
-    user: React.FCS<{}>;
-    "user-circle": React.FCS<{}>;
-    users: React.FCS<{}>;
+    "angle-down": string;
+    "arrow-left": string;
+    "arrow-right": string;
+    bars: string;
+    bell: string;
+    "check-circle": string;
+    "check-square": string;
+    "clipboad-notes": string;
+    close: string;
+    "create-dashboard": string;
+    "dice-five": string;
+    edit: string;
+    "ellipsis-horizontal": string;
+    "ellipsis-vertical": string;
+    envelope: string;
+    "exclamation-circle": string;
+    "exclamation-triangle": string;
+    exit: string;
+    facebook: string;
+    home: string;
+    "image-edit": string;
+    instagram: string;
+    linkedin: string;
+    lock: string;
+    minus: string;
+    phone: string;
+    plus: string;
+    process: string;
+    "points-circle": string;
+    redo: string;
+    setting: string;
+    user: string;
+    "user-circle": string;
+    "user-plus": string;
+    users: string;
 };
 export declare type IconType = keyof typeof iconHashMap;
 declare type IconProps = React.SVGProps<SVGSVGElement> & {

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" | "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";
+    type: "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";
     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" | "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";
+    type: "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";
     size?: "big" | "small" | "ultra-small" | "medium" | {
         width: number;
         height: number;

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

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

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/atoms/Initials/Initials.stories.d.ts

@@ -2,10 +2,10 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<import("react").FC<{
     text: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xxl" | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<import("react").FC<{
     text: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xxl" | undefined;
 }>>;

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"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
 export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

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,8 +3,8 @@ 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -12,64 +12,64 @@ 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 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;
-    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

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

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {
@@ -14,7 +14,7 @@ export default _default;
 export declare const Basic: ComponentStory<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {
@@ -24,7 +24,7 @@ export declare const Basic: ComponentStory<import("react").FC<Partial<{
 export declare const WithInitials: ComponentStory<import("react").FC<Partial<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "s" | "xl" | "l" | "m" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {

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.14",
   "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;