src/components/common/input/CalcInput.jsx

@@ -48,23 +48,14 @@ export const CalculatorInput = forwardRef(
       const calculator = calculatorRef.current
       let newDisplayValue = ''
 
-      // 소수점 이하 2자리 제한 로직 추가
-      const shouldPreventInput = (value) => {
-        const decimalParts = (value || '').split('.')
-        return decimalParts.length > 1 && decimalParts[1].length >= 2
-      }
-
       if (hasOperation) {
         // 연산자 이후 숫자 입력 시
         if (calculator.currentOperand === '0' || calculator.shouldResetDisplay) {
           calculator.currentOperand = num.toString()
           calculator.shouldResetDisplay = false
-        }else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
+        } else {
           calculator.currentOperand = (calculator.currentOperand || '') + num
         }
-        // else {
-        //   calculator.currentOperand = (calculator.currentOperand || '') + num
-        // }
         newDisplayValue = calculator.previousOperand + calculator.operation + calculator.currentOperand
         setDisplayValue(newDisplayValue)
       } else {
@@ -77,7 +68,7 @@ export const CalculatorInput = forwardRef(
           if (!hasOperation) {
             onChange(calculator.currentOperand)
           }
-        } else if (!shouldPreventInput(calculator.currentOperand)) { //소수점 이하2자리
+        } else {
           calculator.currentOperand = (calculator.currentOperand || '') + num
           newDisplayValue = calculator.currentOperand
           setDisplayValue(newDisplayValue)
@@ -85,14 +76,6 @@ export const CalculatorInput = forwardRef(
             onChange(newDisplayValue)
           }
         }
-        // else {
-        //   calculator.currentOperand = (calculator.currentOperand || '') + num
-        //   newDisplayValue = calculator.currentOperand
-        //   setDisplayValue(newDisplayValue)
-        //   if (!hasOperation) {
-        //     onChange(newDisplayValue)
-        //   }
-        // }
       }
 
       // 커서를 텍스트 끝으로 이동하고 스크롤 처리

src/components/floor-plan/modal/roofShape/type/Direction.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -11,24 +10,12 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={pitch}*/}
-          {/*  onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={pitch}
-            onChange={(value) => setPitch(value)}
+            onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: true //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -37,24 +24,12 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={eavesOffset}*/}
-          {/*  onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={eavesOffset}
-            onChange={(value) => setEavesOffset(value)}
+            onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -63,24 +38,12 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={gableOffset}*/}
-          {/*  onChange={(e) => setGableOffset(normalizeDigits(e.target.value))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={gableOffset}
-            onChange={(value) => setGableOffset(value)}
+            onChange={(e) => setGableOffset(normalizeDigits(e.target.value))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -89,24 +52,12 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('windage.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={shedWidth}*/}
-          {/*  onChange={(e) => setShedWidth(normalizeDigits(e.target.value))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={shedWidth}
-            onChange={(value) => setShedWidth(value)}
+            onChange={(e) => setShedWidth(normalizeDigits(e.target.value))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/Pattern.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Pattern(props) {
   const { getMessage } = useMessage()
@@ -12,20 +11,7 @@ export default function Pattern(props) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={pitch} */}
+          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
-          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={pitch}
-            onChange={(value) => setPitch(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: true //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin"> {pitchText}</span>
       </div>
@@ -34,20 +20,7 @@ export default function Pattern(props) {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={eavesOffset}
-            onChange={(value) => setEavesOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -56,20 +29,7 @@ export default function Pattern(props) {
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={gableOffset} */}
+          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={gableOffset}
-            onChange={(value) => setGableOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/Ridge.jsx

@@ -1,7 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Ridge(props) {
   const { getMessage } = useMessage()
@@ -14,20 +13,7 @@ export default function Ridge(props) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={pitch} */}
+          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
-          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={pitch}
-            onChange={(value) => setPitch(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: true //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -36,20 +22,7 @@ export default function Ridge(props) {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={eavesOffset}
-            onChange={(value) => setEavesOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
   const { getMessage } = useMessage()
@@ -11,21 +10,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={pitch} */}
+          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
-          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={pitch}
-            onChange={(value) => setPitch(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: true //(index !== 0),
-            }}
-          ></CalculatorInput>
-
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -34,20 +19,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={eavesOffset} */}
+          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={eavesOffset}
-            onChange={(value) => setEavesOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/Gable.jsx

@@ -1,7 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect } from 'react'
 import { normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Gable({ gableOffset, setGableOffset }) {
   const { getMessage } = useMessage()
@@ -11,20 +10,7 @@ export default function Gable({ gableOffset, setGableOffset }) {
       <div className="outline-form">
         <span className="mr10">{getMessage('gable.offset')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={gableOffset}*/}
+          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={gableOffset}
-            onChange={(value) => setGableOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
   const { getMessage } = useMessage()
@@ -11,8 +10,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch}
+          <input type="text" className="input-origin block" value={pitch} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
-                 onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -21,8 +19,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset}
+          <input type="text" className="input-origin block" value={eavesOffset} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
-                 onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -31,24 +28,12 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('hipandgable.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={hipAndGableWidth}*/}
-          {/*  onChange={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={hipAndGableWidth}
-            onChange={(value) => setHipAndGableWidth(value)}
+            onChange={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Jerkinhead({
   gableOffset,
@@ -19,20 +18,7 @@ export default function Jerkinhead({
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset}
+          <input type="text" className="input-origin block" value={gableOffset} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
-                 onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={gableOffset}
-            onChange={(value) => setGableOffset(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -41,21 +27,7 @@ export default function Jerkinhead({
           {getMessage('jerkinhead.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input type="text" className="input-origin block" value={jerkinHeadWidth}*/}
+          <input type="text" className="input-origin block" value={jerkinHeadWidth} onChange={(e) => setJerkinHeadWidth(normalizeDigits(e.target.value))} />
-          {/*       onChange={(e) => setJerkinHeadWidth(normalizeDigits(e.target.value))} />*/}
-
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
-            className="input-origin block"
-            value={jerkinHeadWidth}
-            onChange={(value) => setJerkinHeadWidth(value)}
-            options={{
-              allowNegative: false,
-              allowDecimal: false //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -64,24 +36,12 @@ export default function Jerkinhead({
           {getMessage('jerkinhead.slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          {/*<input*/}
+          <input
-          {/*  type="text"*/}
+            type="text"
-          {/*  className="input-origin block"*/}
-          {/*  value={jerkinHeadPitch}*/}
-          {/*  onChange={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}*/}
-          {/*/>*/}
-          <CalculatorInput
-            id=""
-            name=""
-            label=""
             className="input-origin block"
             value={jerkinHeadPitch}
-            onChange={(value) => jerkinHeadPitch(value)}
+            onChange={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}
-            options={{
+          />
-              allowNegative: false,
-              allowDecimal: true //(index !== 0),
-            }}
-          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/Shed.jsx

@@ -8,16 +8,14 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
       <div className="outline-form mb10">
         <span className="mr10">{getMessage('slope')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={shedPitch}
+          <input type="text" className="input-origin block" value={shedPitch} onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
-                 onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
       <div className="outline-form">
         <span className="mr10">{getMessage('shed.width')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={shedWidth}
+          <input type="text" className="input-origin block" value={shedWidth} onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
-                 onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/type/option/Wall.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDigits } from '@/util/input-utils'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }) {
   const { getMessage } = useMessage()
@@ -11,8 +10,7 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
         <div className="eaves-keraba-item">
           <div className="eaves-keraba-th">
             <div className="d-check-radio pop">
-              <input type="radio" name="radio01" checked={hasSleeve === '0'} id="ra01" value={'0'}
+              <input type="radio" name="radio01" checked={hasSleeve === '0'} id="ra01" value={'0'} onChange={(e) => setHasSleeve(e.target.value)} />
-                     onChange={(e) => setHasSleeve(e.target.value)} />
               <label htmlFor="ra01">{getMessage('has.not.sleeve')}</label>
             </div>
           </div>
@@ -20,34 +18,20 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
         <div className="eaves-keraba-item">
           <div className="eaves-keraba-th">
             <div className="d-check-radio pop">
-              <input type="radio" name="radio01" checked={hasSleeve !== '0'} id="ra02" value={'1'}
+              <input type="radio" name="radio01" checked={hasSleeve !== '0'} id="ra02" value={'1'} onChange={(e) => setHasSleeve(e.target.value)} />
-                     onChange={(e) => setHasSleeve(e.target.value)} />
               <label htmlFor="ra02">{getMessage('has.sleeve')}</label>
             </div>
           </div>
           <div className="eaves-keraba-td">
             <div className="outline-form">
               <div className="input-grid mr5" style={{ width: '100px' }}>
-                {/*<input*/}
+                <input
-                {/*  type="text"*/}
+                  type="text"
-                {/*  className="input-origin block"*/}
-                {/*  value={sleeveOffset}*/}
-                {/*  onChange={(e) => setSleeveOffset(normalizeDigits(e.target.value))}*/}
-                {/*  readOnly={hasSleeve === '0'}*/}
-                {/*/>*/}
-                <CalculatorInput
-                  id=""
-                  name=""
-                  label=""
                   className="input-origin block"
                   value={sleeveOffset}
-                  onChange={(value) => setSleeveOffset(value)}
+                  onChange={(e) => setSleeveOffset(normalizeDigits(e.target.value))}
                   readOnly={hasSleeve === '0'}
-                  options={{
+                />
-                    allowNegative: false,
-                    allowDecimal: false //(index !== 0),
-                  }}
-                ></CalculatorInput>
               </div>
               <span className="thin">mm</span>
             </div>