@draftbit/core 46.2.1-f4deff.4 → 46.2.1

package/src/mappings/Carousel.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createResizeModeProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createResizeModeProp, createColorProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Carousel",
         tag: "Carousel",
         category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         description: "A horizontal scrolling carousel of images",
         layout: {
             height: 250,

package/src/mappings/Carousel.ts

@@ -2,6 +2,7 @@ import {
   COMPONENT_TYPES,
   createResizeModeProp,
   createColorProp,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -9,6 +10,7 @@ export const SEED_DATA = [
     name: "Carousel",
     tag: "Carousel",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     description: "A horizontal scrolling carousel of images",
     layout: {
       height: 250,

package/src/mappings/Checkbox.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createBoolProp, createIconProp, createStaticNumberProp, createColorProp, createFieldNameProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createIconProp, createStaticNumberProp, createColorProp, createFieldNameProp, GROUPS, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Checkbox",
     tag: "Checkbox",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
     props: {
         fieldName: createFieldNameProp({

package/src/mappings/Checkbox.ts

@@ -7,12 +7,14 @@ import {
   createFieldNameProp,
   GROUPS,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Checkbox",
   tag: "Checkbox",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
   props: {
     fieldName: createFieldNameProp({

package/src/mappings/CheckboxGroup.js

@@ -1,10 +1,11 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, createTextProp, PROP_TYPES, createFieldNameProp, createDirectionProp, Triggers, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, createTextProp, PROP_TYPES, createFieldNameProp, createDirectionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Checkbox Group",
     tag: "CheckboxGroup",
     category: COMPONENT_TYPES.deprecated,
     layout: {},
     triggers: [Triggers.OnValueChange],
+    stylesPanelSections: [StylesPanelSections.Margins],
     props: {
         direction: createDirectionProp(),
         values: createTextProp({

package/src/mappings/CheckboxGroup.ts

@@ -7,6 +7,7 @@ import {
   createFieldNameProp,
   createDirectionProp,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +16,7 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.deprecated,
   layout: {},
   triggers: [Triggers.OnValueChange],
+  stylesPanelSections: [StylesPanelSections.Margins],
   props: {
     direction: createDirectionProp(),
     values: createTextProp({

package/src/mappings/CheckboxRow.js

@@ -1,8 +1,13 @@
-import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, } from "@draftbit/types";
+import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Checkbox Row",
     tag: "CheckboxRow",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         minHeight: 50,
     },

package/src/mappings/CheckboxRow.ts

@@ -9,12 +9,18 @@ import {
   COMPONENT_TYPES,
   Triggers,
   createColorProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Checkbox Row",
   tag: "CheckboxRow",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     minHeight: 50,
   },

package/src/mappings/CircleImage.js

@@ -1,9 +1,10 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createImageProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createImageProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Circle Image",
     tag: "CircleImage",
     description: "A circle image",
     category: COMPONENT_TYPES.media,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     props: {
         source: createImageProp(),
         size: {

package/src/mappings/CircleImage.ts

@@ -4,6 +4,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   createImageProp,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,7 @@ export const SEED_DATA = {
   tag: "CircleImage",
   description: "A circle image",
   category: COMPONENT_TYPES.media,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   props: {
     source: createImageProp(),
     size: {

package/src/mappings/Container.js

@@ -1,9 +1,10 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Container",
     tag: "Container",
     description: "A container component with gutter padding",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         height: 250,
     },

package/src/mappings/Container.ts

@@ -6,6 +6,7 @@ import {
   createElevationType,
   createImageProp,
   createResizeModeProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,7 @@ export const SEED_DATA = {
   tag: "Container",
   description: "A container component with gutter padding",
   category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     height: 250,
   },

package/src/mappings/Divider.js

@@ -1,9 +1,10 @@
-import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, } from "@draftbit/types";
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Divider",
         tag: "Divider",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         description: "A horizontal line used to divide content",
         preview_image_url: "{CLOUDINARY_URL}/Divider.png",
         supports_list_render: false,

package/src/mappings/Divider.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   COMPONENT_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -10,6 +11,7 @@ export const SEED_DATA = [
     name: "Divider",
     tag: "Divider",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     description: "A horizontal line used to divide content",
     preview_image_url: "{CLOUDINARY_URL}/Divider.png",
     supports_list_render: false,

package/src/mappings/FAB.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createIconProp, createColorProp, GROUPS, createBoolProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createColorProp, GROUPS, createBoolProp, createIconSizeProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "FAB",
     tag: "FAB",
     category: COMPONENT_TYPES.button,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     description: "A mini round icon FAB",
     layout: {},
     triggers: [Triggers.OnPress],

package/src/mappings/FAB.ts

@@ -7,12 +7,14 @@ import {
   createIconSizeProp,
   createActionProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "FAB",
   tag: "FAB",
   category: COMPONENT_TYPES.button,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   description: "A mini round icon FAB",
   layout: {},
   triggers: [Triggers.OnPress],

package/src/mappings/Fetch.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
 /* TODO remove, still used inside the builder in a weird way */
 export const SEED_DATA = {
     name: "Fetch",
     tag: "Fetch",
     description: "Rest API Declarative Fetch component. Uses react-request internally",
     category: COMPONENT_TYPES.data,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     layout: {
         minHeight: 40,
     },

package/src/mappings/Fetch.ts

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
 /* TODO remove, still used inside the builder in a weird way */
 export const SEED_DATA = {
   name: "Fetch",
@@ -6,6 +6,7 @@ export const SEED_DATA = {
   description:
     "Rest API Declarative Fetch component. Uses react-request internally",
   category: COMPONENT_TYPES.data,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
   layout: {
     minHeight: 40,
   },

package/src/mappings/FieldSearchBarFull.js

@@ -1,10 +1,11 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Search Bar",
         tag: "FieldSearchBarFull",
         description: "A search bar with accompanying search icon and clear button.",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
         supports_list_render: false,
         triggers: [Triggers.OnChange],

package/src/mappings/FieldSearchBarFull.ts

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -13,6 +14,7 @@ export const SEED_DATA = [
     tag: "FieldSearchBarFull",
     description: "A search bar with accompanying search icon and clear button.",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
     supports_list_render: false,
     triggers: [Triggers.OnChange], // TODO Triggers.OnSubmit for multiple triggers

package/src/mappings/FlatList.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "List",
     tag: "FlatList",
     description: "A basic List component",
     category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         flex: 1,
     },

package/src/mappings/FlatList.ts

@@ -2,6 +2,7 @@ import {
   COMPONENT_TYPES,
   createNumColumnsType,
   createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -9,6 +10,7 @@ export const SEED_DATA = {
   tag: "FlatList",
   description: "A basic List component",
   category: COMPONENT_TYPES.data,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     flex: 1,
   },

package/src/mappings/HeaderLarge.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createActionProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Header Large",
         tag: "HeaderLarge",
         description: "A large header with an optional touchable right aligned text and icon.",
         category: COMPONENT_TYPES.header,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         layout: {},
         triggers: [Triggers.OnPress],
         props: {

package/src/mappings/HeaderLarge.ts

@@ -4,6 +4,7 @@ import {
   createTextProp,
   createActionProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -13,6 +14,7 @@ export const SEED_DATA = [
     description:
       "A large header with an optional touchable right aligned text and icon.",
     category: COMPONENT_TYPES.header,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/HeaderMedium.js

@@ -1,10 +1,11 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Header Medium",
         tag: "HeaderMedium",
         description: "A medium header with an optional touchable right aligned text and icon.",
         category: COMPONENT_TYPES.header,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         preview_image_url: "{CLOUDINARY_URL}/Header_HeadlineMediumIconText.png",
         supports_list_render: false,
         props: {

package/src/mappings/HeaderMedium.ts

@@ -3,6 +3,7 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -12,6 +13,7 @@ export const SEED_DATA = [
     description:
       "A medium header with an optional touchable right aligned text and icon.",
     category: COMPONENT_TYPES.header,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Header_HeadlineMediumIconText.png",
     supports_list_render: false,
     props: {

package/src/mappings/HeaderOverline.js

@@ -1,10 +1,11 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Header Overline",
         tag: "HeaderOverline",
         description: "A small header with an optional touchable right aligned text and icon.",
         category: COMPONENT_TYPES.header,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         preview_image_url: "{CLOUDINARY_URL}/Header_OverlineIconText.png",
         supports_list_render: false,
         props: {

package/src/mappings/HeaderOverline.ts

@@ -3,6 +3,7 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -12,6 +13,7 @@ export const SEED_DATA = [
     description:
       "A small header with an optional touchable right aligned text and icon.",
     category: COMPONENT_TYPES.header,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Header_OverlineIconText.png",
     supports_list_render: false,
     props: {

package/src/mappings/Icon.js

@@ -1,9 +1,16 @@
-import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createIconProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createIconProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Icon",
     tag: "Icon",
     description: "An icon",
     category: COMPONENT_TYPES.basic,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Background,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
     layout: {},
     props: {
         name: {

package/src/mappings/Icon.ts

@@ -4,6 +4,7 @@ import {
   createNumberProp,
   createColorProp,
   createIconProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,13 @@ export const SEED_DATA = {
   tag: "Icon",
   description: "An icon",
   category: COMPONENT_TYPES.basic,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Background,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
   props: {
     name: {

package/src/mappings/IconButton.js

@@ -1,10 +1,15 @@
-import { COMPONENT_TYPES, GROUPS, createIconProp, createColorProp, createNumberProp, createBoolProp, createActionProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, GROUPS, createIconProp, createColorProp, createNumberProp, createBoolProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Icon Button",
     tag: "IconButton",
     category: COMPONENT_TYPES.button,
     layout: {},
     triggers: [Triggers.OnPress],
+    stylesPanelSections: [
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+        StylesPanelSections.Position,
+    ],
     props: {
         onPress: createActionProp(),
         icon: createIconProp(),

package/src/mappings/IconButton.ts

@@ -7,6 +7,7 @@ import {
   createBoolProp,
   createActionProp,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +16,11 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.button,
   layout: {},
   triggers: [Triggers.OnPress],
+  stylesPanelSections: [
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+    StylesPanelSections.Position,
+  ],
   props: {
     onPress: createActionProp(),
     icon: createIconProp(),

package/src/mappings/Image.js

@@ -1,9 +1,15 @@
-import { COMPONENT_TYPES, createImageProp, createResizeModeProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Image",
     tag: "Image",
     description: "A basic Image Component",
     category: COMPONENT_TYPES.media,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         width: 250,
         height: 250,

package/src/mappings/Image.ts

@@ -2,6 +2,7 @@ import {
   COMPONENT_TYPES,
   createImageProp,
   createResizeModeProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -9,6 +10,12 @@ export const SEED_DATA = {
   tag: "Image",
   description: "A basic Image Component",
   category: COMPONENT_TYPES.media,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     width: 250,
     height: 250,

package/src/mappings/ImageBackground.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createImageProp, createResizeModeProp, createTextEnumProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, createTextEnumProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Image Background",
     tag: "ImageBackground",
@@ -6,6 +6,7 @@ export const SEED_DATA = {
     code_link: "https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js",
     description: "A very simple drop-in replacement for Image that allows you to use an Image as a background.",
     category: COMPONENT_TYPES.media,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         width: "100%",
         height: "100%",

package/src/mappings/ImageBackground.ts

@@ -4,6 +4,7 @@ import {
   createResizeModeProp,
   createTextEnumProp,
   createColorProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -16,6 +17,7 @@ export const SEED_DATA = {
   description:
     "A very simple drop-in replacement for Image that allows you to use an Image as a background.",
   category: COMPONENT_TYPES.media,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     width: "100%",
     height: "100%",

package/src/mappings/KeyboardAvoidingView.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Keyboard Avoiding View",
     tag: "KeyboardAvoidingView",
     description: "View that moves out of the way of the virtual keyboard. ",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     props: {
         enabled: {
             label: "Enabled",

package/src/mappings/KeyboardAvoidingView.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   GROUPS,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   tag: "KeyboardAvoidingView",
   description: "View that moves out of the way of the virtual keyboard. ",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     enabled: {
       label: "Enabled",

package/src/mappings/KeyboardAwareScrollView.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Keyboard Aware Scroll View",
     tag: "KeyboardAwareScrollView",
     description: "View that moves pushes the content when virtual keyboard is open.",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {
         viewIsInsideTabBar: createStaticBoolProp({

package/src/mappings/KeyboardAwareScrollView.ts

@@ -3,6 +3,7 @@ import {
   createStaticBoolProp,
   createStaticNumberProp,
   createTextEnumProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,7 @@ export const SEED_DATA = {
   description:
     "View that moves pushes the content when virtual keyboard is open.",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     viewIsInsideTabBar: createStaticBoolProp({