Update to v1-alpha

Signed-off-by: Avior <github@avior.me>

.gitattributes

@@ -1 +1,4 @@
-* text=lf
+* text=auto eol=lf
+*.png binary
+*.jpg binary
+*.jpeg binary

package-lock.json

@@ -27,23 +27,23 @@
 				"@types/react-dom": "^17.0.1",
 				"babel-loader": "^8.2.2",
 				"css-loader": "^5.0.2",
-				"lucide-react": "^0.15.19",
+				"lucide-react": "^0.16.0",
 				"next": "^10.0.0",
 				"react": "^16.0.0",
 				"react-dom": "^16.0.0",
 				"style-loader": "^2.0.0",
-				"stylus": "^0.54.8",
+				"stylus": "^0.55.0",
 				"stylus-loader": "^4.3.3",
 				"ts-loader": "^8.0.17",
 				"typescript": "^4.2.3",
 				"webpack": "^4.44.2"
 			},
 			"peerDependencies": {
-				"lucide-react": "^0.15.19",
+				"lucide-react": "^0.16.0",
 				"next": "^10.0.0 || ^11.0.0",
 				"react": "^16.0.0 || ^17.0.0",
 				"react-dom": "^16.0.0 || ^17.0.0",
-				"stylus": "^0.54.8",
+				"stylus": "^0.55.0",
 				"typescript": "^4.0.0"
 			}
 		},
@@ -5170,9 +5170,9 @@
 			}
 		},
 		"node_modules/@types/json-schema": {
-			"version": "7.0.7",
+			"version": "7.0.9",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-			"integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+			"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
 			"dev": true
 		},
 		"node_modules/@types/markdown-to-jsx": {
@@ -5443,12 +5443,6 @@
 				"@webassemblyjs/wast-parser": "1.9.0"
 			}
 		},
-		"node_modules/@webassemblyjs/floating-point-hex-parser": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-			"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
-			"dev": true
-		},
 		"node_modules/@webassemblyjs/helper-api-error": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
@@ -5596,6 +5590,12 @@
 				"@xtuc/long": "4.2.2"
 			}
 		},
+		"node_modules/@webassemblyjs/wast-parser/node_modules/@webassemblyjs/floating-point-hex-parser": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+			"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+			"dev": true
+		},
 		"node_modules/@webassemblyjs/wast-printer": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
@@ -8531,15 +8531,14 @@
 			}
 		},
 		"node_modules/css": {
-			"version": "2.2.4",
+			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+			"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-			"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+			"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
 			"dev": true,
 			"dependencies": {
-				"inherits": "^2.0.3",
+				"inherits": "^2.0.4",
 				"source-map": "^0.6.1",
-				"source-map-resolve": "^0.5.2",
+				"source-map-resolve": "^0.6.0"
-				"urix": "^0.1.0"
 			}
 		},
 		"node_modules/css-color-names": {
@@ -8641,15 +8640,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/css-parse": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
-			"integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
-			"dev": true,
-			"dependencies": {
-				"css": "^2.0.0"
-			}
-		},
 		"node_modules/css-select": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
@@ -8718,6 +8708,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/css/node_modules/source-map-resolve": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+			"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+			"dev": true,
+			"dependencies": {
+				"atob": "^2.1.2",
+				"decode-uri-component": "^0.2.0"
+			}
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -13690,13 +13690,13 @@
 			}
 		},
 		"node_modules/lucide-react": {
-			"version": "0.15.25",
+			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.15.25.tgz",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz",
-			"integrity": "sha512-GR8NmrjVldj6OL5p1ediGMFqXP3fq72haUlWzjgeoDGom2gvbhro8DDhmtRJ2kWV/wUIAfskdgTpsdyXpvO4dg==",
+			"integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==",
 			"dev": true,
 			"peerDependencies": {
 				"prop-types": "^15.7.2",
-				"react": "^16.5.1"
+				"react": "^16.5.1 || ^17.0.0"
 			}
 		},
 		"node_modules/make-dir": {
@@ -14224,9 +14224,9 @@
 			"dev": true
 		},
 		"node_modules/nan": {
-			"version": "2.14.2",
+			"version": "2.15.0",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
-			"integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+			"integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
 			"dev": true,
 			"optional": true
 		},
@@ -19112,9 +19112,9 @@
 			}
 		},
 		"node_modules/source-map-support": {
-			"version": "0.5.19",
+			"version": "0.5.20",
-			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
-			"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+			"integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
 			"dev": true,
 			"dependencies": {
 				"buffer-from": "^1.0.0",
@@ -19810,12 +19810,12 @@
 			}
 		},
 		"node_modules/stylus": {
-			"version": "0.54.8",
+			"version": "0.55.0",
-			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz",
+			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz",
-			"integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==",
+			"integrity": "sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==",
 			"dev": true,
 			"dependencies": {
-				"css-parse": "~2.0.0",
+				"css": "^3.0.0",
 				"debug": "~3.1.0",
 				"glob": "^7.1.6",
 				"mkdirp": "~1.0.4",
@@ -19856,12 +19856,12 @@
 			}
 		},
 		"node_modules/stylus-loader/node_modules/schema-utils": {
-			"version": "3.0.0",
+			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-			"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+			"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
 			"dev": true,
 			"dependencies": {
-				"@types/json-schema": "^7.0.6",
+				"@types/json-schema": "^7.0.8",
 				"ajv": "^6.12.5",
 				"ajv-keywords": "^3.5.2"
 			},
@@ -26510,9 +26510,9 @@
 			}
 		},
 		"@types/json-schema": {
-			"version": "7.0.7",
+			"version": "7.0.9",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-			"integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+			"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
 			"dev": true
 		},
 		"@types/markdown-to-jsx": {
@@ -26782,12 +26782,6 @@
 				"@webassemblyjs/wast-parser": "1.9.0"
 			}
 		},
-		"@webassemblyjs/floating-point-hex-parser": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-			"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
-			"dev": true
-		},
 		"@webassemblyjs/helper-api-error": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
@@ -26933,6 +26927,14 @@
 				"@webassemblyjs/helper-code-frame": "1.9.0",
 				"@webassemblyjs/helper-fsm": "1.9.0",
 				"@xtuc/long": "4.2.2"
+			},
+			"dependencies": {
+				"@webassemblyjs/floating-point-hex-parser": {
+					"version": "1.9.0",
+					"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+					"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+					"dev": true
+				}
 			}
 		},
 		"@webassemblyjs/wast-printer": {
@@ -29301,15 +29303,14 @@
 			"dev": true
 		},
 		"css": {
-			"version": "2.2.4",
+			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+			"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-			"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+			"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
 			"dev": true,
 			"requires": {
-				"inherits": "^2.0.3",
+				"inherits": "^2.0.4",
 				"source-map": "^0.6.1",
-				"source-map-resolve": "^0.5.2",
+				"source-map-resolve": "^0.6.0"
-				"urix": "^0.1.0"
 			},
 			"dependencies": {
 				"source-map": {
@@ -29317,6 +29318,16 @@
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 					"dev": true
+				},
+				"source-map-resolve": {
+					"version": "0.6.0",
+					"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+					"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+					"dev": true,
+					"requires": {
+						"atob": "^2.1.2",
+						"decode-uri-component": "^0.2.0"
+					}
 				}
 			}
 		},
@@ -29385,15 +29396,6 @@
 				}
 			}
 		},
-		"css-parse": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
-			"integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
-			"dev": true,
-			"requires": {
-				"css": "^2.0.0"
-			}
-		},
 		"css-select": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
@@ -33358,9 +33360,9 @@
 			}
 		},
 		"lucide-react": {
-			"version": "0.15.25",
+			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.15.25.tgz",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz",
-			"integrity": "sha512-GR8NmrjVldj6OL5p1ediGMFqXP3fq72haUlWzjgeoDGom2gvbhro8DDhmtRJ2kWV/wUIAfskdgTpsdyXpvO4dg==",
+			"integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==",
 			"dev": true,
 			"requires": {}
 		},
@@ -33791,9 +33793,9 @@
 			"dev": true
 		},
 		"nan": {
-			"version": "2.14.2",
+			"version": "2.15.0",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
-			"integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+			"integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
 			"dev": true,
 			"optional": true
 		},
@@ -37700,9 +37702,9 @@
 			}
 		},
 		"source-map-support": {
-			"version": "0.5.19",
+			"version": "0.5.20",
-			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
-			"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+			"integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
 			"dev": true,
 			"requires": {
 				"buffer-from": "^1.0.0",
@@ -38267,12 +38269,12 @@
 			"requires": {}
 		},
 		"stylus": {
-			"version": "0.54.8",
+			"version": "0.55.0",
-			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz",
+			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz",
-			"integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==",
+			"integrity": "sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==",
 			"dev": true,
 			"requires": {
-				"css-parse": "~2.0.0",
+				"css": "^3.0.0",
 				"debug": "~3.1.0",
 				"glob": "^7.1.6",
 				"mkdirp": "~1.0.4",
@@ -38325,12 +38327,12 @@
 			},
 			"dependencies": {
 				"schema-utils": {
-					"version": "3.0.0",
+					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
 					"dev": true,
 					"requires": {
-						"@types/json-schema": "^7.0.6",
+						"@types/json-schema": "^7.0.8",
 						"ajv": "^6.12.5",
 						"ajv-keywords": "^3.5.2"
 					}

package.json

@@ -16,23 +16,23 @@
 		"@types/react-dom": "^17.0.1",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.2",
-		"lucide-react": "^0.15.19",
+		"lucide-react": "^0.16.0",
 		"next": "^10.0.0",
 		"react": "^16.0.0",
 		"react-dom": "^16.0.0",
 		"style-loader": "^2.0.0",
-		"stylus": "^0.54.8",
+		"stylus": "^0.55.0",
 		"stylus-loader": "^4.3.3",
 		"ts-loader": "^8.0.17",
 		"typescript": "^4.2.3",
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
-		"lucide-react": "^0.15.19",
+		"lucide-react": "^0.16.0",
 		"next": "^10.0.0 || ^11.0.0",
 		"react": "^16.0.0 || ^17.0.0",
 		"react-dom": "^16.0.0 || ^17.0.0",
-		"stylus": "^0.54.8",
+		"stylus": "^0.55.0",
 		"typescript": "^4.0.0"
 	},
 	"scripts": {

src/dzeio/Box/Box.module.styl

@@ -4,13 +4,7 @@
 	background $foregroundLight
 	@media (prefers-color-scheme dark)
 		background $foregroundDark
-	border-radius 8px
+	border-radius 16px
-
-.outline
-	border 2px solid $grayDark
-	@media (prefers-color-scheme dark)
-		border-color $grayLight
-
 
 .header
 	padding 16px
@@ -19,15 +13,19 @@
 		padding-top 0
 
 .title
-	font-weight bold
+	font-weight 700
-	font-size rem(18)
-	margin 0 0 8px
-
-.subtitle
 	font-size rem(16)
-	margin 0
+	display inline-flex
-
 
 // BODY
 .body
 	padding 16px
+
+.icon
+	padding 2px
+	width 24px
+	height 24px
+	display inline-block
+	background $main
+	border-radius 4px
+	margin-right 8px

src/dzeio/Box/Box.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Text from '../Text'
+import { Lightbulb } from 'lucide-react'
+
+export default {
+	title: 'DZEIO/Box',
+	component: Component,
+	parameters: {
+		layout: 'fullscreen'
+	}
+} as Meta
+
+export const Basic = (args: any) => (
+	<Component {...args}><Text>Test</Text></Component>
+)
+
+export const Complete = (args: any) => (
+	<Component
+		title="Test"
+		icon={Lightbulb}
+		rightHeader={<Text>Test</Text>}
+		// {...args}
+	><Text>Test</Text></Component>
+)

src/dzeio/Box/index.tsx

@@ -6,56 +6,40 @@ import css from './Box.module.styl'
 import Row from '../Row'
 import Col from '../Col'
 import Text from '../Text'
+import { Icon } from 'lucide-react'
+import { ColorType } from '../interfaces'
 
-interface Props {
+interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-
+	noPadding?: boolean
-	// Wrapper
-	wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
-	outline?: boolean
-	/**
-	 * @deprecated use wrapperProps.onClick
-	 */
-	onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
-	className?: string
 
 	// Header
 	title?: string
-	titleColSize?: number
+	icon?: Icon
-	subtitle?: string
+	rightHeader?: React.ReactNode
-	delimiter?: boolean
-	titleClassName?: string
-
-	headerButtons?: React.ReactNode
-
-	// Body
-	noPadding?: boolean
 }
 
 export default class Box extends React.Component<Props> {
 	public render = () => (
 		<div
-			{...this.props.wrapperProps}
+			{...this.props}
-			onClick={this.props.onClick}
+			className={buildClassName(css.box, this.props?.className)}
-			className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
 		>
-			{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
+			{(this.props.rightHeader || this.props.title || this.props.icon) && (
-				<div className={buildClassName(
+				<div className={css.header}>
-					css.header
-				)}>
 					<Row nomargin justify="space-between">
 						<Col>
-							{this.props.title && (
+							<Text className={css.title}>
-								<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
+								{this.props.icon && (
-							)}
+									<span className={css.icon}>
-							{this.props.subtitle && (
+										<this.props.icon strokeWidth="2" fontWeight="800" size="20" color="white" />
-								<Text className={css.subtitle}>{this.props.subtitle}</Text>
+									</span>
-							)}
+								)}
+								{this.props.title ? this.props.title : undefined}
+							</Text>
 						</Col>
-						{this.props.children && (
+						{this.props.rightHeader && (
 							<Col nogrow>
-								<Row justify="flex-end">
+								{this.props.rightHeader}
-								{this.props.headerButtons}
-								</Row>
 							</Col>
 						)}
 					</Row>
@@ -64,7 +48,7 @@ export default class Box extends React.Component<Props> {
 			{this.props.children && (
 				<div className={buildClassName([css.body, !this.props.noPadding])}>
 					{this.props.children}
-				</div>	
+				</div>
 			)}
 		</div>
 	)

src/dzeio/Button/Button.stories.tsx

@@ -13,7 +13,6 @@ Basic.args = {
 	nomargintop: true,
 	icon: Zap,
 	size: 'small',
-	href: '/pouet',
 	block: true
 }
 
@@ -22,7 +21,6 @@ WithImg.args = {
 	nomargintop: true,
 	icon: '/16-16.svg',
 	size: 'small',
-	href: '/pouet',
 	block: true
 }
 

src/dzeio/Checkbox/Checkbox.module.styl

@@ -12,7 +12,7 @@ $backColor = #757575
 		margin-top 8px
 
 	p
-		margin-left 8px
+		margin-left 4px
 
 	span
 		top 0
@@ -20,12 +20,11 @@ $backColor = #757575
 		width 20px
 		height @width
 		position relative
-		box-shadow inset 0 0 0 2px $grayDark
+		box-shadow inset 0 0 0 2px $darkGrayLight
-		border-radius 2px
-		transition all $transition
-
 		@media (prefers-color-scheme dark)
-			box-shadow inset 0 0 0 2px $grayLight
+			box-shadow inset 0 0 0 2px $darkGrayDark
+		border-radius 4px
+		transition all $transition
 
 		&::after
 			border-radius 20px
@@ -47,8 +46,11 @@ $backColor = #757575
 		opacity 0
 
 		&:checked + span
-			background rgba($main, .5)
+			background $infoLight
-			box-shadow inset 0 0 0 2px $main
+			box-shadow inset 0 0 0 2px $infoLight
+			@media (prefers-color-scheme dark)
+				box-shadow inset 0 0 0 2px $infoDark
+				background $infoDark
 
 			svg
 				color white
@@ -57,9 +59,9 @@ $backColor = #757575
 
 	&:hover
 		span
-			box-shadow inset 0 0 0 2px black
+			box-shadow inset 0 0 0 2px $infoLight
 			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px white
+				box-shadow inset 0 0 0 2px $infoDark
 
 .radio
 	span
@@ -78,28 +80,35 @@ $backColor = #757575
 		background white
 
 .switch
-	padding 2px 0 2px 10px // 2px base padding 10px circle padding
+	padding 0 0 0 10px // 2px base padding 10px circle padding
 
-	&:hover span::after
+	&:hover span
-			background black
+		box-shadow none
+		&::after
+			background $darkGrayLight
 			@media (prefers-color-scheme dark)
-				background white
+				background $darkGrayDark
 
 	span
-		width 28px
+		width 24px
 		height 14px
 		border-radius 20px
 		top 50%
 		margin-right 10px
 		box-shadow none
-		background rgba($backColor, .5)
+		background rgba($darkGrayLight, .3)
+		@media (prefers-color-scheme dark)
+			background rgba($darkGrayDark, .3)
+
 
 		&::after
 			content " "
 			top 50%
 			transform translate(-50%, -50%)
 			left 0
-			background $backColor
+			background $darkGrayLight
+			@media (prefers-color-scheme dark)
+				background $darkGrayDark
 			width 20px
 			height @width
 
@@ -108,10 +117,17 @@ $backColor = #757575
 		width 20px
 
 		&:checked + span
+
+			box-shadow none
+			background rgba($infoLight, .3)
+			@media (prefers-color-scheme dark)
+				background rgba($infoDark, .3)
 			&::after
 				left 100%
 				transform translate(-50%, -50%)
-				background $main
+				background $infoLight
+				@media (prefers-color-scheme dark)
+					background $infoDark
 
 checkBox($color)
 	input:checked + span

src/dzeio/Code/Code.module.styl

@@ -1,7 +1,6 @@
 .code
-	font-family 'source code pro', monospace
 	background #E8EAF6
-	padding 4px 8px
+	padding 4px
 	border-radius 8px
 
 .pre

src/dzeio/Container/Container.module.styl

@@ -1,2 +1,5 @@
 .container
-	padding 16px
+	margin 48px auto
+	padding 0 16px
+	width 100%
+	max-width 1312px

src/dzeio/Container/Container.stories.tsx

@@ -1,16 +1,19 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
 import Component from '.'
-import Input from '../Input'
+import Text from '../Text'
 
 export default {
-	title: 'DZEIO/Fieldset',
+	title: 'DZEIO/Container',
 	component: Component,
 	argTypes: {
 		title: { control: 'text'}
+	},
+	parameters: {
+		layout: 'fullscreen'
 	}
 } as Meta
 
 export const Basic = (args: any) => (
-	<Component {...args}><Input label="Test" /></Component>
+	<Component {...args}><Text>Test</Text></Component>
 )

src/dzeio/Container/index.tsx

@@ -11,9 +11,9 @@ interface Props {
 export default class Container extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName(css.container, this.props.className)}>
+		<main className={buildClassName(css.container, this.props.className)}>
 			{this.props.children}
-		</div>
+		</main>
 	)
 
 }

src/dzeio/Fieldset/Fieldset.module.styl

@@ -1,19 +0,0 @@
-@import '../config.styl'
-
-.fieldset
-	border-radius 4px
-	border 2px solid $grayDark
-	transition all $transition
-	margin 0
-
-	> legend
-		font-weight 600
-		transition all $transition
-		padding 0 4px
-		@media (prefers-color-scheme dark)
-			color white
-	&:hover
-		border-color black
-
-		@media (prefers-color-scheme dark)
-			border-color white

src/dzeio/Fieldset/index.tsx

@@ -1,21 +0,0 @@
-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>
-	)
-
-}

src/dzeio/Footer/Footer.module.styl

@@ -1,13 +1,15 @@
 @import '../config.styl'
 
 .footer
-	padding 24px 16px
+	padding 16px
 	background $foregroundLight
 	@media (prefers-color-scheme dark)
 		background $foregroundDark
 
 	ul
 		padding 0
+		margin 0
+		margin-top 12px
 		display flex
 		justify-content center
 		li
@@ -21,6 +23,9 @@
 	display inline-block
 	vertical-align middle
 	margin 0 2px
+	width 16px
+	height @width
+	vertical-align sub
 
 @keyframes grow
 	0%

src/dzeio/Footer/Footer.stories.tsx

@@ -1,19 +1,22 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import { Meta, Story } from '@storybook/react/types-6-0'
-import React from 'react'
+import React from 'react'
-import { Zap } from 'lucide-react'
+import { Zap } from 'lucide-react'
-import Component from '.'
+import Component from '.'
-
+
-export default {
+export default {
-	title: 'DZEIO/Footer',
+	title: 'DZEIO/Footer',
-	component: Component,
+	component: Component,
-} as Meta
+	parameters: {
-
+		layout: 'fullscreen'
-export const Basic: Story<any> = (args: any) => <Component {...args} />
+	}
-
+} as Meta
-let tmp = Basic.bind({})
+
-tmp.args = {
+export const Basic: Story<any> = (args: any) => <Component {...args} />
-	links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
+
-	socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
+let tmp = Basic.bind({})
-}
+tmp.args = {
-
+	links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
-export const Normal = tmp
+	socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
+}
+
+export const Normal = tmp

src/dzeio/Footer/index.tsx

@@ -1,48 +1,48 @@
-import React, { FC } from 'react'
+import React, { FC } from 'react'
-import { Heart } from 'lucide-react'
+import { Heart } from 'lucide-react'
-import Link from '../Link'
+import Link from '../Link'
-import { LucideProps } from 'lucide-react'
+import { Icon } from 'lucide-react'
-import Text from '../Text'
+import Text from '../Text'
-import css from './Footer.module.styl'
+import css from './Footer.module.styl'
-import Image from 'next/image'
+import Image from 'next/image'
-
+
-interface Props {
+interface Props {
-	text?: string
+	text?: string
-	company?: string
+	company?: string
-	links?: Array<{
+	links?: Array<{
-		path: string
+		path: string
-		name: string
+		name: string
-	}>
+	}>
-	socials?: Array<{
+	socials?: Array<{
-		href: string
+		href: string
-		icon: FC<LucideProps> | string
+		icon: Icon | string
-	}>
+	}>
-}
+}
-
+
-export default class Footer extends React.Component<Props> {
+export default class Footer extends React.Component<Props> {
-	public render = () => (
+	public render = () => (
-		<footer className={css.footer}>
+		<footer className={css.footer}>
-			{this.props.text ? (
+			{this.props.text ? (
-				<Text align="center">{this.props.text}</Text>
+				<Text align="center">{this.props.text}</Text>
-			) : (
+			) : (
-				<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
+				<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
-			)}
+			)}
-			{this.props.links && (
+			{this.props.links && (
-				<ul>{this.props.links.map((l, index) => (
+				<ul>{this.props.links.map((l, index) => (
-					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
+					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
-				))}</ul>
+				))}</ul>
-			)}
+			)}
-			{this.props.socials && (
+			{this.props.socials && (
-				<ul className={css.socials}>{this.props.socials.map((l, index) => (
+				<ul className={css.socials}>{this.props.socials.map((l, index) => (
-					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
+					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
-						{typeof l.icon === 'string' ? (
+						{typeof l.icon === 'string' ? (
-							<Image width={24} height={24} src={l.icon} />
+							<Image width={24} height={24} src={l.icon} />
-						) : (
+						) : (
-							<l.icon size={24} />
+							<l.icon size={24} />
-					)}
+					)}
-					</Link></Text></li>
+					</Link></Text></li>
-				))}</ul>
+				))}</ul>
-			)}
+			)}
-		</footer>
+		</footer>
-	)
+	)
-}
+}

src/dzeio/Input/Input.module.styl

@@ -2,31 +2,17 @@
 
 .parent
 	position relative
-	margin 16px 0
 	max-width 100%
 	display inline-block
 
 	&:not(.block) + .parent:not(.block)
 		margin-left 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
+		color $darkGrayLight
+		@media (prefers-color-scheme dark)
+			color $darkGrayDark
 		transition color $transition
 		pointer-events none
 		top 14px
@@ -78,15 +64,14 @@
 		left 0
 		width 100%
 		z-index 100
-		box-shadow 0 4px 8px rgba(black, .3)
+		box-shadow 0 2px 4px rgba(black, .3)
 		margin 0
 		padding 0
-		background darken($foregroundLight, 5%)
+		background $foregroundLight
 		@media (prefers-color-scheme dark)
-			background lighten($foregroundDark, 5%)
+			background $foregroundDark
 
-		border-bottom-left-radius 4px
+		border-radius 8px
-		border-bottom-right-radius 4px
 		max-height 25vh
 		overflow-y auto
 		@media (max-width $mobile)
@@ -123,32 +108,29 @@
 	input
 	select
 	textarea
-		padding 14px 16px
+		padding 12px
-		height 56px
+		border-radius 8px
-		border 2px solid $grayDark
-		border-radius 4px
 		max-width 100%
-		box-sizing border-box
 		font-size .875rem
 		outline none
-		background transparent
+		background $lightGrayLight
 		transition all $transition
+		border 2px solid $darkGrayLight
 		color black
 		@media (prefers-color-scheme dark)
-			border-color $grayLight
+			background $lightGrayDark
+			border-color $darkGrayDark
 			color white
 
-		&:not(:placeholder-shown)
+		&::placeholder
-		&:focus
+			font-weight 700
-		&:not([placeholder=" "])
+			font-size rem(16)
-			~ label
+			transition color $transition
-				top -8px
+			opacity 1
-				left 16px - 4px // .input/padding-left label/padding-left
+			color $darkGrayLight
-				background white
+			@media (prefers-color-scheme dark)
-				padding 0 4px
+				color $darkGrayDark
 
-				@media (prefers-color-scheme dark)
-					background #202020
 
 		&:disabled
 			border-color #999
@@ -166,7 +148,8 @@
 				@media (prefers-color-scheme dark)
 					border-color white
 
-				+ svg
+				~ svg
+				&::placeholder
 					color black
 
 					@media (prefers-color-scheme dark)
@@ -178,6 +161,7 @@
 					color @border-color
 
 				~ svg
+				&::placeholder
 					color @border-color
 			&:invalid
 				border-color $errorDark
@@ -252,13 +236,13 @@
 			transform rotateX(0)
 			transition $transition
 
-		&:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
+		&:focus ~ svg.rotate
+		~ .autocomplete:hover ~ svg.rotate
 			transform rotateX(180deg)
-	div
+
-		display flex
+	p
-		justify-content space-between
+		padding 0 8px
-		padding 0 16px
+		font-size rem(14)
-		font-size .9em
 
 	&.block, &.block input, &.block select, &.block textarea
 		width 100%

src/dzeio/Input/index.tsx

@@ -12,7 +12,6 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
 	icon?: FC<IconProps>
 	iconRight?: FC<IconProps>
 	helper?: string
-	characterCount?: boolean
 	inputRef?: React.RefObject<HTMLInputElement>
 	selectRef?: React.RefObject<HTMLSelectElement>
 	type?: 'color' | 'text' | 'date' | 'datetime-local' |
@@ -21,15 +20,10 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
 	// Custom Types
 	'select' | 'textarea'
 	autocomplete?: Array<string>
-	infinityText?: string
-	filled?: boolean
-	opaque?: boolean
-	block?: boolean
 	children?: React.ReactNode
 }
 
 interface States {
-	charCount?: string
 	textAreaHeight?: number
 	value?: string
 	isInFirstPartOfScreen?: boolean
@@ -44,9 +38,6 @@ export default class Input extends React.Component<Props, States> {
 	private parentRef: React.RefObject<HTMLDivElement> = React.createRef()
 
 	public componentDidMount() {
-		if (this.props.characterCount) {
-			this.onChange()
-		}
 		if (this.props.type === 'textarea') {
 			this.textareaHandler()
 		}
@@ -67,26 +58,19 @@ export default class Input extends React.Component<Props, States> {
 		delete props.label
 		delete props.children
 		delete props.icon
-		delete props.opaque
 		delete props.helper
-		delete props.infinityText
 		delete props.autocomplete
-		delete props.filled
 		delete props.iconRight
 		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 || ' ',
+			placeholder: this.props.label || this.props.placeholder || ' ',
 			ref: this.props.inputRef || this.inputRef,
 			className: buildClassName(
 				[css.iconLeft, this.props.icon],
-				[css.iconRight, this.props.iconRight || this.props.autocomplete],
+				[css.iconRight, this.props.iconRight || this.props.autocomplete]
-				[css.filled, this.props.filled],
-				[css.opaque, this.props.opaque]
 			),
 			onInvalid: (ev: React.FormEvent<HTMLInputElement>) => ev.preventDefault(),
 		}
@@ -105,7 +89,6 @@ export default class Input extends React.Component<Props, States> {
 					className={buildClassName(
 						[css.iconLeft, this.props.icon],
 						[css.iconRight, !this.props.disabled || this.props.iconRight],
-						[css.filled, this.props.filled],
 						[css[this.props.color as string], this.props.color]
 					)}
 				>
@@ -146,38 +129,31 @@ export default class Input extends React.Component<Props, States> {
 		return (
 			<div
 				className={buildClassName(
-					[css.parent],
+					css.parent
-					[css.block, this.props.block]
 				)}
 				onChangeCapture={this.onChange}
 				ref={this.parentRef}
 			>
 				{input}
 
-				{/* Process Icon */}
+				{/* Left Icon */}
 				{this.props.icon && (
-					<this.props.icon className={css.left} />
+					<this.props.icon size="18" className={css.left} />
 				)}
 
+				{/* Right Icon */}
 				{this.props.iconRight ? (
-					<this.props.iconRight className={css.right} />
+					<this.props.iconRight size="18" className={css.right} />
 				) : ((this.props.type === 'select' || this.props.autocomplete) && !this.props.disabled) && (
-					<ChevronDown className={buildClassName(css.right, css.rotate)} />
+					<ChevronDown size="18" className={buildClassName(css.right, css.rotate)} />
 				)}
 
-				{/* Input Label */}
+				{/* Helper text */}
-				{this.props.label && (
+				{(this.props.helper) && (
-					<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
+					<Text>{this.props.helper}</Text>
-				)}
-				{(this.props.helper || this.props.characterCount) && (
-					<div>
-						<Text type="span">{this.props.helper}</Text>
-						{this.props.characterCount && (
-							<Text type="span">{this.state?.charCount}</Text>
-						)}
-					</div>
 				)}
 
+				{/* List when this is an autocomplete */}
 				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
 					<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}>
 						{this.props.autocomplete.filter((item) => item.toLowerCase().includes(this.state?.value?.toLowerCase() ?? this.props.value?.toString().toLowerCase() ?? '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
@@ -187,6 +163,9 @@ export default class Input extends React.Component<Props, States> {
 		)
 	}
 
+	/**
+	 * event for autocomplete to detect where on the screen it shoul display
+	 */
 	private parentScroll = async () => {
 		const div = this.parentRef.current
 		if (!div) {return}
@@ -230,15 +209,6 @@ export default class Input extends React.Component<Props, States> {
 	}
 
 	private onChange = async (event?: React.FormEvent<HTMLDivElement>) => {
-		if (this.props.characterCount) {
-			const max = this.props.maxLength || this.props.infinityText || 'Infinity'
-			const baseItem = this.props.value || this.props.defaultValue || ''
-			let currentCount = baseItem.toString().length
-			if (event) {
-				currentCount = (event.target as HTMLInputElement).value.length
-			}
-			this.setState({charCount: `${currentCount}/${max}`})
-		}
 		if (event) {
 			this.setState({value: (event.target as HTMLInputElement).value })
 		}

src/dzeio/Loader/Loader.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { Zap } from 'lucide-react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Loader',
+	component: Component,
+	parameters: {
+		layout: 'fullscreen'
+	}
+} as Meta
+
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+
+let tmp = Basic.bind({})
+tmp.args = {
+	auto: {interval : [10, 100], increment: [0, 5]}
+}
+
+export const Auto = tmp

src/dzeio/NotificationManager/index.tsx

@@ -135,11 +135,8 @@ export default class NotificationManager extends React.Component<Props, State> {
 					>
 						<Box
 							title={el.message}
-							titleClassName={css.title}
+							rightHeader={(
-							headerButtons={(
+								<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
-								<Col nogrow>
-									<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
-								</Col>
 							)}
 						>
 							{el.actions && (

src/dzeio/Overflow/Overflow.module.styl

@@ -1,6 +0,0 @@
-$height = 45px
-
-.top
-	height $height
-.bottom
-	margin-top - $height

src/dzeio/Overflow/index.tsx

@@ -1,20 +0,0 @@
-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>
-	)
-
-}

src/dzeio/Popup/index.tsx

@@ -1,32 +1,39 @@
-import React from 'react'
+import React from 'react'
-import { X } from 'lucide-react'
+import { X } from 'lucide-react'
-import Text from '../Text'
+import Text from '../Text'
-import Box from '../Box'
+import Box from '../Box'
-import Row from '../Row'
+import Row from '../Row'
-
+
-import css from './Popup.module.styl'
+import css from './Popup.module.styl'
-
+
-interface Props {
+interface Props {
-	children: React.ReactNode
+	children: React.ReactNode
-	onClose?: () => void
+	onClose?: () => void
-	header?: Box['props']
+	header?: Box['props']
-}
+}
-
+
-export default class Popup extends React.Component<Props> {
+export default class Popup extends React.Component<Props> {
-
+
-	public render = () => (
+	public render = () => (
-		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
+		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
-			<Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}>
+			<Box
-				{this.props.children}
+				//{...this.props.header as any}
-			</Box>
+				className={css.popupChild}
-		</Row>
+				onClick={(ev) => ev.stopPropagation()}
-	)
+				rightHeader={
-
+					(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)
-	private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
+				}
-		const target = ev.currentTarget
+			>
-		if (target.classList.contains(css.popup) && this.props.onClose) {
+				{this.props.children}
-			this.props.onClose()
+			</Box>
-		}
+		</Row>
-	}
+	)
-
+
-}
+	private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
+		const target = ev.currentTarget
+		if (target.classList.contains(css.popup) && this.props.onClose) {
+			this.props.onClose()
+		}
+	}
+
+}

src/dzeio/Table/Table.module.styl

@@ -2,21 +2,33 @@
 
 .table
 	border-spacing 0
-	border 2px solid $grayDark
-	@media (prefers-color-scheme dark)
-		border-color $grayLight
-	border-radius 4px
 	width 100%
 
-	td
+	tr
-		border-top 1px solid $grayDark
+		$radius = 16px
-		@media (prefers-color-scheme dark)
+		td:first-child
-			border-color $grayLight
+		th:first-child
+			border-top-left-radius $radius
+			border-bottom-left-radius $radius
+
+		td:last-child
+		th:last-child
+			border-top-right-radius $radius
+			border-bottom-right-radius $radius
 
 	th
 	td
-		padding 8px
+		padding 16px
 		text-align left
+		color black
+		@media (prefers-color-scheme dark)
+			color white
+	th
+		background $lightGrayLight
+		color $darkGrayLight
+		@media (prefers-color-scheme dark)
+			background $lightGrayDark
+			color $darkGrayDark
 
 .parent
-	overflow-x auto
+	overflow-x auto

src/dzeio/Table/Table.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react/types-6-0'
+import { Copyright, Settings } from 'lucide-react'
+import React from 'react'
+import Component from '.'
+import Box from '../Box'
+
+export default {
+	title: 'DZEIO/Table',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => (
+	<Box icon={Settings} title="Storage">
+		<Component {...args}>
+			<thead>
+				<tr>
+					<th>item1</th>
+					<th>item1</th>
+					<th>item1</th>
+					<th>item1</th>
+					<th>item1</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+				</tr>
+				<tr>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+				</tr>
+				<tr>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+					<td>item1</td>
+				</tr>
+			</tbody>
+		</Component>
+	</Box>
+)

src/dzeio/Text/index.tsx

@@ -3,7 +3,7 @@ import { buildClassName } from '../Util'
 import css from './Text.module.styl'
 interface Props {
 	color?: 'black' | 'white'
-	type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span'
+	type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span' | 'div'
 	className?: string
 	noDarkTheme?: boolean
 	align?: 'left' | 'right' | 'center'

src/dzeio/config.styl

@@ -14,14 +14,23 @@ $errorLight = #F44336
 
 $warningDark = #C43E00
 $warningLight = #FF9800
-
+// hsl($main)
-$backgroundDark = #161616
+$backgroundDark = darken($main, 92%)
-$backgroundLight = #EEEEEE
+$backgroundLight = lighten($main, 94%)
 $foregroundDark = #202020
 $foregroundLight = #FFFFFF
 
-$grayDark = #B0B0B0
+// Light theme grays
-$grayLight = #E0E0E0
+$darkGrayLight = #777
+$lightGrayLight = #F4F4F4
+
+// Dark theme grays
+$darkGrayDark = #444
+$lightGrayDark = #AAA
+
+// @deprecated
+$grayLight = $darkGrayLight
+$grayDark  = $lightGrayLight
 
 
 $transitionTime = .15s

src/dzeio/general.styl

@@ -5,7 +5,12 @@
 *::before
 *::after
 	box-sizing border-box
-	font-family Aileron, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+	font-family Aileron, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif
+
+// Georgia,Cambria,"Times New Roman",Times,serif
+
+code, pre
+	font-family "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
 
 html
 body

src/dzeio/util.styl

@@ -1,15 +0,0 @@
-@import './config'
-
-.fullscreen
-	min-height 100vh
-
-.w100p
-	width 100%
-
-.hideMobile
-	@media (max-width $mobile)
-		display none
-
-.hideTablet
-	@media (max-width $tablet)
-		display none

src/index.ts

@@ -12,7 +12,6 @@ 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 Image from './dzeio/Image'
@@ -21,7 +20,6 @@ import Link from './dzeio/Link'
 import Loader from './dzeio/Loader'
 import Navbar from './dzeio/Navbar'
 import NotificationManager from './dzeio/NotificationManager'
-import Overflow from './dzeio/Overflow'
 import Popup from './dzeio/Popup'
 import Row from './dzeio/Row'
 import Table from './dzeio/Table'
@@ -35,7 +33,6 @@ export {
 	Code,
 	Col,
 	Container,
-	Fieldset,
 	Footer,
 	GradientBackground,
 	Image,
@@ -44,10 +41,9 @@ export {
 	Loader,
 	Navbar,
 	NotificationManager,
-	Overflow,
 	Popup,
 	Row,
 	Table,
 	Text,
 	Util
-}
+}