feat: support size prop for input components

- DatePickerInput, NumberInput, Select, PasswordInput, TextInput

src/NumberInput/NumberInput.stories.js

@@ -1,11 +1,24 @@
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from "@storybook/addon-knobs";
 import Component from "./NumberInput.Story.svelte";
 
 export default { title: "NumberInput", decorators: [withKnobs] };
 
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Default size": undefined,
+  "Small size (sm)": "sm",
+};
+
 export const Default = () => ({
   Component,
   props: {
+    size: select("Field size (size)", sizes, undefined) || undefined,
     id: text("NumberInput id", "number-input-id"),
     name: text("NumberInput name", "number-input-name"),
     label: text("Label (label)", "Number Input label"),

src/NumberInput/NumberInput.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let value = "";
   export let step = 1;
   export let max = undefined;
@@ -76,7 +77,8 @@
     class:bx--number--readonly={readonly}
     class:bx--number--light={light}
     class:bx--number--nolabel={hideLabel}
-    class:bx--number--mobile={mobile}>
+    class:bx--number--mobile={mobile}
+    class={size && `bx--number--${size}`}>
     {#if mobile}
       {#if label}
         <label