diff --git a/src/AlignButtons/AlignButtons.jsx b/src/AlignButtons/AlignButtons.jsx
index 8a6ea9514e0b3b127b16d1804267b89eca130ea9..03bebeaeda1e2d79660d4b69195b6259439a3b95 100644
--- a/src/AlignButtons/AlignButtons.jsx
+++ b/src/AlignButtons/AlignButtons.jsx
@@ -1,9 +1,8 @@
 import {Button} from "@wordpress/components";
-function AlignButtons(props) {
+export default function AlignButtons ({label, onChange}) {
 
-	const {label, onChange} = props;
 
-	const handleChange = function (newAlignment) {
+	const handleChange =  (newAlignment) => {
 		if (onChange) {
 			onChange(newAlignment);
 		}
@@ -34,7 +33,3 @@ function AlignButtons(props) {
 		</div>
 	);
 }
-
-export default AlignButtons;
-
-
diff --git a/src/BlockPlaceholders/BlockPlaceholders.jsx b/src/BlockPlaceholders/BlockPlaceholders.jsx
index e47a2397f38ed50f2571cf714f9b73330ffb53df..9728205e63f473d9b795268980daeb21dc7fff38 100644
--- a/src/BlockPlaceholders/BlockPlaceholders.jsx
+++ b/src/BlockPlaceholders/BlockPlaceholders.jsx
@@ -2,11 +2,10 @@ import {__} from "@wordpress/i18n";
 import {PanelBody} from "@wordpress/components";
 import Placeholder from "./Placeholder";
 
-function BlockPlaceholders(props) {
-	const {placeholders,children} = props;
+export default function BlockPlaceholders({placeholders, children}) {
 	return (
 		<PanelBody title={__('Placeholders', 'flexible-invoices-core')}>
-			{ children && <p className='fi-placeholders-list-description'>{children}</p> }
+			{children && <p className='fi-placeholders-list-description'>{children}</p>}
 			{
 				placeholders.map((placeholder) => {
 					return <Placeholder label={placeholder.label}>{placeholder.description}</Placeholder>
@@ -15,7 +14,3 @@ function BlockPlaceholders(props) {
 		</PanelBody>
 	);
 }
-
-export default BlockPlaceholders;
-
-
diff --git a/src/BlockPlaceholders/Placeholder.jsx b/src/BlockPlaceholders/Placeholder.jsx
index ca2e902ac1e3aa4f74ea6c43e5de9b00717d9fa0..0062dd5ac426e69b7436ea4627c81408d3b3f835 100644
--- a/src/BlockPlaceholders/Placeholder.jsx
+++ b/src/BlockPlaceholders/Placeholder.jsx
@@ -1,5 +1,4 @@
-function Placeholder(props) {
-	const {label, children} = props;
+export default function Placeholder({label, children}) {
 	return (
 		<div>
 			<input type='text' disabled value={label}/>
@@ -8,7 +7,3 @@ function Placeholder(props) {
 		</div>
 	);
 }
-
-export default Placeholder;
-
-
diff --git a/src/ColorSelector/ColorSelector.jsx b/src/ColorSelector/ColorSelector.jsx
index 021c49710ed847df50667beae0b2b5118bb48fbf..018f477069bf0a0c347faecca2151786b68af6d6 100644
--- a/src/ColorSelector/ColorSelector.jsx
+++ b/src/ColorSelector/ColorSelector.jsx
@@ -1,9 +1,8 @@
 import {ColorPicker} from "@wordpress/components";
 import {useState} from "react";
 
-function ColorSelector(props) {
+export default function ColorSelector({label, onChange, value, enableAlpha = true, returnFormat = 'rgb'}) {
 
-	const {label, onChange, value, enableAlpha = true, returnFormat = 'rgb'} = props;
 	const [isPopupActive, setIsPopupActive] = useState(false);
 
 	const handleColorChange = function (newColor) {
@@ -57,7 +56,3 @@ function ColorSelector(props) {
 		</div>
 	);
 }
-
-export default ColorSelector;
-
-
diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx
index a49700478344e7b26aeff0f83a21399b5365ed18..97150fa91d9351004dd682f8476140cd0ce77b88 100644
--- a/src/DuoInput/DuoInput.jsx
+++ b/src/DuoInput/DuoInput.jsx
@@ -1,9 +1,6 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-function DuoInput(props) {
-
-	const {label, onChange, values, layout = 'column'} = props;
-
+export default function DuoInput({label, onChange, values, layout = 'column'}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -20,24 +17,22 @@ function DuoInput(props) {
 			<div className='fi-field-label-wrapper'>
 				<span className='fi-field-label'>{label}</span>
 			</div>
-				<div className='fi-field-buttons-wrapper fi-duo-fields-wrapper' style={{flexDirection: layout }}>
-					<div className='fi-duo-fields'>
-						<NumberWithUnit
-							className='fi-duo-field fi-duo-field-input'
-							value={valuesArray[0]}
-							onChange={(e) => {
-								handleChange(0, e)
-							}}
-						/>
-						<NumberWithUnit
-							className='fi-duo-field fi-duo-field-input'
-							value={valuesArray[1]}
-							onChange={(e) => handleChange(1, e)}
-						/>
-					</div>
+			<div className='fi-field-buttons-wrapper fi-duo-fields-wrapper' style={{flexDirection: layout}}>
+				<div className='fi-duo-fields'>
+					<NumberWithUnit
+						className='fi-duo-field fi-duo-field-input'
+						value={valuesArray[0]}
+						onChange={(e) => {
+							handleChange(0, e)
+						}}
+					/>
+					<NumberWithUnit
+						className='fi-duo-field fi-duo-field-input'
+						value={valuesArray[1]}
+						onChange={(e) => handleChange(1, e)}
+					/>
 				</div>
+			</div>
 		</div>
 	);
 }
-
-export default DuoInput;
diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index 40f69375e8bd20391850aef9e7359a12bd67b76a..1ff228c59c1113682c0574e4a80936be51f089bb 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -16,7 +16,7 @@ import FontStyles from "../FontStyles/FontStyles";
 import QuatroInput from "../QuatroInput/QuatroInput";
 import BlockPlaceholders from "../BlockPlaceholders/BlockPlaceholders";
 
-function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
+export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
 	const {
 		headers,
 		rows,
@@ -424,5 +424,3 @@ function FlexibleTable({attributes, setAttributes, placeholders, footer, additio
 		</>
 	);
 }
-
-export default FlexibleTable;
diff --git a/src/FontStyles/FontStyles.jsx b/src/FontStyles/FontStyles.jsx
index a3dc1bad4adf6a7212c62a8ba386940ed9b979ea..897f720d7115d71bcc5b6230c60b00538304593b 100644
--- a/src/FontStyles/FontStyles.jsx
+++ b/src/FontStyles/FontStyles.jsx
@@ -1,9 +1,7 @@
 import {Button} from "@wordpress/components";
 import {useState} from "react";
 
-function FontStyles(props) {
-
-	const {label, onChange, values} = props;
+export default function  FontStyles({label, onChange, values} ) {
 
 	const [isItalic, setIsItalic] = useState(values.fontStyle === 'italic');
 	const [isBold, setIsBold] = useState(values.fontWeight === 'bold');
@@ -15,7 +13,6 @@ function FontStyles(props) {
 	const textDecoration = isUnderline ? 'underline' : isLineThrough ? 'line-through' : 'none';
 
 	const handleChange = function (updatedValues) {
-		console.log([updatedValues, textDecoration]);
 		const newStyles = {
 			fontStyle: updatedValues.fontStyle || fontStyle,
 			fontWeight: updatedValues.fontWeight || fontWeight,
@@ -25,7 +22,6 @@ function FontStyles(props) {
 		setIsBold( newStyles.fontWeight === 'bold');
 		setIsUnderline( newStyles.textDecoration.includes('underline'));
 		setIsLineThrough( newStyles.textDecoration.includes('line-through'));
-		console.log(newStyles);
 
 		if (onChange) {
 			onChange(newStyles);
@@ -99,5 +95,3 @@ function FontStyles(props) {
 		</div>
 	);
 }
-
-export default FontStyles;
diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx
index 79524bc2683d513bc7885ab7c921ad3bcbf3ed0e..2745f928d010fb860799aebec9df3fd00699571e 100644
--- a/src/NumberWithUnit/NumberWithUnit.jsx
+++ b/src/NumberWithUnit/NumberWithUnit.jsx
@@ -1,9 +1,7 @@
 import {SelectControl, TextControl} from "@wordpress/components";
 import {useState} from "react";
 
-function NumberWithUnit(props) {
-
-	const {label, onChange, value, className} = props;
+export default function NumberWithUnit({label, onChange, value, className}) {
 
 	const splitValues = function (fontSize) {
 		const match = fontSize.match(/^(\d+)([a-z%]+)$/i);
@@ -63,7 +61,3 @@ function NumberWithUnit(props) {
 		</div>
 	);
 }
-
-export default NumberWithUnit;
-
-
diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx
index 545d3e392ccd50b4c8382ee1ddfd40388d2efda7..15e2795acd6b66bcb41b48a8bef817f6b842cb0e 100644
--- a/src/QuatroInput/QuatroInput.jsx
+++ b/src/QuatroInput/QuatroInput.jsx
@@ -1,9 +1,6 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-function QuatroInput(props) {
-
-	const {label, onChange, values, layout = 'cross'} = props;
-
+export default function QuatroInput({label, onChange, values, layout = 'cross'}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -83,5 +80,3 @@ function QuatroInput(props) {
 		</div>
 	);
 }
-
-export default QuatroInput;