Fix component empty state and invalid state styling

packages/client/src/components/Component.svelte

@@ -127,7 +127,9 @@
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
-  $: empty = interactive && !children.length && hasChildren
+  $: empty =
+    (interactive && !children.length && hasChildren) ||
+    hasMissingRequiredSettings
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings

packages/client/src/components/app/ComponentPlaceholder.svelte

@@ -2,18 +2,16 @@
   import { getContext } from "svelte"
   import { builderStore } from "stores"
 
-  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>
 
 {#if $builderStore.inBuilder && requiredSetting}
-  <div use:styleable={$component.styles}>
   <div class="component-placeholder">
     <span>
-        Add the <mark>{requiredSetting.label}</mark> setting to start using your
+      Add the <mark>{requiredSetting.label}</mark> setting to start using your component
-        component -
+      -
     </span>
     <span
       class="spectrum-Link"
@@ -24,7 +22,6 @@
       Show me
     </span>
   </div>
-  </div>
 {/if}
 
 <style>

packages/client/src/components/app/DataProvider.svelte

@@ -132,12 +132,8 @@
       <div class="loading">
         <ProgressCircle />
       </div>
-    {:else}
-      {#if $component.emptyState}
-        <Placeholder />
     {:else}
       <slot />
-      {/if}
       {#if paginate && $fetch.supportsPagination}
         <div class="pagination">
           <Pagination