From 7a44c8e8deda46b2001312819bb1a1c3dae1af35 Mon Sep 17 00:00:00 2001
From: Pedro Mutter <pedro.mutter@catho.com>
Date: Fri, 31 Jan 2020 20:14:38 -0300
Subject: [PATCH] Types definition for the package @catho/quantum (#41991)

* simplecrawler modules type definition

* required fixes in export

* adjustments reference types of crawler.d.ts

* added catho__quantum types definitions

* Fix lint errors

* Fix lint errors

* Fix lint errors
---
 types/catho__quantum/catho__quantum-tests.tsx | 103 ++
 .../components/Accordion/index.d.ts           |  18 +
 .../components/Alert/index.d.ts               |  19 +
 .../components/Badge/index.d.ts               |  17 +
 .../components/Breakpoints/index.d.ts         |  25 +
 .../components/Button/IconButton.d.ts         |  18 +
 .../components/Button/index.d.ts              |  29 +
 .../components/Card/Content.d.ts              |   9 +
 .../components/Card/Description.d.ts          |  10 +
 .../components/Card/Footer.d.ts               |   9 +
 .../components/Card/Header.d.ts               |   9 +
 .../components/Card/HeaderText.d.ts           |   7 +
 .../catho__quantum/components/Card/Media.d.ts |  11 +
 .../components/Card/Thumbnail.d.ts            |  12 +
 .../catho__quantum/components/Card/Title.d.ts |  10 +
 .../catho__quantum/components/Card/index.d.ts |  27 +
 .../components/Checkbox/index.d.ts            |  61 ++
 .../components/CircularLoader/index.d.ts      |  12 +
 .../components/Colors/index.d.ts              |  18 +
 .../components/Dropdown/index.d.ts            |  24 +
 .../catho__quantum/components/Form/index.d.ts |  26 +
 .../components/GlobalStyle/index.d.ts         |   6 +
 .../catho__quantum/components/Grid/index.d.ts |  58 ++
 .../components/Hamburguer/index.d.ts          |  10 +
 .../catho__quantum/components/Icon/index.d.ts | 939 ++++++++++++++++++
 .../components/Input/index.d.ts               |  26 +
 .../components/Modal/index.d.ts               |  17 +
 .../components/Pagination/index.d.ts          |  18 +
 .../components/Popover/index.d.ts             |  13 +
 .../components/ProgressBar/index.d.ts         |  17 +
 .../components/RadioGroup/index.d.ts          |  66 ++
 .../components/RangeSlider/index.d.ts         |  27 +
 .../components/Skeleton/index.d.ts            |  45 +
 .../components/SnackBar/index.d.ts            |  27 +
 .../components/Socials/index.d.ts             |  18 +
 .../components/TabbedView/index.d.ts          |  27 +
 .../catho__quantum/components/Tag/index.d.ts  |  20 +
 .../components/TextArea/index.d.ts            |  15 +
 .../components/Toggle/index.d.ts              |  12 +
 .../components/Tooltip/index.d.ts             |  15 +
 types/catho__quantum/index.d.ts               |  78 ++
 types/catho__quantum/tsconfig.json            |  25 +
 types/catho__quantum/tslint.json              |   1 +
 43 files changed, 1954 insertions(+)
 create mode 100644 types/catho__quantum/catho__quantum-tests.tsx
 create mode 100644 types/catho__quantum/components/Accordion/index.d.ts
 create mode 100644 types/catho__quantum/components/Alert/index.d.ts
 create mode 100644 types/catho__quantum/components/Badge/index.d.ts
 create mode 100644 types/catho__quantum/components/Breakpoints/index.d.ts
 create mode 100644 types/catho__quantum/components/Button/IconButton.d.ts
 create mode 100644 types/catho__quantum/components/Button/index.d.ts
 create mode 100644 types/catho__quantum/components/Card/Content.d.ts
 create mode 100644 types/catho__quantum/components/Card/Description.d.ts
 create mode 100644 types/catho__quantum/components/Card/Footer.d.ts
 create mode 100644 types/catho__quantum/components/Card/Header.d.ts
 create mode 100644 types/catho__quantum/components/Card/HeaderText.d.ts
 create mode 100644 types/catho__quantum/components/Card/Media.d.ts
 create mode 100644 types/catho__quantum/components/Card/Thumbnail.d.ts
 create mode 100644 types/catho__quantum/components/Card/Title.d.ts
 create mode 100644 types/catho__quantum/components/Card/index.d.ts
 create mode 100644 types/catho__quantum/components/Checkbox/index.d.ts
 create mode 100644 types/catho__quantum/components/CircularLoader/index.d.ts
 create mode 100644 types/catho__quantum/components/Colors/index.d.ts
 create mode 100644 types/catho__quantum/components/Dropdown/index.d.ts
 create mode 100644 types/catho__quantum/components/Form/index.d.ts
 create mode 100644 types/catho__quantum/components/GlobalStyle/index.d.ts
 create mode 100644 types/catho__quantum/components/Grid/index.d.ts
 create mode 100644 types/catho__quantum/components/Hamburguer/index.d.ts
 create mode 100644 types/catho__quantum/components/Icon/index.d.ts
 create mode 100644 types/catho__quantum/components/Input/index.d.ts
 create mode 100644 types/catho__quantum/components/Modal/index.d.ts
 create mode 100644 types/catho__quantum/components/Pagination/index.d.ts
 create mode 100644 types/catho__quantum/components/Popover/index.d.ts
 create mode 100644 types/catho__quantum/components/ProgressBar/index.d.ts
 create mode 100644 types/catho__quantum/components/RadioGroup/index.d.ts
 create mode 100644 types/catho__quantum/components/RangeSlider/index.d.ts
 create mode 100644 types/catho__quantum/components/Skeleton/index.d.ts
 create mode 100644 types/catho__quantum/components/SnackBar/index.d.ts
 create mode 100644 types/catho__quantum/components/Socials/index.d.ts
 create mode 100644 types/catho__quantum/components/TabbedView/index.d.ts
 create mode 100644 types/catho__quantum/components/Tag/index.d.ts
 create mode 100644 types/catho__quantum/components/TextArea/index.d.ts
 create mode 100644 types/catho__quantum/components/Toggle/index.d.ts
 create mode 100644 types/catho__quantum/components/Tooltip/index.d.ts
 create mode 100644 types/catho__quantum/index.d.ts
 create mode 100644 types/catho__quantum/tsconfig.json
 create mode 100644 types/catho__quantum/tslint.json

diff --git a/types/catho__quantum/catho__quantum-tests.tsx b/types/catho__quantum/catho__quantum-tests.tsx
new file mode 100644
index 0000000000..7cad19dff0
--- /dev/null
+++ b/types/catho__quantum/catho__quantum-tests.tsx
@@ -0,0 +1,103 @@
+import React = require('react');
+import {
+    Button,
+    Tag,
+    Colors,
+    Card,
+    Accordion,
+    Alert,
+    Badge,
+    Checkbox,
+    CheckboxGroup,
+    CircularLoader,
+    Dropdown,
+    Form,
+    Validations,
+    GlobalStyle,
+    IconFont,
+    Typography,
+    BREAKPOINTS,
+    Col,
+    Container,
+    Hide,
+    Row,
+    Hamburguer,
+    Icon,
+    Modal,
+    Pagination,
+    Popover,
+    ProgressBar,
+    RadioGroup,
+    RangeSlider,
+    Skeleton,
+    SnackBar,
+    Socials,
+    Tab,
+    TabbedView,
+    TextArea,
+    Toggle,
+    Tooltip,
+    Input,
+} from 'catho__quantum';
+
+<Button size="small" />;
+<Button.Icon />;
+<Tag />;
+Colors.error[500];
+BREAKPOINTS.large.width;
+<Card />;
+<Card.Content />;
+<Card.Header />;
+<Card.HeaderText />;
+<Card.Footer />;
+<Card.Description />;
+<Card.Media />;
+<Card.Thumbnail src="www.example.com" alt="just an example" />;
+<Card.Title />;
+<Accordion items={[]} />;
+<Alert onClose={() => {}}>Alert Example</Alert>;
+<Badge />;
+<Checkbox name="example" />;
+<CheckboxGroup type="checkbox" />;
+<CheckboxGroup.Button name="example 2" />;
+<CheckboxGroup.Checkbox name="example 3" />;
+<CircularLoader />;
+<Dropdown />;
+<Form>Form Example</Form>;
+Validations.CEP({ value: '37200000' });
+Validations.CPF({ value: '123456789' });
+Validations.Date({ value: '01/01/2020' });
+Validations.Email({ value: 'a@b.com' });
+Validations.MaxLength({ value: 'abcdef', maxLength: 10 });
+Validations.MinLength({ value: 'abcdef', minLength: 2 });
+Validations.Required({ value: 'abc' });
+<GlobalStyle />;
+<IconFont />;
+<Typography />;
+<Col />;
+<Row>Row Example</Row>;
+<Container />;
+<Hide />;
+<Hamburguer />;
+<Icon name="account_circle" />;
+<Modal />;
+<Pagination totalPages={5} />;
+<Popover trigger={Pagination}>Popover Example</Popover>;
+<ProgressBar />;
+<RadioGroup name="example" />;
+<RadioGroup.Button value="test" />;
+<RadioGroup.Radio value="test" />;
+<RangeSlider />;
+<Skeleton />;
+<Skeleton.Button size="large" theme={{}} />;
+<Skeleton.Circle />;
+<Skeleton.Text />;
+<Skeleton.Tag theme={{}} size="large" />;
+<SnackBar />;
+<Socials items={[{}]} />;
+<Tab title="It is a title">Tab Example</Tab>;
+<TabbedView>TabbedView Example</TabbedView>;
+<TextArea />;
+<Toggle />;
+<Tooltip text="this is a tooltip!">Tooltip example</Tooltip>;
+<Input />;
diff --git a/types/catho__quantum/components/Accordion/index.d.ts b/types/catho__quantum/components/Accordion/index.d.ts
new file mode 100644
index 0000000000..176e94a20f
--- /dev/null
+++ b/types/catho__quantum/components/Accordion/index.d.ts
@@ -0,0 +1,18 @@
+import React = require('react');
+
+export interface AccordionProps {
+    theme?: {
+        colors?: object;
+        spacing?: object;
+        baseFontSize?: number;
+    };
+    keepOnlyOneOpen?: boolean;
+    items: Array<{
+        title?: string;
+        content?: React.ReactNode;
+        opened?: boolean;
+        onClick?: () => void;
+    }>;
+}
+
+export default class Accordion extends React.Component<AccordionProps> {}
diff --git a/types/catho__quantum/components/Alert/index.d.ts b/types/catho__quantum/components/Alert/index.d.ts
new file mode 100644
index 0000000000..fb4594f05c
--- /dev/null
+++ b/types/catho__quantum/components/Alert/index.d.ts
@@ -0,0 +1,19 @@
+import React = require('react');
+
+export interface AlertProps {
+    children: React.ReactNode;
+    onClose: () => void;
+    icon?: string;
+    skin?: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
+    theme?: {
+        baseFontSize?: number;
+        colors?: object;
+        spacing?: object;
+        components?: {
+            alert?: object;
+            button?: object;
+        };
+    };
+}
+
+export default class Alert extends React.Component<AlertProps> {}
diff --git a/types/catho__quantum/components/Badge/index.d.ts b/types/catho__quantum/components/Badge/index.d.ts
new file mode 100644
index 0000000000..ceda3df900
--- /dev/null
+++ b/types/catho__quantum/components/Badge/index.d.ts
@@ -0,0 +1,17 @@
+import React = require('react');
+
+export interface BadgeProps {
+    skin?: 'primary' | 'secondary' | 'success' | 'error' | 'neutral';
+    children?: React.ReactNode[] | React.ReactNode;
+    number?: number;
+    inverted?: boolean;
+    theme?: {
+        baseFontSize?: number;
+        spacing?: object;
+        components?: {
+            badge?: object;
+        };
+    };
+}
+
+export default class Badge extends React.Component<BadgeProps> {}
diff --git a/types/catho__quantum/components/Breakpoints/index.d.ts b/types/catho__quantum/components/Breakpoints/index.d.ts
new file mode 100644
index 0000000000..0fa4972a68
--- /dev/null
+++ b/types/catho__quantum/components/Breakpoints/index.d.ts
@@ -0,0 +1,25 @@
+export interface Breakpoints {
+    xsmall: {
+        width: number;
+        columns: number;
+    };
+    small: {
+        width: number;
+        columns: number;
+    };
+    medium: {
+        width: number;
+        columns: number;
+    };
+    large: {
+        width: number;
+        columns: number;
+    };
+    xlarge: {
+        width: number;
+        columns: number;
+    };
+}
+declare const breakPoints: Breakpoints;
+
+export default breakPoints;
diff --git a/types/catho__quantum/components/Button/IconButton.d.ts b/types/catho__quantum/components/Button/IconButton.d.ts
new file mode 100644
index 0000000000..5662f5de6f
--- /dev/null
+++ b/types/catho__quantum/components/Button/IconButton.d.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface IconButtonProps {
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    skin?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    theme?: {
+        baseFontSize?: number;
+        colors?: object;
+        spacing?: object;
+        components?: {
+            button?: object;
+        };
+    };
+}
+
+type IconButton = React.ComponentType<IconButtonProps>;
+
+export default IconButton;
diff --git a/types/catho__quantum/components/Button/index.d.ts b/types/catho__quantum/components/Button/index.d.ts
new file mode 100644
index 0000000000..1afea90763
--- /dev/null
+++ b/types/catho__quantum/components/Button/index.d.ts
@@ -0,0 +1,29 @@
+import React = require('react');
+import IconButton from './IconButton';
+
+export interface ButtonProps {
+    center?: boolean;
+    disabled?: boolean;
+    stroked?: boolean;
+    full?: boolean;
+    icon?: string;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    skin?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    type?: 'button' | 'reset' | 'submit';
+    children?: React.ReactNode[] | React.ReactNode;
+    $as?: JSX.Element | string;
+    onClick?: () => void;
+    theme?: {
+        baseFontSize?: number;
+        colors?: object;
+        spacing?: object;
+        breakpoints?: object;
+        components?: {
+            button: object;
+        };
+    };
+}
+
+export default class Button extends React.Component<ButtonProps> {
+    static Icon: IconButton;
+}
diff --git a/types/catho__quantum/components/Card/Content.d.ts b/types/catho__quantum/components/Card/Content.d.ts
new file mode 100644
index 0000000000..8bbe922eb1
--- /dev/null
+++ b/types/catho__quantum/components/Card/Content.d.ts
@@ -0,0 +1,9 @@
+import React = require('react');
+
+type Content = React.ComponentType<{
+    theme?: { baseFontSize?: number; spacing?: object };
+}> & {
+    displayName: 'Card.Content';
+};
+
+export default Content;
diff --git a/types/catho__quantum/components/Card/Description.d.ts b/types/catho__quantum/components/Card/Description.d.ts
new file mode 100644
index 0000000000..8667af03ba
--- /dev/null
+++ b/types/catho__quantum/components/Card/Description.d.ts
@@ -0,0 +1,10 @@
+import React = require('react');
+
+type Description = React.ComponentType<{
+    small?: boolean;
+    theme?: { baseFontSize?: number; spacing?: object };
+}> & {
+    displayName: 'Card.Description';
+};
+
+export default Description;
diff --git a/types/catho__quantum/components/Card/Footer.d.ts b/types/catho__quantum/components/Card/Footer.d.ts
new file mode 100644
index 0000000000..8af2c94ba5
--- /dev/null
+++ b/types/catho__quantum/components/Card/Footer.d.ts
@@ -0,0 +1,9 @@
+import React = require('react');
+
+type Footer = React.ComponentType<{
+    theme?: { spacing?: object };
+}> & {
+    displayName: 'Card.Footer';
+};
+
+export default Footer;
diff --git a/types/catho__quantum/components/Card/Header.d.ts b/types/catho__quantum/components/Card/Header.d.ts
new file mode 100644
index 0000000000..120628c4e5
--- /dev/null
+++ b/types/catho__quantum/components/Card/Header.d.ts
@@ -0,0 +1,9 @@
+import React = require('react');
+
+type Header = React.ComponentType<{
+    theme?: { spacing?: object };
+}> & {
+    displayName: 'Card.Header';
+};
+
+export default Header;
diff --git a/types/catho__quantum/components/Card/HeaderText.d.ts b/types/catho__quantum/components/Card/HeaderText.d.ts
new file mode 100644
index 0000000000..83e2b19d91
--- /dev/null
+++ b/types/catho__quantum/components/Card/HeaderText.d.ts
@@ -0,0 +1,7 @@
+import React = require('react');
+
+type HeaderText = React.ComponentType & {
+    displayName: 'Card.HeaderText';
+};
+
+export default HeaderText;
diff --git a/types/catho__quantum/components/Card/Media.d.ts b/types/catho__quantum/components/Card/Media.d.ts
new file mode 100644
index 0000000000..0e1871dbba
--- /dev/null
+++ b/types/catho__quantum/components/Card/Media.d.ts
@@ -0,0 +1,11 @@
+import React = require('react');
+
+type Media = React.ComponentType<{
+    className?: string;
+    style?: object;
+    theme?: { colors?: object; spacing?: object };
+}> & {
+    displayName: 'Card.Media';
+};
+
+export default Media;
diff --git a/types/catho__quantum/components/Card/Thumbnail.d.ts b/types/catho__quantum/components/Card/Thumbnail.d.ts
new file mode 100644
index 0000000000..98c5dcfbe0
--- /dev/null
+++ b/types/catho__quantum/components/Card/Thumbnail.d.ts
@@ -0,0 +1,12 @@
+import React = require('react');
+
+type Thumbnail = React.ComponentType<{
+    src: string;
+    alt: string;
+    rounded?: boolean;
+    theme?: { colors?: object };
+}> & {
+    displayName: 'Card.Thumbnail';
+};
+
+export default Thumbnail;
diff --git a/types/catho__quantum/components/Card/Title.d.ts b/types/catho__quantum/components/Card/Title.d.ts
new file mode 100644
index 0000000000..0c69421b05
--- /dev/null
+++ b/types/catho__quantum/components/Card/Title.d.ts
@@ -0,0 +1,10 @@
+import React = require('react');
+
+type Title = React.ComponentType<{
+    small?: boolean;
+    theme?: { baseFontSize?: object };
+}> & {
+    displayName: 'Card.Title';
+};
+
+export default Title;
diff --git a/types/catho__quantum/components/Card/index.d.ts b/types/catho__quantum/components/Card/index.d.ts
new file mode 100644
index 0000000000..e73969799c
--- /dev/null
+++ b/types/catho__quantum/components/Card/index.d.ts
@@ -0,0 +1,27 @@
+import React = require('react');
+import Content from './Content';
+import Description from './Description';
+import Footer from './Footer';
+import Header from './Header';
+import HeaderText from './HeaderText';
+import Media from './Media';
+import Thumbnail from './Thumbnail';
+import Title from './Title';
+
+export default class Card extends React.Component<{ theme?: { colors?: object } }> {
+    static Content: Content;
+
+    static Description: Description;
+
+    static Footer: Footer;
+
+    static Header: Header;
+
+    static HeaderText: HeaderText;
+
+    static Media: Media;
+
+    static Thumbnail: Thumbnail;
+
+    static Title: Title;
+}
diff --git a/types/catho__quantum/components/Checkbox/index.d.ts b/types/catho__quantum/components/Checkbox/index.d.ts
new file mode 100644
index 0000000000..cd844aca22
--- /dev/null
+++ b/types/catho__quantum/components/Checkbox/index.d.ts
@@ -0,0 +1,61 @@
+import React = require('react');
+
+export interface CheckboxProps {
+    checked?: boolean;
+    disabled?: boolean;
+    children?: string;
+    error?: string;
+    id?: string;
+    label?: string;
+    name: string;
+    value?: string;
+    onChange?: () => void;
+    theme?: {
+        colors?: object;
+        spacing?: object;
+        baseFontSize?: number;
+    };
+}
+
+export class Checkbox extends React.Component<CheckboxProps> {}
+export type CheckboxType = React.ComponentType<CheckboxProps>;
+
+export interface CheckboxButtonProps {
+    children?: React.ReactNode[] | React.ReactNode;
+    skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    icon?: string;
+    label?: string;
+    name: string;
+    onChange?: () => void;
+    value?: string;
+}
+
+export type CheckboxButton = React.ComponentType<CheckboxButtonProps>;
+
+export interface CheckboxGroupProps {
+    children?: JSX.Element[] | JSX.Element;
+    error?: string;
+    inline?: boolean;
+    onChange?: () => void;
+    options?: Array<{
+        checked?: boolean;
+        disabled?: boolean;
+        label?: React.ReactNode;
+        name: string;
+        value?: string;
+    }>;
+    type: 'checkbox' | 'button';
+    theme?: {
+        colors?: object;
+        spacing?: object;
+    };
+}
+
+export class CheckboxGroup extends React.Component<CheckboxGroupProps> {
+    static Checkbox: CheckboxType;
+    static Button: CheckboxButton;
+}
diff --git a/types/catho__quantum/components/CircularLoader/index.d.ts b/types/catho__quantum/components/CircularLoader/index.d.ts
new file mode 100644
index 0000000000..6e21b3d8b5
--- /dev/null
+++ b/types/catho__quantum/components/CircularLoader/index.d.ts
@@ -0,0 +1,12 @@
+import React = require('react');
+
+export interface CircularLoaderProps {
+    size?: 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    skin?: 'primary' | 'secondary';
+    theme?: {
+        colors?: object;
+        gutter?: number;
+    };
+}
+
+export default class CircularLoader extends React.Component<CircularLoaderProps> {}
diff --git a/types/catho__quantum/components/Colors/index.d.ts b/types/catho__quantum/components/Colors/index.d.ts
new file mode 100644
index 0000000000..9c09eff096
--- /dev/null
+++ b/types/catho__quantum/components/Colors/index.d.ts
@@ -0,0 +1,18 @@
+export interface ColorsTones {
+    100: string;
+    300: string;
+    500: string;
+    700: string;
+    900: string;
+}
+
+declare const Colors: {
+    primary: ColorsTones;
+    secondary: ColorsTones;
+    success: ColorsTones;
+    warning: ColorsTones;
+    error: ColorsTones;
+    neutral: ColorsTones & { 0: string; 1000: string };
+};
+
+export default Colors;
diff --git a/types/catho__quantum/components/Dropdown/index.d.ts b/types/catho__quantum/components/Dropdown/index.d.ts
new file mode 100644
index 0000000000..3246639452
--- /dev/null
+++ b/types/catho__quantum/components/Dropdown/index.d.ts
@@ -0,0 +1,24 @@
+import React = require('react');
+
+export type ItemPropType = string | { value: string | number; label: string };
+
+export interface DropdownProps {
+    autocomplete?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    selectedItem?: ItemPropType;
+    helperText?: string;
+    onChange?: () => void;
+    items?: ItemPropType[];
+    theme?: {
+        colors?: object;
+        spacing?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class Dropdown extends React.Component<DropdownProps> {}
diff --git a/types/catho__quantum/components/Form/index.d.ts b/types/catho__quantum/components/Form/index.d.ts
new file mode 100644
index 0000000000..927978aca1
--- /dev/null
+++ b/types/catho__quantum/components/Form/index.d.ts
@@ -0,0 +1,26 @@
+import React = require('react');
+
+export interface FormProps {
+    children: React.ReactNode[] | React.ReactNode;
+    onSubmit?: () => void;
+    onValidSubmit?: () => void;
+    noValidate?: boolean;
+}
+
+export class Form extends React.Component<FormProps> {}
+
+export namespace Validations {
+    function Required(params: { value?: string }): string;
+
+    function CPF(params: { value?: string }, cpf?: string): string;
+
+    function CEP(params: { value?: string }): string;
+
+    function Date(params: { value?: string }): string;
+
+    function MinLength(params: { value?: string; minLength?: string | number }): string;
+
+    function MaxLength(params: { value?: string; maxLength?: string | number }): string;
+
+    function Email(params: { value?: string }): string;
+}
diff --git a/types/catho__quantum/components/GlobalStyle/index.d.ts b/types/catho__quantum/components/GlobalStyle/index.d.ts
new file mode 100644
index 0000000000..9d271026cf
--- /dev/null
+++ b/types/catho__quantum/components/GlobalStyle/index.d.ts
@@ -0,0 +1,6 @@
+import React = require('react');
+
+export default class GlobalStyle extends React.Component {}
+
+export const IconFont: React.FC;
+export const Typography: React.FC;
diff --git a/types/catho__quantum/components/Grid/index.d.ts b/types/catho__quantum/components/Grid/index.d.ts
new file mode 100644
index 0000000000..1a786d4850
--- /dev/null
+++ b/types/catho__quantum/components/Grid/index.d.ts
@@ -0,0 +1,58 @@
+import React = require('react');
+import Breakpoints from '../Breakpoints';
+
+export type BreakpointsType = keyof typeof Breakpoints;
+
+export interface ColProps {
+    'no-gutters'?: boolean;
+    xsmall?: number;
+    small?: number;
+    medium?: number;
+    large?: number;
+    xlarge?: number;
+    'xsmall-offset'?: number;
+    'small-offset'?: number;
+    'medium-offset'?: number;
+    'large-offset'?: number;
+    'xlarge-offset'?: number;
+    hide?: BreakpointsType | BreakpointsType[];
+}
+
+export class Col extends React.Component<ColProps> {}
+
+export interface ContainerProps {
+    withBreakpoints?: boolean;
+    fluid?: boolean;
+    hide?: BreakpointsType | string[];
+    theme?: {
+        breakpoints?: object;
+        components?: object;
+    };
+    'no-gutters'?: boolean;
+}
+
+export class Container extends React.Component<ContainerProps> {}
+
+export interface HideProps {
+    xlarge?: boolean;
+    large?: boolean;
+    medium?: boolean;
+    small?: boolean;
+    xsmall?: boolean;
+    theme?: {
+        breakpoints: object;
+    };
+}
+
+export class Hide extends React.Component<HideProps> {}
+
+export interface RowProps {
+    'no-gutters'?: boolean;
+    children: React.ReactNode[] | React.ReactNode;
+    hide?: BreakpointsType | BreakpointsType[];
+    theme?: {
+        breakpoints?: object;
+    };
+}
+
+export class Row extends React.Component<RowProps> {}
diff --git a/types/catho__quantum/components/Hamburguer/index.d.ts b/types/catho__quantum/components/Hamburguer/index.d.ts
new file mode 100644
index 0000000000..f72b8c55aa
--- /dev/null
+++ b/types/catho__quantum/components/Hamburguer/index.d.ts
@@ -0,0 +1,10 @@
+import React = require('react');
+
+export interface HamburguerProps {
+    showNotification?: boolean;
+    isOpened?: boolean;
+    inverted?: boolean;
+    ariaLabelDescription?: string;
+}
+
+export default class Hamburguer extends React.Component<HamburguerProps> {}
diff --git a/types/catho__quantum/components/Icon/index.d.ts b/types/catho__quantum/components/Icon/index.d.ts
new file mode 100644
index 0000000000..b24ea455ef
--- /dev/null
+++ b/types/catho__quantum/components/Icon/index.d.ts
@@ -0,0 +1,939 @@
+import React = require('react');
+
+export type IconNames =
+    | 'access_alarm'
+    | 'access_alarms'
+    | 'accessibility'
+    | 'accessible'
+    | 'access_time'
+    | 'account_balance'
+    | 'account_balance_wallet'
+    | 'account_box'
+    | 'account_circle'
+    | 'ac_unit'
+    | 'adb'
+    | 'add_alarm'
+    | 'add_alert'
+    | 'add_a_photo'
+    | 'add_box'
+    | 'add_circle'
+    | 'add_circle_outline'
+    | 'add'
+    | 'add_location'
+    | 'add_shopping_cart'
+    | 'add_to_photos'
+    | 'add_to_queue'
+    | 'adjust'
+    | 'airline_seat_flat_angled'
+    | 'airline_seat_flat'
+    | 'airline_seat_individual_suite'
+    | 'airline_seat_legroom_extra'
+    | 'airline_seat_legroom_normal'
+    | 'airline_seat_legroom_reduced'
+    | 'airline_seat_recline_extra'
+    | 'airline_seat_recline_normal'
+    | 'airplanemode_active'
+    | 'airplanemode_inactive'
+    | 'airplay'
+    | 'airport_shuttle'
+    | 'alarm_add'
+    | 'alarm'
+    | 'alarm_off'
+    | 'alarm_on'
+    | 'album'
+    | 'all_inclusive'
+    | 'all_out'
+    | 'android'
+    | 'announcement'
+    | 'apps'
+    | 'archive'
+    | 'arrow_back'
+    | 'arrow_downward'
+    | 'arrow_drop_down_circle'
+    | 'arrow_drop_down'
+    | 'arrow_drop_up'
+    | 'arrow_forward'
+    | 'arrow_upward'
+    | 'art_track'
+    | 'aspect_ratio'
+    | 'assessment'
+    | 'assignment_ind'
+    | 'assignment'
+    | 'assignment_late'
+    | 'assignment_returned'
+    | 'assignment_return'
+    | 'assignment_turned_in'
+    | 'assistant'
+    | 'assistant_photo'
+    | 'attach_file'
+    | 'attachment'
+    | 'attach_money'
+    | 'audiotrack'
+    | 'autorenew'
+    | 'av_timer'
+    | 'backspace'
+    | 'backup'
+    | 'battery_alert'
+    | 'battery_charging_full'
+    | 'battery_full'
+    | 'battery_std'
+    | 'battery_unknown'
+    | 'beach_access'
+    | 'beenhere'
+    | 'block'
+    | 'bluetooth_audio'
+    | 'bluetooth_connected'
+    | 'bluetooth_disabled'
+    | 'bluetooth'
+    | 'bluetooth_searching'
+    | 'blur_circular'
+    | 'blur_linear'
+    | 'blur_off'
+    | 'blur_on'
+    | 'book'
+    | 'bookmark_border'
+    | 'bookmark'
+    | 'border_all'
+    | 'border_bottom'
+    | 'border_clear'
+    | 'border_color'
+    | 'border_horizontal'
+    | 'border_inner'
+    | 'border_left'
+    | 'border_outer'
+    | 'border_right'
+    | 'border_style'
+    | 'border_top'
+    | 'border_vertical'
+    | 'branding_watermark'
+    | 'brightness_1'
+    | 'brightness_2'
+    | 'brightness_3'
+    | 'brightness_4'
+    | 'brightness_5'
+    | 'brightness_6'
+    | 'brightness_7'
+    | 'brightness_auto'
+    | 'brightness_high'
+    | 'brightness_low'
+    | 'brightness_medium'
+    | 'broken_image'
+    | 'brush'
+    | 'bubble_chart'
+    | 'bug_report'
+    | 'build'
+    | 'burst_mode'
+    | 'business_center'
+    | 'business'
+    | 'cached'
+    | 'cake'
+    | 'call_end'
+    | 'call'
+    | 'call_made'
+    | 'call_merge'
+    | 'call_missed'
+    | 'call_missed_outgoing'
+    | 'call_received'
+    | 'call_split'
+    | 'call_to_action'
+    | 'camera_alt'
+    | 'camera_enhance'
+    | 'camera_front'
+    | 'camera'
+    | 'camera_rear'
+    | 'camera_roll'
+    | 'cancel'
+    | 'card_giftcard'
+    | 'card_membership'
+    | 'card_travel'
+    | 'casino'
+    | 'cast_connected'
+    | 'cast'
+    | 'center_focus_strong'
+    | 'center_focus_weak'
+    | 'change_history'
+    | 'chat_bubble'
+    | 'chat_bubble_outline'
+    | 'chat'
+    | 'check_box'
+    | 'check_box_outline_blank'
+    | 'check_circle'
+    | 'check'
+    | 'chevron_left'
+    | 'chevron_right'
+    | 'child_care'
+    | 'child_friendly'
+    | 'chrome_reader_mode'
+    | 'class'
+    | 'clear_all'
+    | 'clear'
+    | 'closed_caption'
+    | 'close'
+    | 'cloud_circle'
+    | 'cloud_done'
+    | 'cloud_download'
+    | 'cloud'
+    | 'cloud_off'
+    | 'cloud_queue'
+    | 'cloud_upload'
+    | 'code'
+    | 'collections_bookmark'
+    | 'collections'
+    | 'colorize'
+    | 'color_lens'
+    | 'comment'
+    | 'compare_arrows'
+    | 'compare'
+    | 'computer'
+    | 'confirmation_number'
+    | 'contact_mail'
+    | 'contact_phone'
+    | 'contacts'
+    | 'content_copy'
+    | 'content_cut'
+    | 'content_paste'
+    | 'control_point_duplicate'
+    | 'control_point'
+    | 'copyright'
+    | 'create'
+    | 'create_new_folder'
+    | 'credit_card'
+    | 'crop_16_9'
+    | 'crop_3_2'
+    | 'crop_5_4'
+    | 'crop_7_5'
+    | 'crop_din'
+    | 'crop_free'
+    | 'crop'
+    | 'crop_landscape'
+    | 'crop_original'
+    | 'crop_portrait'
+    | 'crop_rotate'
+    | 'crop_square'
+    | 'dashboard'
+    | 'data_usage'
+    | 'date_range'
+    | 'dehaze'
+    | 'delete_forever'
+    | 'delete'
+    | 'delete_sweep'
+    | 'description'
+    | 'desktop_mac'
+    | 'desktop_windows'
+    | 'details'
+    | 'developer_board'
+    | 'developer_mode'
+    | 'device_hub'
+    | 'devices'
+    | 'devices_other'
+    | 'dialer_sip'
+    | 'dialpad'
+    | 'directions_bike'
+    | 'directions_boat'
+    | 'directions_bus'
+    | 'directions_car'
+    | 'directions'
+    | 'directions_railway'
+    | 'directions_run'
+    | 'directions_subway'
+    | 'directions_transit'
+    | 'directions_walk'
+    | 'disc_full'
+    | 'dns'
+    | 'dock'
+    | 'domain'
+    | 'done_all'
+    | 'done'
+    | 'do_not_disturb_alt'
+    | 'do_not_disturb'
+    | 'do_not_disturb_off'
+    | 'do_not_disturb_on'
+    | 'donut_large'
+    | 'donut_small'
+    | 'drafts'
+    | 'drag_handle'
+    | 'drive_eta'
+    | 'dvr'
+    | 'edit'
+    | 'edit_location'
+    | 'eject'
+    | 'email'
+    | 'enhanced_encryption'
+    | 'equalizer'
+    | 'error'
+    | 'error_outline'
+    | 'euro_symbol'
+    | 'event_available'
+    | 'event_busy'
+    | 'event'
+    | 'event_note'
+    | 'event_seat'
+    | 'ev_station'
+    | 'exit_to_app'
+    | 'expand_less'
+    | 'expand_more'
+    | 'explicit'
+    | 'explore'
+    | 'exposure'
+    | 'exposure_neg_1'
+    | 'exposure_neg_2'
+    | 'exposure_plus_1'
+    | 'exposure_plus_2'
+    | 'exposure_zero'
+    | 'extension'
+    | 'face'
+    | 'fast_forward'
+    | 'fast_rewind'
+    | 'favorite_border'
+    | 'favorite'
+    | 'featured_play_list'
+    | 'featured_video'
+    | 'feedback'
+    | 'fiber_dvr'
+    | 'fiber_manual_record'
+    | 'fiber_new'
+    | 'fiber_pin'
+    | 'fiber_smart_record'
+    | 'file_download'
+    | 'file_upload'
+    | 'filter_1'
+    | 'filter_2'
+    | 'filter_3'
+    | 'filter_4'
+    | 'filter_5'
+    | 'filter_6'
+    | 'filter_7'
+    | 'filter_8'
+    | 'filter_9'
+    | 'filter_9_plus'
+    | 'filter_b_and_w'
+    | 'filter_center_focus'
+    | 'filter_drama'
+    | 'filter_frames'
+    | 'filter_hdr'
+    | 'filter'
+    | 'filter_list'
+    | 'filter_none'
+    | 'filter_tilt_shift'
+    | 'filter_vintage'
+    | 'find_in_page'
+    | 'find_replace'
+    | 'fingerprint'
+    | 'first_page'
+    | 'fitness_center'
+    | 'flag'
+    | 'flare'
+    | 'flash_auto'
+    | 'flash_off'
+    | 'flash_on'
+    | 'flight'
+    | 'flight_land'
+    | 'flight_takeoff'
+    | 'flip'
+    | 'flip_to_back'
+    | 'flip_to_front'
+    | 'folder'
+    | 'folder_open'
+    | 'folder_shared'
+    | 'folder_special'
+    | 'font_download'
+    | 'format_align_center'
+    | 'format_align_justify'
+    | 'format_align_left'
+    | 'format_align_right'
+    | 'format_bold'
+    | 'format_clear'
+    | 'format_color_fill'
+    | 'format_color_reset'
+    | 'format_color_text'
+    | 'format_indent_decrease'
+    | 'format_indent_increase'
+    | 'format_italic'
+    | 'format_line_spacing'
+    | 'format_list_bulleted'
+    | 'format_list_numbered'
+    | 'format_paint'
+    | 'format_quote'
+    | 'format_shapes'
+    | 'format_size'
+    | 'format_strikethrough'
+    | 'format_textdirection_l_to_r'
+    | 'format_textdirection_r_to_l'
+    | 'format_underlined'
+    | 'forum'
+    | 'forward_10'
+    | 'forward_30'
+    | 'forward_5'
+    | 'forward'
+    | 'free_breakfast'
+    | 'fullscreen_exit'
+    | 'fullscreen'
+    | 'functions'
+    | 'gamepad'
+    | 'games'
+    | 'gavel'
+    | 'gesture'
+    | 'get_app'
+    | 'gif'
+    | 'golf_course'
+    | 'gps_fixed'
+    | 'gps_not_fixed'
+    | 'gps_off'
+    | 'grade'
+    | 'gradient'
+    | 'grain'
+    | 'graphic_eq'
+    | 'grid_off'
+    | 'grid_on'
+    | 'group_add'
+    | 'group'
+    | 'group_work'
+    | 'g_translate'
+    | 'hd'
+    | 'hdr_off'
+    | 'hdr_on'
+    | 'hdr_strong'
+    | 'hdr_weak'
+    | 'headset'
+    | 'headset_mic'
+    | 'healing'
+    | 'hearing'
+    | 'help'
+    | 'help_outline'
+    | 'highlight'
+    | 'highlight_off'
+    | 'high_quality'
+    | 'history'
+    | 'home'
+    | 'hotel'
+    | 'hot_tub'
+    | 'hourglass_empty'
+    | 'hourglass_full'
+    | 'http'
+    | 'https'
+    | 'image_aspect_ratio'
+    | 'image'
+    | 'important_devices'
+    | 'import_contacts'
+    | 'import_export'
+    | 'inbox'
+    | 'indeterminate_check_box'
+    | 'info'
+    | 'info_outline'
+    | 'input'
+    | 'insert_chart'
+    | 'insert_comment'
+    | 'insert_drive_file'
+    | 'insert_emoticon'
+    | 'insert_invitation'
+    | 'insert_link'
+    | 'insert_photo'
+    | 'invert_colors'
+    | 'invert_colors_off'
+    | 'iso'
+    | 'keyboard_arrow_down'
+    | 'keyboard_arrow_left'
+    | 'keyboard_arrow_right'
+    | 'keyboard_arrow_up'
+    | 'keyboard_backspace'
+    | 'keyboard_capslock'
+    | 'keyboard_hide'
+    | 'keyboard'
+    | 'keyboard_return'
+    | 'keyboard_tab'
+    | 'keyboard_voice'
+    | 'kitchen'
+    | 'label'
+    | 'label_outline'
+    | 'landscape'
+    | 'language'
+    | 'laptop_chromebook'
+    | 'laptop'
+    | 'laptop_mac'
+    | 'laptop_windows'
+    | 'last_page'
+    | 'launch'
+    | 'layers_clear'
+    | 'layers'
+    | 'leak_add'
+    | 'leak_remove'
+    | 'lens'
+    | 'library_add'
+    | 'library_books'
+    | 'library_music'
+    | 'lightbulb_outline'
+    | 'linear_scale'
+    | 'line_style'
+    | 'line_weight'
+    | 'linked_camera'
+    | 'link'
+    | 'list'
+    | 'live_help'
+    | 'live_tv'
+    | 'local_activity'
+    | 'local_airport'
+    | 'local_atm'
+    | 'local_bar'
+    | 'local_cafe'
+    | 'local_car_wash'
+    | 'local_convenience_store'
+    | 'local_dining'
+    | 'local_drink'
+    | 'local_florist'
+    | 'local_gas_station'
+    | 'local_grocery_store'
+    | 'local_hospital'
+    | 'local_hotel'
+    | 'local_laundry_service'
+    | 'local_library'
+    | 'local_mall'
+    | 'local_movies'
+    | 'local_offer'
+    | 'local_parking'
+    | 'local_pharmacy'
+    | 'local_phone'
+    | 'local_pizza'
+    | 'local_play'
+    | 'local_post_office'
+    | 'local_printshop'
+    | 'local_see'
+    | 'local_shipping'
+    | 'local_taxi'
+    | 'location_city'
+    | 'location_disabled'
+    | 'location_off'
+    | 'location_on'
+    | 'location_searching'
+    | 'lock'
+    | 'lock_open'
+    | 'lock_outline'
+    | 'looks_3'
+    | 'looks_4'
+    | 'looks_5'
+    | 'looks_6'
+    | 'looks'
+    | 'looks_one'
+    | 'looks_two'
+    | 'loop'
+    | 'loupe'
+    | 'low_priority'
+    | 'loyalty'
+    | 'mail'
+    | 'mail_outline'
+    | 'map'
+    | 'markunread'
+    | 'markunread_mailbox'
+    | 'memory'
+    | 'menu'
+    | 'merge_type'
+    | 'message'
+    | 'mic'
+    | 'mic_none'
+    | 'mic_off'
+    | 'mms'
+    | 'mode_comment'
+    | 'mode_edit'
+    | 'monetization_on'
+    | 'money_off'
+    | 'monochrome_photos'
+    | 'mood_bad'
+    | 'mood'
+    | 'more_horiz'
+    | 'more'
+    | 'more_vert'
+    | 'motorcycle'
+    | 'mouse'
+    | 'move_to_inbox'
+    | 'movie_creation'
+    | 'movie_filter'
+    | 'movie'
+    | 'multiline_chart'
+    | 'music_note'
+    | 'music_video'
+    | 'my_location'
+    | 'nature'
+    | 'nature_people'
+    | 'navigate_before'
+    | 'navigate_next'
+    | 'navigation'
+    | 'near_me'
+    | 'network_cell'
+    | 'network_check'
+    | 'network_locked'
+    | 'network_wifi'
+    | 'new_releases'
+    | 'next_week'
+    | 'nfc'
+    | 'no_encryption'
+    | 'no_sim'
+    | 'note_add'
+    | 'note'
+    | 'notifications_active'
+    | 'notifications'
+    | 'notifications_none'
+    | 'notifications_off'
+    | 'notifications_paused'
+    | 'not_interested'
+    | 'offline_pin'
+    | 'ondemand_video'
+    | 'opacity'
+    | 'open_in_browser'
+    | 'open_in_new'
+    | 'open_with'
+    | 'pages'
+    | 'pageview'
+    | 'palette'
+    | 'panorama_fish_eye'
+    | 'panorama_horizontal'
+    | 'panorama'
+    | 'panorama_vertical'
+    | 'panorama_wide_angle'
+    | 'pan_tool'
+    | 'party_mode'
+    | 'pause_circle_filled'
+    | 'pause_circle_outline'
+    | 'pause'
+    | 'payment'
+    | 'people'
+    | 'people_outline'
+    | 'perm_camera_mic'
+    | 'perm_contact_calendar'
+    | 'perm_data_setting'
+    | 'perm_device_information'
+    | 'perm_identity'
+    | 'perm_media'
+    | 'perm_phone_msg'
+    | 'perm_scan_wifi'
+    | 'person_add'
+    | 'personal_video'
+    | 'person'
+    | 'person_outline'
+    | 'person_pin_circle'
+    | 'person_pin'
+    | 'pets'
+    | 'phone_android'
+    | 'phone_bluetooth_speaker'
+    | 'phone_forwarded'
+    | 'phone_in_talk'
+    | 'phone_iphone'
+    | 'phone'
+    | 'phonelink_erase'
+    | 'phonelink'
+    | 'phonelink_lock'
+    | 'phonelink_off'
+    | 'phonelink_ring'
+    | 'phonelink_setup'
+    | 'phone_locked'
+    | 'phone_missed'
+    | 'phone_paused'
+    | 'photo_album'
+    | 'photo_camera'
+    | 'photo_filter'
+    | 'photo'
+    | 'photo_library'
+    | 'photo_size_select_actual'
+    | 'photo_size_select_large'
+    | 'photo_size_select_small'
+    | 'picture_as_pdf'
+    | 'picture_in_picture_alt'
+    | 'picture_in_picture'
+    | 'pie_chart'
+    | 'pie_chart_outlined'
+    | 'pin_drop'
+    | 'place'
+    | 'play_arrow'
+    | 'play_circle_filled'
+    | 'play_circle_outline'
+    | 'play_for_work'
+    | 'playlist_add_check'
+    | 'playlist_add'
+    | 'playlist_play'
+    | 'plus_one'
+    | 'poll'
+    | 'polymer'
+    | 'pool'
+    | 'portable_wifi_off'
+    | 'portrait'
+    | 'power_input'
+    | 'power'
+    | 'power_settings_new'
+    | 'pregnant_woman'
+    | 'present_to_all'
+    | 'print'
+    | 'priority_high'
+    | 'public'
+    | 'publish'
+    | 'query_builder'
+    | 'question_answer'
+    | 'queue'
+    | 'queue_music'
+    | 'queue_play_next'
+    | 'radio_button_checked'
+    | 'radio_button_unchecked'
+    | 'radio'
+    | 'rate_review'
+    | 'receipt'
+    | 'recent_actors'
+    | 'record_voice_over'
+    | 'redeem'
+    | 'redo'
+    | 'refresh'
+    | 'remove_circle'
+    | 'remove_circle_outline'
+    | 'remove_from_queue'
+    | 'remove'
+    | 'remove_red_eye'
+    | 'remove_shopping_cart'
+    | 'reorder'
+    | 'repeat'
+    | 'repeat_one'
+    | 'replay_10'
+    | 'replay_30'
+    | 'replay_5'
+    | 'replay'
+    | 'reply_all'
+    | 'reply'
+    | 'report'
+    | 'report_problem'
+    | 'restaurant'
+    | 'restaurant_menu'
+    | 'restore'
+    | 'restore_page'
+    | 'ring_volume'
+    | 'room'
+    | 'room_service'
+    | 'rotate_90_degrees_ccw'
+    | 'rotate_left'
+    | 'rotate_right'
+    | 'rounded_corner'
+    | 'router'
+    | 'rowing'
+    | 'rss_feed'
+    | 'rv_hookup'
+    | 'satellite'
+    | 'save'
+    | 'scanner'
+    | 'schedule'
+    | 'school'
+    | 'screen_lock_landscape'
+    | 'screen_lock_portrait'
+    | 'screen_lock_rotation'
+    | 'screen_rotation'
+    | 'screen_share'
+    | 'sd_card'
+    | 'sd_storage'
+    | 'search'
+    | 'security'
+    | 'select_all'
+    | 'send'
+    | 'sentiment_dissatisfied'
+    | 'sentiment_neutral'
+    | 'sentiment_satisfied'
+    | 'sentiment_very_dissatisfied'
+    | 'sentiment_very_satisfied'
+    | 'settings_applications'
+    | 'settings_backup_restore'
+    | 'settings_bluetooth'
+    | 'settings_brightness'
+    | 'settings_cell'
+    | 'settings_ethernet'
+    | 'settings_input_antenna'
+    | 'settings_input_component'
+    | 'settings_input_composite'
+    | 'settings_input_hdmi'
+    | 'settings_input_svideo'
+    | 'settings'
+    | 'settings_overscan'
+    | 'settings_phone'
+    | 'settings_power'
+    | 'settings_remote'
+    | 'settings_system_daydream'
+    | 'settings_voice'
+    | 'share'
+    | 'shop'
+    | 'shopping_basket'
+    | 'shopping_cart'
+    | 'shop_two'
+    | 'short_text'
+    | 'show_chart'
+    | 'shuffle'
+    | 'signal_cellular_no_sim'
+    | 'signal_cellular_null'
+    | 'signal_cellular_off'
+    | 'signal_wifi_off'
+    | 'sim_card_alert'
+    | 'sim_card'
+    | 'skip_next'
+    | 'skip_previous'
+    | 'slideshow'
+    | 'slow_motion_video'
+    | 'smartphone'
+    | 'smoke_free'
+    | 'smoking_rooms'
+    | 'sms_failed'
+    | 'sms'
+    | 'snooze'
+    | 'sort_by_alpha'
+    | 'sort'
+    | 'space_bar'
+    | 'spa'
+    | 'speaker_group'
+    | 'speaker'
+    | 'speaker_notes'
+    | 'speaker_notes_off'
+    | 'speaker_phone'
+    | 'spellcheck'
+    | 'star_border'
+    | 'star_half'
+    | 'star'
+    | 'stars'
+    | 'stay_current_landscape'
+    | 'stay_current_portrait'
+    | 'stay_primary_landscape'
+    | 'stay_primary_portrait'
+    | 'stop'
+    | 'stop_screen_share'
+    | 'storage'
+    | 'store'
+    | 'store_mall_directory'
+    | 'straighten'
+    | 'streetview'
+    | 'strikethrough_s'
+    | 'style'
+    | 'subdirectory_arrow_left'
+    | 'subdirectory_arrow_right'
+    | 'subject'
+    | 'subscriptions'
+    | 'subtitles'
+    | 'subway'
+    | 'supervisor_account'
+    | 'surround_sound'
+    | 'swap_calls'
+    | 'swap_horiz'
+    | 'swap_vertical_circle'
+    | 'swap_vert'
+    | 'switch_camera'
+    | 'switch_video'
+    | 'sync_disabled'
+    | 'sync'
+    | 'sync_problem'
+    | 'system_update_alt'
+    | 'system_update'
+    | 'tab'
+    | 'tablet_android'
+    | 'tablet'
+    | 'tablet_mac'
+    | 'tab_unselected'
+    | 'tag_faces'
+    | 'tap_and_play'
+    | 'terrain'
+    | 'text_fields'
+    | 'text_format'
+    | 'textsms'
+    | 'texture'
+    | 'theaters'
+    | '3d_rotation'
+    | 'thumb_down'
+    | 'thumbs_up_down'
+    | 'thumb_up'
+    | 'timelapse'
+    | 'timeline'
+    | 'timer_10'
+    | 'timer_3'
+    | 'timer'
+    | 'timer_off'
+    | 'time_to_leave'
+    | 'title'
+    | 'toc'
+    | 'today'
+    | 'toll'
+    | 'tonality'
+    | 'touch_app'
+    | 'toys'
+    | 'track_changes'
+    | 'traffic'
+    | 'train'
+    | 'tram'
+    | 'transfer_within_a_station'
+    | 'transform'
+    | 'translate'
+    | 'trending_down'
+    | 'trending_flat'
+    | 'trending_up'
+    | 'tune'
+    | 'turned_in'
+    | 'turned_in_not'
+    | 'tv'
+    | 'unarchive'
+    | 'undo'
+    | 'unfold_less'
+    | 'unfold_more'
+    | 'update'
+    | 'usb'
+    | 'verified_user'
+    | 'vertical_align_bottom'
+    | 'vertical_align_center'
+    | 'vertical_align_top'
+    | 'vibration'
+    | 'video_call'
+    | 'videocam'
+    | 'videocam_off'
+    | 'videogame_asset'
+    | 'video_label'
+    | 'video_library'
+    | 'view_agenda'
+    | 'view_array'
+    | 'view_carousel'
+    | 'view_column'
+    | 'view_comfy'
+    | 'view_compact'
+    | 'view_day'
+    | 'view_headline'
+    | 'view_list'
+    | 'view_module'
+    | 'view_quilt'
+    | 'view_stream'
+    | 'view_week'
+    | 'vignette'
+    | 'visibility'
+    | 'visibility_off'
+    | 'voice_chat'
+    | 'voicemail'
+    | 'volume_down'
+    | 'volume_mute'
+    | 'volume_off'
+    | 'volume_up'
+    | 'vpn_key'
+    | 'vpn_lock'
+    | 'wallpaper'
+    | 'warning'
+    | 'watch'
+    | 'watch_later'
+    | 'wb_auto'
+    | 'wb_cloudy'
+    | 'wb_incandescent'
+    | 'wb_iridescent'
+    | 'wb_sunny'
+    | 'wc'
+    | 'web_asset'
+    | 'web'
+    | 'weekend'
+    | 'whatshot'
+    | 'widgets'
+    | 'wifi'
+    | 'wifi_lock'
+    | 'wifi_tethering'
+    | 'work'
+    | 'wrap_text'
+    | 'youtube_searched_for'
+    | 'zoom_in'
+    | 'zoom_out'
+    | 'zoom_out_map';
+
+export interface IconProps {
+    name: IconNames;
+    style?: React.CSSProperties;
+    skin?: string;
+}
+
+export default class Icon extends React.Component<IconProps> {}
diff --git a/types/catho__quantum/components/Input/index.d.ts b/types/catho__quantum/components/Input/index.d.ts
new file mode 100644
index 0000000000..60f47f6adc
--- /dev/null
+++ b/types/catho__quantum/components/Input/index.d.ts
@@ -0,0 +1,26 @@
+import React = require('react');
+
+export type MaskFunction = (rawValue: string) => string[];
+export type Mask = boolean | RegExp | string | MaskFunction;
+
+export interface InputProps {
+    value?: string;
+    label?: string;
+    helperText?: string;
+    descriptionLabel?: string;
+    required?: boolean;
+    placeholder?: string;
+    type?: 'email' | 'text' | 'tel' | 'number' | 'password' | 'search';
+    error?: string;
+    id?: string;
+    mask?: Mask | Mask[];
+    onClean?: () => void;
+    onChange?: () => void;
+    theme?: {
+        spacing?: object;
+        colors?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class Input extends React.Component<InputProps> {}
diff --git a/types/catho__quantum/components/Modal/index.d.ts b/types/catho__quantum/components/Modal/index.d.ts
new file mode 100644
index 0000000000..ba6e158238
--- /dev/null
+++ b/types/catho__quantum/components/Modal/index.d.ts
@@ -0,0 +1,17 @@
+import React = require('react');
+
+export interface ModalProps {
+    children?: React.ReactNode[] | React.ReactNode;
+    onClose?: () => void;
+    closeButtonAriaLabel?: string;
+    theme?: {
+        breakpoints?: object;
+        colors?: object;
+        spacing?: object;
+        components?: {
+            button?: object;
+        };
+    };
+}
+
+export default class Modal extends React.Component<ModalProps> {}
diff --git a/types/catho__quantum/components/Pagination/index.d.ts b/types/catho__quantum/components/Pagination/index.d.ts
new file mode 100644
index 0000000000..e9259af6a7
--- /dev/null
+++ b/types/catho__quantum/components/Pagination/index.d.ts
@@ -0,0 +1,18 @@
+import React = require('react');
+
+export interface PaginationProps {
+    tabIndex?: number;
+    ariaLabel?: string;
+    activePage?: number;
+    activePageAriaLabel?: string;
+    totalPages: number;
+    nextButtonText?: string;
+    pageAriaLabel?: string;
+    pageHref?: () => void;
+    prevButtonText?: string;
+    onPageClick?: () => void;
+    infoFormatter?: () => void;
+    followOnlyFirstPage?: boolean;
+}
+
+export default class Pagination extends React.Component<PaginationProps> {}
diff --git a/types/catho__quantum/components/Popover/index.d.ts b/types/catho__quantum/components/Popover/index.d.ts
new file mode 100644
index 0000000000..f39e8ace98
--- /dev/null
+++ b/types/catho__quantum/components/Popover/index.d.ts
@@ -0,0 +1,13 @@
+import React = require('react');
+
+export interface PopoverProps {
+    inverted?: boolean;
+    visible?: boolean;
+    children: React.ReactNode[] | React.ReactNode;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
+    trigger: React.ReactNode;
+    onClose?: () => void;
+}
+
+export default class Popover extends React.Component<PopoverProps> {}
diff --git a/types/catho__quantum/components/ProgressBar/index.d.ts b/types/catho__quantum/components/ProgressBar/index.d.ts
new file mode 100644
index 0000000000..e47c2d6b78
--- /dev/null
+++ b/types/catho__quantum/components/ProgressBar/index.d.ts
@@ -0,0 +1,17 @@
+import React = require('react');
+
+export interface ProgressBarProps {
+    skin?: 'neutral' | 'primary' | 'secondary';
+    theme?: {
+        components?: {
+            progressBar?: object;
+        };
+    };
+    width?: string;
+    height?: string;
+    progressText?: number;
+    progressPercent?: number;
+    label?: string;
+}
+
+export default class ProgressBar extends React.Component<ProgressBarProps> {}
diff --git a/types/catho__quantum/components/RadioGroup/index.d.ts b/types/catho__quantum/components/RadioGroup/index.d.ts
new file mode 100644
index 0000000000..e0e3770df7
--- /dev/null
+++ b/types/catho__quantum/components/RadioGroup/index.d.ts
@@ -0,0 +1,66 @@
+import React = require('react');
+
+export interface RadioProps {
+    disabled?: boolean;
+    error?: boolean;
+    children?: string;
+    label?: string;
+    onChange?: () => void;
+    theme?: {
+        colors?: object;
+        spacing?: object;
+    };
+    value: string;
+}
+
+export type Radio = React.ComponentType<RadioProps>;
+
+export interface RadioButtonProps {
+    checked?: boolean;
+    children?: string;
+    skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
+    disabled?: boolean;
+    error?: boolean;
+    icon?: string;
+    id?: string;
+    inline?: boolean;
+    label?: string;
+    onChange?: () => void;
+    theme?: {
+        baseFontSize?: number;
+        spacing?: object;
+        colors?: object;
+        components?: {
+            button?: object;
+        };
+    };
+    value: string;
+}
+
+export type RadioButton = React.ComponentType<RadioButtonProps>;
+
+export interface RadioGroupProps {
+    type?: 'radio' | 'button';
+    options?: Array<{
+        label?: React.ReactNode;
+        value: string;
+        disabled?: boolean;
+    }>;
+
+    children?: JSX.Element[] | JSX.Element;
+    inline?: boolean;
+    onChange?: () => void;
+    value?: string;
+    error?: string;
+    theme?: {
+        colors?: object;
+        spacing?: object;
+    };
+    name: string;
+}
+
+export default class RadioGroup extends React.Component<RadioGroupProps> {
+    static Radio: Radio;
+
+    static Button: RadioButton;
+}
diff --git a/types/catho__quantum/components/RangeSlider/index.d.ts b/types/catho__quantum/components/RangeSlider/index.d.ts
new file mode 100644
index 0000000000..9f00135194
--- /dev/null
+++ b/types/catho__quantum/components/RangeSlider/index.d.ts
@@ -0,0 +1,27 @@
+import React = require('react');
+
+export interface RangeSliderProps {
+    step?: number;
+    max?: number;
+    min?: number;
+    disabled?: boolean;
+    onChange?: () => void;
+    onChangeCommitted?: () => void;
+    marks?: Array<{
+        value?: string | number;
+        label?: string;
+    }>;
+    valueLabelDisplay?: 'auto' | 'on' | 'off';
+    track?: 'normal' | false | 'inverted';
+    'aria-labelledby'?: string;
+    tipFormatter?: () => void;
+    value?: number | { from: number; to: number };
+    defaultValue?: number | { from: number; to: number };
+    theme?: {
+        spacing?: object;
+        colors?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class RangeSlider extends React.Component<RangeSliderProps> {}
diff --git a/types/catho__quantum/components/Skeleton/index.d.ts b/types/catho__quantum/components/Skeleton/index.d.ts
new file mode 100644
index 0000000000..bf81e02736
--- /dev/null
+++ b/types/catho__quantum/components/Skeleton/index.d.ts
@@ -0,0 +1,45 @@
+import React = require('react');
+
+export interface SkeletonButtonProps {
+    size: 'xsmall' | 'small' | 'medium' | 'large';
+    theme: {
+        spacing?: object;
+    };
+}
+
+export type SkeletonButton = React.ComponentType<SkeletonButtonProps>;
+
+export type SkeletonCircle = React.ComponentType;
+
+export type SkeletonText = React.ComponentType;
+
+export interface SkeletonTagProps {
+    size: 'xsmall' | 'small' | 'medium' | 'large';
+    theme: {
+        spacing?: object;
+        baseFontSize?: number;
+    };
+}
+
+export type SkeletonTag = React.ComponentType<SkeletonTagProps>;
+
+export interface SkeletonProps {
+    type?: 'rect' | 'circle' | 'text' | 'button' | 'tag';
+    width?: string;
+    height?: string;
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    theme?: {
+        spacing?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class Skeleton extends React.Component<SkeletonProps> {
+    static Button: SkeletonButton;
+
+    static Circle: SkeletonCircle;
+
+    static Text: SkeletonText;
+
+    static Tag: SkeletonTag;
+}
diff --git a/types/catho__quantum/components/SnackBar/index.d.ts b/types/catho__quantum/components/SnackBar/index.d.ts
new file mode 100644
index 0000000000..1a9b496efa
--- /dev/null
+++ b/types/catho__quantum/components/SnackBar/index.d.ts
@@ -0,0 +1,27 @@
+import React = require('react');
+
+export interface SnackBarProps {
+    actionTrigger?: {
+        title?: string;
+        callback?: () => void;
+    };
+    theme?: {
+        baseFontSize?: number;
+        colors?: object;
+        breakpoints?: object;
+        spacing?: object;
+        components?: {
+            snackbar?: object;
+            button?: object;
+        };
+    };
+    closeButtonAriaLabel?: string;
+    onClose?: () => void;
+    secondsToClose?: number;
+    skin?: 'primary' | 'success' | 'error' | 'neutral' | 'warning';
+    text?: string;
+    inverted?: boolean;
+    id?: string;
+}
+
+export default class SnackBar extends React.Component<SnackBarProps> {}
diff --git a/types/catho__quantum/components/Socials/index.d.ts b/types/catho__quantum/components/Socials/index.d.ts
new file mode 100644
index 0000000000..d41c803039
--- /dev/null
+++ b/types/catho__quantum/components/Socials/index.d.ts
@@ -0,0 +1,18 @@
+import React = require('react');
+
+export type NonEmptyArray<T> = [T, ...T[]];
+
+export interface SocialsProps {
+    size?: string;
+    theme?: {
+        spacing?: object;
+    };
+    items: NonEmptyArray<{
+        name?: 'facebook' | 'twitter' | 'youtube';
+        url?: string;
+        title?: string;
+    }>;
+    withBox?: boolean;
+}
+
+export default class Socials extends React.Component<SocialsProps> {}
diff --git a/types/catho__quantum/components/TabbedView/index.d.ts b/types/catho__quantum/components/TabbedView/index.d.ts
new file mode 100644
index 0000000000..47048138f4
--- /dev/null
+++ b/types/catho__quantum/components/TabbedView/index.d.ts
@@ -0,0 +1,27 @@
+import React = require('react');
+
+export interface TabbedViewProps {
+    fluid?: boolean;
+    children: React.ReactNode[] | React.ReactNode;
+    activeTab?: string;
+    skin?: 'neutral' | 'primary';
+    theme?: {
+        components?: {
+            tabbedView?: object;
+        };
+        baseFontSize?: number;
+        breakpoints?: object;
+        spacing?: object;
+    };
+}
+
+export class TabbedView extends React.Component<TabbedViewProps> {}
+
+export interface TabProps {
+    title: string;
+    badge?: React.ReactNode;
+    icon?: React.ReactNode;
+    children: React.ReactNode[] | React.ReactNode;
+}
+
+export class Tab extends React.Component<TabProps> {}
diff --git a/types/catho__quantum/components/Tag/index.d.ts b/types/catho__quantum/components/Tag/index.d.ts
new file mode 100644
index 0000000000..d687be4833
--- /dev/null
+++ b/types/catho__quantum/components/Tag/index.d.ts
@@ -0,0 +1,20 @@
+import React = require('react');
+
+export interface TagProps {
+    bold?: boolean;
+    inverted?: boolean;
+    onClose?: () => void;
+    size?: 'small' | 'medium' | 'large';
+    skin?: 'neutral' | 'primary' | 'success' | 'warning' | 'error';
+    stroked?: boolean;
+    text?: string;
+    theme?: {
+        colors?: object;
+        components?: {
+            tag?: object;
+        };
+        spacing?: object;
+    };
+}
+
+export default class Tag extends React.Component<TagProps> {}
diff --git a/types/catho__quantum/components/TextArea/index.d.ts b/types/catho__quantum/components/TextArea/index.d.ts
new file mode 100644
index 0000000000..1c293177be
--- /dev/null
+++ b/types/catho__quantum/components/TextArea/index.d.ts
@@ -0,0 +1,15 @@
+import React = require('react');
+
+export interface TextAreaProps {
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    label?: string;
+    onChange?: () => void;
+    placeholder?: string;
+    required?: boolean;
+    value?: string;
+    id?: string | number;
+}
+
+export default class TextArea extends React.Component<TextAreaProps> {}
diff --git a/types/catho__quantum/components/Toggle/index.d.ts b/types/catho__quantum/components/Toggle/index.d.ts
new file mode 100644
index 0000000000..7e6be7b22a
--- /dev/null
+++ b/types/catho__quantum/components/Toggle/index.d.ts
@@ -0,0 +1,12 @@
+import React = require('react');
+
+export interface ToggleProps {
+    checked?: boolean;
+    theme?: {
+        colors?: object;
+        spacing?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class Toggle extends React.Component<ToggleProps> {}
diff --git a/types/catho__quantum/components/Tooltip/index.d.ts b/types/catho__quantum/components/Tooltip/index.d.ts
new file mode 100644
index 0000000000..ae529fed49
--- /dev/null
+++ b/types/catho__quantum/components/Tooltip/index.d.ts
@@ -0,0 +1,15 @@
+import React = require('react');
+
+export interface TooltipProps {
+    text: string;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    visible?: boolean;
+    children: React.ReactNode[] | React.ReactNode;
+    theme?: {
+        spacing?: object;
+        colors?: object;
+        baseFontSize?: number;
+    };
+}
+
+export default class Tooltip extends React.Component<TooltipProps> {}
diff --git a/types/catho__quantum/index.d.ts b/types/catho__quantum/index.d.ts
new file mode 100644
index 0000000000..ffa9d50055
--- /dev/null
+++ b/types/catho__quantum/index.d.ts
@@ -0,0 +1,78 @@
+// Type definitions for @catho/quantum 3.8
+// Project: https://github.com/catho/quantum#readme
+// Definitions by: mutterpedro <https://github.com/mutterpedro>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.1
+import * as React from 'react';
+
+import Accordion from './components/Accordion';
+import Alert from './components/Alert';
+import Badge from './components/Badge';
+import Button from './components/Button';
+import BREAKPOINTS from './components/Breakpoints';
+import Card from './components/Card';
+import { Checkbox, CheckboxGroup } from './components/Checkbox';
+import CircularLoader from './components/CircularLoader';
+import Colors from './components/Colors';
+import Dropdown from './components/Dropdown';
+import { Form, Validations } from './components/Form';
+import GlobalStyle, { IconFont, Typography } from './components/GlobalStyle';
+import { Col, Container, Hide, Row } from './components/Grid';
+import Hamburguer from './components/Hamburguer';
+import Icon from './components/Icon';
+import Input from './components/Input';
+import Modal from './components/Modal';
+import Pagination from './components/Pagination';
+import Popover from './components/Popover';
+import ProgressBar from './components/ProgressBar';
+import RadioGroup from './components/RadioGroup';
+import RangeSlider from './components/RangeSlider';
+import Skeleton from './components/Skeleton';
+import SnackBar from './components/SnackBar';
+import Socials from './components/Socials';
+import { Tab, TabbedView } from './components/TabbedView';
+import Tag from './components/Tag';
+import TextArea from './components/TextArea';
+import Toggle from './components/Toggle';
+import Tooltip from './components/Tooltip';
+
+export {
+    Accordion,
+    Alert,
+    Badge,
+    Button,
+    BREAKPOINTS,
+    Card,
+    Checkbox,
+    CheckboxGroup,
+    CircularLoader,
+    Col,
+    Colors,
+    Container,
+    Dropdown,
+    Form,
+    GlobalStyle,
+    Hamburguer,
+    Hide,
+    Icon,
+    Input,
+    IconFont,
+    Modal,
+    Pagination,
+    Popover,
+    ProgressBar,
+    RadioGroup,
+    RangeSlider,
+    Row,
+    Skeleton,
+    SnackBar,
+    Socials,
+    Tab,
+    TabbedView,
+    Tag,
+    TextArea,
+    Toggle,
+    Tooltip,
+    Typography,
+    Validations,
+};
diff --git a/types/catho__quantum/tsconfig.json b/types/catho__quantum/tsconfig.json
new file mode 100644
index 0000000000..1ad5cadb3a
--- /dev/null
+++ b/types/catho__quantum/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2015",
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "catho__quantum-tests.tsx"
+    ]
+}
diff --git a/types/catho__quantum/tslint.json b/types/catho__quantum/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/catho__quantum/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }