@integrigo/integrigo-ui 1.6.17-h → 1.6.18

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

@@ -4,6 +4,7 @@ declare type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
     iconLeft?: IconType;
     iconRight?: IconType;
+    iconColor?: string;
     size?: "s" | "m" | "l" | "xl";
     label: React.ReactNode;
     variant?: "transparent" | "white" | "primary" | "secondary" | "grey";

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" | "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-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" | "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-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" | "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-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,6 +5,7 @@ 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<{}>;

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" | "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-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" | "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-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/Calendar.d.ts

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

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

@@ -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-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-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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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" | "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?: "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/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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.17h",
+  "version": "1.6.18",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/atoms/Chip/Chip.tsx

@@ -7,6 +7,7 @@ type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
   iconLeft?: IconType;
   iconRight?: IconType;
+  iconColor?: string;
   size?: "s" | "m" | "l" | "xl";
   label: React.ReactNode;
   variant?: "transparent" | "white" | "primary" | "secondary" | "grey";
@@ -87,6 +88,7 @@ export const Chip: React.FCS<ChipProps> = (props) => {
     className,
     iconLeft,
     iconRight,
+    iconColor,
     label,
     size = "m",
     variant = "primary",
@@ -104,7 +106,7 @@ export const Chip: React.FCS<ChipProps> = (props) => {
         <IconWrapper>
           <Icon
             type={iconLeft}
-            fill={colorVariant[variant].fontColor}
+            fill={iconColor || colorVariant[variant].fontColor}
             size={sizeVariant[size].iconSize}
           />
         </IconWrapper>

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

@@ -6,6 +6,7 @@ import ArrowLeft from "./icons/ArrowLeft";
 import ArrowRight from "./icons/ArrowRight";
 import Bars from "./icons/Bars";
 import Bell from "./icons/Bell";
+import Calendar from "./icons/Calendar";
 import CalendarSlash from "./icons/CalendarSlash";
 import CheckCircle from "./icons/CheckCircle";
 import CheckSquare from "./icons/CheckSquare";
@@ -53,6 +54,7 @@ export const iconHashMap = {
   "arrow-right": ArrowRight,
   bars: Bars,
   bell: Bell,
+  calendar: Calendar,
   "calendar-slash": CalendarSlash,
   "check-circle": CheckCircle,
   "check-square": CheckSquare,

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Calendar: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M19 4H17V3C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2C15.7348 2 15.4804 2.10536 15.2929 2.29289C15.1054 2.48043 15 2.73478 15 3V4H9V3C9 2.73478 8.89464 2.48043 8.70711 2.29289C8.51957 2.10536 8.26522 2 8 2C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3V4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V12H20V19ZM20 10H4V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H7V7C7 7.26522 7.10536 7.51957 7.29289 7.70711C7.48043 7.89464 7.73478 8 8 8C8.26522 8 8.51957 7.89464 8.70711 7.70711C8.89464 7.51957 9 7.26522 9 7V6H15V7C15 7.26522 15.1054 7.51957 15.2929 7.70711C15.4804 7.89464 15.7348 8 16 8C16.2652 8 16.5196 7.89464 16.7071 7.70711C16.8946 7.51957 17 7.26522 17 7V6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V10Z" />
+  </svg>
+);
+
+export default Calendar;

package/src/components/atoms/Typography/Hero.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 export interface HeroProps {
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 }
 
-const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'> = {
+const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> = {
+  xs: 'h6',
   s: 'h5',
   m: 'h4',
   l: 'h3',

package/src/components/organisms/Modal/Divider.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+import { Divider as DividerComponent } from "../../atoms";
+
+export const Divider: React.FC = () => {
+  return <ModalDivider />;
+};
+
+const ModalDivider = styled(DividerComponent)`
+  width: calc(100% + 2 * var(--padding-s));
+  margin: var(--padding-m) 0;
+  transform: translateX(calc(-1 * var(--padding-s)));
+`;

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

@@ -18,6 +18,8 @@ const Template: ComponentStory<typeof Modal> = (args) => (
     Some other content
     <Modal show={args.show} onClose={() => null}>
       hey
+      <Modal.Divider />
+      hey hey
     </Modal>
   </>
 );

package/src/components/organisms/Modal/Modal.tsx

@@ -1,18 +1,19 @@
 import React, { PropsWithChildren } from "react";
 import styled from "styled-components";
 import { Card, Icon } from "../../atoms";
+import { Divider } from "./Divider";
+
+export interface ModalStaticProps {
+  Divider: typeof Divider;
+}
 
 export interface ModalProps {
   show: boolean;
   onClose: () => void;
 }
 
-export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
-  className,
-  children,
-  show,
-  onClose,
-}) => {
+export const Modal: React.FCS<PropsWithChildren<ModalProps>> &
+  ModalStaticProps = ({ className, children, show, onClose }) => {
   if (!show) {
     return null;
   }
@@ -31,6 +32,8 @@ export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
   );
 };
 
+Modal.Divider = Divider;
+
 const Root = styled.div`
   position: fixed;
   left: 0;

package/src/styles/global.ts

@@ -50,12 +50,13 @@ export const GlobalStyles = createGlobalStyle`
     --font-medium: 600;
     --font-thin: 300;
 
-    --font-size-s: 10px;
+    --font-size-s: 12px;
     --font-size-m: 16px;
     --font-size-l: 20px;
     --font-size-xl: 32px;
     --font-size-xxl: 40px;
 
+    --header-size-xs: 12px;
     --header-size-s: 16px;
     --header-size-m: 24px;
     --header-size-l: 32px;
@@ -101,4 +102,9 @@ export const GlobalStyles = createGlobalStyle`
     font-size: var(--header-size-s);
     font-weight: var(--font-bold);
   }
+
+  h5 {
+    font-size: var(--header-size-xs);
+    font-weight: var(--font-bold);
+  }
 `;