Respect licensed component settings in SettingsBar

packages/client/src/components/preview/SettingsBar.svelte

@@ -273,6 +273,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              disabled={!!setting.license}
               {component}
             />
           {/each}
@@ -281,6 +282,7 @@
             prop={setting.key}
             options={setting.options}
             label={setting.label}
+            disabled={!!setting.license}
             {component}
           />
         {/if}
@@ -289,11 +291,16 @@
           prop={setting.key}
           icon={setting.barIcon}
           title={setting.barTitle || setting.label}
+          disabled={!!setting.license}
           bool
           {component}
         />
       {:else if setting.type === "color"}
-        <SettingsColorPicker prop={setting.key} {component} />
+        <SettingsColorPicker
+          prop={setting.key}
+          {component}
+          disabled={!!setting.license}
+        />
       {/if}
       {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />

packages/client/src/components/preview/SettingsButton.svelte

@@ -10,6 +10,7 @@
   export let bool = false
   export let active = false
   export let component
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
 
@@ -22,6 +23,7 @@
 <div
   {title}
   class:active
+  class:disabled
   on:click={() => {
     if (prop) {
       const newValue = bool ? !currentValue : value
@@ -50,4 +52,8 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
+  .disabled {
+    pointer-events: none;
+    color: var(--spectrum-global-color-gray-400);
+  }
 </style>

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -4,14 +4,15 @@
 
   export let prop
   export let component
+  export let disabled = false
 
   $: currentValue = component?.[prop]
 </script>
 
-<div>
+<div class:disabled>
   <ColorPicker
     size="S"
-    value={currentValue}
+    value={disabled ? null : currentValue}
     on:change={e => {
       if (prop) {
         builderStore.actions.updateProp(prop, e.detail)
@@ -24,4 +25,7 @@
   div {
     padding: 0 4px;
   }
+  div.disabled {
+    pointer-events: none;
+  }
 </style>

packages/client/src/components/preview/SettingsPicker.svelte

@@ -6,6 +6,7 @@
   export let options
   export let label
   export let component
+  export let disabled = false
 
   $: currentValue = component?.[prop]
 </script>
@@ -16,6 +17,7 @@
     autoWidth
     placeholder={label}
     {options}
+    {disabled}
     value={currentValue}
     on:change={e => {
       if (prop) {