@draftbit/core 46.8.1-d78af9.2 → 46.8.1-da12fb.2

package/lib/commonjs/components/DeckSwiper/DeckSwiper.js

@@ -55,7 +55,7 @@ const DeckSwiper = _ref => {
     if (keyExtractor) {
       return keyExtractor(card);
     } else {
-      return card.toString();
+      return card === null || card === void 0 ? void 0 : card.toString();
     }
   };
 

package/lib/commonjs/components/ScreenContainer.js

@@ -12,6 +12,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ScreenContainer(_ref) {
+  var _StyleSheet$flatten;
   let {
     scrollable = false,
     hasSafeArea = false,
@@ -22,7 +23,7 @@ function ScreenContainer(_ref) {
     children,
     ...rest
   } = _ref;
-  const backgroundColor = theme.colors.background;
+  const backgroundColor = ((_StyleSheet$flatten = _reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.backgroundColor) || theme.colors.background;
   const edges = ["left", "right"];
   if (hasSafeArea || hasTopSafeArea) {
     edges.push("top");

package/lib/commonjs/mappings/Accordion.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "AccordionGroup",
   description: "An expandable container containing components",
   category: _types.COMPONENT_TYPES.container,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
   layout: {
     paddingTop: 8,
     paddingRight: 8,

package/lib/commonjs/mappings/AccordionItem.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "AccordionItem",
   description: "Item to be used in Accordion",
   category: _types.COMPONENT_TYPES.deprecated,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     icon: (0, _types.createIconProp)(),
     label: (0, _types.createTextProp)({

package/lib/commonjs/mappings/ActionSheet.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "ActionSheet",
   description: "Action Sheet container",
   category: _types.COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins],
   props: {
     visible: (0, _types.createStaticBoolProp)({
       group: _types.GROUPS.data,

package/lib/commonjs/mappings/ActionSheetCancel.js

@@ -9,6 +9,7 @@ const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins],
   category: _types.COMPONENT_TYPES.actionsheet,
   triggers: [_types.Triggers.OnPress],
   props: {

package/lib/commonjs/mappings/ActionSheetItem.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "ActionSheetItem",
   description: "Action Sheet item",
   category: _types.COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins],
   triggers: [_types.Triggers.OnPress],
   layout: {
     textAlign: "center"

package/lib/commonjs/mappings/LinearGradient.js

@@ -13,6 +13,7 @@ const SEED_DATA = {
     width: "100%",
     height: "100%"
   },
+  stylesPanelSections: [_types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
   props: {
     endY: {
       group: _types.GROUPS.basic,

package/lib/commonjs/mappings/MapCallout.js

@@ -9,6 +9,7 @@ const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
   description: "An info window to display on top of a marker when it is clicked",
   category: _types.COMPONENT_TYPES.map,
   triggers: [_types.Triggers.OnPress],

package/lib/commonjs/mappings/MapMarker.js

@@ -11,6 +11,7 @@ const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: _types.COMPONENT_TYPES.map,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     latitude: (0, _types.createNumberProp)({

package/lib/commonjs/mappings/MapView.js

@@ -11,6 +11,7 @@ const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A map view",
   category: _types.COMPONENT_TYPES.map,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins],
   layout: {
     flex: 1,
     width: "100%",

package/lib/commonjs/mappings/Swiper.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "Swiper",
   description: "Swiper container",
   category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
   layout: {
     height: 300,
     width: "100%"

package/lib/commonjs/mappings/SwiperItem.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "SwiperItem",
   description: "Swiper item",
   category: _types.COMPONENT_TYPES.swiper,
-  props: {}
+  props: {},
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
 };
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/TextArea.js

@@ -10,6 +10,7 @@ const SEED_DATA = {
   tag: "TextInput",
   description: "An input field that allows for multiple lines.",
   category: _types.COMPONENT_TYPES.input,
+  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
   layout: {
     borderLeftWidth: 1,
     borderRightWidth: 1,

package/lib/commonjs/mappings/TextField.js

@@ -279,6 +279,7 @@ const SEED_DATA = [{
   preview_image_url: "{CLOUDINARY_URL}/Textfield.png",
   supports_list_render: false,
   triggers: SEED_DATA_TRIGGERS,
+  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects],
   props: {
     ...SEED_DATA_PROPS,
     type: {

package/lib/module/components/DeckSwiper/DeckSwiper.js

@@ -48,7 +48,7 @@ const DeckSwiper = _ref => {
     if (keyExtractor) {
       return keyExtractor(card);
     } else {
-      return card.toString();
+      return card === null || card === void 0 ? void 0 : card.toString();
     }
   };
 

package/lib/module/components/ScreenContainer.js

@@ -4,6 +4,7 @@ import { StyleSheet, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
 function ScreenContainer(_ref) {
+  var _StyleSheet$flatten;
   let {
     scrollable = false,
     hasSafeArea = false,
@@ -14,7 +15,7 @@ function ScreenContainer(_ref) {
     children,
     ...rest
   } = _ref;
-  const backgroundColor = theme.colors.background;
+  const backgroundColor = ((_StyleSheet$flatten = StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.backgroundColor) || theme.colors.background;
   const edges = ["left", "right"];
   if (hasSafeArea || hasTopSafeArea) {
     edges.push("top");

package/lib/module/mappings/Accordion.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Accordion",
   tag: "AccordionGroup",
   description: "An expandable container containing components",
   category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
   layout: {
     paddingTop: 8,
     paddingRight: 8,

package/lib/module/mappings/AccordionItem.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Accordion Item",
   tag: "AccordionItem",
   description: "Item to be used in Accordion",
   category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     icon: createIconProp(),
     label: createTextProp({

package/lib/module/mappings/ActionSheet.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createStaticBoolProp, GROUPS } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, GROUPS, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Action Sheet",
   tag: "ActionSheet",
   description: "Action Sheet container",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   props: {
     visible: createStaticBoolProp({
       group: GROUPS.data,

package/lib/module/mappings/ActionSheetCancel.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   props: {

package/lib/module/mappings/ActionSheetItem.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Action Sheet Item",
   tag: "ActionSheetItem",
   description: "Action Sheet item",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   triggers: [Triggers.OnPress],
   layout: {
     textAlign: "center"

package/lib/module/mappings/LinearGradient.js

@@ -1,4 +1,4 @@
-import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES } from "@draftbit/types";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Linear Gradient",
   tag: "LinearGradient",
@@ -7,6 +7,7 @@ export const SEED_DATA = {
     width: "100%",
     height: "100%"
   },
+  stylesPanelSections: [StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Borders, StylesPanelSections.Effects],
   props: {
     endY: {
       group: GROUPS.basic,

package/lib/module/mappings/MapCallout.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   description: "An info window to display on top of a marker when it is clicked",
   category: COMPONENT_TYPES.map,
   triggers: [Triggers.OnPress],

package/lib/module/mappings/MapMarker.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Map Marker",
   tag: "MapMarker",
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     latitude: createNumberProp({

package/lib/module/mappings/MapView.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Map View",
   tag: "MapView",
   packageName: "@draftbit/maps",
   description: "A map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   layout: {
     flex: 1,
     width: "100%",

package/lib/module/mappings/Swiper.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Swiper",
   tag: "Swiper",
   description: "Swiper container",
   category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
   layout: {
     height: 300,
     width: "100%"

package/lib/module/mappings/SwiperItem.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Swiper Item",
   tag: "SwiperItem",
   description: "Swiper item",
   category: COMPONENT_TYPES.swiper,
-  props: {}
+  props: {},
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS
 };

package/lib/module/mappings/TextArea.js

@@ -1,9 +1,10 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Text Area",
   tag: "TextInput",
   description: "An input field that allows for multiple lines.",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
   layout: {
     borderLeftWidth: 1,
     borderRightWidth: 1,

package/lib/module/mappings/TextField.js

@@ -273,6 +273,7 @@ export const SEED_DATA = [{
   preview_image_url: "{CLOUDINARY_URL}/Textfield.png",
   supports_list_render: false,
   triggers: SEED_DATA_TRIGGERS,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
   props: {
     ...SEED_DATA_PROPS,
     type: {

package/lib/typescript/src/components/ScreenContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,UAAkB,EAClB,WAAmB,EACnB,iBAAyB,EACzB,cAAsB,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,eAwCtB;;;;AAYD,wBAA0C"}
+{"version":3,"file":"ScreenContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD,aAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,UAAkB,EAClB,WAAmB,EACnB,iBAAyB,EACzB,cAAsB,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,eAyCtB;;;;AAYD,wBAA0C"}

package/lib/typescript/src/mappings/Accordion.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     layout: {
         paddingTop: number;
         paddingRight: number;

package/lib/typescript/src/mappings/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Accordion.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Accordion.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDrB,CAAC"}

package/lib/typescript/src/mappings/AccordionItem.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     props: {
         icon: {
             label: string;

package/lib/typescript/src/mappings/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/AccordionItem.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcrB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/AccordionItem.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAerB,CAAC"}

package/lib/typescript/src/mappings/ActionSheet.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     props: {
         visible: {
             label: string;

package/lib/typescript/src/mappings/ActionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheet.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAWrB,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheet.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAYrB,CAAC"}

package/lib/typescript/src/mappings/ActionSheetCancel.d.ts

@@ -2,6 +2,7 @@ export declare const SEED_DATA: {
     name: string;
     tag: string;
     description: string;
+    stylesPanelSections: string[];
     category: string;
     triggers: string[];
     props: {

package/lib/typescript/src/mappings/ActionSheetCancel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetCancel.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheetCancel.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBrB,CAAC"}
+{"version":3,"file":"ActionSheetCancel.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheetCancel.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBrB,CAAC"}

package/lib/typescript/src/mappings/ActionSheetItem.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     triggers: string[];
     layout: {
         textAlign: string;

package/lib/typescript/src/mappings/ActionSheetItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheetItem.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
+{"version":3,"file":"ActionSheetItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ActionSheetItem.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC"}

package/lib/typescript/src/mappings/LinearGradient.d.ts

@@ -6,6 +6,7 @@ export declare const SEED_DATA: {
         width: string;
         height: string;
     };
+    stylesPanelSections: string[];
     props: {
         endY: {
             group: string;

package/lib/typescript/src/mappings/LinearGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../../../src/mappings/LinearGradient.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ErB,CAAC"}
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../../../src/mappings/LinearGradient.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFrB,CAAC"}

package/lib/typescript/src/mappings/MapCallout.d.ts

@@ -2,6 +2,7 @@ export declare const SEED_DATA: {
     name: string;
     tag: string;
     packageName: string;
+    stylesPanelSections: string[];
     description: string;
     category: string;
     triggers: string[];

package/lib/typescript/src/mappings/MapCallout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapCallout.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapCallout.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
+{"version":3,"file":"MapCallout.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapCallout.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC"}

package/lib/typescript/src/mappings/MapMarker.d.ts

@@ -4,6 +4,7 @@ export declare const SEED_DATA: {
     packageName: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     layout: {};
     props: {
         latitude: {

package/lib/typescript/src/mappings/MapMarker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapMarker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapMarker.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CrB,CAAC"}
+{"version":3,"file":"MapMarker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapMarker.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CrB,CAAC"}

package/lib/typescript/src/mappings/MapView.d.ts

@@ -4,6 +4,7 @@ export declare const SEED_DATA: {
     packageName: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     layout: {
         flex: number;
         width: string;

package/lib/typescript/src/mappings/MapView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapView.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IrB,CAAC"}
+{"version":3,"file":"MapView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/MapView.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IrB,CAAC"}

package/lib/typescript/src/mappings/Swiper.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     layout: {
         height: number;
         width: string;

package/lib/typescript/src/mappings/Swiper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Swiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Swiper.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DrB,CAAC"}
+{"version":3,"file":"Swiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Swiper.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC"}

package/lib/typescript/src/mappings/SwiperItem.d.ts

@@ -4,5 +4,6 @@ export declare const SEED_DATA: {
     description: string;
     category: string;
     props: {};
+    stylesPanelSections: string[];
 };
 //# sourceMappingURL=SwiperItem.d.ts.map

package/lib/typescript/src/mappings/SwiperItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwiperItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/SwiperItem.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC"}
+{"version":3,"file":"SwiperItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/SwiperItem.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}

package/lib/typescript/src/mappings/TextArea.d.ts

@@ -3,6 +3,7 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    stylesPanelSections: string[];
     layout: {
         borderLeftWidth: number;
         borderRightWidth: number;

package/lib/typescript/src/mappings/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRrB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextArea.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgSrB,CAAC"}

package/lib/typescript/src/mappings/TextField.d.ts

@@ -6,6 +6,7 @@ export declare const SEED_DATA: ({
     preview_image_url: string;
     supports_list_render: boolean;
     triggers: string[];
+    stylesPanelSections: string[];
     props: {
         type: {
             label: string;
@@ -310,7 +311,6 @@ export declare const SEED_DATA: ({
         };
     };
     layout: {};
-    stylesPanelSections?: undefined;
 } | {
     name: string;
     tag: string;

package/lib/typescript/src/mappings/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"AA6TA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgGrB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TextField.ts"],"names":[],"mappings":"AA6TA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyGrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.8.1-d78af9.2+d78af9a",
+  "version": "46.8.1-da12fb.2+da12fb8",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.8.1-d78af9.2+d78af9a",
+    "@draftbit/types": "^46.8.1-da12fb.2+da12fb8",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -92,5 +92,5 @@
       ]
     ]
   },
-  "gitHead": "d78af9a6345ef51986bcac3f5667917d61582f82"
+  "gitHead": "da12fb8e8893d33317c9bcd27c3108d3dc2fde3e"
 }

package/src/components/DeckSwiper/DeckSwiper.js

@@ -32,7 +32,7 @@ const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infinite
             return keyExtractor(card);
         }
         else {
-            return card.toString();
+            return card === null || card === void 0 ? void 0 : card.toString();
         }
     };
     /**

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -75,7 +75,7 @@ const DeckSwiper = <T extends object>({
     if (keyExtractor) {
       return keyExtractor(card);
     } else {
-      return card.toString();
+      return card?.toString();
     }
   };
 

package/src/components/ScreenContainer.js

@@ -3,7 +3,8 @@ import { StyleSheet, ScrollView, View, } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
 function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
-    const backgroundColor = theme.colors.background;
+    var _a;
+    const backgroundColor = ((_a = StyleSheet.flatten(style)) === null || _a === void 0 ? void 0 : _a.backgroundColor) || theme.colors.background;
     const edges = ["left", "right"];
     if (hasSafeArea || hasTopSafeArea) {
         edges.push("top");

package/src/components/ScreenContainer.tsx

@@ -31,7 +31,8 @@ function ScreenContainer({
   children,
   ...rest
 }: ScreenContainerProps) {
-  const backgroundColor = theme.colors.background;
+  const backgroundColor =
+    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background;
 
   const edges: Edge[] = ["left", "right"];
   if (hasSafeArea || hasTopSafeArea) {

package/src/mappings/Accordion.js

@@ -1,9 +1,18 @@
-import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Accordion",
     tag: "AccordionGroup",
     description: "An expandable container containing components",
     category: COMPONENT_TYPES.container,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         paddingTop: 8,
         paddingRight: 8,

package/src/mappings/Accordion.ts

@@ -5,6 +5,7 @@ import {
   createTextProp,
   createStaticBoolProp,
   createColorProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,6 +13,15 @@ export const SEED_DATA = {
   tag: "AccordionGroup",
   description: "An expandable container containing components",
   category: COMPONENT_TYPES.container,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     paddingTop: 8,
     paddingRight: 8,

package/src/mappings/AccordionItem.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createIconProp, createTextProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconProp, createTextProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Accordion Item",
     tag: "AccordionItem",
     description: "Item to be used in Accordion",
     category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     props: {
         icon: createIconProp(),
         label: createTextProp({

package/src/mappings/AccordionItem.ts

@@ -3,6 +3,7 @@ import {
   createIconProp,
   createTextProp,
   createColorProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   tag: "AccordionItem",
   description: "Item to be used in Accordion",
   category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     icon: createIconProp(),
     label: createTextProp({

package/src/mappings/ActionSheet.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createStaticBoolProp, GROUPS } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Action Sheet",
     tag: "ActionSheet",
     description: "Action Sheet container",
     category: COMPONENT_TYPES.actionsheet,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     props: {
         visible: createStaticBoolProp({
             group: GROUPS.data,

package/src/mappings/ActionSheet.ts

@@ -1,10 +1,16 @@
-import { COMPONENT_TYPES, createStaticBoolProp, GROUPS } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  GROUPS,
+  StylesPanelSections,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Action Sheet",
   tag: "ActionSheet",
   description: "Action Sheet container",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   props: {
     visible: createStaticBoolProp({
       group: GROUPS.data,

package/src/mappings/ActionSheetCancel.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Action Sheet Cancel",
     tag: "ActionSheetCancel",
     description: "Action Sheet cancel",
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     category: COMPONENT_TYPES.actionsheet,
     triggers: [Triggers.OnPress],
     props: {

package/src/mappings/ActionSheetCancel.ts

@@ -5,12 +5,14 @@ import {
   createTextProp,
   GROUPS,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Action Sheet Cancel",
   tag: "ActionSheetCancel",
   description: "Action Sheet cancel",
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   category: COMPONENT_TYPES.actionsheet,
   triggers: [Triggers.OnPress],
   props: {

package/src/mappings/ActionSheetItem.js

@@ -1,9 +1,10 @@
-import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Action Sheet Item",
     tag: "ActionSheetItem",
     description: "Action Sheet item",
     category: COMPONENT_TYPES.actionsheet,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     triggers: [Triggers.OnPress],
     layout: {
         textAlign: "center",

package/src/mappings/ActionSheetItem.ts

@@ -5,6 +5,7 @@ import {
   createTextProp,
   GROUPS,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,6 +13,7 @@ export const SEED_DATA = {
   tag: "ActionSheetItem",
   description: "Action Sheet item",
   category: COMPONENT_TYPES.actionsheet,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   triggers: [Triggers.OnPress],
   layout: {
     textAlign: "center",

package/src/mappings/LinearGradient.js

@@ -1,9 +1,14 @@
-import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Linear Gradient",
     tag: "LinearGradient",
     description: "Linear Gradient Component",
     layout: { width: "100%", height: "100%" },
+    stylesPanelSections: [
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     props: {
         endY: {
             group: GROUPS.basic,

package/src/mappings/LinearGradient.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,11 @@ export const SEED_DATA = {
   tag: "LinearGradient",
   description: "Linear Gradient Component",
   layout: { width: "100%", height: "100%" },
+  stylesPanelSections: [
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     endY: {
       group: GROUPS.basic,

package/src/mappings/MapCallout.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Callout",
     tag: "MapCallout",
     packageName: "@draftbit/maps",
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     description: "An info window to display on top of a marker when it is clicked",
     category: COMPONENT_TYPES.map,
     triggers: [Triggers.OnPress],

package/src/mappings/MapCallout.ts

@@ -4,12 +4,14 @@ import {
   createBoolProp,
   GROUPS,
   Triggers,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Map Callout",
   tag: "MapCallout",
   packageName: "@draftbit/maps",
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   description:
     "An info window to display on top of a marker when it is clicked",
   category: COMPONENT_TYPES.map,

package/src/mappings/MapMarker.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map Marker",
     tag: "MapMarker",
     packageName: "@draftbit/maps",
     description: "A marker to show inside map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
     props: {
         latitude: createNumberProp({

package/src/mappings/MapMarker.ts

@@ -5,6 +5,7 @@ import {
   createNumberProp,
   createTextProp,
   GROUPS,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,7 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A marker to show inside map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     latitude: createNumberProp({

package/src/mappings/MapView.js

@@ -1,10 +1,11 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Map View",
     tag: "MapView",
     packageName: "@draftbit/maps",
     description: "A map view",
     category: COMPONENT_TYPES.map,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
     layout: {
         flex: 1,
         width: "100%",

package/src/mappings/MapView.ts

@@ -7,6 +7,7 @@ import {
   GROUPS,
   FORM_TYPES,
   PROP_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +16,7 @@ export const SEED_DATA = {
   packageName: "@draftbit/maps",
   description: "A map view",
   category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
   layout: {
     flex: 1,
     width: "100%",

package/src/mappings/Swiper.js

@@ -1,9 +1,18 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, Triggers, createActionProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Swiper",
     tag: "Swiper",
     description: "Swiper container",
     category: COMPONENT_TYPES.swiper,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         height: 300,
         width: "100%",

package/src/mappings/Swiper.ts

@@ -7,6 +7,7 @@ import {
   GROUPS,
   Triggers,
   createActionProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,6 +15,15 @@ export const SEED_DATA = {
   tag: "Swiper",
   description: "Swiper container",
   category: COMPONENT_TYPES.swiper,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     height: 300,
     width: "100%",

package/src/mappings/SwiperItem.js

@@ -1,8 +1,9 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Swiper Item",
     tag: "SwiperItem",
     description: "Swiper item",
     category: COMPONENT_TYPES.swiper,
     props: {},
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/SwiperItem.ts

@@ -1,4 +1,7 @@
-import { COMPONENT_TYPES } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Swiper Item",
@@ -6,4 +9,5 @@ export const SEED_DATA = {
   description: "Swiper item",
   category: COMPONENT_TYPES.swiper,
   props: {},
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/TextArea.js

@@ -1,9 +1,18 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Text Area",
     tag: "TextInput",
     description: "An input field that allows for multiple lines.",
     category: COMPONENT_TYPES.input,
+    stylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     layout: {
         borderLeftWidth: 1,
         borderRightWidth: 1,

package/src/mappings/TextArea.ts

@@ -6,6 +6,7 @@ import {
   FIELD_NAME,
   Triggers,
   createDisabledProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,6 +14,15 @@ export const SEED_DATA = {
   tag: "TextInput",
   description: "An input field that allows for multiple lines.",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     borderLeftWidth: 1,
     borderRightWidth: 1,

package/src/mappings/TextField.js

@@ -302,6 +302,15 @@ export const SEED_DATA = [
         preview_image_url: "{CLOUDINARY_URL}/Textfield.png",
         supports_list_render: false,
         triggers: SEED_DATA_TRIGGERS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/TextField.ts

@@ -324,6 +324,15 @@ export const SEED_DATA = [
     preview_image_url: "{CLOUDINARY_URL}/Textfield.png",
     supports_list_render: false,
     triggers: SEED_DATA_TRIGGERS,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Borders,
+      StylesPanelSections.Effects,
+    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {