Add gap to container settings and remove some colours from color picker

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -22,8 +22,6 @@
       label: "Grays",
       colors: [
         "white",
-        "gray-50",
-        "gray-75",
         "gray-100",
         "gray-200",
         "gray-300",

packages/standard-components/manifest.json

@@ -174,6 +174,32 @@
           }
         ],
         "defaultValue": "shrink"
+      },
+      {
+        "type": "select",
+        "label": "Gap",
+        "key": "gap",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [
+          {
+            "label": "None",
+            "value": "N"
+          },
+          {
+            "label": "Small",
+            "value": "S"
+          },
+          {
+            "label": "Medium",
+            "value": "M"
+          },
+          {
+            "label": "Large",
+            "value": "L"
+          }
+        ],
+        "defaultValue": "M"
       }
     ]
   },
@@ -368,7 +394,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
@@ -462,7 +488,7 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "Medium",
+        "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
         "options": [{

packages/standard-components/src/Container.svelte

@@ -8,17 +8,23 @@
   export let hAlign
   export let vAlign
   export let size
+  export let gap
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
+  $: gapClass = gap ? `gap-${gap}` : ""
+  $: classNames = [
+    directionClass,
+    hAlignClass,
+    vAlignClass,
+    sizeClass,
+    gapClass,
+  ].join(" ")
 </script>
 
-<div
+<div class={classNames} use:styleable={$component.styles}>
-  class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  use:styleable={$component.styles}
->
   <slot />
 </div>
 
@@ -83,4 +89,14 @@
   .direction-column.hAlign-stretch {
     align-items: stretch;
   }
+
+  .gap-S {
+    gap: 8px;
+  }
+  .gap-M {
+    gap: 16px;
+  }
+  .gap-L {
+    gap: 32px;
+  }
 </style>