bump BETA 3

Signed-off-by: Avior <f.bouillon@aptatio.com>

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends: [
+		"./node_modules/@dzeio/config/eslint/react-typescript"
+	]
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.4",
 	"license": "MIT",
 	"main": "./index.umd.js",
 	"module": "./index.es.js",
@@ -18,6 +18,7 @@
 		"react": "^18",
 		"react-dom": "^18",
 		"style-loader": "^3",
+		"stylus": "^0.59.0",
 		"typescript": "^4",
 		"vite": "^3"
 	},
@@ -33,6 +34,6 @@
 	},
 	"dependencies": {
 		"@dzeio/object-util": "^1",
-		"lucide-react": "^0.88.0"
+		"lucide-react": "^0.91.0"
 	}
 }

src/Box/Box.module.styl

@@ -1,7 +1,7 @@
 @import "../config"
 
 .box
-	background nativeRGB(var(--theme-50))
+	background nativeRGB(var(--theme-100))
 	@media (prefers-color-scheme dark)
 		background nativeRGB(var(--gray-800))
 	border-radius 16px

src/Button/Button.module.styl

@@ -8,7 +8,6 @@
 	line-height 1.5
 	display inline-flex
 	padding 10px 20px
-	margin 8px 8px 0 8px
 	cursor pointer
 	align-items center
 	text-align center
@@ -89,9 +88,6 @@
 		&.outline
 			padding 3px 8px // @padding - @border
 
-	&.nomargintop
-		margin-top 0
-
 	&:disabled
 		background nativeRGB(var(--gray-500))
 		color nativeRGB(var(--gray-500--text))

src/Button/index.tsx

@@ -9,7 +9,6 @@ import css from './Button.module.styl'
 // MAKE OUTLINE use Fieldset instead of the current one xd
 
 interface Props {
-	nomargintop?: boolean
 	color?: ColorType
 	children?: React.ReactNode
 	icon?: Icon | string
@@ -57,7 +56,6 @@ export default class Button extends React.Component<Props> {
 			[css[this.props.type as string], this.props.type],
 			[css.block, this.props.block],
 			[css[this.props.size as string], this.props.size],
-			[css.nomargintop, this.props.nomargintop],
 			[css.loading, this.props.loading],
 			[css.mobileBlock, this.props.mobileBlock]
 		)

src/Container/Container.module.styl

@@ -6,4 +6,5 @@
 	> *:not(:first-child)
 		margin-top 48px
 	&.main
-		margin 48px auto
+		margin 0 auto
+		padding 48px @padding[1]

src/Navbar/index.tsx

@@ -133,11 +133,11 @@ export default class Navbar extends React.Component<Props, State> {
 				{!this.state.isMobile && (
 					<ul>
 						{!this.state.isMobile && this.props.menu.map((item) => (
-							<li key={item.path}><Button nomargintop type="ghost" href={item.path} icon={item.icon} onClick={item.subMenu ? this.onClick(item.subMenu) : undefined}>{item.name}</Button></li>
+							<li key={item.path}><Button type="ghost" href={item.path} icon={item.icon} onClick={item.subMenu ? this.onClick(item.subMenu) : undefined}>{item.name}</Button></li>
 						))}
 						{this.props.user && (
 							<li>
-								<Button nomargintop type="ghost" iconLeft={ChevronDown} onClick={this.props.user.menu ? this.onClick(this.props.user.menu) : undefined}>{this.props.user.name}</Button>
+								<Button type="ghost" iconLeft={ChevronDown} onClick={this.props.user.menu ? this.onClick(this.props.user.menu) : undefined}>{this.props.user.name}</Button>
 							</li>
 						)}
 					</ul>