@draftbit/core 46.2.4-d2065e.10 → 46.2.4-d5a19a.11

package/lib/commonjs/components/CardBlock.js

@@ -21,6 +21,8 @@ var _Config = _interopRequireDefault(require("./Config"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 CardBlock = _ref => {
   let {
     image = _Config.default.cardImageUrl,
@@ -60,12 +62,11 @@ const CardBlock = _ref => {
   const rightDescriptionStyles = [typography.subtitle2, {
     color: colors.light
   }];
-  return /*#__PURE__*/_react.default.createElement(_DeprecatedCardWrapper.default, {
+  return /*#__PURE__*/_react.default.createElement(_DeprecatedCardWrapper.default, _extends({
     style: style,
     onPress: onPress,
-    numColumns: numColumns,
-    ...rest
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       backgroundColor: colors.background
     }
@@ -117,15 +118,4 @@ const CardBlock = _ref => {
 
 var _default = (0, _theming.withTheme)(CardBlock);
 
-exports.default = _default;le: [typography.body2, {
-      color: colors.medium
-    }]
-  }, leftDescription), rightDescription ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    numberOfLines: 1,
-    style: rightDescriptionStyles
-  }, rightDescription) : null) : null));
-};
-
-var _default = (0, _theming.withTheme)(CardBlock);
-
 exports.default = _default;

package/lib/commonjs/components/Carousel.js

@@ -19,6 +19,8 @@ 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 screenWidth = _reactNative.Dimensions.get("window").width;
 
 function Pager(_ref) {
@@ -48,6 +50,8 @@ function Pager(_ref) {
 }
 
 function Carousel(_ref2) {
+  var _data$length;
+
   let {
     data,
     children,
@@ -55,12 +59,9 @@ function Carousel(_ref2) {
     style,
     ...rest
   } = _ref2;
-
-  var _a;
-
   const [index, setIndex] = React.useState(0);
   const length = React.Children.count(children);
-  const itemsLength = ((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0) + length;
+  const itemsLength = ((_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0) + length;
   const slides = Array.isArray(data) ? data : [];
 
   const {
@@ -70,10 +71,9 @@ function Carousel(_ref2) {
 
   const slideWidth = width || screenWidth;
   const slideHeight = height || 250;
-  return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [styles.container, style],
-    ...rest
-  }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
+  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
+    style: [styles.container, style]
+  }, rest), /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
     pagingEnabled: true,
     horizontal: true,
     decelerationRate: "fast",
@@ -101,9 +101,9 @@ function Carousel(_ref2) {
       }]
     });
   }) : null, React.Children.map(children, child => {
-    var _a;
+    var _child$props;
 
-    const s = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.style) || {};
+    const s = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
     return /*#__PURE__*/React.createElement(_reactNative.View, {
       style: {
         width: slideWidth
@@ -144,28 +144,4 @@ const styles = _reactNative.StyleSheet.create({
 
 var _default = (0, _theming.withTheme)(Carousel);
 
-exports.default = _default;e({
-  container: {
-    backgroundColor: "#eee"
-  },
-  pager: {
-    position: "absolute",
-    bottom: 12,
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  bullet: {
-    marginHorizontal: 2,
-    width: 10,
-    height: 10,
-    borderRadius: 20,
-    backgroundColor: "#000"
-  }
-});
-
-var _default = (0, _theming.withTheme)(Carousel);
-
 exports.default = _default;

package/lib/commonjs/components/CircularProgress.js

@@ -13,27 +13,29 @@ var _reactNativeSvg = require("react-native-svg");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 class CircularProgress extends _react.default.Component {
   constructor() {
     super(...arguments);
 
-    this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+    _defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
       var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
       return {
         x: centerX + radius * Math.cos(angleInRadians),
         y: centerY + radius * Math.sin(angleInRadians)
       };
-    };
+    });
 
-    this.circlePath = (x, y, radius, startAngle, endAngle) => {
+    _defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
       var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
       var end = this.polarToCartesian(x, y, radius, startAngle);
       var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
       var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
       return d.join(" ");
-    };
+    });
 
-    this.clampFill = fill => Math.min(100, Math.max(0, fill));
+    _defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
   }
 
   render() {
@@ -116,15 +118,5 @@ class CircularProgress extends _react.default.Component {
 
 }
 
-var _default = CircularProgress;
-exports.default = _default;okeDasharrayTint,
-      fill: "transparent"
-    }), cap)), children && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: localChildrenContainerStyle
-    }, children(fill)));
-  }
-
-}
-
 var _default = CircularProgress;
 exports.default = _default;

package/lib/commonjs/components/DeprecatedFAB.js

@@ -27,6 +27,8 @@ 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 FAB = _ref => {
   let {
     Icon,
@@ -128,7 +130,7 @@ const FAB = _ref => {
     style: [{
       elevation
     }, style]
-  }, /*#__PURE__*/React.createElement(_Touchable.default, { ...rest,
+  }, /*#__PURE__*/React.createElement(_Touchable.default, _extends({}, rest, {
     onPress: onPress,
     accessibilityState: {
       disabled
@@ -136,7 +138,7 @@ const FAB = _ref => {
     accessibilityRole: "button",
     disabled: disabled || loading,
     style: buttonStyles
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.content
   }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
     style: iconStyle
@@ -179,24 +181,4 @@ const styles = _reactNative.StyleSheet.create({
 
 var _default = (0, _theming.withTheme)(FAB);
 
-exports.default = _default; "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  icon: {
-    alignItems: "center",
-    justifyContent: "center",
-    width: _Config.default.buttonIconSize
-  },
-  fixed: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 64,
-    borderRadius: 0
-  }
-});
-
-var _default = (0, _theming.withTheme)(FAB);
-
 exports.default = _default;

package/lib/commonjs/components/Portal/Portal.js

@@ -19,6 +19,8 @@ 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
  * Portal allows to render a component at a different place in the parent tree.
  * You can use it to render content which should appear above other elements, similar to `Modal`.
@@ -41,6 +43,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * ```
  */
 class Portal extends React.Component {
+  // @component ./PortalHost.tsx
   render() {
     const {
       children,
@@ -53,10 +56,9 @@ class Portal extends React.Component {
     }, children)));
   }
 
-} // @component ./PortalHost.tsx
-
+}
 
-Portal.Host = _PortalHost.default;
+_defineProperty(Portal, "Host", _PortalHost.default);
 
 var _default = (0, _theming.withTheme)(Portal);
 

package/lib/commonjs/components/StepIndicator.js

@@ -13,7 +13,8 @@ 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; }
 
-// @ts-nocheck
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const STEP_STATUS = {
   CURRENT: "current",
   FINISHED: "finished",
@@ -24,7 +25,7 @@ class StepIndicator extends _react.Component {
   constructor(props) {
     super(props);
 
-    this.renderProgressBarBackground = () => {
+    _defineProperty(this, "renderProgressBarBackground", () => {
       const {
         stepCount,
         direction
@@ -69,9 +70,9 @@ class StepIndicator extends _react.Component {
         },
         style: progressBarBackgroundStyle
       });
-    };
+    });
 
-    this.renderProgressBar = () => {
+    _defineProperty(this, "renderProgressBar", () => {
       const {
         stepCount,
         direction
@@ -103,9 +104,9 @@ class StepIndicator extends _react.Component {
       return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
         style: progressBarStyle
       });
-    };
+    });
 
-    this.renderStepIndicator = () => {
+    _defineProperty(this, "renderStepIndicator", () => {
       let steps = [];
       const {
         stepCount,
@@ -138,9 +139,9 @@ class StepIndicator extends _react.Component {
           height: this.state.customStyles.currentStepIndicatorSize
         }]
       }, steps);
-    };
+    });
 
-    this.renderStepLabels = () => {
+    _defineProperty(this, "renderStepLabels", () => {
       const {
         labels,
         direction,
@@ -182,9 +183,9 @@ class StepIndicator extends _react.Component {
           alignItems: this.state.customStyles.labelAlign
         }]
       }, labelViews);
-    };
+    });
 
-    this.renderStep = position => {
+    _defineProperty(this, "renderStep", position => {
       const {
         renderStepIndicator
       } = this.props;
@@ -256,9 +257,9 @@ class StepIndicator extends _react.Component {
       }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
         style: indicatorLabelStyle
       }, "".concat(position + 1)));
-    };
+    });
 
-    this.getStepStatus = stepPosition => {
+    _defineProperty(this, "getStepStatus", stepPosition => {
       const {
         currentPosition
       } = this.props;
@@ -270,9 +271,9 @@ class StepIndicator extends _react.Component {
       } else {
         return STEP_STATUS.UNFINISHED;
       }
-    };
+    });
 
-    this.onCurrentPositionChanged = position => {
+    _defineProperty(this, "onCurrentPositionChanged", position => {
       let {
         stepCount
       } = this.props;
@@ -295,7 +296,7 @@ class StepIndicator extends _react.Component {
         toValue: this.state.customStyles.currentStepIndicatorSize / 2,
         duration: 100
       })])]).start();
-    };
+    });
 
     const defaultStyles = {
       stepIndicatorSize: 30,
@@ -410,25 +411,6 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 
-StepIndicator.defaultProps = {
-  currentPosition: 0,
-  stepCount: 5,
-  customStyles: {},
-  direction: "horizontal"
-}; justifyContent: "center"
-  },
-  stepLabel: {
-    fontSize: 12,
-    textAlign: "center",
-    fontWeight: "500"
-  },
-  stepLabelItem: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
 StepIndicator.defaultProps = {
   currentPosition: 0,
   stepCount: 5,

package/lib/commonjs/components/TextField.js

@@ -17,6 +17,10 @@ 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const AnimatedText = _reactNative.Animated.createAnimatedComponent(_reactNative.Text);
 
 const FOCUS_ANIMATION_DURATION = 150;
@@ -26,7 +30,8 @@ const ICON_SIZE = 24;
 class TextField extends React.Component {
   constructor() {
     super(...arguments);
-    this.state = {
+
+    _defineProperty(this, "state", {
       labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
       placeholder: this.props.error ? this.props.placeholder : "",
@@ -34,35 +39,36 @@ class TextField extends React.Component {
         measured: false,
         width: 0
       }
-    };
-    this._timer = setTimeout(() => {}, 0);
+    });
+
+    _defineProperty(this, "_timer", setTimeout(() => {}, 0));
 
-    this._showPlaceholder = () => {
+    _defineProperty(this, "_showPlaceholder", () => {
       clearTimeout(this._timer); // Set the placeholder in a delay to offset the label animation
       // If we show it immediately, they'll overlap and look ugly
 
       this._timer = setTimeout(() => this.setState({
         placeholder: this.props.placeholder
       }), 50);
-    };
+    });
 
-    this._hidePlaceholder = () => this.setState({
+    _defineProperty(this, "_hidePlaceholder", () => this.setState({
       placeholder: ""
-    });
+    }));
 
-    this._restoreLabel = () => _reactNative.Animated.timing(this.state.labeled, {
+    _defineProperty(this, "_restoreLabel", () => _reactNative.Animated.timing(this.state.labeled, {
       toValue: 1,
       duration: FOCUS_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start();
+    }).start());
 
-    this._minmizeLabel = () => _reactNative.Animated.timing(this.state.labeled, {
+    _defineProperty(this, "_minmizeLabel", () => _reactNative.Animated.timing(this.state.labeled, {
       toValue: 0,
       duration: BLUR_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start();
+    }).start());
 
-    this._handleFocus = () => {
+    _defineProperty(this, "_handleFocus", () => {
       if (this.props.disabled) {
         return;
       }
@@ -70,9 +76,9 @@ class TextField extends React.Component {
       this.setState({
         focused: true
       });
-    };
+    });
 
-    this._handleBlur = () => {
+    _defineProperty(this, "_handleBlur", () => {
       if (this.props.disabled) {
         return;
       }
@@ -80,9 +86,9 @@ class TextField extends React.Component {
       this.setState({
         focused: false
       });
-    };
+    });
 
-    this._handleChangeText = value => {
+    _defineProperty(this, "_handleChangeText", value => {
       if (this.props.disabled) {
         return;
       }
@@ -98,9 +104,9 @@ class TextField extends React.Component {
         });
         this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
       }
-    };
+    });
 
-    this._root = undefined;
+    _defineProperty(this, "_root", undefined);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -151,11 +157,10 @@ class TextField extends React.Component {
       focused: !prevState.focused
     }));
   }
+
   /**
    * @internal
    */
-
-
   setNativeProps(args) {
     return this._root && this._root.setNativeProps(args);
   }
@@ -198,8 +203,7 @@ class TextField extends React.Component {
         roundness,
         disabledOpacity
       },
-      render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, { ...props
-      }),
+      render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
       ...rest
     } = this.props;
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
@@ -353,9 +357,9 @@ class TextField extends React.Component {
 
     return /*#__PURE__*/React.createElement(_reactNative.View, {
       style: [styles.container, styleProp]
-    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, { ...leftIconProps,
+    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
       style: leftIconStyle
-    }) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    })) : null, /*#__PURE__*/React.createElement(_reactNative.View, {
       style: (0, _utilities.applyStyles)([containerStyle], {
         height: style === null || style === void 0 ? void 0 : style.height,
         backgroundColor: bgColor,
@@ -422,9 +426,9 @@ class TextField extends React.Component {
       style: {
         justifyContent: type === "solid" ? "center" : undefined
       }
-    }, /*#__PURE__*/React.createElement(Icon, { ...leftIconProps,
+    }, /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
       style: leftIconStyle
-    })) : null, render({
+    }))) : null, render({
       ref: c => {
         this._root = c;
       },
@@ -465,43 +469,6 @@ var _default = (0, _theming.withTheme)(TextField);
 
 exports.default = _default;
 
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    alignSelf: "stretch"
-  },
-  placeholder: {
-    position: "absolute",
-    left: 0
-  },
-  underline: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 2
-  },
-  input: {
-    flexGrow: 1,
-    justifyContent: "center",
-    textAlignVertical: "center",
-    margin: 0,
-    textAlign: _reactNative.I18nManager.isRTL ? "right" : "left"
-  }
-});? /*#__PURE__*/React.createElement(_reactNative.Text, {
-      style: [{
-        color: error ? colors.error : colors.light,
-        marginTop: 8,
-        marginLeft: assistiveTextLeftMargin
-      }]
-    }, assistiveText) : null);
-  }
-
-}
-
-var _default = (0, _theming.withTheme)(TextField);
-
-exports.default = _default;
-
 const styles = _reactNative.StyleSheet.create({
   container: {
     alignSelf: "stretch"

package/lib/commonjs/components/Youtube.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SEED_DATA = void 0;
+
+var _types = require("@draftbit/types");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
+
+var _utilities = require("../utilities");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Youtube = _ref => {
+  let {
+    videoId,
+    playlist,
+    style,
+    mute,
+    autoplay
+  } = _ref;
+  const {
+    viewStyles: {
+      height,
+      width
+    }
+  } = (0, _utilities.extractStyles)(style);
+  return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
+    height: height,
+    width: width,
+    play: autoplay,
+    videoId: videoId,
+    playList: playlist,
+    mute: mute
+  });
+};
+
+var _default = Youtube;
+exports.default = _default;
+const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Youtube Component",
+  category: _types.COMPONENT_TYPES.media,
+  layout: {
+    width: "100%"
+  },
+  props: {
+    videoId: (0, _types.createTextProp)({
+      label: "VideoId",
+      description: "Youtube Video ID"
+    }),
+    playlist: (0, _types.createTextProp)({
+      label: "PlayList",
+      description: "Playlist ID"
+    }),
+    mute: (0, _types.createBoolProp)({
+      label: "Mute",
+      description: "Whether to mute video",
+      defaultValue: false
+    }),
+    autoplay: (0, _types.createBoolProp)({
+      label: "Autoplay",
+      description: "Whether to Autoplay video",
+      defaultValue: false
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/index.js

@@ -393,6 +393,12 @@ Object.defineProperty(exports, "Touchable", {
     return _Touchable.default;
   }
 });
+Object.defineProperty(exports, "Youtube", {
+  enumerable: true,
+  get: function () {
+    return _Youtube.default;
+  }
+});
 Object.defineProperty(exports, "injectIcon", {
   enumerable: true,
   get: function () {
@@ -512,6 +518,8 @@ var _Stepper = _interopRequireDefault(require("./components/Stepper"));
 
 var _useAuthState = require("./components/useAuthState");
 
+var _Youtube = _interopRequireDefault(require("./components/Youtube"));
+
 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; }

package/lib/commonjs/mappings/Youtube.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+
+var _types = require("@draftbit/types");
+
+const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Given a VideoId orPlaylist and play Youtube video",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: _types.COMPONENT_TYPES.media,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Position],
+  layout: {
+    height: 250
+  },
+  props: {
+    videoId: (0, _types.createTextProp)({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: "nwMUpDESXrI"
+    }),
+    playlist: (0, _types.createTextProp)({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
+    }),
+    mute: (0, _types.createStaticBoolProp)({
+      label: "Mute Audio",
+      description: "Mute the audio of the video."
+    }),
+    autoplay: (0, _types.createStaticBoolProp)({
+      label: "Auto Play",
+      description: "Autoplay the video on load."
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Youtube.js

@@ -0,0 +1,59 @@
+import { COMPONENT_TYPES, createBoolProp, createTextProp } from "@draftbit/types";
+import React from "react";
+import YoutubePlayer from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+
+const Youtube = _ref => {
+  let {
+    videoId,
+    playlist,
+    style,
+    mute,
+    autoplay
+  } = _ref;
+  const {
+    viewStyles: {
+      height,
+      width
+    }
+  } = extractStyles(style);
+  return /*#__PURE__*/React.createElement(YoutubePlayer, {
+    height: height,
+    width: width,
+    play: autoplay,
+    videoId: videoId,
+    playList: playlist,
+    mute: mute
+  });
+};
+
+export default Youtube;
+export const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Youtube Component",
+  category: COMPONENT_TYPES.media,
+  layout: {
+    width: "100%"
+  },
+  props: {
+    videoId: createTextProp({
+      label: "VideoId",
+      description: "Youtube Video ID"
+    }),
+    playlist: createTextProp({
+      label: "PlayList",
+      description: "Playlist ID"
+    }),
+    mute: createBoolProp({
+      label: "Mute",
+      description: "Whether to mute video",
+      defaultValue: false
+    }),
+    autoplay: createBoolProp({
+      label: "Autoplay",
+      description: "Whether to Autoplay video",
+      defaultValue: false
+    })
+  }
+};

package/lib/module/index.js

@@ -50,4 +50,5 @@ export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImag
 export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
-export { useAuthState } from "./components/useAuthState"; // a comment to fix sourcemap comment issue
+export { useAuthState } from "./components/useAuthState";
+export { default as Youtube } from "./components/Youtube"; // a comment to fix sourcemap comment issue

package/lib/module/mappings/Youtube.js

@@ -0,0 +1,33 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Given a VideoId orPlaylist and play Youtube video",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
+  layout: {
+    height: 250
+  },
+  props: {
+    videoId: createTextProp({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: "nwMUpDESXrI"
+    }),
+    playlist: createTextProp({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
+    }),
+    mute: createStaticBoolProp({
+      label: "Mute Audio",
+      description: "Mute the audio of the video."
+    }),
+    autoplay: createStaticBoolProp({
+      label: "Auto Play",
+      description: "Autoplay the video on load."
+    })
+  }
+};

package/lib/typescript/src/components/Youtube.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+declare type Props = {
+    videoId: string;
+    playlist: string;
+    style: StyleProp<ViewStyle>;
+    mute: boolean;
+    autoplay: boolean;
+};
+declare const Youtube: ({ videoId, playlist, style, mute, autoplay }: Props) => JSX.Element;
+export default Youtube;
+export declare const SEED_DATA: {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    layout: {
+        width: string;
+    };
+    props: {
+        videoId: any;
+        playlist: any;
+        mute: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        autoplay: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+};

package/lib/typescript/src/index.d.ts

@@ -49,3 +49,4 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
+export { default as Youtube } from "./components/Youtube";

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

@@ -0,0 +1,36 @@
+export declare const SEED_DATA: {
+    name: string;
+    tag: string;
+    description: string;
+    doc_link: string;
+    code_link: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        height: number;
+    };
+    props: {
+        videoId: any;
+        playlist: any;
+        mute: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        autoplay: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.2.4-d2065e.10+d2065e18",
+  "version": "46.2.4-d5a19a.11+d5a19a35",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -46,7 +46,7 @@
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
     "@react-native-picker/picker": "2.4.2",
-    "@shopify/flash-list": "^1.3.0",
+    "@shopify/flash-list": "1.2.0",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -56,7 +56,9 @@
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-svg": "12.3.0",
     "react-native-typography": "^1.4.1",
-    "react-native-web-swiper": "^2.2.3"
+    "react-native-web-swiper": "^2.2.3",
+    "react-native-web-webview": "^1.0.2",
+    "react-native-youtube-iframe": "^2.2.2"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
@@ -81,5 +83,5 @@
       ]
     ]
   },
-  "gitHead": "d2065e1882c71953f45e9470332b9d04aabaada5"
+  "gitHead": "d5a19a35c61087cef1266640e6803fed1df84272"
 }

package/src/components/Youtube.js

@@ -0,0 +1,38 @@
+import { COMPONENT_TYPES, createBoolProp, createTextProp, } from "@draftbit/types";
+import React from "react";
+import YoutubePlayer from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+const Youtube = ({ videoId, playlist, style, mute, autoplay }) => {
+    const { viewStyles: { height, width }, } = extractStyles(style);
+    return (React.createElement(YoutubePlayer, { height: height, width: width, play: autoplay, videoId: videoId, playList: playlist, mute: mute }));
+};
+export default Youtube;
+export const SEED_DATA = {
+    name: "Youtube",
+    tag: "Youtube",
+    description: "Youtube Component",
+    category: COMPONENT_TYPES.media,
+    layout: {
+        width: "100%",
+    },
+    props: {
+        videoId: createTextProp({
+            label: "VideoId",
+            description: "Youtube Video ID",
+        }),
+        playlist: createTextProp({
+            label: "PlayList",
+            description: "Playlist ID",
+        }),
+        mute: createBoolProp({
+            label: "Mute",
+            description: "Whether to mute video",
+            defaultValue: false,
+        }),
+        autoplay: createBoolProp({
+            label: "Autoplay",
+            description: "Whether to Autoplay video",
+            defaultValue: false,
+        }),
+    },
+};

package/src/components/Youtube.tsx

@@ -0,0 +1,66 @@
+import {
+  COMPONENT_TYPES,
+  createBoolProp,
+  createTextProp,
+} from "@draftbit/types";
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import YoutubePlayer from "react-native-youtube-iframe";
+import { extractStyles } from "../utilities";
+
+type Props = {
+  videoId: string;
+  playlist: string;
+  style: StyleProp<ViewStyle>;
+  mute: boolean;
+  autoplay: boolean;
+};
+
+const Youtube = ({ videoId, playlist, style, mute, autoplay }: Props) => {
+  const {
+    viewStyles: { height, width },
+  } = extractStyles(style);
+
+  return (
+    <YoutubePlayer
+      height={height}
+      width={width}
+      play={autoplay}
+      videoId={videoId}
+      playList={playlist}
+      mute={mute}
+    />
+  );
+};
+
+export default Youtube;
+
+export const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Youtube Component",
+  category: COMPONENT_TYPES.media,
+  layout: {
+    width: "100%",
+  },
+  props: {
+    videoId: createTextProp({
+      label: "VideoId",
+      description: "Youtube Video ID",
+    }),
+    playlist: createTextProp({
+      label: "PlayList",
+      description: "Playlist ID",
+    }),
+    mute: createBoolProp({
+      label: "Mute",
+      description: "Whether to mute video",
+      defaultValue: false,
+    }),
+    autoplay: createBoolProp({
+      label: "Autoplay",
+      description: "Whether to Autoplay video",
+      defaultValue: false,
+    }),
+  },
+};

package/src/index.js

@@ -50,4 +50,5 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
+export { default as Youtube } from "./components/Youtube";
 // a comment to fix sourcemap comment issue

package/src/index.tsx

@@ -70,5 +70,6 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
+export { default as Youtube } from "./components/Youtube";
 
 // a comment to fix sourcemap comment issue

package/src/mappings/Youtube.js

@@ -0,0 +1,33 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Youtube",
+    tag: "Youtube",
+    description: "Given a VideoId orPlaylist and play Youtube video",
+    doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+    code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+    category: COMPONENT_TYPES.media,
+    stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
+    layout: {
+        height: 250,
+    },
+    props: {
+        videoId: createTextProp({
+            label: "Video ID",
+            description: "VideoId of the Youtube video.",
+            defaultValue: "nwMUpDESXrI",
+        }),
+        playlist: createTextProp({
+            label: "Playlist",
+            description: "Playlist of the Youtube videos.",
+            defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
+        }),
+        mute: createStaticBoolProp({
+            label: "Mute Audio",
+            description: "Mute the audio of the video.",
+        }),
+        autoplay: createStaticBoolProp({
+            label: "Auto Play",
+            description: "Autoplay the video on load.",
+        }),
+    },
+};

package/src/mappings/Youtube.ts

@@ -0,0 +1,39 @@
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  createTextProp,
+  StylesPanelSections,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Youtube",
+  tag: "Youtube",
+  description: "Given a VideoId orPlaylist and play Youtube video",
+  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
+  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
+  layout: {
+    height: 250,
+  },
+  props: {
+    videoId: createTextProp({
+      label: "Video ID",
+      description: "VideoId of the Youtube video.",
+      defaultValue: "nwMUpDESXrI",
+    }),
+    playlist: createTextProp({
+      label: "Playlist",
+      description: "Playlist of the Youtube videos.",
+      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks",
+    }),
+    mute: createStaticBoolProp({
+      label: "Mute Audio",
+      description: "Mute the audio of the video.",
+    }),
+    autoplay: createStaticBoolProp({
+      label: "Auto Play",
+      description: "Autoplay the video on load.",
+    }),
+  },
+};