Main

src/DuoInput/DuoInput.jsx

+import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
+
+export default function DuoInput({label, onChange, values, layout = 'column'}) {
+
+	const keys = Object.keys(values);
+	const valuesArray = Object.values(values);
+	const handleChange = (side, value) => {
+		const changedSide = keys[side];
+		const newValues = {...values, [changedSide]: value};
+
+		if (onChange) {
+			onChange(newValues);
+		}
+	};
+	return (
+		<div className='fi-field-wrapper'>
+			<div className='fi-field-label-wrapper'>
+				<span className='fi-field-label'>{label}</span>
+			</div>
+			<div className='fi-field-buttons-wrapper fi-duo-fields-wrapper'>
+				<div className='fi-duo-fields' style={{ display: 'flex', flexDirection: layout}}>
+					<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>
+	);
+}