@draftbit/core 46.2.1-f4deff.4 → 46.2.1

package/src/mappings/Layout.js

@@ -1,9 +1,10 @@
-import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, } from "@draftbit/types";
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Row",
         tag: "Row",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             justifyContent: {
                 label: "Align Horizontally",
@@ -78,6 +79,7 @@ export const SEED_DATA = [
         name: "Stack",
         tag: "Stack",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             justifyContent: {
                 group: GROUPS.style,
@@ -105,6 +107,7 @@ export const SEED_DATA = [
         name: "Center",
         tag: "Center",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             width: {
                 label: "Width",
@@ -142,6 +145,7 @@ export const SEED_DATA = [
         name: "Circle",
         tag: "Circle",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {
                 label: "Size",
@@ -169,6 +173,7 @@ export const SEED_DATA = [
         name: "Square",
         tag: "Square",
         category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {
                 label: "Size",

package/src/mappings/Layout.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   COMPONENT_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -10,6 +11,7 @@ export const SEED_DATA = [
     name: "Row",
     tag: "Row",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {
         label: "Align Horizontally",
@@ -84,6 +86,7 @@ export const SEED_DATA = [
     name: "Stack",
     tag: "Stack",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {
         group: GROUPS.style,
@@ -111,6 +114,7 @@ export const SEED_DATA = [
     name: "Center",
     tag: "Center",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       width: {
         label: "Width",
@@ -148,6 +152,7 @@ export const SEED_DATA = [
     name: "Circle",
     tag: "Circle",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
         label: "Size",
@@ -175,6 +180,7 @@ export const SEED_DATA = [
     name: "Square",
     tag: "Square",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
         label: "Size",

package/src/mappings/Modal.js

@@ -1,9 +1,10 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createBoolProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createBoolProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Modal",
     tag: "Modal",
     description: "A basic Modal Component",
     category: COMPONENT_TYPES.container,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
         animationType: {
             group: GROUPS.basic,

package/src/mappings/Modal.ts

@@ -4,6 +4,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   createBoolProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,7 @@ export const SEED_DATA = {
   tag: "Modal",
   description: "A basic Modal Component",
   category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
   props: {
     animationType: {
       group: GROUPS.basic,

package/src/mappings/NumberInput.js

@@ -1,4 +1,4 @@
-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, StylesPanelSections, } from "@draftbit/types";
 const NUMBER_INPUT_PROPS = {
     allowFontScaling: {
         group: GROUPS.advanced,
@@ -225,6 +225,15 @@ export const SEED_DATA = [
         tag: "NumberInput",
         description: "An input field that allows users to type in data.",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
         preview_image_url: "https://res.cloudinary.com/altos/image/upload/draftbit/Jigsaw/TextInput.png",
         supports_list_render: false,
         layout: {

package/src/mappings/NumberInput.ts

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 const NUMBER_INPUT_PROPS = {
@@ -243,6 +244,15 @@ export const SEED_DATA = [
     tag: "NumberInput",
     description: "An input field that allows users to type in data.",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
     preview_image_url:
       "https://res.cloudinary.com/altos/image/upload/draftbit/Jigsaw/TextInput.png",
     supports_list_render: false,

package/src/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         group: GROUPS.data,
@@ -115,6 +115,15 @@ export const SEED_DATA = [
         tag: "Picker",
         description: "A component used to pick a value from a set of options",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
         preview_image_url: "{CLOUDINARY_URL}/Picker.png",
         supports_list_render: false,
         triggers: SEED_DATA_TRIGGERS,

package/src/mappings/Picker.ts

@@ -7,6 +7,7 @@ import {
   FIELD_NAME,
   createIconSizeProp,
   createColorProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -129,6 +130,15 @@ export const SEED_DATA = [
     tag: "Picker",
     description: "A component used to pick a value from a set of options",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
     preview_image_url: "{CLOUDINARY_URL}/Picker.png",
     supports_list_render: false,
     triggers: SEED_DATA_TRIGGERS,

package/src/mappings/ProgressBar.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Progress Bar",
         tag: "ProgressBar",
         description: "A horizontal bar used to show completed progress",
         category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
         supports_list_render: false,
         props: {

package/src/mappings/ProgressBar.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -11,6 +12,7 @@ export const SEED_DATA = [
     tag: "ProgressBar",
     description: "A horizontal bar used to show completed progress",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
     supports_list_render: false,
     props: {

package/src/mappings/ProgressCircle.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Progress Circle",
     tag: "ProgressCircle",
     description: "A circle used to show completed progress",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
     supports_list_render: false,
     props: {

package/src/mappings/ProgressCircle.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   tag: "ProgressCircle",
   description: "A circle used to show completed progress",
   category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
   supports_list_render: false,
   props: {

package/src/mappings/ProgressIndicator.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Progress Indicator",
     tag: "ProgressIndicator",
     description: "A component used to show current Step in a process",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     preview_image_url: "{CLOUDINARY_URL}/Control_Slider.png",
     supports_list_render: false,
     layout: {},

package/src/mappings/ProgressIndicator.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   tag: "ProgressIndicator",
   description: "A component used to show current Step in a process",
   category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   preview_image_url: "{CLOUDINARY_URL}/Control_Slider.png",
   supports_list_render: false,
   layout: {},

package/src/mappings/RadioButton.js

@@ -1,8 +1,9 @@
-import { GROUPS, COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createIconProp, createTextProp, Triggers, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createIconProp, createTextProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Radio Button",
     tag: "RadioButton",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     triggers: [Triggers.OnPress],
     props: {
         value: createTextProp({

package/src/mappings/RadioButton.ts

@@ -7,12 +7,14 @@ import {
   createIconProp,
   createTextProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button",
   tag: "RadioButton",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {
     value: createTextProp({

package/src/mappings/RadioButtonGroup.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Radio Button Group",
     tag: "RadioButtonGroup",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [StylesPanelSections.Margins],
     layout: {},
     triggers: [Triggers.OnValueChange],
     props: {

package/src/mappings/RadioButtonGroup.ts

@@ -3,12 +3,14 @@ import {
   createFieldNameProp,
   createDirectionProp,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button Group",
   tag: "RadioButtonGroup",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [StylesPanelSections.Margins],
   layout: {},
   triggers: [Triggers.OnValueChange],
   props: {

package/src/mappings/RadioButtonRow.js

@@ -1,8 +1,13 @@
-import { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, GROUPS, } from "@draftbit/types";
+import { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Radio Button Row",
     tag: "RadioButtonRow",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {},
     props: {
         label: createTextProp({

package/src/mappings/RadioButtonRow.ts

@@ -4,12 +4,18 @@ import {
   COMPONENT_TYPES,
   createColorProp,
   GROUPS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button Row",
   tag: "RadioButtonRow",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
   props: {
     label: createTextProp({

package/src/mappings/ScrollView.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createStaticBoolProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Scroll View",
     tag: "ScrollView",
     description: "A basic ScrollView component",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {
         horizontal: createStaticBoolProp({

package/src/mappings/ScrollView.ts

@@ -1,10 +1,15 @@
-import { COMPONENT_TYPES, createStaticBoolProp } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Scroll View",
   tag: "ScrollView",
   description: "A basic ScrollView component",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     horizontal: createStaticBoolProp({

package/src/mappings/Slider.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createFieldNameProp, createIconProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createFieldNameProp, createIconProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Slider",
     tag: "Slider",
     description: "A component used to set a value in a range",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {
         marginLeft: 12,
         marginRight: 12,

package/src/mappings/Slider.ts

@@ -6,6 +6,7 @@ import {
   createFieldNameProp,
   createIconProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,7 @@ export const SEED_DATA = {
   tag: "Slider",
   description: "A component used to set a value in a range",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   layout: {
     marginLeft: 12,
     marginRight: 12,

package/src/mappings/StarRating.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Star Rating",
     tag: "StarRating",
     description: "A star rating component",
     category: COMPONENT_TYPES.button,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     triggers: [Triggers.OnPress],
     props: {
         starSize: createStaticNumberProp({

package/src/mappings/StarRating.ts

@@ -5,6 +5,7 @@ import {
   createStaticBoolProp,
   Triggers,
   createColorProp,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,6 +13,7 @@ export const SEED_DATA = {
   tag: "StarRating",
   description: "A star rating component",
   category: COMPONENT_TYPES.button,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {
     starSize: createStaticNumberProp({

package/src/mappings/Stepper.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

@@ -5,6 +5,7 @@ import {
   createFieldNameProp,
   createStaticNumberProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -13,6 +14,7 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/Surface.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createElevationType } from "@draftbit/types";
+import { COMPONENT_TYPES, createElevationType, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Surface",
     tag: "Surface",
     description: "An elevated container",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {
         minHeight: 40,
     },

package/src/mappings/Surface.ts

@@ -1,10 +1,15 @@
-import { COMPONENT_TYPES, createElevationType } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createElevationType,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Surface",
   tag: "Surface",
   description: "An elevated container",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     minHeight: 40,
   },

package/src/mappings/Switch.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, GROUPS, createBoolProp, createColorProp, createFieldNameProp, createTextProp, createRowDirectionProp, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, GROUPS, createBoolProp, createColorProp, createFieldNameProp, createTextProp, createRowDirectionProp, Triggers, StylesPanelSections, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
 export const SEED_DATA = [
     {
         name: "Switch",
         tag: "Switch",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
         layout: {},
         triggers: SEED_DATA_TRIGGERS,
         props: {
@@ -35,6 +36,11 @@ export const SEED_DATA = [
         name: "Switch Row",
         tag: "SwitchRow",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Margins,
+            StylesPanelSections.Effects,
+        ],
         layout: {
             marginLeft: 0,
             marginRight: 0,

package/src/mappings/Switch.ts

@@ -7,6 +7,8 @@ import {
   createTextProp,
   createRowDirectionProp,
   Triggers,
+  StylesPanelSections,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
 export const SEED_DATA = [
@@ -14,6 +16,7 @@ export const SEED_DATA = [
     name: "Switch",
     tag: "Switch",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
     layout: {},
     triggers: SEED_DATA_TRIGGERS,
     props: {
@@ -44,6 +47,11 @@ export const SEED_DATA = [
     name: "Switch Row",
     tag: "SwitchRow",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Margins,
+      StylesPanelSections.Effects,
+    ],
     layout: {
       marginLeft: 0,
       marginRight: 0,

package/src/mappings/Text.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, Triggers, createActionProp, createTextProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, Triggers, createActionProp, createTextProp, StylesPanelSections, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     accessibilityLabel: {
         group: GROUPS.accessibility,
@@ -201,6 +201,12 @@ export const SEED_DATA = [
         tag: "Text",
         description: "A basic Text component",
         category: COMPONENT_TYPES.basic,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Effects,
+        ],
         layout: {
             color: "strong", // This is translated on collector script run by the extractValueAndType function
         },
@@ -222,6 +228,12 @@ export const SEED_DATA = [
         name: "Link",
         tag: "Link",
         category: COMPONENT_TYPES.button,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.LayoutSelectedItem,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Effects,
+        ],
         layout: {
             color: "primary",
         },