@integrigo/integrigo-ui 1.6.12 → 1.6.13

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

@@ -1,40 +1,42 @@
-import React from "react";
+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': React.LazyExoticComponent<React.FCS<{}>>;
+    'arrow-left': React.LazyExoticComponent<React.FCS<{}>>;
+    bars: React.LazyExoticComponent<React.FCS<{}>>;
+    bell: React.LazyExoticComponent<React.FCS<{}>>;
+    'check-circle': React.LazyExoticComponent<React.FCS<{}>>;
+    'check-square': React.LazyExoticComponent<React.FCS<{}>>;
+    'clipboad-notes': React.LazyExoticComponent<React.FCS<{}>>;
+    close: React.LazyExoticComponent<React.FCS<{}>>;
+    'dice-five': React.LazyExoticComponent<React.FCS<{}>>;
+    edit: React.LazyExoticComponent<React.FCS<{}>>;
+    'ellipsis-horizontal': React.LazyExoticComponent<React.FCS<{}>>;
+    'ellipsis-vertical': React.LazyExoticComponent<React.FCS<{}>>;
+    envelope: React.LazyExoticComponent<React.FCS<{}>>;
+    'exclamation-circle': React.LazyExoticComponent<React.FCS<{}>>;
+    'exclamation-triangle': React.LazyExoticComponent<React.FCS<{}>>;
+    exit: React.LazyExoticComponent<React.FCS<{}>>;
+    facebook: React.LazyExoticComponent<React.FCS<{}>>;
+    home: React.LazyExoticComponent<React.FCS<{}>>;
+    'image-edit': React.LazyExoticComponent<React.FCS<{}>>;
+    instagram: React.LazyExoticComponent<React.FCS<{}>>;
+    linkedin: React.LazyExoticComponent<React.FCS<{}>>;
+    lock: React.LazyExoticComponent<React.FCS<{}>>;
+    minus: React.LazyExoticComponent<React.FCS<{}>>;
+    phone: React.LazyExoticComponent<React.FCS<{}>>;
+    plus: React.LazyExoticComponent<React.FCS<{}>>;
+    process: React.LazyExoticComponent<React.FCS<{}>>;
+    'points-circle': React.LazyExoticComponent<React.FCS<{}>>;
+    redo: React.LazyExoticComponent<React.FCS<{}>>;
+    setting: React.LazyExoticComponent<React.FCS<{}>>;
+    user: React.LazyExoticComponent<React.FCS<{}>>;
+    'user-circle': React.LazyExoticComponent<React.FCS<{}>>;
+    users: React.LazyExoticComponent<React.FCS<{}>>;
 };
 export declare type IconType = keyof typeof iconHashMap;
 declare type IconProps = React.SVGProps<SVGSVGElement> & {
     type: IconType;
-    size?: "ultra-small" | "small" | "medium" | "big" | {
+    size?: 'ultra-small' | 'small' | 'medium' | 'big' | {
         width: number;
         height: number;
     };

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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "users";
     size?: "big" | "small" | "ultra-small" | "medium" | {
         width: number;
         height: number;

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/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

@@ -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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "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" | "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/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.13",
   "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,55 +1,63 @@
-import React from "react";
-import { Color } from "../../../styles";
+import React 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";
+const AngleDown = React.lazy(() => import('./icons/AngleDown'));
+const ArrowLeft = React.lazy(() => import('./icons/ArrowLeft'));
+const Bars = React.lazy(() => import('./icons/Bars'));
+const Bell = React.lazy(() => import('./icons/Bell'));
+const CheckCircle = React.lazy(() => import('./icons/CheckCircle'));
+const CheckSquare = React.lazy(() => import('./icons/ChechSquare'));
+const ClipboardNotes = React.lazy(() => import('./icons/ClipboardNotes'));
+const Close = React.lazy(() => import('./icons/Close'));
+const DiceFive = React.lazy(() => import('./icons/DiceFive'));
+const Edit = React.lazy(() => import('./icons/Edit'));
+const EllipsisVertical = React.lazy(() => import('./icons/EllipsisVertical'));
+const EllipsisHorizontal = React.lazy(
+  () => import('./icons/EllipsisHorizontal'),
+);
+const Envelope = React.lazy(() => import('./icons/Envelope'));
+const ExclamationCircle = React.lazy(() => import('./icons/ExclamationCircle'));
+const ExclamationTriangle = React.lazy(
+  () => import('./icons/ExclamationTriangle'),
+);
+const Exit = React.lazy(() => import('./icons/Exit'));
+const Facebook = React.lazy(() => import('./icons/Facebook'));
+const Home = React.lazy(() => import('./icons/Home'));
+const ImageEdit = React.lazy(() => import('./icons/ImageEdit'));
+const Instagram = React.lazy(() => import('./icons/Instagram'));
+const Linkedin = React.lazy(() => import('./icons/Linkedin'));
+const Lock = React.lazy(() => import('./icons/Lock'));
+const Minus = React.lazy(() => import('./icons/Minus'));
+const Phone = React.lazy(() => import('./icons/Phone'));
+const Plus = React.lazy(() => import('./icons/Plus'));
+const PointsCircle = React.lazy(() => import('./icons/PointsCircle'));
+const Process = React.lazy(() => import('./icons/Process'));
+const Redo = React.lazy(() => import('./icons/Redo'));
+const Setting = React.lazy(() => import('./icons/Setting'));
+const User = React.lazy(() => import('./icons/User'));
+const UserCircle = React.lazy(() => import('./icons/UserCircle'));
+const Users = React.lazy(() => import('./icons/Users'));
 
 export const iconHashMap = {
-  "angle-down": AngleDown,
-  "arrow-left": ArrowLeft,
+  'angle-down': AngleDown,
+  'arrow-left': ArrowLeft,
   bars: Bars,
   bell: Bell,
-  "check-circle": CheckCircle,
-  "check-square": CheckSquare,
-  "clipboad-notes": ClipboardNotes,
+  'check-circle': CheckCircle,
+  'check-square': CheckSquare,
+  'clipboad-notes': ClipboardNotes,
   close: Close,
-  "dice-five": DiceFive,
+  'dice-five': DiceFive,
   edit: Edit,
+  'ellipsis-horizontal': EllipsisHorizontal,
+  'ellipsis-vertical': EllipsisVertical,
   envelope: Envelope,
-  "exclamation-circle": ExclamationCircle,
-  "exclamation-triangle": ExclamationTriangle,
+  'exclamation-circle': ExclamationCircle,
+  'exclamation-triangle': ExclamationTriangle,
   exit: Exit,
   facebook: Facebook,
   home: Home,
-  "image-edit": ImageEdit,
+  'image-edit': ImageEdit,
   instagram: Instagram,
   linkedin: Linkedin,
   lock: Lock,
@@ -57,11 +65,11 @@ export const iconHashMap = {
   phone: Phone,
   plus: Plus,
   process: Process,
-  "points-circle": PointsCircle,
+  'points-circle': PointsCircle,
   redo: Redo,
   setting: Setting,
   user: User,
-  "user-circle": UserCircle,
+  'user-circle': UserCircle,
   users: Users,
 };
 
@@ -70,15 +78,15 @@ export type IconType = keyof typeof iconHashMap;
 type IconProps = React.SVGProps<SVGSVGElement> & {
   type: IconType;
   size?:
-    | "ultra-small"
-    | "small"
-    | "medium"
-    | "big"
-    | { width: number; height: number };
+  | 'ultra-small'
+  | 'small'
+  | 'medium'
+  | 'big'
+  | { width: number; height: number };
 };
 
 const sizeHashMap = {
-  "ultra-small": {
+  'ultra-small': {
     width: 20,
     height: 20,
   },
@@ -99,11 +107,11 @@ const sizeHashMap = {
 export const Icon: React.FCS<IconProps> = ({
   className,
   type,
-  size = "ultra-small",
+  size = 'ultra-small',
   ...props
 }) => {
   const Component = iconHashMap[type];
-  const sizes = typeof size === "string" ? sizeHashMap[size] : size;
+  const sizes = typeof size === 'string' ? sizeHashMap[size] : size;
 
   return (
     <Component className={className} fill={Color.Navy} {...sizes} {...props} />

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/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>
 );