Initial Commit

2025-04-22 10:52:16 +00:00 · 2021-02-23 12:46:46 +01:00 · 2021-02-23 12:46:46 +01:00 · 4eb95368dd
commit 4eb95368dd
118 changed files with 15462 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+module/
+storybook-static/
+index.js
+style.css
+yarn-error.log
+node_modules
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,11 @@
+.storybook/
+src/
+storybook-static/
+.gitignore
+.npmignore
+rollup.config.js
+tsconfig.json
+yarn.lock
+yarn-error.log
+tsconfig.json
+yarn-error.log
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -0,0 +1,21 @@
+const path = require("path");
+
+module.exports = {
+	"stories": [
+		"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials"
+	],
+	typescript: {
+		check: false,
+		checkOptions: {},
+		reactDocgen: 'react-docgen-typescript',
+		reactDocgenTypescriptOptions: {
+		shouldExtractLiteralValuesFromEnum: true,
+		propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+		},
+	},
+	presets: [path.resolve(__dirname, "./next.js")]
+}
--- a/.storybook/next.js
+++ b/.storybook/next.js
@ -0,0 +1,36 @@
+module.exports = {
+	webpackFinal: async (baseConfig, options) => {
+		const { module = {} } = baseConfig;
+
+		const newConfig = {
+			...baseConfig,
+			module: {
+				...module,
+				rules: [...(module.rules || [])],
+			},
+		};
+
+		// TypeScript
+		newConfig.module.rules.push({
+			test: /\.(ts|tsx)$/,
+			// include: [path.resolve(__dirname, '../src/client/components')],
+			use: ['babel-loader', 'ts-loader']
+		});
+		newConfig.resolve.extensions.push('.ts', '.tsx');
+
+		// SCSS
+		newConfig.module.rules.push({
+		test: /\.styl$/,
+		use: ['style-loader', {
+			loader: 'css-loader',
+			options: {
+				importLoaders: 1,
+				modules: true
+			},
+		}, 'stylus-loader'],
+	});
+		newConfig.resolve.extensions.push('.styl');
+
+		return newConfig;
+	},
+};
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,50 @@
+{
+	"name": "@dzeio/components",
+	"version": "0.1.0",
+	"license": "MIT",
+	"main": "./index.js",
+	"module": "./module/index.js",
+	"types": "./types/index.d.ts",
+	"dependencies": {},
+	"devDependencies": {
+		"@babel/core": "^7.12.16",
+		"@babel/preset-env": "^7.12.16",
+		"@babel/preset-react": "^7.12.13",
+		"@rollup/plugin-typescript": "^8.2.0",
+		"@storybook/addon-actions": "^6.1.14",
+		"@storybook/addon-essentials": "^6.1.14",
+		"@storybook/addon-knobs": "^6.1.14",
+		"@storybook/addon-links": "^6.1.14",
+		"@storybook/cli": "^6.1.14",
+		"@storybook/react": "^6.1.14",
+		"@types/node": "^14.14.28",
+		"@types/react": "^17.0.2",
+		"@types/react-dom": "^17.0.1",
+		"babel-loader": "^8.2.2",
+		"css-loader": "^5.0.2",
+		"next": "^10.0.5",
+		"react": "^17.0.1",
+		"react-dom": "^17.0.1",
+		"react-feather": "^2.0.9",
+		"rollup": "^2.39.0",
+		"rollup-plugin-styles": "^3.14.1",
+		"style-loader": "^2.0.0",
+		"stylus": "^0.54.8",
+		"stylus-loader": "^4.3.3",
+		"ts-loader": "^8.0.17",
+		"typescript": "^4.1.3",
+		"webpack": "^4.44.2"
+	},
+	"peerDependencies": {
+		"next": "^10.0.5",
+		"react": "^17.0.1",
+		"react-dom": "^17.0.1",
+		"react-feather": "^2.0.9"
+	},
+	"scripts": {
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook",
+		"build": "tsc || rollup --config",
+		"prepublishOnly": "yarn build"
+	}
+}
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,32 @@
+import typescript from '@rollup/plugin-typescript';
+import styles from 'rollup-plugin-styles'
+import pkg from './package.json';
+
+export default [
+	{
+		input: 'src/index.ts',
+		external: ['ms'],
+		plugins: [
+			styles({
+				modules: true,
+				url: false,
+				autoModules: true,
+				mode: 'extract',
+
+			}),
+			typescript(), // so Rollup can convert TypeScript to JavaScript
+		],
+		output: [
+			{
+				dir: './',
+				format: 'cjs',
+				assetFileNames: 'style.css'
+			},
+			{
+				file: pkg.module,
+				format: 'es',
+				assetFileNames: 'style.css'
+			}
+		]
+	}
+];
--- a/src/dzeio/Box/BoxBody/BoxBody.module.styl
+++ b/src/dzeio/Box/BoxBody/BoxBody.module.styl
@ -0,0 +1,2 @@
+.body
+	padding 0 16px 16px
--- a/src/dzeio/Box/BoxBody/index.tsx
+++ b/src/dzeio/Box/BoxBody/index.tsx
@ -0,0 +1,18 @@
+import React from 'react'
+import css from './BoxBody.module.styl'
+import { buildClassName } from '../../Util'
+
+
+interface Props {
+	noPadding?: boolean
+}
+
+export default class BoxBody extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName([css.body, !this.props.noPadding])}>
+			{this.props.children}
+		</div>
+	)
+
+}
--- a/src/dzeio/Box/BoxHeader/BoxHeader.module.styl
+++ b/src/dzeio/Box/BoxHeader/BoxHeader.module.styl
@ -0,0 +1,21 @@
+@import "../../config.styl"
+
+.header
+	padding 16px
+
+.delimiter
+	border-bottom 2px solid grey
+	padding-bottom 2px
+
+.img
+	border-top-left-radius 4px
+	border-top-right-radius 4px
+
+.title
+	font-weight bold
+	font-size rem(20)
+	margin 0 0 8px
+
+.subtitle
+	font-size rem(14)
+	margin 0
--- a/src/dzeio/Box/BoxHeader/index.tsx
+++ b/src/dzeio/Box/BoxHeader/index.tsx
@ -0,0 +1,56 @@
+import React from 'react'
+
+import { buildClassName } from '../../Util'
+import css from './BoxHeader.module.styl'
+import Row from '../../Row'
+import Col from '../../Col'
+import Text from '../../Text'
+
+
+export interface Props {
+	title?: string
+	titleColSize?: number
+	subtitle?: string
+	delimiter?: boolean
+	titleClassName?: string
+	// image?: ImageProps
+}
+
+export default class BoxHeader extends React.Component<Props> {
+
+	public render = () => (
+		<>
+			{/* {this.props.image && (
+				<Image {...this.props.image} />
+			)} */}
+			<div className={buildClassName(
+				[css.header],
+				[css.delimiter, this.props.delimiter]
+			)}>
+				<Row>
+					<Col size={this.props.titleColSize as 1 || 8}>
+						<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
+						<Text className={css.subtitle}>{this.props.subtitle}</Text>
+					</Col>
+					<Col>
+						<Row justify="flex-end">
+							{this.props.children}
+						</Row>
+					</Col>
+				</Row>
+			</div>
+		</>
+	)
+
+}
+
+/*
+Header
+delimiter?: boolean
+picture?: string // url
+category?: string // subtitle but above title
+title string
+subtitle string
+center?: boolean // if Center children is not used
+children?: content
+*/
--- a/src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
+++ b/src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
@ -0,0 +1,21 @@
+@import "../../config"
+
+.box
+	background white
+	border-radius 8px
+	box-shadow 0px 2px 4px 0px rgba(black, .33)
+	transition all $transition
+
+.outline
+	border 2px solid #E0E0E0
+	box-shadow none
+	transition border-color $transition
+
+	&:hover
+		border-color darken(@border[2], 20%)
+
+@media (prefers-color-scheme dark)
+	.box
+		background #202020
+	.outline
+		border-color #1F1F1F
--- a/src/dzeio/Box/BoxWrapper/index.tsx
+++ b/src/dzeio/Box/BoxWrapper/index.tsx
@ -0,0 +1,28 @@
+import React from 'react'
+
+import css from './BoxWrapper.module.styl'
+import { buildClassName } from '../../Util'
+
+interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+	outline?: boolean
+	className?: string
+}
+
+export default class BoxWrapper extends React.Component<Props> {
+
+	public render = () => (
+		<div {...this.props}
+			className={buildClassName(css.box, [css.outline, this.props.outline], this.props.className)}
+		>
+			{this.props.children}
+		</div>
+	)
+
+}
+
+/*
+Wrapper extends div
+
+Body
+noPadding?: boolean
+*/
--- a/src/dzeio/Box/index.tsx
+++ b/src/dzeio/Box/index.tsx
@ -0,0 +1,53 @@
+import React from 'react'
+
+import BoxWrapper from './BoxWrapper'
+import BoxHeader from './BoxHeader'
+import BoxBody from './BoxBody'
+
+interface Props {
+
+	// Wrapper
+	outline?: boolean
+	className?: string
+
+	// Header
+	title?: string
+	titleColSize?: number
+	subtitle?: string
+	delimiter?: boolean
+	titleClassName?: string
+
+	headerButtons?: React.ReactNode
+
+	// Body
+	noPadding?: boolean
+}
+
+export default class Box extends React.Component<Props> {
+	public render = () => (
+		<BoxWrapper outline={this.props.outline} className={this.props.className}>
+			{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
+				<BoxHeader
+					title={this.props.title}
+					titleColSize={this.props.titleColSize}
+					subtitle={this.props.subtitle}
+					delimiter={this.props.delimiter}
+					titleClassName={this.props.titleClassName}
+				>
+					{this.props.headerButtons}
+				</BoxHeader>
+			)}
+			<BoxHeader></BoxHeader>
+			<BoxBody noPadding={this.props.noPadding}>
+				{this.props.children}
+			</BoxBody>
+		</BoxWrapper>
+	)
+}
+
+
+export {
+	BoxWrapper,
+	BoxHeader,
+	BoxBody
+}
--- a/src/dzeio/Button/Button.module.styl
+++ b/src/dzeio/Button/Button.module.styl
@ -0,0 +1,201 @@
+@import '../config'
+
+.button
+	font-size rem(16)
+	position relative
+	transition all $transition
+	font-weight 600
+	line-height 1.5
+	display inline-flex
+	padding 10px 20px
+	margin 8px 8px 0 8px
+	cursor pointer
+	align-items center
+	text-align center
+	border-radius 4px
+	border none
+	justify-content center
+	color white
+	background-color $default
+
+	// Chrome Specific
+	outline none
+
+	// Link specific
+	text-decoration none
+
+	&.nomargintop
+		margin-top 0
+
+	&.outline
+		border 2px solid @background-color
+		padding 8px 18px // @padding - @border
+		background transparent
+		color @background-color
+
+		&:hover
+		&:active
+		&:focus
+			color @color
+
+	&:hover
+		background-color @background-color
+		transform translateY(-2px)
+		box-shadow 0 4px 4px rgba(@background-color,.2)
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.large
+		padding 15px 30px
+		font-size rem(20)
+
+		&.outline
+			padding 13px 28px // @padding - @border
+
+	&.small
+		padding 5px 10px
+		font-size rem(14)
+
+		&.outline
+			padding 3px 8px // @padding - @border
+
+	&.block
+		display flex
+		width 100%
+		margin 0
+		margin-top 8px
+
+	&:disabled
+		background #E0E0E0 !important
+		color #B0B0B0 !important
+		transform none !important
+		box-shadow none !important
+		cursor initial
+
+	&.loading
+		color transparent !important
+		position relative
+		pointer-events none
+
+		&::after
+			content ""
+			display block
+			border white 2px solid
+			border-color transparent transparent white white
+			width 1em
+			position absolute
+			top calc(50% - (1em / 2))
+			left calc(50% - (1em / 2))
+			border-radius 100%
+			height 1em
+			box-sizing inherit
+			animation ButtonLoading 1s infinite linear
+
+
+
+.textInner
+	margin-left 8px
+
+.primary
+	background-color $primary
+	&.outline
+		color @background-color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @background-color @background-color
+
+.secondary
+	background-color $secondary
+	color black
+	&.outline
+		color @color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @color @color
+.info
+	background-color $info
+	&.outline
+		color @background-color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @background-color @background-color
+.success
+	background-color $success
+	&.outline
+		color @background-color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @background-color @background-color
+.danger
+	background-color $danger
+
+	&.outline
+		color @background-color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @background-color @background-color
+.warning
+	background-color $warning
+
+	&.outline
+		color @background-color
+		border-color @background-color
+
+	&:hover
+		background-color @background-color
+
+	&:active
+	&:focus
+		background-color darken(@background-color, 30%)
+
+	&.loading::after
+		border-color transparent transparent @background-color @background-color
+
+@keyframes ButtonLoading
+	0%
+		transform rotate(0)
+
+	100%
+		transform rotate(365deg)
--- a/src/dzeio/Button/Button.stories.js
+++ b/src/dzeio/Button/Button.stories.js
@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Button',
+    component: Component
+};
+export var Basic = function (args) { return React.createElement(Component, __assign({}, args), "Button"); };
--- a/src/dzeio/Button/Button.stories.tsx
+++ b/src/dzeio/Button/Button.stories.tsx
@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Button',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => <Component {...args}>Button</Component>
--- a/src/dzeio/Button/index.tsx
+++ b/src/dzeio/Button/index.tsx
@ -0,0 +1,67 @@
+import React, { FC } from 'react'
+import Link from 'next/link'
+import { ColorType, IconProps } from '../interfaces'
+import { buildClassName } from '../Util'
+import Image from '../Image'
+
+import css from './Button.module.styl'
+
+interface Props {
+	outline?: boolean
+	nomargintop?: boolean
+	color?: ColorType
+	children?: React.ReactNode
+	icon?: FC<IconProps> | string
+	size?: 'large' | 'small' | 'block'
+	href?: string
+	as?: string
+	disabled?: boolean
+	loading?: boolean
+	onClick?: (event: React.MouseEvent<HTMLButtonElement|HTMLAnchorElement, MouseEvent>) => void
+}
+
+export default class Button extends React.Component<Props> {
+
+	public render = () => {
+
+		let inner: any = this.props.children
+
+		if (!this.props.loading && this.props.icon) {
+			const Icon = this.props.icon
+			inner = (
+				<>
+					{typeof Icon === 'string' ? (
+						<Image src={Icon} max={{ height: 16, width: 16 }} />
+					) : (
+						<Icon size={16} />
+					)}
+					{this.props.children && (
+						<span className={css.textInner}>{this.props.children}</span>
+					)}
+				</>
+			)
+		}
+
+		const classes = buildClassName(
+			[css.button],
+			[css[this.props.color as string], this.props.color],
+			[css.outline, this.props.outline],
+			[css[this.props.size as string], this.props.size],
+			[css.nomargintop, this.props.nomargintop],
+			[css.loading, this.props.loading]
+		)
+
+		if (this.props.href) {
+			return (
+				<Link href={this.props.href} as={this.props.as}>
+					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+				</Link>
+			)
+		}
+
+		return (
+			<button onClick={this.props.onClick} disabled={this.props.disabled} className={classes}>{inner}</button>
+		)
+	}
+
+}
--- a/src/dzeio/Checkbox/Checkbox.module.styl
+++ b/src/dzeio/Checkbox/Checkbox.module.styl
@ -0,0 +1,207 @@
+@import "../config.styl"
+
+$backColor = #757575
+
+.label
+	position relative
+	display flex
+	padding-left 8px
+	margin 8px
+	user-select none
+
+	p
+		margin-left 18px
+
+	span
+		top 0
+		left 0
+		width 20px
+		height @width
+		position absolute
+		box-shadow inset 0 0 0 2px $backColor
+		border-radius 2px
+		transition all $transition
+
+		&::after
+			border-radius 20px
+			position absolute
+			transition all $transition
+			background $default
+
+	svg
+		transition $transition
+		transform scale(0)
+		color transparent
+		margin 2px
+
+	input
+		// visibility hidden
+		position absolute
+		top 0
+		left 0
+		opacity 0
+
+		&:focus + span
+			box-shadow inset 0 0 0 2px black, 0 0 0 2px rgba(black,.3)
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px white, 0 0 0 2px rgba(white,.3)
+
+		&:focus:checked + span
+			box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
+
+		&:checked + span
+			background rgba($default, .5)
+			box-shadow inset 0 0 0 2px $default
+
+			svg
+				color white
+				transform scale(1)
+
+
+	&:hover
+		span
+			box-shadow inset 0 0 0 2px black
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px white
+
+.radio
+	margin-left 18px // Margin + margin for Circle
+	span
+		border-radius 20px
+
+		&::after
+			content " "
+			top 5px
+			left 5px
+			width 10px
+			height @width
+			transform scale(0)
+
+	input:checked + span::after
+		transform scale(1)
+		background white
+
+.switch
+	padding 2px 0 2px 10px // 2px base padding 10px circle padding
+
+	&:hover span
+		box-shadow none
+
+		&::after
+			background black
+
+	span
+		width 28px
+		height 14px
+		border-radius 20px
+		top 50%
+		box-shadow none
+		background rgba($backColor, .5)
+		transform translateY(-50%)
+
+		&::after
+			content " "
+			top 50%
+			transform translate(-50%, -50%)
+			left 0
+			background $backColor
+			width 20px
+			height @width
+
+	input
+		margin 0 8px
+		width 20px
+
+		&:checked + span
+			box-shadow none
+
+			&::after
+				left 100%
+				transform translate(-50%, -50%)
+				background $default
+
+.primary
+	$color = $primary
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
+
+.secondary
+	$color = $secondary
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
+
+.info
+	$color = $info
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
+
+.success
+	$color = $success
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
+
+.danger
+	$color = $danger
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
+
+.warning
+	$color = $warning
+
+	input:checked + span
+		background rgba($color, .5)
+		box-shadow inset 0 0 0 2px $color
+
+		&::after
+			background $color
+
+	&.switch
+		input:checked + span
+			box-shadow none
--- a/src/dzeio/Checkbox/Checkbox.stories.js
+++ b/src/dzeio/Checkbox/Checkbox.stories.js
@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Checkbox from '.';
+export default {
+    title: 'DZEIO/Checkbox',
+    component: Checkbox
+};
+export var Basic = function (args) { return React.createElement(Checkbox, __assign({}, args)); };
--- a/src/dzeio/Checkbox/Checkbox.stories.tsx
+++ b/src/dzeio/Checkbox/Checkbox.stories.tsx
@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Checkbox from '.'
+
+export default {
+	title: 'DZEIO/Checkbox',
+	component: Checkbox
+} as Meta
+
+export const Basic = (args: any) => <Checkbox {...args} />
--- a/src/dzeio/Checkbox/index.tsx
+++ b/src/dzeio/Checkbox/index.tsx
@ -0,0 +1,51 @@
+import React from 'react'
+import { Check } from 'react-feather'
+import { buildClassName } from '../Util'
+
+import { ColorType } from '../interfaces'
+import css from './Checkbox.module.styl'
+import Text from '../Text'
+
+interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+	label?: string
+	id: string
+	type?: undefined
+	radio?: boolean
+	switch?: boolean
+	color?: ColorType
+}
+
+export default class Checkbox extends React.Component<Props> {
+
+
+	public render() {
+		const props: Props = Object.assign({}, this.props)
+		delete props.label
+		delete props.type
+		delete props.color
+		delete props.switch
+		delete props.radio
+
+		const realType = this.props.radio ? 'radio' : 'checkbox'
+
+		return (
+			<label htmlFor={this.props.id} className={buildClassName(
+				[css.label],
+				[css.radio, realType === 'radio'],
+				[css.switch, this.props.switch],
+				[css[this.props.color as string], this.props.color]
+			)}>
+				<input {...props}
+					type={realType}
+				/>
+				<span>
+					{realType === 'checkbox' && ! this.props.switch && (
+						<Check strokeWidth={4} size={16}/>
+					)}
+				</span>
+				<Text>{this.props.label}</Text>
+			</label>
+		)
+	}
+
+}
--- a/src/dzeio/Code/Code.module.styl
+++ b/src/dzeio/Code/Code.module.styl
@ -0,0 +1,5 @@
+.code
+	font-family 'source code pro', monospace
+	background #E8EAF6
+	padding 4px 8px
+	border-radius 8px
--- a/src/dzeio/Code/Code.stories.js
+++ b/src/dzeio/Code/Code.stories.js
@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Code',
+    component: Component,
+    argTypes: {
+        content: { control: 'text', defaultValue: 'Code Block' }
+    }
+};
+export var Basic = function (args) {
+    var content = args.content;
+    delete args.content;
+    return (React.createElement(Component, __assign({}, args), content));
+};
--- a/src/dzeio/Code/Code.stories.tsx
+++ b/src/dzeio/Code/Code.stories.tsx
@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Code',
+	component: Component,
+	argTypes: {
+		content: { control: 'text', defaultValue: 'Code Block'}
+	}
+} as Meta
+
+export const Basic = (args: any) => {
+	const content = args.content
+	delete args.content
+
+	return (
+		<Component {...args}>{content}</Component>
+	)
+}
--- a/src/dzeio/Code/index.tsx
+++ b/src/dzeio/Code/index.tsx
@ -0,0 +1,28 @@
+import React from 'react'
+
+import css from './Code.module.styl'
+
+interface Props {
+	block?: boolean
+}
+
+export default class Code extends React.Component<Props> {
+
+	public render = () => {
+		const code = (
+			<code className={css.code}>
+				{this.props.children}
+			</code>
+		)
+		if (!this.props.block) {
+			return code
+		}
+
+		return (
+			<pre>
+				{code}
+			</pre>
+		)
+	}
+
+}
--- a/src/dzeio/Col/Col.module.styl
+++ b/src/dzeio/Col/Col.module.styl
@ -0,0 +1,55 @@
+@import "../config"
+
+.col
+	max-width 100%
+	flex-basis 0
+	flex-grow 1
+	padding $gapSize 0 0 $gapSize
+
+	&.nogrow
+		max-width intial
+		flex-grow 0
+		flex-basis initial
+
+for i in (0...$colCount+1)
+	.col-{i}
+		if i == 0
+			display none
+		else
+			flex 0 0 ((i / 12) * 100)%
+			min-width ((i / 12) * 100)%
+
+	if i != $colCount and i != 0
+		.offset-{i}
+			margin-left ((i / 12) * 100)% + (i * $gapSize + $gapSize)px
+
+@media (max-width $tablet)
+	.col.tabletGrow
+		flex-grow 1
+
+	for i in (0...$colCountTablet+1)
+		.col-tablet-{i}
+			if i == 0
+				display none
+			else
+				flex 0 0 ((i / $colCountTablet) * 100)%
+				min-width ((i / $colCountTablet) * 100)%
+
+		if i != $colCountTablet and i != 0
+			.offset-tablet-{i}
+				margin-left ((i / $colCountTablet) * 100)% + (i * $gapSize - $gapSize)
+
+@media (max-width $mobile)
+	.col.mobileGrow
+		flex-grow 1
+
+	for i in (0...$colCountMobile+1)
+		.col-mobile-{i}
+			if i == 0
+				display none
+			else
+				flex 0 0 ((i / $colCountMobile) * 100)%
+				min-width ((i / $colCountMobile) * 100)%
+		if i != $colCountMobile and i != 0
+			.offset-tablet-{i}
+				margin-left ((i / $colCountMobile) * 100)% + (i * $gapSize - $gapSize)
--- a/src/dzeio/Col/DebugCols.js
+++ b/src/dzeio/Col/DebugCols.js
@ -0,0 +1,120 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import Row from '../Row';
+import css from './DebugCols.module.styl';
+import Col from '.';
+var Breakpoint;
+(function (Breakpoint) {
+    Breakpoint[Breakpoint["MOBILE"] = 0] = "MOBILE";
+    Breakpoint[Breakpoint["TABLET"] = 1] = "TABLET";
+    Breakpoint[Breakpoint["COMPUT"] = 2] = "COMPUT";
+})(Breakpoint || (Breakpoint = {}));
+var DebugCols = /** @class */ (function (_super) {
+    __extends(DebugCols, _super);
+    function DebugCols() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            breakpoint: Breakpoint.COMPUT
+        };
+        _this.render = function () { return (React.createElement(Row, { className: css.row },
+            React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
+                React.createElement("div", null)),
+            React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
+                React.createElement("div", null)),
+            React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
+                React.createElement("div", null)),
+            React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
+                React.createElement("div", null)),
+            _this.state.breakpoint !== Breakpoint.MOBILE && (React.createElement(React.Fragment, null,
+                _this.state.breakpoint !== Breakpoint.TABLET && (React.createElement(React.Fragment, null,
+                    React.createElement(Col, { size: 1, className: css.col },
+                        React.createElement("div", null)),
+                    React.createElement(Col, { size: 1, className: css.col },
+                        React.createElement("div", null)),
+                    React.createElement(Col, { size: 1, className: css.col },
+                        React.createElement("div", null)),
+                    React.createElement(Col, { size: 1, className: css.col },
+                        React.createElement("div", null)))),
+                React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
+                    React.createElement("div", null)),
+                React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
+                    React.createElement("div", null)),
+                React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
+                    React.createElement("div", null)),
+                React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
+                    React.createElement("div", null)))))); };
+        _this.onResize = function () { return __awaiter(_this, void 0, void 0, function () {
+            var currentBreakpoint, hasChanged;
+            return __generator(this, function (_a) {
+                currentBreakpoint = window.innerWidth <= 768 ?
+                    Breakpoint.MOBILE :
+                    window.innerWidth <= 1200 ?
+                        Breakpoint.TABLET :
+                        Breakpoint.COMPUT;
+                hasChanged = currentBreakpoint !== this.state.breakpoint;
+                if (hasChanged) {
+                    this.setState({ breakpoint: currentBreakpoint });
+                }
+                return [2 /*return*/];
+            });
+        }); };
+        return _this;
+    }
+    DebugCols.prototype.componentDidMount = function () {
+        this.onResize();
+        window.addEventListener('resize', this.onResize);
+    };
+    DebugCols.prototype.componentWillUnmount = function () {
+        window.removeEventListener('resize', this.onResize);
+    };
+    return DebugCols;
+}(React.Component));
+export default DebugCols;
--- a/src/dzeio/Col/DebugCols.module.styl
+++ b/src/dzeio/Col/DebugCols.module.styl
@ -0,0 +1,12 @@
+.row
+	position fixed
+	top 0
+	left 0
+	height 100%
+	width 100%
+	z-index 10000
+	pointer-events none
+
+.col > div
+	background rgba(red, .2)
+	height 100%
--- a/src/dzeio/Col/DebugCols.tsx
+++ b/src/dzeio/Col/DebugCols.tsx
@ -0,0 +1,72 @@
+import React from 'react'
+import Row from '../Row'
+
+import css from './DebugCols.module.styl'
+
+import Col from '.'
+
+enum Breakpoint {
+	MOBILE,
+	TABLET,
+	COMPUT
+}
+
+interface States {
+	breakpoint: Breakpoint
+}
+
+
+export default class DebugCols extends React.Component<unknown, States> {
+
+	public state: States = {
+		breakpoint: Breakpoint.COMPUT
+	}
+
+	public componentDidMount() {
+		this.onResize()
+		window.addEventListener('resize', this.onResize)
+	}
+
+	public componentWillUnmount() {
+		window.removeEventListener('resize', this.onResize)
+	}
+
+	public render = () => (
+		<Row className={css.row}>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			{this.state.breakpoint !== Breakpoint.MOBILE && (
+				<>
+					{this.state.breakpoint !== Breakpoint.TABLET && (
+						<>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+						</>
+					)}
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+				</>
+			)}
+		</Row>
+	)
+
+	private onResize = async () => {
+		const currentBreakpoint =
+			window.innerWidth <= 768 ?
+				Breakpoint.MOBILE :
+				window.innerWidth <= 1200 ?
+					Breakpoint.TABLET :
+					Breakpoint.COMPUT
+		const hasChanged = currentBreakpoint !== this.state.breakpoint
+		if (hasChanged) {
+			this.setState({ breakpoint: currentBreakpoint })
+		}
+	}
+
+}
--- a/src/dzeio/Col/index.tsx
+++ b/src/dzeio/Col/index.tsx
@ -0,0 +1,49 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+import css from './Col.module.styl'
+
+interface Props {
+	size?: 0|1|2|3|4|5|6|7|8|9|10|11|12
+	offset?: 1|2|3|4|5|6|7|8|9|10|11
+	children?: React.ReactNode
+	className?: string
+	nogrow?: boolean
+
+	// Tablet related
+	tabletSize?: 0|1|2|3|4|5|6|7|8
+	tabletoffset?: 1|2|3|4|5|6|7
+	tabletGrow?: boolean
+
+
+	// Mobile related
+	mobileSize?: 0|1|2|3|4
+	mobileoffset?: 1|2|3
+	mobileGrow?: boolean
+}
+
+export default class Col extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName(
+			css.col,
+
+			// Normal
+			[css[`col-${this.props.size}`], typeof this.props.size === 'number'],
+			[css[`offset-${this.props.offset}`], this.props.offset],
+
+			// Tablet
+			[css[`col-tablet-${this.props.tabletSize}`], typeof this.props.tabletSize === 'number'],
+			[css[`offset-tablet-${this.props.tabletoffset}`], this.props.tabletoffset],
+
+			// Mobile
+			[css[`col-mobile-${this.props.mobileSize}`], typeof this.props.mobileSize === 'number'],
+			[css[`offset-mobile-${this.props.mobileoffset}`], this.props.mobileoffset],
+			[css.nogrow, this.props.nogrow],
+			[css.mobileGrow, this.props.mobileGrow],
+			this.props.className
+		)}>
+			{this.props.children}
+		</div>
+	)
+
+}
--- a/src/dzeio/Container/Container.module.styl
+++ b/src/dzeio/Container/Container.module.styl
@ -0,0 +1,2 @@
+.container
+	padding 16px
--- a/src/dzeio/Container/index.tsx
+++ b/src/dzeio/Container/index.tsx
@ -0,0 +1,19 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+
+import css from './Container.module.styl'
+
+interface Props {
+	children: React.ReactNode
+	className?: string
+}
+
+export default class Container extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName(css.container, this.props.className)}>
+			{this.props.children}
+		</div>
+	)
+
+}
--- a/src/dzeio/Fieldset/Fieldset.module.styl
+++ b/src/dzeio/Fieldset/Fieldset.module.styl
@ -0,0 +1,18 @@
+@import '../config.styl'
+
+.fieldset
+	border-radius 8px
+	border 2px solid grey
+	transition all $transition
+	margin 0
+
+	> legend
+		font-weight 600
+		transition all $transition
+		padding 0 4px
+
+	&:hover
+		border-color black
+
+		> legend
+			color $default
--- a/src/dzeio/Fieldset/index.tsx
+++ b/src/dzeio/Fieldset/index.tsx
@ -0,0 +1,21 @@
+import React from 'react'
+
+import css from './Fieldset.module.styl'
+
+interface Props {
+	title?: string
+	children?: React.ReactNode
+}
+
+export default class Fieldset extends React.Component<Props> {
+
+	public render = () => (
+		<fieldset className={css.fieldset}>
+			{this.props.title && (
+				<legend>{this.props.title}</legend>
+			)}
+			{this.props.children}
+		</fieldset>
+	)
+
+}
--- a/src/dzeio/Footer/Footer.module.styl
+++ b/src/dzeio/Footer/Footer.module.styl
@ -0,0 +1,23 @@
+@import '../config.styl'
+
+.footer
+	padding 24px 16px
+
+.animation
+	animation grow 1s linear infinite
+	display inline-block
+
+@keyframes grow
+	0%
+		transform scale(1)
+
+	40%
+		transform scale(1)
+	50%
+		transform scale(1.2)
+	60%
+		transform scale(1)
+	70%
+		transform scale(1.2)
+	95%
+		transform scale(1)
--- a/src/dzeio/Footer/index.tsx
+++ b/src/dzeio/Footer/index.tsx
@ -0,0 +1,13 @@
+import React from 'react'
+
+import Text from '../Text'
+import css from './Footer.module.styl'
+
+export default class Footer extends React.Component {
+	public render = () => (
+		<footer className={css.footer}>
+			<Text align="center">Made with <span className={css.animation}>💗</span> by Dzeio</Text>
+			<Text align="center">Copyright © 2020 Dzeio. All rights reserved.</Text>
+		</footer>
+	)
+}
--- a/src/dzeio/GradientBackground/GradientBackground.module.styl
+++ b/src/dzeio/GradientBackground/GradientBackground.module.styl
@ -0,0 +1,35 @@
+@import "../config"
+
+$transparent = 75%
+
+.back
+	transition all $transition
+	background linear-gradient(to left, $default, transparentify($default, $transparent))
+
+.primary
+	$color = $primary
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+.secondary
+	$color = $secondary
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+.info
+	$color = $info
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+.success
+	$color = $success
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+.danger
+	$color = $danger
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+.warning
+	$color = $warning
+	background linear-gradient(to left, $color, transparentify($color, $transparent))
+
+@media (prefers-color-scheme dark)
+	.back
+		background $darkBackground
--- a/src/dzeio/GradientBackground/index.tsx
+++ b/src/dzeio/GradientBackground/index.tsx
@ -0,0 +1,21 @@
+import React from 'react'
+import { ColorType } from '../interfaces'
+
+import { buildClassName } from '../Util'
+import css from './GradientBackground.module.styl'
+
+interface Props {
+	color?: ColorType
+	className?: string
+	children: React.ReactNode
+}
+
+export default class GradientBackground extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
+			{this.props.children}
+		</div>
+	)
+
+}
--- a/src/dzeio/Image/Image.module.styl
+++ b/src/dzeio/Image/Image.module.styl
@ -0,0 +1,42 @@
+.parent
+	position relative
+
+.image
+	transition .3s
+	object-fit contain
+	z-index 2
+
+	&.ph1
+		position fixed
+		transition 0s
+
+
+	&.ph2
+		width 100% !important
+		position fixed
+		max-width 100% !important
+		max-height 100% !important
+		box-sizing border-box
+		padding 5%
+		top 0 !important
+		left 0 !important
+		height 100%
+		background #000000A0
+
+
+	&.after
+		background #00000000
+		// height 100%
+		box-sizing border-box
+		position fixed
+		// width 100%
+		z-index 0
+		padding initial
+
+
+.hideOverflow
+	overflow hidden
+
+
+.none
+	display none
--- a/src/dzeio/Image/index.tsx
+++ b/src/dzeio/Image/index.tsx
@ -0,0 +1,238 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+import NextImage from 'next/image'
+
+import css from './Image.module.styl'
+
+export interface ImageProps {
+	defaultHeight?: number
+	src?: string
+	sources?: Array<string>
+	deleteOnError?: boolean
+	downgradeOnError?: string
+	canFullscreen?: boolean
+	max?: {
+		height?: number|string
+		width?: number|string
+	}
+	width?: number|string
+	default?: {
+		height?: number|string
+		width?: number|string
+	}
+	alt?: string
+	classes?: string
+	className?: string
+	onClick?: () => void
+}
+
+enum images {
+	JPEG = 'image/jpeg',
+	XICON = 'image/x-icon',
+	TIFF = 'image/tiff'
+}
+
+const mimeTypes = {
+	apng: 'image/apng',
+	bmp: 'image/bmp',
+	gif: 'image/gif',
+
+	ico: images.XICON,
+	cur: images.XICON,
+
+	jpg: images.JPEG,
+	jpeg: images.JPEG,
+	jfif: images.JPEG,
+	pjpeg: images.JPEG,
+	pjp: images.JPEG,
+
+	png: 'image/png',
+	svg: 'image/svg+xml',
+
+	tif: images.TIFF,
+	tiff: images.TIFF,
+
+	webp: 'image/webp'
+}
+
+const getMimeType = (img: string) => {
+	const arr = img.split('.')
+	return mimeTypes[arr[arr.length-1] as 'apng'] || mimeTypes.png
+}
+
+type evType<T = HTMLImageElement> = React.SyntheticEvent<T, Event>
+
+export default class Image extends React.Component<ImageProps> {
+
+	private ref: React.RefObject<HTMLImageElement> = React.createRef()
+	private plchldr: React.RefObject<HTMLDivElement> = React.createRef()
+	private parent: React.RefObject<HTMLDivElement> = React.createRef()
+	private pic: React.RefObject<HTMLDivElement> = React.createRef()
+
+	private wasDowngraded = false
+	private cardPos: Array<number> = []
+	private cardSize: Array<number> = []
+
+	private isFullscreen = false
+
+	public async componentDidMount() {
+		if (this.props.canFullscreen) {
+			window.addEventListener('scroll', this.onScroll)
+			window.addEventListener('resize', this.onResize)
+			this.onScroll()
+			this.onResize()
+		}
+	}
+
+	public async componentDidUpdate() {
+		this.pic.current?.classList.remove(css.none)
+		if (this.props.canFullscreen) {
+			this.onScroll()
+			this.onResize()
+		}
+		if (this.isFullscreen) {
+			this.onClick()
+		}
+	}
+
+	public async componentWillUnmount() {
+		if (this.props.canFullscreen) {
+			window.removeEventListener('scroll', this.onScroll)
+			window.removeEventListener('resize', this.onResize)
+		}
+	}
+
+	public render() {
+		const pic = (
+			// <picture ref={this.pic} className={this.props.classes}>
+			// 	{this.props.sources && this.props.sources.map((el, index) => (
+			// 		<source key={index} srcSet={el} type={getMimeType(el)}/>
+			// 	))}
+			// 	<img
+			// 	/>
+			// </picture>
+			<div ref={this.pic} className={buildClassName(this.props.classes, css.parent)}>
+				<NextImage
+					className={buildClassName([css.image], [this.props.className])}
+					// ref={this.ref}
+					src={this.props.src || ''}
+					onClick={this.props.canFullscreen && this.onClick || this.props.onClick}
+					onLoad={this.props.default && this.onLoad || undefined}
+					onError={this.props.deleteOnError && this.onError || undefined}
+					// layout="fill"
+					width={200}
+					height={44}
+					// style={{
+					// 	width: this.props.default?.width,
+					// 	height: this.props.default?.height,
+					// 	maxHeight: this.props.max?.height,
+					// 	maxWidth: this.props.max?.width
+					// }}
+					alt={this.props.alt}
+				/>
+			</div>
+		)
+		if (this.props.canFullscreen) {
+			return (
+				<div ref={this.parent}>
+					<div ref={this.plchldr} className={css.none}></div>
+					{pic}
+				</div>
+			)
+		}
+		return pic
+	}
+
+	private onScroll = async () => {
+		if (!this.ref.current || this.isFullscreen || !this.props.canFullscreen) {
+			return
+		}
+
+		this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
+		this.ref.current.style.top = this.cardPos[0] + 'px'
+		this.ref.current.style.left = this.cardPos[1] + 'px'
+	}
+
+	private onResize = async () => {
+		if (!this.ref.current || !this.plchldr.current || !this.props.canFullscreen || this.isFullscreen) {
+			return
+		}
+		let tmp = [this.ref.current.offsetHeight, this.ref.current.offsetWidth]
+		if (this.parent.current) {
+			tmp = [this.parent.current.offsetHeight, this.ref.current.offsetWidth]
+		}
+		this.plchldr.current.style.width = `${tmp[1]}px`
+		this.plchldr.current.style.height = `${tmp[0]}px`
+	}
+
+	private onClick = async () => {
+		if (!this.ref.current || !this.props.canFullscreen || !this.plchldr.current) {
+			return
+		}
+		if (this.props.onClick) {
+			this.props.onClick()
+		}
+
+		const i = this.ref.current
+		const c = this.plchldr.current
+		const body = document.body
+		i.style.top = this.cardPos[0] + 'px'
+		i.style.left = this.cardPos[1] + 'px'
+
+		if (this.isFullscreen) {
+			i.style.width = this.cardSize[1] + 'px'
+			i.style.height = this.cardSize[0] + 'px'
+			body.classList.remove(css.hideOverflow)
+			i.classList.remove(css.ph2)
+			i.classList.add(css.after)
+
+			setTimeout(() => {
+				if (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
+					return
+				}
+				const w = this.valToPixel(this.props.width)
+				const mh = this.valToPixel(this.props.max?.height)
+				const mw = this.valToPixel(this.props.max?.width)
+				c.classList.add(css.none)
+				i.style.height = ''
+				i.style.width = w
+				i.style.maxHeight = mh
+				i.style.maxWidth = mw
+				i.classList.remove(css.after)
+			}, 350)
+			this.isFullscreen = false
+		} else {
+			i.classList.add(css.ph1)
+			c.classList.remove(css.none)
+			i.classList.add(css.ph2)
+			i.classList.remove(css.ph1)
+			body.classList.add(css.hideOverflow)
+			this.isFullscreen = true
+		}
+	}
+
+	private valToPixel(value: number|string|undefined): string {
+		if (typeof value === 'number') {
+			return `${value}px`
+		}
+		if (typeof value === 'undefined') {
+			return ''
+		}
+		return value
+	}
+
+	private onLoad = async (ev: evType) => {
+		ev.currentTarget.style.height = ''
+		ev.currentTarget.style.width = ''
+	}
+
+	private onError = async (ev: evType) => {
+		this.w('Picture not loaded', ev.currentTarget.src)
+		ev.currentTarget.parentElement?.classList.add(css.none)
+	}
+
+	private w(...messages: any) {
+		console.warn('[ Picture ]', ...messages)
+	}
+
+}
--- a/src/dzeio/Input/Input.module.styl
+++ b/src/dzeio/Input/Input.module.styl
@ -0,0 +1,198 @@
+@import '../config'
+
+.parent
+	position relative
+	margin 16px
+
+	label
+		font-size 1rem
+		font-weight 600
+		color black
+		display inline-block
+		margin-bottom .5rem
+		transition all $transition
+		position absolute
+		top 16px
+		pointer-events none
+		left 16px
+
+		@media (prefers-color-scheme dark)
+			color white
+
+	svg
+		position absolute
+		color #AAA
+		top 14px
+		left 16px // input padding-left
+		transition color $transition
+		pointer-events none
+
+		~ label
+			left 16px + 24px + 16px
+
+	select
+		appearance none
+
+	input
+	select
+		padding 14px 16px
+		height 56px
+		border 2px solid rgba(black, .3)
+		border-radius 4px
+		box-sizing border-box
+		font-size .875rem
+		outline none
+		background transparent
+		transition all $transition
+		color black
+		@media (prefers-color-scheme dark)
+			border-color rgba(white, .3)
+			color white
+
+		&:hover
+			border-color black
+			@media (prefers-color-scheme dark)
+				border-color white
+
+			+ svg
+				color black
+
+				@media (prefers-color-scheme dark)
+					color white
+
+		&:not(:placeholder-shown)
+		&:focus
+		&:not([placeholder=" "])
+			~ label
+				top -8px
+				left 16px - 4px // .input/padding-left label/padding-left
+				background white
+				padding 0 4px
+
+				@media (prefers-color-scheme dark)
+					background #202020
+
+		&:invalid
+			border-color $danger
+
+			~ label
+				color @border-color
+
+			~ svg
+				color @border-color
+		&:focus
+			border-color $default
+
+			~ label
+				color @border-color
+
+			~ svg
+				color @border-color
+
+			&.primary
+				border-color $primary
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+			&.secondary
+				border-color $secondary
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+			&.info
+				border-color $info
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+			&.success
+				border-color $success
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+			&.danger
+				border-color $danger
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+			&.warning
+				border-color $warning
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+
+		&.hasIcon
+			padding-left 16px + 24px + 16px
+
+		&.filled
+			border none
+			background rgba(gray, .1)
+			border-radius @border-radius @border-radius 0 0
+			border-bottom 2px solid rgba(black,.4)
+
+			&.opaque
+				background white
+
+				@media (prefers-color-scheme dark)
+					background #202020
+
+			&:hover
+				background rgba(gray, .2)
+
+
+
+				&.opaque
+					background darken(white, 5%)
+					@media (prefers-color-scheme dark)
+						background #1c1c1c
+			&:focus
+				background rgba(gray, .3)
+
+				&.opaque
+					background white
+
+					@media (prefers-color-scheme dark)
+						background #202020
+
+			&:not(:placeholder-shown)
+			&:focus
+			&:not([placeholder=" "])
+				~ label
+					top 3px
+					left 16px - 4px // .input/padding-left label/padding-left
+					background transparent
+					padding 0
+					font-size .75rem
+				~ svg ~ label
+					left 16px + 24px + 16px // .input/padding-left label/padding-left
+
+	div
+		display flex
+		justify-content space-between
+		padding 0 16px
+		font-size .9em
+
+	&.block input
+		width 100%
--- a/src/dzeio/Input/Input.stories.js
+++ b/src/dzeio/Input/Input.stories.js
@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Input',
+    component: Component
+};
+export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
--- a/src/dzeio/Input/Input.stories.tsx
+++ b/src/dzeio/Input/Input.stories.tsx
@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Input',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => <Component {...args} />
--- a/src/dzeio/Input/index.tsx
+++ b/src/dzeio/Input/index.tsx
@ -0,0 +1,138 @@
+import React, { FC } from 'react'
+
+import { ChevronDown } from 'react-feather'
+import { IconProps, ColorType } from '../interfaces'
+import { buildClassName } from '../Util'
+import css from './Input.module.styl'
+
+interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+	id?: string
+	label?: string
+	icon?: FC<IconProps>
+	helper?: string
+	characterCount?: boolean
+	inputRef?: React.RefObject<HTMLInputElement>
+	selectRef?: React.RefObject<HTMLSelectElement>
+	type?: 'color' | 'text' | 'date' | 'datetime-local' |
+	'email' | 'file' | 'month' | 'number' | 'password' |
+	'range' | 'search' | 'tel' | 'time' | 'url' | 'week' | 'select'
+	maxLength?: number | undefined
+	infinityText?: string
+	filled?: boolean
+	opaque?: boolean
+	block?: boolean
+	color?: ColorType
+	children?: React.ReactNode
+}
+
+export default class Input extends React.Component<Props> {
+
+	private charCountRef: React.RefObject<HTMLSpanElement> = React.createRef()
+
+	public componentDidMount() {
+		this.updatecharCount()
+	}
+
+	public render() {
+		const props: Props = Object.assign({}, this.props)
+		const Icon = this.props.icon
+		delete props.label
+		delete props.icon
+		delete props.opaque
+		delete props.helper
+		delete props.infinityText
+		delete props.filled
+		delete props.inputRef
+		delete props.selectRef
+		delete props.block
+		delete props.color
+		delete props.characterCount
+
+		const baseProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> = {
+			placeholder: this.props.placeholder || ' ',
+			ref: this.props.inputRef,
+			className: buildClassName(
+				[css.hasIcon, Icon],
+				[css.filled, this.props.filled],
+				[css.opaque, this.props.opaque],
+				[css[this.props.color as string], this.props.color]
+			),
+			onInvalid: (ev: React.FormEvent<HTMLInputElement>) => ev.preventDefault()
+		}
+
+		let input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+
+		if (this.props.type === 'number') {
+			baseProps.type = 'text'
+			baseProps.inputMode = 'numeric'
+			baseProps.pattern = '[0-9]*'
+		}
+
+		if (this.props.type === 'select') {
+			input = (
+				<select
+					ref={this.props.selectRef}
+					className={buildClassName(
+						css.hasIcon,
+						[css.filled, this.props.filled],
+						[css[this.props.color as string], this.props.color]
+					)}
+				>
+					{this.props.children}
+				</select>
+			)
+		} else {
+			input = (
+				<input
+					{...props}
+					{...baseProps}
+				/>
+			)
+		}
+
+		return (
+			<div
+				className={buildClassName(
+					[css.parent],
+					[css.block, this.props.block]
+				)}
+				onChangeCapture={this.props.characterCount ? this.updatecharCount : undefined}
+			>
+				{input}
+				{this.props.type === 'select' && (
+					<ChevronDown />
+				)}
+				{Icon && (
+					<Icon />
+				)}
+				{this.props.label && (
+					<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
+				)}
+				{(this.props.helper || this.props.characterCount) && (
+					<div>
+						<span>{this.props.helper}</span>
+						<span ref={this.charCountRef}></span>
+					</div>
+				)}
+			</div>
+		)
+	}
+
+	private updatecharCount = async (event?: React.FormEvent<HTMLDivElement>) => {
+		if (this.props.characterCount && this.charCountRef.current) {
+			const max = this.props.maxLength || this.props.infinityText || 'Infinity'
+			let currentCount = 0
+			if (event) {
+				currentCount = (event.target as HTMLInputElement).value.length
+			} else {
+				if (this.props.defaultValue) {
+					currentCount = this.props.defaultValue.toString().length
+				} else if (this.props.value) {
+					currentCount = this.props.value.toString().length
+				}
+			}
+			this.charCountRef.current.innerText = currentCount + ' / ' + max
+		}
+	}
+
+}
--- a/src/dzeio/Link/Link.module.styl
+++ b/src/dzeio/Link/Link.module.styl
@ -0,0 +1,3 @@
+.icon
+	vertical-align sub
+	margin 2px
--- a/src/dzeio/Link/Link.stories.js
+++ b/src/dzeio/Link/Link.stories.js
@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Link',
+    component: Component,
+    argTypes: {
+        href: { control: 'text', defaultValue: 'https://www.dzeio.com' },
+        text: { control: 'text', defaultValue: 'Dzeio' }
+    }
+};
+export var Basic = function (args) { return React.createElement(Component, __assign({}, args), args.text); };
--- a/src/dzeio/Link/Link.stories.tsx
+++ b/src/dzeio/Link/Link.stories.tsx
@ -0,0 +1,14 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Link',
+	component: Component,
+	argTypes: {
+		href: {control: 'text', defaultValue: 'https://www.dzeio.com'},
+		text: {control: 'text', defaultValue: 'Dzeio'}
+	}
+} as Meta
+
+export const Basic = (args: any) => <Component {...args}>{args.text}</Component>
--- a/src/dzeio/Link/index.tsx
+++ b/src/dzeio/Link/index.tsx
@ -0,0 +1,41 @@
+import React from 'react'
+import NextLink from 'next/link'
+import { ExternalLink } from 'react-feather'
+
+import css from './Link.module.styl'
+
+interface Props {
+	href: string
+	children?: React.ReactNode
+	className?: string
+	forceNewTab?: boolean
+}
+
+export default class Link extends React.Component<Props> {
+
+	public render() {
+		if (!this.props.href.startsWith('/')) {
+			// external link
+			return (
+				<a
+					className={this.props.className}
+					href={this.props.href}
+					rel="noreferrer nofollow"
+					target="_blank"
+				>
+					{this.props.children}<ExternalLink size={16} className={css.icon} />
+				</a>
+			)
+		}
+		return (
+			<NextLink href={this.props.href}>
+				<a
+					className={this.props.className}
+					target={this.props.forceNewTab ? '_blank' : undefined}
+					rel={this.props.forceNewTab ? 'noreferrer nofollow' : undefined}
+				>{this.props.children}</a>
+			</NextLink>
+		)
+	}
+
+}
--- a/src/dzeio/Menu/Menu.module.styl
+++ b/src/dzeio/Menu/Menu.module.styl
@ -0,0 +1,19 @@
+@import '../config'
+
+.menu
+	position absolute
+	opacity 0
+	background white
+	pointer-events none
+	border-radius 4px
+	box-shadow 0 2px 4px 2px rgba(black, 25%)
+	z-index 99
+	transition opacity $transition
+	a
+		display block
+		text-align center
+		padding 16px
+
+	&.shown
+		opacity 1
+		pointer-events initial
--- a/src/dzeio/Menu/Menu.stories.js
+++ b/src/dzeio/Menu/Menu.stories.js
@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Menu',
+    component: Component,
+    argTypes: {
+        content: { control: 'array', defaultValue: [{ name: 'Name', href: 'https://www.google.com' }] }
+    }
+};
+export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
--- a/src/dzeio/Menu/Menu.stories.tsx
+++ b/src/dzeio/Menu/Menu.stories.tsx
@ -0,0 +1,13 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Menu',
+	component: Component,
+	argTypes: {
+		content: {control: 'array', defaultValue: [{name: 'Name', href: 'https://www.google.com'}]}
+	}
+} as Meta
+
+export const Basic = (args: any) => <Component {...args} />
--- a/src/dzeio/Menu/index.tsx
+++ b/src/dzeio/Menu/index.tsx
@ -0,0 +1,25 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { buildClassName } from '../Util'
+import css from './Menu.module.styl'
+
+interface Props {
+	pos?: {top?: number, bottom?: number, left?: number, right?: number}
+	content: Array<{name: string, href: string, as?: string}>
+	show?: boolean
+}
+
+export default class Menu extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName([css.menu], [css.shown, this.props.show])} style={this.props.pos}>
+			{this.props.content.map((item, index) => (
+				<Link key={index} href={item.href} as={item.as}>
+					<a>{item.name}</a>
+				</Link>
+			))}
+		</div>
+	)
+
+}
--- a/src/dzeio/Navbar/Navbar.module.styl
+++ b/src/dzeio/Navbar/Navbar.module.styl
@ -0,0 +1,49 @@
+@import "../config"
+
+.navbar
+	width 100%
+	height 70px
+	padding 16px
+	position absolute
+	top 0
+	left 0
+	border-bottom 1px solid white
+
+	&.small
+		padding-left 216px
+
+.alignRight
+	text-align right
+
+.favicon img
+	height 38px
+	border-radius 8px
+	border 2px solid white
+	padding 2px
+	background white
+	width 38px
+
+.userIcon img
+	padding 0
+	cursor pointer
+
+.text
+	display inline-block
+	margin 0
+	height 38px
+	line-height 1
+	font-weight bold
+	font-size rem(20)
+	padding 7px 0 11px 16px
+	text-decoration none
+	color white
+	cursor pointer
+
+.spacer
+	height 70px
+
+.icon
+	padding 7px 16px
+	color white
+	box-sizing content-box
+	cursor pointer
--- a/src/dzeio/Navbar/Navbar.stories.js
+++ b/src/dzeio/Navbar/Navbar.stories.js
@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import Component from '.';
+export default {
+    title: 'DZEIO/Navbar',
+    component: Component
+};
+export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
--- a/src/dzeio/Navbar/Navbar.stories.tsx
+++ b/src/dzeio/Navbar/Navbar.stories.tsx
@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Navbar',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => <Component {...args} />
--- a/src/dzeio/Navbar/NavbarSpace.js
+++ b/src/dzeio/Navbar/NavbarSpace.js
@ -0,0 +1,25 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import React from 'react';
+import css from './Navbar.module.styl';
+var NavbarSpace = /** @class */ (function (_super) {
+    __extends(NavbarSpace, _super);
+    function NavbarSpace() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.render = function () { return (React.createElement("div", { className: css.spacer })); };
+        return _this;
+    }
+    return NavbarSpace;
+}(React.Component));
+export default NavbarSpace;
--- a/src/dzeio/Navbar/NavbarSpace.tsx
+++ b/src/dzeio/Navbar/NavbarSpace.tsx
@ -0,0 +1,11 @@
+import React from 'react'
+
+import css from './Navbar.module.styl'
+
+export default class NavbarSpace extends React.Component {
+
+	public render = () => (
+		<div className={css.spacer}></div>
+	)
+
+}
--- a/src/dzeio/Navbar/index.tsx
+++ b/src/dzeio/Navbar/index.tsx
@ -0,0 +1,131 @@
+import React from 'react'
+import { Bell, Grid } from 'react-feather'
+import Router from 'next/router'
+import Link from 'next/link'
+import Row from '../Row'
+import Col from '../Col'
+import Button from '../Button'
+import Image from '../Image'
+
+import { buildClassName } from '../Util'
+import Menu from '../Menu'
+import css from './Navbar.module.styl'
+
+interface States {
+	domain?: string
+	showUserMenu?: boolean
+}
+
+interface Props {
+	username?: string
+	userPic?: string
+	userMenu?: Array<{href: string, name: string}>
+	loginUrl?: string
+	registerUrl?: string
+	logoUrl?: string
+	logoLabel?: string
+	logo?: {
+		src: string
+		alt: string
+	}
+
+}
+
+export default class Navbar extends React.Component<Props, States> {
+
+	public state: States = {}
+
+	public constructor(props: Props) {
+		super(props)
+	}
+
+	public componentDidMount() {
+
+		this.setState({
+			domain: Router.query.domain as string
+		})
+		Router.events.on('routeChangeComplete', () => {
+			this.setState({
+				domain: Router.query.domain as string | undefined
+			})
+		})
+		document.body.addEventListener('click', this.onClickAnywhere)
+	}
+
+	public componentWillUnmount() {
+		document.body.removeEventListener('click', this.onClickAnywhere)
+	}
+
+	public render = () => (
+		<nav className={buildClassName([css.navbar], [css.small, this.state.domain])}>
+			<Row >
+				{this.props.logo && (
+					<Col>
+						<Row align="center">
+							<Link href={this.props.logoUrl || '/'}>
+								<a aria-label={this.props.logoLabel || 'Homepage'}>
+									<Image
+										alt={this.props.logo.alt}
+										src={this.props.logo.src}
+										max={{ height: 70-32 }}
+									/>
+								</a>
+							</Link>
+						</Row>
+					</Col>
+
+				)}
+				<Col>
+					<Row justify="flex-end" align="center">
+						{this.props.username ? (
+							<>
+								{/* <Bell className={css.icon} />
+								<Grid className={css.icon} /> */}
+								{this.props.userPic && (
+									<Image
+										onClick={this.onMenuClick}
+										alt="User Profile Picture"
+										classes={buildClassName([css.favicon], [css.userIcon])}
+										src={this.props.userPic}
+									/>
+								)}
+								<p
+									onClick={this.props.userMenu ? this.onMenuClick : undefined}
+									className={css.text}
+								>
+									{this.props.username}
+								</p>
+								{this.props.userMenu && (
+									<Menu
+										show={this.state.showUserMenu}
+										pos={{ right: 16, top: 86 }}
+										content={this.props.userMenu}
+									/>
+								)}
+							</>
+						) : (
+							<>
+								<Button nomargintop href={this.props.loginUrl}>Login</Button>
+								<Button nomargintop color="secondary" href={this.props.registerUrl}>Register</Button>
+							</>
+						)}
+					</Row>
+				</Col>
+			</Row>
+		</nav>
+	)
+
+	private onClickAnywhere = () => {
+		this.setState({
+			showUserMenu: false
+		})
+	}
+
+	private onMenuClick = () => {
+		const newMenuState = !this.state.showUserMenu
+		this.setState({
+			showUserMenu: newMenuState
+		})
+	}
+
+}
--- a/src/dzeio/Overflow/Overflow.module.styl
+++ b/src/dzeio/Overflow/Overflow.module.styl
@ -0,0 +1,6 @@
+$height = 45px
+
+.top
+	height $height
+.bottom
+	margin-top - $height
--- a/src/dzeio/Overflow/index.tsx
+++ b/src/dzeio/Overflow/index.tsx
@ -0,0 +1,20 @@
+import React from 'react'
+
+import { buildClassName } from '../Util'
+import css from './Overflow.module.styl'
+
+interface Props {
+	bottom?: boolean
+	top?: boolean
+}
+
+export default class Overflow extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName(
+			[css.bottom, this.props.bottom],
+			[css.top, this.props.top]
+		)}></div>
+	)
+
+}
--- a/src/dzeio/Popup/Popup.module.styl
+++ b/src/dzeio/Popup/Popup.module.styl
@ -0,0 +1,14 @@
+.popup
+	position fixed
+	height 100%
+	width 100%
+	top 0
+	left 0
+	background rgba(black, .3)
+	cursor pointer
+
+.popupChild
+	cursor initial
+
+.exit
+	cursor pointer
--- a/src/dzeio/Popup/index.tsx
+++ b/src/dzeio/Popup/index.tsx
@ -0,0 +1,36 @@
+import React from 'react'
+import { X } from 'react-feather'
+import { BoxWrapper, BoxHeader, BoxBody } from '../Box'
+import { Props as HeaderProps } from '../Box/BoxHeader'
+import Row from '../Row'
+
+import css from './Popup.module.styl'
+
+interface Props {
+	children: React.ReactNode
+	onClose?: () => void
+	header?: HeaderProps
+}
+
+export default class Popup extends React.Component<Props> {
+
+	public render = () => (
+		<Row onClick={this.parentClose} justify="center" align="center" className={css.popup}>
+			<BoxWrapper className={css.popupChild}>
+				<BoxHeader {...this.props.header}>
+					<X onClick={this.props.onClose} className={css.exit} />
+				</BoxHeader>
+				<BoxBody>
+					{this.props.children}
+				</BoxBody>
+			</BoxWrapper>
+		</Row>
+	)
+
+	private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
+		if ((ev.target as HTMLElement).classList.contains(css.popup) && this.props.onClose) {
+			this.props.onClose()
+		}
+	}
+
+}
--- a/src/dzeio/Row/Row.module.styl
+++ b/src/dzeio/Row/Row.module.styl
@ -0,0 +1,36 @@
+@import "../config"
+
+.row
+	display flex
+	flex-wrap wrap
+
+	&:not(.nomargin)
+		margin (0 - $gapSize) 0 0
+		padding 0 $gapSize * 2 0 $gapSize
+
+		.row:not(.nomargin)
+			padding 0
+			margin (0 - $gapSize) 0 0 (0 - $gapSize)
+
+.nowrap
+	flex-wrap nowrap
+
+.nogrow > *
+	flex-grow 0
+
+for dir in 'row-reverse' 'column' 'column-reverse'
+	.direction-{dir}
+		flex-direction unquote(dir)
+
+@media (max-width $mobile)
+	for dir in 'row-reverse' 'column' 'column-reverse'
+		.direction-mobile-{dir}
+			flex-direction unquote(dir)
+
+for just in 'flex-start' 'center' 'flex-end' 'space-between' 'space-around' 'space-evenly'
+	.justify-{just}
+		justify-content unquote(just)
+
+for align in 'flex-start' 'center' 'flex-end' 'baseline'
+	.align-{align}
+		align-items unquote(align)
--- a/src/dzeio/Row/index.tsx
+++ b/src/dzeio/Row/index.tsx
@ -0,0 +1,40 @@
+import React from 'react'
+
+import { buildClassName } from '../Util'
+import css from './Row.module.styl'
+
+interface Props {
+	children?: React.ReactNode
+	direction?: 'row-reverse' | 'column' | 'column-reverse'
+	mobileDirection?: 'row-reverse' | 'column' | 'column-reverse'
+	justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+	align?: 'flex-start' | 'center' | 'flex-end' | 'baseline'
+	nowrap?: boolean
+	nogrow?: boolean
+	className?: string
+	nomargin?: boolean
+	onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+}
+
+export default class Row extends React.Component<Props> {
+
+	public render = () => (
+		<div
+			className={buildClassName(
+				css.row,
+				[css[`direction-${this.props.direction}`], this.props.direction],
+				[css[`direction-mobile-${this.props.mobileDirection}`], this.props.mobileDirection],
+				[css[`justify-${this.props.justify}`], this.props.justify],
+				[css[`align-${this.props.align}`], this.props.align],
+				[css.nowrap, this.props.nowrap],
+				[css.nogrow, this.props.nogrow],
+				this.props.className,
+				[css.nomargin, this.props.nomargin]
+			)}
+			onClick={this.props.onClick}
+		>
+			{this.props.children}
+		</div>
+	)
+
+}
--- a/src/dzeio/SidebarContainer/SidebarContainer.module.styl
+++ b/src/dzeio/SidebarContainer/SidebarContainer.module.styl
@ -0,0 +1,32 @@
+@import "../config.styl"
+
+.sidebar
+	position fixed
+	width 200px
+	top 0
+	left 0
+	height 100%
+	background white
+	padding 16px
+
+.content
+	padding-left 200px
+
+.item
+	display flex
+	padding 8px 16px
+	margin-top 8px
+	transition $transition
+	border-radius 8px
+
+	svg
+		margin-right 8px
+
+	div
+		text-align center
+		flex-grow 1
+		margin-left -32px
+
+	&:hover
+		background $default
+		color white
--- a/src/dzeio/SidebarContainer/index.tsx
+++ b/src/dzeio/SidebarContainer/index.tsx
@ -0,0 +1,45 @@
+import React, { FC } from 'react'
+
+import { ChevronLeft, TrendingUp } from 'react-feather'
+import Link from 'next/link'
+import Image from '../Image'
+
+import { IconProps } from '../interfaces'
+import css from './SidebarContainer.module.styl'
+
+interface Props {
+	domain: string
+	children: React.ReactNode
+}
+
+export default class SidebarContainer extends React.Component<Props> {
+
+	private menu: Array<{name: string, icon: FC<IconProps>, href: string, as?: string}> = [
+		{ name: 'back', icon: ChevronLeft, href: '/dashboard' },
+		{ name: 'Uptime', icon: TrendingUp, as: `/dashboard/${this.props.domain}/uptime`, href: '/dashboard/[domain]/uptime' }
+
+	]
+	public render = () => (
+		<>
+			<nav className={css.sidebar}>
+				<Link href="/dashboard">
+					<a>
+						<Image src="/assets/logo.svg" max={{ width: '100%' }} />
+					</a>
+				</Link>
+				{this.menu.map((item, index) => (
+					<Link key={index} href={item.href} as={item.as}>
+						<a className={css.item}>
+							<item.icon />
+							<div>{item.name}</div>
+						</a>
+					</Link>
+				))}
+			</nav>
+			<div className={css.content}>
+				{this.props.children}
+			</div>
+		</>
+	)
+
+}
--- a/src/dzeio/Table/Table.module.styl
+++ b/src/dzeio/Table/Table.module.styl
@ -0,0 +1,13 @@
+.table
+	border-spacing 0
+	border 2px solid #EEE
+	border-radius 4px
+	width 100%
+
+	td
+		border-top 1px solid #EEE
+
+	th
+	td
+		padding 8px
+		text-align left
--- a/src/dzeio/Table/index.tsx
+++ b/src/dzeio/Table/index.tsx
@ -0,0 +1,15 @@
+import React from 'react'
+
+import css from './Table.module.styl'
+
+interface Props {
+	children: React.ReactNode
+}
+
+export default class Table extends React.Component<Props> {
+
+	public render = () => (
+		<table className={css.table}>{this.props.children}</table>
+	)
+
+}
--- a/src/dzeio/Text/Text.module.styl
+++ b/src/dzeio/Text/Text.module.styl
@ -0,0 +1,21 @@
+.text
+	margin 0
+
+.white
+	color white
+
+.black
+	color #212121
+
+.align-center
+	text-align center
+
+.align-right
+	text-align right
+
+
+@media (prefers-color-scheme dark)
+	.white:not(.noDarkTheme)
+		color #212121
+	.black:not(.noDarkTheme)
+		color white
--- a/src/dzeio/Text/index.tsx
+++ b/src/dzeio/Text/index.tsx
@ -0,0 +1,37 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+import css from './Text.module.styl'
+interface Props {
+	color?: 'black' | 'white'
+	type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em'
+	className?: string
+	noDarkTheme?: boolean
+	align?: 'right' | 'center'
+	children: React.ReactNode
+}
+
+export default class Text extends React.Component<Props> {
+
+
+	public render() {
+		const classes = buildClassName(
+			css.text,
+			[css.white, this.props.color === 'white'],
+			[css.black, this.props.color === 'black' || !this.props.color],
+			[css.noDarkTheme, this.props.noDarkTheme],
+			[css[`align-${this.props.align}`], this.props.align],
+			this.props.className
+		)
+
+		switch (this.props.type || 'p') {
+		case 'h1': return (<h1 className={classes}>{this.props.children}</h1>)
+		case 'h2': return (<h2 className={classes}>{this.props.children}</h2>)
+		case 'h3': return (<h3 className={classes}>{this.props.children}</h3>)
+		case 'h4': return (<h4 className={classes}>{this.props.children}</h4>)
+		case 'h5': return (<h5 className={classes}>{this.props.children}</h5>)
+		case 'h6': return (<h6 className={classes}>{this.props.children}</h6>)
+		case 'em': return (<p className={classes}><em>{this.props.children}</em></p>)
+		default: return (<p className={classes}>{this.props.children}</p>)
+		}
+	}
+}
--- a/src/dzeio/Util.js
+++ b/src/dzeio/Util.js
@ -0,0 +1,41 @@
+export function buildClassName() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    var classesFinal = [];
+    root: for (var _a = 0, classes_1 = classes; _a < classes_1.length; _a++) {
+        var classe = classes_1[_a];
+        if (typeof classe === 'undefined') {
+            continue;
+        }
+        if (typeof classe === 'string') {
+            classesFinal.push(classe);
+            continue;
+        }
+        var classToPut = classe.shift();
+        if (typeof classToPut === 'undefined') {
+            continue;
+        }
+        for (var _b = 0, classe_1 = classe; _b < classe_1.length; _b++) {
+            var iterator = classe_1[_b];
+            if (!iterator) {
+                continue root;
+            }
+        }
+        classesFinal.push(classToPut);
+    }
+    if (classesFinal.length === 0) {
+        return undefined;
+    }
+    return classesFinal.join(' ');
+}
+export var colors = {
+    default: '#3949AB',
+    primary: '#3949AB',
+    secondary: '#FCFCFC',
+    info: '#03A9F4',
+    success: '#2DCE89',
+    danger: '#F5365C',
+    warning: '#FB6340'
+};
--- a/src/dzeio/Util.ts
+++ b/src/dzeio/Util.ts
@ -0,0 +1,36 @@
+export function buildClassName(...classes: Array<Array<any> | string | undefined>): string|undefined {
+	const classesFinal: Array<string> = []
+	root: for (const classe of classes) {
+		if (typeof classe === 'undefined') {
+			continue
+		}
+		if (typeof classe === 'string') {
+			classesFinal.push(classe)
+			continue
+		}
+		const classToPut = classe.shift()
+		if (typeof classToPut === 'undefined') {
+			continue
+		}
+		for (const iterator of classe) {
+			if (!iterator) {
+				continue root
+			}
+		}
+		classesFinal.push(classToPut)
+	}
+	if (classesFinal.length === 0) {
+		return undefined
+	}
+	return classesFinal.join(' ')
+}
+
+export const colors = {
+	default: '#3949AB', // This color should never appear
+	primary: '#3949AB',
+	secondary: '#FCFCFC',
+	info: '#03A9F4',
+	success: '#2DCE89',
+	danger: '#F5365C',
+	warning: '#FB6340'
+}
--- a/src/dzeio/_aileron.styl
+++ b/src/dzeio/_aileron.styl
@ -0,0 +1,209 @@
+$path = "/assets/fonts/aileron"
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Regular.eot')
+	src local('Aileron Regular'), local('Aileron-Regular'),
+		url($path + '/Aileron-Regular.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Regular.woff2') format('woff2'),
+		url($path + '/Aileron-Regular.woff') format('woff'),
+		url($path + '/Aileron-Regular.ttf') format('truetype')
+	font-weight normal
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-BoldItalic.eot')
+	src local('Aileron Bold Italic'), local('Aileron-BoldItalic'),
+		url($path + '/Aileron-BoldItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-BoldItalic.woff2') format('woff2'),
+		url($path + '/Aileron-BoldItalic.woff') format('woff'),
+		url($path + '/Aileron-BoldItalic.ttf') format('truetype')
+	font-weight bold
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-HeavyItalic.eot')
+	src local('Aileron Heavy Italic'), local('Aileron-HeavyItalic'),
+		url($path + '/Aileron-HeavyItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-HeavyItalic.woff2') format('woff2'),
+		url($path + '/Aileron-HeavyItalic.woff') format('woff'),
+		url($path + '/Aileron-HeavyItalic.ttf') format('truetype')
+	font-weight 900
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-BlackItalic.eot')
+	src local('Aileron Black Italic'), local('Aileron-BlackItalic'),
+		url($path + '/Aileron-BlackItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-BlackItalic.woff2') format('woff2'),
+		url($path + '/Aileron-BlackItalic.woff') format('woff'),
+		url($path + '/Aileron-BlackItalic.ttf') format('truetype')
+	font-weight 900
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-UltraLightItalic.eot')
+	src local('Aileron UltraLight Italic'), local('Aileron-UltraLightItalic'),
+		url($path + '/Aileron-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-UltraLightItalic.woff2') format('woff2'),
+		url($path + '/Aileron-UltraLightItalic.woff') format('woff'),
+		url($path + '/Aileron-UltraLightItalic.ttf') format('truetype')
+	font-weight 200
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Bold.eot')
+	src local('Aileron Bold'), local('Aileron-Bold'),
+		url($path + '/Aileron-Bold.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Bold.woff2') format('woff2'),
+		url($path + '/Aileron-Bold.woff') format('woff'),
+		url($path + '/Aileron-Bold.ttf') format('truetype')
+	font-weight bold
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Black.eot')
+	src local('Aileron Black'), local('Aileron-Black'),
+		url($path + '/Aileron-Black.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Black.woff2') format('woff2'),
+		url($path + '/Aileron-Black.woff') format('woff'),
+		url($path + '/Aileron-Black.ttf') format('truetype')
+	font-weight 900
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-LightItalic.eot')
+	src local('Aileron Light Italic'), local('Aileron-LightItalic'),
+		url($path + '/Aileron-LightItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-LightItalic.woff2') format('woff2'),
+		url($path + '/Aileron-LightItalic.woff') format('woff'),
+		url($path + '/Aileron-LightItalic.ttf') format('truetype')
+	font-weight 300
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-SemiBold.eot')
+	src local('Aileron SemiBold'), local('Aileron-SemiBold'),
+		url($path + '/Aileron-SemiBold.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-SemiBold.woff2') format('woff2'),
+		url($path + '/Aileron-SemiBold.woff') format('woff'),
+		url($path + '/Aileron-SemiBold.ttf') format('truetype')
+	font-weight 600
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Thin.eot')
+	src local('Aileron Thin'), local('Aileron-Thin'),
+		url($path + '/Aileron-Thin.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Thin.woff2') format('woff2'),
+		url($path + '/Aileron-Thin.woff') format('woff'),
+		url($path + '/Aileron-Thin.ttf') format('truetype')
+	font-weight 100
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-SemiBoldItalic.eot')
+	src local('Aileron SemiBold Italic'), local('Aileron-SemiBoldItalic'),
+		url($path + '/Aileron-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-SemiBoldItalic.woff2') format('woff2'),
+		url($path + '/Aileron-SemiBoldItalic.woff') format('woff'),
+		url($path + '/Aileron-SemiBoldItalic.ttf') format('truetype')
+	font-weight 600
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-ThinItalic.eot')
+	src local('Aileron Thin Italic'), local('Aileron-ThinItalic'),
+		url($path + '/Aileron-ThinItalic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-ThinItalic.woff2') format('woff2'),
+		url($path + '/Aileron-ThinItalic.woff') format('woff'),
+		url($path + '/Aileron-ThinItalic.ttf') format('truetype')
+	font-weight 100
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Light.eot')
+	src local('Aileron Light'), local('Aileron-Light'),
+		url($path + '/Aileron-Light.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Light.woff2') format('woff2'),
+		url($path + '/Aileron-Light.woff') format('woff'),
+		url($path + '/Aileron-Light.ttf') format('truetype')
+	font-weight 300
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-UltraLight.eot')
+	src local('Aileron UltraLight'), local('Aileron-UltraLight'),
+		url($path + '/Aileron-UltraLight.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-UltraLight.woff2') format('woff2'),
+		url($path + '/Aileron-UltraLight.woff') format('woff'),
+		url($path + '/Aileron-UltraLight.ttf') format('truetype')
+	font-weight 200
+	font-style normal
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Italic.eot')
+	src local('Aileron Italic'), local('Aileron-Italic'),
+		url($path + '/Aileron-Italic.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Italic.woff2') format('woff2'),
+		url($path + '/Aileron-Italic.woff') format('woff'),
+		url($path + '/Aileron-Italic.ttf') format('truetype')
+	font-weight normal
+	font-style italic
+	unicode-range U+0000-01FF
+
+@font-face
+	font-display swap
+	font-family 'Aileron'
+	src url($path + '/Aileron-Heavy.eot')
+	src local('Aileron Heavy'), local('Aileron-Heavy'),
+		url($path + '/Aileron-Heavy.eot?#iefix') format('embedded-opentype'),
+		url($path + '/Aileron-Heavy.woff2') format('woff2'),
+		url($path + '/Aileron-Heavy.woff') format('woff'),
+		url($path + '/Aileron-Heavy.ttf') format('truetype')
+	font-weight 900
+	font-style normal
+	unicode-range U+0000-01FF
--- a/src/dzeio/config.styl
+++ b/src/dzeio/config.styl
@ -0,0 +1,28 @@
+$default = #4285f4 // This color should never appear
+$primary = #4285f4
+$secondary = #FCFCFC
+$info = #03A9F4
+$success = #2DCE89
+$danger = #F5365C
+$warning = #FB6340
+
+$transitionTime = .15s
+$transitionFunction = ease-in-out
+$transition = $transitionTime $transitionFunction
+
+$darkBackground = #161616
+
+// Breakpoints
+$mobile = 768px
+$tablet = 1200px
+
+// Row/Col
+$totalGapSize = 10%
+$colCount = 12
+$colCountTablet = 8
+$colCountMobile = 4
+
+$gapSize = 16px //$totalGapSize / ($colCount+1)
+
+rem($a)
+	($a / 16)rem
--- a/src/dzeio/general.styl
+++ b/src/dzeio/general.styl
@ -0,0 +1,23 @@
+@import "_aileron"
+
+*
+*::before
+*::after
+	box-sizing border-box
+
+html
+	font-family Aileron, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+
+html
+body
+body > div[id="__next"]
+	margin 0
+	min-height 100vh
+	background #f5f5f5
+
+	@media (prefers-color-scheme dark)
+		background #202020
+
+a
+	color inherit
+	text-decoration none
--- a/src/dzeio/interfaces.js
+++ b/src/dzeio/interfaces.js
@ -0,0 +1 @@
+export {};
--- a/src/dzeio/interfaces.ts
+++ b/src/dzeio/interfaces.ts
@ -0,0 +1,8 @@
+import { SVGAttributes } from 'react'
+
+export type ColorType = 'primary' | 'secondary' | 'info' | 'success' | 'danger' | 'warning'
+
+export interface IconProps extends SVGAttributes<SVGElement> {
+	color?: string
+	size?: string | number
+}
--- a/src/dzeio/util.styl
+++ b/src/dzeio/util.styl
@ -0,0 +1,11 @@
+.fullscrean
+	min-height 100vh
+
+.fullHeight
+	height 50vh
+
+
+
+// Utils for Width
+.w50p
+	width 50%
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,52 @@
+import Box, { BoxBody, BoxHeader, BoxWrapper } from './dzeio/Box'
+import Button from './dzeio/Button'
+import Checkbox from './dzeio/Checkbox'
+import Code from './dzeio/Code'
+import Col from './dzeio/Col'
+import Container from './dzeio/Container'
+import Fieldset from './dzeio/Fieldset'
+import Footer from './dzeio/Footer'
+import GradientBackground from './dzeio/GradientBackground'
+import Input from './dzeio/Input'
+import Image from './dzeio/Image'
+import Link from './dzeio/Link'
+import Menu from './dzeio/Menu'
+import Navbar from './dzeio/Navbar'
+import NavbarSpace from './dzeio/Navbar/NavbarSpace'
+import Overflow from './dzeio/Overflow'
+import Popup from './dzeio/Popup'
+import Row from './dzeio/Row'
+import SidebarContainer from './dzeio/SidebarContainer'
+import Table from './dzeio/Table'
+import Text from './dzeio/Text'
+import * as Util from './dzeio/Util'
+
+import './dzeio/general.styl'
+
+export {
+	Box,
+	BoxBody,
+	BoxHeader,
+	BoxWrapper,
+	Button,
+	Checkbox,
+	Code,
+	Col,
+	Container,
+	Fieldset,
+	Footer,
+	GradientBackground,
+	Image,
+	Input,
+	Link,
+	Menu,
+	Navbar,
+	NavbarSpace,
+	Overflow,
+	Popup,
+	Row,
+	SidebarContainer,
+	Table,
+	Text,
+	Util
+}
--- a/src/stylus.d.ts
+++ b/src/stylus.d.ts
@ -0,0 +1,4 @@
+declare module '*.styl' {
+	const content: any
+	export = content
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,69 @@
+{
+	"compilerOptions": {
+		/* Basic Options */
+		"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+		"module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+		// "lib": [],                             /* Specify library files to be included in the compilation. */
+		// "allowJs": true,                       /* Allow javascript files to be compiled. */
+		// "checkJs": true,                       /* Report errors in .js files. */
+		"jsx": "react",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+		"declaration": true,                   /* Generates corresponding '.d.ts' file. */
+		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
+		// "outFile": "./",                       /* Concatenate and emit output to single file. */
+		"declarationDir": "types",
+		// "outDir": "./dist",                        /* Redirect output structure to the directory. */
+		// "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+		// "composite": true,                     /* Enable project compilation */
+		// "removeComments": true,                /* Do not emit comments to output. */
+		// "noEmit": true,                        /* Do not emit outputs. */
+		// "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+		// "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+		// "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+		/* Strict Type-Checking Options */
+		"strict": true,                           /* Enable all strict type-checking options. */
+		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,              /* Enable strict null checks. */
+		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+		/* Additional Checks */
+		// "noUnusedLocals": true,                /* Report errors on unused locals. */
+		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
+		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+		/* Module Resolution Options */
+		"moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+		// "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+		// "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                       /* List of folders to include type definitions from. */
+		// "types": [],                           /* Type declaration files to be included in compilation. */
+		// "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+		"esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		// "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+	},
+	"include": [
+		"src/**/*",
+		"src/stylus.d.ts",
+	],
+	"exclude": [
+		"node_modules",
+		"build"
+	]
+}
--- a/types/dzeio/Box/BoxBody/index.d.ts
+++ b/types/dzeio/Box/BoxBody/index.d.ts
@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    noPadding?: boolean;
+}
+export default class BoxBody extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Box/BoxHeader/index.d.ts
+++ b/types/dzeio/Box/BoxHeader/index.d.ts
@ -0,0 +1,11 @@
+import React from 'react';
+export interface Props {
+    title?: string;
+    titleColSize?: number;
+    subtitle?: string;
+    delimiter?: boolean;
+    titleClassName?: string;
+}
+export default class BoxHeader extends React.Component<Props> {
+    render: () => JSX.Element;
+}
--- a/types/dzeio/Box/BoxWrapper/index.d.ts
+++ b/types/dzeio/Box/BoxWrapper/index.d.ts
@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    outline?: boolean;
+    className?: string;
+}
+export default class BoxWrapper extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Box/index.d.ts
+++ b/types/dzeio/Box/index.d.ts
@ -0,0 +1,19 @@
+import React from 'react';
+import BoxWrapper from './BoxWrapper';
+import BoxHeader from './BoxHeader';
+import BoxBody from './BoxBody';
+interface Props {
+    outline?: boolean;
+    className?: string;
+    title?: string;
+    titleColSize?: number;
+    subtitle?: string;
+    delimiter?: boolean;
+    titleClassName?: string;
+    headerButtons?: React.ReactNode;
+    noPadding?: boolean;
+}
+export default class Box extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export { BoxWrapper, BoxHeader, BoxBody };
--- a/types/dzeio/Button/Button.stories.d.ts
+++ b/types/dzeio/Button/Button.stories.d.ts
@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Basic: (args: any) => JSX.Element;
--- a/types/dzeio/Button/index.d.ts
+++ b/types/dzeio/Button/index.d.ts
@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { ColorType, IconProps } from '../interfaces';
+interface Props {
+    outline?: boolean;
+    nomargintop?: boolean;
+    color?: ColorType;
+    children?: React.ReactNode;
+    icon?: FC<IconProps> | string;
+    size?: 'large' | 'small' | 'block';
+    href?: string;
+    as?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
+}
+export default class Button extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Checkbox/Checkbox.stories.d.ts
+++ b/types/dzeio/Checkbox/Checkbox.stories.d.ts
@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Basic: (args: any) => JSX.Element;
--- a/types/dzeio/Checkbox/index.d.ts
+++ b/types/dzeio/Checkbox/index.d.ts
@ -0,0 +1,14 @@
+import React from 'react';
+import { ColorType } from '../interfaces';
+interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    label?: string;
+    id: string;
+    type?: undefined;
+    radio?: boolean;
+    switch?: boolean;
+    color?: ColorType;
+}
+export default class Checkbox extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export {};
--- a/types/dzeio/Code/Code.stories.d.ts
+++ b/types/dzeio/Code/Code.stories.d.ts
@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Basic: (args: any) => JSX.Element;
--- a/types/dzeio/Code/index.d.ts
+++ b/types/dzeio/Code/index.d.ts
@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    block?: boolean;
+}
+export default class Code extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Col/DebugCols.d.ts
+++ b/types/dzeio/Col/DebugCols.d.ts
@ -0,0 +1,17 @@
+import React from 'react';
+declare enum Breakpoint {
+    MOBILE = 0,
+    TABLET = 1,
+    COMPUT = 2
+}
+interface States {
+    breakpoint: Breakpoint;
+}
+export default class DebugCols extends React.Component<unknown, States> {
+    state: States;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render: () => JSX.Element;
+    private onResize;
+}
+export {};
--- a/types/dzeio/Col/index.d.ts
+++ b/types/dzeio/Col/index.d.ts
@ -0,0 +1,18 @@
+import React from 'react';
+interface Props {
+    size?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    offset?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+    children?: React.ReactNode;
+    className?: string;
+    nogrow?: boolean;
+    tabletSize?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    tabletoffset?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    tabletGrow?: boolean;
+    mobileSize?: 0 | 1 | 2 | 3 | 4;
+    mobileoffset?: 1 | 2 | 3;
+    mobileGrow?: boolean;
+}
+export default class Col extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Container/index.d.ts
+++ b/types/dzeio/Container/index.d.ts
@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+export default class Container extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Fieldset/index.d.ts
+++ b/types/dzeio/Fieldset/index.d.ts
@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    title?: string;
+    children?: React.ReactNode;
+}
+export default class Fieldset extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Footer/index.d.ts
+++ b/types/dzeio/Footer/index.d.ts
@ -0,0 +1,4 @@
+import React from 'react';
+export default class Footer extends React.Component {
+    render: () => JSX.Element;
+}
--- a/types/dzeio/GradientBackground/index.d.ts
+++ b/types/dzeio/GradientBackground/index.d.ts
@ -0,0 +1,11 @@
+import React from 'react';
+import { ColorType } from '../interfaces';
+interface Props {
+    color?: ColorType;
+    className?: string;
+    children: React.ReactNode;
+}
+export default class GradientBackground extends React.Component<Props> {
+    render: () => JSX.Element;
+}
+export {};
--- a/types/dzeio/Image/index.d.ts
+++ b/types/dzeio/Image/index.d.ts
@ -0,0 +1,43 @@
+import React from 'react';
+export interface ImageProps {
+    defaultHeight?: number;
+    src?: string;
+    sources?: Array<string>;
+    deleteOnError?: boolean;
+    downgradeOnError?: string;
+    canFullscreen?: boolean;
+    max?: {
+        height?: number | string;
+        width?: number | string;
+    };
+    width?: number | string;
+    default?: {
+        height?: number | string;
+        width?: number | string;
+    };
+    alt?: string;
+    classes?: string;
+    className?: string;
+    onClick?: () => void;
+}
+export default class Image extends React.Component<ImageProps> {
+    private ref;
+    private plchldr;
+    private parent;
+    private pic;
+    private wasDowngraded;
+    private cardPos;
+    private cardSize;
+    private isFullscreen;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(): Promise<void>;
+    componentWillUnmount(): Promise<void>;
+    render(): JSX.Element;
+    private onScroll;
+    private onResize;
+    private onClick;
+    private valToPixel;
+    private onLoad;
+    private onError;
+    private w;
+}
--- a/types/dzeio/Input/Input.stories.d.ts
+++ b/types/dzeio/Input/Input.stories.d.ts
@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Basic: (args: any) => JSX.Element;
--- a/Show More
+++ b/Show More