@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/lib/module/components/Shadow.js

@@ -1,4 +1,3 @@
-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); }
 import React from "react";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
 const Shadow = _ref => {
@@ -17,7 +16,7 @@ const Shadow = _ref => {
     style,
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(ShadowComponent, _extends({
+  return /*#__PURE__*/React.createElement(ShadowComponent, {
     offset: [offsetX, offsetY],
     sides: {
       start: showShadowSideStart,
@@ -32,6 +31,20 @@ const Shadow = _ref => {
       bottomEnd: showShadowCornerBottomEnd
     },
     containerStyle: style,
+    paintInside: paintInside,
+    ...rest
+  });
+};
+export default Shadow;hadowSideTop,
+      bottom: showShadowSideBottom
+    },
+    corners: {
+      topStart: showShadowCornerTopStart,
+      topEnd: showShadowCornerTopEnd,
+      bottomStart: showShadowCornerBottomStart,
+      bottomEnd: showShadowCornerBottomEnd
+    },
+    containerStyle: style,
     paintInside: paintInside
   }, rest));
 };

package/lib/module/components/StarRating.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { View, StyleSheet, Pressable } from "react-native";
 import { withTheme } from "../theming";
@@ -32,9 +31,10 @@ const StarRating = _ref => {
     !!onPress && onPress(r);
   }, [onPress]);
   const ratingRounded = Math.round(localRating * 2) / 2;
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [styles.container, style]
-  }, rest), [...Array(maxStars)].map((_, i) => /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style],
+    ...rest
+  }, [...Array(maxStars)].map((_, i) => /*#__PURE__*/React.createElement(View, {
     key: i,
     style: {
       display: "flex"
@@ -74,4 +74,24 @@ const styles = StyleSheet.create({
     width: "50%"
   }
 });
+export default withTheme(StarRating);ntainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  touchContainer: {
+    display: "flex",
+    flexDirection: "row",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  pressable: {
+    flex: 1,
+    height: "100%",
+    width: "50%"
+  }
+});
 export default withTheme(StarRating);

package/lib/module/components/StepIndicator.js

@@ -1,6 +1,3 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 // @ts-nocheck
 import React, { Component } from "react";
 import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
@@ -12,7 +9,7 @@ const STEP_STATUS = {
 export default class StepIndicator extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "renderProgressBarBackground", () => {
+    this.renderProgressBarBackground = () => {
       const {
         stepCount,
         direction
@@ -55,8 +52,8 @@ export default class StepIndicator extends Component {
         },
         style: progressBarBackgroundStyle
       });
-    });
-    _defineProperty(this, "renderProgressBar", () => {
+    };
+    this.renderProgressBar = () => {
       const {
         stepCount,
         direction
@@ -86,8 +83,8 @@ export default class StepIndicator extends Component {
       return /*#__PURE__*/React.createElement(Animated.View, {
         style: progressBarStyle
       });
-    });
-    _defineProperty(this, "renderStepIndicator", () => {
+    };
+    this.renderStepIndicator = () => {
       let steps = [];
       const {
         stepCount,
@@ -118,8 +115,8 @@ export default class StepIndicator extends Component {
           height: this.state.customStyles.currentStepIndicatorSize
         }]
       }, steps);
-    });
-    _defineProperty(this, "renderStepLabels", () => {
+    };
+    this.renderStepLabels = () => {
       const {
         labels,
         direction,
@@ -161,8 +158,8 @@ export default class StepIndicator extends Component {
           alignItems: this.state.customStyles.labelAlign
         }]
       }, labelViews);
-    });
-    _defineProperty(this, "renderStep", position => {
+    };
+    this.renderStep = position => {
       const {
         renderStepIndicator
       } = this.props;
@@ -229,8 +226,8 @@ export default class StepIndicator extends Component {
       }) : /*#__PURE__*/React.createElement(Text, {
         style: indicatorLabelStyle
       }, "".concat(position + 1)));
-    });
-    _defineProperty(this, "getStepStatus", stepPosition => {
+    };
+    this.getStepStatus = stepPosition => {
       const {
         currentPosition
       } = this.props;
@@ -241,8 +238,8 @@ export default class StepIndicator extends Component {
       } else {
         return STEP_STATUS.UNFINISHED;
       }
-    });
-    _defineProperty(this, "onCurrentPositionChanged", position => {
+    };
+    this.onCurrentPositionChanged = position => {
       let {
         stepCount
       } = this.props;
@@ -262,7 +259,7 @@ export default class StepIndicator extends Component {
         toValue: this.state.customStyles.currentStepIndicatorSize / 2,
         duration: 100
       })])]).start();
-    });
+    };
     const defaultStyles = {
       stepIndicatorSize: 30,
       currentStepIndicatorSize: 40,
@@ -328,7 +325,6 @@ export default class StepIndicator extends Component {
     //     ),
     //   }));
     // }
-
     if (prevProps.currentPosition !== this.props.currentPosition) {
       this.onCurrentPositionChanged(this.props.currentPosition);
     }
@@ -369,6 +365,50 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   }
 });
+StepIndicator.defaultProps = {
+  currentPosition: 0,
+  stepCount: 5,
+  customStyles: {},
+  direction: "horizontal"
+};rrentPositionChanged(this.props.currentPosition);
+    }
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "transparent"
+  },
+  stepIndicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    backgroundColor: "transparent"
+  },
+  stepLabelsContainer: {
+    justifyContent: "space-around"
+  },
+  step: {
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  },
+  stepContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stepLabel: {
+    fontSize: 12,
+    textAlign: "center",
+    fontWeight: "500"
+  },
+  stepLabelItem: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
 StepIndicator.defaultProps = {
   currentPosition: 0,
   stepCount: 5,

package/lib/module/components/TabView/TabView.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
 import { withTheme } from "../../theming";
@@ -28,13 +27,11 @@ const TabViewComponent = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-
   //Check type of child using props
   //Regular '.type' cannot work because Draftbit strips the type in Draft view
   const instanceOfTabViewItemProps = object => {
     return "title" in object;
   };
-
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
@@ -60,7 +57,8 @@ const TabViewComponent = _ref => {
     }
   };
   const renderTabBar = props => {
-    return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(TabBar, {
+      ...props,
       activeColor: activeColor || theme.colors.primary,
       inactiveColor: inactiveColor || theme.colors.divider,
       pressColor: pressColor || theme.colors.primary,
@@ -74,7 +72,7 @@ const TabViewComponent = _ref => {
           route,
           color
         } = _ref2;
-        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
+        return (route === null || route === void 0 ? void 0 : route.icon) ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
           size: 16
@@ -83,9 +81,8 @@ const TabViewComponent = _ref => {
       style: {
         backgroundColor: tabsBackgroundColor || theme.colors.background
       }
-    }));
+    });
   };
-
   //Cannot render TabView without at least one tab
   if (!routes.length) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
@@ -104,4 +101,17 @@ const TabViewComponent = _ref => {
     swipeEnabled: swipeEnabled
   });
 };
+export default withTheme(TabViewComponent);tyles],
+    navigationState: {
+      index,
+      routes
+    },
+    renderScene: SceneMap(tabScenes),
+    renderTabBar: renderTabBar,
+    onIndexChange: indexChangeHandler,
+    tabBarPosition: tabBarPosition,
+    keyboardDismissMode: keyboardDismissMode,
+    swipeEnabled: swipeEnabled
+  });
+};
 export default withTheme(TabViewComponent);

package/lib/module/components/Table/Table.js

@@ -32,7 +32,6 @@ const Table = _ref => {
     return object.isTableHeader;
   }, []);
   const isRenderItem = data && renderItem;
-
   //Uses 'renderItem' and 'data' to create an array of children
   const dataAsChildren = React.useMemo(() => {
     if (!isRenderItem) return [];
@@ -57,7 +56,7 @@ const Table = _ref => {
       const nestedChildren = React.Children.toArray(item.props.children);
       //Header can be nested in React.Fragment when in renderItem
       const nestedHeaders = nestedChildren.filter(child => isTableHeader(child.props));
-      if (nestedHeaders !== null && nestedHeaders !== void 0 && nestedHeaders.length) {
+      if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
         //New element excluding header children
         return /*#__PURE__*/React.cloneElement(item, {
           children: nestedChildren.filter(child => !isTableHeader(child.props))
@@ -72,7 +71,7 @@ const Table = _ref => {
       const nestedChildren = React.Children.toArray(item.props.children);
       //Header can be nested in React.Fragment when in renderItem
       const nestedHeaders = nestedChildren.filter(child => isTableHeader(child.props));
-      if (nestedHeaders !== null && nestedHeaders !== void 0 && nestedHeaders.length) {
+      if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
         return nestedHeaders[0];
       }
       return item;
@@ -104,11 +103,13 @@ const Table = _ref => {
     value: contextValue
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, borderViewStyle, style]
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, header), /*#__PURE__*/React.createElement(ScrollView, rest, childrenWithoutHeader)));
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, header), /*#__PURE__*/React.createElement(ScrollView, {
+    ...rest
+  }, childrenWithoutHeader)));
 };
 const styles = StyleSheet.create({
   container: {
     flex: 1
   }
 });
-export default withTheme(Table);rt default withTheme(Table);
+export default withTheme(Table);

package/lib/module/components/Table/TableRow.js

@@ -19,7 +19,6 @@ const TableRow = _ref => {
     theme
   } = _ref;
   const parentContextValue = React.useContext(TableStyleContext);
-
   //Create context to use and pass to children based on own props or fall back to parent provided context
   const contextValue = {
     borderColor: borderColor || parentContextValue.borderColor,
@@ -50,4 +49,4 @@ const styles = StyleSheet.create({
     flexDirection: "row"
   }
 });
-export default withTheme(TableRow);
+export default withTheme(TableRow);;

package/lib/module/constants.js

@@ -6,4 +6,5 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
 export const APPROX_STATUSBAR_HEIGHT = Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
+});O : 0
 });

package/lib/module/mappings/Accordion.js

@@ -0,0 +1,42 @@
+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,
+    paddingBottom: 8,
+    paddingLeft: 8,
+    fontSize: 16
+  },
+  props: {
+    label: createTextProp({
+      label: "Label"
+    }),
+    expanded: createStaticBoolProp({
+      label: "Expanded",
+      description: "Whether the AccordionGroup should be initaially expanded or not"
+    }),
+    openColor: createColorProp({
+      label: "Open text color"
+    }),
+    closedColor: createColorProp({
+      label: "Closed text color"
+    }),
+    caretColor: createColorProp({
+      label: "Caret color"
+    }),
+    caretSize: createNumberProp({
+      label: "Caret size",
+      defaultValue: 24
+    }),
+    icon: createIconProp(),
+    iconSize: createNumberProp({
+      label: "Icon size",
+      defaultValue: 24
+    })
+  }
+};

package/lib/module/mappings/AccordionItem.js

@@ -0,0 +1,17 @@
+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({
+      label: "Item label"
+    }),
+    iconColor: createColorProp({
+      label: "Icon color"
+    })
+  }
+};

package/lib/module/mappings/ActionSheet.js

@@ -0,0 +1,14 @@
+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.Margins, StylesPanelSections.Effects],
+  props: {
+    visible: createStaticBoolProp({
+      group: GROUPS.data,
+      label: "Show Action Sheet"
+    })
+  }
+};

package/lib/module/mappings/ActionSheetCancel.js

@@ -0,0 +1,20 @@
+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.Margins, StylesPanelSections.Effects],
+  category: COMPONENT_TYPES.actionsheet,
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+    label: createTextProp({
+      group: GROUPS.basic,
+      label: "Label",
+      defaultValue: "Cancel"
+    }),
+    color: createColorProp({
+      label: "Font Color"
+    })
+  }
+};

package/lib/module/mappings/ActionSheetItem.js

@@ -0,0 +1,24 @@
+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.Margins, StylesPanelSections.Effects],
+  triggers: [Triggers.OnPress],
+  layout: {
+    textAlign: "center"
+  },
+  props: {
+    onPress: createActionProp(),
+    label: createTextProp({
+      group: GROUPS.basic,
+      label: "Label",
+      defaultValue: "Option"
+    }),
+    color: createColorProp({
+      label: "Font Color",
+      defaultValue: "strong"
+    })
+  }
+};

package/lib/module/mappings/ActivityIndicator.js

@@ -0,0 +1,57 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Activity Indicator",
+  tag: "ActivityIndicator",
+  description: "Displays a circular loading indicator.",
+  doc_link: "https://docs.expo.io/versions/latest/react-native/activityindicator/",
+  code_link: "https://github.com/expo/expo/blob/master/ios/versioned-react-native/ABI32_0_0/Libraries/Components/ActivityIndicator/ActivityIndicator.js",
+  category: COMPONENT_TYPES.utility,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Borders],
+  layout: {
+    width: 36,
+    height: 36
+  },
+  props: {
+    size: {
+      label: "Size",
+      description: "The size of the loading indicator (Default: small)",
+      options: ["small", "large"],
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      editable: true,
+      required: false,
+      defaultValue: "small",
+      group: GROUPS.basic
+    },
+    animating: {
+      label: "Spinning",
+      description: "Whether to show the loading indicator (Default: true)",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      editable: true,
+      required: false,
+      defaultValue: true,
+      group: GROUPS.basic
+    },
+    hidesWhenStopped: {
+      label: "Hide When Stopped",
+      description: "Whether the indicator should hide when not animating (Default: true)",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      editable: true,
+      required: false,
+      defaultValue: true,
+      group: GROUPS.basic
+    },
+    color: {
+      label: "Color",
+      description: "The color of the loading indicator (Default: gray)",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      editable: true,
+      required: false,
+      defaultValue: null,
+      group: GROUPS.basic
+    }
+  }
+};

package/lib/module/mappings/AudioPlayer.js

@@ -0,0 +1,50 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, StylesPanelSections, createColorProp, createNumberProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Audio Player",
+  tag: "AudioPlayer",
+  description: "Given a source URL, plays sounds & audio!",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  props: {
+    source: {
+      group: GROUPS.data,
+      label: "Source",
+      description: "The source URL for the audio file.",
+      editable: true,
+      required: true,
+      defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
+      formType: FORM_TYPES.sourceUrl,
+      propType: PROP_TYPES.OBJECT
+    },
+    sliderColor: createColorProp({
+      label: "Thumb Color",
+      defaultValue: "strong"
+    }),
+    completedTrackColor: createColorProp({
+      label: "Completed Track Color",
+      defaultValue: "background"
+    }),
+    remainingTrackColor: createColorProp({
+      label: "Remaining Track Color",
+      defaultValue: "light"
+    }),
+    trackThumbSize: createNumberProp({
+      label: "Thumb Size",
+      defaultValue: 24
+    }),
+    playIconColor: createColorProp({
+      label: "Play Icon Color",
+      defaultValue: "strong"
+    })
+  }
+};

package/lib/module/mappings/AvatarEdit.js

@@ -0,0 +1,38 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Avatar Edit",
+  tag: "AvatarEdit",
+  description: "An avatar with an edit icon in the top right",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: 64,
+    height: 64
+  },
+  props: {
+    size: {
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Size of avatar / width, height",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 0,
+      max: 300,
+      precision: 0,
+      step: 1,
+      defaultValue: 80
+    },
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Name of the image",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: "brightness-5"
+    }
+  }
+};

package/lib/module/mappings/Banner.js

@@ -0,0 +1,32 @@
+import { COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createTextProp, GROUPS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Banner",
+  tag: "Banner",
+  category: COMPONENT_TYPES.deprecated,
+  props: {
+    icon: createIconProp({
+      defaultValue: null,
+      required: false
+    }),
+    content: createTextProp({
+      label: "Content",
+      description: "Banner text content"
+    }),
+    initiallyVisible: createBoolProp({
+      group: GROUPS.basic,
+      label: "Initially visible",
+      description: "Whether the banner should be visible",
+      defaultValue: true
+    }),
+    dismissable: createBoolProp({
+      group: GROUPS.basic,
+      label: "Dismissable",
+      description: "Whether the banner should be able to be closed",
+      defaultValue: true
+    }),
+    buttonColor: createColorProp({
+      label: "Button color",
+      defaultValue: "primary"
+    })
+  }
+};