@integrigo/integrigo-ui 1.6.17 → 1.6.18-a

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

@@ -1,13 +1,14 @@
-import { MouseEvent, FC } from "react";
+import { MouseEvent } from "react";
 import { IconType } from "../Icon";
 declare type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
     iconLeft?: IconType;
     iconRight?: IconType;
-    size?: 's' | 'm' | 'l' | 'xl';
+    iconColor?: string;
+    size?: "s" | "m" | "l" | "xl";
     label: React.ReactNode;
-    variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
+    variant?: "transparent" | "white" | "primary" | "secondary" | "grey";
     onClick?: OnClickFunctionType;
 }
-export declare const Chip: FC<ChipProps>;
+export declare const Chip: React.FCS<ChipProps>;
 export {};

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

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

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

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

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

@@ -5,13 +5,17 @@ export declare const iconHashMap: {
     "arrow-right": React.FCS<{}>;
     bars: React.FCS<{}>;
     bell: React.FCS<{}>;
+    calendar: React.FCS<{}>;
     "calendar-slash": React.FCS<{}>;
     "check-circle": React.FCS<{}>;
     "check-square": React.FCS<{}>;
     "clipboad-notes": React.FCS<{}>;
     close: React.FCS<{}>;
+    "close-square": React.FCS<{}>;
+    "comment-dots": React.FCS<{}>;
     "create-dashboard": React.FCS<{}>;
     "dice-five": React.FCS<{}>;
+    "dice-one": React.FCS<{}>;
     edit: React.FCS<{}>;
     "ellipsis-horizontal": React.FCS<{}>;
     "ellipsis-vertical": React.FCS<{}>;
@@ -19,8 +23,12 @@ export declare const iconHashMap: {
     "exclamation-circle": React.FCS<{}>;
     "exclamation-triangle": React.FCS<{}>;
     exit: React.FCS<{}>;
+    eye: React.FCS<{}>;
     facebook: React.FCS<{}>;
+    heart: React.FCS<{}>;
+    "heart-alt": React.FCS<{}>;
     home: React.FCS<{}>;
+    "hour-glass": React.FCS<{}>;
     "image-edit": React.FCS<{}>;
     instagram: React.FCS<{}>;
     linkedin: React.FCS<{}>;
@@ -28,9 +36,11 @@ export declare const iconHashMap: {
     minus: React.FCS<{}>;
     phone: React.FCS<{}>;
     plus: React.FCS<{}>;
-    process: React.FCS<{}>;
     "points-circle": React.FCS<{}>;
+    process: React.FCS<{}>;
+    "question-circle": React.FCS<{}>;
     redo: React.FCS<{}>;
+    rocket: React.FCS<{}>;
     setting: React.FCS<{}>;
     user: React.FCS<{}>;
     "user-circle": React.FCS<{}>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/src/components/atoms/Typography/Hero.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export interface HeroProps {
-    size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 }
 export declare const Hero: React.FCS<HeroProps>;

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

@@ -2,6 +2,7 @@ export { Alert } from "./Alert";
 export { Avatar } from "./Avatar";
 export { Card } from "./Card";
 export { Divider } from "./Divider";
+export { DateTime } from "./DateTime";
 export { Icon } from "./Icon";
 export { Pill } from "./Pill";
 export { Typography } from "./Typography";

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface SwitchOption {
+    id: string;
+    name: string;
+    disabled?: boolean;
+}
+export interface SwitchProps {
+    options: [SwitchOption, SwitchOption] | [SwitchOption, SwitchOption, SwitchOption];
+    active?: SwitchOption["id"];
+    onClick: (id: SwitchOption["id"]) => void;
+}
+export declare const Switch: React.FC<SwitchProps>;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FC<import("./Switch").SwitchProps>>;
+export default _default;
+export declare const TwoOptions: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;
+export declare const ThreeOptions: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;
+export declare const ThreeWithDisabled: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;

package/lib/src/components/molecules/Switch/index.d.ts

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

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

@@ -7,3 +7,4 @@ export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
 export { Tile } from './Tile';
+export { Switch } from './Switch';

package/lib/src/components/organisms/Modal/Divider.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Divider: React.FC;

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

@@ -1,6 +1,10 @@
 import React, { PropsWithChildren } from "react";
+import { Divider } from "./Divider";
+export interface ModalStaticProps {
+    Divider: typeof Divider;
+}
 export interface ModalProps {
     show: boolean;
     onClose: () => void;
 }
-export declare const Modal: React.FCS<PropsWithChildren<ModalProps>>;
+export declare const Modal: React.FCS<PropsWithChildren<ModalProps>> & ModalStaticProps;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
+declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>> & import("./Modal").ModalStaticProps>;
 export default _default;
-export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
+export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>> & import("./Modal").ModalStaticProps>;

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

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

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

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

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

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

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

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

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

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

package/lib/src/index.d.ts

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

package/package.json

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