@draftbit/core 46.10.2-eb07a0.2 → 46.10.2

package/lib/commonjs/components/Checkbox/CheckboxRow.js

@@ -14,7 +14,8 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-var Direction;
+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); }
+let Direction;
 exports.Direction = Direction;
 (function (Direction) {
   Direction["Row"] = "row";
@@ -57,6 +58,7 @@ const CheckboxRow = _ref => {
       setInternalValue(status);
     }
   }, [status]);
+
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = (0, _hooks.usePrevious)(defaultValue);
@@ -80,14 +82,13 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+  return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction
     }],
-    disabled: disabled,
-    ...rest
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    disabled: disabled
+  }, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -124,22 +125,4 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = CheckboxRow;
-exports.default = _default;ems: "center",
-    justifyContent: "space-around",
-    paddingStart: 20,
-    minHeight: 50,
-    paddingEnd: 20,
-    display: "flex",
-    ..._reactNative.Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none"
-      }
-    })
-  },
-  label: {
-    flex: 3
-  }
-});
-var _default = CheckboxRow;
 exports.default = _default;

package/lib/commonjs/components/Row.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _theming = require("../theming");
+var _Config = _interopRequireDefault(require("./Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 Row = _ref => {
+  let {
+    titleTypeStyle,
+    titleColor,
+    subtitleTypeStyle,
+    subtitleColor,
+    title,
+    subtitle,
+    multilineSubtitle,
+    image,
+    right,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.container, {
+      padding: 16
+    }, style]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.leftContainer
+  }, image && /*#__PURE__*/React.createElement(_reactNative.Image, {
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    style: {
+      marginRight: 12,
+      width: subtitle ? _Config.default.rowMultiLineImageSize : _Config.default.rowSingleLineImageSize,
+      height: subtitle ? _Config.default.rowMultiLineImageSize : _Config.default.rowSingleLineImageSize
+    }
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.textContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [titleTypeStyle, {
+      color: titleColor
+    }],
+    numberOfLines: 1
+  }, title), subtitle ? /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [subtitleTypeStyle, {
+      color: subtitleColor,
+      marginTop: 4
+    }],
+    numberOfLines: multilineSubtitle ? undefined : 1
+  }, subtitle) : null)), right && right());
+};
+const styles = _reactNative.StyleSheet.create({
+  leftContainer: {
+    flexDirection: "row",
+    flex: 1
+  },
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+var _default = (0, _theming.withTheme)(Row);
+exports.default = _default;

package/lib/commonjs/components/RowBodyIcon.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _theming = require("../theming");
+var _Row = _interopRequireDefault(require("./Row"));
+var _Config = _interopRequireDefault(require("./Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 RowBodyIcon = _ref => {
+  let {
+    Icon,
+    title,
+    subtitle,
+    icon,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Row.default, {
+    titleTypeStyle: typography.body1,
+    titleColor: colors.medium,
+    subtitleTypeStyle: typography.subtitle2,
+    subtitleColor: colors.light,
+    title: title,
+    subtitle: subtitle,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: _Config.default.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16
+      }
+    }),
+    style: style
+  });
+};
+var _default = (0, _theming.withTheme)(RowBodyIcon);
+exports.default = _default;

package/lib/commonjs/components/RowHeadlineImageCaption.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _theming = require("../theming");
+var _Row = _interopRequireDefault(require("./Row"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 RowHeadlineImageCaption = _ref => {
+  let {
+    title,
+    subtitle,
+    caption,
+    image,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Row.default, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(_reactNative.Text, {
+      style: {
+        ...typography.caption,
+        color: colors.strong,
+        marginLeft: 16
+      }
+    }, caption),
+    style: style
+  });
+};
+var _default = (0, _theming.withTheme)(RowHeadlineImageCaption);
+exports.default = _default;

package/lib/commonjs/components/RowHeadlineImageIcon.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _theming = require("../theming");
+var _Row = _interopRequireDefault(require("./Row"));
+var _Config = _interopRequireDefault(require("./Config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 RowHeadlineImageIcon = _ref => {
+  let {
+    Icon,
+    icon,
+    title,
+    image,
+    subtitle,
+    multilineSubtitle = false,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Row.default, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    multilineSubtitle: multilineSubtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: multilineSubtitle ? _Config.default.rowMultiLineIconSize : _Config.default.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16,
+        alignSelf: multilineSubtitle ? "flex-start" : "center",
+        marginTop: multilineSubtitle ? 4 : 0
+      }
+    }),
+    style: style
+  });
+};
+var _default = (0, _theming.withTheme)(RowHeadlineImageIcon);
+exports.default = _default;

package/lib/commonjs/components/YoutubePlayer/YoutubePlayer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _utilities = require("../../utilities");
+var _reactYoutube = _interopRequireDefault(require("react-youtube"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const YoutubePlayer = _ref => {
+  let {
+    videoId,
+    playlist,
+    autoplay = false,
+    style
+  } = _ref;
+  const {
+    viewStyles
+  } = (0, _utilities.extractStyles)(style);
+  const defaultVideoId = "nwMUpDESXrI";
+  const options = {
+    width: viewStyles.width,
+    height: viewStyles.height,
+    playerVars: {
+      autoplay: autoplay ? 1 : 0,
+      list: playlist,
+      listType: "playlist"
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: viewStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactYoutube.default, {
+    videoId: !videoId && !playlist ? defaultVideoId : videoId,
+    opts: options
+  }));
+};
+var _default = YoutubePlayer;
+exports.default = _default;

package/lib/commonjs/components/{YotubePlayer.js → YoutubePlayer/YoutubePlayer.native.js}

@@ -6,32 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
-var _utilities = require("../utilities");
+var _utilities = require("../../utilities");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const YoutubePlayer = _ref => {
   let {
     videoId,
     playlist,
-    mute = false,
     autoplay = false,
     style
   } = _ref;
   const {
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  const {
-    height,
-    width
-  } = viewStyles;
   const defaultVideoId = "nwMUpDESXrI";
   return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
-    height: height,
-    width: width,
+    width: viewStyles.width,
+    height: viewStyles.height,
     play: autoplay,
     videoId: !videoId && !playlist ? defaultVideoId : videoId,
     playList: playlist,
-    mute: mute,
-    webViewStyle: style
+    webViewStyle: viewStyles
   });
 };
 var _default = YoutubePlayer;

package/lib/commonjs/components/YoutubePlayer/YoutubePlayerProps.js

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

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

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

package/lib/commonjs/index.js

@@ -255,6 +255,24 @@ Object.defineProperty(exports, "Row", {
     return _Layout.Row;
   }
 });
+Object.defineProperty(exports, "RowBodyIcon", {
+  enumerable: true,
+  get: function () {
+    return _RowBodyIcon.default;
+  }
+});
+Object.defineProperty(exports, "RowHeadlineImageCaption", {
+  enumerable: true,
+  get: function () {
+    return _RowHeadlineImageCaption.default;
+  }
+});
+Object.defineProperty(exports, "RowHeadlineImageIcon", {
+  enumerable: true,
+  get: function () {
+    return _RowHeadlineImageIcon.default;
+  }
+});
 Object.defineProperty(exports, "SVG", {
   enumerable: true,
   get: function () {
@@ -378,7 +396,7 @@ Object.defineProperty(exports, "Touchable", {
 Object.defineProperty(exports, "YoutubePlayer", {
   enumerable: true,
   get: function () {
-    return _YotubePlayer.default;
+    return _YoutubePlayer.YoutubePlayer;
   }
 });
 Object.defineProperty(exports, "injectIcon", {
@@ -436,11 +454,14 @@ var _DeckSwiper = require("./components/DeckSwiper");
 var _TabView = require("./components/TabView");
 var _Markdown = _interopRequireDefault(require("./components/Markdown"));
 var _BottomSheet = require("./components/BottomSheet");
-var _YotubePlayer = _interopRequireDefault(require("./components/YotubePlayer"));
+var _YoutubePlayer = require("./components/YoutubePlayer");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _ProgressCircle = _interopRequireDefault(require("./components/ProgressCircle"));
+var _RowBodyIcon = _interopRequireDefault(require("./components/RowBodyIcon"));
+var _RowHeadlineImageCaption = _interopRequireDefault(require("./components/RowHeadlineImageCaption"));
+var _RowHeadlineImageIcon = _interopRequireDefault(require("./components/RowHeadlineImageIcon"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Stepper = _interopRequireDefault(require("./components/Stepper"));
 var _useAuthState = require("./components/useAuthState");

package/lib/commonjs/mappings/YoutubePlayer.js

@@ -27,12 +27,6 @@ const SEED_DATA = {
       description: "Playlist of the Youtube videos.",
       defaultValue: null
     }),
-    mute: (0, _types.createStaticBoolProp)({
-      label: "Mute Audio",
-      description: "Mute the audio of the video.",
-      defaultValue: false,
-      required: false
-    }),
     autoplay: (0, _types.createStaticBoolProp)({
       label: "Auto Play",
       description: "Autoplay the video on load.",

package/lib/commonjs/utilities.js

@@ -57,6 +57,7 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
     marginStyles
   };
 }
+
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles
@@ -89,4 +90,4 @@ function getValueForRadioButton(value) {
   } else {
     throw new Error("Invalid value: ".concat(value));
   }
-}}
+}

package/lib/module/components/Row.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const Row = _ref => {
+  let {
+    titleTypeStyle,
+    titleColor,
+    subtitleTypeStyle,
+    subtitleColor,
+    title,
+    subtitle,
+    multilineSubtitle,
+    image,
+    right,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      padding: 16
+    }, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.leftContainer
+  }, image && /*#__PURE__*/React.createElement(Image, {
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    style: {
+      marginRight: 12,
+      width: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize,
+      height: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.textContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [titleTypeStyle, {
+      color: titleColor
+    }],
+    numberOfLines: 1
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    style: [subtitleTypeStyle, {
+      color: subtitleColor,
+      marginTop: 4
+    }],
+    numberOfLines: multilineSubtitle ? undefined : 1
+  }, subtitle) : null)), right && right());
+};
+const styles = StyleSheet.create({
+  leftContainer: {
+    flexDirection: "row",
+    flex: 1
+  },
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+export default withTheme(Row);

package/lib/module/components/RowBodyIcon.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowBodyIcon = _ref => {
+  let {
+    Icon,
+    title,
+    subtitle,
+    icon,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.body1,
+    titleColor: colors.medium,
+    subtitleTypeStyle: typography.subtitle2,
+    subtitleColor: colors.light,
+    title: title,
+    subtitle: subtitle,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: Config.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16
+      }
+    }),
+    style: style
+  });
+};
+export default withTheme(RowBodyIcon);

package/lib/module/components/RowHeadlineImageCaption.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../theming";
+import Row from "./Row";
+const RowHeadlineImageCaption = _ref => {
+  let {
+    title,
+    subtitle,
+    caption,
+    image,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...typography.caption,
+        color: colors.strong,
+        marginLeft: 16
+      }
+    }, caption),
+    style: style
+  });
+};
+export default withTheme(RowHeadlineImageCaption);

package/lib/module/components/RowHeadlineImageIcon.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowHeadlineImageIcon = _ref => {
+  let {
+    Icon,
+    icon,
+    title,
+    image,
+    subtitle,
+    multilineSubtitle = false,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    multilineSubtitle: multilineSubtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: multilineSubtitle ? Config.rowMultiLineIconSize : Config.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16,
+        alignSelf: multilineSubtitle ? "flex-start" : "center",
+        marginTop: multilineSubtitle ? 4 : 0
+      }
+    }),
+    style: style
+  });
+};
+export default withTheme(RowHeadlineImageIcon);