@draftbit/core 46.2.1-de631b.0 → 46.2.2-088abf.0

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,11 +1,22 @@
-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,
         name: "accessibilityLabel",
         label: "accessibilityLabel",
         description: "Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.",
-        editable: false,
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+    },
+    accessibilityHint: {
+        group: GROUPS.accessibility,
+        name: "accessibilityHint",
+        label: "accessibilityHint",
+        description: "An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.",
+        editable: true,
         required: false,
         formType: FORM_TYPES.string,
         propType: PROP_TYPES.STRING,
@@ -29,7 +40,7 @@ const SEED_DATA_PROPS = {
             "imagebutton",
             "adjustable",
         ],
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,
@@ -39,8 +50,8 @@ const SEED_DATA_PROPS = {
         group: GROUPS.accessibility,
         name: "accessible",
         label: "accessible",
-        description: "When set to true, indicates that the view is an accessibility element. The default value for a Text element is true.See the Accessibility guide for more information.",
-        editable: false,
+        description: "When set to true, indicates that the view is an accessibility element. The default value for a Text element is true. See the Accessibility guide for more information.",
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -51,7 +62,7 @@ const SEED_DATA_PROPS = {
         name: "adjustsFontSizeToFit",
         label: "adjustsFontSizeToFit",
         description: "Specifies whether fonts should be scaled down automatically to fit given style constraints.",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -62,7 +73,7 @@ const SEED_DATA_PROPS = {
         name: "allowFontScaling",
         label: "allowFontScaling",
         description: "Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -72,9 +83,9 @@ const SEED_DATA_PROPS = {
         group: GROUPS.advanced,
         name: "dataDetectorType",
         label: "dataDetectorType",
-        description: "Determines the types of data converted to clickable URLs in the text element. By default no data types are detected.You can provide only one type.Possible values for dataDetectorType are:\n'phoneNumber'\n'link'\n'email'\n'none'\n'all'\n",
+        description: "Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. You can provide only one type. Possible values for dataDetectorType are:\n'phoneNumber'\n'link'\n'email'\n'none'\n'all'\n",
         options: ["phoneNumber", "link", "email", "none", "all"],
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,
@@ -85,7 +96,7 @@ const SEED_DATA_PROPS = {
         name: "disabled",
         label: "disabled",
         description: "Specifies the disabled state of the text view for testing purposes",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -108,25 +119,21 @@ const SEED_DATA_PROPS = {
         name: "maxFontSizeMultiplier",
         label: "maxFontSizeMultiplier",
         description: "Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:\nnull/undefined (default): inherit from the parent node or the global default (0)\n0: no max, ignore parent/global default\n>= 1: sets the maxFontSizeMultiplier of this node to this value\n",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.number,
         propType: PROP_TYPES.NUMBER,
         defaultValue: null,
     },
-    minimumFontScale: {
-        group: GROUPS.advanced,
-        name: "minimumFontScale",
-        label: "minimumFontScale",
-        description: "Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).",
-        editable: false,
+    nativeID: {
+        group: GROUPS.accessibility,
+        name: "nativeID",
+        label: "nativeID",
+        description: "Used to locate this view from native code.",
+        editable: true,
         required: false,
-        formType: FORM_TYPES.number,
-        propType: PROP_TYPES.NUMBER,
-        min: 0.01,
-        step: 0.01,
-        precision: 2,
-        max: 1.0,
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
         defaultValue: null,
     },
     numberOfLines: {
@@ -147,7 +154,7 @@ const SEED_DATA_PROPS = {
         name: "selectable",
         label: "selectable",
         description: "Lets the user select text, to use the native copy and paste functionality.",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -158,7 +165,7 @@ const SEED_DATA_PROPS = {
         name: "selectionColor",
         label: "selectionColor",
         description: "The highlight color of the text.",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.color,
         propType: PROP_TYPES.THEME,
@@ -169,7 +176,7 @@ const SEED_DATA_PROPS = {
         name: "suppressHighlighting",
         label: "suppressHighlighting",
         description: "When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.",
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
@@ -181,7 +188,7 @@ const SEED_DATA_PROPS = {
         label: "textBreakStrategy",
         description: "Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is highQuality.",
         options: ["simple", "highQuality", "balanced"],
-        editable: false,
+        editable: true,
         required: false,
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,
@@ -194,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
         },
@@ -215,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",
         },

package/src/mappings/Text.ts

@@ -6,6 +6,7 @@ import {
   Triggers,
   createActionProp,
   createTextProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -15,7 +16,19 @@ const SEED_DATA_PROPS = {
     label: "accessibilityLabel",
     description:
       "Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.",
-    editable: false,
+    editable: true,
+    required: false,
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: null,
+  },
+  accessibilityHint: {
+    group: GROUPS.accessibility,
+    name: "accessibilityHint",
+    label: "accessibilityHint",
+    description:
+      "An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.",
+    editable: true,
     required: false,
     formType: FORM_TYPES.string,
     propType: PROP_TYPES.STRING,
@@ -40,7 +53,7 @@ const SEED_DATA_PROPS = {
       "imagebutton",
       "adjustable",
     ],
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING,
@@ -51,8 +64,8 @@ const SEED_DATA_PROPS = {
     name: "accessible",
     label: "accessible",
     description:
-      "When set to true, indicates that the view is an accessibility element. The default value for a Text element is true.See the Accessibility guide for more information.",
-    editable: false,
+      "When set to true, indicates that the view is an accessibility element. The default value for a Text element is true. See the Accessibility guide for more information.",
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -64,7 +77,7 @@ const SEED_DATA_PROPS = {
     label: "adjustsFontSizeToFit",
     description:
       "Specifies whether fonts should be scaled down automatically to fit given style constraints.",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -76,7 +89,7 @@ const SEED_DATA_PROPS = {
     label: "allowFontScaling",
     description:
       "Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true.",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -87,9 +100,9 @@ const SEED_DATA_PROPS = {
     name: "dataDetectorType",
     label: "dataDetectorType",
     description:
-      "Determines the types of data converted to clickable URLs in the text element. By default no data types are detected.You can provide only one type.Possible values for dataDetectorType are:\n'phoneNumber'\n'link'\n'email'\n'none'\n'all'\n",
+      "Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. You can provide only one type. Possible values for dataDetectorType are:\n'phoneNumber'\n'link'\n'email'\n'none'\n'all'\n",
     options: ["phoneNumber", "link", "email", "none", "all"],
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING,
@@ -101,7 +114,7 @@ const SEED_DATA_PROPS = {
     label: "disabled",
     description:
       "Specifies the disabled state of the text view for testing purposes",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -126,26 +139,21 @@ const SEED_DATA_PROPS = {
     label: "maxFontSizeMultiplier",
     description:
       "Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:\nnull/undefined (default): inherit from the parent node or the global default (0)\n0: no max, ignore parent/global default\n>= 1: sets the maxFontSizeMultiplier of this node to this value\n",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.number,
     propType: PROP_TYPES.NUMBER,
     defaultValue: null,
   },
-  minimumFontScale: {
-    group: GROUPS.advanced,
-    name: "minimumFontScale",
-    label: "minimumFontScale",
-    description:
-      "Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).",
-    editable: false,
+  nativeID: {
+    group: GROUPS.accessibility,
+    name: "nativeID",
+    label: "nativeID",
+    description: "Used to locate this view from native code.",
+    editable: true,
     required: false,
-    formType: FORM_TYPES.number,
-    propType: PROP_TYPES.NUMBER,
-    min: 0.01,
-    step: 0.01,
-    precision: 2,
-    max: 1.0,
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
     defaultValue: null,
   },
   numberOfLines: {
@@ -168,7 +176,7 @@ const SEED_DATA_PROPS = {
     label: "selectable",
     description:
       "Lets the user select text, to use the native copy and paste functionality.",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -179,7 +187,7 @@ const SEED_DATA_PROPS = {
     name: "selectionColor",
     label: "selectionColor",
     description: "The highlight color of the text.",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.color,
     propType: PROP_TYPES.THEME,
@@ -191,7 +199,7 @@ const SEED_DATA_PROPS = {
     label: "suppressHighlighting",
     description:
       "When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.",
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
@@ -204,7 +212,7 @@ const SEED_DATA_PROPS = {
     description:
       "Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is highQuality.",
     options: ["simple", "highQuality", "balanced"],
-    editable: false,
+    editable: true,
     required: false,
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING,
@@ -218,6 +226,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
     },
@@ -239,6 +253,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",
     },

package/src/mappings/TextArea.js

@@ -205,6 +205,17 @@ const TEXT_AREA_PROPS = {
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
     },
+    textAlignVertical: {
+        group: GROUPS.advanced,
+        label: "Aligns text on the vertical axis",
+        description: "Move the text around in the given component.",
+        options: ["auto", "top", "bottom", "center"],
+        editable: true,
+        required: false,
+        defaultValue: "top",
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+    },
 };
 export const SEED_DATA = {
     name: "Text Area",

package/src/mappings/TextArea.ts

@@ -219,6 +219,17 @@ const TEXT_AREA_PROPS = {
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
   },
+  textAlignVertical: {
+    group: GROUPS.advanced,
+    label: "Aligns text on the vertical axis",
+    description: "Move the text around in the given component.",
+    options: ["auto", "top", "bottom", "center"],
+    editable: true,
+    required: false,
+    defaultValue: "top",
+    formType: FORM_TYPES.flatArray,
+    propType: PROP_TYPES.STRING,
+  },
 };
 
 export const SEED_DATA = {

package/src/mappings/TextField.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createColorProp, createNumberProp, createFieldNameProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createColorProp, createNumberProp, createFieldNameProp, StylesPanelSections, } from "@draftbit/types";
 const TEXT_FIELD_PROPS = {
     allowFontScaling: {
         group: GROUPS.advanced,
@@ -330,6 +330,15 @@ export const SEED_DATA = [
         tag: "TextField",
         description: "A text area with a solid border or underline",
         category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
         preview_image_url: "{CLOUDINARY_URL}/TextArea.png",
         supports_list_render: false,
         triggers: SEED_DATA_TRIGGERS,

package/src/mappings/TextField.ts

@@ -8,6 +8,7 @@ import {
   createColorProp,
   createNumberProp,
   createFieldNameProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 const TEXT_FIELD_PROPS = {
@@ -352,6 +353,15 @@ export const SEED_DATA = [
     tag: "TextField",
     description: "A text area with a solid border or underline",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
     preview_image_url: "{CLOUDINARY_URL}/TextArea.png",
     supports_list_render: false,
     triggers: SEED_DATA_TRIGGERS,

package/src/mappings/TextInput.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 TEXT_INPUT_PROPS = {
     allowFontScaling: {
         group: GROUPS.advanced,
@@ -270,6 +270,15 @@ export const SEED_DATA = [
         tag: "TextInput",
         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/TextInput.ts

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 const TEXT_INPUT_PROPS = {
@@ -290,6 +291,15 @@ export const SEED_DATA = [
     tag: "TextInput",
     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,