@draftbit/core 46.4.4-535477.2 → 46.4.4-618dac.2

package/lib/commonjs/components/BottomSheet/BottomSheet.native.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _bottomSheet = _interopRequireWildcard(require("@gorhom/bottom-sheet"));
+
+var _utilities = require("../../utilities");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+const BottomSheetComponent = _ref => {
+  let {
+    style,
+    children,
+    step
+  } = _ref;
+  const bottomSheetRef = (0, _react.useRef)(null);
+  const {
+    viewStyles
+  } = (0, _utilities.extractStyles)(style); // variables
+
+  const snapPoints = (0, _react.useMemo)(() => ["25%", "50%", "90%"], []); // callbacks
+
+  const handleSheetChanges = (0, _react.useCallback)(index => {
+    console.log("handleSheetChanges", index);
+  }, []);
+
+  _react.default.useEffect(() => {
+    if (step === -1) {
+      var _bottomSheetRef$curre;
+
+      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
+    }
+  }, [step]);
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [containerStyle.container, viewStyles, {
+      backgroundColor: step !== -1 ? "grey" : "transparent"
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.default, {
+    ref: bottomSheetRef,
+    index: step,
+    snapPoints: snapPoints,
+    onChange: handleSheetChanges
+  }, /*#__PURE__*/_react.default.createElement(_bottomSheet.BottomSheetView, null, children)));
+};
+
+var _default = BottomSheetComponent;
+exports.default = _default;
+
+const containerStyle = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: "center"
+  }
+});

package/lib/commonjs/components/BottomSheet/BottomSheet.web.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeScrollBottomSheet = _interopRequireDefault(require("react-native-scroll-bottom-sheet"));
+
+var _utilities = require("../../utilities");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const windowHeight = _reactNative.Dimensions.get("window").height;
+
+const BottomSheetComponent = _ref => {
+  let {
+    style,
+    children,
+    step
+  } = _ref;
+  const {
+    viewStyles
+  } = (0, _utilities.extractStyles)(style);
+
+  const bottomSheetRef = _react.default.useRef();
+
+  const webStep = _react.default.useMemo(() => step + 1, [step]);
+
+  const snapPoints = _react.default.useMemo(() => ["25%", "50%", windowHeight - 200], []);
+
+  _react.default.useEffect(() => {
+    var _bottomSheetRef$curre;
+
+    bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.snapTo(snapPoints.length - webStep); // bottomSheetRef.current.snapTo(step);
+  }, [webStep, step, snapPoints]);
+
+  if (step === -1) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeScrollBottomSheet.default, {
+    ref: bottomSheetRef,
+    componentType: "ScrollView",
+    snapPoints: snapPoints,
+    initialSnapIndex: 0,
+    renderHandle: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.header
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.panelHandle
+    })),
+    contentContainerStyle: styles.contentContainerStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: { ...styles.container,
+      ...viewStyles,
+      backgroundColor: webStep !== -1 ? "grey" : "transparent"
+    }
+  }, children)));
+};
+
+var _default = BottomSheetComponent;
+exports.default = _default;
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainerStyle: {
+    padding: 16
+  },
+  header: {
+    alignItems: "center",
+    backgroundColor: "white",
+    paddingVertical: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  },
+  panelHandle: {
+    width: 40,
+    height: 2,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    borderRadius: 4
+  },
+  item: {
+    padding: 20,
+    justifyContent: "center",
+    backgroundColor: "white",
+    alignItems: "center",
+    marginVertical: 10
+  }
+});

package/lib/commonjs/components/BottomSheet/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.default;
+  }
+});
+
+var _BottomSheet = _interopRequireDefault(require("./BottomSheet"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/components/BottomSheet/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/commonjs/components/CircleImage.js

@@ -17,8 +17,6 @@ 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); }
-
 const CircleImage = _ref => {
   let {
     source = _Config.default.placeholderImageURL,
@@ -27,6 +25,22 @@ const CircleImage = _ref => {
     ...props
   } = _ref;
   const borderRadius = size / 2;
+  return /*#__PURE__*/React.createElement(_reactNative.Image, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius
+    }, style],
+    source: typeof source === "string" ? {
+      uri: source
+    } : source,
+    resizeMode: "cover",
+    ...props
+  });
+};
+
+var _default = CircleImage;
+exports.default = _default;size / 2;
   return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
     style: [{
       width: size,

package/lib/commonjs/components/Text.js

@@ -24,10 +24,14 @@ class Text extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "state", {
+      nativeProps: {}
+    });
   }
 
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.state.nativeProps = args || {};
   }
 
   render() {
@@ -36,7 +40,7 @@ class Text extends React.Component {
       ...rest
     } = this.props;
     const writingDirection = _reactNative.I18nManager.isRTL ? "rtl" : "ltr";
-    return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, this.state.nativeProps, {
       ref: c => {
         this._root = c;
       },

package/lib/commonjs/components/TextField.js

@@ -32,6 +32,7 @@ class TextField extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "state", {
+      nativeProps: {},
       labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
       placeholder: this.props.error ? this.props.placeholder : "",
@@ -162,7 +163,9 @@ class TextField extends React.Component {
    * @internal
    */
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState(state => ({ ...state,
+      nativeState: args || {}
+    }));
   }
 
   isFocused() {
@@ -444,6 +447,7 @@ class TextField extends React.Component {
       underlineColorAndroid: "transparent",
       style: inputStyles,
       ...rest,
+      ...this.state.nativeProps,
       value: this.state.value
     })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
       name: rightIconName,

package/lib/commonjs/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Banner", {
     return _Banner.default;
   }
 });
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -472,6 +478,8 @@ var _ActionSheet = require("./components/ActionSheet");
 
 var _Swiper = require("./components/Swiper");
 
+var _BottomSheet = require("./components/BottomSheet");
+
 var _Layout = require("./components/Layout");
 
 var _index = require("./components/RadioButton/index");

package/lib/commonjs/mappings/AudioPlayer.js

@@ -12,17 +12,7 @@ const SEED_DATA = {
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: _types.COMPONENT_TYPES.media,
-  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position],
-  layout: {
-    backgroundColor: "#eee",
-    paddingLeft: 16,
-    paddingRight: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    borderRadius: 24,
-    flexDirection: "row",
-    alignItems: "center"
-  },
+  layout: {},
   props: {
     source: {
       group: _types.GROUPS.data,
@@ -33,27 +23,7 @@ const SEED_DATA = {
       defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
       formType: _types.FORM_TYPES.sourceUrl,
       propType: _types.PROP_TYPES.OBJECT
-    },
-    sliderColor: (0, _types.createColorProp)({
-      label: "Thumb Color",
-      defaultValue: "strong"
-    }),
-    completedTrackColor: (0, _types.createColorProp)({
-      label: "Completed Track Color",
-      defaultValue: "background"
-    }),
-    remainingTrackColor: (0, _types.createColorProp)({
-      label: "Remaining Track Color",
-      defaultValue: "light"
-    }),
-    trackThumbSize: (0, _types.createNumberProp)({
-      label: "Thumb Size",
-      defaultValue: 24
-    }),
-    playIconColor: (0, _types.createColorProp)({
-      label: "Play Icon Color",
-      defaultValue: "strong"
-    })
+    }
   }
 };
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/BottomSheet.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+
+var _types = require("@draftbit/types");
+
+const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BottomSheet",
+  category: _types.COMPONENT_TYPES.container,
+  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects],
+  props: {
+    step: (0, _types.createNumberProp)({
+      label: "Step",
+      description: "Step can be -1, 0, 1, or 2."
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/TextField.js

@@ -24,7 +24,7 @@ const SEED_DATA_PROPS = {
     description: "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: _types.FORM_TYPES.flatArray,
     propType: _types.PROP_TYPES.STRING

package/lib/commonjs/mappings/TextInput.js

@@ -103,7 +103,7 @@ const SEED_DATA = [{
       description: "Can automatically capitalize sentences, words, and characters (Default: none).",
       editable: true,
       required: false,
-      defaultValue: null,
+      defaultValue: "none",
       options: ["none", "sentences", "words", "characters"],
       formType: _types.FORM_TYPES.flatArray,
       propType: _types.PROP_TYPES.STRING

package/lib/module/components/BottomSheet/BottomSheet.native.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+import { extractStyles } from "../../utilities";
+
+const BottomSheetComponent = _ref => {
+  let {
+    style,
+    children,
+    step
+  } = _ref;
+  const bottomSheetRef = useRef(null);
+  const {
+    viewStyles
+  } = extractStyles(style); // variables
+
+  const snapPoints = useMemo(() => ["25%", "50%", "90%"], []); // callbacks
+
+  const handleSheetChanges = useCallback(index => {
+    console.log("handleSheetChanges", index);
+  }, []);
+  React.useEffect(() => {
+    if (step === -1) {
+      var _bottomSheetRef$curre;
+
+      bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.close();
+    }
+  }, [step]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [containerStyle.container, viewStyles, {
+      backgroundColor: step !== -1 ? "grey" : "transparent"
+    }]
+  }, /*#__PURE__*/React.createElement(BottomSheet, {
+    ref: bottomSheetRef,
+    index: step,
+    snapPoints: snapPoints,
+    onChange: handleSheetChanges
+  }, /*#__PURE__*/React.createElement(BottomSheetView, null, children)));
+};
+
+export default BottomSheetComponent;
+const containerStyle = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: "center"
+  }
+});

package/lib/module/components/BottomSheet/BottomSheet.web.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { StyleSheet, View, Dimensions } from "react-native";
+import ScrollBottomSheet from "react-native-scroll-bottom-sheet";
+import { extractStyles } from "../../utilities";
+const windowHeight = Dimensions.get("window").height;
+
+const BottomSheetComponent = _ref => {
+  let {
+    style,
+    children,
+    step
+  } = _ref;
+  const {
+    viewStyles
+  } = extractStyles(style);
+  const bottomSheetRef = React.useRef();
+  const webStep = React.useMemo(() => step + 1, [step]);
+  const snapPoints = React.useMemo(() => ["25%", "50%", windowHeight - 200], []);
+  React.useEffect(() => {
+    var _bottomSheetRef$curre;
+
+    bottomSheetRef === null || bottomSheetRef === void 0 ? void 0 : (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 ? void 0 : _bottomSheetRef$curre.snapTo(snapPoints.length - webStep); // bottomSheetRef.current.snapTo(step);
+  }, [webStep, step, snapPoints]);
+
+  if (step === -1) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(ScrollBottomSheet, {
+    ref: bottomSheetRef,
+    componentType: "ScrollView",
+    snapPoints: snapPoints,
+    initialSnapIndex: 0,
+    renderHandle: () => /*#__PURE__*/React.createElement(View, {
+      style: styles.header
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.panelHandle
+    })),
+    contentContainerStyle: styles.contentContainerStyle
+  }, /*#__PURE__*/React.createElement(View, {
+    style: { ...styles.container,
+      ...viewStyles,
+      backgroundColor: webStep !== -1 ? "grey" : "transparent"
+    }
+  }, children)));
+};
+
+export default BottomSheetComponent;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainerStyle: {
+    padding: 16
+  },
+  header: {
+    alignItems: "center",
+    backgroundColor: "white",
+    paddingVertical: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  },
+  panelHandle: {
+    width: 40,
+    height: 2,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    borderRadius: 4
+  },
+  item: {
+    padding: 20,
+    justifyContent: "center",
+    backgroundColor: "white",
+    alignItems: "center",
+    marginVertical: 10
+  }
+});

package/lib/module/components/BottomSheet/index.js

@@ -0,0 +1,2 @@
+//@ts-ignore
+export { default as BottomSheet } from "./BottomSheet";

package/lib/module/components/BottomSheet/types.js

@@ -0,0 +1 @@
+export {};

package/lib/module/components/Text.js

@@ -11,10 +11,14 @@ class Text extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "state", {
+      nativeProps: {}
+    });
   }
 
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.state.nativeProps = args || {};
   }
 
   render() {
@@ -23,7 +27,7 @@ class Text extends React.Component {
       ...rest
     } = this.props;
     const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
-    return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, this.state.nativeProps, {
       ref: c => {
         this._root = c;
       },

package/lib/module/components/TextField.js

@@ -16,6 +16,7 @@ class TextField extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "state", {
+      nativeProps: {},
       labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
       placeholder: this.props.error ? this.props.placeholder : "",
@@ -146,7 +147,9 @@ class TextField extends React.Component {
    * @internal
    */
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState(state => ({ ...state,
+      nativeState: args || {}
+    }));
   }
 
   isFocused() {
@@ -426,6 +429,7 @@ class TextField extends React.Component {
       underlineColorAndroid: "transparent",
       style: inputStyles,
       ...rest,
+      ...this.state.nativeProps,
       value: this.state.value
     })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
       name: rightIconName,

package/lib/module/index.js

@@ -29,6 +29,7 @@ export { default as Touchable } from "./components/Touchable";
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
 export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
+export { BottomSheet } from "./components/BottomSheet";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
 /* Deprecated: Fix or Delete!  */

package/lib/module/mappings/AudioPlayer.js

@@ -1,20 +1,10 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, StylesPanelSections, createColorProp, createNumberProp } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES } 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"
-  },
+  layout: {},
   props: {
     source: {
       group: GROUPS.data,
@@ -25,26 +15,6 @@ export const SEED_DATA = {
       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/BottomSheet.js

@@ -0,0 +1,13 @@
+import { COMPONENT_TYPES, createNumberProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Bottom Sheet",
+  tag: "BottomSheet",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  props: {
+    step: createNumberProp({
+      label: "Step",
+      description: "Step can be -1, 0, 1, or 2."
+    })
+  }
+};

package/lib/module/mappings/TextField.js

@@ -16,7 +16,7 @@ const SEED_DATA_PROPS = {
     description: "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING

package/lib/module/mappings/TextInput.js

@@ -94,7 +94,7 @@ export const SEED_DATA = [{
       description: "Can automatically capitalize sentences, words, and characters (Default: none).",
       editable: true,
       required: false,
-      defaultValue: null,
+      defaultValue: "none",
       options: ["none", "sentences", "words", "characters"],
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING