added multiple input number

src/Input/Input.tsx

@@ -8,6 +8,9 @@ import React, {
 } from 'react';
 import isNumber from 'is-number';
 
+//Custom styles
+import "./assets/css/custom.css";
+
 import { InputContainer } from './InputContainer';
 import { Icon } from '../Icon/Icon';
 import {

src/Input/assets/css/custom.css

@@ -0,0 +1,3 @@
+.input-number-currency > label, .input-number-percentage > label{
+  left: 1rem!important;
+}

stories/Form/Input.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 
 import { components } from 'react-select';
 import AsyncSelect from 'react-select/async';
@@ -493,7 +493,7 @@ export const InputNumericoPercentuale = () => {
 
   return (
     <Input
-      addon='true'
+      addon={true}
       addonText='%'
       type='number'
       label='Percentage'
@@ -510,14 +510,29 @@ export const InputNumericoPercentuale = () => {
 
 export const InputNumericoRidimensionamento = () => {
   const [value, setValue] = useState('100');
+  const ref = useRef(null);
+  const [width, setWidth] = useState('100');
+
+  useEffect(() => {
+      if (ref.current.classList.contains('input-number-adaptive')) {
+        if(!value){
+          setWidth(`calc(10px)`)
+        }else{
+          setWidth(`calc(40px + ${value.length}ch)`)
+        }
+      }
+  }, [value]);
 
   return (
     <Input
+      innerRef={ref}
       type='number'
       label='Ridimensionamento'
+      style={{ width }}
       value={value}
+      placeholder={'0'}
       min={0}
-      max={9999}
+      max={99999999999}
       className={'input-number-adaptive'}
       onChange={(ev) => {
         setValue(ev.target.value);