refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities

src/components/TextInput/TextInput.svelte

@@ -1,69 +1,76 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let helperText = '';
-  export let hideLabel = false;
-  export let id = Math.random();
-  export let name = undefined;
-  export let invalid = false;
-  export let invalidText = '';
-  export let labelText = '';
+  export let type = "";
+  export let value = "";
+  export let placeholder = "";
   export let light = false;
-  export let placeholder = '';
-  export let style = undefined;
-  export let type = '';
-  export let value = '';
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let helperText = "";
+  export let labelText = "";
+  export let hideLabel = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let ref = null;
 
-  import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
-  import { cx } from '../../lib';
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
 
   $: errorId = `error-${id}`;
 </script>
 
 <div
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  class={cx('--form-item', '--text-input-wrapper', className)}
-  {style}>
+  on:mouseleave>
   {#if labelText}
     <label
       for={id}
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}>
       {labelText}
     </label>
   {/if}
   {#if helperText}
-    <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}>
       {helperText}
     </div>
   {/if}
-  <div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
+  <div
+    data-invalid={invalid || undefined}
+    class:bx--text-input__field-wrapper={true}>
     {#if invalid}
-      <WarningFilled16 class={cx('--text-input__invalid-icon')} />
+      <WarningFilled16 class="bx--text-input__invalid-icon" />
     {/if}
     <input
+      bind:this={ref}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
-      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      {disabled}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {value}
+      class:bx--text-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
       on:change
       on:input
       on:input={({ target }) => {
         value = target.value;
       }}
       on:focus
-      on:blur
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {value}
-      {disabled} />
+      on:blur />
   </div>
   {#if invalid}
-    <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
+    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
   {/if}
 </div>