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/RadioButton/RadioButton.svelte

@@ -1,23 +1,20 @@
 <script>
-  let className = undefined;
-  export { className as class };
+  export let value = "";
   export let checked = false;
   export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let labelPosition = "right"; // "left" | "right"
+  export let labelText = "";
   export let hideLabel = false;
-  export let id = Math.random();
-  export let labelPosition = 'right';
-  export let labelText = '';
-  export let name = '';
-  export let style = undefined;
-  export let value = '';
+  export let name = "";
 
-  import { getContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { cx } from '../../lib';
+  import { getContext } from "svelte";
+  import { writable } from "svelte/store";
 
-  const ctx = getContext('RadioButtonGroup');
-
-  let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
+  const ctx = getContext("RadioButtonGroup");
+  const selectedValue = ctx
+    ? ctx.selectedValue
+    : writable(checked ? value : undefined);
 
   if (ctx) {
     ctx.add({ id, checked, disabled, value });
@@ -27,24 +24,25 @@
 </script>
 
 <div
-  class={cx('--radio-button-wrapper', labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`, className)}
-  {style}>
+  class:bx--radio-button-wrapper={true}
+  class:bx--radio-button-wrapper--label-left={labelPosition === 'left'}
+  {...$$restProps}>
   <input
     type="radio"
-    class={cx('--radio-button')}
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    {value}
+    class:bx--radio-button={true}
     on:change
     on:change={() => {
       if (ctx) {
         ctx.update(value);
       }
-    }}
-    {id}
-    {name}
-    {checked}
-    {disabled}
-    {value} />
-  <label class={cx('--radio-button__label')} for={id}>
-    <span class={cx('--radio-button__appearance')} />
-    <span class={cx(hideLabel && '--visually-hidden')}>{labelText}</span>
+    }} />
+  <label class:bx--radio-button__label={true} for={id}>
+    <span class:bx--radio-button__appearance={true} />
+    <span class:bx--visually-hidden={hideLabel}>{labelText}</span>
   </label>
 </div>