@integrigo/integrigo-ui 1.6.14 → 1.6.15-a

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

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

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

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

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

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

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

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

@@ -1,11 +1,12 @@
-export { Alert } from './Alert';
-export { Avatar } from './Avatar';
-export { Card } from './Card';
-export { Divider } from './Divider';
-export { Icon } from './Icon';
-export { Pill } from './Pill';
-export { Typography } from './Typography';
-export { Nav } from './Nav';
-export { Spinner } from './Spinner';
-export { Chip } from './Chip';
-export { Dot } from './Dot';
+export { Alert } from "./Alert";
+export { Avatar } from "./Avatar";
+export { Card } from "./Card";
+export { Divider } from "./Divider";
+export { Icon } from "./Icon";
+export { Pill } from "./Pill";
+export { Typography } from "./Typography";
+export { Nav } from "./Nav";
+export { Spinner } from "./Spinner";
+export { Chip } from "./Chip";
+export { Dot } from "./Dot";
+export { Gradient } from "./Gradient";

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

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

@@ -4,7 +4,7 @@ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -13,7 +13,7 @@ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -21,7 +21,7 @@ export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -29,7 +29,7 @@ export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -37,7 +37,7 @@ export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Om
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -45,7 +45,7 @@ export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -53,7 +53,7 @@ export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omi
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -61,7 +61,7 @@ export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponen
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction?: "rtl" | "ltr" | undefined;
     onIconClick?: (() => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
@@ -69,7 +69,7 @@ export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<O
     label?: string | undefined;
     validationType?: import("../../../types/validation").ValidationType | undefined;
     icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
-    size?: "s" | "xl" | "l" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | 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" | "xl" | "l" | "m" | "xxl" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "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" | "xl" | "l" | "m" | "xxl" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "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" | "xl" | "l" | "m" | "xxl" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
 } & {
     children?: import("react").ReactNode;
 }> & {

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

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

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

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+export interface TileProps {
+    src?: string;
+    alt?: string;
+    title: string;
+    interactive?: boolean;
+}
+export declare const Tile: React.FC<PropsWithChildren<TileProps>>;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export declare const Interactive: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export declare const NoImage: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;

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

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

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

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

package/lib/src/index.d.ts

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

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.14",
+  "version": "1.6.15a",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -46,6 +46,7 @@
     "rollup": "^2.69.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-uglify": "^6.0.4",
     "styled-components": "^5.3.3",

package/rollup.config.js

@@ -1,6 +1,7 @@
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
+import { terser } from "rollup-plugin-terser";
 import typescript from "rollup-plugin-typescript2";
 import postcss from "rollup-plugin-postcss";
 import { uglify } from "rollup-plugin-uglify";
@@ -9,7 +10,6 @@ const packageJson = require("./package.json");
 
 export default {
   input: "src/index.ts",
-  inlineDynamicImports: true,
   output: [
     {
       file: packageJson.main,
@@ -26,6 +26,7 @@ export default {
     peerDepsExternal(),
     resolve(),
     commonjs(),
+    terser(),
     typescript({ useTsconfigDeclarationDir: true }),
     postcss({
       extensions: [".css"],

package/src/components/atoms/Gradient/Gradient.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Gradient } from "./Gradient";
+
+export default {
+  title: "Atoms/Gradient",
+  component: Gradient,
+  argTypes: {
+    variant: {
+      control: "number",
+      defaultValue: 0,
+    },
+  },
+} as ComponentMeta<typeof Gradient>;
+
+const Template: ComponentStory<typeof Gradient> = (args) => (
+  <Gradient {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/atoms/Gradient/Gradient.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+type GradientProps = {
+  size?: "s" | "m" | "l" | "xl" | "xxl";
+  width?: number;
+  height?: number;
+  variant?: number;
+  circle?: boolean;
+};
+
+const sizeVariant = {
+  s: 20,
+  m: 32,
+  l: 53,
+  xl: 64,
+  xxl: 94,
+};
+
+const colorVariant = [
+  "var(--gradient-natural-orange)",
+  "var(--gradient-orange-red)",
+  "var(--gradient-red)",
+  "var(--gradient-red-blue)",
+  "var(--gradient-green-blue)",
+  "var(--gradient-navy)",
+  "var(--gradient-cyan-blue)",
+  "var(--gradient-natural-grey)",
+];
+
+export const Gradient = styled.div<GradientProps>`
+  width: ${(p) => p.width || sizeVariant[p.size || "m"]}px;
+  height: ${(p) => p.height || sizeVariant[p.size || "m"]}px;
+  background: ${(p) => colorVariant[(p.variant || 0) % 8]};
+  border-radius: ${(p) => (p.circle ? "50%" : 0)};
+`;

package/src/components/atoms/Gradient/index.tsx

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

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

@@ -1,42 +1,78 @@
 import React, { Suspense } from "react";
 import { Color } from "../../../styles";
 
+import AngleDown from "./icons/AngleDown";
+import ArrowLeft from "./icons/ArrowLeft";
+import ArrowRight from "./icons/ArrowRight";
+import Bars from "./icons/Bars";
+import Bell from "./icons/Bell";
+import CheckCircle from "./icons/CheckCircle";
+import CheckSquare from "./icons/CheckSquare";
+import ClipboardNotes from "./icons/ClipboardNotes";
+import Close from "./icons/Close";
+import CreateDashboard from "./icons/CreateDashboard";
+import DiceFive from "./icons/DiceFive";
+import Edit from "./icons/Edit";
+import EllipsisVertical from "./icons/EllipsisVertical";
+import EllipsisHorizontal from "./icons/EllipsisHorizontal";
+import Envelope from "./icons/Envelope";
+import ExclamationCircle from "./icons/ExclamationCircle";
+import ExclamationTriangle from "./icons/ExclamationTriangle";
+import Exit from "./icons/Exit";
+import Facebook from "./icons/Facebook";
+import Home from "./icons/Home";
+import ImageEdit from "./icons/ImageEdit";
+import Instagram from "./icons/Instagram";
+import Linkedin from "./icons/Linkedin";
+import Lock from "./icons/Lock";
+import Minus from "./icons/Minus";
+import Phone from "./icons/Phone";
+import Plus from "./icons/Plus";
+import PointsCircle from "./icons/PointsCircle";
+import Process from "./icons/Process";
+import Redo from "./icons/Redo";
+import Setting from "./icons/Setting";
+import User from "./icons/User";
+import UserCircle from "./icons/UserCircle";
+import UserPlus from "./icons/UserPlus";
+import Users from "./icons/Users";
+
 export const iconHashMap = {
-  "angle-down": "AngleDown",
-  "arrow-left": "ArrowLeft",
-  "arrow-right": "ArrowRight",
-  bars: "Bars",
-  bell: "Bell",
-  "check-circle": "CheckCircle",
-  "check-square": "CheckSquare",
-  "clipboad-notes": "ClipboardNotes",
-  close: "Close",
-  "create-dashboard": "CreateDashboard",
-  "dice-five": "DiceFive",
-  edit: "Edit",
-  "ellipsis-horizontal": "EllipsisHorizontal",
-  "ellipsis-vertical": "EllipsisVertical",
-  envelope: "Envelope",
-  "exclamation-circle": "ExclamationCircle",
-  "exclamation-triangle": "ExclamationTriangle",
-  exit: "Exit",
-  facebook: "Facebook",
-  home: "Home",
-  "image-edit": "ImageEdit",
-  instagram: "Instagram",
-  linkedin: "Linkedin",
-  lock: "Lock",
-  minus: "Minus",
-  phone: "Phone",
-  plus: "Plus",
-  process: "Process",
-  "points-circle": "PointsCircle",
-  redo: "Redo",
-  setting: "Setting",
-  user: "User",
-  "user-circle": "UserCircle",
-  "user-plus": "UserPlus",
-  users: "Users",
+  "angle-down": AngleDown,
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  bars: Bars,
+  bell: Bell,
+  "check-circle": CheckCircle,
+  "check-square": CheckSquare,
+  "clipboad-notes": ClipboardNotes,
+  close: Close,
+  "create-dashboard": CreateDashboard,
+  "dice-five": DiceFive,
+  edit: Edit,
+  "ellipsis-horizontal": EllipsisHorizontal,
+  "ellipsis-vertical": EllipsisVertical,
+  envelope: Envelope,
+  "exclamation-circle": ExclamationCircle,
+  "exclamation-triangle": ExclamationTriangle,
+  exit: Exit,
+  facebook: Facebook,
+  home: Home,
+  "image-edit": ImageEdit,
+  instagram: Instagram,
+  linkedin: Linkedin,
+  lock: Lock,
+  minus: Minus,
+  phone: Phone,
+  plus: Plus,
+  process: Process,
+  "points-circle": PointsCircle,
+  redo: Redo,
+  setting: Setting,
+  user: User,
+  "user-circle": UserCircle,
+  "user-plus": UserPlus,
+  users: Users,
 };
 
 export type IconType = keyof typeof iconHashMap;
@@ -76,7 +112,7 @@ export const Icon: React.FCS<IconProps> = ({
   size = "ultra-small",
   ...props
 }) => {
-  const Component = React.lazy(() => import(`./icons/${iconHashMap[type]}`));
+  const Component = iconHashMap[type];
   const sizes = typeof size === "string" ? sizeHashMap[size] : size;
 
   return (

package/src/components/atoms/index.ts

@@ -1,11 +1,12 @@
-export { Alert } from './Alert';
-export { Avatar } from './Avatar';
-export { Card } from './Card';
-export { Divider } from './Divider';
-export { Icon } from './Icon';
-export { Pill } from './Pill';
-export { Typography } from './Typography';
-export { Nav } from './Nav';
-export { Spinner } from './Spinner';
-export { Chip } from './Chip';
-export { Dot } from './Dot';
+export { Alert } from "./Alert";
+export { Avatar } from "./Avatar";
+export { Card } from "./Card";
+export { Divider } from "./Divider";
+export { Icon } from "./Icon";
+export { Pill } from "./Pill";
+export { Typography } from "./Typography";
+export { Nav } from "./Nav";
+export { Spinner } from "./Spinner";
+export { Chip } from "./Chip";
+export { Dot } from "./Dot";
+export { Gradient } from "./Gradient";