User can now specify suffix in the Input

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -10,18 +10,18 @@
   export let onChange = () => {}
 
   function handleChange(val, idx) {
-    value.splice(idx, 1, val !== "auto" ? val + suffix : val)
+    value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
 
     value = value
     let _value = value.map(v =>
-      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+      suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
     )
     onChange(_value)
   }
 
-  $: displayValues = value
+  $: displayValues = value && suffix
     ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : []
+    : value || []
 </script>
 
 <div class="input-container">

packages/builder/src/components/userInterface/propertyCategories.js

@@ -84,7 +84,6 @@ export const spacing = [
     key: "margin",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
   {
@@ -92,7 +91,6 @@ export const spacing = [
     key: "padding",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
 ]
@@ -103,7 +101,6 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -112,7 +109,6 @@ export const size = [
     key: "height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -121,7 +117,6 @@ export const size = [
     key: "min-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -129,7 +124,6 @@ export const size = [
     label: "Min H",
     key: "min-height",
     control: Input,
-    suffix: "px",
     placeholder: "px",
     width: "48px",
     textAlign: "center",
@@ -139,7 +133,6 @@ export const size = [
     key: "max-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -148,7 +141,6 @@ export const size = [
     key: "max-height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },