diff --git a/src/components/floor-plan/modal/roofShape/type/Direction.jsx b/src/components/floor-plan/modal/roofShape/type/Direction.jsx
index 5ea8e635..7c3cf809 100644
--- a/src/components/floor-plan/modal/roofShape/type/Direction.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Direction.jsx
@@ -1,5 +1,6 @@
 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()
@@ -10,12 +11,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))}
-          />
+            onChange={(value) => setPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -24,12 +37,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setEavesOffset(normalizeDigits(e.target.value))}
-          />
+            onChange={(value) => setEavesOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -38,12 +63,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setGableOffset(normalizeDigits(e.target.value))}
-          />
+            onChange={(value) => setGableOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -52,12 +89,24 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
           {getMessage('windage.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setShedWidth(normalizeDigits(e.target.value))}
-          />
+            onChange={(value) => setShedWidth(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/Pattern.jsx b/src/components/floor-plan/modal/roofShape/type/Pattern.jsx
index 269cac58..46631b5c 100644
--- a/src/components/floor-plan/modal/roofShape/type/Pattern.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Pattern.jsx
@@ -1,5 +1,6 @@
 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()
@@ -11,7 +12,20 @@ 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} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin"> {pitchText}</span>
       </div>
@@ -20,7 +34,20 @@ 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} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -29,7 +56,20 @@ 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} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/Ridge.jsx b/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
index fb0f016f..03f22936 100644
--- a/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
@@ -1,6 +1,7 @@
 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()
@@ -13,7 +14,20 @@ 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} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -22,7 +36,20 @@ 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} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx b/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
index 8e231c7e..9477adae 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
@@ -1,5 +1,6 @@
 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()
@@ -10,7 +11,21 @@ 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} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
+
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +34,20 @@ 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} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Gable.jsx b/src/components/floor-plan/modal/roofShape/type/option/Gable.jsx
index 173c12f4..1b6c1c7f 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Gable.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Gable.jsx
@@ -1,6 +1,7 @@
 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()
@@ -10,7 +11,20 @@ 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} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          {/*<input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
index 787dd0e8..674525a8 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
@@ -1,5 +1,6 @@
 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()
@@ -10,7 +11,8 @@ 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} onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          <input type="text" className="input-origin block" value={pitch}
+                 onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -19,7 +21,8 @@ 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} onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          <input type="text" className="input-origin block" value={eavesOffset}
+                 onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>
@@ -28,12 +31,24 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('hipandgable.width')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setHipAndGableWidth(normalizeDigits(e.target.value))}
-          />
+            onChange={(value) => setHipAndGableWidth(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
index 22f0607e..c4f8736f 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Jerkinhead({
   gableOffset,
@@ -18,7 +19,20 @@ 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} onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          <input 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)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>
@@ -27,7 +41,21 @@ 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} onChange={(e) => setJerkinHeadWidth(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={jerkinHeadWidth}*/}
+          {/*       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>
@@ -36,12 +64,24 @@ export default function Jerkinhead({
           {getMessage('jerkinhead.slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  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={(e) => setJerkinHeadPitch(normalizeDecimalLimit(e.target.value, 2))}
-          />
+            onChange={(value) => jerkinHeadPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
index daacea56..7326204e 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
@@ -8,14 +8,16 @@ 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} onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          <input type="text" className="input-origin block" value={shedPitch}
+                 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} onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
+          <input type="text" className="input-origin block" value={shedWidth}
+                 onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Wall.jsx b/src/components/floor-plan/modal/roofShape/type/option/Wall.jsx
index dfdff20d..bee6e9bb 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Wall.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Wall.jsx
@@ -1,6 +1,7 @@
 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()
@@ -10,7 +11,8 @@ 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'} onChange={(e) => setHasSleeve(e.target.value)} />
+              <input type="radio" name="radio01" checked={hasSleeve === '0'} id="ra01" value={'0'}
+                     onChange={(e) => setHasSleeve(e.target.value)} />
               <label htmlFor="ra01">{getMessage('has.not.sleeve')}</label>
             </div>
           </div>
@@ -18,20 +20,34 @@ 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'} onChange={(e) => setHasSleeve(e.target.value)} />
+              <input type="radio" name="radio01" checked={hasSleeve !== '0'} id="ra02" value={'1'}
+                     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
-                  type="text"
+                {/*<input*/}
+                {/*  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={(e) => setSleeveOffset(normalizeDigits(e.target.value))}
+                  onChange={(value) => setSleeveOffset(value)}
                   readOnly={hasSleeve === '0'}
-                />
+                  options={{
+                    allowNegative: false,
+                    allowDecimal: false //(index !== 0),
+                  }}
+                ></CalculatorInput>
               </div>
               <span className="thin">mm</span>
             </div>