@integrigo/integrigo-ui 1.6.18-c → 1.6.18-e

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

@@ -3,11 +3,11 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.FC<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<React.FC<{
     src: string;
     alt: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;

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" | "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";
+        type: "close" | "angle-down" | "arrow-circle-right" | "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;
@@ -11,12 +11,12 @@ declare const _default: ComponentMeta<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;
 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" | "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";
+        type: "close" | "angle-down" | "arrow-circle-right" | "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;
@@ -25,11 +25,11 @@ export declare const Icon: ComponentStory<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;
 export declare const Basic: ComponentStory<import("react").FCS<{
     icon?: (import("react").SVGProps<SVGSVGElement> & {
-        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";
+        type: "close" | "angle-down" | "arrow-circle-right" | "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;
@@ -38,5 +38,5 @@ export declare const Basic: ComponentStory<import("react").FCS<{
         children?: import("react").ReactNode;
     }) | undefined;
     children?: import("react").ReactNode;
-    size?: "s" | "m" | "l" | "xl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | undefined;
 }>>;

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

@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     variant?: number | undefined;
@@ -8,7 +8,7 @@ declare const _default: ComponentMeta<import("styled-components").StyledComponen
 }, never>>;
 export default _default;
 export declare const Basic: ComponentStory<import("styled-components").StyledComponent<"div", any, {
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     variant?: number | undefined;

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

@@ -1,6 +1,7 @@
 import React from "react";
 export declare const iconHashMap: {
     "angle-down": React.FCS<{}>;
+    "arrow-circle-right": React.FCS<{}>;
     "arrow-left": React.FCS<{}>;
     "arrow-right": React.FCS<{}>;
     bars: 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" | "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";
+    type: "close" | "angle-down" | "arrow-circle-right" | "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" | "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";
+    type: "close" | "angle-down" | "arrow-circle-right" | "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/icons/ArrowCircleRight.d.ts

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

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?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 }>>;
 export default _default;
 export declare const Basic: ComponentStory<import("react").FC<{
     text: string;
-    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "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?: "xl" | "l" | "m" | "s" | 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?: "xl" | "l" | "m" | "s" | 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?: "xl" | "l" | "m" | "s" | 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?: "xl" | "l" | "m" | "s" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { IconType } from "../../atoms/Icon";
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: "m" | "l";
+    icon: IconType;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<React.FC<import("./IconButton").IconButtonProps>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<import("./IconButton").IconButtonProps>>;

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

@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";

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" | "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;
+    icon?: "angle-down" | "arrow-circle-right" | "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,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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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" | "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;
+    icon?: "close" | "angle-down" | "arrow-circle-right" | "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?: "xl" | "l" | "m" | "s" | 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?: "xl" | "l" | "m" | "s" | "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?: "xl" | "l" | "m" | "s" | "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?: "xl" | "l" | "m" | "s" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {

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

@@ -1,7 +1,8 @@
+import { FieldProps } from 'formik';
 import React from 'react';
 import { ValidationType } from '../../../types/validation';
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export declare type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & FieldProps & {
     validationType?: ValidationType;
     size?: "xl" | "l" | "m" | "s";
-}
+};
 export declare const TextArea: React.FC<TextAreaProps>;

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface CommentProps {
+    avatar: {
+        src: string;
+        alt: string;
+    };
+    body: string;
+    author: string;
+    createdAt: Date;
+}
+export declare const Comment: React.FC<CommentProps>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FC<import("./Comment").CommentProps>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FC<import("./Comment").CommentProps>>;

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

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

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

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

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from './components/atoms';
-export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from './components/molecules';
-export { Menu, Setting, Modal, Select, Table } 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, IconButton, } from "./components/molecules";
+export { Menu, Setting, Modal, Select, Table, Comment, } 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.18c",
+  "version": "1.6.18e",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -2,6 +2,7 @@ import React, { Suspense } from "react";
 import { Color } from "../../../styles";
 
 import AngleDown from "./icons/AngleDown";
+import ArrowCircleRight from "./icons/ArrowCircleRight";
 import ArrowLeft from "./icons/ArrowLeft";
 import ArrowRight from "./icons/ArrowRight";
 import Bars from "./icons/Bars";
@@ -50,6 +51,7 @@ import Users from "./icons/Users";
 
 export const iconHashMap = {
   "angle-down": AngleDown,
+  "arrow-circle-right": ArrowCircleRight,
   "arrow-left": ArrowLeft,
   "arrow-right": ArrowRight,
   bars: Bars,

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ArrowCircleRight: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5027 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.10169 12.2663 7.9959 12 7.9959C11.7337 7.9959 11.4783 8.10169 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.52169 11.29 9.71L12.59 11H9C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13H12.59L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.44429C19.2159 4.7998 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19214C8.10929 2.578 6.32746 3.5304 4.92894 4.92893C3.53041 6.32745 2.578 8.10928 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55543C6.2273 6.23984 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84503 13.5607 4.15371C15.1126 4.4624 16.538 5.22432 17.6569 6.34314C18.7757 7.46196 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" />
+  </svg>
+);
+
+export default ArrowCircleRight;

package/src/components/molecules/IconButton/IconButton.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { IconButton } from "./IconButton";
+
+export default {
+  title: "Molecules/IconButton",
+  component: IconButton,
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (args) => (
+  <IconButton {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  icon: 'arrow-circle-right'
+};

package/src/components/molecules/IconButton/IconButton.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+import { Color } from "../../../styles";
+import { Icon } from "../../atoms";
+import { IconType } from "../../atoms/Icon";
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "m" | "l";
+  icon: IconType;
+}
+
+const sizeVariant = {
+  m: 36,
+  l: 48,
+};
+
+export const IconButton: React.FC<IconButtonProps> = ({
+  size = "m",
+  icon,
+  ...props
+}) => {
+  const iconSize = (5 / 9) * sizeVariant[size];
+
+  return (
+    <Root size={size} {...props}>
+      <Icon
+        type={icon}
+        width={iconSize}
+        height={iconSize}
+        fill={Color.Orange}
+      />
+    </Root>
+  );
+};
+
+const Root = styled.button<{ size: "m" | "l" }>`
+  border: none;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  width: ${(p) => sizeVariant[p.size]}px;
+  height: ${(p) => sizeVariant[p.size]}px;
+  border-radius: calc(${(p) => sizeVariant[p.size]}px / 2);
+  background-color: var(--color-ecru);
+  transition: background-color var(--transition-speed);
+
+  & svg {
+    transition: fill var(--transition-speed);
+  }
+
+  &:hover {
+    background-color: var(--color-orange);
+
+    & svg {
+      fill: var(--color-ecru);
+    }
+  }
+`;

package/src/components/molecules/IconButton/index.ts

@@ -0,0 +1 @@
+export { IconButton } from "./IconButton";

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,17 +1,17 @@
+import { FieldProps } from 'formik';
 import React from 'react';
 import styled from 'styled-components';
 import { getValidationTypeProps } from '../../../helpers/validation';
 import { ValidationType } from '../../../types/validation';
 import { fieldSizeVariants } from '../../atoms/Field';
 
-export interface TextAreaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & FieldProps & {
   validationType?: ValidationType;
   size?: "xl" | "l" | "m" | "s";
 }
 
-export const TextArea: React.FC<TextAreaProps> = (props) => {
-  return <TextAreaElement rows={4} {...props} />;
+export const TextArea: React.FC<TextAreaProps> = ({ field, ...props }) => {
+  return <TextAreaElement rows={4} {...field} {...props} />;
 };
 
 const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType' | 'size'>>`

package/src/components/molecules/index.ts

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

package/src/components/organisms/Comment/Comment.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Comment } from "./Comment";
+
+export default {
+  title: "Organisms/Comment",
+  component: Comment,
+  argTypes: {
+    show: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof Comment>;
+
+const Template: ComponentStory<typeof Comment> = (args) => (
+  <Comment {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  avatar: {
+    src: "https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2",
+    alt: "Jane Doe",
+  },
+  body: "Comment body goes here!",
+  author: "Jane Doe",
+  createdAt: new Date(),
+};