@draftbit/core 47.0.0-0362d7.2 → 47.0.0-3bcd8b.2

package/lib/commonjs/components/Banner.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Surface = _interopRequireDefault(require("./Surface"));
+var _shadow = _interopRequireDefault(require("../styles/shadow"));
+var _theming = require("../theming");
+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; }
+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 ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
+const Banner = _ref => {
+  let {
+    initiallyVisible = true,
+    dismissable = true,
+    icon,
+    buttonColor,
+    content,
+    contentStyle,
+    style,
+    theme,
+    Icon,
+    ...rest
+  } = _ref;
+  const [visible, setVisible] = React.useState(initiallyVisible);
+  React.useEffect(() => {
+    if (initiallyVisible) {
+      setVisible(true);
+    }
+  }, [initiallyVisible]);
+  const {
+    current: position
+  } = React.useRef(new _reactNative.Animated.Value(visible ? 1 : 0));
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    measured: false
+  });
+  React.useEffect(() => {
+    if (visible) {
+      // show
+      _reactNative.Animated.timing(position, {
+        duration: 250,
+        toValue: 1,
+        useNativeDriver: false
+      }).start();
+    } else {
+      // hide
+      _reactNative.Animated.timing(position, {
+        duration: 200,
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [visible, position]);
+  const handleLayout = _ref2 => {
+    let {
+      nativeEvent
+    } = _ref2;
+    const {
+      height
+    } = nativeEvent.layout;
+    setLayout({
+      height,
+      measured: true
+    });
+  };
+
+  // The banner animation has 2 parts:
+  // 1. Blank spacer element which animates its height to move the content
+  // 2. Actual banner which animates its translateY
+  // In initial render, we position everything normally and measure the height of the banner
+  // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
+  // We need this because we need to move the content below as if banner's height was being animated
+  // However we can't animated banner's height directly as it'll also resize the content inside
+  const height = _reactNative.Animated.multiply(position, layout.height);
+  const translateY = _reactNative.Animated.multiply(_reactNative.Animated.add(position, -1), layout.height);
+  return /*#__PURE__*/React.createElement(_Surface.default, _extends({}, rest, {
+    style: [styles.container, (0, _shadow.default)(ELEVATION), style]
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.wrapper, contentStyle]
+  }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+    style: {
+      height
+    }
+  }), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
+    onLayout: handleLayout,
+    style: [layout.measured || !visible ?
+    // If we have measured banner's height or it's invisible,
+    // Position it absolutely, the layout will be taken care of the spacer
+    [styles.absolute, {
+      transform: [{
+        translateY
+      }]
+    }] :
+    // Otherwise position it normally
+    null, !layout.measured && !visible ?
+    // If we haven't measured banner's height yet and it's invisible,
+    // hide it with opacity: 0 so user doesn't see it
+    {
+      opacity: 0
+    } : null]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.content, {
+      marginBottom: dismissable ? 0 : 16
+    }]
+  }, icon ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 40
+  })) : null, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [styles.message, {
+      color: theme.colors.text
+    }],
+    accessibilityLiveRegion: visible ? "polite" : "none",
+    accessibilityRole: "alert"
+  }, content)), dismissable ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.actions
+  }, /*#__PURE__*/React.createElement(_reactNative.Button, {
+    color: buttonColor || theme.colors.primary,
+    title: "Close",
+    onPress: () => setVisible(false)
+  })) : null)));
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    elevation: ELEVATION
+  },
+  wrapper: {
+    overflow: "hidden",
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: DEFAULT_MAX_WIDTH
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    width: "100%"
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    marginHorizontal: 8,
+    marginTop: 16,
+    marginBottom: 0
+  },
+  icon: {
+    margin: 8
+  },
+  message: {
+    flex: 1,
+    margin: 8
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    margin: 8
+  }
+});
+var _default = (0, _theming.withTheme)(Banner);
+exports.default = _default;
+//# sourceMappingURL=Banner.js.map

package/lib/commonjs/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ELEVATION","DEFAULT_MAX_WIDTH","Banner","initiallyVisible","dismissable","icon","buttonColor","content","contentStyle","style","theme","Icon","rest","visible","setVisible","React","useState","useEffect","current","position","useRef","Animated","Value","layout","setLayout","height","measured","timing","duration","toValue","useNativeDriver","start","handleLayout","nativeEvent","multiply","translateY","add","styles","container","shadow","wrapper","absolute","transform","opacity","marginBottom","message","color","colors","text","actions","primary","StyleSheet","create","elevation","overflow","alignSelf","width","maxWidth","top","flexDirection","justifyContent","marginHorizontal","marginTop","margin","flex","withTheme"],"sourceRoot":"../../src","sources":["Banner.tsx"],"mappings":"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"}

package/lib/commonjs/components/FormRow.js

@@ -11,6 +11,7 @@ var _Touchable = _interopRequireDefault(require("./Touchable"));
 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; }
+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 FormRow(_ref) {
   let {
     disabled,
@@ -25,27 +26,12 @@ function FormRow(_ref) {
     textStyles,
     viewStyles
   } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/React.createElement(_Touchable.default, {
+  return /*#__PURE__*/React.createElement(_Touchable.default, _extends({
     disabled: disabled,
     onPress: onPress,
     style: [styles.row, {
       flexDirection: direction
-    }, viewStyles],
-    ...rest
-  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: textStyles
-  }, label), children);
-}
-const styles = _reactNative.StyleSheet.create({
-  row: {
-    marginLeft: 8,
-    marginRight: 8,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }
-});
-//# sourceMappingURL=FormRow.js.map]
+    }, viewStyles]
   }, rest), /*#__PURE__*/React.createElement(_reactNative.Text, {
     style: textStyles
   }, label), children);

package/lib/commonjs/components/FormRow.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormRow","disabled","direction","children","label","style","onPress","rest","textStyles","viewStyles","extractStyles","React","createElement","Touchable","styles","row","flexDirection","Text","StyleSheet","create","marginLeft","marginRight","justifyContent","alignItems"],"sourceRoot":"../../src","sources":["FormRow.js"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AACrB,SAASA,OAAO,OAAoE;EAAA,IAAnE;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC;EAC7F,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACL,KAAK,CAAC;EACvD,oBAAQM,KAAK,CAACC,aAAa,CAACC,kBAAS,EAAE;IAAEZ,QAAQ,EAAEA,QAAQ;IAAEK,OAAO,EAAEA,OAAO;IAAED,KAAK,EAAE,CAACS,MAAM,CAACC,GAAG,EAAE;MAAEC,aAAa,EAAEd;IAAU,CAAC,EAAEO,UAAU,CAAC;IAAE,GAAGF;EAAK,CAAC,eACnJI,KAAK,CAACC,aAAa,CAACK,iBAAI,EAAE;IAAEZ,KAAK,EAAEG;EAAW,CAAC,EAAEJ,KAAK,CAAC,EACvDD,QAAQ,CAAC;AACjB;AACA,MAAMW,MAAM,GAAGI,uBAAU,CAACC,MAAM,CAAC;EAC7BJ,GAAG,EAAE;IACDK,UAAU,EAAE,CAAC;IACbC,WAAW,EAAE,CAAC;IACdL,aAAa,EAAE,KAAK;IACpBM,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC"}
+{"version":3,"names":["FormRow","disabled","direction","children","label","style","onPress","rest","textStyles","viewStyles","extractStyles","styles","row","flexDirection","StyleSheet","create","marginLeft","marginRight","justifyContent","alignItems"],"sourceRoot":"../../src","sources":["FormRow.tsx"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAAoC;AAAA;AAAA;AAAA;AAWrB,SAASA,OAAO,OAQrB;EAAA,IARsB;IAC9BC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACLC,OAAO;IACP,GAAGC;EACE,CAAC;EACN,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,wBAAa,EAACL,KAAK,CAAC;EACvD,oBACE,oBAAC,kBAAS;IACR,QAAQ,EAAEJ,QAAS;IACnB,OAAO,EAAEK,OAAQ;IACjB,KAAK,EAAE,CAACK,MAAM,CAACC,GAAG,EAAE;MAAEC,aAAa,EAAEX;IAAU,CAAC,EAAEO,UAAU;EAAE,GAC1DF,IAAI,gBAER,oBAAC,iBAAI;IAAC,KAAK,EAAEC;EAAW,GAAEJ,KAAK,CAAQ,EACtCD,QAAQ,CACC;AAEhB;AAEA,MAAMQ,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BH,GAAG,EAAE;IACHI,UAAU,EAAE,CAAC;IACbC,WAAW,EAAE,CAAC;IACdJ,aAAa,EAAE,KAAK;IACpBK,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/commonjs/components/Picker/PickerComponent.ios.js

@@ -18,7 +18,9 @@ var _utilities = require("../../utilities");
 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; }
+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 Picker = _ref => {
+  var _options$find;
   let {
     Icon,
     style,
@@ -32,7 +34,6 @@ const Picker = _ref => {
     },
     ...props
   } = _ref;
-  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -73,24 +74,26 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
+  const selectedLabel = selectedValue && (((_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) ?? selectedValue);
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.container, viewStyles]
   }, /*#__PURE__*/React.createElement(_Touchable.default, {
     disabled: disabled,
     onPress: toggleVisibility
-  }, /*#__PURE__*/React.createElement(_TextField.default, {
-    ...props,
+  }, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, props, {
     value: String(selectedLabel),
-    placeholder: placeholder,
+    placeholder: placeholder
     // @ts-ignore
-    ref: textField,
+    ,
+    ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+    ,
     disabled: disabled,
-    pointerEvents: "none",
+    pointerEvents: "none"
     // @ts-expect-error
+    ,
     style: stylesWithoutMargin,
     Icon: Icon
-  })), pickerVisible && /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+  }))), pickerVisible && /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: [styles.picker, {
       backgroundColor: colors.divider
     }]
@@ -136,26 +139,4 @@ const styles = _reactNative.StyleSheet.create({
 });
 var _default = (0, _theming.withTheme)(Picker);
 exports.default = _default;
-//# sourceMappingURL=PickerComponent.ios.js.map container: {
-    alignSelf: "stretch"
-  },
-  picker: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    justifyContent: "center"
-  },
-  pickerContainer: {
-    backgroundColor: "white",
-    flexDirection: "column",
-    width: "100%"
-  },
-  closeButton: {
-    alignSelf: "flex-end"
-  }
-});
-var _default = (0, _theming.withTheme)(Picker);
-exports.default = _default;
 //# sourceMappingURL=PickerComponent.ios.js.map

package/lib/commonjs/components/Picker/PickerComponent.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Picker","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","_a","_b","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","extractStyles","textField","React","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","omit","StyleSheet","flatten","selectedLabel","find","o","value","label","createElement","View","styles","container","Touchable","onPress","TextField","String","ref","pointerEvents","Portal","picker","divider","SafeAreaView","pickerContainer","Button","type","closeButton","NativePicker","map","Item","key","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width","withTheme"],"sourceRoot":"../../src","sources":["PickerComponent.ios.js"],"mappings":"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"}
+{"version":3,"names":["Picker","Icon","style","options","placeholder","selectedValue","disabled","onValueChange","theme","colors","props","viewStyles","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","backgroundColor","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","extractStyles","textField","React","useRef","undefined","pickerVisible","setIsPickerVisible","useState","toggleVisibility","current","toggleFocus","stylesWithoutMargin","omit","StyleSheet","flatten","selectedLabel","find","o","value","label","styles","container","String","picker","divider","pickerContainer","closeButton","map","create","alignSelf","position","bottom","left","right","flexDirection","justifyContent","width","withTheme"],"sourceRoot":"../../src","sources":["PickerComponent.ios.tsx"],"mappings":"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"}

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

@@ -10,7 +10,11 @@ var _PortalManager = _interopRequireDefault(require("./PortalManager"));
 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; }
+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); }
 const PortalContext = /*#__PURE__*/React.createContext(null);
+
 /**
  * Portal host renders all of its children `Portal` elements.
  * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
@@ -39,10 +43,10 @@ exports.PortalContext = PortalContext;
 class PortalHost extends React.Component {
   constructor() {
     super(...arguments);
-    this.setManager = manager => {
+    _defineProperty(this, "setManager", manager => {
       this.manager = manager;
-    };
-    this.mount = children => {
+    });
+    _defineProperty(this, "mount", children => {
       const key = this.nextKey++;
       if (this.manager) {
         this.manager.mount(key, children);
@@ -54,8 +58,8 @@ class PortalHost extends React.Component {
         });
       }
       return key;
-    };
-    this.update = (key, children) => {
+    });
+    _defineProperty(this, "update", (key, children) => {
       if (this.manager) {
         this.manager.update(key, children);
       } else {
@@ -72,8 +76,8 @@ class PortalHost extends React.Component {
           this.queue.push(op);
         }
       }
-    };
-    this.unmount = key => {
+    });
+    _defineProperty(this, "unmount", key => {
       if (this.manager) {
         this.manager.unmount(key);
       } else {
@@ -82,9 +86,10 @@ class PortalHost extends React.Component {
           key
         });
       }
-    };
-    this.nextKey = 0;
-    this.queue = [];
+    });
+    _defineProperty(this, "nextKey", 0);
+    _defineProperty(this, "queue", []);
+    _defineProperty(this, "manager", void 0);
   }
   componentDidMount() {
     const manager = this.manager;
@@ -123,41 +128,6 @@ class PortalHost extends React.Component {
   }
 }
 exports.default = PortalHost;
-PortalHost.displayName = "Portal.Host";
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-//# sourceMappingURL=PortalHost.js.map);
-            break;
-          case "update":
-            manager.update(action.key, action.children);
-            break;
-          case "unmount":
-            manager.unmount(action.key);
-            break;
-        }
-      }
-    }
-  }
-  render() {
-    return /*#__PURE__*/React.createElement(PortalContext.Provider, {
-      value: {
-        mount: this.mount,
-        update: this.update,
-        unmount: this.unmount
-      }
-    }, /*#__PURE__*/React.createElement(_reactNative.View, {
-      style: styles.container,
-      collapsable: false,
-      pointerEvents: "box-none"
-    }, this.props.children), /*#__PURE__*/React.createElement(_PortalManager.default, {
-      ref: this.setManager
-    }));
-  }
-}
-exports.default = PortalHost;
 _defineProperty(PortalHost, "displayName", "Portal.Host");
 const styles = _reactNative.StyleSheet.create({
   container: {

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

@@ -1 +1 @@
-{"version":3,"names":["PortalContext","React","createContext","PortalHost","Component","constructor","arguments","setManager","manager","mount","children","key","nextKey","queue","push","type","update","op","index","findIndex","o","unmount","componentDidMount","length","action","pop","render","createElement","Provider","value","View","style","styles","container","collapsable","pointerEvents","props","PortalManager","ref","displayName","StyleSheet","create","flex"],"sourceRoot":"../../src","sources":["PortalHost.js"],"mappings":"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"}
+{"version":3,"names":["PortalContext","React","createContext","PortalHost","Component","manager","children","key","nextKey","mount","queue","push","type","update","op","index","findIndex","o","unmount","componentDidMount","length","action","pop","render","styles","container","props","setManager","StyleSheet","create","flex"],"sourceRoot":"../../src","sources":["PortalHost.tsx"],"mappings":"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"}

package/lib/commonjs/components/RadioButton/RadioButton.js

@@ -12,6 +12,7 @@ var _context = require("./context");
 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; }
+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 RadioButton = _ref => {
   let {
     Icon,
@@ -33,25 +34,13 @@ const RadioButton = _ref => {
   } = (0, _context.useRadioButtonGroupContext)();
   const realValue = (0, _utilities.getValueForRadioButton)(value);
   const realContextValue = (0, _utilities.getValueForRadioButton)(contextValue);
-  const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
+  const isSelected = selected ?? realContextValue === realValue;
   const handlePress = () => {
     onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
   };
-  return /*#__PURE__*/React.createElement(_IconButton.default, {
+  return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
     Icon: Icon,
-    icon: isSelected ? selectedIcon : unselectedIcon,
-    color: isSelected ? color : unselectedColor,
-    disabled: disabled,
-    onPress: handlePress,
-    size: size,
-    style: style,
-    ...rest
-  });
-};
-var _default = RadioButton;
-exports.default = _default;
-//# sourceMappingURL=RadioButton.js.mapon,
     icon: isSelected ? selectedIcon : unselectedIcon,
     color: isSelected ? color : unselectedColor,
     disabled: disabled,

package/lib/commonjs/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","Config","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","useRadioButtonGroupContext","realValue","getValueForRadioButton","realContextValue","isSelected","handlePress","React","createElement","IconButton","icon"],"sourceRoot":"../../src","sources":["RadioButton.js"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuD;AAAA;AAAA;AACvD,MAAMA,WAAW,GAAG,QAAoP;EAAA,IAAnP;IAAEC,IAAI;IAAEC,QAAQ,GAAG,KAAK;IAAEC,KAAK;IAAEC,KAAK,GAAG,EAAE;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,OAAO;IAAEC,IAAI,GAAGC,eAAM,CAACC,eAAe;IAAEC,YAAY,GAAG,oCAAoC;IAAEC,cAAc,GAAG,sCAAsC;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC;EAC/P,MAAM;IAAEV,KAAK,EAAEW,YAAY;IAAEC;EAAc,CAAC,GAAG,IAAAC,mCAA0B,GAAE;EAC3E,MAAMC,SAAS,GAAG,IAAAC,iCAAsB,EAACf,KAAK,CAAC;EAC/C,MAAMgB,gBAAgB,GAAG,IAAAD,iCAAsB,EAACJ,YAAY,CAAC;EAC7D,MAAMM,UAAU,GAAGhB,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,KAAK,CAAC,GAAGA,QAAQ,GAAGe,gBAAgB,KAAKF,SAAS;EACvG,MAAMI,WAAW,GAAG,MAAM;IACtBf,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,OAAO,CAACW,SAAS,CAAC;IACpEF,aAAa,KAAK,IAAI,IAAIA,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACE,SAAS,CAAC;EAC1F,CAAC;EACD,oBAAQK,KAAK,CAACC,aAAa,CAACC,mBAAU,EAAE;IAAExB,IAAI,EAAEA,IAAI;IAAEyB,IAAI,EAAEL,UAAU,GAAGV,YAAY,GAAGC,cAAc;IAAET,KAAK,EAAEkB,UAAU,GAAGlB,KAAK,GAAGG,eAAe;IAAEJ,QAAQ,EAAEA,QAAQ;IAAEK,OAAO,EAAEe,WAAW;IAAEd,IAAI,EAAEA,IAAI;IAAEK,KAAK,EAAEA,KAAK;IAAE,GAAGC;EAAK,CAAC,CAAC;AACvO,CAAC;AAAC,eACad,WAAW;AAAA"}
+{"version":3,"names":["RadioButton","Icon","disabled","color","value","selected","unselectedColor","onPress","size","Config","radioButtonSize","selectedIcon","unselectedIcon","style","rest","contextValue","onValueChange","useRadioButtonGroupContext","realValue","getValueForRadioButton","realContextValue","isSelected","handlePress"],"sourceRoot":"../../src","sources":["RadioButton.tsx"],"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AACA;AAAuD;AAAA;AAAA;AAAA;AAiBvD,MAAMA,WAAuC,GAAG,QAa1C;EAAA,IAb2C;IAC/CC,IAAI;IACJC,QAAQ,GAAG,KAAK;IAChBC,KAAK;IACLC,KAAK,GAAG,EAAE;IACVC,QAAQ;IACRC,eAAe;IACfC,OAAO;IACPC,IAAI,GAAGC,eAAM,CAACC,eAAe;IAC7BC,YAAY,GAAG,oCAAoC;IACnDC,cAAc,GAAG,sCAAsC;IACvDC,KAAK;IACL,GAAGC;EACL,CAAC;EACC,MAAM;IAAEV,KAAK,EAAEW,YAAY;IAAEC;EAAc,CAAC,GAAG,IAAAC,mCAA0B,GAAE;EAE3E,MAAMC,SAAS,GAAG,IAAAC,iCAAsB,EAACf,KAAK,CAAC;EAC/C,MAAMgB,gBAAgB,GAAG,IAAAD,iCAAsB,EAACJ,YAAY,CAAC;EAC7D,MAAMM,UAAU,GAAGhB,QAAQ,IAAIe,gBAAgB,KAAKF,SAAS;EAE7D,MAAMI,WAAW,GAAG,MAAM;IACxBf,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGW,SAAS,CAAC;IACpBF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGE,SAAS,CAAC;EAC5B,CAAC;EAED,oBACE,oBAAC,mBAAU;IACT,IAAI,EAAEjB,IAAK;IACX,IAAI,EAAEoB,UAAU,GAAGV,YAAY,GAAGC,cAAe;IACjD,KAAK,EAAES,UAAU,GAAGlB,KAAK,GAAGG,eAAgB;IAC5C,QAAQ,EAAEJ,QAAS;IACnB,OAAO,EAAEoB,WAAY;IACrB,IAAI,EAAEd,IAAK;IACX,KAAK,EAAEK;EAAM,GACTC,IAAI,EACR;AAEN,CAAC;AAAC,eAEad,WAAW;AAAA"}

package/lib/commonjs/components/Surface.js

@@ -12,8 +12,7 @@ var _theming = require("../theming");
 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; }
-/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
-
+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 Surface = _ref => {
   let {
     elevation: propElevation,
@@ -43,23 +42,13 @@ const Surface = _ref => {
       return colors.surface;
     }
   };
-  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-    ...rest,
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
     style: [{
       backgroundColor: getBackgroundColor(),
       elevation,
       ...evalationStyles,
       ...restStyle
     }]
-  }, children);
-};
-var _default = (0, _theming.withTheme)(Surface);
-exports.default = _default;
-//# sourceMappingURL=Surface.js.map   backgroundColor: getBackgroundColor(),
-      elevation,
-      ...evalationStyles,
-      ...restStyle
-    }]
   }), children);
 };
 var _default = (0, _theming.withTheme)(Surface);

package/lib/commonjs/components/Surface.js.map

@@ -1 +1 @@
-{"version":3,"names":["Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","restStyle","StyleSheet","flatten","dark","isDarkTheme","mode","colors","evalationStyles","shadow","getBackgroundColor","overlay","surface","React","createElement","Animated","View","withTheme"],"sourceRoot":"../../src","sources":["Surface.js"],"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AALvC;;AAMA,MAAMA,OAAO,GAAG,QAAmE;EAAA,IAAlE;IAAEC,SAAS,EAAEC,aAAa;IAAEC,KAAK;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC;EAC1E,MAAM;IAAEL,SAAS,EAAEM,cAAc,GAAG,CAAC;IAAEC,eAAe;IAAE,GAAGC;EAAU,CAAC,GAAIC,uBAAU,CAACC,OAAO,CAACR,KAAK,CAAC,IAAI,CAAC,CAAE;EAC1G,MAAM;IAAES,IAAI,EAAEC,WAAW;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGX,KAAK;EACjD,MAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAc;EACjD,MAAMS,eAAe,GAAGf,SAAS,GAAG,IAAAgB,eAAM,EAAChB,SAAS,CAAC,GAAG,CAAC,CAAC;EAC1D,MAAMiB,kBAAkB,GAAG,MAAM;IAC7B,IAAIV,eAAe,EAAE;MACjB,OAAOA,eAAe;IAC1B,CAAC,MACI,IAAIK,WAAW,IAAIC,IAAI,KAAK,UAAU,EAAE;MACzC,OAAO,IAAAK,gBAAO,EAAClB,SAAS,EAAEc,MAAM,CAACK,OAAO,CAAC;IAC7C,CAAC,MACI;MACD,OAAOL,MAAM,CAACK,OAAO;IACzB;EACJ,CAAC;EACD,oBAAQC,KAAK,CAACC,aAAa,CAACC,qBAAQ,CAACC,IAAI,EAAE;IAAE,GAAGlB,IAAI;IAAEH,KAAK,EAAE,CACrD;MACIK,eAAe,EAAEU,kBAAkB,EAAE;MACrCjB,SAAS;MACT,GAAGe,eAAe;MAClB,GAAGP;IACP,CAAC;EACH,CAAC,EAAEJ,QAAQ,CAAC;AACtB,CAAC;AAAC,eACa,IAAAoB,kBAAS,EAACzB,OAAO,CAAC;AAAA"}
+{"version":3,"names":["Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","restStyle","StyleSheet","flatten","dark","isDarkTheme","mode","colors","evalationStyles","shadow","getBackgroundColor","overlay","surface","withTheme"],"sourceRoot":"../../src","sources":["Surface.tsx"],"mappings":";;;;;;AACA;AACA;AAQA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AASvC,MAAMA,OAAiD,GAAG,QAMpD;EAAA,IANqD;IACzDC,SAAS,EAAEC,aAAa;IACxBC,KAAK;IACLC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACL,CAAC;EACC,MAAM;IACJL,SAAS,EAAEM,cAAc,GAAG,CAAC;IAC7BC,eAAe;IACf,GAAGC;EACL,CAAC,GAAIC,uBAAU,CAACC,OAAO,CAACR,KAAK,CAAC,IAAI,CAAC,CAAe;EAElD,MAAM;IAAES,IAAI,EAAEC,WAAW;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGX,KAAK;EAEjD,MAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAc;EAEjD,MAAMS,eAAe,GAAGf,SAAS,GAAG,IAAAgB,eAAM,EAAChB,SAAS,CAAC,GAAG,CAAC,CAAC;EAE1D,MAAMiB,kBAAkB,GAAG,MAAM;IAC/B,IAAIV,eAAe,EAAE;MACnB,OAAOA,eAAe;IACxB,CAAC,MAAM,IAAIK,WAAW,IAAIC,IAAI,KAAK,UAAU,EAAE;MAC7C,OAAO,IAAAK,gBAAO,EAAClB,SAAS,EAAEc,MAAM,CAACK,OAAO,CAAC;IAC3C,CAAC,MAAM;MACL,OAAOL,MAAM,CAACK,OAAO;IACvB;EACF,CAAC;EAED,oBACE,oBAAC,qBAAQ,CAAC,IAAI,eACRd,IAAI;IACR,KAAK,EAAE,CACL;MACEE,eAAe,EAAEU,kBAAkB,EAAE;MACrCjB,SAAS;MACT,GAAGe,eAAe;MAClB,GAAGP;IACL,CAAC;EACD,IAEDJ,QAAQ,CACK;AAEpB,CAAC;AAAC,eAEa,IAAAgB,kBAAS,EAACrB,OAAO,CAAC;AAAA"}

package/lib/commonjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ActionSheetItem", {
     return _ActionSheet.ActionSheetItem;
   }
 });
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function () {
+    return _Banner.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -248,6 +254,7 @@ var _theming = require("./theming");
 var _Provider = _interopRequireDefault(require("./Provider"));
 var _DefaultTheme = _interopRequireDefault(require("./styles/DefaultTheme"));
 var _ScreenContainer = _interopRequireDefault(require("./components/ScreenContainer"));
+var _Banner = _interopRequireDefault(require("./components/Banner"));
 var _Button = require("./components/Button");
 var _Text = require("./components/Text");
 var _IconButton = _interopRequireDefault(require("./components/IconButton"));

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAGA;AAGA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAGA;AACA;AAMA;AACA;AACA;AACA;AAGA;AAGA;AAUA;AAGA;AAGA;AAIkC;AAAA;AAAA"}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAGA;AACA;AAGA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAGA;AACA;AAMA;AACA;AACA;AACA;AAGA;AAGA;AAUA;AAGA;AAGA;AAIkC;AAAA;AAAA"}

package/lib/module/components/Accordion/AccordionItem.js

@@ -1,3 +1,4 @@
+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 { Pressable, StyleSheet, View } from "react-native";
 import Text from "../Text";
@@ -17,10 +18,9 @@ const AccordionItem = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, {
-    style: [styles.container, viewStyles],
-    ...rest
-  }, /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [styles.container, viewStyles]
+  }, rest), /*#__PURE__*/React.createElement(View, {
     style: styles.row
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
@@ -52,23 +52,4 @@ const styles = StyleSheet.create({
   }
 });
 export default withTheme(AccordionItem);
-//# sourceMappingURL=AccordionItem.js.map StyleSheet.create({
-  container: {
-    padding: 8
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingLeft: 8
-  },
-  item: {
-    marginVertical: 6,
-    paddingLeft: 8
-  },
-  content: {
-    flex: 1,
-    justifyContent: "center"
-  }
-});
-export default withTheme(AccordionItem);
 //# sourceMappingURL=AccordionItem.js.map

package/lib/module/components/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","StyleSheet","View","Text","extractStyles","withTheme","AccordionItem","Icon","icon","label","style","iconColor","theme","rest","textStyles","viewStyles","createElement","styles","container","row","name","size","color","colors","primary","item","content","selectable","create","padding","flexDirection","alignItems","paddingLeft","marginVertical","flex","justifyContent"],"sourceRoot":"../../src","sources":["AccordionItem.js"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAS,cAAc;AAC3D,OAAOC,IAAI,MAAM,SAAS;AAC1B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,SAAS,QAAQ,eAAe;AACzC,MAAMC,aAAa,GAAG,QAA6D;EAAA,IAA5D;IAAEC,IAAI;IAAEC,IAAI;IAAEC,KAAK;IAAEC,KAAK;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC;EAC1E,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAGX,aAAa,CAACM,KAAK,CAAC;EACvD,oBAAQX,KAAK,CAACiB,aAAa,CAAChB,SAAS,EAAE;IAAEU,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAEH,UAAU,CAAC;IAAE,GAAGF;EAAK,CAAC,eACrFd,KAAK,CAACiB,aAAa,CAACd,IAAI,EAAE;IAAEQ,KAAK,EAAEO,MAAM,CAACE;EAAI,CAAC,EAC3CX,IAAI,gBAAIT,KAAK,CAACiB,aAAa,CAACT,IAAI,EAAE;IAAEa,IAAI,EAAEZ,IAAI;IAAEa,IAAI,EAAE,EAAE;IAAEC,KAAK,EAAEX,SAAS,IAAIC,KAAK,CAACW,MAAM,CAACC;EAAQ,CAAC,CAAC,GAAI,IAAI,eAC7GzB,KAAK,CAACiB,aAAa,CAACd,IAAI,EAAE;IAAEQ,KAAK,EAAE,CAACO,MAAM,CAACQ,IAAI,EAAER,MAAM,CAACS,OAAO;EAAE,CAAC,eAC9D3B,KAAK,CAACiB,aAAa,CAACb,IAAI,EAAE;IAAEwB,UAAU,EAAE,KAAK;IAAEjB,KAAK,EAAEI;EAAW,CAAC,EAAEL,KAAK,CAAC,CAAC,CAAC,CAAC;AAC7F,CAAC;AACD,MAAMQ,MAAM,GAAGhB,UAAU,CAAC2B,MAAM,CAAC;EAC7BV,SAAS,EAAE;IACPW,OAAO,EAAE;EACb,CAAC;EACDV,GAAG,EAAE;IACDW,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACjB,CAAC;EACDP,IAAI,EAAE;IACFQ,cAAc,EAAE,CAAC;IACjBD,WAAW,EAAE;EACjB,CAAC;EACDN,OAAO,EAAE;IACLQ,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EACpB;AACJ,CAAC,CAAC;AACF,eAAe9B,SAAS,CAACC,aAAa,CAAC"}
+{"version":3,"names":["React","Pressable","StyleSheet","View","Text","extractStyles","withTheme","AccordionItem","Icon","icon","label","style","iconColor","theme","rest","textStyles","viewStyles","styles","container","row","colors","primary","item","content","create","padding","flexDirection","alignItems","paddingLeft","marginVertical","flex","justifyContent"],"sourceRoot":"../../src","sources":["AccordionItem.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,SAAS,EACTC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,OAAOC,IAAI,MAAM,SAAS;AAE1B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,SAAS,QAAQ,eAAe;AAWzC,MAAMC,aAAa,GAAG,QAQT;EAAA,IARU;IACrBC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,KAAK;IACL,GAAGC;EACE,CAAC;EACN,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAGX,aAAa,CAACM,KAAK,CAAC;EAEvD,oBACE,oBAAC,SAAS;IAAC,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEF,UAAU;EAAE,GAAKF,IAAI,gBACxD,oBAAC,IAAI;IAAC,KAAK,EAAEG,MAAM,CAACE;EAAI,GACrBV,IAAI,gBACH,oBAAC,IAAI;IACH,IAAI,EAAEA,IAAK;IACX,IAAI,EAAE,EAAG;IACT,KAAK,EAAEG,SAAS,IAAIC,KAAK,CAACO,MAAM,CAACC;EAAQ,EACzC,GACA,IAAI,eACR,oBAAC,IAAI;IAAC,KAAK,EAAE,CAACJ,MAAM,CAACK,IAAI,EAAEL,MAAM,CAACM,OAAO;EAAE,gBACzC,oBAAC,IAAI;IAAC,UAAU,EAAE,KAAM;IAAC,KAAK,EAAER;EAAW,GACxCL,KAAK,CACD,CACF,CACF,CACG;AAEhB,CAAC;AAED,MAAMO,MAAM,GAAGf,UAAU,CAACsB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,OAAO,EAAE;EACX,CAAC;EACDN,GAAG,EAAE;IACHO,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,WAAW,EAAE;EACf,CAAC;EACDN,IAAI,EAAE;IACJO,cAAc,EAAE,CAAC;IACjBD,WAAW,EAAE;EACf,CAAC;EACDL,OAAO,EAAE;IACPO,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAezB,SAAS,CAACC,aAAa,CAAC"}

package/lib/module/components/Banner.js

@@ -0,0 +1,158 @@
+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 { Button, Text, View, StyleSheet, Animated } from "react-native";
+import Surface from "./Surface";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+const ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
+const Banner = _ref => {
+  let {
+    initiallyVisible = true,
+    dismissable = true,
+    icon,
+    buttonColor,
+    content,
+    contentStyle,
+    style,
+    theme,
+    Icon,
+    ...rest
+  } = _ref;
+  const [visible, setVisible] = React.useState(initiallyVisible);
+  React.useEffect(() => {
+    if (initiallyVisible) {
+      setVisible(true);
+    }
+  }, [initiallyVisible]);
+  const {
+    current: position
+  } = React.useRef(new Animated.Value(visible ? 1 : 0));
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    measured: false
+  });
+  React.useEffect(() => {
+    if (visible) {
+      // show
+      Animated.timing(position, {
+        duration: 250,
+        toValue: 1,
+        useNativeDriver: false
+      }).start();
+    } else {
+      // hide
+      Animated.timing(position, {
+        duration: 200,
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [visible, position]);
+  const handleLayout = _ref2 => {
+    let {
+      nativeEvent
+    } = _ref2;
+    const {
+      height
+    } = nativeEvent.layout;
+    setLayout({
+      height,
+      measured: true
+    });
+  };
+
+  // The banner animation has 2 parts:
+  // 1. Blank spacer element which animates its height to move the content
+  // 2. Actual banner which animates its translateY
+  // In initial render, we position everything normally and measure the height of the banner
+  // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
+  // We need this because we need to move the content below as if banner's height was being animated
+  // However we can't animated banner's height directly as it'll also resize the content inside
+  const height = Animated.multiply(position, layout.height);
+  const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
+  return /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
+    style: [styles.container, shadow(ELEVATION), style]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.wrapper, contentStyle]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      height
+    }
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    onLayout: handleLayout,
+    style: [layout.measured || !visible ?
+    // If we have measured banner's height or it's invisible,
+    // Position it absolutely, the layout will be taken care of the spacer
+    [styles.absolute, {
+      transform: [{
+        translateY
+      }]
+    }] :
+    // Otherwise position it normally
+    null, !layout.measured && !visible ?
+    // If we haven't measured banner's height yet and it's invisible,
+    // hide it with opacity: 0 so user doesn't see it
+    {
+      opacity: 0
+    } : null]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, {
+      marginBottom: dismissable ? 0 : 16
+    }]
+  }, icon ? /*#__PURE__*/React.createElement(View, {
+    style: styles.icon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 40
+  })) : null, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.message, {
+      color: theme.colors.text
+    }],
+    accessibilityLiveRegion: visible ? "polite" : "none",
+    accessibilityRole: "alert"
+  }, content)), dismissable ? /*#__PURE__*/React.createElement(View, {
+    style: styles.actions
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: buttonColor || theme.colors.primary,
+    title: "Close",
+    onPress: () => setVisible(false)
+  })) : null)));
+};
+const styles = StyleSheet.create({
+  container: {
+    elevation: ELEVATION
+  },
+  wrapper: {
+    overflow: "hidden",
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: DEFAULT_MAX_WIDTH
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    width: "100%"
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    marginHorizontal: 8,
+    marginTop: 16,
+    marginBottom: 0
+  },
+  icon: {
+    margin: 8
+  },
+  message: {
+    flex: 1,
+    margin: 8
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    margin: 8
+  }
+});
+export default withTheme(Banner);
+//# sourceMappingURL=Banner.js.map

package/lib/module/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","Text","View","StyleSheet","Animated","Surface","shadow","withTheme","ELEVATION","DEFAULT_MAX_WIDTH","Banner","initiallyVisible","dismissable","icon","buttonColor","content","contentStyle","style","theme","Icon","rest","visible","setVisible","useState","useEffect","current","position","useRef","Value","layout","setLayout","height","measured","timing","duration","toValue","useNativeDriver","start","handleLayout","nativeEvent","multiply","translateY","add","styles","container","wrapper","absolute","transform","opacity","marginBottom","message","color","colors","text","actions","primary","create","elevation","overflow","alignSelf","width","maxWidth","top","flexDirection","justifyContent","marginHorizontal","marginTop","margin","flex"],"sourceRoot":"../../src","sources":["Banner.tsx"],"mappings":"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"}

package/lib/module/index.js

@@ -5,6 +5,7 @@ export { default as DefaultTheme } from "./styles/DefaultTheme";
 
 // BASIC
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 
 // BUTTONS
 export { Button } from "./components/Button";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","ScreenContainer","Button","Link","IconButton","Touchable","DatePicker","NumberInput","TextField","Picker","Checkbox","CheckboxGroup","CheckboxRow","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Slider","Stepper","StarRating","Switch","SwitchRow","SVG","Center","Circle","Square","Row","Stack","Spacer","Swiper","SwiperItem","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,SAAS,EAAEC,aAAa,QAAQ,WAAW;AACpD,SAASC,OAAO,IAAIC,QAAQ,QAAQ,YAAY;AAChD,SAASD,OAAO,IAAIE,YAAY,QAAQ,uBAAuB;;AAE/D;AACA,SAASF,OAAO,IAAIG,eAAe,QAAQ,8BAA8B;;AAEzE;AACA,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASL,OAAO,IAAIM,UAAU,QAAQ,yBAAyB;AAC/D,SAASN,OAAO,IAAIO,SAAS,QAAQ,wBAAwB;;AAE7D;AACA,SAASP,OAAO,IAAIQ,UAAU,QAAQ,oCAAoC;AAC1E,SAASR,OAAO,IAAIS,WAAW,QAAQ,0BAA0B;AACjE,SAAST,OAAO,IAAIU,SAAS,QAAQ,wBAAwB;AAC7D,SAASV,OAAO,IAAIW,MAAM,QAAQ,4BAA4B;;AAE9D;AACA,SAASC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,QAAQ,uBAAuB;AAC5E,SACEC,WAAW,EACXC,gBAAgB,EAChBC,cAAc,EACdC,qBAAqB,QAChB,gCAAgC;AACvC,SAASlB,OAAO,IAAImB,MAAM,QAAQ,qBAAqB;AACvD,SAASnB,OAAO,IAAIoB,OAAO,QAAQ,sBAAsB;AACzD,SAASpB,OAAO,IAAIqB,UAAU,QAAQ,yBAAyB;AAC/D,SAASrB,OAAO,IAAIsB,MAAM,EAAEC,SAAS,QAAQ,qBAAqB;;AAElE;AACA,SAASvB,OAAO,IAAIwB,GAAG,QAAQ,kBAAkB;;AAEjD;AACA,SACEC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,GAAG,EACHC,KAAK,EACLC,MAAM,QACD,qBAAqB;;AAE5B;AACA,SAASC,MAAM,EAAEC,UAAU,QAAQ,qBAAqB;;AAExD;AACA,SAASC,cAAc,EAAEC,aAAa,QAAQ,wBAAwB;;AAEtE;AACA,SACEC,WAAW,EACXC,eAAe,EACfC,iBAAiB,QACZ,0BAA0B"}
+{"version":3,"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","ScreenContainer","Banner","Button","Link","IconButton","Touchable","DatePicker","NumberInput","TextField","Picker","Checkbox","CheckboxGroup","CheckboxRow","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Slider","Stepper","StarRating","Switch","SwitchRow","SVG","Center","Circle","Square","Row","Stack","Spacer","Swiper","SwiperItem","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,SAAS,EAAEC,aAAa,QAAQ,WAAW;AACpD,SAASC,OAAO,IAAIC,QAAQ,QAAQ,YAAY;AAChD,SAASD,OAAO,IAAIE,YAAY,QAAQ,uBAAuB;;AAE/D;AACA,SAASF,OAAO,IAAIG,eAAe,QAAQ,8BAA8B;AACzE,SAASH,OAAO,IAAII,MAAM,QAAQ,qBAAqB;;AAEvD;AACA,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASN,OAAO,IAAIO,UAAU,QAAQ,yBAAyB;AAC/D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,wBAAwB;;AAE7D;AACA,SAASR,OAAO,IAAIS,UAAU,QAAQ,oCAAoC;AAC1E,SAAST,OAAO,IAAIU,WAAW,QAAQ,0BAA0B;AACjE,SAASV,OAAO,IAAIW,SAAS,QAAQ,wBAAwB;AAC7D,SAASX,OAAO,IAAIY,MAAM,QAAQ,4BAA4B;;AAE9D;AACA,SAASC,QAAQ,EAAEC,aAAa,EAAEC,WAAW,QAAQ,uBAAuB;AAC5E,SACEC,WAAW,EACXC,gBAAgB,EAChBC,cAAc,EACdC,qBAAqB,QAChB,gCAAgC;AACvC,SAASnB,OAAO,IAAIoB,MAAM,QAAQ,qBAAqB;AACvD,SAASpB,OAAO,IAAIqB,OAAO,QAAQ,sBAAsB;AACzD,SAASrB,OAAO,IAAIsB,UAAU,QAAQ,yBAAyB;AAC/D,SAAStB,OAAO,IAAIuB,MAAM,EAAEC,SAAS,QAAQ,qBAAqB;;AAElE;AACA,SAASxB,OAAO,IAAIyB,GAAG,QAAQ,kBAAkB;;AAEjD;AACA,SACEC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,GAAG,EACHC,KAAK,EACLC,MAAM,QACD,qBAAqB;;AAE5B;AACA,SAASC,MAAM,EAAEC,UAAU,QAAQ,qBAAqB;;AAExD;AACA,SAASC,cAAc,EAAEC,aAAa,QAAQ,wBAAwB;;AAEtE;AACA,SACEC,WAAW,EACXC,eAAe,EACfC,iBAAiB,QACZ,0BAA0B"}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { View, ViewStyle, StyleProp } from "react-native";
+import type { IconSlot } from "../interfaces/Icon";
+import type { Theme } from "../styles/DefaultTheme";
+type Props = {
+    initiallyVisible: boolean;
+    dismissable: boolean;
+    buttonColor?: string;
+    icon?: string;
+    content?: string;
+    contentStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    ref?: React.RefObject<View>;
+    /**
+     * @optional
+     */
+    theme: Theme;
+} & IconSlot;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
+export default _default;
+//# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,IAAI,EACJ,SAAS,EAET,SAAS,EAEV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAKpD,KAAK,KAAK,GAAG;IACX,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA2Kb,wBAAiC"}

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

@@ -3,6 +3,7 @@ export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 export { Button } from "./components/Button";
 export { Link } from "./components/Text";
 export { default as IconButton } from "./components/IconButton";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAG1E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,EACH,KAAK,EACL,MAAM,GACP,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvE,OAAO,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,EACH,KAAK,EACL,MAAM,GACP,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvE,OAAO,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,GAClB,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.0.0-0362d7.2+0362d76",
+  "version": "47.0.0-3bcd8b.2+3bcd8b6",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^47.0.0-0362d7.2+0362d76",
+    "@draftbit/types": "^47.0.0-3bcd8b.2+3bcd8b6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -81,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "0362d76e8d9a1f4b45a7a47b9d0b339597bbd44c"
+  "gitHead": "3bcd8b649dd4d465eb5fba1664077ccc7fc8b878"
 }

package/src/components/Banner.js

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Button, Text, View, StyleSheet, Animated, } from "react-native";
+import Surface from "./Surface";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+const ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
+const Banner = ({ initiallyVisible = true, dismissable = true, icon, buttonColor, content, contentStyle, style, theme, Icon, ...rest }) => {
+    const [visible, setVisible] = React.useState(initiallyVisible);
+    React.useEffect(() => {
+        if (initiallyVisible) {
+            setVisible(true);
+        }
+    }, [initiallyVisible]);
+    const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
+    const [layout, setLayout] = React.useState({
+        height: 0,
+        measured: false,
+    });
+    React.useEffect(() => {
+        if (visible) {
+            // show
+            Animated.timing(position, {
+                duration: 250,
+                toValue: 1,
+                useNativeDriver: false,
+            }).start();
+        }
+        else {
+            // hide
+            Animated.timing(position, {
+                duration: 200,
+                toValue: 0,
+                useNativeDriver: false,
+            }).start();
+        }
+    }, [visible, position]);
+    const handleLayout = ({ nativeEvent }) => {
+        const { height } = nativeEvent.layout;
+        setLayout({ height, measured: true });
+    };
+    // The banner animation has 2 parts:
+    // 1. Blank spacer element which animates its height to move the content
+    // 2. Actual banner which animates its translateY
+    // In initial render, we position everything normally and measure the height of the banner
+    // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
+    // We need this because we need to move the content below as if banner's height was being animated
+    // However we can't animated banner's height directly as it'll also resize the content inside
+    const height = Animated.multiply(position, layout.height);
+    const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
+    return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
+        React.createElement(View, { style: [styles.wrapper, contentStyle] },
+            React.createElement(Animated.View, { style: { height } }),
+            React.createElement(Animated.View, { onLayout: handleLayout, style: [
+                    layout.measured || !visible
+                        ? // If we have measured banner's height or it's invisible,
+                            // Position it absolutely, the layout will be taken care of the spacer
+                            [styles.absolute, { transform: [{ translateY }] }]
+                        : // Otherwise position it normally
+                            null,
+                    !layout.measured && !visible
+                        ? // If we haven't measured banner's height yet and it's invisible,
+                            // hide it with opacity: 0 so user doesn't see it
+                            { opacity: 0 }
+                        : null,
+                ] },
+                React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
+                    icon ? (React.createElement(View, { style: styles.icon },
+                        React.createElement(Icon, { name: icon, size: 40 }))) : null,
+                    React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
+                dismissable ? (React.createElement(View, { style: styles.actions },
+                    React.createElement(Button, { color: buttonColor || theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
+};
+const styles = StyleSheet.create({
+    container: {
+        elevation: ELEVATION,
+    },
+    wrapper: {
+        overflow: "hidden",
+        alignSelf: "center",
+        width: "100%",
+        maxWidth: DEFAULT_MAX_WIDTH,
+    },
+    absolute: {
+        position: "absolute",
+        top: 0,
+        width: "100%",
+    },
+    content: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        marginHorizontal: 8,
+        marginTop: 16,
+        marginBottom: 0,
+    },
+    icon: {
+        margin: 8,
+    },
+    message: {
+        flex: 1,
+        margin: 8,
+    },
+    actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        margin: 8,
+    },
+});
+export default withTheme(Banner);

package/src/components/Banner.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+import {
+  Button,
+  Text,
+  View,
+  ViewStyle,
+  StyleSheet,
+  StyleProp,
+  Animated,
+} from "react-native";
+import Surface from "./Surface";
+import type { IconSlot } from "../interfaces/Icon";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+
+const ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
+
+type Props = {
+  initiallyVisible: boolean;
+  dismissable: boolean;
+  buttonColor?: string;
+  icon?: string;
+  content?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  ref?: React.RefObject<View>;
+  /**
+   * @optional
+   */
+  theme: Theme;
+} & IconSlot;
+
+type NativeEvent = {
+  nativeEvent: {
+    layout: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+};
+
+const Banner: React.FC<React.PropsWithChildren<Props>> = ({
+  initiallyVisible = true,
+  dismissable = true,
+  icon,
+  buttonColor,
+  content,
+  contentStyle,
+  style,
+  theme,
+  Icon,
+  ...rest
+}) => {
+  const [visible, setVisible] = React.useState(initiallyVisible);
+
+  React.useEffect(() => {
+    if (initiallyVisible) {
+      setVisible(true);
+    }
+  }, [initiallyVisible]);
+
+  const { current: position } = React.useRef<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+  const [layout, setLayout] = React.useState<{
+    height: number;
+    measured: boolean;
+  }>({
+    height: 0,
+    measured: false,
+  });
+
+  React.useEffect(() => {
+    if (visible) {
+      // show
+      Animated.timing(position, {
+        duration: 250,
+        toValue: 1,
+        useNativeDriver: false,
+      }).start();
+    } else {
+      // hide
+      Animated.timing(position, {
+        duration: 200,
+        toValue: 0,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [visible, position]);
+
+  const handleLayout = ({ nativeEvent }: NativeEvent) => {
+    const { height } = nativeEvent.layout;
+    setLayout({ height, measured: true });
+  };
+
+  // The banner animation has 2 parts:
+  // 1. Blank spacer element which animates its height to move the content
+  // 2. Actual banner which animates its translateY
+  // In initial render, we position everything normally and measure the height of the banner
+  // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
+  // We need this because we need to move the content below as if banner's height was being animated
+  // However we can't animated banner's height directly as it'll also resize the content inside
+  const height = Animated.multiply(position, layout.height);
+
+  const translateY = Animated.multiply(
+    Animated.add(position, -1),
+    layout.height
+  );
+
+  return (
+    <Surface
+      {...rest}
+      style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
+    >
+      <View style={[styles.wrapper, contentStyle]}>
+        <Animated.View style={{ height }} />
+        <Animated.View
+          onLayout={handleLayout}
+          style={[
+            layout.measured || !visible
+              ? // If we have measured banner's height or it's invisible,
+                // Position it absolutely, the layout will be taken care of the spacer
+                [styles.absolute, { transform: [{ translateY }] }]
+              : // Otherwise position it normally
+                null,
+            !layout.measured && !visible
+              ? // If we haven't measured banner's height yet and it's invisible,
+                // hide it with opacity: 0 so user doesn't see it
+                { opacity: 0 }
+              : null,
+          ]}
+        >
+          <View
+            style={[styles.content, { marginBottom: dismissable ? 0 : 16 }]}
+          >
+            {icon ? (
+              <View style={styles.icon}>
+                <Icon name={icon} size={40} />
+              </View>
+            ) : null}
+            <Text
+              style={[styles.message, { color: theme.colors.text }]}
+              accessibilityLiveRegion={visible ? "polite" : "none"}
+              accessibilityRole="alert"
+            >
+              {content}
+            </Text>
+          </View>
+          {dismissable ? (
+            <View style={styles.actions}>
+              <Button
+                color={buttonColor || theme.colors.primary}
+                title="Close"
+                onPress={() => setVisible(false)}
+              />
+            </View>
+          ) : null}
+        </Animated.View>
+      </View>
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    elevation: ELEVATION,
+  },
+  wrapper: {
+    overflow: "hidden",
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: DEFAULT_MAX_WIDTH,
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    width: "100%",
+  },
+  content: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    marginHorizontal: 8,
+    marginTop: 16,
+    marginBottom: 0,
+  },
+  icon: {
+    margin: 8,
+  },
+  message: {
+    flex: 1,
+    margin: 8,
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    margin: 8,
+  },
+});
+
+export default withTheme(Banner);

package/src/index.js

@@ -4,6 +4,7 @@ export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 // BASIC
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 // BUTTONS
 export { Button } from "./components/Button";
 export { Link } from "./components/Text";

package/src/index.tsx

@@ -5,6 +5,7 @@ export { default as DefaultTheme } from "./styles/DefaultTheme";
 
 // BASIC
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 
 // BUTTONS
 export { Button } from "./components/Button";