Add wrapper to color picker and fix helper import

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -5,7 +5,7 @@
   import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import Input from "../Form/Input.svelte"
-  import { capitalise } from "helpers"
+  import { capitalise } from "../utils/helpers"
 
   export let value
 
@@ -108,12 +108,13 @@
   }
 </script>
 
-<div
+<div class="container">
+  <div
     class="preview"
     style="background: {color};"
     on:click={() => (open = true)}
-/>
+  />
-{#if open}
+  {#if open}
     <div
       use:clickOutside={() => (open = false)}
       transition:fly={{ y: -20, duration: 200 }}
@@ -150,13 +151,22 @@
             value={customValue}
             on:change
           />
-        <Icon size="S" name="Close" hoverable on:click={() => onChange(null)} />
+          <Icon
+            size="S"
+            name="Close"
+            hoverable
+            on:click={() => onChange(null)}
+          />
         </div>
       </div>
     </div>
-{/if}
+  {/if}
+</div>
 
 <style>
+  .container {
+    position: relative;
+  }
   .preview {
     width: 32px;
     height: 32px;
@@ -169,7 +179,7 @@
     box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
   }
   .spectrum-Popover {
-    width: 100%;
+    width: 210px;
     z-index: 999;
     top: 100%;
     padding: var(--spacing-l) var(--spacing-xl);

packages/bbui/src/utils/helpers.js

@@ -4,3 +4,5 @@ export const generateID = () => {
   // Starts with a letter so that its a valid DOM ID
   return `A${rand}`
 }
+
+export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)