Add wrapper component to data provider so that it can be styled

packages/client/src/utils/styleable.js

@@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => {
   if (componentId === get(builderStore).selectedComponentId) {
     const style = window.getComputedStyle(node)
     const property = style?.display === "table-row" ? "outline" : "border"
-    return styleString + `;${property}: 2px solid #4285f4 !important;`
+    return (
+      styleString +
+      `;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;`
+    )
   } else {
     return styleString
   }

packages/standard-components/src/DataProvider.svelte

@@ -103,6 +103,8 @@
   }
 </script>
 
+<div use:styleable={$component.styles}>
   <Provider {actions} data={dataContext}>
     <slot />
   </Provider>
+</div>